From 1c81b3a23cbc2ea9f4ea8e8a481312cc98df1321 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Thu, 19 Feb 2026 16:00:12 +0100
Subject: [PATCH] refactor: hide edit button for users with no write
 permissions

---
 .../CuesheetTableSettings.tsx                 | 23 ++++++++++++-------
 e2e/tests/features/206-url-preset.spec.ts     |  5 ++--
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-settings/CuesheetTableSettings.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-settings/CuesheetTableSettings.tsx
index a7ea67fdb..11dc17fcd 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-settings/CuesheetTableSettings.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-settings/CuesheetTableSettings.tsx
@@ -46,6 +46,7 @@ export default function CuesheetTableSettings({
   handleResetReordering,
   handleClearToggles,
 }: CuesheetTableSettingsProps) {
+  const canChangeMode = useCuesheetPermissions((state) => state.canChangeMode);
   const canShare = useCuesheetPermissions((state) => state.canShare);
   const preset = use(PresetContext);
   const options = usePersistedCuesheetOptions();
@@ -71,14 +72,20 @@ export default function CuesheetTableSettings({
         handleResetReordering={handleResetReordering}
         handleClearToggles={handleClearToggles}
       />
-      <ToggleGroup value={[cuesheetMode]} onValueChange={toggleCuesheetMode} className={cx([style.group, style.apart])}>
-        <Toolbar.Button render={<Toggle />} value={AppMode.Run} className={style.radioButton}>
-          Run
-        </Toolbar.Button>
-        <Toolbar.Button render={<Toggle />} value={AppMode.Edit} className={style.radioButton}>
-          Edit
-        </Toolbar.Button>
-      </ToggleGroup>
+      {canChangeMode && (
+        <ToggleGroup
+          value={[cuesheetMode]}
+          onValueChange={toggleCuesheetMode}
+          className={cx([style.group, style.apart])}
+        >
+          <Toolbar.Button render={<Toggle />} value={AppMode.Run} className={style.radioButton}>
+            Run
+          </Toolbar.Button>
+          <Toolbar.Button render={<Toggle />} value={AppMode.Edit} className={style.radioButton}>
+            Edit
+          </Toolbar.Button>
+        </ToggleGroup>
+      )}
 
       {canShare && (
         <>
diff --git a/e2e/tests/features/206-url-preset.spec.ts b/e2e/tests/features/206-url-preset.spec.ts
index cb3c18659..ad7b45209 100644
--- a/e2e/tests/features/206-url-preset.spec.ts
+++ b/e2e/tests/features/206-url-preset.spec.ts
@@ -165,8 +165,9 @@ test.describe('Sharing from cuesheet', () => {
     await expect(page.getByTestId('navigation__toggle-settings')).toBeHidden();
     await expect(page.getByRole('button', { name: 'Share...' })).toBeHidden();
 
-    // check that we are locked and cannot edit
-    await page.getByRole('button', { name: 'Edit' }).click();
+    // mode toggle should not be rendered for readonly users
+    await expect(page.getByRole('button', { name: 'Edit' })).toHaveCount(0);
+    await expect(page.getByRole('button', { name: 'Run' })).toHaveCount(0);
 
     // Verify that the title is visible but not editable
     await expect(page.getByTestId('cuesheet-event').getByText('title 1')).toBeVisible();