From f0bfac2555412f764db97b902956891ecea5775f Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sun, 3 May 2026 13:42:42 -0400
Subject: [PATCH] refactor(web/m7-362): action-button labels use non-flipping
 text-action-fg

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/src/lib/components/AddToPlaylistMenu.svelte  |  2 +-
 web/src/lib/components/DiscoverResultCard.svelte |  2 +-
 web/src/lib/components/FlagPopover.svelte        |  2 +-
 web/src/routes/admin/+page.svelte                |  6 +++---
 web/src/routes/admin/integrations/+page.svelte   |  8 ++++----
 web/src/routes/admin/quarantine/+page.svelte     | 10 +++++-----
 web/src/routes/admin/requests/+page.svelte       |  8 ++++----
 web/src/routes/discover/+page.svelte             |  4 ++--
 web/src/routes/playlists/+page.svelte            |  4 ++--
 web/src/routes/playlists/[id]/+page.svelte       |  2 +-
 10 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/web/src/lib/components/AddToPlaylistMenu.svelte b/web/src/lib/components/AddToPlaylistMenu.svelte
index c979bffb..71d9244b 100644
--- a/web/src/lib/components/AddToPlaylistMenu.svelte
+++ b/web/src/lib/components/AddToPlaylistMenu.svelte
@@ -110,7 +110,7 @@
           type="button"
           onclick={createAndAdd}
           disabled={busy || !newName.trim()}
-          class="rounded bg-action-secondary px-2 py-1 text-xs text-text-primary disabled:opacity-50"
+          class="rounded bg-action-secondary px-2 py-1 text-xs text-action-fg disabled:opacity-50"
         >
           Create & add
         </button>
diff --git a/web/src/lib/components/DiscoverResultCard.svelte b/web/src/lib/components/DiscoverResultCard.svelte
index ce7dba3d..5738092b 100644
--- a/web/src/lib/components/DiscoverResultCard.svelte
+++ b/web/src/lib/components/DiscoverResultCard.svelte
@@ -74,7 +74,7 @@
       <button
         type="button"
         aria-label={`Request ${title}`}
-        class="flex items-center gap-1 rounded-md bg-action-primary px-3 py-1.5 text-sm text-text-primary"
+        class="flex items-center gap-1 rounded-md bg-action-primary px-3 py-1.5 text-sm text-action-fg"
         onclick={handleRequest}
       >
         <Plus size={16} strokeWidth={1} /> Request
diff --git a/web/src/lib/components/FlagPopover.svelte b/web/src/lib/components/FlagPopover.svelte
index 25dbcf75..0cf0c613 100644
--- a/web/src/lib/components/FlagPopover.svelte
+++ b/web/src/lib/components/FlagPopover.svelte
@@ -88,7 +88,7 @@
       type="button"
       onclick={submit}
       disabled={submitting}
-      class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-2.5 py-1 text-sm text-text-primary disabled:opacity-50"
+      class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-2.5 py-1 text-sm text-action-fg disabled:opacity-50"
     >
       <Flag size={14} strokeWidth={1} />
       {isUpdate ? 'Update flag' : 'Flag'}
diff --git a/web/src/routes/admin/+page.svelte b/web/src/routes/admin/+page.svelte
index f9a0de41..be5b297d 100644
--- a/web/src/routes/admin/+page.svelte
+++ b/web/src/routes/admin/+page.svelte
@@ -236,7 +236,7 @@
               type="button"
               onclick={() => onApprove(r)}
               aria-label={`Approve ${rowTitle(r)}`}
-              class="flex h-8 items-center gap-1 rounded-md bg-action-primary px-3 text-sm text-text-primary hover:opacity-90"
+              class="flex h-8 items-center gap-1 rounded-md bg-action-primary px-3 text-sm text-action-fg hover:opacity-90"
             >
               <Check size={14} strokeWidth={1.5} /> Approve
             </button>
@@ -299,7 +299,7 @@
               onclick={() => onDeleteFile(row)}
               aria-label={fileArmed ? `Confirm delete file ${row.track_title}` : `Delete file ${row.track_title}`}
               class="flex h-8 items-center gap-1 rounded-md px-3 text-sm transition-colors {fileArmed
-                ? 'bg-action-secondary text-text-primary'
+                ? 'bg-action-secondary text-action-fg'
                 : 'border border-border text-text-secondary hover:text-text-primary hover:bg-surface-hover'}"
             >
               <Trash2 size={14} strokeWidth={1.5} /> {fileArmed ? 'Confirm?' : 'Delete file'}
@@ -309,7 +309,7 @@
               onclick={() => onDeleteLidarr(row)}
               aria-label={lidarrArmed ? `Confirm delete via Lidarr ${row.track_title}` : `Delete via Lidarr ${row.track_title}`}
               class="flex h-8 items-center gap-1 rounded-md px-3 text-sm transition-colors {lidarrArmed
-                ? 'bg-action-destructive text-text-primary'
+                ? 'bg-action-destructive text-action-fg'
                 : 'border border-border text-text-secondary hover:text-text-primary hover:bg-surface-hover'}"
             >
               <Cloud size={14} strokeWidth={1.5} /> {lidarrArmed ? 'Confirm?' : 'Delete via Lidarr'}
diff --git a/web/src/routes/admin/integrations/+page.svelte b/web/src/routes/admin/integrations/+page.svelte
index b945cada..8e47ed67 100644
--- a/web/src/routes/admin/integrations/+page.svelte
+++ b/web/src/routes/admin/integrations/+page.svelte
@@ -273,7 +273,7 @@
         type="button"
         onclick={onSave}
         disabled={isSaving}
-        class="inline-flex items-center gap-2 rounded-md bg-action-primary px-3 py-1.5 text-sm text-text-primary disabled:opacity-50"
+        class="inline-flex items-center gap-2 rounded-md bg-action-primary px-3 py-1.5 text-sm text-action-fg disabled:opacity-50"
       >
         <Save size={14} strokeWidth={2} />
         Save changes
@@ -290,7 +290,7 @@
       <button
         type="button"
         onclick={() => (modalOpen = true)}
-        class="ml-auto inline-flex items-center gap-2 rounded-md bg-action-destructive px-3 py-1.5 text-sm text-text-primary"
+        class="ml-auto inline-flex items-center gap-2 rounded-md bg-action-destructive px-3 py-1.5 text-sm text-action-fg"
       >
         <Trash2 size={14} strokeWidth={2} />
         Disconnect
@@ -357,7 +357,7 @@
         <button
           type="button"
           onclick={cancelDisconnect}
-          class="rounded-md bg-action-secondary px-3 py-1.5 text-sm text-text-primary"
+          class="rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg"
         >
           Cancel
         </button>
@@ -365,7 +365,7 @@
           type="button"
           onclick={onConfirmDisconnect}
           disabled={!canDisconnect}
-          class="rounded-md bg-action-destructive px-3 py-1.5 text-sm text-text-primary disabled:opacity-50"
+          class="rounded-md bg-action-destructive px-3 py-1.5 text-sm text-action-fg disabled:opacity-50"
         >
           Disconnect
         </button>
diff --git a/web/src/routes/admin/quarantine/+page.svelte b/web/src/routes/admin/quarantine/+page.svelte
index 08d3f5d8..cfb3482b 100644
--- a/web/src/routes/admin/quarantine/+page.svelte
+++ b/web/src/routes/admin/quarantine/+page.svelte
@@ -290,7 +290,7 @@
             <button
               type="button"
               aria-label={`Delete file for ${r.track_title}`}
-              class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-text-primary"
+              class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg"
               onclick={() => openDeleteFile(r)}
             >
               <Trash2 size={14} strokeWidth={2} />
@@ -301,7 +301,7 @@
               <span
                 aria-label={`Delete via Lidarr disabled for ${r.track_title}`}
                 title="Local-only track — no Lidarr album to remove."
-                class="inline-flex items-center gap-1 rounded-md bg-action-destructive px-3 py-1.5 text-sm text-text-primary opacity-50 cursor-not-allowed"
+                class="inline-flex items-center gap-1 rounded-md bg-action-destructive px-3 py-1.5 text-sm text-action-fg opacity-50 cursor-not-allowed"
                 data-testid="delete-lidarr-disabled"
               >
                 <Trash2 size={14} strokeWidth={2} />
@@ -312,7 +312,7 @@
               <button
                 type="button"
                 aria-label={`Delete via Lidarr for ${r.track_title}`}
-                class="inline-flex items-center gap-1 rounded-md bg-action-destructive px-3 py-1.5 text-sm text-text-primary"
+                class="inline-flex items-center gap-1 rounded-md bg-action-destructive px-3 py-1.5 text-sm text-action-fg"
                 onclick={() => openDeleteLidarr(r)}
               >
                 <Trash2 size={14} strokeWidth={2} />
@@ -361,7 +361,7 @@
         <button
           type="button"
           aria-label="Confirm delete file"
-          class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-text-primary"
+          class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg"
           onclick={() => confirmDeleteFile(deleteFileRow!)}
         >
           <Trash2 size={14} strokeWidth={2} />
@@ -423,7 +423,7 @@
           type="button"
           aria-label="Confirm delete via Lidarr"
           disabled={deleteLidarrInput.trim() !== 'DELETE'}
-          class="inline-flex items-center gap-1 rounded-md bg-action-destructive px-3 py-1.5 text-sm text-text-primary disabled:cursor-not-allowed disabled:opacity-50"
+          class="inline-flex items-center gap-1 rounded-md bg-action-destructive px-3 py-1.5 text-sm text-action-fg disabled:cursor-not-allowed disabled:opacity-50"
           onclick={() => confirmDeleteLidarr(deleteLidarrRow!)}
         >
           <Trash2 size={14} strokeWidth={2} />
diff --git a/web/src/routes/admin/requests/+page.svelte b/web/src/routes/admin/requests/+page.svelte
index 36f1905f..ffd271e1 100644
--- a/web/src/routes/admin/requests/+page.svelte
+++ b/web/src/routes/admin/requests/+page.svelte
@@ -270,7 +270,7 @@
               <button
                 type="button"
                 aria-label={`Approve ${rowAccessibleName(r)}`}
-                class="inline-flex items-center gap-1 rounded-md bg-action-primary px-3 py-1.5 text-sm text-text-primary"
+                class="inline-flex items-center gap-1 rounded-md bg-action-primary px-3 py-1.5 text-sm text-action-fg"
                 onclick={() => onApprove(r)}
               >
                 <Check size={14} strokeWidth={2} />
@@ -279,7 +279,7 @@
               <button
                 type="button"
                 aria-label={`Reject ${rowAccessibleName(r)}`}
-                class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-text-primary"
+                class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg"
                 onclick={() => openReject(r)}
               >
                 <X size={14} strokeWidth={2} />
@@ -352,7 +352,7 @@
         </button>
         <button
           type="button"
-          class="inline-flex items-center gap-1 rounded-md bg-action-primary px-3 py-1.5 text-sm text-text-primary"
+          class="inline-flex items-center gap-1 rounded-md bg-action-primary px-3 py-1.5 text-sm text-action-fg"
           onclick={() => confirmOverride(overrideRow!)}
         >
           <Check size={14} strokeWidth={2} />
@@ -404,7 +404,7 @@
         </button>
         <button
           type="button"
-          class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-text-primary"
+          class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg"
           onclick={() => confirmReject(rejectRow!)}
         >
           <X size={14} strokeWidth={2} />
diff --git a/web/src/routes/discover/+page.svelte b/web/src/routes/discover/+page.svelte
index cc751370..feb425b7 100644
--- a/web/src/routes/discover/+page.svelte
+++ b/web/src/routes/discover/+page.svelte
@@ -218,14 +218,14 @@
       <div class="mt-5 flex justify-end gap-2">
         <button
           type="button"
-          class="rounded-md bg-action-secondary px-3 py-1.5 text-sm text-text-primary"
+          class="rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg"
           onclick={cancelModal}
         >
           Cancel
         </button>
         <button
           type="button"
-          class="rounded-md bg-action-primary px-3 py-1.5 text-sm text-text-primary"
+          class="rounded-md bg-action-primary px-3 py-1.5 text-sm text-action-fg"
           onclick={confirmModal}
         >
           Add the album
diff --git a/web/src/routes/playlists/+page.svelte b/web/src/routes/playlists/+page.svelte
index 559233ae..25b19897 100644
--- a/web/src/routes/playlists/+page.svelte
+++ b/web/src/routes/playlists/+page.svelte
@@ -43,7 +43,7 @@
     <button
       type="button"
       onclick={() => (creating = true)}
-      class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-text-primary"
+      class="inline-flex items-center gap-1 rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg"
     >
       <Plus size={14} strokeWidth={1} />
       New playlist
@@ -78,7 +78,7 @@
           type="button"
           onclick={submitCreate}
           disabled={creatingBusy || !newName.trim()}
-          class="rounded-md bg-action-secondary px-3 py-1.5 text-sm text-text-primary disabled:opacity-50"
+          class="rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg disabled:opacity-50"
         >
           Create
         </button>
diff --git a/web/src/routes/playlists/[id]/+page.svelte b/web/src/routes/playlists/[id]/+page.svelte
index 86b547a6..3952cd25 100644
--- a/web/src/routes/playlists/[id]/+page.svelte
+++ b/web/src/routes/playlists/[id]/+page.svelte
@@ -213,7 +213,7 @@
           <button
             type="button"
             onclick={submitEdit}
-            class="rounded-md bg-action-secondary px-3 py-1.5 text-sm text-text-primary"
+            class="rounded-md bg-action-secondary px-3 py-1.5 text-sm text-action-fg"
           >
             Save
           </button>