UI Migration: Component Refactor + Theme Separation + Skills Page

[chinayin]

UI Migration: Component Refactor + Theme Separation + Skills Page

1. BottomActions + icons.tsx

• Extract sidebar bottom buttons into <BottomActions> component (ThemeToggle, LangToggle, HelpLink, UserAvatarButton)
• Consolidate all inline SVGs into icons.tsx with Icon base class (default size/strokeWidth inheritance)
• Add HelpLink component and external-links.ts config
• ThemeToggle menu icons: emoji → SVG
• Sidebar width: 240 → 200px

2. Theme Separation

• Extract 70+ hardcoded brand colors from styles.css into CSS variables
• New files: theme-default.css (blue)
• Switch theme by changing one import in main.tsx
• Variable categories: --brand-tint-*, --accent-secondary-*, --btn-primary-*, --color-sidebar-*, shadows, focus rings

3. Tab Unification

• Merge 3 tab implementations (.tab-bar, .skills-tab-*, .auth-tab-*) into single .tab-bar / .tab-btn system
• Add .tab-bar--spread modifier for equal-width auth tabs
• Remove all legacy tab CSS

4. Settings Hint Styling

• Remove duplicate auto-launch hint text
• Unify .form-hint / .form-help / .form-help-sm to 13px, line-height 1.5
• Data directory label aligned with toggle section style

5. Skills Page Overhaul

• New SkillCard.tsx component (name, slug, version badge, description, labels, meta stats, actions)
• Install button: filled gradient → outline style with brand color border
• Installed state: disabled button → green ✓ badge
• Slug moved to separate line below name (fixes long name overlap)
• Description clamped to 3 lines
• Featured/Essential tab hidden, default to Market tab
• All colors use CSS variables for theme support
• Dark mode support for all skill card elements
• New i18n keys: tabEssential, emptyEssential, dblClickCopy, copied

6. Bug Fixes

• Global box-sizing: border-box applied to all elements (fixes input overflow)
• OnboardingPage bottom/skip buttons: absolute → fixed (fixes z-index occlusion)