feat: enhance UI components and theming support

- Updated CSS to include base styles and improved theme variables for better customization.
- Enhanced AppShell and Sidebar components with new state management for reduced transparency and OS detection.
- Refined NavItem and Button components for improved accessibility and visual feedback.
- Updated various UI components (e.g., Badge, Card, Dialog) with consistent styling and responsive design.
- Integrated new props and state handling in Switch and Tabs components for better user interaction.
- Improved Toaster component with dynamic theming based on HTML class changes.

Author: knqiufan

docs/ui-design-report.md

@@ -2,16 +2,26 @@ use anyhow::{Context, Result};
 use serde::{Deserialize, Serialize};
 use std::path::PathBuf;
 
+pub fn default_ui_font_size() -> u8 {
+    14
+}
+
 /// Application configuration, persisted to ~/.misakax/config.yaml
 #[derive(Debug, Clone, Serialize, Deserialize)]
 #[serde(default)]
 pub struct AppConfig {
     /// UI language (en, zh_CN)
     pub language: String,
-    /// Theme: "light", "dark", "system"
+    /// Theme: "light", "dark", "dim", "system"
     pub theme: String,
     /// Accent color (hex)
     pub accent_color: String,
+    /// Reduce translucent surfaces and backdrop blur for readability
+    #[serde(default)]
+    pub reduced_transparency: bool,
+    /// Base UI font size in pixels (e.g. 14)
+    #[serde(default = "default_ui_font_size")]
+    pub ui_font_size: u8,
     /// Default LLM model
     pub default_model: String,
     /// Log level
@@ -28,6 +38,8 @@ impl Default for AppConfig {
             language: "en".to_string(),
             theme: "system".to_string(),
             accent_color: "#6366f1".to_string(),
+            reduced_transparency: false,
+            ui_font_size: 14,
             default_model: "claude-sonnet-4-20250514".to_string(),
             log_level: "info".to_string(),
             sidecar_port: 9527,

src-tauri/src/config.rs

@@ -23,6 +23,8 @@ const mockConfig = {
   language: "en",
   theme: "system" as const,
   accent_color: "#6366f1",
+  reduced_transparency: false,
+  ui_font_size: 14,
   default_model: "claude-sonnet-4-20250514",
   log_level: "info",
   sidecar_port: 9527,

src/__tests__/settings-store.test.ts

@@ -1,26 +1,36 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Sidebar } from "./Sidebar";
 import { TopBar } from "./TopBar";
 import { ContentArea } from "./ContentArea";
 import { useAppStore } from "@/stores";
 import { useThemeStore } from "@/stores/theme-store";
+import { settingsIpc } from "@/lib/ipc";
+import { cn } from "@/lib/utils";
 
-const TABLET_BREAKPOINT = 1280;
+const NARROW_BREAKPOINT = 960;
 
 export function AppShell() {
   const setSidebarCollapsed = useAppStore((s) => s.setSidebarCollapsed);
-  const initialize = useThemeStore((s) => s.initialize);
-  const cleanup = useThemeStore((s) => s.cleanup);
+  const initializeTheme = useThemeStore((s) => s.initialize);
+  const cleanupTheme = useThemeStore((s) => s.cleanup);
+  const reducedTransparency = useThemeStore((s) => s.reducedTransparency);
+  const [isWindows, setIsWindows] = useState(false);
 
   useEffect(() => {
-    initialize();
-    return cleanup;
-  }, [initialize, cleanup]);
+    initializeTheme();
+    return cleanupTheme;
+  }, [initializeTheme, cleanupTheme]);
+
+  useEffect(() => {
+    void settingsIpc.getSystemInfo().then((info) => {
+      setIsWindows(info.os.toLowerCase() === "windows");
+    });
+  }, []);
 
   useEffect(() => {
     const handleResize = () => {
-      if (window.innerWidth < TABLET_BREAKPOINT) {
+      if (window.innerWidth < NARROW_BREAKPOINT) {
         setSidebarCollapsed(true);
       }
     };
@@ -32,11 +42,17 @@ export function AppShell() {
 
   return (
     <TooltipProvider delayDuration={300}>
-      <div className="flex h-screen w-screen overflow-hidden bg-background">
+      <div
+        className={cn(
+          "misaka-app flex h-screen w-screen overflow-hidden bg-background",
+          reducedTransparency && "reduced-transparency",
+          isWindows && "is-windows"
+        )}
+      >
         <Sidebar />
-        <div className="flex flex-1 flex-col overflow-hidden">
+        <div className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
           <TopBar />
-          <main className="flex-1 overflow-auto">
+          <main className="min-h-0 flex-1 overflow-auto bg-[color:var(--surface-messages)]">
             <ContentArea />
           </main>
         </div>

src/components/layout/AppShell.tsx

@@ -0,0 +1,39 @@
+import type { LucideIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface EmptyStateProps {
+  icon: LucideIcon;
+  title: string;
+  description?: string;
+  className?: string;
+}
+
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  className,
+}: EmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        "flex h-full min-h-[min(420px,70vh)] flex-col items-center justify-center gap-4 px-8 py-12 text-center",
+        className
+      )}
+    >
+      <div className="flex size-16 items-center justify-center rounded-[var(--radius-ui-xl)] border border-[color:var(--border-subtle)] bg-[color:var(--surface-card)] shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]">
+        <Icon className="size-8 text-muted-foreground/60" strokeWidth={1.15} />
+      </div>
+      <div className="max-w-md space-y-2">
+        <h2 className="text-[1rem] font-semibold tracking-tight text-foreground">
+          {title}
+        </h2>
+        {description ? (
+          <p className="text-[0.8125rem] leading-relaxed text-muted-foreground">
+            {description}
+          </p>
+        ) : null}
+      </div>
+    </div>
+  );
+}

src/components/layout/EmptyState.tsx

@@ -24,20 +24,24 @@ export function NavItem({ icon: Icon, label, route, badge }: NavItemProps) {
 
   const button = (
     <button
+      type="button"
       onClick={() => navigate(route)}
       aria-current={isActive ? "page" : undefined}
       className={cn(
-        "relative flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150 ease-out",
+        "relative flex w-full items-center gap-3 px-3 py-2 text-[0.8125rem] font-semibold leading-snug outline-none transition-[color,background-color,box-shadow,transform] duration-[var(--ds-dur-fast)] [transition-timing-function:var(--ds-ease-out)] focus-visible:ring-2 focus-visible:ring-[color:var(--border-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent active:scale-[var(--ds-active-scale-sm)]",
+        "rounded-[var(--radius-button)] border border-transparent",
         collapsed && "justify-center px-0",
         isActive
-          ? "bg-primary/10 text-primary"
-          : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+          ? "border-[color:var(--border-accent-soft)] bg-[color:var(--surface-active)] text-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]"
+          : "text-muted-foreground hover:bg-[color:var(--surface-hover)] hover:text-foreground"
       )}
     >
-      {isActive && (
-        <span className="absolute left-0 top-1/2 h-5 w-[3px] -translate-y-1/2 rounded-r-full bg-primary" />
-      )}
-      <Icon className="h-5 w-5 shrink-0" />
+      <Icon
+        className={cn(
+          "h-5 w-5 shrink-0",
+          isActive && "text-[color:var(--text-accent-soft)]"
+        )}
+      />
       {!collapsed && <span className="truncate">{label}</span>}
       {badge !== undefined && badge > 0 && (
         <BadgeIndicator count={badge} collapsed={collapsed} />
@@ -73,7 +77,7 @@ function BadgeIndicator({
   }
 
   return (
-    <span className="ml-auto flex h-5 min-w-5 items-center justify-center rounded-full bg-destructive px-1.5 text-[10px] font-semibold text-destructive-foreground">
+    <span className="bg-destructive text-destructive-foreground ml-auto flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-meta">
       {count > 99 ? "99+" : count}
     </span>
   );

src/components/layout/NavItem.tsx

@@ -13,13 +13,15 @@ export function Sidebar() {
   return (
     <aside
       className={cn(
-        "flex flex-col border-r border-border bg-sidebar transition-all duration-300 ease-out",
-        collapsed ? "w-14" : "w-60"
+        "relative flex min-h-0 shrink-0 flex-col border-r border-sidebar-border",
+        "border-[color:var(--border-muted)] bg-sidebar",
+        "backdrop-blur-xl backdrop-saturate-150 [transition:width_var(--ds-dur-slow)_var(--ds-ease-out)]",
+        collapsed ? "w-14" : "w-[280px]"
       )}
     >
       <SidebarHeader />
 
-      <nav className="flex-1 space-y-1 px-2 py-2">
+      <nav className="min-h-0 flex-1 space-y-1 overflow-y-auto px-2 py-2">
         <NavItem icon={MessageSquare} label={t("chat")} route={{ page: "chat" }} />
         <NavItem icon={Sparkles} label={t("skills")} route={{ page: "skills" }} />
         <NavItem icon={BookOpen} label={t("knowledge")} route={{ page: "knowledge" }} />

src/components/layout/Sidebar.tsx

@@ -18,9 +18,10 @@ export function SidebarFooter() {
 
   const collapseButton = (
     <button
+      type="button"
       onClick={toggleSidebar}
       className={cn(
-        "flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors duration-150 ease-out hover:bg-accent hover:text-accent-foreground",
+        "flex w-full items-center gap-3 rounded-[var(--radius-button)] px-3 py-2 text-sm font-medium text-muted-foreground transition-[background,color] duration-[var(--ds-dur-fast)] ease-out hover:bg-[color:var(--surface-hover)] hover:text-foreground",
         collapsed && "justify-center px-0"
       )}
     >

src/components/layout/SidebarFooter.tsx

@@ -6,11 +6,15 @@ export function SidebarHeader() {
   const collapsed = useAppStore((s) => s.sidebarCollapsed);
 
   return (
-    <div className="flex h-12 items-center gap-2 border-b border-border px-3">
-      <Sparkles className="h-6 w-6 shrink-0 text-primary" />
+    <div
+      className={cn(
+        "flex h-12 shrink-0 items-center gap-2 border-b border-[color:var(--border-muted)] px-3"
+      )}
+    >
+      <Sparkles className="h-6 w-6 shrink-0 text-[color:var(--text-accent-soft)]" />
       <span
         className={cn(
-          "text-base font-bold text-foreground transition-opacity duration-200",
+          "text-sidebar-heading text-foreground transition-opacity duration-[var(--ds-dur-normal)] ease-out",
           collapsed ? "w-0 opacity-0" : "opacity-100"
         )}
       >

src/components/layout/SidebarHeader.tsx

@@ -17,10 +17,8 @@ export function TopBar() {
   const titleKey = PAGE_TITLES[route.page] || "nav:chat";
 
   return (
-    <header className="sticky top-0 z-10 flex h-12 items-center border-b border-border bg-background/80 px-6 backdrop-blur-md">
-      <h1 className="text-sm font-semibold text-foreground">
-        {t(titleKey)}
-      </h1>
+    <header className="sticky top-0 z-[3] flex h-12 shrink-0 items-center border-b border-border px-6 bg-[color:var(--surface-topbar)] backdrop-blur-xl backdrop-saturate-150">
+      <h1 className="text-settings-section-title text-foreground">{t(titleKey)}</h1>
       <div className="flex-1" />
     </header>
   );