fix: implement stream playback cleaner structure

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

@@ -1,5 +1,5 @@
 import { Video, Mic } from "lucide-react";
-import { useComposeStore } from "@/stores/compose-store";
+import { useRecordingMode } from "@/hooks/use-recording-mode";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 
@@ -7,8 +7,7 @@ interface ControlsIndicatorProps {
   type: "reply" | "new";
 }
 export default function ControlsIndicator({ type }: ControlsIndicatorProps) {
-  const recordingMode = useComposeStore((s) => s.recordingMode);
-  const setRecordingMode = useComposeStore((s) => s.setRecordingMode);
+  const [recordingMode, setRecordingMode] = useRecordingMode();
 
   return (
     <div className="flex items-center gap-2 text-xs">
@@ -23,7 +22,7 @@ export default function ControlsIndicator({ type }: ControlsIndicatorProps) {
         }
         variant="secondary"
         className={cn(
-          "text-xs",
+          "text-xs rounded-full",
           "text-muted-foreground hover:text-white/90",
         )}
       >