refactor: hide edit button for users with no write permissions

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 && (
         <>

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();