From 85ed9b8fc8978dacbf8b2633dd8f98567e595dfc Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Thu, 26 Feb 2026 15:10:21 +0530
Subject: [PATCH 1/5] recoloring tabs

---
 app/components/Package/ListToolbar.vue |  6 +++---
 app/components/ViewModeToggle.vue      | 16 ++++++++++++----
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/app/components/Package/ListToolbar.vue b/app/components/Package/ListToolbar.vue
index 8aad0a8e30..c0d85edd8a 100644
--- a/app/components/Package/ListToolbar.vue
+++ b/app/components/Package/ListToolbar.vue
@@ -217,15 +217,15 @@ function getSortKeyLabelKey(key: SortKey): string {
         />
 
         <!-- View mode toggle + Column picker - desktop (right side, row 1) -->
-        <div class="hidden sm:flex items-center gap-1 order-2">
-          <ViewModeToggle v-model="viewMode" />
-
+        <div class="hidden sm:flex items-center gap-3 order-2">
           <ColumnPicker
             v-if="viewMode === 'table'"
             :columns="columns"
             @toggle="emit('toggleColumn', $event)"
             @reset="emit('resetColumns')"
           />
+
+          <ViewModeToggle v-model="viewMode" />
         </div>
       </div>
     </div>
diff --git a/app/components/ViewModeToggle.vue b/app/components/ViewModeToggle.vue
index 46908cea78..16fa80defb 100644
--- a/app/components/ViewModeToggle.vue
+++ b/app/components/ViewModeToggle.vue
@@ -12,8 +12,12 @@ const viewMode = defineModel<ViewMode>({ default: 'cards' })
   >
     <button
       type="button"
-      class="inline-flex items-center px-2.5 py-1.5 text-sm font-medium rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
-      :class="viewMode === 'cards' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
+      class="inline-flex items-center px-2.5 py-1.5 text-sm font-medium rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+      :class="
+        viewMode === 'cards'
+          ? 'bg-fg-subtle text-bg border-fg'
+          : 'text-fg-muted hover:text-fg border-transparent'
+      "
       :aria-pressed="viewMode === 'cards'"
       :aria-label="$t('filters.view_mode.cards')"
       @click="viewMode = 'cards'"
@@ -23,8 +27,12 @@ const viewMode = defineModel<ViewMode>({ default: 'cards' })
     </button>
     <button
       type="button"
-      class="inline-flex items-center px-2.5 py-1.5 text-sm font-medium rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
-      :class="viewMode === 'table' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
+      class="inline-flex items-center px-2.5 py-1.5 text-sm font-medium rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+      :class="
+        viewMode === 'table'
+          ? 'bg-fg-subtle text-bg border-fg'
+          : 'text-fg-muted hover:text-fg border-transparent'
+      "
       :aria-pressed="viewMode === 'table'"
       :aria-label="$t('filters.view_mode.table')"
       @click="viewMode = 'table'"

From 281ade3bd1b392503305ad33d16a12cc4ec58789 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Thu, 26 Feb 2026 15:15:53 +0530
Subject: [PATCH 2/5] revert position changes

---
 app/components/Package/ListToolbar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Package/ListToolbar.vue b/app/components/Package/ListToolbar.vue
index c0d85edd8a..a33dd8220a 100644
--- a/app/components/Package/ListToolbar.vue
+++ b/app/components/Package/ListToolbar.vue
@@ -218,14 +218,14 @@ function getSortKeyLabelKey(key: SortKey): string {
 
         <!-- View mode toggle + Column picker - desktop (right side, row 1) -->
         <div class="hidden sm:flex items-center gap-3 order-2">
+          <ViewModeToggle v-model="viewMode" />
+
           <ColumnPicker
             v-if="viewMode === 'table'"
             :columns="columns"
             @toggle="emit('toggleColumn', $event)"
             @reset="emit('resetColumns')"
           />
-
-          <ViewModeToggle v-model="viewMode" />
         </div>
       </div>
     </div>

From 1453c8b879463356bd0deda07d8e53b0e1dded0d Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Thu, 26 Feb 2026 15:17:06 +0530
Subject: [PATCH 3/5] Update ListToolbar.vue

---
 app/components/Package/ListToolbar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Package/ListToolbar.vue b/app/components/Package/ListToolbar.vue
index a33dd8220a..8aad0a8e30 100644
--- a/app/components/Package/ListToolbar.vue
+++ b/app/components/Package/ListToolbar.vue
@@ -217,7 +217,7 @@ function getSortKeyLabelKey(key: SortKey): string {
         />
 
         <!-- View mode toggle + Column picker - desktop (right side, row 1) -->
-        <div class="hidden sm:flex items-center gap-3 order-2">
+        <div class="hidden sm:flex items-center gap-1 order-2">
           <ViewModeToggle v-model="viewMode" />
 
           <ColumnPicker

From 12aa8a28745a9b3d56bc7bd2a2552adf4985bbc8 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Thu, 26 Feb 2026 15:49:48 +0530
Subject: [PATCH 4/5] tweak colors

---
 app/components/ViewModeToggle.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/ViewModeToggle.vue b/app/components/ViewModeToggle.vue
index 16fa80defb..605eea8f3e 100644
--- a/app/components/ViewModeToggle.vue
+++ b/app/components/ViewModeToggle.vue
@@ -6,7 +6,7 @@ const viewMode = defineModel<ViewMode>({ default: 'cards' })
 
 <template>
   <div
-    class="inline-flex rounded-md border border-border p-0.5 bg-bg-subtle"
+    class="inline-flex rounded-md border border-border p-0.5 bg-fg/10"
     role="group"
     :aria-label="$t('filters.view_mode.label')"
   >
@@ -15,7 +15,7 @@ const viewMode = defineModel<ViewMode>({ default: 'cards' })
       class="inline-flex items-center px-2.5 py-1.5 text-sm font-medium rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
       :class="
         viewMode === 'cards'
-          ? 'bg-fg-subtle text-bg border-fg'
+          ? 'bg-bg text-fg border-fg-subtle'
           : 'text-fg-muted hover:text-fg border-transparent'
       "
       :aria-pressed="viewMode === 'cards'"
@@ -30,7 +30,7 @@ const viewMode = defineModel<ViewMode>({ default: 'cards' })
       class="inline-flex items-center px-2.5 py-1.5 text-sm font-medium rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
       :class="
         viewMode === 'table'
-          ? 'bg-fg-subtle text-bg border-fg'
+          ? 'bg-bg text-fg border-fg-subtle'
           : 'text-fg-muted hover:text-fg border-transparent'
       "
       :aria-pressed="viewMode === 'table'"

From 2c0986d125b527d6054507a2305d73755faf2b63 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Thu, 26 Feb 2026 16:15:01 +0530
Subject: [PATCH 5/5] using bg-* variants

---
 app/components/ViewModeToggle.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/ViewModeToggle.vue b/app/components/ViewModeToggle.vue
index 605eea8f3e..f878436671 100644
--- a/app/components/ViewModeToggle.vue
+++ b/app/components/ViewModeToggle.vue
@@ -6,7 +6,7 @@ const viewMode = defineModel<ViewMode>({ default: 'cards' })
 
 <template>
   <div
-    class="inline-flex rounded-md border border-border p-0.5 bg-fg/10"
+    class="inline-flex rounded-md border border-border p-0.5 bg-bg-muted"
     role="group"
     :aria-label="$t('filters.view_mode.label')"
   >
@@ -15,7 +15,7 @@ const viewMode = defineModel<ViewMode>({ default: 'cards' })
       class="inline-flex items-center px-2.5 py-1.5 text-sm font-medium rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
       :class="
         viewMode === 'cards'
-          ? 'bg-bg text-fg border-fg-subtle'
+          ? 'bg-bg-subtle text-fg border-fg-subtle'
           : 'text-fg-muted hover:text-fg border-transparent'
       "
       :aria-pressed="viewMode === 'cards'"
@@ -30,7 +30,7 @@ const viewMode = defineModel<ViewMode>({ default: 'cards' })
       class="inline-flex items-center px-2.5 py-1.5 text-sm font-medium rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
       :class="
         viewMode === 'table'
-          ? 'bg-bg text-fg border-fg-subtle'
+          ? 'bg-bg-subtle  text-fg border-fg-subtle'
           : 'text-fg-muted hover:text-fg border-transparent'
       "
       :aria-pressed="viewMode === 'table'"