Improve asset mention UX with empty-state dropdown and icon-only chips

components/video-page/comment-rich-text.tsx

@@ -66,12 +66,11 @@ export function CommentRichText({ text, onAssetMentionClick, assets = [] }: Comm
         <span
           className={
             isVideoAsset
-              ? 'inline-flex h-4 shrink-0 items-center gap-0.5 rounded bg-violet-500/25 px-1 text-[9px] font-semibold tracking-wide text-violet-200'
-              : 'inline-flex h-4 shrink-0 items-center gap-0.5 rounded bg-emerald-500/25 px-1 text-[9px] font-semibold tracking-wide text-emerald-200'
+              ? 'inline-flex h-4 w-4 shrink-0 items-center justify-center rounded bg-violet-500/25 text-violet-200'
+              : 'inline-flex h-4 w-4 shrink-0 items-center justify-center rounded bg-emerald-500/25 text-emerald-200'
           }
         >
           {isVideoAsset ? <Video className="h-2.5 w-2.5" /> : <ImageIcon className="h-2.5 w-2.5" />}
-          {isVideoAsset ? 'VID' : 'SS'}
         </span>
         <span className="truncate max-w-[190px] sm:max-w-[240px]">
           @{label}

components/video-page/mention-textarea.tsx

@@ -109,7 +109,8 @@ export function MentionTextarea({
   };
 
   const handleKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = (event) => {
-    if (mentionRange && filteredAssets.length > 0) {
+    if (mentionRange) {
+      if (filteredAssets.length > 0) {
         if (event.key === 'ArrowDown') {
           event.preventDefault();
           setActiveIndex((prev) => (prev + 1) % filteredAssets.length);
@@ -126,6 +127,8 @@ export function MentionTextarea({
           if (selected) insertAssetMention(selected);
           return;
         }
+      }
+
       if (event.key === 'Escape') {
         event.preventDefault();
         closeMentions();
@@ -154,9 +157,12 @@ export function MentionTextarea({
         }}
       />
 
-      {mentionRange && filteredAssets.length > 0 && (
+      {mentionRange && (
         <div className="absolute left-0 right-0 bottom-full mb-1 z-30 rounded-md border bg-popover shadow-md overflow-hidden">
-          {filteredAssets.map((asset, index) => (
+          {filteredAssets.length === 0 ? (
+            <div className="px-2 py-1.5 text-xs text-muted-foreground">No asset found</div>
+          ) : (
+            filteredAssets.map((asset, index) => (
               <button
                 key={asset.id}
                 type="button"
@@ -172,7 +178,8 @@ export function MentionTextarea({
                 <span className="font-medium">@{asset.displayName}</span>
                 <span className="ml-2 text-muted-foreground">{asset.provider}</span>
               </button>
-          ))}
+            ))
+          )}
         </div>
       )}
     </div>