feat: update frontend movement and pickers

Author: PythonSmall-Q

CHANGELOG.md

@@ -2,7 +2,6 @@
 
 All notable changes to TimeLens are documented here.
 Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
-
 ---
 
 ## [2.3.0] - 2026-08-28
@@ -20,6 +19,16 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 - **Update flow tests** — added coverage for update checking, download confirmation, download progress, install confirmation, and unavailable updater states.
 - **Scoped Local API credentials** — API credentials now have a nickname and independently configured data-access and operation permissions, with revocation and one-time secret reveal/copy behavior.
 - **Local API permission picker** — Settings now provides localized multi-select controls for the Local API's supported read, subscription, and write scopes.
+- **Animation & Motion Control Center** — Added user-selectable motion preset controls (`Full Animations`, `Reduced Motion`, `Disable All Animations`) in Settings.
+- **Granular Animation Controls List** — Added independent toggle options for 6 specific motion categories:
+  - Page & Tab Transitions
+  - Card Hover & Micro-interactions
+  - Modal & Dialog Animations
+  - Widget Window Motion
+  - Chart & Data Animations
+  - Pulse & Status Effects
+- **Multi-language Support (i18n)** — Added full translation strings for all animation modes and granular toggle items across English (`en`), Simplified Chinese (`zh-CN`), and Traditional Chinese (`zh-TW`).
+
 
 ### Changed
 
@@ -36,6 +45,11 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 - **Extension Bridge compatibility** — legacy extension bridge keys remain fully authorized for existing integrations but are no longer exposed in Settings.
 - **Settings presentation** — neutral texture options include an aurora gradient, and Settings surfaces use lighter, transparent grouping backgrounds so the active skin remains visible.
 - **Themed switches** — Settings toggles use the active palette's accent color, including the default blue palette, instead of native white controls.
+- **UI & UX Design Polish** — Refined card, button, and settings control designs with improved glassmorphism backdrop blur and top-border highlights (`inset 0 1px 0 rgba(255, 255, 255, 0.1)`).
+- **Smoother Apple-Style Easing** — Applied modern cubic-bezier easing (`cubic-bezier(0.16, 1, 0.3, 1)`) for micro-interactions and page entry transitions.
+- **High-Contrast Segmented Controls & Tab Buttons** — Replaced low-contrast white-on-light selection states with high-contrast `bg-accent-blue/15 text-accent-blue border border-accent-blue/30` styling across Widget Center, Browser Usage, Dashboard Insights, Quick Capture, and Timer widgets.
+- **Unified Hover Micro-Interactions** — Standardized hover states across sidebars, search buttons, settings items, and tab options to use consistent soft blue tinting (`bg-accent-blue/10 text-accent-blue`).
+- **Collapsible Widget Center Layout** — Compacted top "Layout Presets" and "Widget Health Center" cards into collapsible sections (collapsed by default) to maximize space for the main widget list.
 
 ### Fixed
 
@@ -50,21 +64,17 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 - **CodeQL Rust extraction** — changed the Rust CodeQL job to `manual` build mode and moved the Cargo build after CodeQL initialization.
 - **Cryptographic value detection** — changed Argon2 output-buffer initialization so CodeQL no longer reports the derived-key buffer as a hard-coded cryptographic value.
 - **Manual update notification** — fixed Settings > About so a manually detected update opens the same confirmation dialog used by automatic checks.
+- **kbd Shortcut Contrast** — Replaced dark purple keycap badge backgrounds in search inputs with high-contrast card borders (`bg-surface-card border border-surface-border text-text-secondary`) for clear visibility in both light and dark modes.
+- **Sidebar Hover CSS Specificity** — Removed CSS `!important` overrides that interfered with hover state specificity on navigation items.
+- **Settings Card Background Noise** — Removed dark container card background wrappers around motion controls, making animation options render seamlessly as standard SettingsRows.
+- **Removed Motion Bounce & Translate Y Shifts** — Eliminated unwanted button/card jump, scale, and translateY bouncing on click and setting toggle events.
 
 ### Security
 
 - **Managed local resources** — image imports enforce allowed extensions, file signatures, size limits, managed-directory boundaries, and traversal protection.
 - **Gateway request governance** — network, media, local API, and notification requests continue through permission checks, audit logging, timeouts, response limits, and normalized errors.
 - **Dependency audit** — `npm audit --audit-level=high` reports zero vulnerabilities for the v2.3.0 dependency tree.
 
-### Tests
-
-- Frontend tests: **71 passed**.
-- TypeScript typecheck: passed.
-- ESLint: 0 errors; 8 existing warnings remain.
-- Rust `cargo check`: passed.
-- Rust unit tests compile successfully, but execution is blocked on the current Windows environment by `0xc0000139 STATUS_ENTRYPOINT_NOT_FOUND` during test-process startup.
-- `git diff --check`: passed.
 
 ---
 

src/App.tsx

@@ -31,6 +31,15 @@ export default function App() {
   const [activePalette, setActivePalette] = useState(skinPalette);
   const reducedMotion = useSettingsStore((s) => s.reducedMotion);
   const compactWidgets = useSettingsStore((s) => s.compactWidgets);
+  const animationMode = useSettingsStore((s) => s.animationMode) || (reducedMotion ? "reduced" : "full");
+
+  const pageTransitions = useSettingsStore((s) => s.animationConfig?.pageTransitions ?? true);
+  const cardHover = useSettingsStore((s) => s.animationConfig?.cardHover ?? true);
+  const modalAnimations = useSettingsStore((s) => s.animationConfig?.modalAnimations ?? true);
+  const widgetAnimations = useSettingsStore((s) => s.animationConfig?.widgetAnimations ?? true);
+  const chartAnimations = useSettingsStore((s) => s.animationConfig?.chartAnimations ?? true);
+  const pulseEffects = useSettingsStore((s) => s.animationConfig?.pulseEffects ?? true);
+
   const [skin, setSkin] = useState({
     app: appBackgroundImage,
     widget: widgetBackgroundImage,
@@ -56,9 +65,22 @@ export default function App() {
 
   useEffect(() => {
     const root = document.documentElement;
-    root.classList.toggle("reduce-motion", reducedMotion);
+    const isReduced = animationMode === "reduced" || reducedMotion;
+    const isDisabled = animationMode === "disabled";
+
+    root.classList.toggle("reduce-motion", isReduced || isDisabled);
+    root.classList.toggle("animation-mode-disabled", isDisabled);
+    root.classList.toggle("animation-mode-reduced", animationMode === "reduced");
+    root.classList.toggle("animation-mode-full", animationMode === "full");
     root.classList.toggle("compact-widgets", compactWidgets);
-  }, [compactWidgets, reducedMotion]);
+
+    root.classList.toggle("no-page-transitions", isDisabled || !pageTransitions);
+    root.classList.toggle("no-card-hover", isDisabled || !cardHover);
+    root.classList.toggle("no-modal-animations", isDisabled || !modalAnimations);
+    root.classList.toggle("no-widget-animations", isDisabled || !widgetAnimations);
+    root.classList.toggle("no-chart-animations", isDisabled || !chartAnimations);
+    root.classList.toggle("no-pulse-effects", isDisabled || !pulseEffects);
+  }, [animationMode, cardHover, chartAnimations, compactWidgets, modalAnimations, pageTransitions, pulseEffects, reducedMotion, widgetAnimations]);
 
   useEffect(() => {
     const root = document.documentElement;

src/components/ExePickerInput.tsx

@@ -78,7 +78,7 @@ export default function ExePickerInput({
 
   return (
     <div ref={wrapRef} className={clsx("relative z-[100]", className)}>
-      <div className="flex gap-1">
+      <div className="flex gap-1.5">
         <input
           type="text"
           className="ui-field flex-1"
@@ -95,34 +95,34 @@ export default function ExePickerInput({
           onClick={browseFile}
           title={t("browseExecutable")}
           aria-label={t("browseExecutable")}
-          className="px-2.5 rounded-lg border border-surface-border text-text-muted hover:text-text-primary hover:bg-surface-hover transition-colors flex-shrink-0"
+          className="px-3 rounded-xl border border-surface-border text-text-muted hover:text-text-primary hover:bg-accent-blue/10 hover:border-accent-blue/40 transition-colors flex-shrink-0 flex items-center justify-center"
         >
           <FolderOpen size={15} />
         </button>
       </div>
 
       {open && query && filtered.length > 0 && (
-        <div className="absolute z-[110] left-0 right-0 mt-1 max-h-60 overflow-y-auto rounded-xl border border-surface-border bg-surface-card shadow-xl divide-y divide-surface-border">
+        <div className="absolute z-[110] left-0 right-0 mt-1.5 max-h-60 overflow-y-auto rounded-xl border border-surface-border/80 bg-surface-card/95 backdrop-blur-md shadow-2xl divide-y divide-surface-border/40">
           {filtered.slice(0, 25).map((row) => (
             <button
               key={row.exe_path}
               type="button"
               onMouseDown={() => pick(row)}
               className={clsx(
-                "w-full flex flex-col items-start px-3 py-2 text-xs hover:bg-surface-hover transition-colors text-left"
+                "w-full flex flex-col items-start px-3.5 py-2 text-xs hover:bg-surface-hover/80 active:bg-accent-blue/15 transition-colors text-left"
               )}
             >
               <span className="text-text-primary font-medium">{row.app_name}</span>
-              <span className="text-text-muted truncate max-w-full" title={row.exe_path}>
+              <span className="text-text-muted truncate max-w-full text-[11px]" title={row.exe_path}>
                 {row.exe_path}
               </span>
             </button>
           ))}
         </div>
       )}
       {open && query && filtered.length === 0 && (
-        <div className="absolute z-[110] left-0 right-0 mt-1 rounded-xl border border-surface-border bg-surface-card shadow-xl">
-          <p className="px-3 py-3 text-xs text-text-muted">{t("noAppsFoundBrowse")}</p>
+        <div className="absolute z-[110] left-0 right-0 mt-1.5 rounded-xl border border-surface-border/80 bg-surface-card/95 backdrop-blur-md shadow-2xl">
+          <p className="px-3.5 py-3 text-xs text-text-muted">{t("noAppsFoundBrowse")}</p>
         </div>
       )}
     </div>

src/components/GlobalSearch.tsx

@@ -224,10 +224,14 @@ export default function GlobalSearch({ open, onClose }: Props) {
       role="dialog"
       aria-modal="true"
       aria-label={t("common:search")}
-      className="fixed inset-0 z-50 flex items-start justify-center pt-20 bg-black/50 backdrop-blur-sm"
+      data-modal-overlay
+      className="fixed inset-0 z-50 flex items-start justify-center pt-20 bg-black/60 backdrop-blur-md transition-opacity duration-200"
       onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
     >
-      <div className="w-full max-w-xl rounded-2xl bg-surface-light shadow-2xl overflow-hidden border border-surface-border">
+      <div
+        data-modal-content
+        className="w-full max-w-xl rounded-2xl bg-surface-light shadow-2xl overflow-hidden border border-surface-border/80 transition-all duration-200 transform scale-100"
+      >
         {/* Input */}
         <div className="flex items-center gap-3 px-4 py-3 border-b border-surface-border bg-surface-light">
           <Search size={16} className="text-text-muted flex-shrink-0" />

src/components/layout/Sidebar.tsx

@@ -58,13 +58,13 @@ export default function Sidebar({ onOpenSearch }: Props) {
         <button
           onClick={onOpenSearch}
           className="w-full flex items-center gap-2 px-3 py-2 rounded-xl text-xs text-text-muted
-                     border border-surface-border hover:bg-surface-hover hover:text-text-secondary transition-colors"
+                     border border-surface-border hover:bg-accent-blue/10 hover:text-accent-blue transition-colors"
           title={t("common:openGlobalSearch")}
           aria-label={t("common:openGlobalSearch")}
         >
           <Search size={13} />
           <span className="flex-1 text-left">{t("common:search")}</span>
-          <kbd className="text-[10px] px-1 py-0.5 rounded bg-surface-hover">Ctrl K</kbd>
+          <kbd className="text-[10px] px-1.5 py-0.5 rounded bg-surface-card border border-surface-border text-text-secondary">Ctrl K</kbd>
         </button>
       </div>
 
@@ -79,7 +79,7 @@ export default function Sidebar({ onOpenSearch }: Props) {
                 "flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition-colors",
                 isActive
                   ? "bg-accent-blue/20 text-accent-blue font-medium"
-                  : "text-text-secondary hover:text-text-primary hover:bg-surface-hover"
+                  : "text-text-secondary hover:text-accent-blue hover:bg-accent-blue/10"
               )
             }
           >

src/i18n/locales/en/settings.json

@@ -5,6 +5,7 @@
   "searchNoResult": "No matching setting found",
   "generalDesc": "Language and region preferences",
   "appearanceDesc": "Theme and visual style",
+  "animationDesc": "Animation presets and fine-grained motion control",
   "accessibility": { "reducedMotion": "Reduce motion", "compactWidgets": "Compact widget display" },
   "trayIconDesc": "Tray or taskbar icon appearance",
   "trackingDesc": "Monitoring, sampling, and idle settings",
@@ -379,6 +380,28 @@
     "openEncryption": "Open Encryption",
     "refresh": "Refresh all panels"
   },
+  "animation": {
+    "title": "Animation & Motion Controls",
+    "description": "Configure visual motion, animation presets, and fine-grained interface controls",
+    "mode": "Motion Preset",
+    "modeFull": "Full Animations",
+    "modeReduced": "Reduced Motion",
+    "modeDisabled": "Disable All Animations",
+    "optionsTitle": "Animation Controls List",
+    "optionsDesc": "Selectively enable or disable specific interface animations",
+    "pageTransitions": "Page & Tab Transitions",
+    "pageTransitionsHint": "Smooth fading and sliding when switching pages or tabs",
+    "cardHover": "Card Hover & Micro-interactions",
+    "cardHoverHint": "Elevation, subtle scaling, and glow effects on cards",
+    "modalAnimations": "Modal & Dialog Animations",
+    "modalAnimationsHint": "Scale and backdrop blur transitions for dialog windows",
+    "widgetAnimations": "Widget Window Motion",
+    "widgetAnimationsHint": "Fade-in and focus state transitions for desktop widgets",
+    "chartAnimations": "Chart & Data Animations",
+    "chartAnimationsHint": "Animated bar and line transitions in analytics views",
+    "pulseEffects": "Pulse & Status Effects",
+    "pulseEffectsHint": "Pulsing indicator lights and live activity breathing badges"
+  },
   "about": {
     "title": "About",
     "version": "Version",

src/i18n/locales/zh-CN/settings.json

@@ -5,6 +5,7 @@
   "searchNoResult": "未找到匹配的设置项",
   "generalDesc": "语言与区域偏好",
   "appearanceDesc": "主题与视觉风格",
+  "animationDesc": "动画预设与界面动效细分控制",
   "accessibility": { "reducedMotion": "减少动画", "compactWidgets": "紧凑小组件显示" },
   "trayIconDesc": "托盘或任务栏图标外观",
   "trackingDesc": "监控、采样与空闲设置",
@@ -379,6 +380,28 @@
     "openProfiles": "打开配置",
     "openEncryption": "打开加密"
   },
+  "animation": {
+    "title": "动画与动效控制",
+    "description": "配置或关闭界面视觉动画与过渡效果",
+    "mode": "预设动效模式",
+    "modeFull": "完整动效",
+    "modeReduced": "减弱动效",
+    "modeDisabled": "关闭所有动画",
+    "optionsTitle": "动画细分关闭列表",
+    "optionsDesc": "允许自由选择并开启/关闭指定的界面动画效果",
+    "pageTransitions": "页面与标签过渡",
+    "pageTransitionsHint": "切换页面或标签卡时的平滑淡入与平移动画",
+    "cardHover": "卡片悬浮与微交互",
+    "cardHoverHint": "卡片 Hover 浮起、微缩放与边框光影反馈",
+    "modalAnimations": "对话框与弹窗动画",
+    "modalAnimationsHint": "弹窗打开与关闭时的绽放及背景模糊过渡",
+    "widgetAnimations": "桌面小组件过渡",
+    "widgetAnimationsHint": "小组件窗口淡入淡出及失焦透明度过渡",
+    "chartAnimations": "图表与数据渲染动画",
+    "chartAnimationsHint": "分析图表柱状与折线渲染时的动态过渡",
+    "pulseEffects": "呼吸灯与状态脉冲",
+    "pulseEffectsHint": "监控状态指示灯的呼吸脉冲与实时提示动效"
+  },
   "about": {
     "title": "关于",
     "version": "版本",

src/i18n/locales/zh-TW/settings.json

@@ -5,6 +5,7 @@
   "searchNoResult": "未找到匹配的設定項",
   "generalDesc": "語言與區域偏好",
   "appearanceDesc": "主題與視覺風格",
+  "animationDesc": "動畫預設與介面動效細分控制",
   "accessibility": { "reducedMotion": "減少動畫", "compactWidgets": "精簡小元件顯示" },
   "trayIconDesc": "托盤或工作列圖示外觀",
   "trackingDesc": "監控、取樣與閒置設定",
@@ -379,6 +380,28 @@
     "openProfiles": "開啟設定檔",
     "openEncryption": "開啟加密"
   },
+  "animation": {
+    "title": "動畫與動效控制",
+    "description": "設定或關閉介面視覺動畫與過渡效果",
+    "mode": "預設動效模式",
+    "modeFull": "完整動效",
+    "modeReduced": "減弱動效",
+    "modeDisabled": "關閉所有動畫",
+    "optionsTitle": "動畫細分關閉列表",
+    "optionsDesc": "允許自由選擇並開啟/關閉指定的介面動畫效果",
+    "pageTransitions": "頁面與標籤過渡",
+    "pageTransitionsHint": "切換頁面或標籤卡時的平滑淡入與平移動畫",
+    "cardHover": "卡片懸浮與微互動",
+    "cardHoverHint": "卡片 Hover 浮起、微縮放與邊框光影回饋",
+    "modalAnimations": "對話框與彈窗動畫",
+    "modalAnimationsHint": "彈窗開啟與關閉時的縮放及背景模糊過渡",
+    "widgetAnimations": "桌面小元件過渡",
+    "widgetAnimationsHint": "小元件視窗淡入淡出及失焦透明度過渡",
+    "chartAnimations": "圖表與資料呈現動畫",
+    "chartAnimationsHint": "分析圖表柱狀與折線呈現時的動態過渡",
+    "pulseEffects": "呼吸燈與狀態脈衝",
+    "pulseEffectsHint": "監控狀態指示燈的呼吸脈衝與實時提示動效"
+  },
   "about": {
     "title": "關於",
     "version": "版本",

src/pages/BrowserUsage/index.tsx

@@ -503,16 +503,16 @@ export default function BrowserUsage() {
           </a>
 
           {/* Date preset selector */}
-          <div className="flex gap-1.5 bg-surface-hover rounded-xl p-1">
+          <div className="flex gap-1.5 bg-surface-card border border-surface-border rounded-xl p-1 shadow-xs">
             {PRESETS.map((p) => (
               <button
                 key={p}
                 onClick={() => handlePresetChange(p)}
                 className={clsx(
-                  "px-3 py-1.5 rounded-lg text-xs font-medium transition-colors",
+                  "px-3 py-1.5 rounded-lg text-xs font-semibold transition-all duration-150",
                   preset === p
-                    ? "bg-accent-blue text-white shadow"
-                    : "text-text-secondary hover:text-text-primary"
+                    ? "bg-accent-blue/15 text-accent-blue border border-accent-blue/30 shadow-xs"
+                    : "text-text-secondary border border-transparent hover:text-accent-blue hover:bg-accent-blue/10"
                 )}
               >
                 {t(`browserUsage:${p}`)}