Merge branch 'make-tab-selection-consistent-gpvf'

Author: knowsuchagency

src/components/layout/header.tsx

@@ -23,6 +23,7 @@ import {
   More03Icon,
 } from '@hugeicons/core-free-icons'
 import { CreateTaskModal } from '@/components/kanban/create-task-modal'
+import { cn } from '@/lib/utils'
 
 interface HeaderProps {
   onNewTaskRef?: (openModal: () => void) => void
@@ -86,20 +87,25 @@ export function Header({ onNewTaskRef, onOpenCommandPalette }: HeaderProps) {
           {NAV_ITEMS.map((item) => {
             const active = isActive(item.to, item.matchPrefix)
             return (
-              <Link key={item.to} to={item.to}>
-                <Button
-                  variant={active ? 'secondary' : 'ghost'}
-                  size="sm"
-                  className={active ? 'dark:bg-transparent text-destructive' : undefined}
-                >
-                  <HugeiconsIcon
-                    icon={item.icon}
-                    size={16}
-                    strokeWidth={2}
-                    data-slot="icon"
-                  />
-                  {t(item.labelKey)}
-                </Button>
+              <Link
+                key={item.to}
+                to={item.to}
+                className={cn(
+                  'relative flex items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium transition-colors',
+                  active
+                    ? 'bg-background text-foreground'
+                    : 'text-foreground/60 hover:text-foreground',
+                  'after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-foreground after:transition-opacity',
+                  active ? 'after:opacity-100' : 'after:opacity-0'
+                )}
+              >
+                <HugeiconsIcon
+                  icon={item.icon}
+                  size={16}
+                  strokeWidth={2}
+                  data-slot="icon"
+                />
+                {t(item.labelKey)}
               </Link>
             )
           })}
@@ -116,14 +122,18 @@ export function Header({ onNewTaskRef, onOpenCommandPalette }: HeaderProps) {
         >
           <HugeiconsIcon icon={BrowserIcon} size={16} strokeWidth={2} />
         </Button>
-        <Link to="/settings">
-          <Button
-            variant={pathname === '/settings' ? 'secondary' : 'ghost'}
-            size="icon-sm"
-            className={pathname === '/settings' ? 'dark:bg-transparent text-destructive' : undefined}
-          >
-            <HugeiconsIcon icon={Settings01Icon} size={16} strokeWidth={2} />
-          </Button>
+        <Link
+          to="/settings"
+          className={cn(
+            'relative flex items-center justify-center rounded-md p-1.5 transition-colors',
+            pathname === '/settings'
+              ? 'bg-background text-foreground'
+              : 'text-foreground/60 hover:text-foreground',
+            'after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-foreground after:transition-opacity',
+            pathname === '/settings' ? 'after:opacity-100' : 'after:opacity-0'
+          )}
+        >
+          <HugeiconsIcon icon={Settings01Icon} size={16} strokeWidth={2} />
         </Link>
       </div>
     </header>

src/components/terminal/terminal-tab-bar.tsx

@@ -62,10 +62,12 @@ export function TerminalTabBar({
           onClick={() => onTabSelect(tab.id)}
           onDoubleClick={() => handleDoubleClick(tab)}
           className={cn(
-            'group relative flex items-center gap-1.5 rounded-t-md border-x border-t px-3 py-1.5 text-xs transition-colors max-sm:px-2 max-sm:py-1',
+            'group relative flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs transition-colors max-sm:px-2 max-sm:py-1',
             tab.id === activeTabId
-              ? 'border-accent bg-background text-foreground'
-              : 'border-transparent text-muted-foreground hover:text-foreground'
+              ? 'bg-background text-foreground'
+              : 'text-muted-foreground hover:text-foreground',
+            'after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-foreground after:transition-opacity',
+            tab.id === activeTabId ? 'after:opacity-100' : 'after:opacity-0'
           )}
         >
           {editingTabId === tab.id ? (

src/routes/terminals/index.tsx

@@ -458,10 +458,12 @@ function TerminalsView() {
           <button
             onClick={() => setActiveTab(ALL_TASKS_TAB_ID)}
             className={cn(
-              'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs transition-colors max-sm:px-2',
+              'relative flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs transition-colors max-sm:px-2',
               activeTabId === ALL_TASKS_TAB_ID
-                ? 'bg-destructive text-white'
-                : 'text-destructive hover:bg-destructive/10'
+                ? 'bg-background text-foreground'
+                : 'text-muted-foreground hover:text-foreground',
+              'after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-foreground after:transition-opacity',
+              activeTabId === ALL_TASKS_TAB_ID ? 'after:opacity-100' : 'after:opacity-0'
             )}
           >
             <HugeiconsIcon icon={GridViewIcon} size={12} strokeWidth={2} />