enhance keyboard experience

Now we have network root and stream-view defining their own hints instead of trying to re-use one component. And we also introduce an overlay for additional commands for people.
2026-04-08 08:40:07 -07:00
parent f95ccf134d
commit 7e11d66dc2
5 changed files with 271 additions and 111 deletions
@@ -1,90 +0,0 @@
-import { Video, Mic, Paperclip } from "lucide-react";
-import { useMediaSettingsStore } from "@/stores/media-settings-store";
-import { PropsWithChildren } from "react";
-
-interface ControlsIndicatorProps {
-  type: "reply" | "new";
-  attachmentCount?: number;
-  onOpenAttachments?: () => void;
-  showEscape?: boolean;
-}
-export default function ControlsIndicator({
-  type,
-  attachmentCount = 0,
-  showEscape = false,
-  onOpenAttachments,
-  children
-}: PropsWithChildren<ControlsIndicatorProps>) {
-  const recordingMode = useMediaSettingsStore((s) => s.recordingMode);
-  const setRecordingMode = useMediaSettingsStore((s) => s.setRecordingMode);
-
-  return (
-    <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>
-      )}
-      {type === "new" && (
-        <span>
-          <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-            ↑↓
-          </kbd>{" "}
-          <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-            Enter
-          </kbd>{" "}
-          navigate
-        </span>
-      )}
-      <span>
-        <kbd
-          role="button"
-          onClick={() =>
-            setRecordingMode(recordingMode === "video" ? "audio" : "video")
-          }
-          title={
-            recordingMode === "video"
-              ? "Switch to audio-only"
-              : "Switch to video"
-          }
-          className="cursor-pointer rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs transition-colors hover:text-white/80"
-        >
-          {recordingMode === "video" ? (
-            <><Video className="inline size-3" /> Video</>
-          ) : (
-            <><Mic className="inline size-3" /> Audio</>
-          )}
-        </kbd>
-      </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"}
-      </span>
-      <span>
-        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-          T
-        </kbd>{" "}
-        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>
-      )}
-      {children}
-    </div>
-  );
-}