🔒️(ci) set persist-credentials: false on actions/checkout

By default, `actions/checkout` saves the job's auth token
(`GITHUB_TOKEN` or the provided PAT) in the local git config so
later steps can run authenticated git commands. That token then
stays on disk for the rest of the job, where it can leak:

* If an artifact upload includes the checkout directory, the token
  is packaged with it and anyone with artifact access can extract
  it. On public repos that is anyone, and the token can be used
  while the job is still running ("ArtiPACKED", flagged by
  `zizmor` as `artipacked`).
* Any later step, third-party action, or build dependency can read
  the token from the git config, which widens the impact of a
  supply-chain compromise.

None of our workflows need authenticated git after checkout, so
disable credential persistence. If a step needs to push in

CHANGELOG.md

@@ -17,7 +17,6 @@ and this project adheres to
 - ✨(frontend) let signed-out visitors start a meeting
 - ✨(backend) expose `allow_unregistered_rooms` in the frontend configuration
 - ✅(frontend) add vitest so the frontend can carry unit tests
-- ♿️(frontend) make participant pagination readable and keyboard reachable #1775
 
 ### Changed
 
@@ -95,7 +94,7 @@ and this project adheres to
 
 ### Fixed
 
-- 🐛(helm) probe liveness on **lbheartbeat** and readiness on **heartbeat**
+- 🐛(helm) probe liveness on __lbheartbeat__ and readiness on __heartbeat__
 - 🐛(helm) render periodSeconds and failureThreshold on probes
 - 🐛(backend) report the app release to Sentry instead of "NA"
 - 🐛(frontend) play the waiting room notification sound on every arrival
@@ -167,7 +166,6 @@ and this project adheres to
 ### Added
 
 - ✨(any) let any authenticated user manage the lobby on trusted rooms
-
 ### Changed
 
 - 📱(frontend) collapse mobile control bar items on narrow viewports

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

@@ -7,6 +7,7 @@ import {
   useSwipe,
 } from '@livekit/components-react'
 import { mergeProps } from '@/utils/mergeProps'
+import { PaginationIndicator } from './PaginationIndicator'
 import { useGridLayout } from '../hooks/useGridLayout'
 import { PaginationControl } from './PaginationControl'
 import { useSpeakerPromotionTrigger } from '../hooks/useSpeakerPromotionTrigger'
@@ -61,7 +62,13 @@ export function GridLayout({ tracks, ...props }: GridLayoutProps) {
     >
       <TrackLoop tracks={pagination.tracks}>{props.children}</TrackLoop>
       {tracks.length > layout.maxTiles && (
-        <PaginationControl {...pagination} focusShortcut />
+        <>
+          <PaginationIndicator
+            totalPageCount={pagination.totalPageCount}
+            currentPage={pagination.currentPage}
+          />
+          <PaginationControl pagesContainer={gridEl} {...pagination} />
+        </>
       )}
     </div>
   )

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

@@ -1,147 +1,99 @@
+import * as React from 'react'
+import { createInteractingObservable } from '@livekit/components-core'
 import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'
 import { Button } from '@/primitives'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { css, cva, type RecipeVariantProps } from '@/styled-system/css'
-import { useCallback, useRef } from 'react'
-import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
+import { css } from '@/styled-system/css'
 
-const paginationToolbar = cva({
-  base: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '0.125rem',
-    backgroundColor: 'primaryDark.50',
-    borderRadius: '2rem',
-    border: '1px solid',
-    borderColor: 'primaryDark.200',
-    padding: '0.375rem',
-  },
-  variants: {
-    placement: {
-      overlay: {
-        position: 'absolute',
-        bottom: '1rem',
-        left: '50%',
-        zIndex: 2,
-        transform: 'translateX(-50%)',
-        boxShadow: '0 2px 10px rgba(0, 0, 0, 0.45)',
-      },
-      inline: {
-        alignSelf: 'center',
-        flexShrink: 0,
-        marginTop: '1rem',
-      },
-    },
-  },
-  defaultVariants: {
-    placement: 'overlay',
-  },
-})
-
-export type PaginationControlProps = RecipeVariantProps<
-  typeof paginationToolbar
-> & {
+export interface PaginationControlProps {
   totalPageCount: number
   nextPage: () => void
   prevPage: () => void
   currentPage: number
-  // The shortcut listens on the main window only, so a single instance may own it.
-  focusShortcut?: boolean
+  pagesContainer?: React.RefObject<HTMLElement>
 }
 
-const arrowButtonClass = css({
-  _disabled: {
-    cursor: 'default',
-    backgroundColor: 'transparent !important',
-    '& svg': {
-      opacity: 0.35,
-    },
-    _focusVisible: {
-      outline: '2px solid',
-      outlineColor: 'focusRing',
-      outlineOffset: '2px',
-    },
-  },
-})
-
 export function PaginationControl({
   totalPageCount,
   nextPage,
   prevPage,
   currentPage,
-  placement,
-  focusShortcut = false,
+  pagesContainer: connectedElement,
 }: PaginationControlProps) {
   const { t } = useTranslation('rooms', { keyPrefix: 'pagination' })
-  const prevButtonRef = useRef<HTMLButtonElement>(null)
-  const nextButtonRef = useRef<HTMLButtonElement>(null)
-  const isSinglePage = totalPageCount <= 1
-  const isFirstPage = currentPage <= 1
-  const isLastPage = currentPage >= totalPageCount
+  const [interactive, setInteractive] = useState(false)
 
-  const focusPagination = useCallback(() => {
-    const target = isLastPage ? prevButtonRef.current : nextButtonRef.current
-    target?.focus()
-  }, [isLastPage])
+  useEffect(() => {
+    let subscription:
+      | ReturnType<ReturnType<typeof createInteractingObservable>['subscribe']>
+      | undefined
+    if (connectedElement) {
+      subscription = createInteractingObservable(
+        connectedElement.current,
+        2000
+      ).subscribe(setInteractive)
+    }
+    return () => {
+      if (subscription) {
+        subscription.unsubscribe()
+      }
+    }
+  }, [connectedElement])
 
-  useRegisterKeyboardShortcut({
-    id: focusShortcut ? 'focus-pagination' : undefined,
-    handler: focusPagination,
-    isDisabled: isSinglePage,
-    unregisterOnUnmount: true,
-  })
-
-  if (isSinglePage) return null
-
-  const pageCount = t('count', { currentPage, totalPageCount })
+  if (totalPageCount <= 1) return null
 
   return (
-    <div
-      role="group"
-      aria-label={`${t('label')}, ${pageCount}`}
-      className={paginationToolbar({ placement })}
+    <nav
+      aria-label={t('label')}
+      className={css({
+        position: 'absolute',
+        bottom: '1rem',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        alignItems: 'stretch',
+        backgroundColor: 'var(--lk-control-bg)',
+        borderRadius: 'var(--lk-border-radius)',
+        transition: 'opacity ease-in-out .15s',
+        display: 'none',
+        border: '1px solid',
+        borderColor: 'primaryDark.100',
+        overflow: 'hidden',
+      })}
+      style={{
+        display: interactive ? 'flex' : 'none',
+      }}
+      data-lk-user-interaction={interactive}
     >
       <Button
-        ref={prevButtonRef}
-        aria-disabled={isFirstPage}
-        onPress={isFirstPage ? undefined : prevPage}
-        size="sm"
-        square
-        variant="primaryTextDark"
-        className={arrowButtonClass}
+        isDisabled={currentPage == 1}
+        onPress={prevPage}
+        size="xs"
+        variant="quaternaryText"
         aria-label={t('previous')}
-        tooltip={t('previous')}
       >
-        <RiArrowLeftSLine size={20} />
+        <RiArrowLeftSLine />
       </Button>
       <span
         role="status"
         className={css({
-          color: 'white',
-          fontSize: '0.8125rem',
-          fontWeight: 500,
-          minWidth: '3.5rem',
-          textAlign: 'center',
-          userSelect: 'none',
-          padding: '0 0.35rem',
-          whiteSpace: 'nowrap',
+          padding: '0.25rem 0.5rem',
         })}
       >
-        {pageCount}
+        {t('count', {
+          currentPage,
+          totalPageCount,
+        })}
       </span>
       <Button
-        ref={nextButtonRef}
-        aria-disabled={isLastPage}
-        onPress={isLastPage ? undefined : nextPage}
-        size="sm"
-        square
-        variant="primaryTextDark"
-        className={arrowButtonClass}
+        isDisabled={currentPage == totalPageCount}
+        onPress={nextPage}
+        size="xs"
+        variant="quaternaryText"
         aria-label={t('next')}
-        tooltip={t('next')}
       >
-        <RiArrowRightSLine size={20} />
+        <RiArrowRightSLine />
       </Button>
-    </div>
+    </nav>
   )
 }

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

@@ -0,0 +1,30 @@
+import * as React from 'react'
+
+export interface PaginationIndicatorProps {
+  totalPageCount: number
+  currentPage: number
+}
+
+export const PaginationIndicator: (
+  props: PaginationIndicatorProps & React.RefAttributes<HTMLDivElement>
+) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
+  HTMLDivElement,
+  PaginationIndicatorProps
+>(function PaginationIndicator(
+  { totalPageCount, currentPage }: PaginationIndicatorProps,
+  ref
+) {
+  const bubbles = new Array(totalPageCount).fill('').map((_, index) => {
+    if (index + 1 === currentPage) {
+      return <span data-lk-active key={index} />
+    } else {
+      return <span key={index} />
+    }
+  })
+
+  return (
+    <div ref={ref} className="lk-pagination-indicator" aria-hidden="true">
+      {bubbles}
+    </div>
+  )
+})

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

@@ -0,0 +1,96 @@
+import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { styled } from '@/styled-system/jsx'
+
+interface PipPaginationProps {
+  totalPageCount: number
+  currentPage: number
+  nextPage: () => void
+  prevPage: () => void
+}
+
+export const PipPagination = ({
+  totalPageCount,
+  currentPage,
+  nextPage,
+  prevPage,
+}: PipPaginationProps) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'pagination' })
+
+  if (totalPageCount <= 1) return null
+
+  return (
+    <Nav aria-label={t('label')}>
+      <ArrowButton
+        type="button"
+        onClick={prevPage}
+        disabled={currentPage === 1}
+        aria-label={t('previous')}
+      >
+        <RiArrowLeftSLine size={18} />
+      </ArrowButton>
+      <Counter role="status">
+        {t('count', { currentPage, totalPageCount })}
+      </Counter>
+      <ArrowButton
+        type="button"
+        onClick={nextPage}
+        disabled={currentPage === totalPageCount}
+        aria-label={t('next')}
+      >
+        <RiArrowRightSLine size={18} />
+      </ArrowButton>
+    </Nav>
+  )
+}
+
+const Nav = styled('nav', {
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '0.25rem',
+    marginTop: '1rem',
+    flexShrink: 0,
+  },
+})
+
+const ArrowButton = styled('button', {
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '1.75rem',
+    height: '1.75rem',
+    borderRadius: '4px',
+    border: 'none',
+    cursor: 'pointer',
+    color: 'white',
+    backgroundColor: 'primaryDark.100',
+    transition: 'opacity 0.15s, background-color 0.15s',
+    '&:hover:not(:disabled)': {
+      backgroundColor: 'primaryDark.75',
+    },
+    '&:focus-visible': {
+      outline: '2px solid',
+      outlineColor: 'white',
+      outlineOffset: '2px',
+    },
+    '&:disabled': {
+      opacity: 0.3,
+      cursor: 'default',
+    },
+  },
+})
+
+const Counter = styled('span', {
+  base: {
+    fontSize: '0.75rem',
+    color: 'white',
+    opacity: 0.8,
+    whiteSpace: 'nowrap',
+    padding: '0 0.25rem',
+    minWidth: '3rem',
+    textAlign: 'center',
+  },
+})

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

@@ -4,7 +4,7 @@ import { RoomEvent, Track } from 'livekit-client'
 import { styled } from '@/styled-system/jsx'
 import { PipFocusLayout } from './PipFocusLayout'
 import { PipGridLayout } from './PipGridLayout'
-import { PaginationControl } from '@/features/layout/components/PaginationControl'
+import { PipPagination } from './PipPagination'
 import { PipScreenShareLayout } from './PipScreenShareLayout'
 import { StageFrame } from './StageFrame'
 import { MAX_PIP_TILES } from '../../utils/pipGrid'
@@ -120,7 +120,12 @@ const PaginatedStage = ({
 }) => (
   <StageWrapper>
     <StageFrame>{children}</StageFrame>
-    <PaginationControl {...pagination} placement="inline" />
+    <PipPagination
+      totalPageCount={pagination.totalPageCount}
+      currentPage={pagination.currentPage}
+      nextPage={pagination.nextPage}
+      prevPage={pagination.prevPage}
+    />
   </StageWrapper>
 )
 

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

@@ -31,20 +31,35 @@ export const useSidePanel = () => {
   const isSidePanelOpen = !!activePanelId
   const isSubPanelOpen = !!activeSubPanelId
 
-  // Reads the live store, not the render snapshot: shortcut handlers outlive
-  // toggles that unmount (e.g. inside a closed overflow menu).
-  const togglePanel = (panelId: PanelId) => {
-    layoutStore.activePanelId =
-      layoutStore.activePanelId === panelId ? null : panelId
-    if (layoutStore.activeSubPanelId) layoutStore.activeSubPanelId = null
+  const toggleAdmin = () => {
+    layoutStore.activePanelId = isAdminOpen ? null : PanelId.ADMIN
+    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
   }
 
-  const toggleAdmin = () => togglePanel(PanelId.ADMIN)
-  const toggleParticipants = () => togglePanel(PanelId.PARTICIPANTS)
-  const toggleChat = () => togglePanel(PanelId.CHAT)
-  const toggleEffects = () => togglePanel(PanelId.EFFECTS)
-  const toggleTools = () => togglePanel(PanelId.TOOLS)
-  const toggleInfo = () => togglePanel(PanelId.INFO)
+  const toggleParticipants = () => {
+    layoutStore.activePanelId = isParticipantsOpen ? null : PanelId.PARTICIPANTS
+    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
+  }
+
+  const toggleChat = () => {
+    layoutStore.activePanelId = isChatOpen ? null : PanelId.CHAT
+    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
+  }
+
+  const toggleEffects = () => {
+    layoutStore.activePanelId = isEffectsOpen ? null : PanelId.EFFECTS
+    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
+  }
+
+  const toggleTools = () => {
+    layoutStore.activePanelId = isToolsOpen ? null : PanelId.TOOLS
+    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
+  }
+
+  const toggleInfo = () => {
+    layoutStore.activePanelId = isInfoOpen ? null : PanelId.INFO
+    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
+  }
 
   const openTranscript = () => {
     layoutStore.activeSubPanelId = SubPanelId.TRANSCRIPT

src/frontend/src/features/shortcuts/catalog.ts

@@ -7,7 +7,6 @@ export type ShortcutCategory = 'navigation' | 'media' | 'interaction'
 export type ShortcutId =
   | 'open-shortcuts'
   | 'focus-toolbar'
-  | 'focus-pagination'
   | 'toggle-microphone'
   | 'toggle-camera'
   | 'push-to-talk'
@@ -45,11 +44,6 @@ export const shortcutCatalog: ShortcutDescriptor[] = [
     category: 'navigation',
     shortcut: { key: 'F2' },
   },
-  {
-    id: 'focus-pagination',
-    category: 'navigation',
-    shortcut: { key: 'G', ctrlKey: true, shiftKey: true },
-  },
   {
     id: 'toggle-microphone',
     category: 'media',

src/frontend/src/features/shortcuts/useRegisterKeyboardShortcut.ts

@@ -7,16 +7,12 @@ export type useRegisterKeyboardShortcutProps = {
   id?: ShortcutId
   handler: () => Promise<void | boolean | undefined> | void
   isDisabled?: boolean
-  // Opt-in: controls rendered inside menus unmount when the menu closes, and
-  // their shortcuts must keep working.
-  unregisterOnUnmount?: boolean
 }
 
 export const useRegisterKeyboardShortcut = ({
   id,
   handler,
   isDisabled = false,
-  unregisterOnUnmount = false,
 }: useRegisterKeyboardShortcutProps) => {
   useEffect(() => {
     if (!id) return
@@ -25,14 +21,8 @@ export const useRegisterKeyboardShortcut = ({
     const formattedKey = formatShortcutKey(descriptor.shortcut)
     if (isDisabled) {
       keyboardShortcutsStore.shortcuts.delete(formattedKey)
-      return
+    } else {
+      keyboardShortcutsStore.shortcuts.set(formattedKey, handler)
     }
-    keyboardShortcutsStore.shortcuts.set(formattedKey, handler)
-    if (!unregisterOnUnmount) return
-    return () => {
-      if (keyboardShortcutsStore.shortcuts.get(formattedKey) === handler) {
-        keyboardShortcutsStore.shortcuts.delete(formattedKey)
-      }
-    }
-  }, [handler, id, isDisabled, unregisterOnUnmount])
+  }, [handler, id, isDisabled])
 }

src/frontend/src/locales/de/rooms.json

@@ -784,7 +784,6 @@
     "actions": {
       "open-shortcuts": "Tastenkürzel-Hilfe öffnen",
       "focus-toolbar": "Fokus auf die untere Symbolleiste",
-      "focus-pagination": "Fokus auf die Teilnehmerseiten",
       "toggle-microphone": "Mikrofon umschalten",
       "toggle-camera": "Kamera umschalten",
       "push-to-talk": "Push-to-talk",

src/frontend/src/locales/en/rooms.json

@@ -784,7 +784,6 @@
     "actions": {
       "open-shortcuts": "Open shortcuts help",
       "focus-toolbar": "Focus bottom toolbar",
-      "focus-pagination": "Focus participant pagination",
       "toggle-microphone": "Toggle microphone",
       "toggle-camera": "Toggle camera",
       "push-to-talk": "Push-to-talk (hold to unmute)",

src/frontend/src/locales/es/rooms.json

@@ -783,7 +783,6 @@
     "actions": {
       "open-shortcuts": "Abrir la ayuda de atajos",
       "focus-toolbar": "Poner el foco en la barra de herramientas inferior",
-      "focus-pagination": "Poner el foco en la paginación de participantes",
       "toggle-microphone": "Activar o desactivar el micrófono",
       "toggle-camera": "Activar o desactivar la cámara",
       "push-to-talk": "Pulsar para hablar (mantener para reactivar)",

src/frontend/src/locales/fr/rooms.json

@@ -784,7 +784,6 @@
     "actions": {
       "open-shortcuts": "Ouvrir l’aide des raccourcis",
       "focus-toolbar": "Mettre le focus sur la barre d’outils du bas",
-      "focus-pagination": "Mettre le focus sur la pagination des participants",
       "toggle-microphone": "Activer ou désactiver le micro",
       "toggle-camera": "Activer ou désactiver la caméra",
       "push-to-talk": "Appuyer pour parler (maintenir pour réactiver)",

src/frontend/src/locales/nl/rooms.json

@@ -784,7 +784,6 @@
     "actions": {
       "open-shortcuts": "Sneltoetsenhulp openen",
       "focus-toolbar": "Focus op de onderste werkbalk",
-      "focus-pagination": "Focus op de paginering van deelnemers",
       "toggle-microphone": "Microfoon aan/uit",
       "toggle-camera": "Camera aan/uit",
       "push-to-talk": "Push-to-talk (ingedrukt houden om te activeren)",