@pheem49/mint 1.15.0 → 1.17.0

package/src/renderer/src/components/SpotlightWindow.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react'
 import '../css/spotlight.css'
 import { evaluateArithmetic } from '../calculator'
+import { applyTheme } from '../../shared/theme/themeManager'
 
 const COMMANDS = [
     { label: 'Open YouTube', desc: 'Open YouTube website', icon: '📺', action: { type: 'open_url', target: 'https://youtube.com' } },
@@ -98,31 +99,11 @@ export default function SpotlightWindow() {
   const [selectedIndex, setSelectedIndex] = useState(-1)
   const inputRef = useRef<HTMLInputElement>(null)
 
-  // Sync theme
+  // Sync theme via centralized themeManager
   useEffect(() => {
-    const applyThemeVariables = (config: any) => {
-      if (config.systemTextColor) {
-        document.documentElement.style.setProperty('--text-main', config.systemTextColor)
-      }
-      document.documentElement.setAttribute('data-theme', config.theme || 'dark')
-      if (config.theme === 'custom') {
-        if (config.customBgStart && config.customBgEnd) {
-          const gradient = `linear-gradient(135deg, ${config.customBgStart} 0%, ${config.customBgEnd} 100%)`
-          document.documentElement.style.setProperty('--bg-gradient', gradient)
-        }
-        if (config.customPanelBg) {
-          const rgb = hexToRgb(config.customPanelBg)
-          document.documentElement.style.setProperty('--panel-bg', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.75)`)
-        }
-      } else {
-        document.documentElement.style.removeProperty('--bg-gradient')
-        document.documentElement.style.removeProperty('--panel-bg')
-      }
-    }
-
     if (window.spotlightAPI) {
-      window.spotlightAPI.getSettings().then(applyThemeVariables)
-      window.spotlightAPI.onSettingsChanged(applyThemeVariables)
+      window.spotlightAPI.getSettings().then(applyTheme)
+      window.spotlightAPI.onSettingsChanged(applyTheme)
     }
 
     const handleFocus = () => {
@@ -135,15 +116,6 @@ export default function SpotlightWindow() {
     return () => window.removeEventListener('focus', handleFocus)
   }, [])
 
-  const hexToRgb = (hex: string) => {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
-    return result ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16)
-    } : { r: 15, g: 23, b: 42 }
-  }
-
   // Calculate matches when query text changes
   useEffect(() => {
     const trimmed = query.trim()

package/src/renderer/src/components/VeoStudioPanel.tsx

@@ -1,3 +1,3 @@
 // Re-export from the shared module — do NOT add logic here.
 // Edit src/renderer/shared/components/VeoStudioPanel.tsx instead.
-export { default } from '../../shared/components/VeoStudioPanel'
+export { default } from '../../shared/components/studio/VeoStudioPanel'

package/src/renderer/src/components/WorkspacePanel.tsx

@@ -1,5 +1,13 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import WorkspacePreviewActions from '@shared/components/workspace/WorkspacePreviewActions'
+import WorkspacePaneResizer from '@shared/components/workspace/WorkspacePaneResizer'
+import { WorkspaceSnapshotReader } from '@shared/utils/workspaceSnapshot'
+import { detectArtifactType } from '@shared/utils/artifacts'
 import { workspacePlatform } from '@shared/platform'
+import { announceWorkspaceChange, useWorkspaceUndo } from '@shared/workspaceUndo'
+import { normalizeWorkspacePath } from '@shared/utils/workspaces'
+import { WORKSPACE_FILE_MIME } from '@shared/utils/workspaceDrag'
 import type { WorkspaceSnapshot, WorkspaceTreeEntry } from '@shared/types'
 import {
   materialFolderIcon,
@@ -10,6 +18,8 @@ import {
 
 
 interface WorkspacePanelProps {
+  onOpenPreview?: (root: string, path: string) => Promise<void>
+  onOpenHtml?: (root: string, path: string, mode: 'external' | 'mint') => Promise<void>
   agentMode: boolean
   sending: boolean
   workspacePath: string
@@ -31,8 +41,24 @@ const FILE_LABEL: Record<string, string> = {
 }
 
 
-function TreeNode({ entry, level, onSnapshot, workspacePath, revision }: { entry: WorkspaceTreeEntry; level: number; onSnapshot: (snapshot: WorkspaceSnapshot) => void; workspacePath: string; revision: number; key?: string }) {
-  const [open, setOpen] = useState(level < 1)
+interface WorkspaceMenu {
+  entry: WorkspaceTreeEntry
+  x: number
+  y: number
+  trigger: HTMLButtonElement
+}
+
+interface TreeNodeProps {
+  workspacePath: string
+  entry: WorkspaceTreeEntry
+  level: number
+  expanded: Set<string>
+  onToggle: (path: string) => void
+  onContextMenu: (event: React.MouseEvent<HTMLButtonElement>, entry: WorkspaceTreeEntry) => void
+}
+
+function TreeNode({ workspacePath, entry, level, expanded, onToggle, onContextMenu }: TreeNodeProps) {
+  const open = expanded.has(entry.path)
   const isDirectory = entry.kind === 'directory'
   const hasChildren = entry.children.length > 0
   const fileExtension = extension(entry.name)
@@ -40,32 +66,22 @@ function TreeNode({ entry, level, onSnapshot, workspacePath, revision }: { entry
   const materialIcon = isDirectory ? materialFolderIcon(entry.name, open) : materialFileIcon(entry.name, fileExtension)
   const dragText = `@${entry.path}`
 
-  const handleContextMenu = async (event: React.MouseEvent) => {
-    event.preventDefault()
-    const confirmed = confirm(`Are you sure you want to delete "${entry.name}"?`)
-    if (!confirmed) return
-
-    try {
-      const snapshot = await workspacePlatform.deleteWorkspaceItem({ root: workspacePath, relativePath: entry.path, revision })
-      onSnapshot(snapshot)
-    } catch (err) {
-      alert(`Failed to delete item: ${err instanceof Error ? err.message : String(err)}`)
-    }
-  }
-
   return (
     <div className="workspace-tree-node">
       <button
         type="button"
         className={`workspace-tree-row ${isDirectory ? 'is-directory' : 'is-file'}`}
         style={{ paddingLeft: `${level * 16 + 8}px` }}
-        onClick={() => isDirectory && hasChildren && setOpen((current) => !current)}
-        onContextMenu={handleContextMenu}
+        onClick={() => isDirectory && hasChildren && onToggle(entry.path)}
+        onContextMenu={(event) => onContextMenu(event, entry)}
+        aria-haspopup="menu"
+        aria-expanded={isDirectory ? open : undefined}
         title={entry.path}
         draggable
         onDragStart={(event) => {
           event.dataTransfer.setData('application/x-mint-workspace-path', dragText)
           event.dataTransfer.setData('text/plain', dragText)
+          if (!isDirectory) event.dataTransfer.setData(WORKSPACE_FILE_MIME, JSON.stringify({ root: workspacePath, path: entry.path, kind: 'file' }))
           event.dataTransfer.effectAllowed = 'copy'
         }}
       >
@@ -84,7 +100,7 @@ function TreeNode({ entry, level, onSnapshot, workspacePath, revision }: { entry
       {isDirectory && open && hasChildren && (
         <div className="workspace-tree-children">
           {entry.children.map((child) => (
-            <TreeNode key={child.path} entry={child} level={level + 1} onSnapshot={onSnapshot} workspacePath={workspacePath} revision={revision} />
+            <TreeNode key={child.path} workspacePath={workspacePath} entry={child} level={level + 1} expanded={expanded} onToggle={onToggle} onContextMenu={onContextMenu} />
           ))}
         </div>
       )}
@@ -92,35 +108,215 @@ function TreeNode({ entry, level, onSnapshot, workspacePath, revision }: { entry
   )
 }
 
-export default function WorkspacePanel({ agentMode, sending, workspacePath, onEnableAgentMode, onSetMessage, onWorkspaceReady, refreshRevision = 0 }: WorkspacePanelProps) {
+function WorkspaceTree({ workspacePath, entries, onContextMenu }: {
+  workspacePath: string
+  entries: WorkspaceTreeEntry[]
+  onContextMenu: TreeNodeProps['onContextMenu']
+}) {
+  const storageKey = `mint:workspace-expanded-folders:${encodeURIComponent(workspacePath)}`
+  const [expanded, setExpanded] = useState<Set<string>>(() => {
+    try {
+      const saved: unknown = JSON.parse(window.localStorage.getItem(storageKey) || '[]')
+      return new Set(Array.isArray(saved) ? saved.filter((path): path is string => typeof path === 'string') : [])
+    } catch { return new Set() }
+  })
+  const toggle = (path: string) => {
+    const next = new Set(expanded)
+    if (next.has(path)) next.delete(path)
+    else next.add(path)
+    setExpanded(next)
+    try { window.localStorage.setItem(storageKey, JSON.stringify([...next])) } catch { /* Keep this view usable when storage is unavailable. */ }
+  }
+  return <div className="workspace-tree">
+    {entries.map(entry => <TreeNode key={entry.path} workspacePath={workspacePath} entry={entry} level={0} expanded={expanded} onToggle={toggle} onContextMenu={onContextMenu} />)}
+  </div>
+}
+
+export default function WorkspacePanel({ agentMode, sending, workspacePath, onEnableAgentMode, onSetMessage, onWorkspaceReady, refreshRevision = 0, onOpenHtml, onOpenPreview }: WorkspacePanelProps) {
   const [tree, setTree] = useState<WorkspaceTreeEntry | null>(null)
   const [revision, setRevision] = useState(0)
   const revisionRef = useRef(0)
-  const refreshInFlightRef = useRef(false)
+  const snapshotReaderRef = useRef<WorkspaceSnapshotReader | null>(null)
+  const mountedRef = useRef(false)
+  useEffect(() => {
+    mountedRef.current = true
+    const reader = new WorkspaceSnapshotReader(operation => workspacePlatform.getWorkspaceSnapshot(operation))
+    snapshotReaderRef.current = reader
+    return () => { mountedRef.current = false; reader.dispose(); snapshotReaderRef.current = null }
+  }, [])
   const [error, setError] = useState('')
+  const [menu, setMenu] = useState<WorkspaceMenu | null>(null)
+  const [editTarget, setEditTarget] = useState<{ entry: WorkspaceTreeEntry; mode: 'rename' | 'move'; value: string } | null>(null)
+  const [mutationPending, setMutationPending] = useState(false)
+  const menuRef = useRef<HTMLDivElement>(null)
+  const trashInFlightRef = useRef(false)
+  const workspacePathRef = useRef(workspacePath)
+  workspacePathRef.current = workspacePath
+
+  const closeMenu = useCallback(() => {
+    menu?.trigger.focus()
+    setMenu(null)
+  }, [menu])
+
+  useEffect(() => { setMenu(null); setEditTarget(null) }, [workspacePath])
+
+  useEffect(() => {
+    if (!menu) return
+    menuRef.current?.querySelector('button')?.focus()
+    const closeOnOutsidePointer = (event: PointerEvent) => {
+      if (!menuRef.current?.contains(event.target as Node)) setMenu(null)
+    }
+    const closeOnKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' || event.key === 'Tab') {
+        if (event.key === 'Escape') event.preventDefault()
+        closeMenu()
+      }
+    }
+    const dismiss = () => setMenu(null)
+    document.addEventListener('pointerdown', closeOnOutsidePointer)
+    document.addEventListener('keydown', closeOnKey)
+    window.addEventListener('resize', dismiss)
+    window.addEventListener('blur', dismiss)
+    document.addEventListener('scroll', dismiss, true)
+    return () => {
+      document.removeEventListener('pointerdown', closeOnOutsidePointer)
+      document.removeEventListener('keydown', closeOnKey)
+      window.removeEventListener('resize', dismiss)
+      window.removeEventListener('blur', dismiss)
+      document.removeEventListener('scroll', dismiss, true)
+    }
+  }, [menu, closeMenu])
+
+  const handleContextMenu = (event: React.MouseEvent<HTMLButtonElement>, entry: WorkspaceTreeEntry) => {
+    event.preventDefault()
+    event.stopPropagation()
+    if (trashInFlightRef.current) return
+    const bounds = event.currentTarget.getBoundingClientRect()
+    const type = detectArtifactType(entry.name)
+    const previewActions = entry.kind === 'file'
+      ? Number(!!onOpenPreview && type !== 'code') + Number(!!onOpenHtml && type === 'html')
+      : 0
+    const menuHeight = 132 + previewActions * 34
+    setMenu({
+      entry,
+      x: Math.max(8, Math.min(event.clientX || bounds.left, window.innerWidth - 200)),
+      y: Math.max(8, Math.min(event.clientY || bounds.bottom, window.innerHeight - menuHeight)),
+      trigger: event.currentTarget,
+    })
+  }
+
+  const handleMoveToTrash = async () => {
+    if (!menu || trashInFlightRef.current) return
+    const { entry } = menu
+    const root = workspacePath
+    trashInFlightRef.current = true
+    setMutationPending(true)
+    closeMenu()
+    try {
+      const { confirm } = await import('@tauri-apps/plugin-dialog')
+      const confirmed = await confirm(`Move "${entry.name}"${entry.kind === 'directory' ? ' and all its contents' : ''} to Trash? You can restore it from your system Trash.`, {
+        title: 'Move to Trash',
+        kind: 'warning',
+        okLabel: 'Move to Trash',
+        cancelLabel: 'Cancel',
+      })
+      if (!confirmed || workspacePathRef.current !== root) return
+      setError('')
+      const snapshot = await workspacePlatform.deleteWorkspaceItem({ root, relativePath: entry.path, revision: revisionRef.current })
+      if (workspacePathRef.current === root) {
+        applySnapshot(snapshot)
+      }
+      announceWorkspaceChange(snapshot)
+    } catch (reason) {
+      if (workspacePathRef.current === root) setError(reason instanceof Error ? reason.message : String(reason))
+    } finally {
+      trashInFlightRef.current = false
+      setMutationPending(false)
+    }
+  }
 
   const applySnapshot = useCallback((snapshot: WorkspaceSnapshot) => {
+    if (!mountedRef.current || workspacePathRef.current !== workspacePath) return
     setTree(snapshot.tree)
     revisionRef.current = snapshot.revision
     setRevision(snapshot.revision)
     if (snapshot.path !== workspacePath) onWorkspaceReady(snapshot.path)
   }, [onWorkspaceReady, workspacePath])
+  const history = useWorkspaceUndo(workspacePath, refreshRevision, applySnapshot)
+
+  const openHtml = async (mode: 'external' | 'mint') => {
+    if (!menu || !onOpenHtml || mutationPending) return
+    const { entry } = menu
+    const root = workspacePath
+    closeMenu()
+    setMutationPending(true)
+    setError('')
+    try { await onOpenHtml(root, entry.path, mode) }
+    catch (reason) { if (workspacePathRef.current === root) setError(reason instanceof Error ? reason.message : String(reason)) }
+    finally { setMutationPending(false) }
+  }
+
+  const openPreview = async () => {
+    if (!menu || !onOpenPreview || mutationPending) return
+    const { entry } = menu
+    const root = workspacePath
+    closeMenu()
+    setMutationPending(true)
+    setError('')
+    try { await onOpenPreview(root, entry.path) }
+    catch (reason) { if (workspacePathRef.current === root) setError(reason instanceof Error ? reason.message : String(reason)) }
+    finally { setMutationPending(false) }
+  }
+
+  const openMoveDialog = (mode: 'rename' | 'move') => {
+    if (!menu || mutationPending) return
+    const { entry } = menu
+    setEditTarget({ entry, mode, value: mode === 'rename' ? entry.name : entry.path })
+    setError('')
+    closeMenu()
+  }
+
+  const handleMove = async (event: React.FormEvent) => {
+    event.preventDefault()
+    if (!editTarget || trashInFlightRef.current) return
+    const { entry, mode, value } = editTarget
+    const root = workspacePath
+    const name = value.trim()
+    if (!name || (mode === 'rename' && /[\\/]/.test(name))) {
+      setError('Enter a valid name without path separators.'); return
+    }
+    const parent = entry.path.split('/').slice(0, -1).join('/')
+    const destination = mode === 'rename' ? [parent, name].filter(Boolean).join('/') : name
+    if (destination === entry.path) { setEditTarget(null); return }
+    trashInFlightRef.current = true
+    setMutationPending(true)
+    try {
+      const snapshot = await workspacePlatform.moveWorkspaceItem({ root, relativePath: entry.path, revision: revisionRef.current }, destination)
+      if (workspacePathRef.current === root) {
+        applySnapshot(snapshot)
+        setEditTarget(null)
+        setError('')
+      }
+      announceWorkspaceChange(snapshot)
+    } catch (reason) {
+      if (workspacePathRef.current === root) setError(reason instanceof Error ? reason.message : String(reason))
+    } finally {
+      trashInFlightRef.current = false
+      setMutationPending(false)
+    }
+  }
   const refresh = useCallback(async () => {
     if (!workspacePath.trim()) {
       setError('')
       setTree(null)
       return
     }
-    if (refreshInFlightRef.current) return
-
-    refreshInFlightRef.current = true
     try {
       setError('')
-      applySnapshot(await workspacePlatform.getWorkspaceSnapshot({ root: workspacePath, relativePath: '', revision: revisionRef.current }))
+      const snapshot = await snapshotReaderRef.current?.refresh({ root: workspacePath, relativePath: '', revision: revisionRef.current })
+      if (snapshot) applySnapshot(snapshot)
     } catch (reason) {
-      setError(reason instanceof Error ? reason.message : String(reason))
-    } finally {
-      refreshInFlightRef.current = false
+      if (mountedRef.current && workspacePathRef.current === workspacePath) setError(reason instanceof Error ? reason.message : String(reason))
     }
   }, [applySnapshot, workspacePath])
 
@@ -152,7 +348,9 @@ export default function WorkspacePanel({ agentMode, sending, workspacePath, onEn
 
     try {
       setError('')
-      applySnapshot(await workspacePlatform.createWorkspaceFile({ root: workspacePath, relativePath: name.trim(), revision }))
+      const snapshot = await workspacePlatform.createWorkspaceFile({ root: workspacePath, relativePath: name.trim(), revision })
+      applySnapshot(snapshot)
+      announceWorkspaceChange(snapshot)
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err))
     }
@@ -165,14 +363,17 @@ export default function WorkspacePanel({ agentMode, sending, workspacePath, onEn
 
     try {
       setError('')
-      applySnapshot(await workspacePlatform.createWorkspaceFolder({ root: workspacePath, relativePath: name.trim(), revision }))
+      const snapshot = await workspacePlatform.createWorkspaceFolder({ root: workspacePath, relativePath: name.trim(), revision })
+      applySnapshot(snapshot)
+      announceWorkspaceChange(snapshot)
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err))
     }
   }
 
   return (
-    <section className="workspace-panel">
+    <section className="workspace-panel" id="workspace-file-panel">
+      <WorkspacePaneResizer />
       <header className="workspace-panel-header">
         <div className="workspace-title-group">
           <span className="workspace-title-icon material-icon folder" aria-hidden="true">
@@ -199,9 +400,8 @@ export default function WorkspacePanel({ agentMode, sending, workspacePath, onEn
       </header>
 
       <div className="workspace-tree-shell">
-        {error ? (
-          <div className="workspace-tree-empty">{error}</div>
-        ) : tree ? (
+        {(error || history.error) && <div className="workspace-history-error" role="alert">{error || history.error}</div>}
+        {tree ? (
           <>
             <div className="workspace-root-row">
               <span className="workspace-tree-chevron" data-open="true" aria-hidden="true" />
@@ -210,16 +410,39 @@ export default function WorkspacePanel({ agentMode, sending, workspacePath, onEn
               </span>
               <span>{tree.name}</span>
             </div>
-            <div className="workspace-tree">
-              {tree.children.map((entry) => (
-                <TreeNode key={entry.path} entry={entry} level={0} onSnapshot={applySnapshot} workspacePath={workspacePath} revision={revision} />
-              ))}
-            </div>
+            <WorkspaceTree key={normalizeWorkspacePath(workspacePath)} workspacePath={normalizeWorkspacePath(workspacePath)} entries={tree.children} onContextMenu={handleContextMenu} />
           </>
         ) : (
           <div className="workspace-tree-empty">Select a project to show workspace files.</div>
         )}
+
       </div>
+      {menu && createPortal(
+        <div ref={menuRef} className="workspace-file-menu" role="menu" aria-label={`Actions for ${menu.entry.name}`} style={{ left: menu.x, top: menu.y }} onContextMenu={(event) => event.preventDefault()}>
+          <WorkspacePreviewActions
+            entry={menu.entry}
+            pending={mutationPending}
+            onOpenHtml={onOpenHtml ? () => { void openHtml('external') } : undefined}
+            onPreview={onOpenPreview ? () => { void openPreview() } : undefined}
+          />
+          <button type="button" role="menuitem" onClick={() => openMoveDialog('rename')}>Rename…</button>
+          <button type="button" role="menuitem" onClick={() => openMoveDialog('move')}>Move…</button>
+          <button type="button" role="menuitem" className="is-danger" onClick={handleMoveToTrash}>Move to Trash</button>
+        </div>,
+        document.body,
+      )}
+      {editTarget && createPortal(
+        <div className="workspace-file-dialog-backdrop" onMouseDown={(event) => { if (event.target === event.currentTarget && !mutationPending) setEditTarget(null) }}>
+          <form className="workspace-file-dialog" role="dialog" aria-modal="true" aria-labelledby="workspace-file-dialog-title" onSubmit={handleMove} onKeyDown={(event) => { if (event.key === 'Escape' && !mutationPending) setEditTarget(null) }}>
+            <h3 id="workspace-file-dialog-title">{editTarget.mode === 'rename' ? 'Rename' : 'Move'} {editTarget.entry.name}</h3>
+            <label>{editTarget.mode === 'rename' ? 'New name' : 'Destination path relative to workspace'}
+              <input autoFocus value={editTarget.value} disabled={mutationPending} onChange={(event) => setEditTarget({ ...editTarget, value: event.target.value })} />
+            </label>
+            {error && <p role="alert">{error}</p>}
+            <div><button type="button" disabled={mutationPending} onClick={() => setEditTarget(null)}>Cancel</button><button type="submit" disabled={mutationPending}>{mutationPending ? 'Saving…' : editTarget.mode === 'rename' ? 'Rename' : 'Move'}</button></div>
+          </form>
+        </div>, document.body,
+      )}
     </section>
   )
 }

package/src/renderer/src/components/browser-shell.css

@@ -2,9 +2,9 @@
   width: 100vw;
   height: 100%;
   overflow: hidden;
-  color: #e5e7eb;
+  color: var(--text-primary, #e5e7eb);
   background: transparent;
-  font-family: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-family: var(--font-ui, 'Inter', 'Noto Sans Thai', ui-sans-serif, system-ui, sans-serif);
 }
 
 .mint-browser-tabs {
@@ -13,8 +13,8 @@
   gap: 6px;
   height: 42px;
   padding: 7px 14px 0;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-  background: #151619;
+  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
+  background: var(--bg-canvas, #151619);
 }
 
 .mint-browser-tab {
@@ -24,16 +24,16 @@
   width: min(250px, 42vw);
   height: 35px;
   padding: 0 9px 0 12px;
-  border: 1px solid rgba(255, 255, 255, 0.11);
-  border-bottom-color: #25272c;
+  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.11));
+  border-bottom-color: var(--bg-surface-raised, #25272c);
   border-radius: 9px 9px 0 0;
-  color: #f3f4f6;
-  background: #24262a;
+  color: var(--text-primary, #f3f4f6);
+  background: var(--bg-surface-raised, #24262a);
   font-size: 0.78rem;
 }
 
 .mint-browser-tab-icon {
-  color: #34d399;
+  color: var(--interactive-fg, #34d399);
   font-size: 0.58rem;
 }
 
@@ -51,7 +51,7 @@
   align-items: center;
   justify-content: center;
   border: 0;
-  color: #9ca3af;
+  color: var(--text-muted, #9ca3af);
   background: transparent;
 }
 
@@ -64,8 +64,8 @@
 
 .mint-browser-tab-close:hover,
 .mint-browser-new-tab:hover {
-  color: #f9fafb;
-  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary, #f9fafb);
+  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.1));
 }
 
 .mint-browser-new-tab {
@@ -83,8 +83,8 @@
   width: 100%;
   height: 50px;
   padding: 7px 14px 8px;
-  background: #1b1c20;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  background: var(--bg-surface, #1b1c20);
+  border-bottom: 1px solid var(--border-default, rgba(255, 255, 255, 0.12));
 }
 
 .mint-browser-nav-group {
@@ -103,14 +103,14 @@
   flex: 0 0 auto;
   border: 0;
   border-radius: 6px;
-  color: #a7adb8;
+  color: var(--text-secondary, #a7adb8);
   background: transparent;
   font-size: 1.15rem;
 }
 
 .mint-browser-nav-button:hover {
-  color: #f1f5f9;
-  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-primary, #f1f5f9);
+  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.08));
 }
 
 .mint-browser-address-input {
@@ -121,10 +121,10 @@
   height: 34px;
   gap: 8px;
   padding-left: 11px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
+  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.14));
   border-radius: 9px;
-  color: #9ca3af;
-  background: #24262b;
+  color: var(--text-muted, #9ca3af);
+  background: var(--bg-input, #24262b);
 }
 
 .mint-browser-address-wrap {
@@ -138,12 +138,12 @@
 }
 
 .mint-browser-address-input:focus-within {
-  border-color: rgba(52, 211, 153, 0.65);
-  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.12);
+  border-color: var(--accent-border, rgba(52, 211, 153, 0.65));
+  box-shadow: 0 0 0 2px var(--accent-glow, rgba(52, 211, 153, 0.12));
 }
 
 .mint-browser-address-icon {
-  color: #9ca3af;
+  color: var(--text-muted, #9ca3af);
   font-size: 0.95rem;
 }
 
@@ -152,7 +152,7 @@
   flex: 1;
   border: 0;
   outline: 0;
-  color: #f1f5f9;
+  color: var(--text-primary, #f1f5f9);
   background: transparent;
   font: 0.8rem ui-monospace, SFMono-Regular, Menlo, monospace;
 }
@@ -164,14 +164,14 @@
   width: 38px;
   height: 100%;
   border: 0;
-  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  border-left: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
   border-radius: 0 8px 8px 0;
-  color: #34d399;
+  color: var(--interactive-fg, #34d399);
   background: transparent;
 }
 
 .mint-browser-address-input > button:hover {
-  background: rgba(52, 211, 153, 0.12);
+  background: var(--accent-subtle, rgba(52, 211, 153, 0.12));
 }
 
 .mint-browser-address-input svg {

package/src/renderer/src/components/browser-suggestions-popup.css

@@ -3,12 +3,12 @@
   min-height: 52px;
   overflow: hidden;
   padding: 5px 0;
-  border: 1px solid rgba(255, 255, 255, 0.16);
+  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.16));
   border-radius: 10px;
-  color: #f3f4f6;
-  background: #2a2b30;
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42);
-  font-family: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  color: var(--text-primary, #f3f4f6);
+  background: var(--bg-overlay, #2a2b30);
+  box-shadow: var(--shadow-lg, 0 12px 30px rgba(0, 0, 0, 0.42));
+  font-family: var(--font-ui, 'Inter', 'Noto Sans Thai', ui-sans-serif, system-ui, sans-serif);
 }
 
 .browser-suggestions-popup-item {
@@ -20,7 +20,7 @@
   min-height: 38px;
   padding: 7px 12px;
   border: 0;
-  color: #f3f4f6;
+  color: var(--text-primary, #f3f4f6);
   background: transparent;
   text-align: left;
   font: inherit;
@@ -30,11 +30,11 @@
 .browser-suggestions-popup-item:hover,
 .browser-suggestions-popup-item:focus-visible {
   outline: 0;
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.1));
 }
 
 .browser-suggestions-popup-icon {
-  color: #aeb4bf;
+  color: var(--text-muted, #aeb4bf);
   font-size: 1rem;
   text-align: center;
 }
@@ -48,7 +48,7 @@
 .browser-suggestions-popup-detail {
   overflow: hidden;
   max-width: 170px;
-  color: #aeb4bf;
+  color: var(--text-muted, #aeb4bf);
   font-size: 0.7rem;
   text-overflow: ellipsis;
   white-space: nowrap;