✨(frontend) apply OneToOneFocusLayout to main room 1-to-1

Show remote fullscreen with local thumbnail when no pin.
♻️(frontend) use OneToOneFocusLayout in PiP stage
2026-07-27 04:09:26 +00:00 · 2026-07-20 13:44:43 +02:00 · 2026-07-20 13:42:01 +02:00 · 2026-07-20 13:41:18 +02:00 · 2026-07-20 11:21:40 +02:00 · 2026-07-13 11:32:46 +02:00
16 changed files with 430 additions and 230 deletions
@@ -75,6 +75,7 @@ db.sqlite3
 # IDEs
 .idea/
 .vscode/
+.cursor/
 *.iml
 .devcontainer

@@ -14,6 +14,7 @@ and this project adheres to
 - ✨(frontend) add participant color gradient when camera is off #1490
 - ✨(all) allow forcing SSO display name for authenticated users
 - ➕(frontend) install vite-plugin-static-copy for MediaPipe WASM assets
+- ✨(frontend) share OneToOneFocusLayout between PiP and main room

 ### Changed

@@ -23,11 +24,16 @@ and this project adheres to
 - ♻️(frontend) refactor background processors to use the new API
 - ♻️(frontend) inline model weights to avoid loading them from remote
 - ♻️(frontend) inline MediaPipe WASM modules to avoid loading from remote
+- ⬆️(frontend) upgrade posthog-js from 1.387.0 to 1.391.2
+- ⬆️(frontend) upgrade react-stately from 3.47.0 to 3.48.0
+- ⬆️(frontend) upgrade react-aria from 3.49.0 to 3.50.0
+- ⬆️(frontend) upgrade react-aria-components from 1.18.0 to 1.19.0

 ### Fixed

 - 🩹(backend) identify externally provisioned users to PostHog
 - 🐛(backend) fix info panel crash for unregistered rooms
+- ♿️(frontend) focus side panel container on open #1452

 ## [1.23.0] - 2026-07-08

@@ -37,7 +37,7 @@ RUN --mount=type=cache,target=/root/.cache/uv \
  uv sync --locked --no-dev

 # ---- mails ----
-FROM node:20 AS mail-builder
+FROM node:22 AS mail-builder

 COPY ./src/mail /mail/app

@@ -30,13 +30,13 @@
        "i18next-parser": "9.4.0",
        "i18next-resources-to-backend": "1.2.1",
        "livekit-client": "2.19.2",
-        "posthog-js": "1.387.0",
+        "posthog-js": "1.391.2",
        "react": "18.3.1",
-        "react-aria": "3.49.0",
-        "react-aria-components": "1.18.0",
+        "react-aria": "3.50.0",
+        "react-aria-components": "1.19.0",
        "react-dom": "18.3.1",
        "react-i18next": "17.0.8",
-        "react-stately": "3.47.0",
+        "react-stately": "3.48.0",
        "use-sound": "5.0.0",
        "valtio": "2.3.2",
        "wouter": "3.10.0"
@@ -112,6 +112,62 @@
        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
      }
    },
+    "node_modules/@adobe/react-spectrum/node_modules/react-aria": {
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/react-aria/-/react-aria-3.49.0.tgz",
+      "integrity": "sha512-4+oK9FwJQWYhyA5zLfj/feOGY0zZbkE1muoF4gyxMroHVypjcYaRSTlJwvxph2zIlxt757KX6xIK2wJ5Aw1Kog==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@internationalized/date": "^3.12.2",
+        "@internationalized/number": "^3.6.7",
+        "@internationalized/string": "^3.2.9",
+        "@react-types/shared": "^3.35.0",
+        "@swc/helpers": "^0.5.0",
+        "aria-hidden": "^1.2.3",
+        "clsx": "^2.0.0",
+        "react-stately": "3.47.0",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@adobe/react-spectrum/node_modules/react-aria-components": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/react-aria-components/-/react-aria-components-1.18.0.tgz",
+      "integrity": "sha512-FhRQjuDkH4WhgFv+O2sYTzK3JzdZTGpBeaqfRlfTo+DcSZzD8elJEkytHe7SDpcexVKeire8NVd7OruZHfCVoA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@internationalized/date": "^3.12.2",
+        "@react-types/shared": "^3.35.0",
+        "@swc/helpers": "^0.5.0",
+        "client-only": "^0.0.1",
+        "react-aria": "3.49.0",
+        "react-stately": "3.47.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@adobe/react-spectrum/node_modules/react-stately": {
+      "version": "3.47.0",
+      "resolved": "https://registry.npmjs.org/react-stately/-/react-stately-3.47.0.tgz",
+      "integrity": "sha512-H3ar+SOWP920EbVg7qWfP3fZjZiwhlEJAEJQqjt+w8oKijCwFgr0+R4941PIHscOXRNRvEOjvWilitImC0DdBg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@internationalized/date": "^3.12.2",
+        "@internationalized/number": "^3.6.7",
+        "@internationalized/string": "^3.2.9",
+        "@react-types/shared": "^3.35.0",
+        "@swc/helpers": "^0.5.0",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
    "node_modules/@babel/code-frame": {
      "version": "7.29.0",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
@@ -1754,9 +1810,9 @@
      }
    },
    "node_modules/@react-types/shared": {
-      "version": "3.35.0",
-      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.35.0.tgz",
-      "integrity": "sha512-iNWvuzEwANttpQpdlu8nPBtdHb0mcCMj1ZTH//iRB5E/14IAnyRlR25rxH7pNLyzHINsPGEKnWvpwDMCT6vziQ==",
+      "version": "3.36.0",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.36.0.tgz",
+      "integrity": "sha512-DkP/H0C2YjjS7gZWKNqOmU8a16qHPjQNdzMwmTq9SzplM6Iw0kVMTZ0OIoe6FOgGqa+FwMsE2QbPjh/n3g/jXQ==",
      "license": "Apache-2.0",
      "peerDependencies": {
        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
@@ -9074,19 +9130,19 @@
      "license": "MIT"
    },
    "node_modules/posthog-js": {
-      "version": "1.387.0",
-      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.387.0.tgz",
-      "integrity": "sha512-Pv1jUMySMN62zoAxdJBJPV8n62lkHdjuWhpeU7izczc5Dqbx3hhqO2hkrNTI8Yx1ezmWk2qUHZs03FuOBubdFQ==",
+      "version": "1.391.2",
+      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.391.2.tgz",
+      "integrity": "sha512-q0DZN6ljchSnAFJIXf+sQFTPlsLjTlRa+TvrL+QRb6413BGtib/MNiQy1bnwLKt8KR+f6xJYvkqdLyty9s4Aww==",
      "license": "SEE LICENSE IN LICENSE",
      "dependencies": {
-        "@posthog/core": "^1.33.0",
-        "@posthog/types": "^1.387.0",
+        "@posthog/core": "^1.35.3",
+        "@posthog/types": "^1.390.2",
        "core-js": "^3.38.1",
        "dompurify": "^3.3.2",
        "fflate": "^0.4.8",
-        "preact": "^10.28.2",
+        "preact": "^10.29.2",
        "query-selector-shadow-dom": "^1.0.1",
-        "web-vitals": "^5.1.0"
+        "web-vitals": "^5.3.0"
      }
    },
    "node_modules/powershell-utils": {
@@ -9103,13 +9159,21 @@
      }
    },
    "node_modules/preact": {
-      "version": "10.28.3",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.28.3.tgz",
-      "integrity": "sha512-tCmoRkPQLpBeWzpmbhryairGnhW9tKV6c6gr/w+RhoRoKEJwsjzipwp//1oCpGPOchvSLaAPlpcJi9MwMmoPyA==",
+      "version": "10.29.7",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.29.7.tgz",
+      "integrity": "sha512-DCHYrK/B10yUD3ZjLfhZ3WIE/9Vf9VFUODcRE2dRomTYDpJk6z6L9wecSfhfE6M9ZTHUdyQkoC46arIDhEV84Q==",
      "license": "MIT",
      "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/preact"
+      },
+      "peerDependencies": {
+        "preact-render-to-string": ">=5"
+      },
+      "peerDependenciesMeta": {
+        "preact-render-to-string": {
+          "optional": true
+        }
      }
    },
    "node_modules/prelude-ls": {
@@ -9316,19 +9380,19 @@
      }
    },
    "node_modules/react-aria": {
-      "version": "3.49.0",
-      "resolved": "https://registry.npmjs.org/react-aria/-/react-aria-3.49.0.tgz",
-      "integrity": "sha512-4+oK9FwJQWYhyA5zLfj/feOGY0zZbkE1muoF4gyxMroHVypjcYaRSTlJwvxph2zIlxt757KX6xIK2wJ5Aw1Kog==",
+      "version": "3.50.0",
+      "resolved": "https://registry.npmjs.org/react-aria/-/react-aria-3.50.0.tgz",
+      "integrity": "sha512-S0Os6QZk33fzUAKu1QLT9afoUaCBt1ZNdoiq0n2YMVgKIdNIQS8zxiZ8O9hYE6QyDkHKjD6q39LQZ+qaSAIgjw==",
      "license": "Apache-2.0",
      "dependencies": {
        "@internationalized/date": "^3.12.2",
        "@internationalized/number": "^3.6.7",
        "@internationalized/string": "^3.2.9",
-        "@react-types/shared": "^3.35.0",
+        "@react-types/shared": "^3.36.0",
        "@swc/helpers": "^0.5.0",
        "aria-hidden": "^1.2.3",
        "clsx": "^2.0.0",
-        "react-stately": "3.47.0",
+        "react-stately": "3.48.0",
        "use-sync-external-store": "^1.6.0"
      },
      "peerDependencies": {
@@ -9337,17 +9401,17 @@
      }
    },
    "node_modules/react-aria-components": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/react-aria-components/-/react-aria-components-1.18.0.tgz",
-      "integrity": "sha512-FhRQjuDkH4WhgFv+O2sYTzK3JzdZTGpBeaqfRlfTo+DcSZzD8elJEkytHe7SDpcexVKeire8NVd7OruZHfCVoA==",
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/react-aria-components/-/react-aria-components-1.19.0.tgz",
+      "integrity": "sha512-2smSS5nqJ8cGYMQezuUXveZm7eMyHCqTN6mDpylQBYLYbdF5dxCCuW1DHn1VKLe1DybSfPvX/cZtJlDmvFfn8A==",
      "license": "Apache-2.0",
      "dependencies": {
        "@internationalized/date": "^3.12.2",
-        "@react-types/shared": "^3.35.0",
+        "@react-types/shared": "^3.36.0",
        "@swc/helpers": "^0.5.0",
        "client-only": "^0.0.1",
-        "react-aria": "3.49.0",
-        "react-stately": "3.47.0"
+        "react-aria": "3.50.0",
+        "react-stately": "3.48.0"
      },
      "peerDependencies": {
        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
@@ -9401,15 +9465,15 @@
      "license": "MIT"
    },
    "node_modules/react-stately": {
-      "version": "3.47.0",
-      "resolved": "https://registry.npmjs.org/react-stately/-/react-stately-3.47.0.tgz",
-      "integrity": "sha512-H3ar+SOWP920EbVg7qWfP3fZjZiwhlEJAEJQqjt+w8oKijCwFgr0+R4941PIHscOXRNRvEOjvWilitImC0DdBg==",
+      "version": "3.48.0",
+      "resolved": "https://registry.npmjs.org/react-stately/-/react-stately-3.48.0.tgz",
+      "integrity": "sha512-ImicSAG+lTotAe5izcs1fz49Zk48w7pDusqYg04WaPhCoej8BJ24soMu3iLXIrsi273s4P1gZrYGrqReMfgEEA==",
      "license": "Apache-2.0",
      "dependencies": {
        "@internationalized/date": "^3.12.2",
        "@internationalized/number": "^3.6.7",
        "@internationalized/string": "^3.2.9",
-        "@react-types/shared": "^3.35.0",
+        "@react-types/shared": "^3.36.0",
        "@swc/helpers": "^0.5.0",
        "use-sync-external-store": "^1.6.0"
      },
@@ -11585,9 +11649,9 @@
      }
    },
    "node_modules/web-vitals": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-5.1.0.tgz",
-      "integrity": "sha512-ArI3kx5jI0atlTtmV0fWU3fjpLmq/nD3Zr1iFFlJLaqa5wLBkUSzINwBPySCX/8jRyjlmy1Volw1kz1g9XE4Jg==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-5.3.0.tgz",
+      "integrity": "sha512-q6LWsLatGYZp5VGBIOvbTj6JBV2nOmC8KvWztXBmwJcfFAzhwKwbOxhUH306XY3CcaZDUlSmSuNPBsCn0bFu+g==",
      "license": "Apache-2.0"
    },
    "node_modules/webrtc-adapter": {
@@ -37,13 +37,13 @@
    "i18next-parser": "9.4.0",
    "i18next-resources-to-backend": "1.2.1",
    "livekit-client": "2.19.2",
-    "posthog-js": "1.387.0",
+    "posthog-js": "1.391.2",
    "react": "18.3.1",
-    "react-aria": "3.49.0",
-    "react-aria-components": "1.18.0",
+    "react-aria": "3.50.0",
+    "react-aria-components": "1.19.0",
    "react-dom": "18.3.1",
    "react-i18next": "17.0.8",
-    "react-stately": "3.47.0",
+    "react-stately": "3.48.0",
    "use-sound": "5.0.0",
    "valtio": "2.3.2",
    "wouter": "3.10.0"
@@ -0,0 +1,119 @@
+import { memo } from 'react'
+import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
+import { styled } from '@/styled-system/jsx'
+import { cva } from '@/styled-system/css'
+import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile'
+import { getTrackKey } from '@/features/layout/utils/trackSelection'
+
+type OneToOneFocusLayoutProps = {
+  mainTrack?: TrackReferenceOrPlaceholder
+  thumbnailTrack?: TrackReferenceOrPlaceholder
+  disableTileControls?: boolean
+  /** Controls thumbnail dimensions – 'pip' for small PiP window, 'room' for the main viewport. */
+  context?: 'pip' | 'room'
+}
+
+/**
+ * Focus layout for 1-to-1 calls: one main tile filling the area (letterboxed)
+ * with an optional thumbnail overlay at the bottom-right.
+ *
+ * Shared between PiP and the main room – pass `disableTileControls` in PiP
+ * where hover controls should be hidden.
+ */
+export const OneToOneFocusLayout = memo(
+  ({
+    mainTrack,
+    thumbnailTrack,
+    disableTileControls,
+    context = 'room',
+  }: OneToOneFocusLayoutProps) => {
+    return (
+      <FocusContainer>
+        {mainTrack && (
+          <MainSlot>
+            <ParticipantTile
+              key={getTrackKey(mainTrack)}
+              trackRef={mainTrack}
+              disableTileControls={disableTileControls}
+            />
+          </MainSlot>
+        )}
+        {thumbnailTrack && (
+          <Thumbnail context={context}>
+            <ParticipantTile
+              key={getTrackKey(thumbnailTrack)}
+              trackRef={thumbnailTrack}
+              disableTileControls={disableTileControls}
+            />
+          </Thumbnail>
+        )}
+      </FocusContainer>
+    )
+  }
+)
+OneToOneFocusLayout.displayName = 'OneToOneFocusLayout'
+
+const FocusContainer = styled('div', {
+  base: {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    borderRadius: '8px',
+    overflow: 'hidden',
+    backgroundColor: 'primaryDark.100',
+    boxSizing: 'border-box',
+  },
+})
+
+const MainSlot = styled('div', {
+  base: {
+    width: '100%',
+    height: '100%',
+    borderRadius: '8px',
+    overflow: 'hidden',
+    '& .lk-participant-tile': {
+      width: '100%',
+      height: '100%',
+    },
+    '& .lk-participant-media-video': {
+      objectFit: 'contain',
+    },
+  },
+})
+
+const Thumbnail = styled(
+  'div',
+  cva({
+    base: {
+      position: 'absolute',
+      right: '1.25rem',
+      bottom: '1.25rem',
+      aspectRatio: '16 / 9',
+      borderRadius: '8px',
+      overflow: 'hidden',
+      boxShadow: 'md',
+      zIndex: 2,
+      '& .lk-participant-tile': {
+        width: '100%',
+        height: '100%',
+      },
+    },
+    variants: {
+      context: {
+        pip: {
+          width: '42%',
+          maxWidth: '220px',
+          minWidth: '140px',
+        },
+        room: {
+          width: '20%',
+          maxWidth: '320px',
+          minWidth: '180px',
+        },
+      },
+    },
+    defaultVariants: {
+      context: 'room',
+    },
+  })
+)
@@ -1,86 +0,0 @@
-import { memo } from 'react'
-import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
-import { styled } from '@/styled-system/jsx'
-import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile'
-import { getTrackKey } from '../../utils/pipTrackSelection'
-
-type PipFocusLayoutProps = {
-  mainTrack?: TrackReferenceOrPlaceholder
-  thumbnailTrack?: TrackReferenceOrPlaceholder
-}
-
-/**
- * Focus layout used when 1-2 tracks are visible in the PiP window.
- *
- * The main tile is letterboxed (object-fit: contain) so the camera is
- * never stretched to a non-video aspect and leaves dark padding
- * above/below when the window shape doesn't match the source.
- * The thumbnail keeps the usual cover fill.
- */
-export const PipFocusLayout = memo(
-  ({ mainTrack, thumbnailTrack }: PipFocusLayoutProps) => {
-    return (
-      <FocusContainer>
-        {mainTrack && (
-          <MainSlot>
-            <ParticipantTile
-              key={getTrackKey(mainTrack)}
-              trackRef={mainTrack}
-              disableTileControls
-            />
-          </MainSlot>
-        )}
-        {thumbnailTrack && (
-          <Thumbnail>
-            <ParticipantTile
-              key={getTrackKey(thumbnailTrack)}
-              trackRef={thumbnailTrack}
-              disableTileControls
-            />
-          </Thumbnail>
-        )}
-      </FocusContainer>
-    )
-  }
-)
-PipFocusLayout.displayName = 'PipFocusLayout'
-
-const FocusContainer = styled('div', {
-  base: {
-    position: 'relative',
-    width: '100%',
-    height: '100%',
-    borderRadius: '8px',
-    overflow: 'hidden',
-    backgroundColor: 'primaryDark.100',
-    boxSizing: 'border-box',
-  },
-})
-
-const MainSlot = styled('div', {
-  base: {
-    width: '100%',
-    height: '100%',
-    borderRadius: '8px',
-    overflow: 'hidden',
-    '& .lk-participant-media-video': {
-      objectFit: 'contain',
-    },
-  },
-})
-
-const Thumbnail = styled('div', {
-  base: {
-    position: 'absolute',
-    right: '1.25rem',
-    bottom: '1.25rem',
-    width: '42%',
-    maxWidth: '220px',
-    minWidth: '140px',
-    aspectRatio: '16 / 9',
-    borderRadius: '8px',
-    overflow: 'hidden',
-    boxShadow: 'md',
-    zIndex: 2,
-  },
-})
@@ -4,7 +4,7 @@ import { styled } from '@/styled-system/jsx'
 import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile'
 import { usePipElementSize } from '../../hooks/usePipElementSize'
 import { computePipGridLayout } from '../../utils/pipGrid'
-import { getTrackKey } from '../../utils/pipTrackSelection'
+import { getTrackKey } from '@/features/layout/utils/trackSelection'

 type PipGridLayoutProps = {
  tracks: TrackReferenceOrPlaceholder[]
@@ -2,7 +2,7 @@ import { memo } from 'react'
 import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
 import { styled } from '@/styled-system/jsx'
 import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile'
-import { getTrackKey } from '../../utils/pipTrackSelection'
+import { getTrackKey } from '@/features/layout/utils/trackSelection'

 type PipScreenShareLayoutProps = {
  screenShareTrack: TrackReferenceOrPlaceholder
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react'
 import { usePagination, useTracks } from '@livekit/components-react'
 import { RoomEvent, Track } from 'livekit-client'
 import { styled } from '@/styled-system/jsx'
-import { PipFocusLayout } from './PipFocusLayout'
+import { OneToOneFocusLayout } from '@/features/layout/components/OneToOneFocusLayout'
 import { PipGridLayout } from './PipGridLayout'
 import { PipPagination } from './PipPagination'
 import { PipScreenShareLayout } from './PipScreenShareLayout'
@@ -59,9 +59,11 @@ export const PipStage = () => {
    if (cameraTracks.length <= 1) {
      return (
        <StageFrame>
-          <PipFocusLayout
+          <OneToOneFocusLayout
            mainTrack={screenShareTrack}
            thumbnailTrack={cameraTracks[0]}
+            disableTileControls
+            context="pip"
          />
        </StageFrame>
      )
@@ -99,7 +101,12 @@ export const PipStage = () => {

  return (
    <StageFrame>
-      <PipFocusLayout mainTrack={mainTrack} thumbnailTrack={thumbnailTrack} />
+      <OneToOneFocusLayout
+        mainTrack={mainTrack}
+        thumbnailTrack={thumbnailTrack}
+        disableTileControls
+        context="pip"
+      />
    </StageFrame>
  )
 }
@@ -6,8 +6,8 @@ import { Button, Div } from '@/primitives'
 import { RiArrowLeftLine, RiCloseLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { ParticipantsList } from './controls/Participants/ParticipantsList'
-import { useSidePanel } from '../hooks/useSidePanel'
-import { ReactNode } from 'react'
+import { PanelId, useSidePanel } from '../hooks/useSidePanel'
+import React, { ReactNode, useCallback, useRef } from 'react'
 import { Chat } from '../prefabs/Chat'
 import { Effects } from './effects/Effects'
 import { Admin } from './Admin'
@@ -15,6 +15,7 @@ import { Tools } from './Tools'
 import { Info } from './Info'
 import { HStack } from '@/styled-system/jsx'
 import { useReactionsToolbar } from '@/features/reactions/hooks/useReactionsToolbar'
+import { useRestoreFocus } from '@/hooks/useRestoreFocus'

 type StyledSidePanelProps = {
  title: string
@@ -29,103 +30,115 @@ type StyledSidePanelProps = {
  isReactionToolbarOpen?: boolean
 }

-const StyledSidePanel = ({
-  title,
-  ariaLabel,
-  children,
-  onClose,
-  isClosed,
-  isReactionToolbarOpen,
-  closeButtonTooltip,
-  isSubmenu = false,
-  onBack,
-  backButtonLabel,
-}: StyledSidePanelProps) => (
-  <aside
-    className={css({
-      borderWidth: '1px',
-      borderStyle: 'solid',
-      borderColor: 'box.border',
-      backgroundColor: 'box.bg',
-      color: 'box.text',
-      borderRadius: 8,
-      flex: 1,
-      position: 'absolute',
-      overflow: 'hidden',
-      display: 'flex',
-      flexDirection: 'column',
-      margin: 'var(--sizes-room-side-panel-margin)',
-      marginLeft: 0,
-      marginBottom: 0,
-      padding: 0,
-      gap: 0,
-      right: 0,
-      top: 0,
-      width: 'var(--sizes-room-side-panel)',
-      transition: '.5s cubic-bezier(.4,0,.2,1) 5ms',
-    })}
-    style={{
-      transform: isClosed
-        ? 'translateX(calc(var(--sizes-room-side-panel) + var(--sizes-room-side-panel-margin)))'
-        : 'none',
-      bottom: isReactionToolbarOpen
-        ? 'calc( var(--sizes-room-control-bar) + var(--sizes-room-reaction-toolbar-height) + calc(var(--lk-grid-gap) / 2))'
-        : 'var(--sizes-room-control-bar)',
-    }}
-    aria-hidden={isClosed}
-    aria-label={ariaLabel}
-  >
-    <HStack alignItems="center">
-      {isSubmenu && (
-        <Button
-          variant="secondaryText"
-          size="sm"
-          square
-          className={css({ marginRight: '0.5rem', marginLeft: '1rem' })}
-          aria-label={backButtonLabel}
-          onPress={onBack}
+const StyledSidePanel = React.forwardRef<HTMLElement, StyledSidePanelProps>(
+  (
+    {
+      title,
+      ariaLabel,
+      children,
+      onClose,
+      isClosed,
+      isReactionToolbarOpen,
+      closeButtonTooltip,
+      isSubmenu = false,
+      onBack,
+      backButtonLabel,
+    },
+    ref
+  ) => (
+    <aside
+      ref={ref}
+      tabIndex={-1}
+      className={css({
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: 'box.border',
+        backgroundColor: 'box.bg',
+        color: 'box.text',
+        borderRadius: 8,
+        flex: 1,
+        position: 'absolute',
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        margin: 'var(--sizes-room-side-panel-margin)',
+        marginLeft: 0,
+        marginBottom: 0,
+        padding: 0,
+        gap: 0,
+        right: 0,
+        top: 0,
+        width: 'var(--sizes-room-side-panel)',
+        transition: '.5s cubic-bezier(.4,0,.2,1) 5ms',
+        '&:focus': {
+          outline: 'none',
+        },
+      })}
+      style={{
+        transform: isClosed
+          ? 'translateX(calc(var(--sizes-room-side-panel) + var(--sizes-room-side-panel-margin)))'
+          : 'none',
+        bottom: isReactionToolbarOpen
+          ? 'calc( var(--sizes-room-control-bar) + var(--sizes-room-reaction-toolbar-height) + calc(var(--lk-grid-gap) / 2))'
+          : 'var(--sizes-room-control-bar)',
+      }}
+      aria-hidden={isClosed}
+      aria-label={ariaLabel}
+    >
+      <HStack alignItems="center">
+        {isSubmenu && (
+          <Button
+            variant="secondaryText"
+            size="sm"
+            square
+            className={css({ marginRight: '0.5rem', marginLeft: '1rem' })}
+            aria-label={backButtonLabel}
+            onPress={onBack}
+          >
+            <RiArrowLeftLine size={20} aria-hidden="true" />
+          </Button>
+        )}
+        <Heading
+          slot="title"
+          level={1}
+          className={text({ variant: 'h2' })}
+          style={{
+            paddingLeft: isSubmenu ? 0 : '1.5rem',
+            paddingTop: '1rem',
+            display: isClosed ? 'none' : 'flex',
+            justifyContent: 'start',
+            alignItems: 'center',
+          }}
        >
-          <RiArrowLeftLine size={20} aria-hidden="true" />
-        </Button>
-      )}
-      <Heading
-        slot="title"
-        level={1}
-        className={text({ variant: 'h2' })}
+          {title}
+        </Heading>
+      </HStack>
+      <Div
+        position="absolute"
+        top="5"
+        right="5"
        style={{
-          paddingLeft: isSubmenu ? 0 : '1.5rem',
-          paddingTop: '1rem',
-          display: isClosed ? 'none' : 'flex',
-          justifyContent: 'start',
-          alignItems: 'center',
+          display: isClosed ? 'none' : undefined,
        }}
      >
-        {title}
-      </Heading>
-    </HStack>
-    <Div
-      position="absolute"
-      top="5"
-      right="5"
-      style={{
-        display: isClosed ? 'none' : undefined,
-      }}
-    >
-      <Button
-        invisible
-        variant="tertiaryText"
-        size="xs"
-        onPress={onClose}
-        aria-label={closeButtonTooltip}
-        tooltip={closeButtonTooltip}
-      >
-        <RiCloseLine />
-      </Button>
-    </Div>
-    {children}
-  </aside>
+        <Button
+          invisible
+          variant="tertiaryText"
+          size="xs"
+          onPress={onClose}
+          aria-label={closeButtonTooltip}
+          tooltip={closeButtonTooltip}
+        >
+          <RiCloseLine />
+        </Button>
+      </Div>
+      {children}
+    </aside>
+  )
 )

+StyledSidePanel.displayName = 'StyledSidePanel'
+
 type PanelProps = {
  isOpen: boolean
  children: React.ReactNode
@@ -162,8 +175,28 @@ export const SidePanel = () => {

  const { isOpen: isReactionToolbarOpen } = useReactionsToolbar()

+  const asideRef = useRef<HTMLElement>(null)
+
+  const focusAside = useCallback(() => {
+    requestAnimationFrame(() => {
+      asideRef.current?.focus({ preventScroll: true })
+    })
+  }, [])
+
+  const handlePanelOpened = useCallback(() => {
+    if (activePanelId === PanelId.CHAT) return
+    focusAside()
+  }, [activePanelId, focusAside])
+
+  useRestoreFocus(isSidePanelOpen, {
+    onOpened: handlePanelOpened,
+    preventScroll: true,
+    activeKey: activePanelId,
+  })
+
  return (
    <StyledSidePanel
+      ref={asideRef}
      title={title}
      ariaLabel={t('ariaLabel', { title })}
      onClose={() => {
@@ -95,8 +95,13 @@ const ToolButton = ({

 export const Tools = () => {
  const { data } = useConfig()
-  const { openTranscript, openScreenRecording, activeSubPanelId, isToolsOpen } =
-    useSidePanel()
+  const {
+    openTranscript,
+    openScreenRecording,
+    activeSubPanelId,
+    isToolsOpen,
+    isSidePanelOpen,
+  } = useSidePanel()
  const { t } = useTranslation('rooms', { keyPrefix: 'moreTools' })

  // Restore focus to the element that opened the Tools panel
@@ -113,6 +118,7 @@ export const Tools = () => {
    },
    restoreFocusRaf: true,
    preventScroll: true,
+    shouldRestoreOnClose: () => !isSidePanelOpen,
  })

  const isTranscriptEnabled = useIsRecordingModeEnabled(
@@ -37,7 +37,7 @@ export function Chat({ ...props }: ChatProps) {
  const room = useRoomContext()
  const { send, chatMessages, isSending } = useChat()

-  const { isChatOpen } = useSidePanel()
+  const { isChatOpen, isSidePanelOpen } = useSidePanel()
  const chatSnap = useSnapshot(chatStore)

  // Keep track of the element that opened the chat so we can restore focus
@@ -51,6 +51,7 @@ export function Chat({ ...props }: ChatProps) {
      })
    },
    preventScroll: true,
+    shouldRestoreOnClose: () => !isSidePanelOpen,
  })

  // Use useParticipants hook to trigger a re-render when the participant list changes.
@@ -6,7 +6,7 @@ import {
  log,
 } from '@livekit/components-core'
 import { type Participant, RoomEvent, Track } from 'livekit-client'
-import React, { useCallback, useRef, useState, useEffect } from 'react'
+import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react'
 import {
  ConnectionStateToast,
  FocusLayoutContainer,
@@ -40,6 +40,7 @@ import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
 import { ReactionPortals } from '@/features/reactions/components/ReactionPortals'
 import { CarouselLayout } from '@/features/layout/components/CarouselLayout'
 import { GridLayout } from '@/features/layout/components/GridLayout'
+import { OneToOneFocusLayout } from '@/features/layout/components/OneToOneFocusLayout'
 import { RoomContentArea } from '@/features/layout/components/RoomContentArea'
 import { usePictureInPicture } from '@/features/pip/hooks/usePictureInPicture'
 import { PipRoomPlaceholder } from '@/features/pip/components/PipRoomPlaceholder'
@@ -123,6 +124,26 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
    (track) => !isEqualTrackRef(track, focusTrack)
  )

+  const cameraTracks = useMemo(
+    () => tracks.filter((t) => t.source === Track.Source.Camera),
+    [tracks]
+  )
+
+  const isOneToOne = !focusTrack && cameraTracks.length <= 2
+
+  const oneToOneMainTrack = useMemo(() => {
+    if (!isOneToOne) return undefined
+    const remote = cameraTracks.find((t) => !t.participant?.isLocal)
+    const local = cameraTracks.find((t) => t.participant?.isLocal)
+    return remote ?? local
+  }, [isOneToOne, cameraTracks])
+
+  const oneToOneThumbnailTrack = useMemo(() => {
+    if (!isOneToOne) return undefined
+    const local = cameraTracks.find((t) => t.participant?.isLocal)
+    return oneToOneMainTrack === local ? undefined : local
+  }, [isOneToOne, cameraTracks, oneToOneMainTrack])
+
  const { isOpen: isPictureInPictureOpen } = usePictureInPicture()

  // handle pin announcements
@@ -258,7 +279,12 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
              <PipRoomPlaceholder />
            ) : (
              <>
-                {!focusTrack ? (
+                {isOneToOne ? (
+                  <OneToOneFocusLayout
+                    mainTrack={oneToOneMainTrack}
+                    thumbnailTrack={oneToOneThumbnailTrack}
+                  />
+                ) : !focusTrack ? (
                  <div
                    className="lk-grid-layout-wrapper"
                    style={{ height: 'auto' }}
@@ -6,6 +6,10 @@ export type RestoreFocusOptions = {
  onClosed?: () => void
  restoreFocusRaf?: boolean
  preventScroll?: boolean
+  /** When the panel stays open but its content changes, update the restore target. */
+  activeKey?: string | null
+  /** Return false to skip restoring focus on close (e.g. when switching to another panel). */
+  shouldRestoreOnClose?: () => boolean
 }

 /**
@@ -22,9 +26,12 @@ export function useRestoreFocus(
    onClosed,
    restoreFocusRaf = false,
    preventScroll = true,
+    activeKey,
+    shouldRestoreOnClose,
  } = options

  const prevIsOpenRef = useRef(false)
+  const prevActiveKeyRef = useRef(activeKey)
  const triggerRef = useRef<HTMLElement | null>(null)

  useEffect(() => {
@@ -37,25 +44,41 @@ export function useRestoreFocus(
      onOpened?.()
    }

+    // Panel switched while staying open
+    if (wasOpen && isOpen && activeKey !== prevActiveKeyRef.current) {
+      const activeEl = document.activeElement as HTMLElement | null
+      triggerRef.current = resolveTrigger ? resolveTrigger(activeEl) : activeEl
+      onOpened?.()
+    }
+
    // Just closed
    if (wasOpen && !isOpen) {
      const trigger = triggerRef.current
-      if (trigger && document.contains(trigger)) {
+      const shouldRestore =
+        (shouldRestoreOnClose?.() ?? true) &&
+        trigger &&
+        document.contains(trigger)
+
+      if (shouldRestore) {
        const focus = () => trigger.focus({ preventScroll })
        if (restoreFocusRaf) requestAnimationFrame(focus)
        else focus()
      }
+
      triggerRef.current = null
      onClosed?.()
    }

    prevIsOpenRef.current = isOpen
+    prevActiveKeyRef.current = activeKey
  }, [
    isOpen,
+    activeKey,
    onClosed,
    onOpened,
    preventScroll,
    resolveTrigger,
    restoreFocusRaf,
+    shouldRestoreOnClose,
  ])
 }
Author	SHA1	Message	Date
Cyril	baed2d8289	✨(frontend) apply OneToOneFocusLayout to main room 1-to-1 Show remote fullscreen with local thumbnail when no pin.	2026-07-20 13:44:43 +02:00
Cyril	3e6ccbcab9	♻️(frontend) use OneToOneFocusLayout in PiP stage Replace PipFocusLayout with the shared focus layout.	2026-07-20 13:42:01 +02:00
Cyril	1a3fd22a14	✨(frontend) add shared OneToOneFocusLayout component Reuse the PiP main + thumbnail pattern for room and PiP.	2026-07-20 13:41:18 +02:00
Cyril	cd81ea7c46	♻️(frontend) extract getTrackKey to shared layout utils Move track key helper out of pip so layouts can reuse it.	2026-07-20 11:21:40 +02:00
lebaudantoine	ab707d866f	🩹(backend) fix the mail-builder step in docker Upgrading mjml now requires node >=22. I forgot to update the step, responsible to build the mail template in the production image.	2026-07-13 11:32:46 +02:00
snyk-bot	dac0b9c000	⬆️(frontend) upgrade react-aria related dependencies Initiated by Snyk.	2026-07-13 11:32:46 +02:00
Cyril	53cc8642eb	♿️(frontend) fix focus restore when switching side panels restore trigger focus on panel switch while panel remains open	2026-07-11 16:08:57 +02:00
Cyril	c8d9d2fea8	♿️(frontend) focus side panel container on open Focus aside on side panel open so screen readers announce the aria-label	2026-07-11 16:08:57 +02:00
snyk-bot	e910b1f0b7	⬆️(frontend) upgrade posthog-js from 1.387.0 to 1.391.2 Snyk has created this PR to upgrade posthog-js from 1.387.0 to 1.391.2. See this package in npm: posthog-js See this project in Snyk: https://app.eu.snyk.io/org/lasuite-dinum-default/project/96ea03d8-8d09-493d-86bf-363f274e129e?utm_source=github&utm_medium=referral&page=upgrade-pr	2026-07-11 16:06:18 +02:00
lebaudantoine	581e115c03	♻️(frontend) inline MediaPipe WASM modules to avoid loading from remote Copy the MediaPipe WASM modules into the frontend build output and serve them locally, instead of loading them from the Google CDN at runtime. Mediapipe was a transitive dependency, add it explicitly. Requested by some members of the community. It closes #1168	2026-07-11 15:57:59 +02:00
lebaudantoine	8118ef0612	🎨(frontend) format vite config file Apply the project's formatter to the Vite config file to align its style with the rest of the codebase.	2026-07-11 15:57:59 +02:00
lebaudantoine	85f886d9c5	➕(frontend) install vite-plugin-static-copy for MediaPipe WASM assets Add vite-plugin-static-copy as a dependency. It will be used to copy and serve the WASM modules shipped by the MediaPipe JS dependency from the frontend build output.	2026-07-11 15:57:59 +02:00
lebaudantoine	b66f82e4b7	♻️(frontend) reorganize JS packages in package.json Sort and regroup the entries in package.json that were not in the expected order.	2026-07-11 15:57:59 +02:00
lebaudantoine	aabb7d629c	♻️(frontend) inline model weights to avoid loading them from remote Inline the model weights instead of fetching them from a Google remote location at runtime. The weights do not update frequently, so inlining removes an external dependency.	2026-07-11 15:57:59 +02:00
lebaudantoine	1e5f5c4fe9	♻️(frontend) refactor background processors to use the new API Update the calls to the background processors imported from livekit-track-processor so they use the new instantiation method instead of the previous, now-deprecated one.	2026-07-11 15:57:59 +02:00