@pheem49/mint 1.15.0 → 1.16.0

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

@@ -1,5 +1,11 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import WorkspacePreviewActions from '@shared/components/WorkspacePreviewActions'
+import WorkspacePaneResizer from '@shared/components/WorkspacePaneResizer'
+import { WorkspaceSnapshotReader } from '@shared/utils/workspaceSnapshot'
+import { detectArtifactType } from '@shared/components/ArtifactPreviewPanel'
 import { workspacePlatform } from '@shared/platform'
+import { announceWorkspaceChange, useWorkspaceUndo } from '@shared/workspaceUndo'
 import type { WorkspaceSnapshot, WorkspaceTreeEntry } from '@shared/types'
 import {
   materialFolderIcon,
@@ -10,6 +16,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,7 +39,14 @@ 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 }) {
+interface WorkspaceMenu {
+  entry: WorkspaceTreeEntry
+  x: number
+  y: number
+  trigger: HTMLButtonElement
+}
+
+function TreeNode({ entry, level, onContextMenu }: { entry: WorkspaceTreeEntry; level: number; onContextMenu: (event: React.MouseEvent<HTMLButtonElement>, entry: WorkspaceTreeEntry) => void; key?: string }) {
   const [open, setOpen] = useState(level < 1)
   const isDirectory = entry.kind === 'directory'
   const hasChildren = entry.children.length > 0
@@ -40,19 +55,6 @@ 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
@@ -60,7 +62,8 @@ function TreeNode({ entry, level, onSnapshot, workspacePath, revision }: { entry
         className={`workspace-tree-row ${isDirectory ? 'is-directory' : 'is-file'}`}
         style={{ paddingLeft: `${level * 16 + 8}px` }}
         onClick={() => isDirectory && hasChildren && setOpen((current) => !current)}
-        onContextMenu={handleContextMenu}
+        onContextMenu={(event) => onContextMenu(event, entry)}
+        aria-haspopup="menu"
         title={entry.path}
         draggable
         onDragStart={(event) => {
@@ -84,7 +87,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} entry={child} level={level + 1} onContextMenu={onContextMenu} />
           ))}
         </div>
       )}
@@ -92,35 +95,191 @@ function TreeNode({ entry, level, onSnapshot, workspacePath, revision }: { entry
   )
 }
 
-export default function WorkspacePanel({ agentMode, sending, workspacePath, onEnableAgentMode, onSetMessage, onWorkspaceReady, refreshRevision = 0 }: WorkspacePanelProps) {
+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 +311,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 +326,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 +363,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" />
@@ -212,14 +375,41 @@ export default function WorkspacePanel({ agentMode, sending, workspacePath, onEn
             </div>
             <div className="workspace-tree">
               {tree.children.map((entry) => (
-                <TreeNode key={entry.path} entry={entry} level={0} onSnapshot={applySnapshot} workspacePath={workspacePath} revision={revision} />
+                <TreeNode key={entry.path} entry={entry} level={0} onContextMenu={handleContextMenu} />
               ))}
             </div>
           </>
         ) : (
           <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

@@ -4,7 +4,7 @@
   overflow: hidden;
   color: #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 {

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

@@ -8,7 +8,7 @@
   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;
+  font-family: var(--font-ui, 'Inter', 'Noto Sans Thai', ui-sans-serif, system-ui, sans-serif);
 }
 
 .browser-suggestions-popup-item {

package/src/renderer/src/components/liveTranslateFrames.test.ts

@@ -1,23 +1,44 @@
 import { describe, expect, it } from 'vitest'
-import { hasMeaningfulFrameChange } from './liveTranslateFrames'
+import { createFrameChangeTracker } from './liveTranslateFrames'
 
 describe('live translation change detection', () => {
   const frame = () => new Uint8ClampedArray(160 * 90).fill(110)
 
   it('translates the first frame and skips identical frames', () => {
+    const changed = createFrameChangeTracker()
     const first = frame()
-    expect(hasMeaningfulFrameChange(null, first)).toBe(true)
-    expect(hasMeaningfulFrameChange(first, frame())).toBe(false)
+    expect(changed(first)).toBe(true)
+    expect(changed(frame())).toBe(false)
   })
 
   it('ignores a blinking caret but reacts to a changed line', () => {
+    const changed = createFrameChangeTracker()
     const first = frame()
+    expect(changed(first)).toBe(true)
     const caret = frame()
     caret.fill(220, 500, 508)
-    expect(hasMeaningfulFrameChange(first, caret)).toBe(false)
+    expect(changed(caret)).toBe(false)
 
     const changedLine = frame()
     changedLine.fill(220, 500, 530)
-    expect(hasMeaningfulFrameChange(first, changedLine)).toBe(true)
+    expect(changed(changedLine)).toBe(true)
+  })
+
+  it('ignores a moving game background while detecting a new subtitle', () => {
+    const changed = createFrameChangeTracker()
+    const first = frame()
+    expect(changed(first)).toBe(true)
+
+    const moving = frame()
+    moving.fill(180, 0, 4000)
+    expect(changed(moving)).toBe(true)
+
+    const movingAgain = frame()
+    expect(changed(movingAgain)).toBe(false)
+
+    const newSubtitle = frame()
+    newSubtitle.fill(220, 5000, 5080)
+    newSubtitle.fill(180, 0, 4000)
+    expect(changed(newSubtitle)).toBe(true)
   })
 })

package/src/renderer/src/components/liveTranslateFrames.ts

@@ -23,12 +23,23 @@ export async function sampleFrame(dataUri: string): Promise<Uint8ClampedArray> {
   return gray
 }
 
-/** Ignore compression noise and a blinking caret, but catch changed words or lines. */
-export function hasMeaningfulFrameChange(previous: Uint8ClampedArray | null, current: Uint8ClampedArray): boolean {
-  if (!previous || previous.length !== current.length) return true
-  let changed = 0
-  for (let pixel = 0; pixel < current.length; pixel += 1) {
-    if (Math.abs(current[pixel] - previous[pixel]) >= 28) changed += 1
+/** Ignore pixels that keep moving between captures, such as a game scene behind stable subtitles. */
+export function createFrameChangeTracker(): (current: Uint8ClampedArray) => boolean {
+  let previous: Uint8ClampedArray | null = null
+  let motion: Uint8Array | null = null
+  return (current) => {
+    if (!previous || previous.length !== current.length) {
+      previous = current
+      motion = new Uint8Array(current.length)
+      return true
+    }
+    let stableChanges = 0
+    for (let pixel = 0; pixel < current.length; pixel += 1) {
+      const changed = Math.abs(current[pixel] - previous[pixel]) >= 28
+      if (changed && motion![pixel] === 0) stableChanges += 1
+      motion![pixel] = changed ? Math.min(2, motion![pixel] + 1) : Math.max(0, motion![pixel] - 1)
+    }
+    previous = current
+    return stableChanges >= Math.max(20, Math.ceil(current.length * 0.0015))
   }
-  return changed >= Math.max(20, Math.ceil(current.length * 0.0015))
 }

package/src/renderer/src/components/liveTranslateLanguage.ts

@@ -0,0 +1,6 @@
+export const LANGUAGE_KEY = 'mint:live-translate-language'
+
+export const LANGUAGES = [
+  'Thai', 'English', 'Japanese', 'Chinese', 'Korean', 'Spanish', 'French',
+  'German', 'Portuguese', 'Vietnamese', 'Indonesian', 'Arabic', 'Hindi',
+]