From f11aaf62e8cd157b4011a844edcd5b8a95dfa5e5 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Thu, 29 Jan 2026 13:38:44 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20condition=20shortcut?=
 =?UTF-8?q?=20helper=20display=20based=20on=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

restrict shortcut helper to first tile in grid layout only
---
 .../livekit/components/ParticipantTile.tsx    | 27 +++++++++++++----
 .../components/ShortcutHelpTooltip.tsx        |  2 +-
 .../components/layout/CarouselLayout.tsx      | 10 +++++++
 .../livekit/components/layout/GridLayout.tsx  | 18 ++++++++++++
 src/frontend/src/stores/participantLayout.ts  | 29 +++++++++++++++++++
 5 files changed, 79 insertions(+), 7 deletions(-)
 create mode 100644 src/frontend/src/stores/participantLayout.ts

diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
index b7412eeb..a9aa2db9 100644
--- a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
@@ -40,6 +40,7 @@ import {
 import { useSnapshot } from 'valtio'
 import { getShortcutById } from '@/features/shortcuts/catalog'
 import { formatShortcutLabel } from '@/features/shortcuts/formatLabels'
+import { participantLayoutStore } from '@/stores/participantLayout'
 
 export function TrackRefContextIfNeeded(
   props: React.PropsWithChildren<{
@@ -126,6 +127,18 @@ export const ParticipantTile: (
     formatShortcutLabel(openShortcutEffective) ??
     `${isMacintosh() ? '⌘' : 'Ctrl'} + /`
 
+  // Check if we should show the shortcut helper tooltip
+  // Only show on the first tile when in grid layout (not in carousel/left column, not in focus mode)
+  const { layoutType, firstGridTileTrackId } = useSnapshot(participantLayoutStore)
+  const currentTrackId = isTrackReference(trackReference)
+    ? `${trackReference.participant.sid}-${trackReference.source}`
+    : null
+  
+  const shouldShowShortcutHelper =
+    hasKeyboardFocus &&
+    layoutType === 'grid' && // Only show in grid layout
+    currentTrackId === firstGridTileTrackId // Only show on first tile
+
   const interactiveProps = {
     ...elementProps,
     // Ensure the tile is focusable to expose contextual controls to keyboard users.
@@ -245,12 +258,14 @@ export const ParticipantTile: (
           )}
         </ParticipantContextIfNeeded>
       </TrackRefContextIfNeeded>
-      <ShortcutHelpTooltip
-        triggerLabel={t('toolbarHint', {
-          binding: openShortcutLabel,
-        })}
-        isVisible={hasKeyboardFocus}
-      />
+      {shouldShowShortcutHelper && (
+        <ShortcutHelpTooltip
+          triggerLabel={t('toolbarHint', {
+            binding: openShortcutLabel,
+          })}
+          isVisible={hasKeyboardFocus}
+        />
+      )}
     </div>
   )
 })
diff --git a/src/frontend/src/features/rooms/livekit/components/ShortcutHelpTooltip.tsx b/src/frontend/src/features/rooms/livekit/components/ShortcutHelpTooltip.tsx
index cf098d32..cb472b89 100644
--- a/src/frontend/src/features/rooms/livekit/components/ShortcutHelpTooltip.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/ShortcutHelpTooltip.tsx
@@ -48,7 +48,7 @@ const containerStyle = css({
 
 const triggerStyle = css({
   all: 'unset',
-  cursor: 'pointer',
+  cursor: 'default',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
diff --git a/src/frontend/src/features/rooms/livekit/components/layout/CarouselLayout.tsx b/src/frontend/src/features/rooms/livekit/components/layout/CarouselLayout.tsx
index 08bef1ed..291e08ce 100644
--- a/src/frontend/src/features/rooms/livekit/components/layout/CarouselLayout.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/layout/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 { setCarouselLayout, resetLayout } from '@/stores/participantLayout'
 
 const MIN_HEIGHT = 130
 const MIN_WIDTH = 140
@@ -79,6 +80,15 @@ export function CarouselLayout({
     }
   }, [maxVisibleTiles, carouselOrientation])
 
+  // Update store when carousel layout is active
+  React.useEffect(() => {
+    setCarouselLayout()
+    
+    return () => {
+      resetLayout()
+    }
+  }, [])
+
   return (
     <aside
       key={carouselOrientation}
diff --git a/src/frontend/src/features/rooms/livekit/components/layout/GridLayout.tsx b/src/frontend/src/features/rooms/livekit/components/layout/GridLayout.tsx
index 6553e27d..b02c88fc 100644
--- a/src/frontend/src/features/rooms/livekit/components/layout/GridLayout.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/layout/GridLayout.tsx
@@ -10,6 +10,8 @@ import { mergeProps } from '@/utils/mergeProps'
 import { PaginationIndicator } from '../controls/PaginationIndicator'
 import { useGridLayout } from '../../hooks/useGridLayout'
 import { PaginationControl } from '../controls/PaginationControl'
+import { setGridLayout, resetLayout } from '@/stores/participantLayout'
+import { isTrackReference } from '@livekit/components-core'
 
 /** @public */
 export interface GridLayoutProps
@@ -35,6 +37,11 @@ export interface GridLayoutProps
  * ```
  * @public
  */
+const getTrackId = (trackRef: TrackReferenceOrPlaceholder): string | null => {
+  if (!isTrackReference(trackRef)) return null
+  return `${trackRef.participant.sid}-${trackRef.source}`
+}
+
 export function GridLayout({ tracks, ...props }: GridLayoutProps) {
   const gridEl = React.createRef<HTMLDivElement>()
 
@@ -50,6 +57,17 @@ export function GridLayout({ tracks, ...props }: GridLayoutProps) {
     onRightSwipe: pagination.prevPage,
   })
 
+  // Update store when tracks change - set first tile ID for grid layout
+  React.useEffect(() => {
+    const firstTrack = pagination.tracks[0]
+    const firstTrackId = firstTrack ? getTrackId(firstTrack) : null
+    setGridLayout(firstTrackId)
+    
+    return () => {
+      resetLayout()
+    }
+  }, [pagination.tracks])
+
   return (
     <div
       ref={gridEl}
diff --git a/src/frontend/src/stores/participantLayout.ts b/src/frontend/src/stores/participantLayout.ts
new file mode 100644
index 00000000..59c5e348
--- /dev/null
+++ b/src/frontend/src/stores/participantLayout.ts
@@ -0,0 +1,29 @@
+import { proxy } from 'valtio'
+
+type LayoutType = 'grid' | 'carousel' | null
+
+type State = {
+  layoutType: LayoutType
+  firstGridTileTrackId: string | null
+}
+
+export const participantLayoutStore = proxy<State>({
+  layoutType: null,
+  firstGridTileTrackId: null,
+})
+
+export const setGridLayout = (firstTrackId: string | null) => {
+  participantLayoutStore.layoutType = 'grid'
+  participantLayoutStore.firstGridTileTrackId = firstTrackId
+}
+
+export const setCarouselLayout = () => {
+  participantLayoutStore.layoutType = 'carousel'
+  participantLayoutStore.firstGridTileTrackId = null
+}
+
+export const resetLayout = () => {
+  participantLayoutStore.layoutType = null
+  participantLayoutStore.firstGridTileTrackId = null
+}
+