📝(frontend) add changelog entry for PR #1510

Document in the CHANGELOG the set of changes shipped in PR #1510,
which groups the recent chat, layout and participant tile render
optimizations.

CHANGELOG.md

@@ -25,6 +25,7 @@ and this project adheres to
 - ⬆️(frontend) upgrade posthog-js from 1.391.2 to 1.395.0
 - ⬆️(frontend) upgrade @tanstack/react-query from 5.101.0 to 5.101.1
 - ⬆️(frontend) upgrade livekit-client from 2.19.2 to 2.20.0
+- ⚡️(frontend) limit unnecessary re-renders #1510
 
 ## [1.24.0] - 2026-07-21
 

src/frontend/panda.config.ts

@@ -114,6 +114,10 @@ const config: Config = {
           clipPath: 'polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)',
         },
       },
+      overlayIn: {
+        from: { opacity: 0 },
+        to: { opacity: 0.6 },
+      },
     },
     tokens: defineTokens({
       /* we take a few things from the panda preset but for now we clear out some stuff.

src/frontend/src/components/Avatar.tsx

@@ -7,36 +7,20 @@ const avatar = cva({
     color: 'white',
     display: 'flex',
     borderRadius: '50%',
-    justifyContent: 'center',
-    alignItems: 'center',
     userSelect: 'none',
     cursor: 'default',
     flexGrow: 0,
     flexShrink: 0,
+    overflow: 'hidden',
   },
   variants: {
     context: {
-      subtitles: {
-        width: '40px',
-        height: '40px',
-        fontSize: '1.3rem',
-        lineHeight: '1rem',
-      },
-      list: {
-        width: '32px',
-        height: '32px',
-        fontSize: '1.3rem',
-        lineHeight: '1rem',
-      },
-      placeholder: {
-        width: '100%',
-        height: '100%',
-      },
+      subtitles: { width: '40px', height: '40px' },
+      list: { width: '32px', height: '32px' },
+      placeholder: { width: '100%', height: '100%' },
     },
     notification: {
-      true: {
-        border: '2px solid white',
-      },
+      true: { border: '2px solid white' },
     },
   },
   defaultVariants: {
@@ -49,32 +33,35 @@ export type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {
   bgColor?: string
 } & RecipeVariantProps<typeof avatar>
 
-export const Avatar = ({
-  name,
-  bgColor,
-  context,
-  notification,
-  style,
-  ...props
-}: AvatarProps) => {
-  const initial = name?.trim()?.charAt(0) ?? ''
-  return (
-    <div
-      style={{
-        backgroundColor: bgColor,
-        ...style,
-      }}
-      className={avatar({ context, notification })}
-      {...props}
-    >
-      <span
-        aria-hidden="true"
-        className={css({
-          marginTop: '-0.3rem',
-        })}
+export const Avatar = React.memo(
+  ({ name, bgColor, context, notification, style, ...props }: AvatarProps) => {
+    const initial = name?.trim()?.charAt(0) ?? ''
+    return (
+      <div
+        style={{ backgroundColor: bgColor, ...style }}
+        className={avatar({ context, notification })}
+        {...props}
       >
-        {initial}
-      </span>
-    </div>
-  )
-}
+        <svg
+          viewBox="0 0 100 100"
+          aria-hidden="true"
+          className={css({ width: '100%', height: '100%', display: 'block' })}
+        >
+          <text
+            x="50"
+            y="50"
+            textAnchor="middle"
+            dominantBaseline="central"
+            fontSize="52"
+            fontWeight="500"
+            fill="currentColor"
+          >
+            {initial}
+          </text>
+        </svg>
+      </div>
+    )
+  }
+)
+
+Avatar.displayName = 'Avatar'

src/frontend/src/features/chat/components/Chat.tsx

@@ -0,0 +1,50 @@
+import { useTranslation } from 'react-i18next'
+import { Text } from '@/primitives'
+import { ChatMessages } from './ChatMessages'
+import { ChatTextArea } from './ChatTextArea'
+import { styled } from '@/styled-system/jsx'
+
+const ChatContainer = styled('div', {
+  base: {
+    display: 'flex',
+    padding: '0 1.5rem',
+    flexGrow: 1,
+    flexDirection: 'column',
+    minHeight: 0,
+  },
+})
+
+const ChatMessagesContainer = styled('div', {
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+    minHeight: 0,
+  },
+})
+
+const TextContainer = styled('div', {
+  base: {
+    display: 'flex',
+    padding: '0.75rem',
+    backgroundColor: 'greyscale.50',
+    borderRadius: 4,
+    marginBottom: '0.75rem',
+  },
+})
+
+export const Chat = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'chat' })
+
+  return (
+    <ChatContainer>
+      <TextContainer>
+        <Text variant="sm">{t('disclaimer')}</Text>
+      </TextContainer>
+      <ChatMessagesContainer>
+        <ChatMessages />
+      </ChatMessagesContainer>
+      <ChatTextArea />
+    </ChatContainer>
+  )
+}

src/frontend/src/features/chat/components/ChatMessage.tsx

@@ -0,0 +1,34 @@
+import type { ChatRow } from '@/stores/chat'
+import { styled } from '@/styled-system/jsx'
+import { ChatMessageMetadata } from './ChatMessageMedata'
+import { ChatMessageBody } from './ChatMessageBody'
+
+const StyledContainer = styled('li', {
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0.25rem',
+  },
+})
+
+type ChatMessageProps = {
+  item: ChatRow
+}
+
+export const ChatMessage = ({ item }: ChatMessageProps) => {
+  const time = new Date(item.timestamp)
+  const locale = navigator ? navigator.language : 'en-US'
+  return (
+    <StyledContainer
+      title={time.toLocaleTimeString(locale, { timeStyle: 'full' })}
+    >
+      {!item.hideMetadata && (
+        <ChatMessageMetadata
+          timestamp={item.timestamp}
+          identity={item.identity}
+        />
+      )}
+      <ChatMessageBody message={item.message} />
+    </StyledContainer>
+  )
+}

src/frontend/src/features/chat/components/ChatMessageBody.tsx

@@ -0,0 +1,33 @@
+import { ChatRow } from '@/stores/chat'
+import React, { useMemo } from 'react'
+import { formatChatMessageLinks } from '@livekit/components-react'
+import { css } from '@/styled-system/css'
+import { Text } from '@/primitives'
+
+type ChatMessageBodyProps = Pick<ChatRow, 'message'>
+
+export const ChatMessageBody = React.memo(
+  ({ message }: ChatMessageBodyProps) => {
+    const formattedMessage = useMemo(() => {
+      return formatChatMessageLinks(message)
+    }, [message])
+
+    return (
+      <Text
+        variant="sm"
+        margin={false}
+        className={css({
+          whiteSpace: 'pre-wrap',
+          '& .lk-chat-link': {
+            color: 'blue',
+            textDecoration: 'underline',
+          },
+        })}
+      >
+        {formattedMessage}
+      </Text>
+    )
+  }
+)
+
+ChatMessageBody.displayName = 'ChatMessageBody'

src/frontend/src/features/chat/components/ChatMessageMedata.tsx

@@ -0,0 +1,41 @@
+import { styled } from '@/styled-system/jsx'
+import { ChatRow, chatStore } from '@/stores/chat'
+import React, { useMemo } from 'react'
+import { useSnapshot } from 'valtio'
+import { Text } from '@/primitives'
+
+const StyledContainer = styled('span', {
+  base: {
+    display: 'flex',
+    gap: '0.5rem',
+    paddingTop: '0.75rem',
+  },
+})
+
+type ChatMessageMetadataProps = Pick<ChatRow, 'identity' | 'timestamp'>
+
+export const ChatMessageMetadata = React.memo(
+  ({ identity, timestamp }: ChatMessageMetadataProps) => {
+    const time = new Date(timestamp)
+    const locale = navigator ? navigator.language : 'en-US'
+
+    const { names } = useSnapshot(chatStore)
+
+    const currentDisplayName = useMemo(() => {
+      if (identity) return names[identity] ?? identity
+    }, [names, identity])
+
+    return (
+      <StyledContainer>
+        <Text bold={true} variant="sm">
+          {currentDisplayName}
+        </Text>
+        <Text variant="smNote" wrap="no">
+          {time.toLocaleTimeString(locale, { timeStyle: 'short' })}
+        </Text>
+      </StyledContainer>
+    )
+  }
+)
+
+ChatMessageMetadata.displayName = 'ChatMessageMetadata'

src/frontend/src/features/chat/components/ChatMessages.tsx

@@ -0,0 +1,79 @@
+import {
+  ListBox,
+  ListBoxItem,
+  ListLayout,
+  Virtualizer,
+} from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
+import { ChatMessage } from './ChatMessage.tsx'
+import { useLayoutEffect, useRef } from 'react'
+import { useSnapshot } from 'valtio'
+import { ChatRow, chatStore } from '@/stores/chat'
+
+// Estimated height of a chat entry in px. ListLayout measures the real
+// rendered height of each row; this value is only used to size the
+// scrollbar before rows have been measured.
+const ESTIMATED_ROW_HEIGHT = 56
+const BOTTOM_THRESHOLD_PX = 32
+
+export const ChatMessages = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'chat' })
+  const { rows: items } = useSnapshot(chatStore)
+
+  const listRef = useRef<HTMLDivElement>(null)
+  const stick = useRef(true)
+
+  useLayoutEffect(() => {
+    const el = listRef.current
+    if (!el) return
+    const pin = () => {
+      if (stick.current) el.scrollTop = el.scrollHeight
+    }
+    const onScroll = () => {
+      stick.current =
+        el.scrollHeight - el.scrollTop - el.clientHeight <= BOTTOM_THRESHOLD_PX
+    }
+    const ro = new ResizeObserver(pin)
+    // Sizer div = ListLayout's content size. Fires on append, and again each
+    // time an estimated row height is replaced by a measured one.
+    if (el.firstElementChild) ro.observe(el.firstElementChild)
+    // Container. Height goes 0 -> N as the panel animates in, and on resize.
+    ro.observe(el)
+    el.addEventListener('scroll', onScroll, { passive: true })
+    pin()
+    return () => {
+      ro.disconnect()
+      el.removeEventListener('scroll', onScroll)
+    }
+  }, [])
+
+  return (
+    <Virtualizer
+      layout={ListLayout}
+      layoutOptions={{
+        estimatedRowSize: ESTIMATED_ROW_HEIGHT,
+        gap: 4,
+        padding: 4,
+      }}
+    >
+      <ListBox
+        ref={listRef}
+        aria-label={t('messagesLabel', 'Chat messages')}
+        items={items}
+        selectionMode="none"
+        style={{
+          display: 'block',
+          height: '100%',
+          width: '100%',
+          overflow: 'auto',
+        }}
+      >
+        {(item: ChatRow) => (
+          <ListBoxItem style={{ width: '100%' }}>
+            <ChatMessage item={item} />
+          </ListBoxItem>
+        )}
+      </ListBox>
+    </Virtualizer>
+  )
+}

src/frontend/src/features/chat/components/ChatProvider.tsx

@@ -0,0 +1,83 @@
+// features/rooms/chat/ChatProvider.tsx — renders no DOM, mounted once at room level
+import { ref } from 'valtio'
+import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
+import React, { useEffect } from 'react'
+import { useChat, useRoomContext } from '@livekit/components-react'
+import { appendRow, chatStore, resetChatStore } from '@/stores/chat'
+import type { ChatMessage } from '@livekit/components-core'
+import {
+  LocalParticipant,
+  Participant,
+  RemoteParticipant,
+  RoomEvent,
+} from 'livekit-client'
+
+export const ChatProvider = () => {
+  const lastReadMsgAt = React.useRef<ChatMessage['timestamp']>(0)
+  const { send, chatMessages, isSending } = useChat()
+  const { isChatOpen } = useSidePanel()
+
+  const room = useRoomContext()
+
+  useEffect(() => {
+    resetChatStore()
+  }, [])
+
+  // Tigger the message notification (temporary)
+  useEffect(() => {
+    // TEMPORARY: This is a brittle workaround that relies on message count tracking
+    // due to recent LiveKit useChat changes breaking the previous implementation
+    // (see https://github.com/livekit/components-js/issues/1158)
+    // Remove this once we refactor chat to use the new text stream approach
+    const latestMessage = chatMessages.slice(-1)[0]
+    if (!latestMessage) return
+    const from = latestMessage.from as
+      | RemoteParticipant
+      | LocalParticipant
+      | undefined
+
+    room.emit(RoomEvent.ChatMessage, latestMessage, from)
+  }, [chatMessages, room])
+
+  useEffect(() => {
+    for (let i = chatStore.rows.length; i < chatMessages.length; i++) {
+      appendRow(chatMessages[i])
+    }
+  }, [chatMessages])
+
+  useEffect(() => {
+    chatStore.send = ref(send)
+  }, [send])
+
+  useEffect(() => {
+    chatStore.isSending = isSending
+  }, [isSending])
+
+  // Set the unread messages count
+  useEffect(() => {
+    if (chatMessages.length === 0) return
+    const last = chatMessages[chatMessages.length - 1]
+    if (isChatOpen) {
+      lastReadMsgAt.current = last.timestamp
+      chatStore.unreadMessages = 0
+      return
+    }
+    chatStore.unreadMessages = chatMessages.filter(
+      (m) => !lastReadMsgAt.current || m.timestamp > lastReadMsgAt.current
+    ).length
+  }, [chatMessages, isChatOpen])
+
+  // Listen to participant name changes
+  useEffect(() => {
+    const setName = (p: Participant) => {
+      chatStore.names[p.identity] = p.name || p.identity
+    }
+    const onNameChanged = (_name: string, p: Participant) => setName(p)
+    room.on(RoomEvent.ParticipantNameChanged, onNameChanged)
+    return () => {
+      room.off(RoomEvent.ParticipantNameChanged, onNameChanged)
+    }
+  }, [room])
+
+  return null
+}

src/frontend/src/features/chat/components/ChatSubmitButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@/primitives'
+import { RiSendPlane2Fill } from '@remixicon/react'
+
+type ChatSubmitButtonProps = {
+  handleSubmit: () => Promise<void>
+  isDisabled: boolean
+}
+
+export const ChatSubmitButton = React.memo(
+  ({ handleSubmit, isDisabled }: ChatSubmitButtonProps) => {
+    const { t } = useTranslation('rooms', { keyPrefix: 'controls.chat.input' })
+    return (
+      <Button
+        square
+        invisible
+        variant="tertiaryText"
+        size="sm"
+        onPress={handleSubmit}
+        isDisabled={isDisabled}
+        aria-label={t('button.label')}
+      >
+        <RiSendPlane2Fill />
+      </Button>
+    )
+  }
+)
+
+ChatSubmitButton.displayName = 'ChatSubmitButton'

src/frontend/src/features/chat/components/ChatTextArea.tsx

@@ -0,0 +1,92 @@
+import { TextArea } from '@/primitives'
+import { styled } from '@/styled-system/jsx'
+import React, { useCallback, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useSnapshot } from 'valtio'
+import {
+  chatStore,
+  clearTextAreaValue,
+  persistTextAreaValue,
+} from '@/stores/chat'
+import { ChatSubmitButton } from './ChatSubmitButton'
+
+const StyledContainer = styled('div', {
+  base: {
+    display: 'flex',
+    margin: '0.75rem 0 1.5rem',
+    padding: '0.5rem',
+    backgroundColor: 'gray.100',
+    borderRadius: 4,
+  },
+})
+
+export const ChatTextArea = () => {
+  const { isSending, send, textAreaValue } = useSnapshot(chatStore)
+
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.chat.input' })
+
+  const inputRef = React.useRef<HTMLTextAreaElement>(null)
+
+  useEffect(() => {
+    const el = inputRef.current
+    if (!el) return
+    const raf = requestAnimationFrame(() => {
+      el.focus({ preventScroll: true })
+      const end = el.value.length
+      el.setSelectionRange(end, end)
+    })
+    return () => cancelAnimationFrame(raf)
+  }, [])
+
+  const handleSubmit = useCallback(async () => {
+    const text = chatStore.textAreaValue
+    if (!send || !text) return
+    await send(text)
+    inputRef?.current?.focus({ preventScroll: true })
+    clearTextAreaValue()
+  }, [send, inputRef])
+
+  const isDisabled = !textAreaValue.trim() || isSending
+
+  const onKeyDown = async (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    e.stopPropagation()
+    if (e.key !== 'Enter' || (e.key === 'Enter' && e.shiftKey) || isDisabled)
+      return
+    e.preventDefault()
+    await handleSubmit()
+  }
+
+  const onKeyUp = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    e.stopPropagation()
+  }
+
+  return (
+    <StyledContainer>
+      <TextArea
+        ref={inputRef}
+        value={textAreaValue}
+        onKeyDown={onKeyDown}
+        onKeyUp={onKeyUp}
+        onChange={(e) => {
+          persistTextAreaValue(e.target.value)
+        }}
+        fieldSizing={'content'}
+        style={{
+          border: 'none',
+          resize: 'none',
+          height: 'auto',
+          maxHeight: '240px',
+          minHeight: `34px`,
+          lineHeight: 1.25,
+          padding: '7px 10px',
+        }}
+        placeholderStyle="strong"
+        spellCheck={false}
+        maxLength={2000}
+        placeholder={t('textArea.placeholder')}
+        aria-label={t('textArea.label')}
+      />
+      <ChatSubmitButton handleSubmit={handleSubmit} isDisabled={isDisabled} />
+    </StyledContainer>
+  )
+}

src/frontend/src/features/layout/components/CarouselLayout.tsx

@@ -3,6 +3,7 @@ import { getScrollBarWidth } from '@livekit/components-core'
 import * as React from 'react'
 import { TrackLoop, useVisualStableUpdate } from '@livekit/components-react'
 import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
+import { useCallback, useEffect, useLayoutEffect } from 'react'
 
 const MIN_HEIGHT = 130
 const MIN_WIDTH = 140
@@ -10,6 +11,72 @@ const MIN_VISIBLE_TILES = 1
 const ASPECT_RATIO = 16 / 10
 const ASPECT_RATIO_INVERT = (1 - ASPECT_RATIO) * -1
 
+type CarouselOrientation = 'vertical' | 'horizontal'
+
+interface CarouselLayoutState {
+  orientation: CarouselOrientation
+  maxVisibleTiles: number
+}
+
+interface CarouselLayoutObserverProps {
+  asideEl: React.RefObject<HTMLDivElement>
+  orientation?: CarouselOrientation
+  onLayoutChange: (layout: CarouselLayoutState) => void
+}
+
+const CarouselLayoutObserver = ({
+  orientation,
+  asideEl,
+  onLayoutChange,
+}: CarouselLayoutObserverProps) => {
+  const { width, height } = useSize(asideEl)
+
+  // Hysteresis memory: avoids flapping between N and N+1 tiles when the
+  // container size hovers around a breakpoint. A ref (not state) because
+  // updating it must not trigger a re-render.
+  const prevTilesRef = React.useRef(0)
+
+  const carouselOrientation: CarouselOrientation =
+    orientation ?? (height >= width ? 'vertical' : 'horizontal')
+
+  const tileSpan =
+    carouselOrientation === 'vertical'
+      ? Math.max(width * ASPECT_RATIO_INVERT, MIN_HEIGHT)
+      : Math.max(height * ASPECT_RATIO, MIN_WIDTH)
+
+  const scrollBarWidth = getScrollBarWidth()
+
+  const availableSpan =
+    (carouselOrientation === 'vertical' ? height : width) - scrollBarWidth
+
+  const tilesThatFit = Math.max(availableSpan / tileSpan, MIN_VISIBLE_TILES)
+
+  let maxVisibleTiles: number
+  if (Math.abs(tilesThatFit - prevTilesRef.current) < 0.5) {
+    // Within the dead zone: keep the previous count.
+    maxVisibleTiles = Math.round(prevTilesRef.current)
+  } else {
+    maxVisibleTiles = Math.round(tilesThatFit)
+    prevTilesRef.current = tilesThatFit
+  }
+
+  // Apply cosmetic layout output straight to the DOM.
+  useLayoutEffect(() => {
+    const el = asideEl.current
+    if (!el) return
+    el.dataset.lkOrientation = carouselOrientation
+    el.style.setProperty('--lk-max-visible-tiles', maxVisibleTiles.toString())
+  }, [asideEl, carouselOrientation, maxVisibleTiles])
+
+  // Report upward only what the parent actually needs for
+  // `useVisualStableUpdate` (and only when it changes — see parent handler).
+  useEffect(() => {
+    onLayoutChange({ orientation: carouselOrientation, maxVisibleTiles })
+  }, [carouselOrientation, maxVisibleTiles, onLayoutChange])
+
+  return null
+}
+
 /** @public */
 export interface CarouselLayoutProps extends React.HTMLAttributes<HTMLMediaElement> {
   tracks: TrackReferenceOrPlaceholder[]
@@ -40,52 +107,42 @@ export function CarouselLayout({
   ...props
 }: CarouselLayoutProps) {
   const asideEl = React.useRef<HTMLDivElement>(null)
-  const [prevTiles, setPrevTiles] = React.useState(0)
-  const { width, height } = useSize(asideEl)
-  const carouselOrientation = orientation
-    ? orientation
-    : height >= width
-      ? 'vertical'
-      : 'horizontal'
 
-  const tileSpan =
-    carouselOrientation === 'vertical'
-      ? Math.max(width * ASPECT_RATIO_INVERT, MIN_HEIGHT)
-      : Math.max(height * ASPECT_RATIO, MIN_WIDTH)
-  const scrollBarWidth = getScrollBarWidth()
+  const [layout, setLayout] = React.useState<CarouselLayoutState>({
+    orientation: orientation ?? 'vertical',
+    maxVisibleTiles: MIN_VISIBLE_TILES,
+  })
 
-  const tilesThatFit =
-    carouselOrientation === 'vertical'
-      ? Math.max((height - scrollBarWidth) / tileSpan, MIN_VISIBLE_TILES)
-      : Math.max((width - scrollBarWidth) / tileSpan, MIN_VISIBLE_TILES)
+  // Stable callback + identity check: the parent only re-renders when the
+  // derived layout genuinely changed, not on every resize tick.
+  const handleLayoutChange = useCallback((next: CarouselLayoutState) => {
+    setLayout((prev) =>
+      prev.orientation === next.orientation &&
+      prev.maxVisibleTiles === next.maxVisibleTiles
+        ? prev
+        : next
+    )
+  }, [])
 
-  let maxVisibleTiles = Math.round(tilesThatFit)
-  if (Math.abs(tilesThatFit - prevTiles) < 0.5) {
-    maxVisibleTiles = Math.round(prevTiles)
-  } else if (prevTiles !== tilesThatFit) {
-    setPrevTiles(tilesThatFit)
-  }
-
-  const sortedTiles = useVisualStableUpdate(tracks, maxVisibleTiles)
-
-  React.useLayoutEffect(() => {
-    if (asideEl.current) {
-      asideEl.current.dataset.lkOrientation = carouselOrientation
-      asideEl.current.style.setProperty(
-        '--lk-max-visible-tiles',
-        maxVisibleTiles.toString()
-      )
-    }
-  }, [maxVisibleTiles, carouselOrientation])
+  const sortedTiles = useVisualStableUpdate(tracks, layout.maxVisibleTiles)
 
   return (
-    <aside
-      key={carouselOrientation}
-      className="lk-carousel"
-      ref={asideEl}
-      {...props}
-    >
-      <TrackLoop tracks={sortedTiles}>{props.children}</TrackLoop>
-    </aside>
+    <>
+      <CarouselLayoutObserver
+        asideEl={asideEl}
+        orientation={orientation}
+        onLayoutChange={handleLayoutChange}
+      />
+      {/* `key` intentionally remounts the container when orientation flips, */}
+      {/* which resets scroll position and re-runs the observer measurement. */}
+      <aside
+        key={layout.orientation}
+        className="lk-carousel"
+        ref={asideEl}
+        {...props}
+      >
+        <TrackLoop tracks={sortedTiles}>{props.children}</TrackLoop>
+      </aside>
+    </>
   )
 }

src/frontend/src/features/layout/components/FocusLayout.tsx

@@ -1,4 +1,4 @@
-import { ParticipantTile } from './ParticipantTile'
+import { ParticipantTile } from '@/features/participantTile/components/ParticipantTile.tsx'
 import type { FocusLayoutProps } from '@livekit/components-react'
 
 export function FocusLayout({ trackRef, ...htmlProps }: FocusLayoutProps) {

src/frontend/src/features/layout/components/GridLayout.tsx

@@ -10,6 +10,36 @@ import { mergeProps } from '@/utils/mergeProps'
 import { PaginationIndicator } from './PaginationIndicator'
 import { useGridLayout } from '../hooks/useGridLayout'
 import { PaginationControl } from './PaginationControl'
+import { useEffect, useRef, useState } from 'react'
+import { useSpeakerPromotionTrigger } from '../hooks/useSpeakerPromotionTrigger'
+
+interface GridLayoutObserverProps {
+  gridEl: React.RefObject<HTMLDivElement>
+  trackCount: number
+  onMaxTilesChange: (maxTiles: number) => void
+}
+
+/**
+ * Headless component that runs the layout calculation in isolation and
+ * reports the resulting tile capacity upward.
+ *
+ * `useGridLayout` re-renders its host on every layout recalculation
+ * (e.g. container resizes). Rendering it in a null child means only this
+ * component churns; the parent `GridLayout` re-renders solely when
+ * `maxTiles` actually changes, since `setState` bails out on equal values.
+ */
+const GridLayoutObserver = ({
+  gridEl,
+  trackCount,
+  onMaxTilesChange,
+}: GridLayoutObserverProps) => {
+  const { layout } = useGridLayout(gridEl, trackCount)
+  useEffect(() => {
+    onMaxTilesChange(layout.maxTiles)
+  }, [onMaxTilesChange, layout.maxTiles])
+
+  return null
+}
 
 /** @public */
 export interface GridLayoutProps
@@ -37,14 +67,15 @@ export interface GridLayoutProps
  * @public
  */
 export function GridLayout({ tracks, ...props }: GridLayoutProps) {
-  const gridEl = React.createRef<HTMLDivElement>()
+  const gridEl = useRef<HTMLDivElement>(null)
+  const [maxTiles, setMaxTiles] = useState(1)
 
   const elementProps = React.useMemo(
     () => mergeProps(props, { className: 'lk-grid-layout' }),
     [props]
   )
-  const { layout } = useGridLayout(gridEl, tracks.length)
-  const pagination = usePagination(layout.maxTiles, tracks)
+  const pagination = usePagination(maxTiles, tracks)
+  useSpeakerPromotionTrigger(pagination.tracks)
 
   useSwipe(gridEl, {
     onLeftSwipe: pagination.nextPage,
@@ -57,8 +88,13 @@ export function GridLayout({ tracks, ...props }: GridLayoutProps) {
       data-lk-pagination={pagination.totalPageCount > 1}
       {...elementProps}
     >
+      <GridLayoutObserver
+        gridEl={gridEl}
+        trackCount={tracks.length}
+        onMaxTilesChange={setMaxTiles}
+      />
       <TrackLoop tracks={pagination.tracks}>{props.children}</TrackLoop>
-      {tracks.length > layout.maxTiles && (
+      {tracks.length > maxTiles && (
         <>
           <PaginationIndicator
             totalPageCount={pagination.totalPageCount}

src/frontend/src/features/layout/components/PinAnnouncer.tsx

@@ -0,0 +1,6 @@
+import { usePinAnnouncements } from '../hooks/usePinAnnouncements'
+
+export const PinAnnouncer = () => {
+  usePinAnnouncements()
+  return null
+}

src/frontend/src/features/layout/components/StageLayout.tsx

@@ -0,0 +1,113 @@
+import { FocusLayoutContainer, useTracks } from '@livekit/components-react'
+import { CarouselLayout } from '@/features/layout/components/CarouselLayout'
+import { FocusLayout } from '@/features/layout/components/FocusLayout'
+import { ParticipantTile } from '@/features/participantTile/components/ParticipantTile'
+import { GridLayout } from '@/features/layout/components/GridLayout'
+import {
+  isEqualTrackRef,
+  isTrackReference,
+  log,
+  type TrackReferenceOrPlaceholder,
+} from '@livekit/components-core'
+import { Track } from 'livekit-client'
+import { useSnapshot } from 'valtio'
+import { clearPinnedTrack, layoutStore, setPinnedTrack } from '@/stores/layout'
+import { useEffect, useRef } from 'react'
+
+export const StageLayout = () => {
+  const lastAutoFocusedScreenShareTrack =
+    useRef<TrackReferenceOrPlaceholder | null>(null)
+
+  const tracks = useTracks(
+    [
+      { source: Track.Source.Camera, withPlaceholder: true },
+      { source: Track.Source.ScreenShare, withPlaceholder: false },
+    ],
+    { updateOnlyOn: [], onlySubscribed: false }
+  )
+
+  const screenShareTracks = tracks
+    .filter(isTrackReference)
+    .filter((track) => track.publication.source === Track.Source.ScreenShare)
+
+  const { pinnedTrackRef } = useSnapshot(layoutStore)
+
+  const carouselTracks = tracks.filter(
+    (track) => !isEqualTrackRef(track, pinnedTrackRef)
+  )
+
+  /* eslint-disable react-hooks/exhaustive-deps */
+  // Code duplicated from LiveKit; this warning will be addressed in the refactoring.
+  useEffect(() => {
+    // If screen share tracks are published, and no pin is set explicitly, auto set the screen share.
+    if (
+      screenShareTracks.some((track) => track.publication.isSubscribed) &&
+      lastAutoFocusedScreenShareTrack.current === null
+    ) {
+      log.debug('Auto set screen share focus:', {
+        newScreenShareTrack: screenShareTracks[0],
+      })
+      setPinnedTrack(screenShareTracks[0])
+      lastAutoFocusedScreenShareTrack.current = screenShareTracks[0]
+    } else if (
+      lastAutoFocusedScreenShareTrack.current &&
+      !screenShareTracks.some(
+        (track) =>
+          track.publication.trackSid ===
+          lastAutoFocusedScreenShareTrack.current?.publication?.trackSid
+      )
+    ) {
+      log.debug('Auto clearing screen share focus.')
+      clearPinnedTrack()
+      lastAutoFocusedScreenShareTrack.current = null
+    }
+    if (pinnedTrackRef && !isTrackReference(pinnedTrackRef)) {
+      const updatedFocusTrack = tracks.find(
+        (tr) =>
+          tr.participant.identity === pinnedTrackRef.participant.identity &&
+          tr.source === pinnedTrackRef.source
+      )
+      if (
+        updatedFocusTrack !== pinnedTrackRef &&
+        isTrackReference(updatedFocusTrack)
+      ) {
+        setPinnedTrack(updatedFocusTrack)
+      }
+    }
+  }, [
+    screenShareTracks
+      .map(
+        (ref) => `${ref.publication.trackSid}_${ref.publication.isSubscribed}`
+      )
+      .join(),
+    pinnedTrackRef?.publication?.trackSid,
+    tracks,
+  ])
+  /* eslint-enable react-hooks/exhaustive-deps */
+
+  return (
+    <>
+      {!pinnedTrackRef ? (
+        <div className="lk-grid-layout-wrapper" style={{ height: 'auto' }}>
+          <GridLayout tracks={tracks} style={{ padding: 0 }}>
+            <ParticipantTile />
+          </GridLayout>
+        </div>
+      ) : (
+        <div className="lk-focus-layout-wrapper" style={{ height: 'auto' }}>
+          <FocusLayoutContainer style={{ padding: 0 }}>
+            <CarouselLayout
+              tracks={carouselTracks}
+              style={{
+                minWidth: '200px',
+              }}
+            >
+              <ParticipantTile />
+            </CarouselLayout>
+            <FocusLayout trackRef={pinnedTrackRef} />
+          </FocusLayoutContainer>
+        </div>
+      )}
+    </>
+  )
+}

src/frontend/src/features/layout/hooks/usePinAnnouncements.ts

@@ -0,0 +1,70 @@
+import { useEffect, useRef, useCallback } from 'react'
+import { useRoomContext } from '@livekit/components-react'
+import { Participant } from 'livekit-client'
+import { useSnapshot } from 'valtio'
+import { useTranslation } from 'react-i18next'
+import { layoutStore } from '@/stores/layout'
+import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
+import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
+
+export const usePinAnnouncements = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'pinAnnouncements' })
+  const { t: tRooms } = useTranslation('rooms')
+
+  const room = useRoomContext()
+  const announce = useScreenReaderAnnounce()
+
+  const { pinnedTrackRef } = useSnapshot(layoutStore)
+  const lastPinnedIdentityRef = useRef<string | null>(null)
+
+  const getAnnouncementName = useCallback(
+    (participant?: Participant | null) => {
+      if (!participant) return tRooms('participants.unknown')
+      return participant.isLocal
+        ? tRooms('participants.you')
+        : getParticipantName(participant)
+    },
+    [tRooms]
+  )
+
+  const pinnedIdentity = pinnedTrackRef?.participant?.identity ?? null
+
+  useEffect(() => {
+    // 1. unpin
+    if (!pinnedIdentity) {
+      const lastIdentity = lastPinnedIdentityRef.current
+      if (!lastIdentity) return
+
+      const lastParticipant =
+        room.localParticipant.identity === lastIdentity
+          ? room.localParticipant
+          : room.remoteParticipants.get(lastIdentity)
+
+      announce(
+        lastParticipant?.isLocal
+          ? t('self.unpin')
+          : t('unpin', { name: getAnnouncementName(lastParticipant) })
+      )
+
+      lastPinnedIdentityRef.current = null
+      return
+    }
+
+    // 2. same pin → do nothing
+    if (lastPinnedIdentityRef.current === pinnedIdentity) return
+
+    // 3. new pin
+    const participant =
+      room.localParticipant.identity === pinnedIdentity
+        ? room.localParticipant
+        : room.remoteParticipants.get(pinnedIdentity)
+
+    lastPinnedIdentityRef.current = pinnedIdentity
+
+    announce(
+      participant?.isLocal
+        ? t('self.pin')
+        : t('pin', { name: getAnnouncementName(participant) })
+    )
+  }, [pinnedIdentity, announce, getAnnouncementName, room, t])
+}

src/frontend/src/features/layout/hooks/useSpeakerPromotionTrigger.ts

@@ -0,0 +1,48 @@
+import { RoomEvent } from 'livekit-client'
+import type { Participant } from 'livekit-client'
+import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
+import { useRoomContext } from '@livekit/components-react'
+import { useEffect, useReducer, useRef } from 'react'
+
+/**
+ * Tripwire for speaker promotion.
+ *
+ * Listens to `RoomEvent.ActiveSpeakersChanged` imperatively and forces ONE
+ * re-render of the host component only when an active speaker has none of
+ * their tiles are within the visible span (`maxVisibleTiles`). That render
+ * re-runs `useVisualStableUpdate`, which reads live `participant.isSpeaking`
+ * state and performs the actual swap.
+ *
+ * Speakers already visible are ignored. Everything else costs zero React work.
+ *
+ * Requires the parent to NOT re-render on speaker events itself, i.e.
+ * `useTracks(..., { updateOnlyOn: [] })` upstream.
+ */
+export function useSpeakerPromotionTrigger(
+  sortedTiles: TrackReferenceOrPlaceholder[]
+) {
+  const room = useRoomContext()
+  const [, forceRender] = useReducer((n: number) => n + 1, 0)
+
+  // Refs so the listener reads current values without re-subscribing
+  // and without itself being a render dependency.
+  const tilesRef = useRef(sortedTiles)
+  tilesRef.current = sortedTiles
+
+  useEffect(() => {
+    const onActiveSpeakersChanged = (speakers: Participant[]) => {
+      const tiles = tilesRef.current
+      const hiddenSpeakerExists = speakers.some(
+        (speaker) =>
+          !tiles.some((t) => t.participant.identity === speaker.identity)
+      )
+      if (hiddenSpeakerExists) {
+        forceRender()
+      }
+    }
+    room.on(RoomEvent.ActiveSpeakersChanged, onActiveSpeakersChanged)
+    return () => {
+      room.off(RoomEvent.ActiveSpeakersChanged, onActiveSpeakersChanged)
+    }
+  }, [room])
+}

src/frontend/src/features/notifications/components/ToastJoined.tsx

@@ -4,13 +4,13 @@ import { Button as RACButton } from 'react-aria-components'
 import { Track } from 'livekit-client'
 import Source = Track.Source
 
-import { useMaybeLayoutContext } from '@livekit/components-react'
-import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile'
+import { ParticipantTile } from '@/features/participantTile/components/ParticipantTile.tsx'
 import { type ToastProps } from './Toast'
 import { HStack, styled } from '@/styled-system/jsx'
 import { Div } from '@/primitives'
 import { useTranslation } from 'react-i18next'
 import { StyledToastContainer } from './StyledToastContainer'
+import { setPinnedTrack } from '@/stores/layout'
 
 const ClickableToast = styled(RACButton, {
   base: {
@@ -28,7 +28,6 @@ export function ToastJoined({ state, ...props }: Readonly<ToastProps>) {
     state,
     ref
   )
-  const layoutContext = useMaybeLayoutContext()
   const participant = props.toast.content.participant
 
   if (!participant) return
@@ -38,18 +37,13 @@ export function ToastJoined({ state, ...props }: Readonly<ToastProps>) {
     publication: participant.getTrackPublication(Source.Camera),
     source: Source.Camera,
   }
-  const pinParticipant = () => {
-    layoutContext?.pin.dispatch?.({
-      msg: 'set_pin',
-      trackReference,
-    })
-  }
+
   return (
     <StyledToastContainer {...toastProps} ref={ref}>
       <ClickableToast
         ref={ref}
         onPress={(e) => {
-          pinParticipant()
+          setPinnedTrack(trackReference)
           closeButtonProps.onPress?.(e)
         }}
       >

src/frontend/src/features/notifications/components/WaitingParticipantNotification.tsx

@@ -7,8 +7,8 @@ import { RiInfinityLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useEffect, useRef, useState } from 'react'
 import { usePrevious } from '@/hooks/usePrevious'
-import { WaitingParticipant } from '@/features/rooms/api/listWaitingParticipants'
-import { useWaitingParticipants } from '@/features/rooms/hooks/useWaitingParticipants'
+import type { WaitingParticipant } from '@/features/participants/api/listWaitingParticipants'
+import { useWaitingParticipants } from '@/features/participants/hooks/useWaitingParticipants'
 import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
 import { useNotificationSound } from '../hooks/useSoundNotification'
 import { NotificationType } from '@/features/notifications'

src/frontend/src/features/participantTile/components/FullScreenShareWarning.tsx

@@ -3,10 +3,10 @@ import { Button, Text } from '@/primitives'
 import { useCallback, useMemo, useRef } from 'react'
 import { screenSharePreferenceStore } from '@/stores/screenSharePreferences'
 import { useSnapshot } from 'valtio'
-import { useLocalParticipant } from '@livekit/components-react'
-import { useSize } from '../hooks/useResizeObserver'
 import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
 import { useTranslation } from 'react-i18next'
+import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
+import { LocalParticipant } from 'livekit-client'
 
 export const FullScreenShareWarning = ({
   trackReference,
@@ -17,7 +17,6 @@ export const FullScreenShareWarning = ({
 
   const warningContainerRef = useRef<HTMLDivElement>(null)
   const { width: containerWidth } = useSize(warningContainerRef)
-  const { localParticipant } = useLocalParticipant()
   const screenSharePreferences = useSnapshot(screenSharePreferenceStore)
 
   const isFullScreenSharing = useMemo(() => {
@@ -57,8 +56,10 @@ export const FullScreenShareWarning = ({
     screenSharePreferences.enabled && isFullScreenSharing
 
   const handleStopScreenShare = async () => {
-    if (!localParticipant.isScreenShareEnabled) return
-    await localParticipant.setScreenShareEnabled(false, {}, {})
+    const participant = trackReference.participant
+    if (!(participant instanceof LocalParticipant)) return
+    if (!participant.isScreenShareEnabled) return
+    await (participant as LocalParticipant).setScreenShareEnabled(false, {}, {})
   }
 
   const handleDismissWarning = useCallback(() => {

src/frontend/src/features/participantTile/components/KeyboardShortcutHint.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import React from 'react'
 import { styled } from '@/styled-system/jsx'
 
 const Hint = styled('div', {
@@ -25,15 +25,17 @@ const Hint = styled('div', {
 })
 
 export interface KeyboardShortcutHintProps {
-  children: ReactNode
+  hint?: string
 }
 
 /**
  * Small reusable bubble used to display and announce keyboard shortcuts,
  * typically when an element receives keyboard focus.
  */
-export const KeyboardShortcutHint: React.FC<KeyboardShortcutHintProps> = ({
-  children,
-}) => {
-  return <Hint>{children}</Hint>
-}
+export const KeyboardShortcutHint = React.memo(
+  ({ hint }: KeyboardShortcutHintProps) => {
+    return <Hint>{hint}</Hint>
+  }
+)
+
+KeyboardShortcutHint.displayName = 'KeyboardShortcutHint'

src/frontend/src/features/participantTile/components/ParticipantMetadata.tsx

@@ -0,0 +1,54 @@
+import {
+  ConnectionQualityIndicator,
+  LockLockedIcon,
+  ScreenShareIcon,
+  useIsEncrypted,
+} from '@livekit/components-react'
+import { HStack } from '@/styled-system/jsx'
+import { Participant } from 'livekit-client'
+import { MutedMicIndicator } from './MutedMicIndicator'
+import { ParticipantName } from './ParticipantName'
+import { RaisedHandMetadataWrapper } from './RaisedHandMetadataWrapper'
+
+export const ParticipantMetadata = ({
+  displayedName,
+  participant,
+  isScreenShare,
+}: {
+  displayedName: string
+  participant: Participant
+  isScreenShare: boolean
+}) => {
+  const isEncrypted = useIsEncrypted(participant)
+
+  return (
+    <div className="lk-participant-metadata">
+      <HStack gap={0.25}>
+        {!isScreenShare && <MutedMicIndicator participant={participant} />}
+        <RaisedHandMetadataWrapper
+          participant={participant}
+          enabled={!isScreenShare}
+        >
+          {isScreenShare && (
+            <ScreenShareIcon
+              style={{
+                maxWidth: '20px',
+                width: '100%',
+              }}
+            />
+          )}
+          {isEncrypted && !isScreenShare && (
+            <LockLockedIcon style={{ marginRight: '0.25rem' }} />
+          )}
+          <div className="lk-participant-name-wrapper">
+            <ParticipantName
+              displayedName={displayedName}
+              isScreenShare={isScreenShare}
+            />
+          </div>
+        </RaisedHandMetadataWrapper>
+      </HStack>
+      <ConnectionQualityIndicator className="lk-participant-metadata-item" />
+    </div>
+  )
+}

src/frontend/src/features/participantTile/components/ParticipantName.tsx

@@ -0,0 +1,42 @@
+import React, { CSSProperties } from 'react'
+import { Text } from '@/primitives'
+import { useTranslation } from 'react-i18next'
+
+const participantNameStyles: CSSProperties = {
+  paddingBottom: '0.1rem',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+}
+
+const participantNameScreenShareStyles: CSSProperties = {
+  ...participantNameStyles,
+  marginLeft: '0.4rem',
+}
+
+export const ParticipantName = React.memo(
+  ({
+    displayedName,
+    isScreenShare = false,
+  }: {
+    displayedName?: string
+    isScreenShare: boolean
+  }) => {
+    const { t } = useTranslation('rooms', { keyPrefix: 'participantTile' })
+    if (isScreenShare) {
+      return (
+        <Text variant="sm" style={participantNameScreenShareStyles}>
+          {t('screenShare', { name: displayedName })}
+        </Text>
+      )
+    }
+
+    return (
+      <Text variant="sm" style={participantNameStyles} aria-hidden="true">
+        {displayedName}
+      </Text>
+    )
+  }
+)
+
+ParticipantName.displayName = 'ParticipantName'

src/frontend/src/features/participantTile/components/ParticipantPlaceholder.tsx

@@ -0,0 +1,55 @@
+import { styled } from '@/styled-system/jsx'
+import { Avatar } from '@/components/Avatar'
+import { getParticipantBackgroundGradient } from '@/features/rooms/utils/getParticipantBackgroundGradient'
+import React, { useMemo } from 'react'
+
+const StyledParticipantPlaceHolder = styled('div', {
+  base: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    containerType: 'size',
+  },
+})
+
+const StyledAvatarWrapper = styled('div', {
+  base: {
+    borderRadius: '50%',
+    aspectRatio: '1 / 1',
+    width: 'min(90cqmin, 160px)',
+    fontSize: 'min(27cqmin, 48px)',
+    '[data-lk-speaking="true"] &': {
+      animation: 'pulse 1s infinite',
+    },
+  },
+})
+
+type ParticipantPlaceholderProps = {
+  color: string
+  displayedNamed: string
+}
+
+export const ParticipantPlaceholder = React.memo(
+  ({ color, displayedNamed }: ParticipantPlaceholderProps) => {
+    const backgroundGradient = useMemo(
+      () => getParticipantBackgroundGradient(color),
+      [color]
+    )
+    return (
+      <StyledParticipantPlaceHolder
+        style={{
+          backgroundColor: color,
+          backgroundImage: backgroundGradient,
+        }}
+      >
+        <StyledAvatarWrapper>
+          <Avatar name={displayedNamed} bgColor={color} context="placeholder" />
+        </StyledAvatarWrapper>
+      </StyledParticipantPlaceHolder>
+    )
+  }
+)
+
+ParticipantPlaceholder.displayName = 'ParticipantPlaceholder'

src/frontend/src/features/participantTile/components/ParticipantTile.tsx

@@ -1,39 +1,32 @@
+import React from 'react'
 import {
   AudioTrack,
-  ConnectionQualityIndicator,
-  LockLockedIcon,
   ParticipantTileProps,
-  ScreenShareIcon,
   useEnsureTrackRef,
   useFeatureContext,
-  useIsEncrypted,
-  useMaybeLayoutContext,
   useMaybeTrackRefContext,
   useParticipantTile,
   VideoTrack,
   TrackRefContext,
   ParticipantContextIfNeeded,
+  useParticipantInfo,
 } from '@livekit/components-react'
-import React from 'react'
 import {
+  isEqualTrackRef,
   isTrackReference,
-  isTrackReferencePinned,
   TrackReferenceOrPlaceholder,
 } from '@livekit/components-core'
 import { Track } from 'livekit-client'
-import { RiHand } from '@remixicon/react'
-import { useRaisedHand, useRaisedHandPosition } from '../hooks/useRaisedHand'
-import { HStack } from '@/styled-system/jsx'
-import { MutedMicIndicator } from './MutedMicIndicator'
 import { ParticipantPlaceholder } from './ParticipantPlaceholder'
-import { ParticipantTileFocus } from './ParticipantTileFocus'
+import { ParticipantTileFocus } from './participantTileFocus/ParticipantTileFocus'
 import { FullScreenShareWarning } from './FullScreenShareWarning'
-import { ParticipantName } from './ParticipantName'
-import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
 import { useTranslation } from 'react-i18next'
 import { getShortcutDescriptorById } from '@/features/shortcuts/catalog'
 import { formatShortcutLabel } from '@/features/shortcuts/formatLabels'
 import { KeyboardShortcutHint } from './KeyboardShortcutHint'
+import { layoutStore, clearPinnedTrack } from '@/stores/layout'
+import { ParticipantMetadata } from './ParticipantMetadata'
+import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
 
 export function TrackRefContextIfNeeded(
   props: React.PropsWithChildren<{
@@ -73,16 +66,12 @@ export const ParticipantTile: (
   ref
 ) {
   const trackReference = useEnsureTrackRef(trackRef)
-
   const { elementProps } = useParticipantTile<HTMLDivElement>({
     htmlProps,
     disableSpeakingIndicator,
     onParticipantClick,
     trackRef: trackReference,
   })
-  const isEncrypted = useIsEncrypted(trackReference.participant)
-  const layoutContext = useMaybeLayoutContext()
-
   const autoManageSubscription = useFeatureContext()?.autoSubscription
 
   const handleSubscribe = React.useCallback(
@@ -90,28 +79,25 @@ export const ParticipantTile: (
       if (
         trackReference.source &&
         !subscribed &&
-        layoutContext &&
-        layoutContext.pin.dispatch &&
-        isTrackReferencePinned(trackReference, layoutContext.pin.state)
+        layoutStore.pinnedTrackRef &&
+        isEqualTrackRef(trackReference, layoutStore.pinnedTrackRef)
       ) {
-        layoutContext.pin.dispatch({ msg: 'clear_pin' })
+        clearPinnedTrack()
       }
     },
-    [trackReference, layoutContext]
+    [trackReference]
   )
 
-  const { isHandRaised } = useRaisedHand({
-    participant: trackReference.participant,
-  })
-
-  const { positionInQueue, firstInQueue } = useRaisedHandPosition({
-    participant: trackReference.participant,
-  })
-
   const isScreenShare = trackReference.source != Track.Source.Camera
   const [hasKeyboardFocus, setHasKeyboardFocus] = React.useState(false)
 
-  const participantName = getParticipantName(trackReference.participant)
+  const participantColor = getParticipantColor(trackReference.participant)
+
+  const { identity, name } = useParticipantInfo({
+    participant: trackReference.participant,
+  })
+  const participantName = name || identity || 'Unknown'
+
   const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
 
   const interactiveProps = {
@@ -138,7 +124,9 @@ export const ParticipantTile: (
     <div ref={ref} style={{ position: 'relative' }} {...interactiveProps}>
       <TrackRefContextIfNeeded trackRef={trackReference}>
         <ParticipantContextIfNeeded participant={trackReference.participant}>
-          <FullScreenShareWarning trackReference={trackReference} />
+          {trackReference.participant.isLocal && (
+            <FullScreenShareWarning trackReference={trackReference} />
+          )}
           {children ?? (
             <>
               {isTrackReference(trackReference) &&
@@ -160,76 +148,16 @@ export const ParticipantTile: (
               )}
               <div className="lk-participant-placeholder">
                 <ParticipantPlaceholder
-                  participant={trackReference.participant}
+                  color={participantColor}
+                  displayedNamed={participantName}
                 />
               </div>
               {!disableMetadata && (
-                <div className="lk-participant-metadata">
-                  <HStack gap={0.25}>
-                    {!isScreenShare && (
-                      <MutedMicIndicator
-                        participant={trackReference.participant}
-                      />
-                    )}
-                    <div
-                      className="lk-participant-metadata-item"
-                      style={{
-                        padding: '0.1rem 0.25rem',
-                        backgroundColor:
-                          isHandRaised && !isScreenShare
-                            ? firstInQueue
-                              ? '#fde047'
-                              : 'white'
-                            : undefined,
-                        color:
-                          isHandRaised && !isScreenShare ? 'black' : undefined,
-                        transition: 'background 200ms ease, color 400ms ease',
-                      }}
-                    >
-                      {isHandRaised && !isScreenShare && (
-                        <span
-                          style={{
-                            display: 'inline-flex',
-                            alignItems: 'center',
-                            gap: '0.1rem',
-                          }}
-                        >
-                          <span>{positionInQueue}</span>
-                          <RiHand
-                            color="black"
-                            size={16}
-                            style={{
-                              marginRight: '0.4rem',
-                              marginLeft: '0.1rem',
-                              minWidth: '16px',
-                              animationDuration: '300ms',
-                              animationName: 'wave_hand',
-                              animationIterationCount: '2',
-                            }}
-                          />
-                        </span>
-                      )}
-                      {isScreenShare && (
-                        <ScreenShareIcon
-                          style={{
-                            maxWidth: '20px',
-                            width: '100%',
-                          }}
-                        />
-                      )}
-                      {isEncrypted && !isScreenShare && (
-                        <LockLockedIcon style={{ marginRight: '0.25rem' }} />
-                      )}
-                      <div className="lk-participant-name-wrapper">
-                        <ParticipantName
-                          isScreenShare={isScreenShare}
-                          participant={trackReference.participant}
-                        />
-                      </div>
-                    </div>
-                  </HStack>
-                  <ConnectionQualityIndicator className="lk-participant-metadata-item" />
-                </div>
+                <ParticipantMetadata
+                  displayedName={participantName}
+                  isScreenShare={isScreenShare}
+                  participant={trackReference.participant}
+                />
               )}
             </>
           )}
@@ -241,13 +169,13 @@ export const ParticipantTile: (
           )}
         </ParticipantContextIfNeeded>
       </TrackRefContextIfNeeded>
-      <KeyboardShortcutHint>
-        {t('toolbarHint', {
+      <KeyboardShortcutHint
+        hint={t('toolbarHint', {
           shortcut: formatShortcutLabel(
             getShortcutDescriptorById('open-shortcuts')?.shortcut
           ),
         })}
-      </KeyboardShortcutHint>
+      />
     </div>
   )
 })

src/frontend/src/features/participantTile/components/RaisedHandMetadataWrapper.tsx

@@ -0,0 +1,91 @@
+import React, { ReactNode, RefObject, useEffect, useRef } from 'react'
+import {
+  useRaisedHand,
+  useRaisedHandPosition,
+} from '@/features/rooms/livekit/hooks/useRaisedHand'
+import { Participant } from 'livekit-client'
+import { RiHand } from '@remixicon/react'
+
+const PositionInQueue = React.memo(
+  ({ positionInQueue }: { positionInQueue?: number }) => {
+    if (!positionInQueue) return
+    return (
+      <span
+        style={{ display: 'inline-flex', alignItems: 'center', gap: '0.1rem' }}
+      >
+        <span>{positionInQueue}</span>
+        <RiHand
+          color="black"
+          size={16}
+          style={{
+            marginRight: '0.4rem',
+            marginLeft: '0.1rem',
+            minWidth: '16px',
+            animationDuration: '300ms',
+            animationName: 'wave_hand',
+            animationIterationCount: '2',
+          }}
+        />
+      </span>
+    )
+  }
+)
+
+PositionInQueue.displayName = 'PositionInQueue'
+
+const RaisedHandActiveItem = ({
+  participant,
+  targetRef,
+}: {
+  participant: Participant
+  targetRef: RefObject<HTMLElement | null>
+}) => {
+  const { positionInQueue, firstInQueue } = useRaisedHandPosition({
+    participant,
+  })
+  useEffect(() => {
+    const el = targetRef.current
+    if (!el) return
+
+    el.style.backgroundColor = firstInQueue ? '#fde047' : 'white'
+    el.style.color = 'black'
+
+    return () => {
+      el.style.backgroundColor = ''
+      el.style.color = ''
+    }
+  }, [targetRef, firstInQueue])
+
+  return <PositionInQueue positionInQueue={positionInQueue} />
+}
+
+export const RaisedHandMetadataWrapper = ({
+  participant,
+  enabled = true,
+  children,
+}: {
+  participant: Participant
+  enabled?: boolean
+  children: ReactNode
+}) => {
+  const ref = useRef(null)
+
+  const { isHandRaised } = useRaisedHand({ participant })
+  const showHand = isHandRaised && enabled
+
+  return (
+    <div
+      ref={ref}
+      className="lk-participant-metadata-item"
+      style={{
+        padding: '0.1rem 0.25rem',
+        transition: 'background 200ms ease',
+      }}
+    >
+      {showHand && (
+        <RaisedHandActiveItem participant={participant} targetRef={ref} />
+      )}
+      {children}
+    </div>
+  )
+}

src/frontend/src/features/participantTile/components/participantTileFocus/EffectsButton.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
+import { Button } from '@/primitives'
+import { RiImageCircleAiFill } from '@remixicon/react'
+
+export const EffectsButton = React.memo(() => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
+  const { isEffectsOpen, toggleEffects } = useSidePanel()
+  return (
+    <Button
+      size={'sm'}
+      variant={'primaryTextDark'}
+      square
+      tooltip={t('effects')}
+      onPress={() => !isEffectsOpen && toggleEffects()}
+    >
+      <RiImageCircleAiFill />
+    </Button>
+  )
+})
+
+EffectsButton.displayName = 'EffectsButton'

src/frontend/src/features/participantTile/components/participantTileFocus/FocusButton.tsx

@@ -0,0 +1,32 @@
+import {
+  isEqualTrackRef,
+  TrackReferenceOrPlaceholder,
+} from '@livekit/components-core'
+import { useTranslation } from 'react-i18next'
+import { useSnapshot } from 'valtio'
+import { clearPinnedTrack, layoutStore, setPinnedTrack } from '@/stores/layout'
+import { Button } from '@/primitives'
+import { RiPushpin2Line, RiUnpinLine } from '@remixicon/react'
+
+export const FocusButton = ({
+  trackRef,
+}: {
+  trackRef: TrackReferenceOrPlaceholder
+}) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
+
+  const { pinnedTrackRef } = useSnapshot(layoutStore)
+  const inFocus = isEqualTrackRef(trackRef, pinnedTrackRef)
+
+  return (
+    <Button
+      size="sm"
+      variant="primaryTextDark"
+      square
+      tooltip={inFocus ? t('pin.disable') : t('pin.enable')}
+      onPress={() => (inFocus ? clearPinnedTrack() : setPinnedTrack(trackRef))}
+    >
+      {inFocus ? <RiUnpinLine /> : <RiPushpin2Line />}
+    </Button>
+  )
+}

src/frontend/src/features/participantTile/components/participantTileFocus/MuteButton.tsx

@@ -0,0 +1,45 @@
+import { Participant, Track } from 'livekit-client'
+import { useTranslation } from 'react-i18next'
+import { useTrackMutedIndicator } from '@livekit/components-react'
+import { useMuteParticipant } from '@/features/rooms/api/muteParticipant'
+import { useState } from 'react'
+import { Button } from '@/primitives'
+import { RiMicLine, RiMicOffLine } from '@remixicon/react'
+import { MuteAlertDialog } from '@/features/rooms/livekit/components/MuteAlertDialog'
+
+export const MuteButton = ({ participant }: { participant: Participant }) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
+
+  const { isMuted } = useTrackMutedIndicator({
+    participant: participant,
+    source: Track.Source.Microphone,
+  })
+
+  const { muteParticipant } = useMuteParticipant()
+  const [isAlertOpen, setIsAlertOpen] = useState(false)
+
+  const name = participant.name || participant.identity
+
+  return (
+    <>
+      <Button
+        isDisabled={isMuted}
+        size={'sm'}
+        variant={'primaryTextDark'}
+        square
+        onPress={() => setIsAlertOpen(true)}
+        tooltip={t('muteParticipant', { name })}
+      >
+        {!isMuted ? <RiMicLine /> : <RiMicOffLine />}
+      </Button>
+      <MuteAlertDialog
+        isOpen={isAlertOpen}
+        onSubmit={() =>
+          muteParticipant(participant).then(() => setIsAlertOpen(false))
+        }
+        onClose={() => setIsAlertOpen(false)}
+        name={name}
+      />
+    </>
+  )
+}

src/frontend/src/features/participantTile/components/participantTileFocus/ParticipantTileFocus.tsx

@@ -0,0 +1,112 @@
+import { css } from '@/styled-system/css'
+import { HStack } from '@/styled-system/jsx'
+import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
+import { ReactNode, useEffect, useRef, useState } from 'react'
+import { Track } from 'livekit-client'
+import { useCanMute } from '@/features/rooms/livekit/hooks/useCanMute'
+import { FocusButton } from './FocusButton'
+import { EffectsButton } from './EffectsButton'
+import { MuteButton } from './MuteButton'
+import { ZoomButton } from './ZoomButton'
+
+const MOUSE_IDLE_TIME = 3000
+
+type FadeOverlayProps = {
+  children: ReactNode
+  hasKeyboardFocus: boolean
+}
+
+const FadeOverlay = ({ children, hasKeyboardFocus }: FadeOverlayProps) => {
+  const [active, setActive] = useState(false)
+  const idleTimerRef = useRef<number | null>(null)
+
+  const clearIdleTimer = () => {
+    if (idleTimerRef.current) window.clearTimeout(idleTimerRef.current)
+  }
+
+  const armIdleTimer = () => {
+    clearIdleTimer()
+    idleTimerRef.current = window.setTimeout(() => {
+      setActive(false)
+    }, MOUSE_IDLE_TIME)
+  }
+
+  const handleActivity = () => {
+    setActive(true)
+    armIdleTimer()
+  }
+
+  useEffect(() => clearIdleTimer, [])
+
+  const isVisible = hasKeyboardFocus || active
+  return (
+    <div
+      className={css({
+        position: 'absolute',
+        left: '0',
+        top: '0',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+        height: '100%',
+      })}
+      data-visible={isVisible || undefined}
+      aria-hidden={!isVisible}
+      onMouseEnter={handleActivity}
+      onMouseMove={handleActivity}
+      onMouseLeave={() => {
+        clearIdleTimer()
+        setActive(false)
+      }}
+    >
+      {isVisible && children}
+    </div>
+  )
+}
+
+export const ParticipantTileFocus = ({
+  trackRef,
+  hasKeyboardFocus,
+}: {
+  trackRef: TrackReferenceOrPlaceholder
+  hasKeyboardFocus: boolean
+}) => {
+  const participant = trackRef.participant
+  const isScreenShare = trackRef.source == Track.Source.ScreenShare
+  const isLocal = participant.isLocal
+  const canMute = useCanMute(participant)
+
+  return (
+    <FadeOverlay hasKeyboardFocus={hasKeyboardFocus}>
+      <div
+        className={css({
+          backgroundColor: 'primaryDark.50',
+          zIndex: 1,
+          borderRadius: '0.25rem',
+          display: 'flex',
+          opacity: 0.6,
+          animation: 'overlayIn 200ms linear 300ms backwards',
+          _hover: {
+            opacity: 0.95,
+          },
+        })}
+      >
+        <HStack gap={0.5} padding={0.5}>
+          <FocusButton trackRef={trackRef} />
+          {!isScreenShare ? (
+            <>
+              {isLocal ? (
+                <EffectsButton />
+              ) : (
+                canMute && <MuteButton participant={participant} />
+              )}
+            </>
+          ) : (
+            !isLocal && <ZoomButton trackRef={trackRef} />
+          )}
+        </HStack>
+      </div>
+    </FadeOverlay>
+  )
+}

src/frontend/src/features/participantTile/components/participantTileFocus/ZoomButton.tsx

@@ -0,0 +1,32 @@
+import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
+import { useTranslation } from 'react-i18next'
+import { useFullScreen } from '@/features/rooms/livekit/hooks/useFullScreen'
+import { Button } from '@/primitives'
+import { RiFullscreenLine } from '@remixicon/react'
+
+export const ZoomButton = ({
+  trackRef,
+}: {
+  trackRef: TrackReferenceOrPlaceholder
+}) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
+  const { toggleFullScreen, isFullscreenAvailable } = useFullScreen({
+    trackRef,
+  })
+
+  if (!isFullscreenAvailable) {
+    return
+  }
+
+  return (
+    <Button
+      size="sm"
+      variant="primaryTextDark"
+      square
+      tooltip={t('fullScreen')}
+      onPress={() => toggleFullScreen()}
+    >
+      <RiFullscreenLine />
+    </Button>
+  )
+}

src/frontend/src/features/participants/components/LowerAllHandsButton.tsx

@@ -1,23 +1,22 @@
 import { Button } from '@/primitives'
 import { useTranslation } from 'react-i18next'
 import type { Participant } from 'livekit-client'
-import { useLowerHandParticipants } from '@/features/rooms/api/lowerHandParticipants'
-import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
+import { useLowerHandParticipants } from '../api/lowerHandParticipants'
 import { css } from '@/styled-system/css'
 import { RiHand } from '@remixicon/react'
+import { AdminOrOwnerOnly } from '@/features/rooms/components/AdminOrOwnerOnly'
 
 type LowerAllHandsButtonProps = {
   participants: Array<Participant>
 }
 
-export const LowerAllHandsButton = ({
+const LowerAllHandsButtonInner = ({
   participants,
 }: LowerAllHandsButtonProps) => {
   const { lowerHandParticipants } = useLowerHandParticipants()
   const { t } = useTranslation('rooms')
 
-  const isAdminOrOwner = useIsAdminOrOwner()
-  if (!isAdminOrOwner) return null
+  if (!participants.length) return null
 
   return (
     <Button
@@ -36,3 +35,13 @@ export const LowerAllHandsButton = ({
     </Button>
   )
 }
+
+export const LowerAllHandsButton = ({
+  participants,
+}: LowerAllHandsButtonProps) => {
+  return (
+    <AdminOrOwnerOnly>
+      <LowerAllHandsButtonInner participants={participants} />
+    </AdminOrOwnerOnly>
+  )
+}

src/frontend/src/features/participants/components/ParticipantRow.tsx

@@ -16,11 +16,11 @@ import Source = Track.Source
 import { RiMicFill, RiMicOffFill } from '@remixicon/react'
 import { Button } from '@/primitives'
 import { useState } from 'react'
-import { MuteAlertDialog } from '../../MuteAlertDialog'
 import { useMuteParticipant } from '@/features/rooms/api/muteParticipant'
 import { useCanMute } from '@/features/rooms/livekit/hooks/useCanMute'
-import { ParticipantMenuButton } from '../../ParticipantMenu/ParticipantMenuButton'
+import { ParticipantMenuButton } from './menu/ParticipantMenuButton'
 import { PinBadge } from './PinBadge'
+import { MuteAlertDialog } from '@/features/rooms/livekit/components/MuteAlertDialog'
 
 type MicIndicatorProps = {
   participant: Participant
@@ -93,9 +93,7 @@ type ParticipantListItemProps = {
   participant: Participant
 }
 
-export const ParticipantListItem = ({
-  participant,
-}: ParticipantListItemProps) => {
+export const ParticipantRow = ({ participant }: ParticipantListItemProps) => {
   const { t } = useTranslation('rooms')
   const name = participant.name || participant.identity
   return (

src/frontend/src/features/participants/components/ParticipantsCollapsibleSection.tsx

@@ -0,0 +1,93 @@
+import { ReactNode, useId, useState } from 'react'
+import { RiArrowUpSLine } from '@remixicon/react'
+import { styled, HStack, VStack } from '@/styled-system/jsx'
+
+const Container = styled('div', {
+  base: {
+    border: '1px solid',
+    borderColor: 'greyscale.250',
+    borderRadius: '8px',
+    margin: '0 .625rem 0.9375rem',
+  },
+})
+
+const Header = styled('button', {
+  base: {
+    minHeight: '2.5rem',
+    paddingX: '1.25rem',
+    paddingY: '0.5rem',
+    gap: '0.5rem',
+    cursor: 'pointer',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+    fontSize: '1rem',
+    transition: 'background 200ms',
+    borderTopRadius: '7px', // container radius (8) minus its 1px border
+    _hover: { backgroundColor: 'greyscale.50' },
+  },
+  variants: {
+    isOpen: { false: { borderRadius: '7px' } },
+  },
+})
+
+const Chevron = styled(RiArrowUpSLine, {
+  base: { transition: 'transform 200ms', flexShrink: 0 },
+  variants: {
+    isOpen: { false: { transform: 'rotate(180deg)' } },
+  },
+})
+
+const List = styled(VStack, {
+  base: {
+    borderTop: '1px solid',
+    borderTopColor: 'greyscale.250',
+    alignItems: 'start',
+    minHeight: 0,
+    flexGrow: 1,
+    paddingY: '0.5rem',
+    paddingX: '1rem',
+    gap: 0,
+  },
+})
+
+export type ParticipantsCollapsibleSectionProps = {
+  heading: string
+  count: number
+  action?: ReactNode
+  children: ReactNode
+}
+
+export const ParticipantsCollapsibleSection = ({
+  heading,
+  count,
+  action,
+  children,
+}: ParticipantsCollapsibleSectionProps) => {
+  const [isOpen, setIsOpen] = useState(true)
+  const listId = useId()
+  return (
+    <Container>
+      <Header
+        type="button"
+        isOpen={isOpen}
+        aria-expanded={isOpen}
+        aria-controls={listId}
+        onClick={() => setIsOpen((open) => !open)}
+      >
+        <HStack justify="space-between" width="100%">
+          <span>{heading}</span>
+          <span>{count}</span>
+        </HStack>
+        <Chevron size={32} isOpen={isOpen} aria-hidden />
+      </Header>
+      {isOpen && (
+        <List id={listId} role="list">
+          {action}
+          {children}
+        </List>
+      )}
+    </Container>
+  )
+}

src/frontend/src/features/participants/components/ParticipantsCount.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { useRemoteParticipants } from '@livekit/components-react'
+import { srOnly } from '@/styles/a11y'
+import { css } from '@/styled-system/css'
+import { RiInfinityLine } from '@remixicon/react'
+
+const badgeStyles = css({
+  position: 'absolute',
+  top: '-.25rem',
+  right: '-.25rem',
+  width: '1.25rem',
+  height: '1.25rem',
+  backgroundColor: 'gray',
+  borderRadius: '50%',
+  color: 'white',
+  fontSize: '0.75rem',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  textAlign: 'center',
+  zIndex: 1,
+  userSelect: 'none',
+})
+
+/**
+ * Isolated so participant join/leave events only re-render the badge,
+ * not the button, tooltip or shortcut registration.
+ */
+export const ParticipantsCount = React.memo(
+  ({ describedById }: { describedById: string }) => {
+    const { t } = useTranslation('rooms', {
+      keyPrefix: 'controls.participants',
+    })
+    const remoteParticipants = useRemoteParticipants({
+      updateOnlyOn: [],
+    })
+    const count = (remoteParticipants?.length ?? 0) + 1
+
+    return (
+      <>
+        <span id={describedById} className={srOnly}>
+          {t('count', { count })}
+        </span>
+        <div className={badgeStyles} aria-hidden>
+          {count < 100 ? count : <RiInfinityLine size={10} />}
+        </div>
+      </>
+    )
+  }
+)
+ParticipantsCount.displayName = 'ParticipantsCount'

src/frontend/src/features/participants/components/ParticipantsList.tsx

@@ -0,0 +1,103 @@
+import { css } from '@/styled-system/css'
+import {
+  useRemoteParticipants,
+  useRoomContext,
+} from '@livekit/components-react'
+import { RoomEvent } from 'livekit-client'
+import { Div, H } from '@/primitives'
+import { useTranslation } from 'react-i18next'
+import { ParticipantRow } from './ParticipantRow'
+import { ParticipantsCollapsibleSection } from './ParticipantsCollapsibleSection'
+import { LowerAllHandsButton } from './LowerAllHandsButton'
+import { MuteEveryoneButton } from './MuteEveryoneButton'
+import { WaitingParticipantsSection } from './WaitingParticipantsSection'
+import { RaisedHandRow } from './RaisedHandRow'
+
+const JoinedParticipantsSections = () => {
+  const room = useRoomContext()
+  const { t } = useTranslation('rooms', { keyPrefix: 'participants' })
+
+  // `updateOnlyOn` filters on the room event *type*, not on which participant
+  // the event is about. `ParticipantNameChanged` and `ParticipantAttributesChanged`
+  // are room-wide and fire for the local participant too, so this hook re-emits
+  // (and we re-render) on local changes, despite its name.
+  //
+  // That is deliberate here: we prepend `room.localParticipant` to the list below,
+  // and its hand-raise state comes from `attributes.handRaisedAt`. Without the
+  // local events waking this component up, raising your own hand would not
+  // update the UI. Do not "optimise" these away.
+  const remoteParticipants = useRemoteParticipants({
+    updateOnlyOn: [
+      RoomEvent.ParticipantNameChanged,
+      RoomEvent.ParticipantAttributesChanged,
+    ],
+  })
+
+  const allParticipants = [
+    room.localParticipant,
+    ...[...remoteParticipants].sort((a, b) =>
+      (a.name || a.identity).localeCompare(b.name || b.identity)
+    ),
+  ]
+
+  const participantsWithRaisedHands = allParticipants
+    .filter((p) => !!p.attributes.handRaisedAt)
+    .sort((a, b) => {
+      const raisedAtA = Date.parse(a.attributes.handRaisedAt!)
+      const raisedAtB = Date.parse(b.attributes.handRaisedAt!)
+      return (
+        (Number.isNaN(raisedAtA) ? Infinity : raisedAtA) -
+        (Number.isNaN(raisedAtB) ? Infinity : raisedAtB)
+      )
+    })
+
+  return (
+    <>
+      {participantsWithRaisedHands.length > 0 && (
+        <ParticipantsCollapsibleSection
+          heading={t('raisedHands')}
+          count={participantsWithRaisedHands.length}
+          action={
+            <LowerAllHandsButton participants={participantsWithRaisedHands} />
+          }
+        >
+          {participantsWithRaisedHands.map((p) => (
+            <RaisedHandRow key={p.identity} participant={p} />
+          ))}
+        </ParticipantsCollapsibleSection>
+      )}
+      <ParticipantsCollapsibleSection
+        heading={t('contributors')}
+        count={allParticipants.length}
+        action={<MuteEveryoneButton participants={remoteParticipants} />}
+      >
+        {allParticipants.map((p) => (
+          <ParticipantRow key={p.identity} participant={p} />
+        ))}
+      </ParticipantsCollapsibleSection>
+    </>
+  )
+}
+
+export const ParticipantsList = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'participants' })
+
+  return (
+    <Div overflowY="scroll">
+      <H
+        lvl={2}
+        className={css({
+          fontSize: '0.875rem',
+          fontWeight: 'bold',
+          color: 'greyscale.600',
+          padding: '0 1.5rem',
+          marginBottom: '0.83em',
+        })}
+      >
+        {t('subheading').toUpperCase()}
+      </H>
+      <WaitingParticipantsSection />
+      <JoinedParticipantsSections />
+    </Div>
+  )
+}

src/frontend/src/features/participants/components/PinBadge.tsx

@@ -0,0 +1,52 @@
+import { Participant, Track } from 'livekit-client'
+import { RiPushpin2Fill } from '@remixicon/react'
+import { css } from '@/styled-system/css'
+import { useMemo } from 'react'
+import { useSnapshot } from 'valtio'
+import { layoutStore } from '@/stores/layout'
+import { isEqualTrackRef } from '@livekit/components-core'
+import Source = Track.Source
+
+export const PinBadge = ({ participant }: { participant: Participant }) => {
+  const cameraTrackRef = useMemo(() => {
+    return {
+      participant: participant,
+      publication: participant.getTrackPublication(Source.Camera),
+      source: Source.Camera,
+    }
+  }, [participant])
+
+  const screenShareTrackRef = useMemo(() => {
+    return {
+      participant: participant,
+      publication: participant.getTrackPublication(Source.ScreenShare),
+      source: Source.ScreenShare,
+    }
+  }, [participant])
+
+  const { pinnedTrackRef } = useSnapshot(layoutStore)
+  const inFocus =
+    isEqualTrackRef(pinnedTrackRef, cameraTrackRef) ||
+    isEqualTrackRef(pinnedTrackRef, screenShareTrackRef)
+
+  if (!inFocus) return
+
+  return (
+    <div
+      className={css({
+        height: '18px',
+        width: '18px',
+        borderRadius: '100%',
+        background: 'white',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'absolute',
+        bottom: '-2px',
+        right: '-4px',
+      })}
+    >
+      <RiPushpin2Fill size={14} aria-hidden />
+    </div>
+  )
+}

src/frontend/src/features/participants/components/RaisedHandRow.tsx

@@ -4,27 +4,47 @@ import { HStack } from '@/styled-system/jsx'
 import { Text } from '@/primitives/Text'
 import { useTranslation } from 'react-i18next'
 import { Avatar } from '@/components/Avatar'
-import { useLowerHandParticipant } from '@/features/rooms/api/lowerHandParticipant'
+import { useLowerHandParticipant } from '../api/lowerHandParticipant'
 import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
-import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
 import type { Participant } from 'livekit-client'
 import { isLocal } from '@/utils/livekit'
 import { RiHand } from '@remixicon/react'
 import { Button } from '@/primitives'
+import { AdminOrOwnerOnly } from '@/features/rooms/components/AdminOrOwnerOnly'
+
+const ActionButton = ({
+  participant,
+  name,
+}: {
+  participant: Participant
+  name: string
+}) => {
+  const { t } = useTranslation('rooms')
+  const { lowerHandParticipant } = useLowerHandParticipant()
+
+  return (
+    <Button
+      square
+      variant="greyscale"
+      size="sm"
+      onPress={() => lowerHandParticipant(participant)}
+      aria-label={t('participants.lowerParticipantHand', { name })}
+      tooltip={t('participants.lowerParticipantHand', { name })}
+      data-attr="participants-lower-hand"
+    >
+      <RiHand />
+    </Button>
+  )
+}
 
 type HandRaisedListItemProps = {
   participant: Participant
 }
 
-export const HandRaisedListItem = ({
-  participant,
-}: HandRaisedListItemProps) => {
+export const RaisedHandRow = ({ participant }: HandRaisedListItemProps) => {
   const { t } = useTranslation('rooms')
   const name = participant.name || participant.identity
 
-  const { lowerHandParticipant } = useLowerHandParticipant()
-  const isAdminOrOwner = useIsAdminOrOwner()
-
   return (
     <HStack
       role="listitem"
@@ -69,19 +89,9 @@ export const HandRaisedListItem = ({
           )}
         </Text>
       </HStack>
-      {isAdminOrOwner && (
-        <Button
-          square
-          variant="greyscale"
-          size="sm"
-          onPress={() => lowerHandParticipant(participant)}
-          aria-label={t('participants.lowerParticipantHand', { name })}
-          tooltip={t('participants.lowerParticipantHand', { name })}
-          data-attr="participants-lower-hand"
-        >
-          <RiHand />
-        </Button>
-      )}
+      <AdminOrOwnerOnly>
+        <ActionButton participant={participant} name={name} />
+      </AdminOrOwnerOnly>
     </HStack>
   )
 }

src/frontend/src/features/participants/components/WaitingParticipantRow.tsx

@@ -3,10 +3,10 @@ import { HStack } from '@/styled-system/jsx'
 import { css } from '@/styled-system/css'
 import { Avatar } from '@/components/Avatar'
 import { useTranslation } from 'react-i18next'
-import { WaitingParticipant } from '@/features/rooms/api/listWaitingParticipants'
+import { WaitingParticipant } from '../api/listWaitingParticipants'
 import { RiCloseLine } from '@remixicon/react'
 
-export const WaitingParticipantListItem = ({
+export const WaitingParticipantRow = ({
   participant,
   onAction,
 }: {

src/frontend/src/features/participants/components/WaitingParticipantsSection.tsx

@@ -0,0 +1,28 @@
+import { useTranslation } from 'react-i18next'
+import { ParticipantsCollapsibleSection } from './ParticipantsCollapsibleSection'
+import { WaitingParticipantRow } from './WaitingParticipantRow'
+import { useWaitingParticipants } from '../hooks/useWaitingParticipants'
+
+export const WaitingParticipantsSection = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'participants.waiting' })
+
+  const { waitingParticipants, handleParticipantEntry } =
+    useWaitingParticipants()
+
+  if (waitingParticipants?.length == 0) return
+
+  return (
+    <ParticipantsCollapsibleSection
+      heading={t('title')}
+      count={waitingParticipants.length}
+    >
+      {waitingParticipants.map((p) => (
+        <WaitingParticipantRow
+          key={p.id}
+          participant={p}
+          onAction={handleParticipantEntry}
+        />
+      ))}
+    </ParticipantsCollapsibleSection>
+  )
+}

src/frontend/src/features/participants/components/menu/ParticipantMenu.tsx

@@ -1,8 +1,8 @@
 import { Menu as RACMenu } from 'react-aria-components'
 import type { Participant } from 'livekit-client'
 import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
-import { PinMenuItem } from './PinMenuItem'
-import { RemoveMenuItem } from './RemoveMenuItem'
+import { PinMenuItem } from './items/PinMenuItem'
+import { RemoveMenuItem } from './items/RemoveMenuItem'
 
 export const ParticipantMenu = ({
   participant,

src/frontend/src/features/participants/components/menu/items/PinMenuItem.tsx

@@ -1,15 +1,28 @@
-import type { Participant } from 'livekit-client'
+import { Participant, Track } from 'livekit-client'
 import { menuRecipe } from '@/primitives/menuRecipe'
 import { HStack } from '@/styled-system/jsx'
 import { RiPushpin2Line, RiUnpinLine } from '@remixicon/react'
 import { MenuItem } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
-import { useFocusToggleParticipant } from '@/features/rooms/livekit/hooks/useFocusToggleParticipant'
+import { useSnapshot } from 'valtio'
+import { clearPinnedTrack, layoutStore, setPinnedTrack } from '@/stores/layout'
+import { isEqualTrackRef } from '@livekit/components-core'
+import Source = Track.Source
+import { useMemo } from 'react'
 
 export const PinMenuItem = ({ participant }: { participant: Participant }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'participantMenu' })
 
-  const { toggle, inFocus } = useFocusToggleParticipant(participant)
+  const trackRef = useMemo(() => {
+    return {
+      participant: participant,
+      publication: participant.getTrackPublication(Source.Camera),
+      source: Source.Camera,
+    }
+  }, [participant])
+
+  const { pinnedTrackRef } = useSnapshot(layoutStore)
+  const inFocus = isEqualTrackRef(pinnedTrackRef, trackRef)
 
   return (
     <MenuItem
@@ -17,7 +30,7 @@ export const PinMenuItem = ({ participant }: { participant: Participant }) => {
         name: participant.name,
       })}
       className={menuRecipe({ icon: true }).item}
-      onAction={toggle}
+      onAction={() => (inFocus ? clearPinnedTrack() : setPinnedTrack(trackRef))}
     >
       <HStack gap={0.25}>
         {inFocus ? (

src/frontend/src/features/participants/hooks/useWaitingParticipants.ts

@@ -7,7 +7,7 @@ import { useEnterRoom } from '../api/enterRoom'
 import {
   useListWaitingParticipants,
   type WaitingParticipant,
-} from '../api/listWaitingParticipants'
+} from '../../participants/api/listWaitingParticipants'
 import { decodeNotificationDataReceived } from '@/features/notifications/utils'
 import { NotificationType } from '@/features/notifications/NotificationType'
 

src/frontend/src/features/pip/components/layout/PipFocusLayout.tsx

@@ -1,7 +1,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 { ParticipantTile } from '@/features/participantTile/components/ParticipantTile'
 import { getTrackKey } from '../../utils/pipTrackSelection'
 
 type PipFocusLayoutProps = {

src/frontend/src/features/pip/components/layout/PipGridLayout.tsx

@@ -1,7 +1,7 @@
 import { memo, useMemo, useRef } from 'react'
 import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
 import { styled } from '@/styled-system/jsx'
-import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile'
+import { ParticipantTile } from '@/features/participantTile/components/ParticipantTile'
 import { usePipElementSize } from '../../hooks/usePipElementSize'
 import { computePipGridLayout } from '../../utils/pipGrid'
 import { getTrackKey } from '../../utils/pipTrackSelection'

src/frontend/src/features/pip/components/layout/PipScreenShareLayout.tsx

@@ -1,7 +1,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 { ParticipantTile } from '@/features/participantTile/components/ParticipantTile'
 import { getTrackKey } from '../../utils/pipTrackSelection'
 
 type PipScreenShareLayoutProps = {

src/frontend/src/features/pip/components/layout/StageFrame.tsx

@@ -1,18 +1,21 @@
 import { useTranslation } from 'react-i18next'
 import { styled } from '@/styled-system/jsx'
-import { useLocalParticipant } from '@livekit/components-react'
+import { useTrackToggle } from '@livekit/components-react'
+import { Track } from 'livekit-client'
 
 export const StageFrame = ({ children }: { children: React.ReactNode }) => {
   const { t } = useTranslation('rooms', {
     keyPrefix: 'pictureInPicture',
   })
-  const { localParticipant } = useLocalParticipant()
+  const { enabled: isScreenSharing } = useTrackToggle({
+    source: Track.Source.ScreenShare,
+  })
 
   return (
     <Container
       role="region"
       aria-label={t('stage')}
-      {...(!localParticipant.isScreenShareEnabled ? { inert: '' } : {})}
+      {...(!isScreenSharing ? { inert: '' } : {})}
     >
       {children}
     </Container>

src/frontend/src/features/recording/components/TranscriptSidePanel.tsx

@@ -23,7 +23,6 @@ import { VStack } from '@/styled-system/jsx'
 import { Checkbox } from '@/primitives/Checkbox.tsx'
 
 import {
-  useSettingsDialog,
   SettingsDialogExtendedKey,
   useTranscriptionLanguage,
 } from '@/features/settings'
@@ -35,6 +34,7 @@ import { useIsMetadataCollectorEnabled } from '../hooks/useMetadataCollectorEnab
 import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
 import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
 import { LimitDescription } from './LimitDescription'
+import { openSettingsDialog } from '@/stores/settings'
 
 export const TranscriptSidePanel = () => {
   const { data } = useConfig()
@@ -48,8 +48,6 @@ export const TranscriptSidePanel = () => {
   const { selectedLanguageKey, selectedLanguageLabel, isLanguageSetToAuto } =
     useTranscriptionLanguage()
 
-  const { openSettingsDialog } = useSettingsDialog()
-
   const hasTranscriptAccess = useHasRecordingAccess(
     RecordingMode.Transcript,
     FeatureFlags.Transcript

src/frontend/src/features/rooms/components/ActiveSpeaker.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { styled } from '@/styled-system/jsx'
 
 const StyledContainer = styled('div', {
@@ -67,35 +68,36 @@ export type ActiveSpeakerProps = {
   pushToTalk?: boolean
 }
 
-export const ActiveSpeaker = ({
-  isSpeaking,
-  pushToTalk,
-}: ActiveSpeakerProps) => {
-  return (
-    <StyledContainer pushToTalk={pushToTalk}>
-      <StyledChild
-        pushToTalk={pushToTalk}
-        active={isSpeaking}
-        size="small"
-        style={{
-          animationDelay: '300ms',
-        }}
-      />
-      <StyledChild
-        pushToTalk={pushToTalk}
-        active={isSpeaking}
-        style={{
-          animationDelay: '100ms',
-        }}
-      />
-      <StyledChild
-        pushToTalk={pushToTalk}
-        active={isSpeaking}
-        size="small"
-        style={{
-          animationDelay: '500ms',
-        }}
-      />
-    </StyledContainer>
-  )
-}
+export const ActiveSpeaker = React.memo(
+  ({ isSpeaking, pushToTalk }: ActiveSpeakerProps) => {
+    return (
+      <StyledContainer pushToTalk={pushToTalk}>
+        <StyledChild
+          pushToTalk={pushToTalk}
+          active={isSpeaking}
+          size="small"
+          style={{
+            animationDelay: '300ms',
+          }}
+        />
+        <StyledChild
+          pushToTalk={pushToTalk}
+          active={isSpeaking}
+          style={{
+            animationDelay: '100ms',
+          }}
+        />
+        <StyledChild
+          pushToTalk={pushToTalk}
+          active={isSpeaking}
+          size="small"
+          style={{
+            animationDelay: '500ms',
+          }}
+        />
+      </StyledContainer>
+    )
+  }
+)
+
+ActiveSpeaker.displayName = 'ActiveSpeaker'

src/frontend/src/features/rooms/components/Conference.tsx

@@ -170,7 +170,6 @@ export const Conference = ({
     prepareConnection()
   }, [room, apiConfig, isConnectionWarmedUp])
 
-  const [showInviteDialog, setShowInviteDialog] = useState(mode === 'create')
   const [mediaDeviceError, setMediaDeviceError] = useState<{
     error: MediaDeviceFailure | null
     kind: MediaDeviceKind | null
@@ -303,13 +302,7 @@ export const Conference = ({
           }}
         >
           <VideoConference />
-          {showInviteDialog && !isMobile && (
-            <InviteDialog
-              isOpen={showInviteDialog}
-              onOpenChange={setShowInviteDialog}
-              onClose={() => setShowInviteDialog(false)}
-            />
-          )}
+          {!isMobile && <InviteDialog mode={mode} />}
           <MediaDeviceErrorAlert
             {...mediaDeviceError}
             onClose={() => setMediaDeviceError({ error: null, kind: null })}

src/frontend/src/features/rooms/components/InviteDialog.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import { getRouteUrl } from '@/navigation/getRouteUrl'
-import { Div, Button, type DialogProps, P, Bold } from '@/primitives'
+import { Div, Button, P, Bold } from '@/primitives'
 import { HStack, styled, VStack } from '@/styled-system/jsx'
 import { Heading, Dialog } from 'react-aria-components'
 import { Text, text } from '@/primitives/Text'
@@ -10,7 +10,7 @@ import {
   RiFileCopyLine,
   RiSpam2Fill,
 } from '@remixicon/react'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { css } from '@/styled-system/css'
 import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
 import { ApiAccessLevel } from '@/features/rooms/api/ApiRoom'
@@ -39,7 +39,9 @@ const StyledRACDialog = styled(Dialog, {
   },
 })
 
-export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
+export const InviteDialog = ({ mode }: { mode: 'join' | 'create' }) => {
+  const [showInviteDialog, setShowInviteDialog] = useState(mode === 'create')
+
   const { t } = useTranslation('rooms', { keyPrefix: 'shareDialog' })
 
   const roomData = useRoomData()
@@ -58,163 +60,161 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
     copyRoomUrlToClipboard,
   } = useCopyRoomToClipboard(roomData)
 
+  if (!showInviteDialog) return null
   return (
-    <StyledRACDialog {...props}>
-      {({ close }) => (
-        <VStack
-          alignItems="left"
-          justify="start"
-          gap={0}
-          style={{ maxWidth: '100%', overflow: 'visible' }}
-        >
-          <Heading slot="title" level={2} className={text({ variant: 'h2' })}>
-            {t('heading')}
-          </Heading>
-          <Div position="absolute" top="5" right="5">
-            <Button
-              invisible
-              variant="tertiaryText"
-              size="xs"
-              onPress={() => {
-                props.onClose?.()
-                close()
-              }}
-              aria-label={t('closeDialog')}
-            >
-              <RiCloseLine />
-            </Button>
-          </Div>
-          <P>{t('description')}</P>
-          {isTelephonyReadyForUse ? (
+    <StyledRACDialog>
+      <VStack
+        alignItems="left"
+        justify="start"
+        gap={0}
+        style={{ maxWidth: '100%', overflow: 'visible' }}
+      >
+        <Heading slot="title" level={2} className={text({ variant: 'h2' })}>
+          {t('heading')}
+        </Heading>
+        <Div position="absolute" top="5" right="5">
+          <Button
+            invisible
+            variant="tertiaryText"
+            size="xs"
+            onPress={() => {
+              setShowInviteDialog(false)
+            }}
+            aria-label={t('closeDialog')}
+          >
+            <RiCloseLine />
+          </Button>
+        </Div>
+        <P>{t('description')}</P>
+        {isTelephonyReadyForUse ? (
+          <div
+            className={css({
+              width: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+              marginTop: '0.5rem',
+              gap: '1rem',
+              overflow: 'visible',
+            })}
+          >
             <div
               className={css({
-                width: '100%',
                 display: 'flex',
-                flexDirection: 'column',
-                marginTop: '0.5rem',
-                gap: '1rem',
-                overflow: 'visible',
+                alignItems: 'center',
+                justifyContent: 'space-between',
               })}
             >
-              <div
-                className={css({
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'space-between',
-                })}
-              >
-                <Text as="p" wrap="pretty">
-                  {roomUrl?.replace(/^https?:\/\//, '')}
-                </Text>
-                {isTelephonyReadyForUse && roomUrl && (
-                  <Button
-                    variant={isRoomUrlCopied ? 'success' : 'tertiaryText'}
-                    square
-                    size={'sm'}
-                    onPress={copyRoomUrlToClipboard}
-                    aria-label={isRoomUrlCopied ? t('copied') : t('copyUrl')}
-                    tooltip={isRoomUrlCopied ? t('copied') : t('copyUrl')}
-                  >
-                    {isRoomUrlCopied ? (
-                      <RiCheckLine aria-hidden="true" />
-                    ) : (
-                      <RiFileCopyLine aria-hidden="true" />
-                    )}
-                  </Button>
-                )}
-              </div>
-              <div
-                className={css({
-                  display: 'flex',
-                  flexDirection: 'column',
-                })}
-              >
-                <Text as="p" wrap="pretty">
-                  <Bold>{t('phone.call')}</Bold> ({telephony?.country}){' '}
-                  {telephony?.internationalPhoneNumber}
-                </Text>
-                <Text as="p" wrap="pretty">
-                  <Bold>{t('phone.pinCode')}</Bold>{' '}
-                  {formatPinCode(roomData?.pin_code)}
-                </Text>
-              </div>
-
-              <Button
-                variant={isCopied ? 'success' : 'secondaryText'}
-                size="sm"
-                fullWidth
-                aria-label={isCopied ? t('copied') : t('copy')}
-                style={{
-                  justifyContent: 'start',
-                }}
-                onPress={copyRoomToClipboard}
-                data-attr="share-dialog-copy"
-              >
-                {isCopied ? (
-                  <>
-                    <RiCheckLine
-                      size={18}
-                      style={{ marginRight: '8px' }}
-                      aria-hidden="true"
-                    />
-                    {t('copied')}
-                  </>
-                ) : (
-                  <>
-                    <RiFileCopyLine
-                      style={{ marginRight: '6px', minWidth: '18px' }}
-                      aria-hidden="true"
-                    />
-                    {t('copy')}
-                  </>
-                )}
-              </Button>
+              <Text as="p" wrap="pretty">
+                {roomUrl?.replace(/^https?:\/\//, '')}
+              </Text>
+              {isTelephonyReadyForUse && roomUrl && (
+                <Button
+                  variant={isRoomUrlCopied ? 'success' : 'tertiaryText'}
+                  square
+                  size={'sm'}
+                  onPress={copyRoomUrlToClipboard}
+                  aria-label={isRoomUrlCopied ? t('copied') : t('copyUrl')}
+                  tooltip={isRoomUrlCopied ? t('copied') : t('copyUrl')}
+                >
+                  {isRoomUrlCopied ? (
+                    <RiCheckLine aria-hidden="true" />
+                  ) : (
+                    <RiFileCopyLine aria-hidden="true" />
+                  )}
+                </Button>
+              )}
             </div>
-          ) : (
+            <div
+              className={css({
+                display: 'flex',
+                flexDirection: 'column',
+              })}
+            >
+              <Text as="p" wrap="pretty">
+                <Bold>{t('phone.call')}</Bold> ({telephony?.country}){' '}
+                {telephony?.internationalPhoneNumber}
+              </Text>
+              <Text as="p" wrap="pretty">
+                <Bold>{t('phone.pinCode')}</Bold>{' '}
+                {formatPinCode(roomData?.pin_code)}
+              </Text>
+            </div>
+
             <Button
-              variant={isCopied ? 'success' : 'tertiary'}
+              variant={isCopied ? 'success' : 'secondaryText'}
+              size="sm"
               fullWidth
               aria-label={isCopied ? t('copied') : t('copy')}
+              style={{
+                justifyContent: 'start',
+              }}
               onPress={copyRoomToClipboard}
               data-attr="share-dialog-copy"
             >
               {isCopied ? (
                 <>
-                  <RiCheckLine size={24} style={{ marginRight: '8px' }} />
+                  <RiCheckLine
+                    size={18}
+                    style={{ marginRight: '8px' }}
+                    aria-hidden="true"
+                  />
                   {t('copied')}
                 </>
               ) : (
                 <>
-                  <RiFileCopyLine size={24} style={{ marginRight: '8px' }} />
-                  {t('copyUrl')}
+                  <RiFileCopyLine
+                    style={{ marginRight: '6px', minWidth: '18px' }}
+                    aria-hidden="true"
+                  />
+                  {t('copy')}
                 </>
               )}
             </Button>
-          )}
-          {roomData?.access_level === ApiAccessLevel.PUBLIC && (
-            <HStack>
-              <div
+          </div>
+        ) : (
+          <Button
+            variant={isCopied ? 'success' : 'tertiary'}
+            fullWidth
+            aria-label={isCopied ? t('copied') : t('copy')}
+            onPress={copyRoomToClipboard}
+            data-attr="share-dialog-copy"
+          >
+            {isCopied ? (
+              <>
+                <RiCheckLine size={24} style={{ marginRight: '8px' }} />
+                {t('copied')}
+              </>
+            ) : (
+              <>
+                <RiFileCopyLine size={24} style={{ marginRight: '8px' }} />
+                {t('copyUrl')}
+              </>
+            )}
+          </Button>
+        )}
+        {roomData?.access_level === ApiAccessLevel.PUBLIC && (
+          <HStack>
+            <div
+              className={css({
+                backgroundColor: 'primary.200',
+                borderRadius: '50%',
+                padding: '4px',
+                marginTop: '1rem',
+              })}
+            >
+              <RiSpam2Fill
+                size={22}
                 className={css({
-                  backgroundColor: 'primary.200',
-                  borderRadius: '50%',
-                  padding: '4px',
-                  marginTop: '1rem',
+                  fill: 'primary.500',
                 })}
-              >
-                <RiSpam2Fill
-                  size={22}
-                  className={css({
-                    fill: 'primary.500',
-                  })}
-                />
-              </div>
-              <Text variant="sm" style={{ marginTop: '1rem' }}>
-                {t('permissions')}
-              </Text>
-            </HStack>
-          )}
-        </VStack>
-      )}
+              />
+            </div>
+            <Text variant="sm" style={{ marginTop: '1rem' }}>
+              {t('permissions')}
+            </Text>
+          </HStack>
+        )}
+      </VStack>
     </StyledRACDialog>
   )
 }

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

@@ -1,27 +1,35 @@
+import { useConfig } from '@/api/useConfig'
+import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
 import {
   useRemoteParticipants,
   useRoomContext,
 } from '@livekit/components-react'
 import { useEffect, useRef } from 'react'
-import { DisconnectReason, RoomEvent } from 'livekit-client'
-import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
-import posthog from 'posthog-js'
-import { connectionObserverStore } from '@/stores/connectionObserver'
-import { useConfig } from '@/api/useConfig'
-import { userPreferencesStore } from '@/stores/userPreferences'
 import { useSnapshot } from 'valtio'
-import { useIsAdvancedConnectionObserverEnabled } from './useIsAdvancedConnectionObserverEnabled'
+import { DisconnectReason, RoomEvent } from 'livekit-client'
+
+import { userPreferencesStore } from '@/stores/userPreferences'
+import { connectionObserverStore } from '@/stores/connectionObserver'
+
+import posthog from 'posthog-js'
+import { useFeatureFlagEnabled } from 'posthog-js/react'
+import { isMobileBrowser } from '@livekit/components-core'
+import { FeatureFlags } from '@/features/analytics/enums'
 
 const CANDIDATE_POLL_INTERVAL_MS = 5000
 
-export const useConnectionObserver = () => {
+export const ConnectionObserver = () => {
   const room = useRoomContext()
   const connectionStartTimeRef = useRef<number | null>(null)
 
   const { data } = useConfig()
   const isAnalyticsEnabled = useIsAnalyticsEnabled()
+
+  const featureEnabled = useFeatureFlagEnabled(FeatureFlags.candidatePolling)
+  const isMobile = isMobileBrowser()
+
   const isAdvancedConnectionObserverEnabled =
-    useIsAdvancedConnectionObserverEnabled()
+    !isMobile && isAnalyticsEnabled && featureEnabled
 
   const userPreferencesSnap = useSnapshot(userPreferencesStore)
 
@@ -232,4 +240,6 @@ export const useConnectionObserver = () => {
       connectionStartTimeRef.current = null
     }
   }, [])
+
+  return null
 }

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

@@ -7,9 +7,9 @@ import { HStack } from '@/styled-system/jsx'
 import { useEffect, useRef, useState } from 'react'
 import { navigateTo } from '@/navigation/navigateTo'
 import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
-import { useSettingsDialog } from '@/features/settings/hook/useSettingsDialog'
 import { SettingsDialogExtendedKey } from '@/features/settings/type'
 import { useHumanizeDuration } from '@/hooks/useHumanizeDuration'
+import { openSettingsDialog } from '@/stores/settings'
 
 const IDLE_DISCONNECT_TIMEOUT_MS = 120000 // 2 minutes
 const COUNTDOWN_ANNOUNCEMENT_SECONDS = new Set([90, 60, 30])
@@ -94,7 +94,6 @@ const Description = () => {
 
 const Settings = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'isIdleDisconnectModal' })
-  const { openSettingsDialog } = useSettingsDialog()
   return (
     <P>
       {t('settingsPrefix')}{' '}

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

@@ -1,44 +0,0 @@
-import type { CSSProperties } from 'react'
-import { Text } from '@/primitives'
-import { useTranslation } from 'react-i18next'
-import { useParticipantInfo } from '@livekit/components-react'
-import type { Participant } from 'livekit-client'
-
-const participantNameStyles: CSSProperties = {
-  paddingBottom: '0.1rem',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-}
-
-const participantNameScreenShareStyles: CSSProperties = {
-  ...participantNameStyles,
-  marginLeft: '0.4rem',
-}
-
-export const ParticipantName = ({
-  participant,
-  isScreenShare = false,
-}: {
-  participant: Participant
-  isScreenShare: boolean
-}) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'participantTile' })
-
-  const { identity, name } = useParticipantInfo({ participant })
-  const displayedName = name != '' ? name : identity
-
-  if (isScreenShare) {
-    return (
-      <Text variant="sm" style={participantNameScreenShareStyles}>
-        {t('screenShare', { name: displayedName })}
-      </Text>
-    )
-  }
-
-  return (
-    <Text variant="sm" style={participantNameStyles} aria-hidden="true">
-      {displayedName}
-    </Text>
-  )
-}

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

@@ -1,73 +0,0 @@
-import type { Participant } from 'livekit-client'
-import { styled } from '@/styled-system/jsx'
-import { Avatar } from '@/components/Avatar'
-import { useIsSpeaking } from '@livekit/components-react'
-import { getParticipantBackgroundGradient } from '@/features/rooms/utils/getParticipantBackgroundGradient'
-import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
-import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
-import { useMemo, useRef } from 'react'
-
-const StyledParticipantPlaceHolder = styled('div', {
-  base: {
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-})
-
-type ParticipantPlaceholderProps = {
-  participant: Participant
-}
-
-export const ParticipantPlaceholder = ({
-  participant,
-}: ParticipantPlaceholderProps) => {
-  const isSpeaking = useIsSpeaking(participant)
-  const participantColor = getParticipantColor(participant)
-  const backgroundGradient = useMemo(
-    () => getParticipantBackgroundGradient(participantColor),
-    [participantColor]
-  )
-
-  const placeholderEl = useRef<HTMLDivElement>(null)
-  const { width, height } = useSize(placeholderEl)
-
-  const minDimension = Math.min(width, height)
-  const avatarSize = useMemo(
-    () => Math.min(Math.round(minDimension * 0.9), 160),
-    [minDimension]
-  )
-
-  const initialSize = useMemo(() => Math.round(avatarSize * 0.3), [avatarSize])
-
-  return (
-    <StyledParticipantPlaceHolder
-      ref={placeholderEl}
-      style={{
-        backgroundColor: participantColor,
-        backgroundImage: backgroundGradient,
-      }}
-    >
-      <div
-        style={{
-          borderRadius: '50%',
-          animation: isSpeaking ? 'pulse 1s infinite' : undefined,
-          height: 'auto',
-          aspectRatio: '1/1',
-          width: '80%',
-          maxWidth: `${avatarSize}px`,
-          fontSize: `${initialSize}px`,
-        }}
-      >
-        {/*fixme - participant doesn't update on ParticipantNameChanged event */}
-        <Avatar
-          name={participant.name}
-          bgColor={participantColor}
-          context="placeholder"
-        />
-      </div>
-    </StyledParticipantPlaceHolder>
-  )
-}

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

@@ -1,232 +0,0 @@
-import { css } from '@/styled-system/css'
-import { HStack } from '@/styled-system/jsx'
-import { Button } from '@/primitives'
-import {
-  RiFullscreenLine,
-  RiImageCircleAiFill,
-  RiMicLine,
-  RiMicOffLine,
-  RiPushpin2Line,
-  RiUnpinLine,
-} from '@remixicon/react'
-import {
-  useFocusToggle,
-  useTrackMutedIndicator,
-} from '@livekit/components-react'
-import { useTranslation } from 'react-i18next'
-import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
-import { useEffect, useRef, useState } from 'react'
-import { useSidePanel } from '../hooks/useSidePanel'
-import { useFullScreen } from '../hooks/useFullScreen'
-import { type Participant, Track } from 'livekit-client'
-import { MuteAlertDialog } from './MuteAlertDialog'
-import { useMuteParticipant } from '@/features/rooms/api/muteParticipant'
-import { useCanMute } from '@/features/rooms/livekit/hooks/useCanMute'
-
-const ZoomButton = ({
-  trackRef,
-}: {
-  trackRef: TrackReferenceOrPlaceholder
-}) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
-  const { toggleFullScreen, isFullscreenAvailable } = useFullScreen({
-    trackRef,
-  })
-
-  if (!isFullscreenAvailable) {
-    return
-  }
-
-  return (
-    <Button
-      size="sm"
-      variant="primaryTextDark"
-      square
-      tooltip={t('fullScreen')}
-      onPress={() => toggleFullScreen()}
-    >
-      <RiFullscreenLine />
-    </Button>
-  )
-}
-
-const FocusButton = ({
-  trackRef,
-}: {
-  trackRef: TrackReferenceOrPlaceholder
-}) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
-  const { mergedProps, inFocus } = useFocusToggle({
-    trackRef,
-    props: {},
-  })
-  return (
-    <Button
-      size="sm"
-      variant="primaryTextDark"
-      square
-      tooltip={inFocus ? t('pin.disable') : t('pin.enable')}
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      onPress={(event) => mergedProps?.onClick?.(event as any)}
-    >
-      {inFocus ? <RiUnpinLine /> : <RiPushpin2Line />}
-    </Button>
-  )
-}
-
-const EffectsButton = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
-  const { isEffectsOpen, toggleEffects } = useSidePanel()
-  return (
-    <Button
-      size={'sm'}
-      variant={'primaryTextDark'}
-      square
-      tooltip={t('effects')}
-      onPress={() => !isEffectsOpen && toggleEffects()}
-    >
-      <RiImageCircleAiFill />
-    </Button>
-  )
-}
-
-const MuteButton = ({ participant }: { participant: Participant }) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
-
-  const { isMuted } = useTrackMutedIndicator({
-    participant: participant,
-    source: Track.Source.Microphone,
-  })
-
-  const { muteParticipant } = useMuteParticipant()
-  const [isAlertOpen, setIsAlertOpen] = useState(false)
-
-  const name = participant.name || participant.identity
-
-  return (
-    <>
-      <Button
-        isDisabled={isMuted}
-        size={'sm'}
-        variant={'primaryTextDark'}
-        square
-        onPress={() => setIsAlertOpen(true)}
-        tooltip={t('muteParticipant', { name })}
-      >
-        {!isMuted ? <RiMicLine /> : <RiMicOffLine />}
-      </Button>
-      <MuteAlertDialog
-        isOpen={isAlertOpen}
-        onSubmit={() =>
-          muteParticipant(participant).then(() => setIsAlertOpen(false))
-        }
-        onClose={() => setIsAlertOpen(false)}
-        name={name}
-      />
-    </>
-  )
-}
-
-const MOUSE_IDLE_TIME = 3000
-
-export const ParticipantTileFocus = ({
-  trackRef,
-  hasKeyboardFocus,
-}: {
-  trackRef: TrackReferenceOrPlaceholder
-  hasKeyboardFocus: boolean
-}) => {
-  const [hovered, setHovered] = useState(false)
-  const [opacity, setOpacity] = useState(0)
-
-  const idleTimerRef = useRef<number | null>(null)
-  const [isIdleRef, setIsIdleRef] = useState(false)
-
-  const isVisible = hasKeyboardFocus || (hovered && !isIdleRef)
-
-  useEffect(() => {
-    if (isVisible) {
-      // Wait for next frame to ensure element is mounted
-      requestAnimationFrame(() => {
-        setOpacity(0.6)
-      })
-    } else {
-      setOpacity(0)
-    }
-  }, [isVisible])
-
-  const handleMouseMove = () => {
-    if (idleTimerRef.current) {
-      window.clearTimeout(idleTimerRef.current)
-    }
-    idleTimerRef.current = window.setTimeout(() => {
-      setIsIdleRef(true)
-    }, MOUSE_IDLE_TIME)
-    setIsIdleRef(false)
-  }
-
-  const participant = trackRef.participant
-
-  const isScreenShare = trackRef.source == Track.Source.ScreenShare
-  const isLocal = trackRef.participant.isLocal
-
-  const canMute = useCanMute(participant)
-
-  return (
-    <div
-      className={css({
-        position: 'absolute',
-        left: '0',
-        top: '0',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '100%',
-        height: '100%',
-      })}
-      aria-hidden={!isVisible}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-      onMouseMove={handleMouseMove}
-    >
-      {isVisible && (
-        <div
-          className={css({
-            backgroundColor: 'primaryDark.50',
-            transition: 'opacity 200ms linear',
-            zIndex: 1,
-            borderRadius: '0.25rem',
-            display: 'flex',
-            _hover: {
-              opacity: '0.95 !important',
-            },
-          })}
-          style={{ opacity }}
-        >
-          <HStack
-            gap={0.5}
-            className={css({
-              padding: '0.5rem',
-              _hover: {
-                opacity: '1 !important',
-              },
-            })}
-          >
-            <FocusButton trackRef={trackRef} />
-            {!isScreenShare ? (
-              <>
-                {participant.isLocal ? (
-                  <EffectsButton />
-                ) : (
-                  canMute && <MuteButton participant={participant} />
-                )}
-              </>
-            ) : (
-              !isLocal && <ZoomButton trackRef={trackRef} />
-            )}
-          </HStack>
-        </div>
-      )}
-    </div>
-  )
-}

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

@@ -0,0 +1,6 @@
+import { useSyncLiveKitMetadata } from '../hooks/useSyncLiveKitMetadata'
+
+export const RoomMetadataSynchronizer = () => {
+  useSyncLiveKitMetadata()
+  return null
+}

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

@@ -5,10 +5,10 @@ import { text } from '@/primitives/Text'
 import { Button, Div } from '@/primitives'
 import { RiArrowLeftLine, RiCloseLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import { ParticipantsList } from './controls/Participants/ParticipantsList'
+import { ParticipantsList } from '@/features/participants/components/ParticipantsList'
 import { PanelId, useSidePanel } from '../hooks/useSidePanel'
 import React, { ReactNode, useCallback, useRef } from 'react'
-import { Chat } from '../prefabs/Chat'
+import { Chat } from '@/features/chat/components/Chat'
 import { Effects } from './effects/Effects'
 import { Admin } from './Admin'
 import { Tools } from './Tools'
@@ -218,7 +218,7 @@ export const SidePanel = () => {
       <Panel isOpen={isEffectsOpen}>
         <Effects />
       </Panel>
-      <Panel isOpen={isChatOpen} keepAlive={true}>
+      <Panel isOpen={isChatOpen}>
         <Chat />
       </Panel>
       <Panel isOpen={isToolsOpen} keepAlive={true}>

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

@@ -11,16 +11,16 @@ import { useSnapshot } from 'valtio'
 import { userChoicesStore } from '@/stores/userChoices'
 
 /**
- * This hook sets initial video quality for new participants as they join.
+ * Sets initial video quality for new participants as they join.
  * LiveKit doesn't allow handling video quality preferences at the room level.
  */
-export const useVideoResolutionSubscription = () => {
+export const VideoResolutionSubscription = () => {
   const { videoSubscribeQuality } = useSnapshot(userChoicesStore)
-
   const room = useRoomContext()
 
   useEffect(() => {
     if (!room) return
+
     const handleTrackPublished = (
       publication: RemoteTrackPublication,
       _participant: RemoteParticipant
@@ -41,9 +41,10 @@ export const useVideoResolutionSubscription = () => {
     }
 
     room.on(RoomEvent.TrackPublished, handleTrackPublished)
-
     return () => {
       room.off(RoomEvent.TrackPublished, handleTrackPublished)
     }
   }, [room, videoSubscribeQuality])
+
+  return null
 }

src/frontend/src/features/rooms/livekit/components/chat/Entry.tsx

@@ -1,71 +0,0 @@
-import type { ReceivedChatMessage } from '@livekit/components-core'
-import * as React from 'react'
-import { css } from '@/styled-system/css'
-import { Text } from '@/primitives'
-import type { MessageFormatter } from '@livekit/components-react'
-
-export interface ChatEntryProps extends React.HTMLAttributes<HTMLLIElement> {
-  entry: ReceivedChatMessage
-  hideMetadata?: boolean
-  messageFormatter?: MessageFormatter
-}
-
-export const ChatEntry: (
-  props: ChatEntryProps & React.RefAttributes<HTMLLIElement>
-) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
-  HTMLLIElement,
-  ChatEntryProps
->(function ChatEntry(
-  { entry, hideMetadata = false, messageFormatter, ...props }: ChatEntryProps,
-  ref
-) {
-  const formattedMessage = React.useMemo(() => {
-    return messageFormatter ? messageFormatter(entry.message) : entry.message
-  }, [entry.message, messageFormatter])
-  const time = new Date(entry.timestamp)
-  const locale = navigator ? navigator.language : 'en-US'
-
-  return (
-    <li
-      className={css({
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '0.25rem',
-      })}
-      ref={ref}
-      title={time.toLocaleTimeString(locale, { timeStyle: 'full' })}
-      data-lk-message-origin={entry.from?.isLocal ? 'local' : 'remote'}
-      {...props}
-    >
-      {!hideMetadata && (
-        <span
-          className={css({
-            display: 'flex',
-            gap: '0.5rem',
-            paddingTop: '0.75rem',
-          })}
-        >
-          <Text bold={true} variant="sm">
-            {entry.from?.name ?? entry.from?.identity}
-          </Text>
-          <Text variant="sm" className={css({ color: 'gray.700' })}>
-            {time.toLocaleTimeString(locale, { timeStyle: 'short' })}
-          </Text>
-        </span>
-      )}
-      <Text
-        variant="sm"
-        margin={false}
-        className={css({
-          whiteSpace: 'pre-wrap',
-          '& .lk-chat-link': {
-            color: 'blue',
-            textDecoration: 'underline',
-          },
-        })}
-      >
-        {formattedMessage}
-      </Text>
-    </li>
-  )
-})

src/frontend/src/features/rooms/livekit/components/chat/Input.tsx

@@ -1,120 +0,0 @@
-import { Button, TextArea } from '@/primitives'
-import { HStack } from '@/styled-system/jsx'
-import { RiSendPlane2Fill } from '@remixicon/react'
-import { useState, useEffect, RefObject } from 'react'
-import { useTranslation } from 'react-i18next'
-import { css } from '@/styled-system/css'
-
-const MAX_ROWS = 6
-
-interface ChatInputProps {
-  inputRef: RefObject<HTMLTextAreaElement>
-  onSubmit: (text: string) => void
-  isSending: boolean
-}
-
-export const ChatInput = ({
-  inputRef,
-  onSubmit,
-  isSending,
-}: ChatInputProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.chat.input' })
-  const [text, setText] = useState('')
-  const [rows, setRows] = useState(1)
-
-  const handleSubmit = () => {
-    onSubmit(text)
-    setText('')
-  }
-
-  const isDisabled = !text.trim() || isSending
-
-  const submitOnEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key !== 'Enter' || (e.key === 'Enter' && e.shiftKey)) return
-    e.preventDefault()
-    if (!isDisabled) handleSubmit()
-  }
-
-  useEffect(() => {
-    const resize = () => {
-      if (!inputRef.current) return
-
-      const textAreaLineHeight = 20 // Adjust this value based on your TextArea's line height
-      const previousRows = inputRef.current.rows
-      inputRef.current.rows = 1
-
-      const currentRows = Math.floor(
-        inputRef.current.scrollHeight / textAreaLineHeight
-      )
-
-      if (currentRows === previousRows) {
-        inputRef.current.rows = currentRows
-      }
-
-      if (currentRows >= MAX_ROWS) {
-        inputRef.current.rows = MAX_ROWS
-        inputRef.current.scrollTop = inputRef.current.scrollHeight
-      }
-
-      if (currentRows < MAX_ROWS) {
-        inputRef.current.style.overflowY = 'hidden'
-      } else {
-        inputRef.current.style.overflowY = 'auto'
-      }
-
-      setRows(currentRows < MAX_ROWS ? currentRows : MAX_ROWS)
-    }
-
-    resize()
-  }, [text, inputRef])
-
-  return (
-    <HStack
-      className={css({
-        margin: '0.75rem 0 1.5rem',
-        padding: '0.5rem',
-        backgroundColor: 'gray.100',
-        borderRadius: 4,
-      })}
-    >
-      <TextArea
-        ref={inputRef}
-        onKeyDown={(e) => {
-          e.stopPropagation()
-          submitOnEnter(e)
-        }}
-        onKeyUp={(e) => e.stopPropagation()}
-        placeholder={t('textArea.placeholder')}
-        value={text}
-        onChange={(e) => {
-          setText(e.target.value)
-        }}
-        rows={rows || 1}
-        style={{
-          border: 'none',
-          resize: 'none',
-          height: 'auto',
-          minHeight: `34px`,
-          lineHeight: 1.25,
-          padding: '7px 10px',
-          overflowY: 'hidden',
-        }}
-        placeholderStyle={'strong'}
-        spellCheck={false}
-        maxLength={2000}
-        aria-label={t('textArea.label')}
-      />
-      <Button
-        square
-        invisible
-        variant="tertiaryText"
-        size="sm"
-        onPress={handleSubmit}
-        isDisabled={isDisabled}
-        aria-label={t('button.label')}
-      >
-        <RiSendPlane2Fill />
-      </Button>
-    </HStack>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Device/SettingsButton.tsx

@@ -2,7 +2,7 @@ import { Button } from '@/primitives'
 import { RiSettings3Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { SettingsDialogExtendedKey } from '@/features/settings/type'
-import { useSettingsDialog } from '@/features/settings/hook/useSettingsDialog'
+import { openSettingsDialog } from '@/stores/settings'
 
 export const SettingsButton = ({
   settingTab,
@@ -12,7 +12,6 @@ export const SettingsButton = ({
   onPress?: () => void
 }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
-  const { openSettingsDialog } = useSettingsDialog()
 
   return (
     <Button

src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx

@@ -9,8 +9,8 @@ import useLongPress from '@/features/shortcuts/useLongPress'
 import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
 import {
   useIsSpeaking,
-  useLocalParticipant,
   useMaybeRoomContext,
+  useRoomContext,
 } from '@livekit/components-react'
 import type { ButtonRecipeProps } from '@/primitives/buttonRecipe'
 import type { ToggleButtonProps } from '@/primitives/ToggleButton'
@@ -169,7 +169,7 @@ export const ToggleDevice = <T extends ToggleSource>({
 }
 
 const ActiveSpeakerWrapper = () => {
-  const { localParticipant } = useLocalParticipant()
-  const isSpeaking = useIsSpeaking(localParticipant)
+  const room = useRoomContext()
+  const isSpeaking = useIsSpeaking(room.localParticipant)
   return <ActiveSpeaker isSpeaking={isSpeaking} pushToTalk />
 }

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

@@ -2,11 +2,10 @@ import { RiSettings3Line } from '@remixicon/react'
 import { MenuItem } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { menuRecipe } from '@/primitives/menuRecipe'
-import { useSettingsDialog } from '@/features/settings/hook/useSettingsDialog'
+import { openSettingsDialog } from '@/stores/settings'
 
 export const SettingsMenuItem = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
-  const { openSettingsDialog } = useSettingsDialog()
 
   return (
     <MenuItem

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsCollapsableList.tsx

@@ -1,110 +0,0 @@
-import { ReactNode, useState } from 'react'
-import { css } from '@/styled-system/css'
-import { ToggleButton } from 'react-aria-components'
-import { HStack, styled, VStack } from '@/styled-system/jsx'
-import { RiArrowUpSLine } from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-
-const ToggleHeader = styled(ToggleButton, {
-  base: {
-    minHeight: '40px', //fixme hardcoded value
-    paddingRight: '.5rem',
-    cursor: 'pointer',
-    display: 'flex',
-    justifyContent: 'space-between',
-    width: '100%',
-    alignItems: 'center',
-    transition: 'background 200ms',
-    borderTopRadius: '7px',
-    '&[data-hovered]': {
-      backgroundColor: 'greyscale.50',
-    },
-  },
-})
-
-const Container = styled('div', {
-  base: {
-    border: '1px solid',
-    borderColor: 'greyscale.250',
-    borderRadius: '8px',
-    margin: '0 .625rem',
-  },
-})
-
-const ListContainer = styled(VStack, {
-  base: {
-    borderTop: '1px solid',
-    borderTopColor: 'greyscale.250',
-    alignItems: 'start',
-    overflowY: 'scroll',
-    overflowX: 'hidden',
-    minHeight: 0,
-    flexGrow: 1,
-    display: 'flex',
-    paddingY: '0.5rem',
-    paddingX: '1rem',
-    gap: 0,
-  },
-})
-
-export type ParticipantsCollapsableListProps<T> = {
-  heading: string
-  participants: Array<T>
-  renderParticipant: (participant: T) => JSX.Element
-  action?: ReactNode
-}
-
-export function ParticipantsCollapsableList<T>({
-  heading,
-  participants,
-  renderParticipant,
-  action,
-}: ParticipantsCollapsableListProps<T>) {
-  const { t } = useTranslation('rooms')
-  const [isOpen, setIsOpen] = useState(true)
-  const label = t(`participants.collapsable.${isOpen ? 'close' : 'open'}`, {
-    name: heading,
-  })
-  return (
-    <Container>
-      <ToggleHeader
-        isSelected={isOpen}
-        aria-label={label}
-        onPress={() => setIsOpen(!isOpen)}
-        style={{
-          borderRadius: !isOpen ? '7px' : undefined,
-        }}
-      >
-        <HStack
-          justify="space-between"
-          className={css({
-            margin: '0 1.25rem',
-            width: '100%',
-          })}
-        >
-          <div
-            className={css({
-              fontSize: '1rem',
-            })}
-          >
-            {heading}
-          </div>
-          <div>{participants?.length || 0}</div>
-        </HStack>
-        <RiArrowUpSLine
-          size={32}
-          style={{
-            transform: isOpen ? 'rotate(-180deg)' : undefined,
-            transition: 'transform 200ms',
-          }}
-        />
-      </ToggleHeader>
-      {isOpen && (
-        <ListContainer>
-          {action}
-          {participants.map((participant) => renderParticipant(participant))}
-        </ListContainer>
-      )}
-    </Container>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx

@@ -1,112 +0,0 @@
-import { css } from '@/styled-system/css'
-import { useParticipants } from '@livekit/components-react'
-
-import { Div, H } from '@/primitives'
-import { useTranslation } from 'react-i18next'
-import { ParticipantListItem } from '../../controls/Participants/ParticipantListItem'
-import { ParticipantsCollapsableList } from '../../controls/Participants/ParticipantsCollapsableList'
-import { HandRaisedListItem } from '../../controls/Participants/HandRaisedListItem'
-import { LowerAllHandsButton } from '../../controls/Participants/LowerAllHandsButton'
-import { WaitingParticipantListItem } from './WaitingParticipantListItem'
-import { useWaitingParticipants } from '@/features/rooms/hooks/useWaitingParticipants'
-import type { Participant } from 'livekit-client'
-import { WaitingParticipant } from '@/features/rooms/api/listWaitingParticipants'
-import { MuteEveryoneButton } from './MuteEveryoneButton'
-
-// TODO: Optimize rendering performance, especially for longer participant lists, even though they are generally short.
-export const ParticipantsList = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'participants' })
-
-  // Preferred using the 'useParticipants' hook rather than the separate remote and local hooks,
-  // because the 'useLocalParticipant' hook does not update the participant's information when their
-  // metadata/name changes. The LiveKit team has marked this as a TODO item in the code.
-  const participants = useParticipants()
-
-  const sortedRemoteParticipants = participants
-    .slice(1)
-    .sort((participantA, participantB) => {
-      const nameA = participantA.name || participantA.identity
-      const nameB = participantB.name || participantB.identity
-      return nameA.localeCompare(nameB)
-    })
-
-  const sortedParticipants = [
-    participants[0], // first participant returned by the hook, is always the local one
-    ...sortedRemoteParticipants,
-  ]
-
-  const raisedHandParticipants = participants
-    .filter((participant) => !!participant.attributes.handRaisedAt)
-    .sort((a, b) => {
-      const dateA = new Date(a.attributes.handRaisedAt)
-      const dateB = new Date(b.attributes.handRaisedAt)
-      const timeA = isNaN(dateA.getTime()) ? 0 : dateA.getTime()
-      const timeB = isNaN(dateB.getTime()) ? 0 : dateB.getTime()
-      return timeA - timeB
-    })
-
-  const { waitingParticipants, handleParticipantEntry } =
-    useWaitingParticipants()
-
-  // TODO - extract inline styling in a centralized styling file, and avoid magic numbers
-  return (
-    <Div overflowY="scroll">
-      <H
-        lvl={2}
-        className={css({
-          fontSize: '0.875rem',
-          fontWeight: 'bold',
-          color: 'greyscale.600',
-          padding: '0 1.5rem',
-          marginBottom: '0.83em',
-        })}
-      >
-        {t('subheading').toUpperCase()}
-      </H>
-      {waitingParticipants?.length > 0 && (
-        <Div marginBottom=".9375rem">
-          <ParticipantsCollapsableList<WaitingParticipant>
-            heading={t('waiting.title')}
-            participants={waitingParticipants}
-            renderParticipant={(participant) => (
-              <WaitingParticipantListItem
-                key={participant.id}
-                participant={participant}
-                onAction={handleParticipantEntry}
-              />
-            )}
-            action={<></>}
-          />
-        </Div>
-      )}
-      {raisedHandParticipants.length > 0 && (
-        <Div marginBottom=".9375rem">
-          <ParticipantsCollapsableList<Participant>
-            heading={t('raisedHands')}
-            participants={raisedHandParticipants}
-            renderParticipant={(participant) => (
-              <HandRaisedListItem
-                key={participant.identity}
-                participant={participant}
-              />
-            )}
-            action={
-              <LowerAllHandsButton participants={raisedHandParticipants} />
-            }
-          />
-        </Div>
-      )}
-      <ParticipantsCollapsableList<Participant>
-        heading={t('contributors')}
-        participants={sortedParticipants}
-        renderParticipant={(participant) => (
-          <ParticipantListItem
-            key={participant.identity}
-            participant={participant}
-          />
-        )}
-        action={<MuteEveryoneButton participants={sortedRemoteParticipants} />}
-      />
-    </Div>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx

@@ -1,90 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import { RiGroupLine, RiInfinityLine } from '@remixicon/react'
-import { ToggleButton } from '@/primitives'
-import { VisualOnlyTooltip } from '@/primitives/VisualOnlyTooltip'
-import { css } from '@/styled-system/css'
-import { useParticipants } from '@livekit/components-react'
-import { useSidePanel } from '../../../hooks/useSidePanel'
-import { ToggleButtonProps } from '@/primitives/ToggleButton'
-import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
-
-export const ParticipantsToggle = ({
-  onPress,
-  ...props
-}: ToggleButtonProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.participants' })
-
-  /**
-   * Context could not be used due to inconsistent refresh behavior.
-   * The 'numParticipant' property on the room only updates when the room's metadata changes,
-   * resulting in a delay compared to the participant list's actual refresh rate.
-   */
-  const participants = useParticipants()
-  const numParticipants = participants?.length
-  const announcedCount =
-    numParticipants && numParticipants > 0 ? numParticipants : 1
-
-  const { isParticipantsOpen, toggleParticipants } = useSidePanel()
-
-  const tooltipLabel = isParticipantsOpen ? 'open' : 'closed'
-
-  useRegisterKeyboardShortcut({
-    id: 'toggle-participants',
-    handler: toggleParticipants,
-  })
-
-  return (
-    <div
-      className={css({
-        position: 'relative',
-        display: 'inline-block',
-      })}
-    >
-      <VisualOnlyTooltip tooltip={t(tooltipLabel)}>
-        <ToggleButton
-          square
-          variant="primaryTextDark"
-          aria-label={`${t(tooltipLabel)}. ${t('count', {
-            count: announcedCount,
-          })}.`}
-          isSelected={isParticipantsOpen}
-          aria-expanded={isParticipantsOpen}
-          onPress={(e) => {
-            toggleParticipants()
-            onPress?.(e)
-          }}
-          data-attr={`controls-participants-${tooltipLabel}`}
-          {...props}
-        >
-          <RiGroupLine />
-        </ToggleButton>
-      </VisualOnlyTooltip>
-      <div
-        className={css({
-          position: 'absolute',
-          top: '-.25rem',
-          right: '-.25rem',
-          width: '1.25rem',
-          height: '1.25rem',
-          backgroundColor: 'gray',
-          borderRadius: '50%',
-          color: 'white',
-          fontSize: '0.75rem',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          textAlign: 'center',
-          zIndex: 1,
-          userSelect: 'none',
-        })}
-        aria-hidden={true}
-      >
-        {numParticipants < 100 ? (
-          numParticipants || 1
-        ) : (
-          <RiInfinityLine size={10} />
-        )}
-      </div>
-    </div>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Participants/PinBadge.tsx

@@ -1,29 +0,0 @@
-import { useFocusToggleParticipant } from '@/features/rooms/livekit/hooks/useFocusToggleParticipant'
-import type { Participant } from 'livekit-client'
-import { RiPushpin2Fill } from '@remixicon/react'
-import { css } from '@/styled-system/css'
-
-export const PinBadge = ({ participant }: { participant: Participant }) => {
-  const { inFocus } = useFocusToggleParticipant(participant)
-
-  if (!inFocus) return
-
-  return (
-    <div
-      className={css({
-        height: '18px',
-        width: '18px',
-        borderRadius: '100%',
-        background: 'white',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        position: 'absolute',
-        bottom: '-2px',
-        right: '-4px',
-      })}
-    >
-      <RiPushpin2Fill size={14} aria-hidden />
-    </div>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/ParticipantsToggle.tsx

@@ -0,0 +1,56 @@
+import { useCallback, useId } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiGroupLine } from '@remixicon/react'
+import { ToggleButton, type ToggleButtonProps } from '@/primitives/ToggleButton'
+import { VisualOnlyTooltip } from '@/primitives/VisualOnlyTooltip'
+import { css } from '@/styled-system/css'
+import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
+import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
+import { ParticipantsCount } from '@/features/participants/components/ParticipantsCount'
+
+const containerStyles = css({ position: 'relative', display: 'inline-block' })
+
+export const ParticipantsToggle = ({
+  onPress,
+  ...props
+}: ToggleButtonProps) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.participants' })
+  const { isParticipantsOpen, toggleParticipants } = useSidePanel()
+  const countId = useId()
+
+  const tooltipLabel = isParticipantsOpen ? 'open' : 'closed'
+
+  useRegisterKeyboardShortcut({
+    id: 'toggle-participants',
+    handler: toggleParticipants,
+  })
+
+  const handlePress = useCallback(
+    (e: Parameters<NonNullable<ToggleButtonProps['onPress']>>[0]) => {
+      toggleParticipants()
+      onPress?.(e)
+    },
+    [toggleParticipants, onPress]
+  )
+
+  return (
+    <div className={containerStyles}>
+      <VisualOnlyTooltip tooltip={t(tooltipLabel)}>
+        <ToggleButton
+          square
+          variant="primaryTextDark"
+          aria-label={t(tooltipLabel)}
+          aria-describedby={countId}
+          isSelected={isParticipantsOpen}
+          aria-expanded={isParticipantsOpen}
+          onPress={handlePress}
+          data-attr={`controls-participants-${tooltipLabel}`}
+          {...props}
+        >
+          <RiGroupLine />
+        </ToggleButton>
+      </VisualOnlyTooltip>
+      <ParticipantsCount describedById={countId} />
+    </div>
+  )
+}

src/frontend/src/features/rooms/livekit/hooks/useCanPublishTrack.ts

@@ -1,15 +1,8 @@
 import type { TrackSource } from '@livekit/protocol'
-import {
-  useLocalParticipant,
-  useParticipantPermissions,
-} from '@livekit/components-react'
+import { useLocalParticipantPermissions } from '@livekit/components-react'
 
 export function useCanPublishTrack(trackSource: TrackSource): boolean {
-  const { localParticipant } = useLocalParticipant()
-  const permissions = useParticipantPermissions({
-    participant: localParticipant,
-  })
-
+  const permissions = useLocalParticipantPermissions()
   return Boolean(
     permissions?.canPublish &&
     permissions?.canPublishSources?.includes(trackSource)

src/frontend/src/features/rooms/livekit/hooks/useIsAdvancedConnectionObserverEnabled.ts

@@ -1,12 +0,0 @@
-import { useFeatureFlagEnabled } from 'posthog-js/react'
-import { FeatureFlags } from '@/features/analytics/enums.ts'
-import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled.ts'
-import { isMobileBrowser } from '@livekit/components-core'
-
-export const useIsAdvancedConnectionObserverEnabled = () => {
-  const featureEnabled = useFeatureFlagEnabled(FeatureFlags.candidatePolling)
-  const isAnalyticsEnabled = useIsAnalyticsEnabled()
-
-  const isMobile = isMobileBrowser()
-  return !isMobile && isAnalyticsEnabled && featureEnabled
-}

src/frontend/src/features/rooms/livekit/hooks/usePublishSourcesManager.ts

@@ -1,4 +1,4 @@
-import { Track } from 'livekit-client'
+import { RoomEvent, Track } from 'livekit-client'
 import { useCallback, useMemo } from 'react'
 import { queryClient } from '@/api/queryClient'
 import { keys } from '@/api/queryKeys'
@@ -43,7 +43,9 @@ export const usePublishSourcesManager = () => {
   const roomId = data?.slug
 
   const { updateParticipantsPermissions } = useUpdateParticipantsPermissions()
-  const remoteParticipants = useRemoteParticipants()
+  const remoteParticipants = useRemoteParticipants({
+    updateOnlyOn: [RoomEvent.ParticipantAttributesChanged],
+  })
 
   const unprivilegedRemoteParticipants = remoteParticipants.filter(
     (participant) => !getParticipantIsRoomAdmin(participant)

src/frontend/src/features/rooms/livekit/hooks/useRaisedHand.ts

@@ -1,7 +1,9 @@
-import type { Participant } from 'livekit-client'
+import { Participant, RoomEvent } from 'livekit-client'
 import {
+  useRoomContext,
   useParticipantAttribute,
-  useParticipants,
+  useParticipantInfo,
+  useRemoteParticipants,
 } from '@livekit/components-react'
 import { isLocal } from '@/utils/livekit'
 import { useMemo } from 'react'
@@ -12,28 +14,55 @@ type useRaisedHandProps = {
 }
 
 export function useRaisedHandPosition({ participant }: useRaisedHandProps) {
-  const { isHandRaised } = useRaisedHand({ participant })
+  const room = useRoomContext()
+  const { identity } = useParticipantInfo({ participant })
+  const localIdentity = room.localParticipant.identity
 
-  const participants = useParticipants()
+  const localHandRaisedAt = useParticipantAttribute('handRaisedAt', {
+    participant: room.localParticipant,
+  })
+
+  const remoteParticipants = useRemoteParticipants({
+    updateOnlyOn: [RoomEvent.ParticipantAttributesChanged],
+  })
+
+  const raisedHands = useMemo(() => {
+    const byIdentity = new Map<string, number>()
+
+    const add = (id: string, value?: string) => {
+      const time = new Date(value ?? '').getTime()
+      if (Number.isNaN(time)) return
+      const existing = byIdentity.get(id)
+      if (existing === undefined || time < existing) byIdentity.set(id, time)
+    }
+
+    if (localIdentity) add(localIdentity, localHandRaisedAt)
+
+    remoteParticipants.forEach((p) =>
+      add(p.identity, p.attributes.handRaisedAt)
+    )
+
+    return byIdentity
+  }, [remoteParticipants, localIdentity, localHandRaisedAt])
+
+  const sortedHands = useMemo(
+    () =>
+      [...raisedHands.entries()]
+        .map(([identity, time]) => ({ identity, time }))
+        .sort(
+          (a, b) => a.time - b.time || a.identity.localeCompare(b.identity)
+        ),
+    [raisedHands]
+  )
 
   const positionInQueue = useMemo(() => {
-    if (!isHandRaised) return
-
-    return (
-      participants
-        .filter((p) => !!p.attributes.handRaisedAt)
-        .sort((a, b) => {
-          const dateA = new Date(a.attributes.handRaisedAt)
-          const dateB = new Date(b.attributes.handRaisedAt)
-          return dateA.getTime() - dateB.getTime()
-        })
-        .findIndex((p) => p.identity === participant.identity) + 1
-    )
-  }, [participants, participant, isHandRaised])
+    const index = sortedHands.findIndex((h) => h.identity === identity)
+    return index === -1 ? undefined : index + 1
+  }, [sortedHands, identity])
 
   return {
     positionInQueue,
-    firstInQueue: positionInQueue == 1,
+    firstInQueue: positionInQueue === 1,
   }
 }
 

src/frontend/src/features/rooms/livekit/prefabs/Chat.tsx

@@ -1,175 +0,0 @@
-import type { ChatMessage, ChatOptions } from '@livekit/components-core'
-import React from 'react'
-import {
-  formatChatMessageLinks,
-  useChat,
-  useParticipants,
-  useRoomContext,
-} from '@livekit/components-react'
-import { useTranslation } from 'react-i18next'
-import { useSnapshot } from 'valtio'
-import { chatStore } from '@/stores/chat'
-import { Div, Text } from '@/primitives'
-import { ChatInput } from '../components/chat/Input'
-import { ChatEntry } from '../components/chat/Entry'
-import { useSidePanel } from '../hooks/useSidePanel'
-import {
-  type LocalParticipant,
-  type RemoteParticipant,
-  RoomEvent,
-} from 'livekit-client'
-import { css } from '@/styled-system/css'
-import { useRestoreFocus } from '@/hooks/useRestoreFocus'
-
-export interface ChatProps
-  extends React.HTMLAttributes<HTMLDivElement>, ChatOptions {}
-
-/**
- * The Chat component adds a basis chat functionality to the LiveKit room. The messages are distributed to all participants
- * in the room. Only users who are in the room at the time of dispatch will receive the message.
- */
-export function Chat({ ...props }: ChatProps) {
-  const { t } = useTranslation('rooms', { keyPrefix: 'chat' })
-
-  const inputRef = React.useRef<HTMLTextAreaElement>(null)
-  const ulRef = React.useRef<HTMLUListElement>(null)
-
-  const room = useRoomContext()
-  const { send, chatMessages, isSending } = useChat()
-
-  const { isChatOpen, isSidePanelOpen } = useSidePanel()
-  const chatSnap = useSnapshot(chatStore)
-
-  // Keep track of the element that opened the chat so we can restore focus
-  // when the chat panel is closed.
-  useRestoreFocus(isChatOpen, {
-    // Avoid layout "jump" during the side panel slide-in animation.
-    // Focusing can trigger scroll into view; preventScroll keeps the animation smooth.
-    onOpened: () => {
-      requestAnimationFrame(() => {
-        inputRef.current?.focus({ preventScroll: true })
-      })
-    },
-    preventScroll: true,
-    shouldRestoreOnClose: () => !isSidePanelOpen,
-  })
-
-  // Use useParticipants hook to trigger a re-render when the participant list changes.
-  const participants = useParticipants()
-
-  const lastReadMsgAt = React.useRef<ChatMessage['timestamp']>(0)
-  const previousMessageCount = React.useRef(0)
-
-  async function handleSubmit(text: string) {
-    if (!send || !text) return
-    await send(text)
-    inputRef?.current?.focus({ preventScroll: true })
-  }
-
-  // TEMPORARY: This is a brittle workaround that relies on message count tracking
-  // due to recent LiveKit useChat changes breaking the previous implementation
-  // (see https://github.com/livekit/components-js/issues/1158)
-  // Remove this once we refactor chat to use the new text stream approach
-  React.useEffect(() => {
-    if (!chatMessages || chatMessages.length <= previousMessageCount.current)
-      return
-    const msg = chatMessages.slice(-1)[0]
-    const from = msg.from as RemoteParticipant | LocalParticipant | undefined
-    room.emit(RoomEvent.ChatMessage, msg, from)
-    previousMessageCount.current = chatMessages.length
-  }, [chatMessages, room])
-
-  React.useEffect(() => {
-    if (chatMessages.length > 0 && ulRef.current) {
-      ulRef.current?.scrollTo({ top: ulRef.current.scrollHeight })
-    }
-  }, [ulRef, chatMessages])
-
-  React.useEffect(() => {
-    if (chatMessages.length === 0) {
-      return
-    }
-    if (
-      isChatOpen &&
-      lastReadMsgAt.current !== chatMessages[chatMessages.length - 1]?.timestamp
-    ) {
-      lastReadMsgAt.current = chatMessages[chatMessages.length - 1]?.timestamp
-      chatStore.unreadMessages = 0
-      return
-    }
-
-    const unreadMessageCount = chatMessages.filter(
-      (msg) => !lastReadMsgAt.current || msg.timestamp > lastReadMsgAt.current
-    ).length
-
-    if (
-      unreadMessageCount > 0 &&
-      chatSnap.unreadMessages !== unreadMessageCount
-    ) {
-      chatStore.unreadMessages = unreadMessageCount
-    }
-  }, [chatMessages, chatSnap.unreadMessages, isChatOpen])
-
-  const renderedMessages = React.useMemo(() => {
-    return chatMessages.map((msg, idx, allMsg) => {
-      const hideMetadata =
-        idx >= 1 &&
-        msg.timestamp - allMsg[idx - 1].timestamp < 60_000 &&
-        allMsg[idx - 1].from === msg.from
-
-      return (
-        <ChatEntry
-          key={msg.id ?? idx}
-          hideMetadata={hideMetadata}
-          entry={msg}
-          messageFormatter={formatChatMessageLinks}
-        />
-      )
-    })
-    // This ensures that the chat message list is updated to reflect any changes in participant information.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chatMessages, participants])
-
-  return (
-    <Div
-      display={'flex'}
-      padding={'0 1.5rem'}
-      flexGrow={1}
-      flexDirection={'column'}
-      minHeight={0}
-      {...props}
-    >
-      <Text
-        variant="sm"
-        className={css({
-          padding: '0.75rem',
-          backgroundColor: 'greyscale.50',
-          borderRadius: 4,
-          marginBottom: '0.75rem',
-        })}
-      >
-        {t('disclaimer')}
-      </Text>
-      <Div
-        flexGrow={1}
-        flexDirection={'column'}
-        minHeight={0}
-        overflowY="scroll"
-      >
-        <ul
-          className="lk-list lk-chat-messages"
-          ref={ulRef}
-          role="log"
-          aria-relevant="additions"
-        >
-          {renderedMessages}
-        </ul>
-      </Div>
-      <ChatInput
-        inputRef={inputRef}
-        onSubmit={(e) => handleSubmit(e)}
-        isSending={isSending}
-      />
-    </Div>
-  )
-}

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx

@@ -15,7 +15,7 @@ import {
 } from '@remixicon/react'
 import { ScreenShareToggle } from '../../components/controls/ScreenShareToggle'
 import { ChatToggle } from '../../components/controls/ChatToggle'
-import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
+import { ParticipantsToggle } from '../../components/controls/ParticipantsToggle'
 import { useSidePanel } from '../../hooks/useSidePanel'
 import { LinkButton } from '@/primitives'
 import { ResponsiveMenu } from './ResponsiveMenu'
@@ -24,7 +24,7 @@ import { CameraSwitchButton } from '../../components/controls/CameraSwitchButton
 import { useConfig } from '@/api/useConfig'
 import { AudioDevicesControl } from '../../components/controls/Device/AudioDevicesControl'
 import { VideoDeviceControl } from '../../components/controls/Device/VideoDeviceControl'
-import { useSettingsDialog } from '@/features/settings/hook/useSettingsDialog'
+import { openSettingsDialog } from '@/stores/settings'
 import { ControlBarRegion } from '@/features/layout/components/ControlBarRegion'
 import { ReactionsToggle } from '@/features/reactions/components/ReactionsToggle'
 
@@ -35,7 +35,6 @@ export function MobileControlBar({
   const [isMenuOpened, setIsMenuOpened] = React.useState(false)
   const browserSupportsScreenSharing = supportsScreenSharing()
   const { toggleEffects } = useSidePanel()
-  const { openSettingsDialog } = useSettingsDialog()
 
   const { data } = useConfig()
 

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx

@@ -1,11 +1,11 @@
 import { css } from '@/styled-system/css'
 import { ChatToggle } from '../../components/controls/ChatToggle'
-import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
+import { ParticipantsToggle } from '../../components/controls/ParticipantsToggle'
 import { ToolsToggle } from '../../components/controls/ToolsToggle'
 import { InfoToggle } from '../../components/controls/InfoToggle'
 import { AdminToggle } from '../../components/AdminToggle'
 import { useSize } from '../../hooks/useResizeObserver'
-import { useState, RefObject } from 'react'
+import { useState, RefObject, useEffect } from 'react'
 import { Dialog, DialogTrigger, Popover } from 'react-aria-components'
 import { Button } from '@/primitives'
 import type { ToggleButtonProps } from '@/primitives/ToggleButton'
@@ -66,12 +66,32 @@ export const LateralMenu = () => {
   )
 }
 
+interface BreakpointObserverProps {
+  containerRef: RefObject<HTMLDivElement>
+  onWideChange: (isWide: boolean) => void
+}
+
+const BreakpointObserver = ({
+  containerRef,
+  onWideChange,
+}: BreakpointObserverProps) => {
+  const { width } = useSize(containerRef)
+  const isWide = width > CONTROL_BAR_BREAKPOINT
+
+  useEffect(() => {
+    onWideChange(isWide)
+  }, [isWide, onWideChange])
+
+  return null
+}
+
 export const MoreOptions = ({
   parentElement,
 }: {
   parentElement: RefObject<HTMLDivElement>
 }) => {
-  const { width: parentWidth } = useSize(parentElement)
+  const [isWide, setIsWide] = useState(false)
+
   return (
     <nav
       className={css({
@@ -83,11 +103,11 @@ export const MoreOptions = ({
         paddingRight: '0.25rem',
       })}
     >
-      {parentWidth > CONTROL_BAR_BREAKPOINT ? (
-        <NavigationControls />
-      ) : (
-        <LateralMenu />
-      )}
+      <BreakpointObserver
+        containerRef={parentElement}
+        onWideChange={setIsWide}
+      />
+      {isWide ? <NavigationControls /> : <LateralMenu />}
     </nav>
   )
 }

src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx

@@ -1,48 +1,29 @@
-import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
-import {
-  isEqualTrackRef,
-  isTrackReference,
-  isWeb,
-  log,
-} from '@livekit/components-core'
-import { type Participant, RoomEvent, Track } from 'livekit-client'
-import React, { useCallback, useRef, useState, useEffect } from 'react'
+import { isWeb } from '@livekit/components-core'
+import { Track } from 'livekit-client'
+import React, { useState } from 'react'
 import {
   ConnectionStateToast,
-  FocusLayoutContainer,
-  LayoutContextProvider,
   RoomAudioRenderer,
-  usePinnedTracks,
-  useTracks,
-  useCreateLayoutContext,
-  useRoomContext,
 } from '@livekit/components-react'
-import { useTranslation } from 'react-i18next'
 
 import { ControlBar } from './ControlBar/ControlBar'
-import { FocusLayout } from '../components/FocusLayout'
-import { ParticipantTile } from '../components/ParticipantTile'
 import { SidePanel } from '../components/SidePanel'
 import { RecordingProvider } from '@/features/recording'
 import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal'
-import { useConnectionObserver } from '../hooks/useConnectionObserver'
+import { ConnectionObserver } from '../components/ConnectionObserver'
+import { RoomMetadataSynchronizer } from '../components/RoomMetadataSynchronizer'
 import { useRoomPageTitle } from '../hooks/useRoomPageTitle'
 import { useNoiseReduction } from '../hooks/useNoiseReduction'
-import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
-import { useSettingsDialog } from '@/features/settings'
-import { SettingsDialogExtendedKey } from '@/features/settings/type'
-import { useVideoResolutionSubscription } from '../hooks/useVideoResolutionSubscription'
-import { useSyncLiveKitMetadata } from '../hooks/useSyncLiveKitMetadata'
+import { VideoResolutionSubscription } from '../components/VideoResolutionSubscription'
 import { SettingsDialogProvider } from '@/features/settings/components/SettingsDialogProvider'
 import { IsIdleDisconnectModal } from '../components/IsIdleDisconnectModal'
-import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
-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 { RoomContentArea } from '@/features/layout/components/RoomContentArea'
 import { usePictureInPicture } from '@/features/pip/hooks/usePictureInPicture'
 import { PipRoomPlaceholder } from '@/features/pip/components/PipRoomPlaceholder'
+import { StageLayout } from '@/features/layout/components/StageLayout'
+import { PinAnnouncer } from '@/features/layout/components/PinAnnouncer'
+import { ChatProvider } from '@/features/chat/components/ChatProvider'
 
 /**
  * @public
@@ -71,243 +52,62 @@ export interface VideoConferenceProps extends React.HTMLAttributes<HTMLDivElemen
  * @public
  */
 export function VideoConference({ ...props }: VideoConferenceProps) {
-  const lastAutoFocusedScreenShareTrack =
-    useRef<TrackReferenceOrPlaceholder | null>(null)
-  const lastPinnedParticipantIdentityRef = useRef<string | null>(null)
-  const { t } = useTranslation('rooms', { keyPrefix: 'pinAnnouncements' })
-  const { t: tRooms } = useTranslation('rooms')
-  const room = useRoomContext()
-  const announce = useScreenReaderAnnounce()
-  const { toggleSettingsDialog } = useSettingsDialog()
-
-  const getAnnouncementName = useCallback(
-    (participant?: Participant | null) => {
-      if (!participant) return tRooms('participants.unknown')
-      return participant.isLocal
-        ? tRooms('participants.you')
-        : getParticipantName(participant)
-    },
-    [tRooms]
-  )
-
-  useConnectionObserver()
   useRoomPageTitle()
-  useVideoResolutionSubscription()
-  useSyncLiveKitMetadata()
-
-  useRegisterKeyboardShortcut({
-    id: 'open-shortcuts',
-    handler: useCallback(() => {
-      toggleSettingsDialog(SettingsDialogExtendedKey.SHORTCUTS)
-    }, [toggleSettingsDialog]),
-  })
-
-  const tracks = useTracks(
-    [
-      { source: Track.Source.Camera, withPlaceholder: true },
-      { source: Track.Source.ScreenShare, withPlaceholder: false },
-    ],
-    { updateOnlyOn: [RoomEvent.ActiveSpeakersChanged], onlySubscribed: false }
-  )
-
-  const layoutContext = useCreateLayoutContext()
-
   useNoiseReduction()
 
-  const screenShareTracks = tracks
-    .filter(isTrackReference)
-    .filter((track) => track.publication.source === Track.Source.ScreenShare)
-
-  const focusTrack = usePinnedTracks(layoutContext)?.[0]
-  const carouselTracks = tracks.filter(
-    (track) => !isEqualTrackRef(track, focusTrack)
-  )
-
   const { isOpen: isPictureInPictureOpen } = usePictureInPicture()
 
-  // handle pin announcements
-
-  useEffect(() => {
-    const participant = focusTrack?.participant
-
-    // 1. unpin
-    if (!participant) {
-      if (!lastPinnedParticipantIdentityRef.current) return
-
-      const lastIdentity = lastPinnedParticipantIdentityRef.current
-      const lastParticipant =
-        room.localParticipant.identity === lastIdentity
-          ? room.localParticipant
-          : room.remoteParticipants.get(lastIdentity)
-      const announcementName = getAnnouncementName(lastParticipant)
-
-      announce(
-        lastParticipant?.isLocal
-          ? t('self.unpin')
-          : t('unpin', {
-              name: announcementName,
-            })
-      )
-
-      lastPinnedParticipantIdentityRef.current = null
-      return
-    }
-
-    // 2. same pin → do nothing
-    if (lastPinnedParticipantIdentityRef.current === participant.identity) {
-      return
-    }
-
-    // 3. new pin
-    const participantName = participant.isLocal
-      ? tRooms('participants.you')
-      : getParticipantName(participant)
-
-    lastPinnedParticipantIdentityRef.current = participant.identity
-
-    announce(
-      participant.isLocal ? t('self.pin') : t('pin', { name: participantName })
-    )
-  }, [
-    announce,
-    focusTrack,
-    getAnnouncementName,
-    room.localParticipant,
-    room.remoteParticipants,
-    t,
-    tRooms,
-  ])
-
-  /* eslint-disable react-hooks/exhaustive-deps */
-  // Code duplicated from LiveKit; this warning will be addressed in the refactoring.
-  useEffect(() => {
-    // If screen share tracks are published, and no pin is set explicitly, auto set the screen share.
-    if (
-      screenShareTracks.some((track) => track.publication.isSubscribed) &&
-      lastAutoFocusedScreenShareTrack.current === null
-    ) {
-      log.debug('Auto set screen share focus:', {
-        newScreenShareTrack: screenShareTracks[0],
-      })
-      layoutContext.pin.dispatch?.({
-        msg: 'set_pin',
-        trackReference: screenShareTracks[0],
-      })
-      lastAutoFocusedScreenShareTrack.current = screenShareTracks[0]
-    } else if (
-      lastAutoFocusedScreenShareTrack.current &&
-      !screenShareTracks.some(
-        (track) =>
-          track.publication.trackSid ===
-          lastAutoFocusedScreenShareTrack.current?.publication?.trackSid
-      )
-    ) {
-      log.debug('Auto clearing screen share focus.')
-      layoutContext.pin.dispatch?.({ msg: 'clear_pin' })
-      lastAutoFocusedScreenShareTrack.current = null
-    }
-    if (focusTrack && !isTrackReference(focusTrack)) {
-      const updatedFocusTrack = tracks.find(
-        (tr) =>
-          tr.participant.identity === focusTrack.participant.identity &&
-          tr.source === focusTrack.source
-      )
-      if (
-        updatedFocusTrack !== focusTrack &&
-        isTrackReference(updatedFocusTrack)
-      ) {
-        layoutContext.pin.dispatch?.({
-          msg: 'set_pin',
-          trackReference: updatedFocusTrack,
-        })
-      }
-    }
-  }, [
-    screenShareTracks
-      .map(
-        (ref) => `${ref.publication.trackSid}_${ref.publication.isSubscribed}`
-      )
-      .join(),
-    focusTrack?.publication?.trackSid,
-    tracks,
-  ])
-  /* eslint-enable react-hooks/exhaustive-deps */
-
   const [isShareErrorVisible, setIsShareErrorVisible] = useState(false)
 
   return (
-    <div
-      className="lk-video-conference"
-      {...props}
-      style={{
-        overflowX: 'hidden',
-      }}
-    >
-      {isWeb() && (
-        <LayoutContextProvider
-          value={layoutContext}
-          // onPinChange={handleFocusStateChange}
-        >
-          <ScreenShareErrorModal
-            isOpen={isShareErrorVisible}
-            onClose={() => setIsShareErrorVisible(false)}
-          />
-          <IsIdleDisconnectModal />
-          <RoomContentArea>
-            {isPictureInPictureOpen ? (
-              <PipRoomPlaceholder />
-            ) : (
-              <>
-                {!focusTrack ? (
-                  <div
-                    className="lk-grid-layout-wrapper"
-                    style={{ height: 'auto' }}
-                  >
-                    <GridLayout tracks={tracks} style={{ padding: 0 }}>
-                      <ParticipantTile />
-                    </GridLayout>
-                  </div>
-                ) : (
-                  <div
-                    className="lk-focus-layout-wrapper"
-                    style={{ height: 'auto' }}
-                  >
-                    <FocusLayoutContainer style={{ padding: 0 }}>
-                      <CarouselLayout
-                        tracks={carouselTracks}
-                        style={{
-                          minWidth: '200px',
-                        }}
-                      >
-                        <ParticipantTile />
-                      </CarouselLayout>
-                      {focusTrack && <FocusLayout trackRef={focusTrack} />}
-                    </FocusLayoutContainer>
-                  </div>
-                )}
-              </>
-            )}
-          </RoomContentArea>
-          <ControlBar
-            onDeviceError={(e) => {
-              console.error(e)
-              if (
-                e.source == Track.Source.ScreenShare &&
-                e.error.toString() ==
-                  'NotAllowedError: Permission denied by system'
-              ) {
-                setIsShareErrorVisible(true)
-              }
-            }}
-          />
-          <SidePanel />
-        </LayoutContextProvider>
-      )}
-      <RoomAudioRenderer />
-      <ConnectionStateToast />
-      <RecordingProvider />
-      <SettingsDialogProvider />
-      <ReactionPortals />
-    </div>
+    <>
+      <RoomMetadataSynchronizer />
+      <ConnectionObserver />
+      <ChatProvider />
+      <VideoResolutionSubscription />
+      <div
+        className="lk-video-conference"
+        {...props}
+        style={{
+          overflowX: 'hidden',
+        }}
+      >
+        {isWeb() && (
+          <>
+            <ScreenShareErrorModal
+              isOpen={isShareErrorVisible}
+              onClose={() => setIsShareErrorVisible(false)}
+            />
+            <IsIdleDisconnectModal />
+            <PinAnnouncer />
+            <RoomContentArea>
+              {isPictureInPictureOpen ? (
+                <PipRoomPlaceholder />
+              ) : (
+                <StageLayout />
+              )}
+            </RoomContentArea>
+            <ControlBar
+              onDeviceError={(e) => {
+                console.error(e)
+                if (
+                  e.source == Track.Source.ScreenShare &&
+                  e.error.toString() ==
+                    'NotAllowedError: Permission denied by system'
+                ) {
+                  setIsShareErrorVisible(true)
+                }
+              }}
+            />
+            <SidePanel />
+          </>
+        )}
+        <RoomAudioRenderer />
+        <ConnectionStateToast />
+        <RecordingProvider />
+        <SettingsDialogProvider />
+        <ReactionPortals />
+      </div>
+    </>
   )
 }

src/frontend/src/features/rooms/utils/getParticipantBackgroundGradient.ts

@@ -4,7 +4,7 @@
  * Mixed in oklch so the color stays vivid as it darkens instead of greying out.
  */
 export const getParticipantBackgroundGradient = (color: string): string =>
-  `radial-gradient(circle at 50% 45%,
+  `radial-gradient(circle at 50% 50%,
     color-mix(in oklch, ${color} 82%, white) 0%,
     color-mix(in oklch, ${color} 90%, white) 8%,
     ${color} 35%,

src/frontend/src/features/settings/components/SettingsDialogProvider.tsx

@@ -1,10 +1,20 @@
 import { SettingsDialogExtended } from './SettingsDialogExtended'
 import { useSnapshot } from 'valtio'
-import { settingsStore } from '@/stores/settings'
+import { settingsStore, toggleSettingsDialog } from '@/stores/settings'
+import { SettingsDialogExtendedKey } from '@/features/settings'
+import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
+import { useCallback } from 'react'
 
 export const SettingsDialogProvider = () => {
   const { areSettingsOpen, defaultSelectedTab } = useSnapshot(settingsStore)
 
+  useRegisterKeyboardShortcut({
+    id: 'open-shortcuts',
+    handler: useCallback(() => {
+      toggleSettingsDialog(SettingsDialogExtendedKey.SHORTCUTS)
+    }, []),
+  })
+
   return (
     <SettingsDialogExtended
       isOpen={areSettingsOpen}

src/frontend/src/features/settings/hook/useSettingsDialog.ts

@@ -1,38 +0,0 @@
-import { useSnapshot } from 'valtio'
-import { settingsStore } from '@/stores/settings'
-import type { SettingsDialogExtendedKey } from '@/features/settings/type'
-
-export const useSettingsDialog = () => {
-  const { areSettingsOpen } = useSnapshot(settingsStore)
-
-  const openSettingsDialog = (
-    defaultSelectedTab?: SettingsDialogExtendedKey
-  ) => {
-    if (areSettingsOpen) return
-    if (defaultSelectedTab)
-      settingsStore.defaultSelectedTab = defaultSelectedTab
-    settingsStore.areSettingsOpen = true
-  }
-
-  const closeSettingsDialog = () => {
-    settingsStore.areSettingsOpen = false
-  }
-
-  const toggleSettingsDialog = (
-    defaultSelectedTab?: SettingsDialogExtendedKey
-  ) => {
-    if (areSettingsOpen) {
-      closeSettingsDialog()
-    } else {
-      if (defaultSelectedTab)
-        settingsStore.defaultSelectedTab = defaultSelectedTab
-      settingsStore.areSettingsOpen = true
-    }
-  }
-
-  return {
-    openSettingsDialog,
-    closeSettingsDialog,
-    toggleSettingsDialog,
-  }
-}

src/frontend/src/features/settings/index.ts

@@ -2,6 +2,5 @@ export { SettingsButton } from './components/SettingsButton'
 export { SettingsDialog } from './components/SettingsDialog'
 
 export { useTranscriptionLanguage } from './hook/useTranscriptionLanguage'
-export { useSettingsDialog } from './hook/useSettingsDialog'
 
 export { SettingsDialogExtendedKey } from './type.ts'

src/frontend/src/primitives/Text.tsx

@@ -85,6 +85,9 @@ export const text = cva({
       pretty: {
         textWrap: 'pretty',
       },
+      no: {
+        textWrap: 'nowrap',
+      },
     },
     bold: {
       true: {

src/frontend/src/primitives/TextArea.tsx

@@ -23,5 +23,10 @@ export const TextArea = styled(RACTextArea, {
         },
       },
     },
+    fieldSizing: {
+      content: {
+        fieldSizing: 'content',
+      },
+    },
   },
 })

src/frontend/src/stores/chat.ts

@@ -1,9 +1,73 @@
 import { proxy } from 'valtio'
+import type { useChat } from '@livekit/components-react'
+import type { ReceivedChatMessage } from '@livekit/components-core'
+
+type ChatApi = ReturnType<typeof useChat>
+
+export type ChatRow = {
+  id: string
+  identity?: string
+  message: string
+  timestamp: number
+  hideMetadata: boolean
+  isLocal: boolean
+}
 
 type State = {
   unreadMessages: number
+  isSending: boolean
+  rows: ChatRow[]
+  names: Record<string, string>
+  send?: ChatApi['send']
+  textAreaValue: string
 }
 
-export const chatStore = proxy<State>({
+const initialState: State = {
   unreadMessages: 0,
-})
+  isSending: false,
+  rows: [],
+  names: {},
+  send: undefined,
+  textAreaValue: '',
+}
+
+export const chatStore = proxy<State>({ ...initialState })
+
+const GROUPING_WINDOW_MS = 60_000
+
+export function appendRow(msg: ReceivedChatMessage) {
+  const p = msg.from
+  if (p) chatStore.names[p.identity] = p.name || p.identity
+
+  const identity = p?.identity
+  const prev = chatStore.rows[chatStore.rows.length - 1]
+
+  chatStore.rows.push({
+    id: msg.id ?? `${msg.timestamp}`,
+    identity,
+    isLocal: p?.isLocal ?? false,
+    message: msg.message,
+    timestamp: msg.timestamp,
+    hideMetadata:
+      !!prev &&
+      prev.identity === identity &&
+      msg.timestamp - prev.timestamp < GROUPING_WINDOW_MS,
+  })
+}
+
+export const persistTextAreaValue = (value: string) => {
+  chatStore.textAreaValue = value
+}
+
+export const clearTextAreaValue = () => {
+  chatStore.textAreaValue = ''
+}
+
+export function resetChatStore() {
+  console.count('resetChatStore')
+  Object.assign(chatStore, {
+    ...initialState,
+    rows: [],
+    names: {},
+  })
+}

src/frontend/src/stores/layout.ts

@@ -1,8 +1,11 @@
-import { proxy } from 'valtio'
+import { proxy, ref } from 'valtio'
 import type {
   PanelId,
   SubPanelId,
 } from '@/features/rooms/livekit/hooks/useSidePanel'
+import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
+
+type PinnedTrackRef = ReturnType<typeof ref<TrackReferenceOrPlaceholder>>
 
 type State = {
   showHeader: boolean
@@ -11,6 +14,7 @@ type State = {
   activePanelId: PanelId | null
   activeSubPanelId: SubPanelId | null
   showReactionsToolbar: boolean
+  pinnedTrackRef?: PinnedTrackRef
 }
 
 export const layoutStore = proxy<State>({
@@ -20,4 +24,13 @@ export const layoutStore = proxy<State>({
   activePanelId: null,
   activeSubPanelId: null,
   showReactionsToolbar: false,
+  pinnedTrackRef: undefined,
 })
+
+export const setPinnedTrack = (trackRef: TrackReferenceOrPlaceholder): void => {
+  layoutStore.pinnedTrackRef = ref(trackRef)
+}
+
+export const clearPinnedTrack = (): void => {
+  layoutStore.pinnedTrackRef = undefined
+}

src/frontend/src/stores/settings.ts

@@ -10,3 +10,25 @@ export const settingsStore = proxy<State>({
   areSettingsOpen: false,
   defaultSelectedTab: undefined,
 })
+
+export const openSettingsDialog = (
+  defaultSelectedTab?: SettingsDialogExtendedKey
+) => {
+  if (settingsStore.areSettingsOpen) return
+  if (defaultSelectedTab) settingsStore.defaultSelectedTab = defaultSelectedTab
+  settingsStore.areSettingsOpen = true
+}
+
+export const closeSettingsDialog = () => {
+  settingsStore.areSettingsOpen = false
+}
+
+export const toggleSettingsDialog = (
+  defaultSelectedTab?: SettingsDialogExtendedKey
+) => {
+  if (settingsStore.areSettingsOpen) {
+    closeSettingsDialog()
+  } else {
+    openSettingsDialog(defaultSelectedTab)
+  }
+}

src/frontend/src/styles/livekit.css

@@ -114,26 +114,6 @@
   color: white;
 }
 
-[data-lk-theme='visio-light']
-  .lk-chat-entry[data-lk-message-origin='local']
-  .lk-message-body {
-  align-self: flex-end;
-  background-color: var(--colors-primary-subtle);
-}
-[data-lk-theme='visio-light']
-  .lk-chat-entry[data-lk-message-origin='remote']
-  .lk-message-body {
-  background-color: var(--colors-blue-300);
-}
-
-[data-lk-theme] .lk-chat-header {
-  font-weight: bold;
-}
-
-[data-lk-theme] .lk-chat-messages {
-  padding: 0.5rem;
-}
-
 .lk-chat-entry .lk-meta-data {
   padding-left: 0.75rem;
   padding-right: 0.75rem;