@pheem49/mint 1.14.0 → 1.15.0

package/src/renderer/src-web/App.tsx

@@ -2,6 +2,7 @@ import React, { Suspense, useEffect, useState } from 'react'
 import AuthGate from '../shared/components/AuthGate'
 import ChunkErrorBoundary from '../shared/components/ChunkErrorBoundary'
 import ModalErrorBoundary from '../shared/components/ModalErrorBoundary'
+import PullToRefresh from './components/PullToRefresh'
 import { lazyWithRetry } from '../shared/utils/lazyWithRetry'
 
 const SettingsWindow = lazyWithRetry(() => import('./components/SettingsWindow'))
@@ -32,6 +33,44 @@ export default function App() {
     }
   }, [])
 
+  useEffect(() => {
+    const viewport = window.visualViewport
+    let fullHeight = viewport?.height ?? window.innerHeight
+    let focusTimer: ReturnType<typeof setTimeout> | undefined
+    const updateHeight = () => {
+      const height = viewport?.height ?? window.innerHeight
+      if (height > 0) {
+        const focused = document.activeElement?.matches('input, textarea, [contenteditable="true"]') ?? false
+        if (!focused) fullHeight = Math.max(fullHeight, height)
+        document.documentElement.style.setProperty('--mint-viewport-height', `${height}px`)
+        document.documentElement.style.setProperty('--mint-viewport-top', `${viewport?.offsetTop ?? 0}px`)
+        document.documentElement.classList.toggle('mint-keyboard-open', focused && fullHeight - height > 100)
+      }
+    }
+    const updateAfterFocus = () => {
+      updateHeight()
+      if (focusTimer) clearTimeout(focusTimer)
+      focusTimer = setTimeout(updateHeight, 250)
+    }
+    updateHeight()
+    viewport?.addEventListener('resize', updateHeight)
+    viewport?.addEventListener('scroll', updateHeight)
+    window.addEventListener('resize', updateHeight)
+    document.addEventListener('focusin', updateAfterFocus)
+    document.addEventListener('focusout', updateAfterFocus)
+    return () => {
+      viewport?.removeEventListener('resize', updateHeight)
+      viewport?.removeEventListener('scroll', updateHeight)
+      window.removeEventListener('resize', updateHeight)
+      document.removeEventListener('focusin', updateAfterFocus)
+      document.removeEventListener('focusout', updateAfterFocus)
+      if (focusTimer) clearTimeout(focusTimer)
+      document.documentElement.style.removeProperty('--mint-viewport-height')
+      document.documentElement.style.removeProperty('--mint-viewport-top')
+      document.documentElement.classList.remove('mint-keyboard-open')
+    }
+  }, [])
+
   useEffect(() => {
     // Preload SettingsWindow chunk in background so opening settings is instantaneous
     const timer = setTimeout(() => {
@@ -80,6 +119,7 @@ export default function App() {
 
   return (
     <ChunkErrorBoundary>
+      <PullToRefresh disabled={route.startsWith('/settings')} />
       <Suspense fallback={<div className="auth-gate-loading">Loading Mint…</div>}>
         <AuthGate>{content}</AuthGate>
       </Suspense>

package/src/renderer/src-web/components/MintDashboard.tsx

@@ -1,3 +1,5 @@
-// Re-export from the shared module — do NOT add logic here.
-// Edit src/renderer/shared/components/MintDashboard.tsx instead.
+// Keep web dashboard styles in the same lazy chunk as its shared view.
+import '../css/dashboard.css'
+
+// Re-export from the shared module — edit its logic there.
 export { default } from '../../shared/components/MintDashboard'

package/src/renderer/src-web/components/PicturesLibrary.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState, memo } from 'react'
 import { createPortal } from 'react-dom'
+import '../css/pictures.css'
 import { type PictureEntry, convertFileSrc, isTauriRuntime, getLocalApiBase, deleteSavedPicture } from '../tauri'
 import type { DashboardView } from './DashboardSidebar'
 
@@ -171,9 +172,9 @@ export default function PicturesLibrary({ view, pictures, onSetView, onRefreshPi
   return (
     <section className={`pictures-library ${view === 'pictures' ? 'is-visible' : ''}`} aria-hidden={view !== 'pictures'}>
       <header className="pictures-header">
-        <div><span className="pictures-kicker">Gallery</span><h2>Saved Pictures</h2></div>
+        <div><span className="pictures-kicker">Gallery</span><h2>Saved pictures</h2></div>
         <div className="pictures-header-actions">
-          <button className="pictures-close-btn" onClick={() => onSetView('chat')}>Close Gallery</button>
+          <button className="pictures-close-btn" onClick={() => onSetView('chat')}>Close gallery</button>
           <button type="button" className="picture-refresh-btn" title="Refresh" onClick={() => onRefreshPictures?.()}>
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.13-3.36L23 10"/><path d="M20.49 15a9 9 0 0 1-14.13 3.36L1 14"/></svg>
           </button>

package/src/renderer/src-web/components/PullToRefresh.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useRef, useState } from 'react'
+import '../css/pull-to-refresh.css'
+
+const SCROLL_SURFACES = '.chat-container, .pictures-library, .img-studio-content, .veo-studio-content, .web-view-scroll'
+const BLOCKED_TARGETS = 'input, textarea, select, button, [contenteditable="true"], .workspace-sidebar, .sidebar-backdrop, [role="dialog"], .model-spotlight-popover'
+const REFRESH_THRESHOLD = 64
+
+type Gesture = {
+  startX: number
+  startY: number
+  surface: HTMLElement
+  distance: number
+}
+
+export default function PullToRefresh({ disabled }: { disabled: boolean }) {
+  const [distance, setDistance] = useState(0)
+  const [refreshing, setRefreshing] = useState(false)
+  const gesture = useRef<Gesture | null>(null)
+  const refreshingRef = useRef(false)
+
+  useEffect(() => {
+    let reloadTimer: ReturnType<typeof setTimeout> | undefined
+
+    const reset = () => {
+      gesture.current = null
+      setDistance(0)
+    }
+
+    const onTouchStart = (event: TouchEvent) => {
+      gesture.current = null
+      if (disabled || refreshingRef.current || event.touches.length !== 1 || !window.matchMedia('(max-width: 760px)').matches) return
+      if (document.querySelector('#send-btn.stop-btn')) return
+
+      const target = event.target
+      if (!(target instanceof Element) || target.closest(BLOCKED_TARGETS)) return
+      const surface = target.closest(SCROLL_SURFACES)
+      if (!(surface instanceof HTMLElement) || surface.scrollTop > 1) return
+
+      // A nested list must reach its own top before the page can refresh.
+      for (let node = target.parentElement; node && node !== surface; node = node.parentElement) {
+        const overflow = window.getComputedStyle(node).overflowY
+        if ((overflow === 'auto' || overflow === 'scroll') && node.scrollHeight > node.clientHeight + 1 && node.scrollTop > 1) return
+      }
+
+      gesture.current = {
+        startX: event.touches[0].clientX,
+        startY: event.touches[0].clientY,
+        surface,
+        distance: 0,
+      }
+    }
+
+    const onTouchMove = (event: TouchEvent) => {
+      const current = gesture.current
+      if (!current || event.touches.length !== 1) return
+      const deltaX = event.touches[0].clientX - current.startX
+      const deltaY = event.touches[0].clientY - current.startY
+      if (deltaY < 0 || (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 8) || current.surface.scrollTop > 1) {
+        reset()
+        return
+      }
+      if (deltaY < 8) return
+      event.preventDefault()
+      current.distance = Math.min(96, deltaY * 0.72)
+      setDistance(current.distance)
+    }
+
+    const onTouchEnd = () => {
+      const shouldRefresh = (gesture.current?.distance ?? 0) >= REFRESH_THRESHOLD
+      gesture.current = null
+      if (shouldRefresh) {
+        refreshingRef.current = true
+        setRefreshing(true)
+        setDistance(REFRESH_THRESHOLD)
+        reloadTimer = setTimeout(() => window.location.reload(), 180)
+      } else {
+        setDistance(0)
+      }
+    }
+
+    document.addEventListener('touchstart', onTouchStart, { passive: true })
+    document.addEventListener('touchmove', onTouchMove, { passive: false })
+    document.addEventListener('touchend', onTouchEnd)
+    document.addEventListener('touchcancel', reset)
+    return () => {
+      document.removeEventListener('touchstart', onTouchStart)
+      document.removeEventListener('touchmove', onTouchMove)
+      document.removeEventListener('touchend', onTouchEnd)
+      document.removeEventListener('touchcancel', reset)
+      if (reloadTimer) clearTimeout(reloadTimer)
+    }
+  }, [disabled])
+
+  const visible = distance > 0 || refreshing
+  const ready = distance >= REFRESH_THRESHOLD
+  return (
+    <div
+      className={`mint-pull-refresh${visible ? ' is-visible' : ''}${refreshing ? ' is-refreshing' : ''}`}
+      style={{ transform: `translate(-50%, ${Math.min(distance / 2, 32)}px)` }}
+      role="status"
+      aria-live="polite"
+    >
+      <span className="mint-pull-refresh-icon" aria-hidden="true">↻</span>
+      <span>{refreshing ? 'Refreshing…' : ready ? 'Release to refresh' : 'Pull to refresh'}</span>
+    </div>
+  )
+}

package/src/renderer/src-web/components/SettingsWindow.tsx

@@ -1,4 +1,15 @@
 import React, { useState, useEffect, useRef } from 'react'
+// This view is lazy-loaded on the web. Keep every settings stylesheet with the
+// component so its modal does not render as unstyled HTML before its chunk loads.
+import '../css/settings/base.css'
+import '../../shared/css/settings/general.css'
+import '../../shared/css/settings/profile.css'
+import '../../shared/css/settings/automation.css'
+import '../../shared/css/settings/theme.css'
+import '../../shared/css/settings/plugins.css'
+import '../../shared/css/settings/agents.css'
+import '../../shared/css/settings/shortcuts.css'
+import '../css/settings/mobile.css'
 import { getLocalApiBase, isTauriRuntime, getProfileValue, setProfileValue, setActiveModel, authUpdateProfile } from '../tauri'
 import { useAuthUser } from '../../shared/components/AuthGate'
 import { useProviderModels } from '../hooks/useProviderModels'
@@ -31,7 +42,7 @@ export type {
   CustomProviderConfig,
 } from '../../shared/types'
 
-import { DEFAULT_CONFIG } from '../../shared/constants/config'
+import { DEFAULT_CONFIG, migrateTuiTheme } from '../../shared/constants/config'
 export { DEFAULT_CONFIG }
 import { applyThemeStyles } from '../../shared/utils/ui'
 import { APP_VERSION } from '../../shared/version'
@@ -258,7 +269,7 @@ export default function SettingsWindow() {
         }
         
         if (loadedConfig) {
-          const merged = { ...DEFAULT_CONFIG, ...loadedConfig }
+          const merged = { ...DEFAULT_CONFIG, ...migrateTuiTheme(loadedConfig) }
           setConfig(merged)
           
           // sync helper custom models
@@ -590,6 +601,12 @@ export default function SettingsWindow() {
     applyThemeStyles(updated)
   }
 
+  const updateFields = (patch: Partial<typeof DEFAULT_CONFIG>) => {
+    const updated = { ...config, ...patch }
+    setConfig(updated)
+    applyThemeStyles(updated)
+  }
+
   return (
     <div className="settings-container">
       <header className="settings-header drag-region">
@@ -737,6 +754,7 @@ export default function SettingsWindow() {
             <ThemeTab
               config={config}
               updateField={updateField}
+              updateFields={updateFields}
             />
           )}
 
@@ -765,6 +783,14 @@ export default function SettingsWindow() {
               config={config}
               updateField={updateField}
               dynamicOllamaModels={dynamicOllamaModels}
+              providerModels={{
+                gemini: dynamicGeminiModels,
+                anthropic: dynamicAnthropicModels,
+                openai: dynamicOpenAIModels,
+                openrouter: dynamicOpenRouterModels,
+                deepseek: dynamicDeepSeekModels,
+                local_openai: dynamicLocalModels,
+              }}
             />
           )}
         </div>