From 96db6ed651d081a2bd917ecb8b733bec977e7064 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Thu, 19 Feb 2026 21:28:08 -0500
Subject: [PATCH] fix: remove categories/tags from sidebar to prevent footer
 clipping

Categories and Tags sections were pushing Feedback, Account, and
Collapse off-screen when All Flows expanded its children. These
filters already exist on the TreeLibraryPage, so the sidebar
duplicates were removed.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/layout/Sidebar.tsx | 81 +---------------------
 1 file changed, 3 insertions(+), 78 deletions(-)

diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index 51490e8d..b1093390 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -1,32 +1,18 @@
 import { useEffect, useState } from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
 import { LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, BarChart3, Settings, PanelLeftClose, PanelLeftOpen, MessageSquareText } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { useUserPreferencesStore } from '@/store/userPreferencesStore'
-import { CategoryList } from '@/components/sidebar/CategoryList'
-import { TagCloud } from '@/components/sidebar/TagCloud'
 import { PinnedFlowsSection } from '@/components/sidebar/PinnedFlowsSection'
 import { NavItem } from './NavItem'
-import { categoriesApi, tagsApi, sessionsApi, treesApi } from '@/api'
+import { sessionsApi, treesApi } from '@/api'
 import { pinnedFlowsApi } from '@/api/pinnedFlows'
 import type { PinnedFlow } from '@/api/pinnedFlows'
 import { toast } from '@/lib/toast'
 
-interface CategoryItem {
-  id: string
-  name: string
-  color: string
-  count: number
-}
-
 export function Sidebar() {
   const sidebarCollapsed = useUserPreferencesStore(s => s.sidebarCollapsed)
   const toggleSidebar = useUserPreferencesStore(s => s.toggleSidebar)
 
-  const [categories, setCategories] = useState<CategoryItem[]>([])
-  const [tags, setTags] = useState<string[]>([])
-  const [activeCategoryId, setActiveCategoryId] = useState<string | null>(null)
-  const [activeTags, setActiveTags] = useState<string[]>([])
   const [activeSessionCount, setActiveSessionCount] = useState(0)
   const [pinnedFlows, setPinnedFlows] = useState<PinnedFlow[]>([])
   const [treeCounts, setTreeCounts] = useState({ total: 0, troubleshooting: 0, procedural: 0, maintenance: 0 })
@@ -35,20 +21,11 @@ export function Sidebar() {
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const [cats, tagList, activeSessions, allTrees, pinnedData] = await Promise.all([
-          categoriesApi.list(),
-          tagsApi.list().catch(() => []),
+        const [activeSessions, allTrees, pinnedData] = await Promise.all([
           sessionsApi.list({ completed: false, size: 50 }).catch(() => []),
           treesApi.list({ sort_by: 'name' }).catch(() => []),
           pinnedFlowsApi.list().catch(() => ({ items: [], count: 0 })),
         ])
-        setCategories(cats.map(c => ({
-          id: c.id,
-          name: c.name,
-          color: c.color || '#3b82f6',
-          count: c.tree_count || 0,
-        })))
-        setTags(tagList.map((t: { name: string }) => t.name).slice(0, 15))
         setActiveSessionCount(activeSessions.length)
         setPinnedFlows(pinnedData.items)
 
@@ -64,44 +41,6 @@ export function Sidebar() {
     fetchData()
   }, [])
 
-  const navigate = useNavigate()
-  const location = useLocation()
-
-  // Sync active filters from URL when on /trees page
-  useEffect(() => {
-    if (location.pathname === '/trees') {
-      const params = new URLSearchParams(location.search)
-      setActiveCategoryId(params.get('category') || null)
-      const tagsParam = params.get('tags')
-      setActiveTags(tagsParam ? tagsParam.split(',') : [])
-    }
-  }, [location.pathname, location.search])
-
-  const handleCategorySelect = (id: string | null) => {
-    setActiveCategoryId(id)
-    const params = new URLSearchParams(location.search)
-    if (id) {
-      params.set('category', id)
-    } else {
-      params.delete('category')
-    }
-    navigate(`/trees?${params.toString()}`)
-  }
-
-  const handleTagClick = (tag: string) => {
-    const next = activeTags.includes(tag)
-      ? activeTags.filter(t => t !== tag)
-      : [...activeTags, tag]
-    setActiveTags(next)
-    const params = new URLSearchParams(location.search)
-    if (next.length > 0) {
-      params.set('tags', next.join(','))
-    } else {
-      params.delete('tags')
-    }
-    navigate(`/trees?${params.toString()}`)
-  }
-
   const handleUnpin = async (treeId: string) => {
     try {
       await pinnedFlowsApi.unpin(treeId)
@@ -175,24 +114,10 @@ export function Sidebar() {
             <NavItem href="/step-library" icon={Bookmark} label="Step Library" />
             <NavItem href="/analytics" icon={BarChart3} label="Analytics" />
           </div>
-
-          <div className="border-b border-[hsl(var(--border-subtle))]" />
-
-          {/* Categories */}
-          <CategoryList
-            categories={categories}
-            activeId={activeCategoryId}
-            onSelect={handleCategorySelect}
-          />
-
-          <div className="border-b border-[hsl(var(--border-subtle))]" />
-
-          {/* Tags */}
-          <TagCloud tags={tags} activeTags={activeTags} onTagClick={handleTagClick} />
         </>
       )}
 
-      {/* Spacer */}
+      {/* Spacer — pushes footer to bottom */}
       <div className="flex-1" />
 
       {/* Footer */}