feat(ui-vite): replace native buttons with @leanspec/ui-components

- Replace all native button elements with Button component from @leanspec/ui-components
- Update SpecsFilters, ThemeToggle, LanguageSwitcher for consistent styling
- Update QuickSearch, TableOfContents, SubSpecTabs with Button variants
- Update TagsEditor, Layout shortcut modal, DirectoryPicker with proper sizes
- Update SettingsPage project actions and BoardView archived toggles
- Import cn utility from @leanspec/ui-components where needed
- Fix tsconfig deprecation warning (ignoreDeprecations: 6.0 -> 5.0)
- All changes pass typecheck and build successfully

Implements spec 197

Author: tikazyq

packages/ui-components/tsconfig.json

@@ -28,7 +28,7 @@
         "./src/*"
       ]
     },
-    "ignoreDeprecations": "6.0",
+    "ignoreDeprecations": "5.0",
     "outDir": "./dist",
     "rootDir": "./src"
   },

packages/ui-vite/src/components/LanguageSwitcher.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Languages } from 'lucide-react';
-import { Button } from '@leanspec/ui-components';
-import { cn } from '../lib/utils';
+import { Button, cn } from '@leanspec/ui-components';
 
 const languages = [
   { code: 'en', labelKey: 'language.english', shortLabel: 'EN' },
@@ -47,16 +46,18 @@ export function LanguageSwitcher() {
           <div className="fixed inset-0 z-50" onClick={() => setOpen(false)} />
           <div className="absolute right-0 mt-2 w-32 z-50 rounded-md border bg-popover p-1 shadow-md">
             {languages.map((language) => (
-              <button
+              <Button
                 key={language.code}
                 onClick={() => changeLanguage(language.code)}
+                variant="ghost"
+                size="sm"
                 className={cn(
-                  'w-full text-left px-2 py-1.5 text-sm rounded-sm hover:bg-accent transition-colors',
+                  'w-full justify-start h-8',
                   i18n.language === language.code && 'bg-accent'
                 )}
               >
                 {t(language.labelKey)}
-              </button>
+              </Button>
             ))}
           </div>
         </>

packages/ui-vite/src/components/Layout.tsx

@@ -6,6 +6,7 @@ import { useGlobalShortcuts } from '../hooks/useKeyboardShortcuts';
 import { ErrorBoundary } from './shared/ErrorBoundary';
 import { PageTransition } from './shared/PageTransition';
 import { BackToTop } from './shared/BackToTop';
+import { Button } from '@leanspec/ui-components';
 
 function KeyboardShortcutsHelp({ onClose }: { onClose: () => void }) {
   const shortcuts = [
@@ -30,12 +31,14 @@ function KeyboardShortcutsHelp({ onClose }: { onClose: () => void }) {
             </div>
           ))}
         </div>
-        <button
+        <Button
           onClick={onClose}
-          className="mt-4 w-full px-4 py-2 text-sm bg-secondary rounded-lg hover:bg-secondary/80 transition-colors"
+          variant="secondary"
+          size="sm"
+          className="mt-4 w-full"
         >
           Close
-        </button>
+        </Button>
       </div>
     </div>
   );

packages/ui-vite/src/components/QuickSearch.tsx

@@ -10,6 +10,7 @@ import {
   CommandItem,
   CommandList,
   CommandSeparator,
+  Button,
 } from '@leanspec/ui-components';
 import { api, type Spec } from '../lib/api';
 import { StatusBadge } from './StatusBadge';
@@ -129,17 +130,19 @@ export function QuickSearch() {
 
   return (
     <>
-      <button
+      <Button
         onClick={() => setOpen(true)}
-        className="inline-flex items-center gap-2 px-2 sm:px-3 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors border rounded-md hover:border-foreground/20"
+        variant="outline"
+        size="sm"
+        className="gap-2 text-muted-foreground hover:text-foreground"
         aria-label="Open quick search"
       >
         <Search className="h-4 w-4" />
         <span className="hidden sm:inline">Quick search...</span>
         <kbd className="hidden md:inline-flex pointer-events-none h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100">
           <span className="text-xs">⌘</span>K
         </kbd>
-      </button>
+      </Button>
 
       <CommandDialog
         open={open}

packages/ui-vite/src/components/ThemeToggle.tsx

@@ -1,6 +1,6 @@
 import { Sun, Moon, Monitor } from 'lucide-react';
 import { useTheme } from '../contexts';
-import { cn } from '../lib/utils';
+import { cn, Button } from '@leanspec/ui-components';
 
 export function ThemeToggle() {
   const { theme, setTheme } = useTheme();
@@ -17,19 +17,21 @@ export function ThemeToggle() {
         const Icon = option.icon;
         const isActive = theme === option.value;
         return (
-          <button
+          <Button
             key={option.value}
             onClick={() => setTheme(option.value)}
             title={option.label}
+            variant="ghost"
+            size="icon"
             className={cn(
-              'p-1.5 rounded-md transition-colors',
+              'h-7 w-7',
               isActive
                 ? 'bg-background text-foreground shadow-sm'
                 : 'text-muted-foreground hover:text-foreground'
             )}
           >
             <Icon className="w-4 h-4" />
-          </button>
+          </Button>
         );
       })}
     </div>

packages/ui-vite/src/components/metadata-editors/TagsEditor.tsx

@@ -58,18 +58,20 @@ export function TagsEditor({ specName, value, onChange, disabled = false, classN
           <Badge
             key={tag}
             variant="outline"
-            className="text-xs pr-1 gap-1"
+            className="text-xs pr-0.5 gap-1 h-6"
           >
             {tag}
             {!disabled && (
-              <button
+              <Button
                 onClick={() => handleRemove(tag)}
                 disabled={updating}
-                className="ml-1 rounded-full hover:bg-muted p-0.5 transition-colors"
+                variant="ghost"
+                size="icon"
+                className="h-4 w-4 p-0 rounded-full hover:bg-muted ml-0.5"
                 aria-label={`Remove ${tag}`}
               >
                 <X className="h-3 w-3" />
-              </button>
+              </Button>
             )}
           </Badge>
         ))}

packages/ui-vite/src/components/projects/DirectoryPicker.tsx

@@ -98,26 +98,30 @@ export function DirectoryPicker({
           className="flex-1 overflow-x-auto whitespace-nowrap flex items-center scrollbar-hide px-1 min-w-0"
           title={currentPath}
         >
-          <button
+          <Button
             onClick={() => handleNavigate('/')}
-            className="hover:bg-accent p-1 rounded-sm transition-colors shrink-0"
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 shrink-0"
             title="Go to root"
           >
             <Home className="h-4 w-4 text-muted-foreground" />
-          </button>
+          </Button>
 
           {segments.map((segment, index) => (
             <div key={segment.path} className="flex items-center shrink-0">
               <ChevronRight className="h-3 w-3 text-muted-foreground mx-0.5 shrink-0" />
-              <button
+              <Button
                 onClick={() => handleNavigate(segment.path)}
+                variant="ghost"
+                size="sm"
                 className={cn(
-                  'px-1.5 py-0.5 rounded-sm transition-colors text-sm hover:bg-accent hover:text-accent-foreground',
+                  'h-7 text-sm',
                   index === segments.length - 1 ? 'font-medium text-foreground' : 'text-muted-foreground'
                 )}
               >
                 {segment.name}
-              </button>
+              </Button>
             </div>
           ))}
         </div>
@@ -144,14 +148,16 @@ export function DirectoryPicker({
                 <div className="p-4 text-center text-sm text-muted-foreground">Empty directory</div>
               ) : (
                 displayItems.map((item: DirectoryListResponse['items'][number]) => (
-                  <button
+                  <Button
                     key={item.path}
                     onClick={() => handleNavigate(item.path)}
-                    className="flex items-center gap-3 w-full px-3 py-2 text-sm rounded-sm hover:bg-accent hover:text-accent-foreground text-left group transition-colors"
+                    variant="ghost"
+                    size="sm"
+                    className="w-full justify-start gap-3 h-9 group"
                   >
                     <Folder className="h-4 w-4 text-blue-500 fill-blue-500/20 group-hover:fill-blue-500/30 transition-colors shrink-0" />
                     <span className="truncate">{item.name}</span>
-                  </button>
+                  </Button>
                 ))
               )}
             </div>

packages/ui-vite/src/components/spec-detail/SubSpecTabs.tsx

@@ -5,8 +5,7 @@ import type { Components } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import GithubSlugger from 'github-slugger';
 import { BookOpen, CheckSquare, Code, FileText, GitBranch, Map, Palette, TestTube, Wrench } from 'lucide-react';
-import { Card, Button, Separator } from '@leanspec/ui-components';
-import { cn } from '../../lib/utils';
+import { Card, Button, Separator, cn } from '@leanspec/ui-components';
 import { MermaidDiagram } from '../MermaidDiagram';
 
 export interface SubSpec {
@@ -94,19 +93,20 @@ export function SubSpecTabs({ mainContent, subSpecs = [] }: SubSpecTabsProps) {
   const overviewCardVisible = hasSubSpecs && subSpecs.length > 2 && activeTab === 'readme';
 
   const renderTabButton = (value: string, label: string, Icon?: React.ComponentType<{ className?: string }>, color?: string) => (
-    <button
+    <Button
       key={value}
       onClick={() => setActiveTab(value)}
+      variant="ghost"
       className={cn(
-        'flex items-center gap-2 px-4 py-2 text-sm border-b-2 -mb-px transition-colors rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
+        'border-b-2 -mb-px rounded-none gap-2',
         activeTab === value
           ? 'border-primary text-foreground'
           : 'border-transparent text-muted-foreground hover:text-foreground'
       )}
     >
       {Icon && <Icon className={cn('h-4 w-4', color)} />}
       <span className="truncate">{label}</span>
-    </button>
+    </Button>
   );
 
   return (

packages/ui-vite/src/components/spec-detail/TableOfContents.tsx

@@ -6,9 +6,9 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
+  cn,
 } from '@leanspec/ui-components';
 import { extractHeadings, type HeadingItem } from '../../lib/markdown-utils';
-import { cn } from '../../lib/utils';
 
 function scrollToHeading(id: string) {
   const element = document.getElementById(id);
@@ -30,20 +30,23 @@ function TOCList({ headings, onHeadingClick }: TOCListProps) {
   return (
     <nav className="space-y-1">
       {headings.map((heading) => (
-        <button
+        <Button
           key={`${heading.id}-${heading.level}`}
           onClick={() => onHeadingClick(heading.id)}
+          variant="ghost"
+          size="sm"
           className={cn(
-            'w-full text-left px-2 py-1.5 text-sm rounded-md hover:bg-muted transition-colors flex items-start gap-2 text-muted-foreground hover:text-foreground',
+            'w-full justify-start h-auto py-1.5',
             heading.level === 2 && 'font-medium text-foreground',
             heading.level === 3 && 'pl-6',
             heading.level === 4 && 'pl-10',
             heading.level === 5 && 'pl-14',
-            heading.level >= 6 && 'pl-16'
+            heading.level >= 6 && 'pl-16',
+            'text-muted-foreground hover:text-foreground'
           )}
         >
-          <span className="flex-1 truncate">{heading.text}</span>
-        </button>
+          <span className="flex-1 truncate text-left">{heading.text}</span>
+        </Button>
       ))}
     </nav>
   );

packages/ui-vite/src/components/specs/BoardView.tsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import { Clock, PlayCircle, CheckCircle2, Archive, MoreHorizontal } from 'lucide-react';
 import type { Spec } from '../../lib/api';
 import { PriorityBadge } from '../PriorityBadge';
-import { cn } from '../../lib/utils';
+import { cn, Button } from '@leanspec/ui-components';
 
 type SpecStatus = 'planned' | 'in-progress' | 'complete' | 'archived';
 
@@ -142,12 +142,14 @@ export function BoardView({ specs, onStatusChange, showArchived, onToggleArchive
                 </span>
               </div>
               {status === 'archived' && (
-                <button
+                <Button
                   onClick={onToggleArchived}
-                  className="text-muted-foreground hover:text-foreground"
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8 text-muted-foreground"
                 >
                   <MoreHorizontal className="w-4 h-4" />
-                </button>
+                </Button>
               )}
             </div>
 
@@ -202,16 +204,17 @@ export function BoardView({ specs, onStatusChange, showArchived, onToggleArchive
       })}
 
       {!showArchived && (
-        <button
+        <Button
           onClick={onToggleArchived}
-          className="flex-shrink-0 w-10 flex flex-col items-center py-4 gap-2 rounded-lg bg-secondary/30 hover:bg-secondary/50 transition-colors border border-transparent"
+          variant="ghost"
+          className="flex-shrink-0 w-10 flex-col items-center py-4 gap-2 rounded-lg h-auto"
           title="Show Archived"
         >
           <Archive className="w-4 h-4 text-muted-foreground" />
           <div className="writing-vertical-rl text-xs font-medium text-muted-foreground tracking-wider uppercase">
             Archived
           </div>
-        </button>
+        </Button>
       )}
     </div>
   );