@geminilight/mindos 0.5.69 → 0.5.70

package/app/components/ImportModal.tsx

@@ -0,0 +1,415 @@
+'use client';
+
+import { useEffect, useRef, useState, useCallback } from 'react';
+import {
+  X, FolderInput, Sparkles, FileText, AlertCircle,
+  AlertTriangle, Loader2, Check, ArrowLeft,
+} from 'lucide-react';
+import { useLocale } from '@/lib/LocaleContext';
+import { useFileImport, type ImportIntent, type ConflictMode } from '@/hooks/useFileImport';
+import { openAskModal } from '@/hooks/useAskModal';
+import { ALLOWED_IMPORT_EXTENSIONS } from '@/lib/core/file-convert';
+import type { LocalAttachment } from '@/lib/types';
+
+interface ImportModalProps {
+  open: boolean;
+  onClose: () => void;
+  defaultSpace?: string;
+  initialFiles?: File[];
+}
+
+const ACCEPT = Array.from(ALLOWED_IMPORT_EXTENSIONS).join(',');
+
+export default function ImportModal({ open, onClose, defaultSpace, initialFiles }: ImportModalProps) {
+  const { t } = useLocale();
+  const im = useFileImport();
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [spaces, setSpaces] = useState<Array<{ name: string; path: string }>>([]);
+  const [closing, setClosing] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+  const initializedRef = useRef(false);
+
+  useEffect(() => {
+    if (!open) {
+      initializedRef.current = false;
+      return;
+    }
+    if (initializedRef.current) return;
+    initializedRef.current = true;
+    im.reset();
+    if (defaultSpace) im.setTargetSpace(defaultSpace);
+    if (initialFiles && initialFiles.length > 0) {
+      im.addFiles(initialFiles);
+    }
+    fetch('/api/file?op=list_spaces')
+      .then(r => r.json())
+      .then(d => { if (d.spaces) setSpaces(d.spaces); })
+      .catch(() => {});
+  }, [open, defaultSpace, initialFiles, im]);
+
+  const handleClose = useCallback(() => {
+    if (im.files.length > 0 && im.step !== 'done') {
+      if (!confirm(t.fileImport.discardMessage(im.files.length))) return;
+    }
+    setClosing(true);
+    setTimeout(() => { setClosing(false); onClose(); im.reset(); }, 150);
+  }, [im, onClose, t]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') { e.stopPropagation(); handleClose(); }
+    };
+    window.addEventListener('keydown', handler, true);
+    return () => window.removeEventListener('keydown', handler, true);
+  }, [open, handleClose]);
+
+  const handleIntentSelect = useCallback((intent: ImportIntent) => {
+    im.setIntent(intent);
+    if (intent === 'archive') {
+      im.setStep('archive_config');
+    } else {
+      const attachments: LocalAttachment[] = im.validFiles.map(f => ({
+        name: f.name,
+        content: f.content!,
+      }));
+      setClosing(true);
+      setTimeout(() => {
+        setClosing(false);
+        onClose();
+        window.dispatchEvent(new CustomEvent('mindos:inject-ask-files', {
+          detail: { files: attachments },
+        }));
+        const prompt = attachments.length === 1
+          ? t.fileImport.digestPromptSingle(attachments[0].name)
+          : t.fileImport.digestPromptMulti(attachments.length);
+        openAskModal(prompt);
+        im.reset();
+      }, 150);
+    }
+  }, [im, onClose, t]);
+
+  const handleArchiveSubmit = useCallback(async () => {
+    await im.doArchive();
+    if (im.result && im.result.created.length > 0) {
+      setShowSuccess(true);
+      setTimeout(() => {
+        setClosing(true);
+        setTimeout(() => {
+          setClosing(false);
+          onClose();
+          im.reset();
+          setShowSuccess(false);
+          window.dispatchEvent(new Event('mindos:files-changed'));
+        }, 150);
+      }, 600);
+    }
+  }, [im, onClose]);
+
+  useEffect(() => {
+    if (im.step === 'done' && im.result) {
+      if (im.result.created.length > 0) {
+        setShowSuccess(true);
+        const timer = setTimeout(() => {
+          setClosing(true);
+          setTimeout(() => {
+            setClosing(false);
+            onClose();
+            im.reset();
+            setShowSuccess(false);
+            window.dispatchEvent(new Event('mindos:files-changed'));
+          }, 150);
+        }, 800);
+        return () => clearTimeout(timer);
+      }
+    }
+  }, [im.step, im.result, onClose, im]);
+
+  if (!open && !closing) return null;
+
+  const hasFiles = im.files.length > 0;
+  const isSelectStep = im.step === 'select';
+  const isArchiveConfig = im.step === 'archive_config';
+  const isImporting = im.step === 'importing';
+
+  return (
+    <>
+      <div
+        ref={overlayRef}
+        className={`fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 transition-opacity duration-200 ${closing ? 'opacity-0' : 'opacity-100'}`}
+        onClick={(e) => { if (e.target === overlayRef.current) handleClose(); }}
+      >
+        <div
+          className={`w-full max-w-lg bg-card rounded-xl shadow-xl border border-border transition-all duration-200 ${closing ? 'opacity-0 scale-[0.98]' : 'opacity-100 scale-100'}`}
+          role="dialog"
+          aria-modal="true"
+          aria-label={t.fileImport.title}
+        >
+          {/* Header */}
+          <div className="flex items-start justify-between px-5 pt-5 pb-2">
+            <div>
+              {isArchiveConfig && (
+                <button
+                  onClick={() => im.setStep('select')}
+                  className="text-xs text-muted-foreground hover:text-foreground transition-colors mb-1"
+                >
+                  {t.fileImport.back}
+                </button>
+              )}
+              <h2 className="text-base font-semibold text-foreground">
+                {isArchiveConfig ? t.fileImport.archiveConfigTitle : t.fileImport.title}
+              </h2>
+              {isSelectStep && (
+                <p className="text-xs text-muted-foreground mt-0.5">{t.fileImport.subtitle}</p>
+              )}
+            </div>
+            <button
+              onClick={handleClose}
+              className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+              aria-label="Close"
+            >
+              <X size={16} />
+            </button>
+          </div>
+
+          <div className="px-5 pb-5">
+            {/* DropZone */}
+            {isSelectStep && (
+              <div
+                className={`border-2 border-dashed rounded-lg transition-all duration-200 cursor-pointer ${
+                  hasFiles
+                    ? 'border-border py-3 px-4'
+                    : 'border-[var(--amber)]/30 hover:border-[var(--amber)]/60 py-8 px-4'
+                }`}
+                role="button"
+                tabIndex={0}
+                aria-label={t.fileImport.dropzoneButton}
+                onClick={() => fileInputRef.current?.click()}
+                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); fileInputRef.current?.click(); } }}
+                onDragOver={(e) => { e.preventDefault(); e.stopPropagation(); }}
+                onDrop={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  if (e.dataTransfer.files.length > 0) im.addFiles(e.dataTransfer.files);
+                }}
+              >
+                {hasFiles ? (
+                  <p className="text-xs text-muted-foreground text-center">
+                    {t.fileImport.dropzoneCompact}{' '}
+                    <span className="text-[var(--amber)] hover:underline">{t.fileImport.dropzoneCompactButton}</span>
+                  </p>
+                ) : (
+                  <div className="flex flex-col items-center gap-2 text-center">
+                    <FolderInput size={28} className="text-[var(--amber)]/40" />
+                    <p className="text-sm text-muted-foreground">
+                      <span className="hidden md:inline">{t.fileImport.dropzoneText}{' '}</span>
+                      <span className="md:hidden">{t.fileImport.dropzoneMobile}</span>
+                      <span className="hidden md:inline text-[var(--amber)] hover:underline">{t.fileImport.dropzoneButton}</span>
+                    </p>
+                    <p className="text-2xs text-muted-foreground/60">{t.fileImport.dropOverlayFormats}</p>
+                  </div>
+                )}
+              </div>
+            )}
+
+            <input
+              ref={fileInputRef}
+              type="file"
+              multiple
+              className="hidden"
+              accept={ACCEPT}
+              onChange={(e) => {
+                if (e.target.files) im.addFiles(e.target.files);
+                e.target.value = '';
+              }}
+            />
+
+            {/* File list */}
+            {hasFiles && (
+              <div className="mt-3">
+                <div className="flex items-center justify-between mb-1.5">
+                  <span className="text-xs text-muted-foreground">{t.fileImport.fileCount(im.files.length)}</span>
+                  {isSelectStep && (
+                    <button
+                      onClick={im.clearFiles}
+                      className="text-2xs text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                      {t.fileImport.clearAll}
+                    </button>
+                  )}
+                </div>
+                <div className="flex flex-col gap-1 max-h-[200px] overflow-y-auto">
+                  {im.files.map((f, idx) => (
+                    <div
+                      key={`${f.name}-${idx}`}
+                      className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm ${
+                        f.error ? 'bg-error/5' : 'bg-muted/50'
+                      }`}
+                    >
+                      {f.loading ? (
+                        <Loader2 size={14} className="text-muted-foreground animate-spin shrink-0" />
+                      ) : f.error ? (
+                        <AlertCircle size={14} className="text-error shrink-0" />
+                      ) : (
+                        <FileText size={14} className="text-muted-foreground shrink-0" />
+                      )}
+                      <span className="truncate flex-1 text-foreground">{f.name}</span>
+                      {f.error ? (
+                        <span className="text-xs text-error shrink-0">
+                          {f.error === 'unsupported' ? t.fileImport.unsupported
+                            : f.error === 'tooLarge' ? t.fileImport.tooLarge('5MB')
+                            : f.error}
+                        </span>
+                      ) : (
+                        <span className="text-xs text-muted-foreground tabular-nums shrink-0">
+                          {im.formatSize(f.size)}
+                        </span>
+                      )}
+                      {isSelectStep && !isArchiveConfig && (
+                        <button
+                          onClick={(e) => { e.stopPropagation(); im.removeFile(idx); }}
+                          className="p-0.5 text-muted-foreground hover:text-foreground transition-colors shrink-0"
+                          aria-label={`${t.fileImport.remove} ${f.name}`}
+                        >
+                          <X size={14} />
+                        </button>
+                      )}
+                    </div>
+                  ))}
+                </div>
+
+                {/* Archive config: target path preview */}
+                {isArchiveConfig && (
+                  <div className="flex flex-col gap-1 mt-2 max-h-[120px] overflow-y-auto">
+                    {im.validFiles.map((f, idx) => {
+                      const ext = f.name.split('.').pop()?.toLowerCase();
+                      const targetExt = (ext === 'txt' || ext === 'html' || ext === 'htm' || ext === 'yaml' || ext === 'yml' || ext === 'xml')
+                        ? 'md' : ext;
+                      const stem = f.name.replace(/\.[^.]+$/, '');
+                      const targetName = `${stem}.${targetExt}`;
+                      const targetPath = im.targetSpace ? `${im.targetSpace}/${targetName}` : targetName;
+                      return (
+                        <div key={`preview-${idx}`} className="text-xs text-muted-foreground px-3">
+                          {f.name} <span className="text-muted-foreground/50">{t.fileImport.arrowTo}</span> {targetPath}
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Intent cards (Step 1) */}
+            {isSelectStep && hasFiles && im.allReady && (
+              <div className="grid grid-cols-2 gap-3 mt-4">
+                <button
+                  onClick={() => handleIntentSelect('archive')}
+                  className="flex flex-col items-center gap-2 p-4 border rounded-lg cursor-pointer transition-all duration-150 border-[var(--amber)]/30 bg-card hover:border-[var(--amber)]/60 hover:shadow-sm active:scale-[0.98] text-left"
+                  disabled={im.validFiles.length === 0}
+                >
+                  <FolderInput size={24} className="text-[var(--amber)]" />
+                  <span className="text-sm font-medium text-foreground">{t.fileImport.archiveTitle}</span>
+                  <span className="text-xs text-muted-foreground text-center">{t.fileImport.archiveDesc}</span>
+                </button>
+                <button
+                  onClick={() => handleIntentSelect('digest')}
+                  className="flex flex-col items-center gap-2 p-4 border border-border rounded-lg cursor-pointer transition-all duration-150 bg-card hover:border-[var(--amber)]/50 hover:shadow-sm active:scale-[0.98] text-left"
+                  disabled={im.validFiles.length === 0}
+                >
+                  <Sparkles size={24} className="text-[var(--amber)]" />
+                  <span className="text-sm font-medium text-foreground">{t.fileImport.digestTitle}</span>
+                  <span className="text-xs text-muted-foreground text-center">{t.fileImport.digestDesc}</span>
+                </button>
+              </div>
+            )}
+
+            {/* Archive config (Step 2a) */}
+            {isArchiveConfig && (
+              <div className="mt-4 space-y-4">
+                {/* Space selector */}
+                <div>
+                  <label className="text-xs font-medium text-foreground mb-1 block">{t.fileImport.targetSpace}</label>
+                  <select
+                    value={im.targetSpace}
+                    onChange={(e) => im.setTargetSpace(e.target.value)}
+                    className="w-full bg-muted border border-border rounded-lg px-3 py-2 text-sm text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  >
+                    <option value="">{t.fileImport.rootDir}</option>
+                    {spaces.map(s => (
+                      <option key={s.path} value={s.path}>{s.name}</option>
+                    ))}
+                  </select>
+                </div>
+
+                {/* Conflict strategy */}
+                <div>
+                  <label className="text-xs font-medium text-foreground mb-1.5 block">{t.fileImport.conflictLabel}</label>
+                  <div className="flex flex-col gap-1.5">
+                    {([
+                      { value: 'rename' as ConflictMode, label: t.fileImport.conflictRename },
+                      { value: 'skip' as ConflictMode, label: t.fileImport.conflictSkip },
+                      { value: 'overwrite' as ConflictMode, label: t.fileImport.conflictOverwrite },
+                    ]).map(opt => (
+                      <label
+                        key={opt.value}
+                        className={`flex items-center gap-2 py-1 text-sm cursor-pointer ${
+                          opt.value === 'overwrite' ? 'text-error' : 'text-foreground'
+                        }`}
+                      >
+                        <input
+                          type="radio"
+                          name="conflict"
+                          value={opt.value}
+                          checked={im.conflict === opt.value}
+                          onChange={() => im.setConflict(opt.value)}
+                          className="accent-[var(--amber)]"
+                        />
+                        {opt.label}
+                        {opt.value === 'overwrite' && (
+                          <AlertTriangle size={13} className="text-error shrink-0" />
+                        )}
+                      </label>
+                    ))}
+                    {im.conflict === 'overwrite' && (
+                      <p className="text-2xs text-error/80 pl-6">{t.fileImport.overwriteWarn}</p>
+                    )}
+                  </div>
+                </div>
+
+                {/* Actions */}
+                <div className="flex items-center justify-end gap-3 pt-2">
+                  <button
+                    onClick={handleClose}
+                    className="text-sm text-muted-foreground hover:text-foreground transition-colors px-3 py-2"
+                  >
+                    {t.fileImport.cancel}
+                  </button>
+                  <button
+                    onClick={handleArchiveSubmit}
+                    disabled={isImporting || im.validFiles.length === 0}
+                    className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
+                      showSuccess
+                        ? 'bg-success text-success-foreground'
+                        : 'bg-[var(--amber)] text-[var(--amber-foreground)] hover:opacity-90'
+                    } disabled:opacity-50`}
+                  >
+                    {showSuccess ? (
+                      <><Check size={14} /> {t.fileImport.importButton(im.validFiles.length)}</>
+                    ) : isImporting ? (
+                      <><Loader2 size={14} className="animate-spin" /> {t.fileImport.importing}</>
+                    ) : !im.allReady ? (
+                      t.fileImport.preparing
+                    ) : (
+                      t.fileImport.importButton(im.validFiles.length)
+                    )}
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/app/components/OnboardingView.tsx

@@ -133,6 +133,15 @@ export default function OnboardingView() {
       <p className="text-center text-xs leading-relaxed max-w-sm mx-auto font-display text-muted-foreground opacity-60">
         {ob.importHint}
       </p>
+      <p className="text-center mt-2">
+        <button
+          type="button"
+          onClick={() => window.dispatchEvent(new CustomEvent('mindos:open-import'))}
+          className="text-xs text-[var(--amber)] hover:underline transition-colors"
+        >
+          {t.fileImport.onboardingHint}
+        </button>
+      </p>
 
       {/* Sync hint card */}
       <div className="max-w-md mx-auto mt-6 flex items-center gap-3 px-4 py-3 rounded-lg border border-border bg-card text-left">

package/app/components/Panel.tsx

@@ -27,7 +27,6 @@ const DEFAULT_PANEL_WIDTH: Record<PanelId, number> = {
   files: 280,
   search: 280,
   echo: 280,
-  plugins: 280,
   agents: 280,
   discover: 280,
 };
@@ -52,6 +51,8 @@ interface PanelProps {
   maximized?: boolean;
   /** Callback to toggle maximize */
   onMaximize?: () => void;
+  /** Callback to open import modal for a space */
+  onImport?: (space: string) => void;
   /** Lazy-loaded panel content for search/ask/plugins */
   children?: React.ReactNode;
 }
@@ -67,6 +68,7 @@ export default function Panel({
   onWidthCommit,
   maximized = false,
   onMaximize,
+  onImport,
   children,
 }: PanelProps) {
   const open = activePanel !== null;
@@ -135,7 +137,7 @@ export default function Panel({
           </div>
         </PanelHeader>
         <div className="flex-1 overflow-y-auto min-h-0 px-2 py-2">
-          <FileTree nodes={fileTree} onNavigate={onNavigate} maxOpenDepth={maxOpenDepth} />
+          <FileTree nodes={fileTree} onNavigate={onNavigate} maxOpenDepth={maxOpenDepth} onImport={onImport} />
         </div>
         <SyncStatusBar collapsed={false} onOpenSyncSettings={onOpenSyncSettings} />
       </div>

package/app/components/SidebarLayout.tsx

@@ -1,15 +1,15 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
 import Link from 'next/link';
-import { Search, Settings, Menu, X } from 'lucide-react';
+import { Search, Settings, Menu, X, FolderInput } from 'lucide-react';
 import ActivityBar, { type PanelId } from './ActivityBar';
 import Panel from './Panel';
 import FileTree from './FileTree';
 import Logo from './Logo';
 import SearchPanel from './panels/SearchPanel';
-import PluginsPanel from './panels/PluginsPanel';
+
 import AgentsPanel from './panels/AgentsPanel';
 import DiscoverPanel from './panels/DiscoverPanel';
 import EchoPanel from './panels/EchoPanel';
@@ -29,6 +29,9 @@ import ChangesBanner from './changes/ChangesBanner';
 import { MobileSyncDot, useSyncStatus } from './SyncStatusBar';
 import { FileNode } from '@/lib/types';
 import { useLocale } from '@/lib/LocaleContext';
+import dynamic from 'next/dynamic';
+
+const ImportModal = dynamic(() => import('./ImportModal'), { ssr: false });
 import { WalkthroughProvider } from './walkthrough';
 import McpProvider from '@/hooks/useMcpData';
 import '@/lib/renderers/index'; // client-side renderer registration source of truth
@@ -70,6 +73,25 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
     return RIGHT_AGENT_DETAIL_DEFAULT_WIDTH;
   });
 
+  // ── Import modal state ──
+  const [importModalOpen, setImportModalOpen] = useState(false);
+  const [importDefaultSpace, setImportDefaultSpace] = useState<string | undefined>(undefined);
+  const [importInitialFiles, setImportInitialFiles] = useState<File[] | undefined>(undefined);
+  const [dragOverlay, setDragOverlay] = useState(false);
+  const dragCounterRef = useRef(0);
+
+  const handleOpenImport = useCallback((space?: string) => {
+    setImportDefaultSpace(space);
+    setImportInitialFiles(undefined);
+    setImportModalOpen(true);
+  }, []);
+
+  const handleCloseImport = useCallback(() => {
+    setImportModalOpen(false);
+    setImportDefaultSpace(undefined);
+    setImportInitialFiles(undefined);
+  }, []);
+
   // ── Mobile state ──
   const [mobileOpen, setMobileOpen] = useState(false);
   const [mobileSearchOpen, setMobileSearchOpen] = useState(false);
@@ -99,6 +121,12 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
     return () => window.removeEventListener('mindos:open-settings', handler);
   }, []);
 
+  useEffect(() => {
+    const handler = () => handleOpenImport();
+    window.addEventListener('mindos:open-import', handler);
+    return () => window.removeEventListener('mindos:open-import', handler);
+  }, [handleOpenImport]);
+
   // GuideCard first message handler
   const handleFirstMessage = useCallback(() => {
     const notifyGuide = () => window.dispatchEvent(new Event('guide-state-updated'));
@@ -206,6 +234,10 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         e.preventDefault();
         setSettingsOpen(v => !v);
       }
+      if ((e.metaKey || e.ctrlKey) && e.key === 'i') {
+        e.preventDefault();
+        setImportModalOpen(v => !v);
+      }
     };
     window.addEventListener('keydown', handler);
     return () => window.removeEventListener('keydown', handler);
@@ -283,6 +315,7 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         onWidthCommit={lp.handlePanelWidthCommit}
         maximized={lp.panelMaximized}
         onMaximize={lp.handlePanelMaximize}
+        onImport={handleOpenImport}
       >
         <div className={`flex flex-col h-full ${lp.activePanel === 'echo' ? '' : 'hidden'}`}>
           <EchoPanel active={lp.activePanel === 'echo'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
@@ -290,9 +323,6 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         <div className={`flex flex-col h-full ${lp.activePanel === 'search' ? '' : 'hidden'}`}>
           <SearchPanel active={lp.activePanel === 'search'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
         </div>
-        <div className={`flex flex-col h-full ${lp.activePanel === 'plugins' ? '' : 'hidden'}`}>
-          <PluginsPanel active={lp.activePanel === 'plugins'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
-        </div>
         <div className={`flex flex-col h-full ${lp.activePanel === 'agents' ? '' : 'hidden'}`}>
           <AgentsPanel
             active={lp.activePanel === 'agents'}
@@ -389,20 +419,65 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
           </button>
         </div>
         <div className="flex-1 overflow-y-auto min-h-0 px-2 py-2">
-          <FileTree nodes={fileTree} onNavigate={() => setMobileOpen(false)} />
+          <FileTree nodes={fileTree} onNavigate={() => setMobileOpen(false)} onImport={handleOpenImport} />
         </div>
       </aside>
 
       <SearchModal open={mobileSearchOpen} onClose={() => setMobileSearchOpen(false)} />
       <AskModal open={mobileAskOpen} onClose={() => setMobileAskOpen(false)} currentFile={currentFile} />
 
-      <main id="main-content" className="min-h-screen transition-all duration-200 pt-[52px] md:pt-0">
+      <main
+        id="main-content"
+        className="min-h-screen transition-all duration-200 pt-[52px] md:pt-0"
+        onDragEnter={(e) => {
+          if (!e.dataTransfer.types.includes('Files')) return;
+          e.preventDefault();
+          dragCounterRef.current++;
+          if (dragCounterRef.current === 1) setDragOverlay(true);
+        }}
+        onDragOver={(e) => {
+          if (!e.dataTransfer.types.includes('Files')) return;
+          e.preventDefault();
+        }}
+        onDragLeave={() => {
+          dragCounterRef.current = Math.max(0, dragCounterRef.current - 1);
+          if (dragCounterRef.current === 0) setDragOverlay(false);
+        }}
+        onDrop={(e) => {
+          e.preventDefault();
+          dragCounterRef.current = 0;
+          setDragOverlay(false);
+          if (e.dataTransfer.files.length > 0) {
+            setImportInitialFiles(Array.from(e.dataTransfer.files));
+            setImportDefaultSpace(undefined);
+            setImportModalOpen(true);
+          }
+        }}
+      >
         <div className="min-h-screen bg-background">
           <ChangesBanner />
           {children}
         </div>
+
+        {/* Global drag overlay */}
+        {dragOverlay && !importModalOpen && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm transition-opacity duration-200">
+            <div className="border-2 border-dashed border-[var(--amber)]/50 rounded-xl p-12 flex flex-col items-center gap-3">
+              <FolderInput size={48} className="text-[var(--amber)]/60" />
+              <p className="text-sm text-foreground font-medium">{t.fileImport.dropOverlay}</p>
+              <p className="text-xs text-muted-foreground">{t.fileImport.dropOverlayFormats}</p>
+            </div>
+          </div>
+        )}
       </main>
 
+      <ImportModal
+        open={importModalOpen}
+        onClose={handleCloseImport}
+        defaultSpace={importDefaultSpace}
+        initialFiles={importInitialFiles}
+      />
+
       <style>{`
         @media (min-width: 768px) {
           :root {

package/app/components/TableOfContents.tsx

@@ -128,6 +128,7 @@ export default function TableOfContents({ content }: TableOfContentsProps) {
               href={`#${heading.id}`}
               onClick={(e) => handleClick(e, heading.id)}
               className="block text-xs py-1 rounded transition-colors duration-100 leading-snug"
+              suppressHydrationWarning
               style={{
                 paddingLeft: `${8 + indent}px`,
                 paddingRight: '8px',