@pheem49/mint 1.15.0 → 1.17.0

package/src/renderer/shared/components/ArtifactPreviewPanel.tsx

@@ -1,505 +0,0 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react'
-import { runtimePlatform } from '../platform'
-import { renderFormattedMessage } from '../utils/markdown'
-import { ChatCodeBlock } from './ChatCodeBlock'
-
-export type ArtifactType = 'html' | 'svg' | 'markdown' | 'code'
-export type ViewportMode = 'desktop' | 'tablet' | 'mobile'
-
-export interface ArtifactFile {
-  path: string
-  content?: string
-  type?: ArtifactType
-}
-
-interface Props {
-  artifact: ArtifactFile | null
-  onClose: () => void
-  workspacePath?: string
-}
-
-export function detectArtifactType(filePath: string): ArtifactType {
-  const lower = filePath.toLowerCase()
-  if (lower.endsWith('.html') || lower.endsWith('.htm')) return 'html'
-  if (lower.endsWith('.svg')) return 'svg'
-  if (lower.endsWith('.md') || lower.endsWith('.markdown')) return 'markdown'
-  return 'code'
-}
-
-export function getFileLanguage(filePath: string): string {
-  const ext = filePath.split('.').pop()?.toLowerCase() || ''
-  const map: Record<string, string> = {
-    js: 'javascript',
-    jsx: 'javascript',
-    ts: 'typescript',
-    tsx: 'typescript',
-    html: 'html',
-    htm: 'html',
-    css: 'css',
-    json: 'json',
-    rs: 'rust',
-    py: 'python',
-    svg: 'xml',
-    md: 'markdown',
-  }
-  return map[ext] || ext || 'plaintext'
-}
-
-export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props) {
-  const [activeTab, setActiveTab] = useState<'preview' | 'code'>('preview')
-  const [viewport, setViewport] = useState<ViewportMode>('desktop')
-  const [content, setContent] = useState<string>(artifact?.content || '')
-  const [loading, setLoading] = useState<boolean>(false)
-  const [error, setError] = useState<string | null>(null)
-  const [copied, setCopied] = useState<boolean>(false)
-
-  const filePath = artifact?.path || ''
-  const fileName = useMemo(() => {
-    if (!filePath) return ''
-    const parts = filePath.replace(/\\/g, '/').split('/')
-    return parts[parts.length - 1] || filePath
-  }, [filePath])
-
-  const artifactType: ArtifactType = useMemo(() => {
-    if (artifact?.type) return artifact.type
-    return detectArtifactType(filePath)
-  }, [artifact, filePath])
-
-  const language = useMemo(() => getFileLanguage(filePath), [filePath])
-
-  const fetchContent = useCallback(async () => {
-    if (!filePath) return
-    setLoading(true)
-    setError(null)
-    try {
-      const text = await runtimePlatform.readWorkspaceFile(filePath, workspacePath)
-      setContent(text)
-    } catch (err: any) {
-      // If content was already supplied in artifact, fallback to it
-      if (artifact?.content) {
-        setContent(artifact.content)
-      } else {
-        setError(err?.message || 'Unable to read file content')
-      }
-    } finally {
-      setLoading(false)
-    }
-  }, [filePath, workspacePath, artifact])
-
-  useEffect(() => {
-    if (artifact?.content) {
-      setContent(artifact.content)
-    } else {
-      fetchContent()
-    }
-  }, [artifact, fetchContent])
-
-  const handleCopyPath = async () => {
-    if (!filePath) return
-    try {
-      await navigator.clipboard.writeText(filePath)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 1800)
-    } catch {
-      // ignore
-    }
-  }
-
-  const handleOpenExternal = () => {
-    if (!content) return
-    const mimeType =
-      artifactType === 'html'
-        ? 'text/html'
-        : artifactType === 'svg'
-          ? 'image/svg+xml'
-          : artifactType === 'markdown'
-            ? 'text/markdown'
-            : 'text/plain'
-    const blob = new Blob([content], { type: `${mimeType};charset=utf-8` })
-    const url = URL.createObjectURL(blob)
-    window.open(url, '_blank')
-  }
-
-  if (!artifact) return null
-
-  return (
-    <aside
-      className="artifact-preview-panel"
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        width: 'var(--preview-width, 50%)',
-        minWidth: '280px',
-        maxWidth: 'none',
-        height: '100%',
-        background: 'var(--panel-bg, #1e1e20)',
-        color: 'var(--text-main, #e8e8ea)',
-        position: 'relative',
-        zIndex: 10,
-        overflow: 'hidden',
-      }}
-    >
-      {/* Header */}
-      <header
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          padding: '10px 14px',
-          borderBottom: '1px solid var(--border)',
-          background: 'var(--surface-bg, #252527)',
-          gap: '8px',
-          flexShrink: 0,
-        }}
-      >
-        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', minWidth: 0 }}>
-          <span
-            style={{
-              display: 'inline-flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              width: '24px',
-              height: '24px',
-              borderRadius: 'var(--radius-xs, 4px)',
-              background: 'color-mix(in srgb, var(--accent) 15%, transparent)',
-              color: 'var(--interactive-fg)',
-              fontSize: '0.68rem',
-              fontWeight: 700,
-              flexShrink: 0,
-            }}
-          >
-            {artifactType.toUpperCase().slice(0, 3)}
-          </span>
-          <div style={{ minWidth: 0, display: 'flex', flexDirection: 'column' }}>
-            <span
-              style={{
-                fontWeight: 600,
-                fontSize: '0.86rem',
-                color: 'var(--text-main)',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-              }}
-              title={filePath}
-            >
-              {fileName}
-            </span>
-            <button
-              type="button"
-              onClick={handleCopyPath}
-              style={{
-                background: 'none',
-                border: 'none',
-                color: copied ? 'var(--accent)' : 'var(--text-muted)',
-                fontSize: '0.7rem',
-                padding: 0,
-                cursor: 'pointer',
-                textAlign: 'left',
-                display: 'inline-flex',
-                alignItems: 'center',
-                gap: '4px',
-              }}
-            >
-              {copied ? 'Path Copied' : 'Copy path'}
-            </button>
-          </div>
-        </div>
-
-        {/* Center: Tabs & Viewport */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
-          {/* Preview vs Code tab toggle */}
-          <div
-            style={{
-              display: 'inline-flex',
-              padding: '2px',
-              background: 'color-mix(in srgb, var(--text-main) 6%, transparent)',
-              borderRadius: 'var(--radius-sm, 6px)',
-              border: '1px solid var(--border)',
-            }}
-          >
-            <button
-              type="button"
-              onClick={() => setActiveTab('preview')}
-              style={{
-                background: activeTab === 'preview' ? 'var(--accent)' : 'transparent',
-                color: activeTab === 'preview' ? '#ffffff' : 'var(--text-muted)',
-                border: 'none',
-                borderRadius: 'var(--radius-xs, 4px)',
-                padding: '3px 9px',
-                fontSize: '0.75rem',
-                fontWeight: 500,
-                cursor: 'pointer',
-                transition: 'all 0.15s ease',
-              }}
-            >
-              Preview
-            </button>
-            <button
-              type="button"
-              onClick={() => setActiveTab('code')}
-              style={{
-                background: activeTab === 'code' ? 'var(--accent)' : 'transparent',
-                color: activeTab === 'code' ? '#ffffff' : 'var(--text-muted)',
-                border: 'none',
-                borderRadius: 'var(--radius-xs, 4px)',
-                padding: '3px 9px',
-                fontSize: '0.75rem',
-                fontWeight: 500,
-                cursor: 'pointer',
-                transition: 'all 0.15s ease',
-              }}
-            >
-              Code
-            </button>
-          </div>
-
-          {/* Viewport switcher for HTML */}
-          {activeTab === 'preview' && artifactType === 'html' && (
-            <div
-              style={{
-                display: 'inline-flex',
-                padding: '2px',
-                background: 'color-mix(in srgb, var(--text-main) 6%, transparent)',
-                borderRadius: 'var(--radius-sm, 6px)',
-                border: '1px solid var(--border)',
-              }}
-            >
-              <button
-                type="button"
-                onClick={() => setViewport('desktop')}
-                title="Desktop 100%"
-                style={{
-                  background: viewport === 'desktop' ? 'color-mix(in srgb, var(--text-main) 12%, transparent)' : 'transparent',
-                  color: viewport === 'desktop' ? 'var(--text-main)' : 'var(--text-muted)',
-                  border: 'none',
-                  borderRadius: 'var(--radius-xs, 4px)',
-                  padding: '3px 7px',
-                  cursor: 'pointer',
-                  fontSize: '0.72rem',
-                }}
-              >
-                Desktop
-              </button>
-              <button
-                type="button"
-                onClick={() => setViewport('tablet')}
-                title="Tablet (768px)"
-                style={{
-                  background: viewport === 'tablet' ? 'color-mix(in srgb, var(--text-main) 12%, transparent)' : 'transparent',
-                  color: viewport === 'tablet' ? 'var(--text-main)' : 'var(--text-muted)',
-                  border: 'none',
-                  borderRadius: 'var(--radius-xs, 4px)',
-                  padding: '3px 7px',
-                  cursor: 'pointer',
-                  fontSize: '0.72rem',
-                }}
-              >
-                Tablet
-              </button>
-              <button
-                type="button"
-                onClick={() => setViewport('mobile')}
-                title="Mobile (375px)"
-                style={{
-                  background: viewport === 'mobile' ? 'color-mix(in srgb, var(--text-main) 12%, transparent)' : 'transparent',
-                  color: viewport === 'mobile' ? 'var(--text-main)' : 'var(--text-muted)',
-                  border: 'none',
-                  borderRadius: 'var(--radius-xs, 4px)',
-                  padding: '3px 7px',
-                  cursor: 'pointer',
-                  fontSize: '0.72rem',
-                }}
-              >
-                Mobile
-              </button>
-            </div>
-          )}
-        </div>
-
-        {/* Right actions */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
-          <button
-            type="button"
-            onClick={fetchContent}
-            disabled={loading}
-            title="Reload content from file"
-            style={{
-              background: 'none',
-              border: 'none',
-              color: 'var(--text-muted)',
-              padding: '5px',
-              borderRadius: 'var(--radius-xs, 4px)',
-              cursor: 'pointer',
-              display: 'inline-flex',
-              alignItems: 'center',
-            }}
-          >
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              style={{ animation: loading ? 'spin 1s linear infinite' : 'none' }}
-            >
-              <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.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
-            </svg>
-          </button>
-
-          <button
-            type="button"
-            onClick={handleOpenExternal}
-            title="Open preview in new window"
-            style={{
-              background: 'none',
-              border: 'none',
-              color: 'var(--text-muted)',
-              padding: '5px',
-              borderRadius: 'var(--radius-xs, 4px)',
-              cursor: 'pointer',
-              display: 'inline-flex',
-              alignItems: 'center',
-            }}
-          >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
-              <polyline points="15 3 21 3 21 9" />
-              <line x1="10" y1="14" x2="21" y2="3" />
-            </svg>
-          </button>
-
-          <button
-            type="button"
-            onClick={onClose}
-            title="Close preview Panel"
-            style={{
-              background: 'none',
-              border: 'none',
-              color: 'var(--text-muted)',
-              padding: '5px',
-              borderRadius: 'var(--radius-xs, 4px)',
-              cursor: 'pointer',
-              display: 'inline-flex',
-              alignItems: 'center',
-            }}
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <line x1="18" y1="6" x2="6" y2="18" />
-              <line x1="6" y1="6" x2="18" y2="18" />
-            </svg>
-          </button>
-        </div>
-      </header>
-
-      {/* Main Content Area */}
-      <div
-        style={{
-          flex: 1,
-          overflow: 'auto',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'flex-start',
-          background: activeTab === 'preview' && artifactType === 'html' ? 'var(--input-bg, #0a0a0b)' : 'transparent',
-          padding: activeTab === 'preview' && artifactType === 'html' ? '16px' : '0',
-        }}
-      >
-        {error ? (
-          <div style={{ padding: '24px', textAlign: 'center', color: 'var(--status-error, #f87171)' }}>
-            <p style={{ fontWeight: 600, marginBottom: '8px' }}>Error loading preview</p>
-            <p style={{ fontSize: '0.8rem', opacity: 0.8 }}>{error}</p>
-            <button
-              type="button"
-              onClick={fetchContent}
-              style={{
-                marginTop: '12px',
-                padding: '4px 12px',
-                borderRadius: 'var(--radius-xs, 4px)',
-                background: 'var(--hover-delete-bg, rgba(239, 68, 68, 0.15))',
-                color: 'var(--status-error, #f87171)',
-                border: '1px solid color-mix(in srgb, var(--status-error, #ef4444) 30%, transparent)',
-                cursor: 'pointer',
-                fontSize: '0.78rem',
-              }}
-            >
-              Retry
-            </button>
-          </div>
-        ) : activeTab === 'code' ? (
-          <div style={{ width: '100%', height: '100%', overflow: 'auto', padding: '12px' }}>
-            <ChatCodeBlock code={content} language={language} />
-          </div>
-        ) : artifactType === 'html' ? (
-          <div
-            style={{
-              width: viewport === 'mobile' ? '375px' : viewport === 'tablet' ? '768px' : '100%',
-              maxWidth: '100%',
-              height: '100%',
-              background: '#ffffff',
-              borderRadius: viewport === 'desktop' ? '0px' : 'var(--radius-md, 8px)',
-              overflow: 'hidden',
-              boxShadow: viewport === 'desktop' ? 'none' : 'var(--shadow-md, 0 10px 25px rgba(0,0,0,0.5))',
-              border: viewport === 'desktop' ? 'none' : '1px solid var(--border)',
-              transition: 'width 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
-            }}
-          >
-            <iframe
-              title={fileName}
-              srcDoc={content}
-              sandbox="allow-scripts allow-forms allow-modals"
-              style={{
-                width: '100%',
-                height: '100%',
-                border: 'none',
-                background: '#ffffff',
-              }}
-            />
-          </div>
-        ) : artifactType === 'svg' ? (
-          <div
-            style={{
-              width: '100%',
-              height: '100%',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              padding: '24px',
-              backgroundImage:
-                'linear-gradient(45deg, color-mix(in srgb, var(--text-main) 4%, transparent) 25%, transparent 25%), linear-gradient(-45deg, color-mix(in srgb, var(--text-main) 4%, transparent) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--text-main) 4%, transparent) 75%), linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--text-main) 4%, transparent) 75%)',
-              backgroundSize: '20px 20px',
-              backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
-              overflow: 'auto',
-            }}
-          >
-            <div
-              style={{ maxWidth: '90%', maxHeight: '90%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
-              dangerouslySetInnerHTML={{ __html: content }}
-            />
-          </div>
-        ) : artifactType === 'markdown' ? (
-          <div
-            style={{
-              width: '100%',
-              height: '100%',
-              overflow: 'auto',
-              padding: '20px 24px',
-              lineHeight: 1.6,
-              color: 'var(--text-chat, var(--text-main))',
-            }}
-          >
-            {renderFormattedMessage(content)}
-          </div>
-        ) : (
-          <div style={{ width: '100%', height: '100%', overflow: 'auto', padding: '12px' }}>
-            <ChatCodeBlock code={content} language={language} />
-          </div>
-        )}
-      </div>
-    </aside>
-  )
-}

package/src/renderer/shared/components/AuthGate.tsx

@@ -1,191 +0,0 @@
-import React, { createContext, useContext, useEffect, useState } from 'react'
-import type { AuthUser } from '../types'
-import { authPlatform, runtimePlatform } from '../platform'
-import '../css/auth-gate.css'
-
-const { authGetCurrentUser, authLogin, authLogout, authRegister, resolveAvatarUrl } = authPlatform
-
-interface AuthContextValue {
-  user: AuthUser | null
-  avatarUrl: string | null
-  logout: () => Promise<void>
-  /** Update the in-memory user (e.g. after saving profile changes) without
-   * a full page reload or extra round-trip to re-fetch the session. */
-  refreshUser: (updated: AuthUser) => void
-}
-
-const AuthUserContext = createContext<AuthContextValue>({
-  user: null,
-  avatarUrl: null,
-  logout: async () => {},
-  refreshUser: () => {},
-})
-
-/** Read the currently signed-in shared Mint user (and a logout action)
- * from anywhere under <AuthGate>, e.g. the sidebar account card. */
-export function useAuthUser(): AuthContextValue {
-  return useContext(AuthUserContext)
-}
-
-export default function AuthGate({ children }: { children: React.ReactNode }) {
-  const [status, setStatus] = useState<'loading' | 'signed-out' | 'signed-in'>('loading')
-  const [user, setUser] = useState<AuthUser | null>(null)
-
-  useEffect(() => {
-    let cancelled = false
-    const fallbackTimer = setTimeout(() => {
-      if (!cancelled) {
-        setStatus('signed-out')
-      }
-    }, 6000)
-
-    authGetCurrentUser()
-      .then((current) => {
-        if (cancelled) return
-        clearTimeout(fallbackTimer)
-        setUser(current)
-        setStatus(current ? 'signed-in' : 'signed-out')
-      })
-      .catch(() => {
-        if (!cancelled) {
-          clearTimeout(fallbackTimer)
-          setStatus('signed-out')
-        }
-      })
-    return () => {
-      cancelled = true
-      clearTimeout(fallbackTimer)
-    }
-  }, [])
-
-  const handleLogout = async () => {
-    await authLogout().catch(() => {})
-    setUser(null)
-    setStatus('signed-out')
-  }
-
-  if (status === 'loading') {
-    return <div className="auth-gate-loading">Loading Mint…</div>
-  }
-
-  if (status === 'signed-out') {
-    return (
-      <AuthForm
-        onSuccess={(loggedInUser) => {
-          setUser(loggedInUser)
-          setStatus('signed-in')
-        }}
-      />
-    )
-  }
-
-  return (
-    <AuthUserContext.Provider
-      value={{
-        user,
-        avatarUrl: resolveAvatarUrl(user?.image),
-        logout: handleLogout,
-        refreshUser: setUser,
-      }}
-    >
-      {children}
-    </AuthUserContext.Provider>
-  )
-}
-
-function AuthForm({ onSuccess }: { onSuccess: (user: AuthUser) => void }) {
-  const [mode, setMode] = useState<'login' | 'register'>('login')
-  const [name, setName] = useState('')
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setLoading(true)
-    setError(null)
-    try {
-      const user =
-        mode === 'login'
-          ? await authLogin(email, password)
-          : await authRegister(name || undefined, email, password)
-      onSuccess(user)
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Something went wrong.')
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <div className="auth-gate-overlay">
-      <form className="auth-gate-card" onSubmit={handleSubmit}>
-        <img src={runtimePlatform.appIconPath()} alt="" className="auth-gate-logo" />
-        <h1 className="auth-gate-title">
-          {mode === 'login' ? 'Sign in to Mint' : 'Create your Mint account'}
-        </h1>
-        <p className="auth-gate-subtitle">
-          Uses the same account as Mint search — sign in once, use everywhere.
-        </p>
-
-        {mode === 'register' && (
-          <label className="auth-gate-field">
-            <span>Name</span>
-            <input
-              type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              placeholder="Your name"
-            />
-          </label>
-        )}
-
-        <label className="auth-gate-field">
-          <span>Email</span>
-          <input
-            type="email"
-            required
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            placeholder="you@example.com"
-          />
-        </label>
-
-        <label className="auth-gate-field">
-          <span>Password</span>
-          <input
-            type="password"
-            required
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            placeholder="••••••••"
-          />
-        </label>
-
-        {error && <div className="auth-gate-error">{error}</div>}
-
-        <button type="submit" className="auth-gate-submit" disabled={loading}>
-          {loading
-            ? mode === 'login'
-              ? 'Signing in…'
-              : 'Creating account…'
-            : mode === 'login'
-              ? 'Sign in'
-              : 'Create account'}
-        </button>
-
-        <button
-          type="button"
-          className="auth-gate-switch"
-          onClick={() => {
-            setMode(mode === 'login' ? 'register' : 'login')
-            setError(null)
-          }}
-        >
-          {mode === 'login' ? "Don't have an account? Create one" : 'Already have an account? Sign in'}
-        </button>
-      </form>
-    </div>
-  )
-}