create reusable controls indicator for reply or new

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

@@ -0,0 +1,64 @@
+import { Video, Mic, ChevronDown } from "lucide-react";
+import { useRecordingStore } from "@/stores/recording-store";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+interface ControlsIndicatorProps {
+  type: "reply" | "new";
+}
+export default function ControlsIndicator({ type }: ControlsIndicatorProps) {
+  const recordingMode = useRecordingStore((s) => s.recordingMode);
+  const setRecordingMode = useRecordingStore((s) => s.setRecordingMode);
+
+  return (
+    <div className="flex items-center gap-2 text-xs">
+      <Button
+        onClick={() =>
+          setRecordingMode(recordingMode === "video" ? "audio" : "video")
+        }
+        title={
+          recordingMode === "video"
+            ? "Switch to audio-only"
+            : "Switch to video"
+        }
+        variant="secondary"
+        className={cn(
+          "text-xs",
+          "text-muted-foreground hover:text-white/90",
+        )}
+      >
+        {recordingMode === "video" ? (
+          <>
+            <Video className="h-3.5 w-3.5" />
+            <p>Video</p>
+          </>
+        ) : (
+          <>
+            <Mic className="h-3.5 w-3.5" />
+            <span>Audio</span>
+          </>
+        )}
+      </Button>
+      <div className="text-muted-foreground">
+        Hold{" "}
+        <kbd
+          className={cn(
+            "bg-muted rounded px-1.5 py-0.5 font-mono",
+          )}
+        >
+          `
+        </kbd>{" "}
+        to {type === "reply" ? "reply " : "start "}
+        · Press{" "}
+        <kbd
+          className={cn(
+            "bg-muted rounded px-1.5 py-0.5 font-mono",
+          )}
+        >
+          T
+        </kbd>{" "}
+        for text
+      </div>
+    </div>
+  );
+}

js/src/features/send/reply-indicator.tsx

@@ -1,53 +0,0 @@
-import { Video, Mic } from "lucide-react";
-import { useRecordingStore } from "@/stores/recording-store";
-import { cn } from "@/lib/utils";
-
-export function ReplyIndicator() {
-  const recordingMode = useRecordingStore((s) => s.recordingMode);
-  const setRecordingMode = useRecordingStore((s) => s.setRecordingMode);
-
-  return (
-    <div className="flex items-center gap-2">
-      <button
-        type="button"
-        onClick={() =>
-          setRecordingMode(recordingMode === "video" ? "audio" : "video")
-        }
-        className={cn(
-          "rounded p-1 transition-colors hover:bg-white/20",
-          "text-white/60 hover:text-white/90",
-        )}
-        title={
-          recordingMode === "video"
-            ? "Switch to audio-only"
-            : "Switch to video"
-        }
-      >
-        {recordingMode === "video" ? (
-          <Video className="h-3.5 w-3.5" />
-        ) : (
-          <Mic className="h-3.5 w-3.5" />
-        )}
-      </button>
-      <div className="text-muted-foreground text-xs">
-        Hold{" "}
-        <kbd
-          className={cn(
-            "bg-muted rounded px-1.5 py-0.5 font-mono text-xs",
-          )}
-        >
-          `
-        </kbd>{" "}
-        to reply · Press{" "}
-        <kbd
-          className={cn(
-            "bg-muted rounded px-1.5 py-0.5 font-mono text-xs",
-          )}
-        >
-          T
-        </kbd>{" "}
-        to text
-      </div>
-    </div>
-  );
-}