From 37a2f3985a7c4bec28b516a7c5fcb17093a041fb Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Sat, 3 Jan 2026 01:22:00 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=82(frontend)=20display=20transcriptio?=
 =?UTF-8?q?n=20settings=20for=20privileged=20users?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Only display transcription settings to room admins or owners. Showing these
controls to users without the required privileges would be misleading, since
they cannot actually configure or apply the settings.
---
 .../components/SettingsDialogExtended.tsx         | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
index 64148508..6daf33f5 100644
--- a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
+++ b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
@@ -20,6 +20,7 @@ import { TranscriptionTab } from './tabs/TranscriptionTab'
 import { useRef } from 'react'
 import { useMediaQuery } from '@/features/rooms/livekit/hooks/useMediaQuery'
 import { SettingsDialogExtendedKey } from '@/features/settings/type'
+import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
 
 const tabsStyle = css({
   maxHeight: '40.625rem', // fixme size copied from meet settings modal
@@ -59,6 +60,8 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
   const dialogEl = useRef<HTMLDivElement>(null)
   const isWideScreen = useMediaQuery('(min-width: 800px)') // fixme - hardcoded 50rem in pixel
 
+  const isAdminOrOwner = useIsAdminOrOwner()
+
   return (
     <Dialog innerRef={dialogEl} {...props} role="dialog" type="flex">
       <Tabs
@@ -101,11 +104,13 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
               {isWideScreen &&
                 t(`tabs.${SettingsDialogExtendedKey.NOTIFICATIONS}`)}
             </Tab>
-            <Tab icon highlight id={SettingsDialogExtendedKey.TRANSCRIPTION}>
-              <span className="material-symbols">speech_to_text</span>
-              {isWideScreen &&
-                t(`tabs.${SettingsDialogExtendedKey.TRANSCRIPTION}`)}
-            </Tab>
+            {isAdminOrOwner && (
+              <Tab icon highlight id={SettingsDialogExtendedKey.TRANSCRIPTION}>
+                <span className="material-symbols">speech_to_text</span>
+                {isWideScreen &&
+                  t(`tabs.${SettingsDialogExtendedKey.TRANSCRIPTION}`)}
+              </Tab>
+            )}
           </TabList>
         </div>
         <div className={tabPanelContainerStyle}>