feat: send screen recordings (#128)

* first pass implementation

* remove screenrecord shortcut hint

* refactor

* fix: prevent mirror review of screen recording

* feat: allow recording with webcam overlay

* fix: review screen recording without clipped content

* tidy keyboard hints consistent position

* refactor: re-use one component for screen picker

huddles and screen clips use same picker component now. We had to make
sure that tailwind works for both of them.

* fix: improve visibility of keyboard hints

During compose video or screen recording, the keyboard hints were
invisible if the content was super bright.

js/src/features/particles/media-particle-view.tsx

@@ -147,7 +147,7 @@ export const MediaParticleView = forwardRef<MediaParticleHandle, MediaParticleVi
         playsInline
         onEnded={onEnded}
         onTimeUpdate={handleTimeUpdate}
-        className="h-full w-full object-cover"
+        className={`h-full w-full ${particle.properties.source === "screen" ? "object-contain bg-black" : "object-cover"}`}
       />
 
       {transcript && (

js/src/features/particles/stream-view.tsx

@@ -130,6 +130,7 @@ const STREAM_VIEW_KEYBINDINGS: KeybindingGroup[] = [
     label: "Compose",
     bindings: [
       { keys: ["Hold", "`"], description: "Reply" },
+      { keys: ["S"], description: "Screen record" },
       { keys: ["T"], description: "Text compose" },
       { keys: ["H"], description: "Join huddle" },
     ],
@@ -435,6 +436,9 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
         disabled={streamParticle.status === "closed"}
       />
 
+      {/* Bottom gradient safe zone for keyboard hints */}
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 z-[5] h-1/4 bg-gradient-to-t from-black/60 to-transparent" />
+
       {/* BottomBar */}
       <BottomBar
         visible={controlsVisible}