refactor(calls): one ScreenshareConfirm and one room-policy hook for both call bars

Fixes #101

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA

src/app/features/call-status/CallControl.tsx

@@ -1,18 +1,5 @@
-import {
-  Box,
-  Button,
-  Chip,
-  color,
-  config,
-  Icon,
-  IconButton,
-  Icons,
-  Spinner,
-  Text,
-  Tooltip,
-  TooltipProvider,
-} from 'folds';
-import React, { useCallback, useEffect, useState } from 'react';
+import { Box, Chip, Icon, IconButton, Icons, Spinner, Text, Tooltip, TooltipProvider } from 'folds';
+import React, { useCallback, useState } from 'react';
 import { useSetAtom } from 'jotai';
 import { StatusDivider } from './components';
 import { CallEmbed, useCallControlState } from '../../plugins/call';
@@ -20,6 +7,7 @@ import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { callEmbedAtom } from '../../state/callEmbed';
 import { MobileTouchTarget } from '../../styles/mobile.css';
 import { useRoomCallPolicy } from '../../hooks/useRoomCallPolicy';
+import { ScreenshareConfirm } from '../call/ScreenshareConfirm';
 
 type MicrophoneButtonProps = {
   enabled: boolean;
@@ -199,14 +187,6 @@ export function CallControl({
   const showCamera = allowCamera || video;
   const showScreenshare = allowScreenshare || screenshare;
   const [shareConfirm, setShareConfirm] = useState(false);
-  useEffect(() => {
-    if (!shareConfirm) return undefined;
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setShareConfirm(false);
-    };
-    window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
-  }, [shareConfirm]);
 
   const handleMicrophoneToggle = useCallback(
     () => callEmbed.control.toggleMicrophone(),
@@ -230,64 +210,15 @@ export function CallControl({
 
   return (
     <Box shrink="No" alignItems="Center" gap="300" style={{ position: 'relative' }}>
-      {shareConfirm && (
-        <>
-          <div
-            style={{ position: 'fixed', inset: 0, zIndex: 99 }}
-            onClick={() => setShareConfirm(false)}
-            aria-hidden="true"
-          />
-          <Box
-            style={{
-              position: 'absolute',
-              bottom: '110%',
-              left: 0,
-              background: color.Surface.Container,
-              border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
-              borderRadius: '0.75rem',
-              padding: '1rem 1.25rem',
-              zIndex: 100,
-              minWidth: '260px',
-              maxWidth: `calc(100vw - 2 * ${config.space.S400})`,
-              boxShadow: '0 8px 32px rgba(0,0,0,0.35)',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '0.75rem',
-            }}
-          >
-            <Text size="T300" style={{ fontWeight: 600 }}>
-              Share your screen?
-            </Text>
-            <Text size="T200" style={{ opacity: 0.75 }}>
-              Your screen will be visible to all participants in this call.
-            </Text>
-            <Box gap="200">
-              <Button
-                size="300"
-                variant="Success"
-                fill="Solid"
-                radii="300"
-                onClick={() => {
-                  callEmbed.control.toggleScreenshare();
-                  setShareConfirm(false);
-                }}
-              >
-                <Text size="B300">Share</Text>
-              </Button>
-              <Button
-                size="300"
-                variant="Secondary"
-                fill="Soft"
-                radii="300"
-                outlined
-                onClick={() => setShareConfirm(false)}
-              >
-                <Text size="B300">Cancel</Text>
-              </Button>
-            </Box>
-          </Box>
-        </>
-      )}
+      <ScreenshareConfirm
+        open={shareConfirm}
+        align="Start"
+        onConfirm={() => {
+          callEmbed.control.toggleScreenshare();
+          setShareConfirm(false);
+        }}
+        onCancel={() => setShareConfirm(false)}
+      />
       <Box alignItems="Inherit" gap="200">
         <MicrophoneButton
           enabled={microphone}