improve attachments experience for media particles

js/src/features/compose/controls-indicator.tsx

@@ -1,38 +1,58 @@
-import { Video, Mic } from "lucide-react";
-import { cn } from "@/lib/utils";
+import { Video, Mic, Paperclip } from "lucide-react";
 import { useMediaSettingsStore } from "@/stores/media-settings-store";
-import { Button } from "@/components/ui/button";
 
 interface ControlsIndicatorProps {
   type: "reply" | "new";
+  attachmentCount?: number;
+  onOpenAttachments?: () => void;
+  showEscape?: boolean;
 }
-export default function ControlsIndicator({ type }: ControlsIndicatorProps) {
+export default function ControlsIndicator({
+  type,
+  attachmentCount = 0,
+  showEscape = false,
+  onOpenAttachments,
+}: ControlsIndicatorProps) {
   const recordingMode = useMediaSettingsStore((s) => s.recordingMode);
   const setRecordingMode = useMediaSettingsStore((s) => s.setRecordingMode);
 
   return (
-    <div className="flex items-center gap-2 text-xs rounded-full pl-2 pr-1 py-1 bg-black/30 backdrop-blur-sm">
-      <div className="text-muted-foreground">
-        Hold{" "}
-        <kbd
-          className={cn(
-            "bg-muted rounded px-1.5 py-0.5 font-mono",
-          )}
-        >
-          `
+    <div className="flex items-center gap-4 text-sm text-white/50">
+      {showEscape && (
+        <span>
+          <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+            Esc
+          </kbd>{" "}
+          back
+        </span>
+      )}
+      <span>
+        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+          Hold `
         </kbd>{" "}
-        to {type === "reply" ? "reply " : "start "}
-        · Press{" "}
-        <kbd
-          className={cn(
-            "bg-muted rounded px-1.5 py-0.5 font-mono",
-          )}
-        >
+        to {type === "reply" ? "reply" : "start"}
+      </span>
+      <span>
+        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
           T
         </kbd>{" "}
-        for text
-      </div>
-      <Button
+        text
+      </span>
+      {attachmentCount > 0 && (
+        <button
+          type="button"
+          onClick={onOpenAttachments}
+          className="flex items-center gap-1 text-white/50 transition-colors hover:text-white/80"
+        >
+          <kbd className="self-end rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+            A
+          </kbd>{" "}
+          <Paperclip className="size-3" />
+          {attachmentCount} {attachmentCount === 1 ? "attachment" : "attachments"}
+        </button>
+      )}
+      <button
+        type="button"
         onClick={() =>
           setRecordingMode(recordingMode === "video" ? "audio" : "video")
         }
@@ -41,24 +61,20 @@ export default function ControlsIndicator({ type }: ControlsIndicatorProps) {
             ? "Switch to audio-only"
             : "Switch to video"
         }
-        variant="secondary"
-        className={cn(
-          "text-xs rounded-full",
-          "text-muted-foreground hover:text-white/90",
-        )}
+        className="flex items-center gap-1 rounded bg-white/10 px-1.5 py-0.5 text-xs text-white/50 transition-colors hover:text-white/80"
       >
         {recordingMode === "video" ? (
           <>
-            <Video className="h-3.5 w-3.5" />
-            <p>Video</p>
+            <Video className="size-3" />
+            Video
           </>
         ) : (
           <>
-            <Mic className="h-3.5 w-3.5" />
-            <span>Audio</span>
+            <Mic className="size-3" />
+            Audio
           </>
         )}
-      </Button>
+      </button>
     </div>
   );
 }