✨(frontend) expose Windows app web link

Expose a Windows application web link requested by a partner who wraps Visio
inside a containerized Chrome application due to security concerns and limited
trust in video codecs.

This commit introduces a proof of concept implementation.
We plan to iterate on this approach and likely generalize it under a more
neutral lasuite meet naming in future revisions.

CHANGELOG.md

@@ -8,6 +8,14 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Added
+
+- ✨(frontend) expose Windows app web link #976
+
+### Changed
+
+- ✨(frontend) add clickable settings general link in idle modal #974
+
 ## [1.6.0] - 2026-02-10
 
 ### Added

src/frontend/default.conf

@@ -5,6 +5,12 @@ server {
 
   root /usr/share/nginx/html;
 
+  location = /.wellknown/windows-app-web-link {
+      default_type application/json;
+      alias /usr/share/nginx/html/.wellknown/windows-app-web-link;
+      add_header Content-Disposition "attachment; filename=windows-app-web-link";
+  }
+
   # Serve static files with caching
   location ~* ^/assets/.*\.(css|js|json|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
       expires 30d;

src/frontend/public/.wellknown/windows-app-web-link

@@ -0,0 +1,6 @@
+[
+{
+  "packageFamilyName" : "Visio_g3z6ba6vek6vg",
+  "paths" : [ "*" ]
+}
+]

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

@@ -1,4 +1,4 @@
-import { Button, Dialog, H, P, ScreenReaderAnnouncer } from '@/primitives'
+import { A, Button, Dialog, H, P, ScreenReaderAnnouncer } from '@/primitives'
 import { useTranslation } from 'react-i18next'
 import { css } from '@/styled-system/css'
 import { useSnapshot } from 'valtio'
@@ -9,6 +9,8 @@ import { navigateTo } from '@/navigation/navigateTo'
 import humanizeDuration from 'humanize-duration'
 import i18n from 'i18next'
 import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
+import { useSettingsDialog } from '@/features/settings/hook/useSettingsDialog'
+import { SettingsDialogExtendedKey } from '@/features/settings/type'
 
 const IDLE_DISCONNECT_TIMEOUT_MS = 120000 // 2 minutes
 const COUNTDOWN_ANNOUNCEMENT_SECONDS = [90, 60, 30]
@@ -18,6 +20,7 @@ export const IsIdleDisconnectModal = () => {
   const connectionObserverSnap = useSnapshot(connectionObserverStore)
   const [timeRemaining, setTimeRemaining] = useState(IDLE_DISCONNECT_TIMEOUT_MS)
   const lastAnnouncementRef = useRef<number | null>(null)
+  const { openSettingsDialog } = useSettingsDialog()
 
   const { t } = useTranslation('rooms', { keyPrefix: 'isIdleDisconnectModal' })
   const announce = useScreenReaderAnnounce()
@@ -117,7 +120,19 @@ export const IsIdleDisconnectModal = () => {
                 }),
               })}
             </P>
-            <P>{t('settings')}</P>
+            <P>
+              {t('settingsPrefix')}{' '}
+              <A
+                color="primary"
+                onPress={() => {
+                  connectionObserverStore.isIdleDisconnectModalOpen = false
+                  openSettingsDialog(SettingsDialogExtendedKey.GENERAL)
+                }}
+              >
+                {t('settingsLink')}
+              </A>
+              {t('settingsSuffix')}
+            </P>
             <HStack marginTop="2rem">
               <Button
                 onPress={() => {

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

@@ -6,6 +6,7 @@ import { ToggleButton } from '@/primitives'
 import { chatStore } from '@/stores/chat'
 import { useSidePanel } from '../../hooks/useSidePanel'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
+import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
 
 export const ChatToggle = ({
   onPress,
@@ -18,6 +19,11 @@ export const ChatToggle = ({
   const { isChatOpen, toggleChat } = useSidePanel()
   const tooltipLabel = isChatOpen ? 'open' : 'closed'
 
+  useRegisterKeyboardShortcut({
+    id: 'toggle-chat',
+    handler: toggleChat,
+  })
+
   return (
     <div
       className={css({

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

@@ -18,6 +18,7 @@ import { useCannotUseDevice } from '../../../hooks/useCannotUseDevice'
 import { useDeviceIcons } from '../../../hooks/useDeviceIcons'
 import { useDeviceShortcut } from '../../../hooks/useDeviceShortcut'
 import { ToggleSource, CaptureOptionsBySource } from '@livekit/components-core'
+import { getShortcutDescriptorById } from '@/features/shortcuts/catalog'
 
 type ToggleDeviceStyleProps = {
   variant?: NonNullable<ButtonRecipeProps>['variant']
@@ -88,12 +89,14 @@ export const ToggleDevice = <T extends ToggleSource>({
   const deviceShortcut = useDeviceShortcut(kind)
 
   useRegisterKeyboardShortcut({
-    shortcut: deviceShortcut,
+    id: deviceShortcut?.id,
     handler: async () => await toggle(),
     isDisabled: cannotUseDevice,
   })
+
+  const pushToTalkShortcut = getShortcutDescriptorById('push-to-talk')
   useLongPress({
-    keyCode: kind === 'audioinput' ? 'KeyV' : undefined,
+    keyCode: kind === 'audioinput' ? pushToTalkShortcut?.code : undefined,
     onKeyDown,
     onKeyUp,
     isDisabled: cannotUseDevice,
@@ -103,7 +106,9 @@ export const ToggleDevice = <T extends ToggleSource>({
     const label = t(enabled ? 'disable' : 'enable', {
       keyPrefix: `selectDevice.${kind}`,
     })
-    return deviceShortcut ? appendShortcutLabel(label, deviceShortcut) : label
+    return deviceShortcut?.shortcut
+      ? appendShortcutLabel(label, deviceShortcut.shortcut)
+      : label
   }, [enabled, kind, deviceShortcut, t])
 
   const Icon =

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

@@ -9,6 +9,7 @@ import {
   closeLowerHandToasts,
   showLowerHandToast,
 } from '@/features/notifications/utils'
+import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
 
 const SPEAKING_DETECTION_DELAY = 3000
 
@@ -33,6 +34,16 @@ export const HandToggle = () => {
     closeLowerHandToasts()
   }, [isHandRaised])
 
+  const handleToggle = () => {
+    toggleRaisedHand()
+    resetToastState()
+  }
+
+  useRegisterKeyboardShortcut({
+    id: 'raise-hand',
+    handler: handleToggle,
+  })
+
   useEffect(() => {
     const shouldShowToast = isSpeaking && isHandRaised && !hasShownToast
 
@@ -68,10 +79,7 @@ export const HandToggle = () => {
         aria-label={t(tooltipLabel)}
         tooltip={t(tooltipLabel)}
         isSelected={isHandRaised}
-        onPress={() => {
-          toggleRaisedHand()
-          resetToastState()
-        }}
+        onPress={handleToggle}
         data-attr={`controls-hand-${tooltipLabel}`}
       >
         <RiHand />

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

@@ -11,6 +11,7 @@ import {
   ReactionPortals,
 } from '@/features/rooms/livekit/components/ReactionPortal'
 import { getEmojiLabel } from '@/features/rooms/livekit/utils/reactionUtils'
+import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
 import { Toolbar as RACToolbar } from 'react-aria-components'
 import { Participant } from 'livekit-client'
 import useRateLimiter from '@/hooks/useRateLimiter'
@@ -41,6 +42,11 @@ export const ReactionsToggle = () => {
 
   const [isVisible, setIsVisible] = useState(false)
 
+  useRegisterKeyboardShortcut({
+    id: 'reaction',
+    handler: () => setIsVisible((prev) => !prev),
+  })
+
   const sendReaction = async (emoji: string) => {
     const encoder = new TextEncoder()
     const payload: NotificationPayload = {

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

@@ -1,19 +1,16 @@
 import { useMemo } from 'react'
-import { Shortcut } from '@/features/shortcuts/types'
+import {
+  getShortcutDescriptorById,
+  ShortcutDescriptor,
+} from '@/features/shortcuts/catalog'
 
 export const useDeviceShortcut = (kind: MediaDeviceKind) => {
-  return useMemo<Shortcut | undefined>(() => {
+  return useMemo<ShortcutDescriptor | undefined>(() => {
     switch (kind) {
       case 'audioinput':
-        return {
-          key: 'd',
-          ctrlKey: true,
-        }
+        return getShortcutDescriptorById('toggle-microphone')
       case 'videoinput':
-        return {
-          key: 'e',
-          ctrlKey: true,
-        }
+        return getShortcutDescriptorById('toggle-camera')
       default:
         return undefined
     }

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

@@ -22,7 +22,7 @@ export function DesktopControlBar({
   const desktopControlBarEl = useRef<HTMLDivElement>(null)
 
   useRegisterKeyboardShortcut({
-    shortcut: { key: 'F2' },
+    id: 'focus-toolbar',
     handler: () => {
       const root = desktopControlBarEl.current
       if (!root) return

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

@@ -0,0 +1,83 @@
+import { Shortcut } from './types'
+
+// Central list of current keyboard shortcuts.
+// Keep a single source of truth for display and, later, customization
+export type ShortcutCategory = 'navigation' | 'media' | 'interaction'
+
+export type ShortcutId =
+  | 'focus-toolbar'
+  | 'toggle-microphone'
+  | 'toggle-camera'
+  | 'push-to-talk'
+  | 'toggle-chat'
+  | 'toggle-participants'
+  | 'raise-hand'
+  | 'recording'
+  | 'reaction'
+  | 'fullscreen'
+
+export const getShortcutDescriptorById = (id: ShortcutId) =>
+  shortcutCatalog.find((item) => item.id === id)
+
+export type ShortcutDescriptor = {
+  id: ShortcutId
+  category: ShortcutCategory
+  shortcut?: Shortcut
+  kind?: 'press' | 'longPress'
+  code?: string // used when kind === 'longPress' (KeyboardEvent.code)
+  description?: string
+}
+
+export const shortcutCatalog: ShortcutDescriptor[] = [
+  {
+    id: 'focus-toolbar',
+    category: 'navigation',
+    shortcut: { key: 'F2' },
+  },
+  {
+    id: 'toggle-microphone',
+    category: 'media',
+    shortcut: { key: 'd', ctrlKey: true },
+  },
+  {
+    id: 'toggle-camera',
+    category: 'media',
+    shortcut: { key: 'e', ctrlKey: true },
+  },
+  {
+    id: 'push-to-talk',
+    category: 'media',
+    kind: 'longPress',
+    code: 'KeyV',
+  },
+  {
+    id: 'reaction',
+    category: 'interaction',
+    shortcut: { key: 'E', ctrlKey: true, shiftKey: true },
+  },
+  {
+    id: 'fullscreen',
+    category: 'interaction',
+    shortcut: { key: 'F', ctrlKey: true, shiftKey: true },
+  },
+  {
+    id: 'recording',
+    category: 'interaction',
+    shortcut: { key: 'L', ctrlKey: true, shiftKey: true },
+  },
+  {
+    id: 'raise-hand',
+    category: 'interaction',
+    shortcut: { key: 'H', ctrlKey: true, shiftKey: true },
+  },
+  {
+    id: 'toggle-chat',
+    category: 'interaction',
+    shortcut: { key: 'M', ctrlKey: true, shiftKey: true },
+  },
+  {
+    id: 'toggle-participants',
+    category: 'interaction',
+    shortcut: { key: 'P', ctrlKey: true, shiftKey: true },
+  },
+]

src/frontend/src/features/shortcuts/types.ts

@@ -1,4 +1,6 @@
 export type Shortcut = {
   key: string
   ctrlKey?: boolean
+  shiftKey?: boolean
+  altKey?: boolean
 }

src/frontend/src/features/shortcuts/useKeyboardShortcuts.ts

@@ -11,11 +11,13 @@ export const useKeyboardShortcuts = () => {
     // This approach handles basic shortcuts but isn't comprehensive.
     // Issues might occur. First draft.
     const onKeyDown = async (e: KeyboardEvent) => {
-      const { key, metaKey, ctrlKey } = e
+      const { key, metaKey, ctrlKey, shiftKey, altKey } = e
       if (!key) return
       const shortcutKey = formatShortcutKey({
         key,
         ctrlKey: ctrlKey || (isMacintosh() && metaKey),
+        shiftKey,
+        altKey,
       })
       const shortcut = shortcutsSnap.shortcuts.get(shortcutKey)
       if (!shortcut) return

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

@@ -1,26 +1,28 @@
 import { useEffect } from 'react'
 import { keyboardShortcutsStore } from '@/stores/keyboardShortcuts'
 import { formatShortcutKey } from '@/features/shortcuts/utils'
-import { Shortcut } from '@/features/shortcuts/types'
+import { ShortcutId, getShortcutDescriptorById } from './catalog'
 
 export type useRegisterKeyboardShortcutProps = {
-  shortcut?: Shortcut
+  id?: ShortcutId
   handler: () => Promise<void | boolean | undefined> | void
   isDisabled?: boolean
 }
 
 export const useRegisterKeyboardShortcut = ({
-  shortcut,
+  id,
   handler,
   isDisabled = false,
 }: useRegisterKeyboardShortcutProps) => {
   useEffect(() => {
-    if (!shortcut) return
-    const formattedKey = formatShortcutKey(shortcut)
+    if (!id) return
+    const descriptor = getShortcutDescriptorById(id)
+    if (!descriptor?.shortcut) return
+    const formattedKey = formatShortcutKey(descriptor.shortcut)
     if (isDisabled) {
       keyboardShortcutsStore.shortcuts.delete(formattedKey)
     } else {
       keyboardShortcutsStore.shortcuts.set(formattedKey, handler)
     }
-  }, [handler, shortcut, isDisabled])
+  }, [handler, id, isDisabled])
 }

src/frontend/src/features/shortcuts/utils.ts

@@ -4,15 +4,27 @@ import { Shortcut } from '@/features/shortcuts/types'
 export const CTRL = 'ctrl'
 
 export const formatShortcutKey = (shortcut: Shortcut) => {
-  if (shortcut.ctrlKey) return `${CTRL}+${shortcut.key.toUpperCase()}`
-  return shortcut.key.toUpperCase()
+  const parts = []
+  if (shortcut.ctrlKey) parts.push(CTRL)
+  if (shortcut.altKey) parts.push('alt')
+  if (shortcut.shiftKey) parts.push('shift')
+  parts.push(shortcut.key.toUpperCase())
+  return parts.join('+')
 }
 
 export const appendShortcutLabel = (label: string, shortcut: Shortcut) => {
   if (!shortcut.key) return
-  let formattedKeyLabel = shortcut.key.toLowerCase()
+  const parts: string[] = []
   if (shortcut.ctrlKey) {
-    formattedKeyLabel = `${isMacintosh() ? '⌘' : 'Ctrl'}+${formattedKeyLabel}`
+    parts.push(isMacintosh() ? '⌘' : 'Ctrl')
   }
+  if (shortcut.altKey) {
+    parts.push(isMacintosh() ? '⌥' : 'Alt')
+  }
+  if (shortcut.shiftKey) {
+    parts.push('Shift')
+  }
+  parts.push(shortcut.key.toLowerCase())
+  const formattedKeyLabel = parts.join('+')
   return `${label} (${formattedKeyLabel})`
 }

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

@@ -154,7 +154,9 @@
   "isIdleDisconnectModal": {
     "title": "Bist du noch da?",
     "body": "Du bist der einzige Teilnehmer. Dieses Gespräch endet in {{duration}}. Möchtest du das Gespräch fortsetzen?",
-    "settings": "Um diese Nachricht nicht mehr zu sehen, gehe zu Einstellungen > Allgemein.",
+    "settingsPrefix": "Um diese Nachricht nicht mehr zu sehen, gehe zu",
+    "settingsLink": "Einstellungen > Allgemein",
+    "settingsSuffix": ".",
     "stayButton": "Gespräch fortsetzen",
     "leaveButton": "Jetzt verlassen",
     "countdownAnnouncement": "Das Gespräch endet in {{duration}}."

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

@@ -154,7 +154,9 @@
   "isIdleDisconnectModal": {
     "title": "Are you still there?",
     "body": "You are the only participant. This call will end in {{duration}}. Would you like to continue the call?",
-    "settings": "To stop seeing this message, go to Settings > General.",
+    "settingsPrefix": "To stop seeing this message, go to",
+    "settingsLink": "Settings > General",
+    "settingsSuffix": ".",
     "stayButton": "Continue the call",
     "leaveButton": "Leave now",
     "countdownAnnouncement": "Call ends in {{duration}}."

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

@@ -154,7 +154,9 @@
   "isIdleDisconnectModal": {
     "title": "Êtes-vous toujours là ?",
     "body": "Vous êtes le seul participant. Cet appel va donc se terminer dans {{duration}}. Voulez-vous poursuivre l'appel ?",
-    "settings": "Pour ne plus voir ce message, accèder à Paramètres > Général.",
+    "settingsPrefix": "Pour ne plus voir ce message, allez dans",
+    "settingsLink": "Paramètres > Général",
+    "settingsSuffix": ".",
     "stayButton": "Poursuivre l'appel",
     "leaveButton": "Quitter maintenant",
     "countdownAnnouncement": "L'appel se termine dans {{duration}}."

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

@@ -154,7 +154,9 @@
   "isIdleDisconnectModal": {
     "title": "Ben je er nog?",
     "body": "Je bent de enige deelnemer. Dit gesprek wordt over {{duration}} beëindigd. Wil je het gesprek voortzetten?",
-    "settings": "Om dit bericht niet meer te zien, ga naar Instellingen > Algemeen.",
+    "settingsPrefix": "Om dit bericht niet meer te zien, ga naar",
+    "settingsLink": "Instellingen > Algemeen",
+    "settingsSuffix": ".",
     "stayButton": "Gesprek voortzetten",
     "leaveButton": "Nu verlaten",
     "countdownAnnouncement": "Het gesprek eindigt over {{duration}}."