💄(frontend) use distinct expand/collapse icons for fullscreen actions

Replace fullscreen icons with expand-diagonal-line and collapse-diagonal-line

src/frontend/src/features/rooms/livekit/components/ScreenShareZoomControls.tsx

@@ -2,8 +2,9 @@ import { css } from '@/styled-system/css'
 import { HStack } from '@/styled-system/jsx'
 import { Button } from '@/primitives'
 import {
+  RiCollapseDiagonalLine,
+  RiExpandDiagonalLine,
   RiFullscreenExitLine,
-  RiFullscreenLine,
   RiZoomInLine,
   RiZoomOutLine,
 } from '@remixicon/react'
@@ -36,7 +37,8 @@ export const ScreenShareZoomControls = ({
   const announce = useScreenReaderAnnounce()
 
   const [isFullscreen, setIsFullscreen] = useState(false)
-  const wasOwnFullscreen = useRef(false)
+  // Tracks whether this tile's container triggered fullscreen (vs another share's).
+  const wasThisTileFullscreen = useRef(false)
   const [isFullscreenAvailable] = useState(
     () => typeof document !== 'undefined' && document.fullscreenEnabled
   )
@@ -50,10 +52,10 @@ export const ScreenShareZoomControls = ({
       setIsFullscreen(isThisTileFullscreen)
 
       if (isThisTileFullscreen) {
-        wasOwnFullscreen.current = true
+        wasThisTileFullscreen.current = true
         announce(t('fullScreenEntered'), 'assertive')
-      } else if (wasOwnFullscreen.current) {
+      } else if (wasThisTileFullscreen.current) {
-        wasOwnFullscreen.current = false
+        wasThisTileFullscreen.current = false
         announce(t('fullScreenExited'), 'assertive')
       }
     }
@@ -163,9 +165,9 @@ export const ScreenShareZoomControls = ({
             onPress={toggleFullScreen}
           >
             {isFullscreen ? (
-              <RiFullscreenExitLine size={18} />
+              <RiCollapseDiagonalLine size={18} />
             ) : (
-              <RiFullscreenLine size={18} />
+              <RiExpandDiagonalLine size={18} />
             )}
           </Button>
         )}

src/frontend/src/features/rooms/livekit/components/controls/Options/FullScreenMenuItem.tsx

@@ -1,4 +1,4 @@
-import { RiFullscreenExitLine, RiFullscreenLine } from '@remixicon/react'
+import { RiCollapseDiagonalLine, RiExpandDiagonalLine } from '@remixicon/react'
 import { MenuItem } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { menuRecipe } from '@/primitives/menuRecipe'
@@ -20,12 +20,12 @@ export const FullScreenMenuItem = () => {
     >
       {isCurrentlyFullscreen ? (
         <>
-          <RiFullscreenExitLine size={20} />
+          <RiCollapseDiagonalLine size={20} />
           {t('fullscreen.exit')}
         </>
       ) : (
         <>
-          <RiFullscreenLine size={20} />
+          <RiExpandDiagonalLine size={20} />
           {t('fullscreen.enter')}
         </>
       )}