From 14320693c75b4523c685ea65f5c4e27419168b73 Mon Sep 17 00:00:00 2001
From: indigo <indigoo@gmail.com>
Date: Fri, 17 Jul 2026 01:23:18 +0800
Subject: [PATCH] Collapse sidebar column controls into icon dropdowns

When the sidebar is collapsed to icon-rail mode, the Columns/Task
Columns checkbox lists had no icon-only representation. Show icon
buttons that open a dropdown menu with checkbox items instead.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../ui/sidebar/SidebarColumnSwitch.vue        | 59 ++++++++++++++++++-
 1 file changed, 57 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ui/sidebar/SidebarColumnSwitch.vue b/frontend/src/components/ui/sidebar/SidebarColumnSwitch.vue
index b52f1ad..54da916 100644
--- a/frontend/src/components/ui/sidebar/SidebarColumnSwitch.vue
+++ b/frontend/src/components/ui/sidebar/SidebarColumnSwitch.vue
@@ -1,5 +1,5 @@
 <template>
-  <SidebarGroup>
+  <SidebarGroup v-if="!isCollapsed">
     <SidebarGroupLabel>View</SidebarGroupLabel>
     <SidebarGroup class="py-0" as-child>
       <Collapsible v-model:open="isBaseColumnsOpen" class="group/collapsible">
@@ -88,12 +88,55 @@
       </Collapsible>
     </SidebarGroup>
   </SidebarGroup>
+
+  <SidebarGroup v-else>
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <SidebarMenuButton tooltip="Columns">
+              <Columns class="size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent side="right" align="start" class="w-56">
+            <DropdownMenuCheckboxItem
+              v-for="column in baseColumns"
+              :key="column.id"
+              :model-value="isColumnVisible(column.id)"
+              @update:model-value="(val: boolean) => toggleColumn(column.id, val)"
+            >
+              {{ column.label }}
+            </DropdownMenuCheckboxItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <SidebarMenuButton tooltip="Task Columns">
+              <ListChecks class="size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent side="right" align="start" class="w-56">
+            <DropdownMenuCheckboxItem
+              v-for="column in taskColumns"
+              :key="column.id"
+              :model-value="isColumnVisible(column.id)"
+              @update:model-value="(val: boolean) => toggleColumn(column.id, val)"
+            >
+              {{ column.label }}
+            </DropdownMenuCheckboxItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  </SidebarGroup>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import { Check, ChevronDown, ChevronRight } from 'lucide-vue-next'
+import { Check, ChevronDown, ChevronRight, Columns, ListChecks } from 'lucide-vue-next'
 import {
   Command,
   CommandEmpty,
@@ -111,12 +154,24 @@ import {
   SidebarGroup,
   SidebarGroupContent,
   SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  useSidebar,
 } from '@/components/ui/sidebar'
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuCheckboxItem,
+} from '@/components/ui/dropdown-menu'
 import { useColumnVisibilityStore } from '@/stores/columnVisibility'
 import { customTaskTypeService } from '@/services/customTaskType'
 
 const route = useRoute()
 const columnVisibilityStore = useColumnVisibilityStore()
+const { state } = useSidebar()
+const isCollapsed = computed(() => state.value === 'collapsed')
 
 // Collapsible state
 const isBaseColumnsOpen = ref(true)