textDB/src/App.tsx

import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { open, save } from "@tauri-apps/plugin-dialog";
import { open as openExternal } from "@tauri-apps/plugin-shell";
import { writeText as writeClipboardText } from "@tauri-apps/plugin-clipboard-manager";
import { copyFile, exists, readTextFile, remove, writeTextFile } from "@tauri-apps/plugin-fs";
import { Menu } from "@tauri-apps/api/menu";
import { getCurrentWindow } from "@tauri-apps/api/window";
import { appDataDir, join } from "@tauri-apps/api/path";
import { listen } from "@tauri-apps/api/event";
import { invoke } from "@tauri-apps/api/core";
import { Compartment, EditorState, Transaction } from "@codemirror/state";
import {
  closeSearchPanel,
  openSearchPanel,
  search,
  searchKeymap,
  searchPanelOpen
} from "@codemirror/search";
import {
  EditorView,
  keymap,
  lineNumbers,
  highlightActiveLineGutter
} from "@codemirror/view";
import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
import folderIcon from "../src-tauri/icons/folder.png";
import folderIconBright from "../src-tauri/icons/folder_b.png";
import historyIcon from "../src-tauri/icons/history.png";
import historyIconBright from "../src-tauri/icons/history_b.png";
import newFolderIcon from "../src-tauri/icons/new_folder.png";
import newFolderIconBright from "../src-tauri/icons/new_folder_b.png";
import newTextIcon from "../src-tauri/icons/new_text.png";
import newTextIconBright from "../src-tauri/icons/new_text_b.png";
import openFileIcon from "../src-tauri/icons/open_file.png";
import openFileIconBright from "../src-tauri/icons/open_file_b.png";
import settingsIcon from "../src-tauri/icons/settings.png";
import settingsIconBright from "../src-tauri/icons/settings_b.png";
import sidebarCollapseIcon from "../src-tauri/icons/sb_collapse.png";
import sidebarCollapseIconBright from "../src-tauri/icons/sb_collapse_b.png";
import sidebarExpandIcon from "../src-tauri/icons/sb_expand.png";
import sidebarExpandIconBright from "../src-tauri/icons/sb_expand_b.png";
import { markdownToHTML } from "./markdown/markdown";
import "./markdown/markdown-render.css";
import {
  createFolder,
  createText,
  deleteFolder,
  deleteText,
  deleteTextVersion,
  discardDraft,
  exportDatabaseSnapshot,
  getDraft,
  getLatestManualVersion,
  getText,
  listFolders,
  listTexts,
  listVersions,
  moveFolder,
  moveTextToFolder,
  saveManualVersion,
  searchTexts,
  updateFolderName,
  updateTextTitle,
  upsertDraft,
  type Folder,
  type Text,
} from "./lib/db";

const formatDate = (timestamp: number) => {
  if (!timestamp) return "";
  return new Date(timestamp).toLocaleString();
};

const buildDatabaseExportFilename = () => {
  const timestamp = new Date().toISOString().replace(/\.\d{3}Z$/, "Z").replace(/:/g, "-");
  return `textdb-backup-${timestamp}.db`;
};

type HistorySnapshot = {
  body: string;
  lastPersistedBody: string;
  lastPersistedTitle: string;
  hasDraft: boolean;
  restoredDraft: boolean;
  draftBaseVersionId: string | null;
  latestManualVersionId: string | null;
};

type ConfirmState = {
  title: string;
  message: string;
  actionLabel?: string;
  onConfirm: () => Promise<void> | void;
};

type DbExportStatus = {
  tone: "success" | "error";
  message: string;
};

type HistoryEntry = {
  id: string;
  created_at: number;
  kind: "manual" | "draft";
  body: string;
  baseVersionId?: string | null;
};

type ConversionJob = {
  actionLabel: string;
  openPreviewOnSuccess: boolean;
  sourceTextId: string;
  sourceTitle: string;
  sourceBody: string;
  sourceDraftBaseVersionId: string | null;
  controller: AbortController;
};

type DocumentStats = {
  characters: number;
  words: number;
  sentences: number;
  estimatedTokens: number;
};

type SidebarEntry =
  | { kind: "folder"; item: Folder }
  | { kind: "text"; item: Text };

type AiPromptTemplate = {
  id: string;
  title: string;
  prompt: string;
  openPreviewOnSuccess?: boolean;
};

type AiActionRequest = {
  template: AiPromptTemplate;
};

const DEFAULT_TITLE = "Untitled Text";
const DEFAULT_FOLDER_NAME = "New Folder";
const DEFAULT_OLLAMA_URL = "http://localhost:11434";
const AI_PROMPT_TEMPLATES_STORAGE_KEY = "textdb.aiPromptTemplates";
const LEGACY_AI_PROMPTS_STORAGE_KEY = "textdb.aiPrompts";
const LEGACY_MARKDOWN_PROMPT_STORAGE_KEY = "textdb.ollamaPrompt";
const LEGACY_TRANSLATE_LANGUAGE_STORAGE_KEY = "textdb.translateLanguage";
const LEGACY_CHANGE_STYLE_PRESETS_STORAGE_KEY = "textdb.changeStylePresets";

const DEFAULT_AI_PROMPT_TEMPLATES: AiPromptTemplate[] = [
  {
    id: "markdown-conversion",
    title: "Markdown Conversion",
    prompt: `Convert the document into well-structured Markdown.
Do not remove, translate, summarize, or invent content.
Add Markdown formatting only where it improves structure and readability.
Return only the final Markdown document.`,
    openPreviewOnSuccess: true
  },
  {
    id: "proofread-spelling",
    title: "Proofread - Correct Spelling",
    prompt: `Proofread the document.
Correct spelling mistakes, obvious typos, and minor punctuation issues only.
Keep the wording, meaning, structure, and tone otherwise unchanged.
Return only the corrected document.`
  },
  {
    id: "summarize",
    title: "Summarize",
    prompt: `Summarize the document into a concise version.
Keep the key facts, decisions, and important details.
Use clear structure and short paragraphs or bullets where helpful.
Return only the final summary.`
  },
  {
    id: "translate-english",
    title: "Translate to English",
    prompt: `Translate the document into English.
Preserve the meaning, intent, and structure as naturally as possible.
Keep Markdown formatting where it already exists or where it clearly improves readability.
Return only the translated document.`
  },
  {
    id: "change-style-friendly",
    title: "Change Style: Friendly",
    prompt: `Rewrite the document in a friendly style.
Preserve the meaning, facts, and overall structure.
Improve wording and tone to match the requested style without adding commentary.
Return only the rewritten document.`
  },
  {
    id: "change-style-professional",
    title: "Change Style: Professional",
    prompt: `Rewrite the document in a professional style.
Preserve the meaning, facts, and overall structure.
Improve wording and tone to match the requested style without adding commentary.
Return only the rewritten document.`
  },
  {
    id: "change-style-polite",
    title: "Change Style: Polite",
    prompt: `Rewrite the document in a polite style.
Preserve the meaning, facts, and overall structure.
Improve wording and tone to match the requested style without adding commentary.
Return only the rewritten document.`
  },
  {
    id: "change-style-concise",
    title: "Change Style: Concise",
    prompt: `Rewrite the document in a concise style.
Preserve the meaning, facts, and overall structure.
Make the writing tighter and more direct without losing important details.
Return only the rewritten document.`
  },
  {
    id: "rewrite",
    title: "Rewrite",
    prompt: `Rewrite the document for clarity and flow.
Preserve the meaning and important details.
Improve readability, structure, and phrasing without adding commentary.
Return only the rewritten document.`
  }
];

function buildLegacyStylePrompt(prompt: string, style: string) {
  return prompt.replace(/\{\{style\}\}/g, style);
}

function buildLegacyTranslatePrompt(prompt: string, language: string) {
  return prompt.replace(/\{\{language\}\}/g, language);
}

function normalizeAiPromptTemplates(value: unknown): AiPromptTemplate[] {
  if (!Array.isArray(value)) return [];
  const normalized = value
    .map((entry, index) => {
      if (!entry || typeof entry !== "object") return null;
      const record = entry as Record<string, unknown>;
      const id =
        typeof record.id === "string" && record.id.trim()
          ? record.id.trim()
          : `ai-template-${index}`;
      const title =
        typeof record.title === "string" && record.title.trim()
          ? record.title
          : "Untitled Prompt";
      const prompt = typeof record.prompt === "string" ? record.prompt : "";
      return {
        id,
        title,
        prompt,
        openPreviewOnSuccess: Boolean(record.openPreviewOnSuccess)
      } satisfies AiPromptTemplate;
    })
    .filter((entry): entry is AiPromptTemplate => entry !== null);

  const uniqueIds = new Set<string>();
  return normalized.filter((entry) => {
    if (uniqueIds.has(entry.id)) return false;
    uniqueIds.add(entry.id);
    return true;
  });
}

function loadLegacyStylePresets() {
  try {
    const raw = localStorage.getItem(LEGACY_CHANGE_STYLE_PRESETS_STORAGE_KEY);
    if (!raw) return ["Friendly", "Professional", "Polite", "Concise"];
    const parsed = JSON.parse(raw);
    if (!Array.isArray(parsed)) return ["Friendly", "Professional", "Polite", "Concise"];
    const normalized = parsed
      .map((value) => (typeof value === "string" ? value.trim() : ""))
      .filter(Boolean);
    return normalized.length > 0
      ? Array.from(new Set(normalized))
      : ["Friendly", "Professional", "Polite", "Concise"];
  } catch {
    return ["Friendly", "Professional", "Polite", "Concise"];
  }
}

function loadAiPromptTemplates(): AiPromptTemplate[] {
  try {
    const raw = localStorage.getItem(AI_PROMPT_TEMPLATES_STORAGE_KEY);
    if (raw) {
      const parsed = JSON.parse(raw);
      const normalized = normalizeAiPromptTemplates(parsed);
      if (normalized.length > 0) {
        return normalized;
      }
    }
  } catch {
    // Fall through to legacy migration/defaults.
  }

  let legacyPrompts: Record<string, string> = {};
  try {
    const raw = localStorage.getItem(LEGACY_AI_PROMPTS_STORAGE_KEY);
    if (raw) {
      const parsed = JSON.parse(raw);
      if (parsed && typeof parsed === "object") {
        legacyPrompts = parsed as Record<string, string>;
      }
    }
  } catch {
    legacyPrompts = {};
  }

  const legacyMarkdownPrompt =
    legacyPrompts.markdownConversion ||
    localStorage.getItem(LEGACY_MARKDOWN_PROMPT_STORAGE_KEY) ||
    DEFAULT_AI_PROMPT_TEMPLATES[0].prompt;
  const legacyTranslateLanguage =
    localStorage.getItem(LEGACY_TRANSLATE_LANGUAGE_STORAGE_KEY)?.trim() || "English";
  const legacyStylePromptsBase =
    legacyPrompts.changeStyle ||
    `Rewrite the document in a {{style}} style.
Preserve the meaning, facts, and overall structure.
Improve wording and tone to match the requested style without adding commentary.
Return only the rewritten document.`;
  const legacyTranslatePromptBase =
    legacyPrompts.translate ||
    `Translate the document into {{language}}.
Preserve the meaning, intent, and structure as naturally as possible.
Keep Markdown formatting where it already exists or where it clearly improves readability.
Return only the translated document.`;
  const styleTemplates = loadLegacyStylePresets().map((style) => ({
    id: `change-style-${style.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`,
    title: `Change Style: ${style}`,
    prompt: buildLegacyStylePrompt(legacyStylePromptsBase, style)
  }));

  return [
    {
      ...DEFAULT_AI_PROMPT_TEMPLATES[0],
      prompt: legacyMarkdownPrompt
    },
    {
      ...DEFAULT_AI_PROMPT_TEMPLATES[1],
      prompt:
        legacyPrompts.proofreadSpelling ||
        DEFAULT_AI_PROMPT_TEMPLATES[1].prompt
    },
    {
      ...DEFAULT_AI_PROMPT_TEMPLATES[2],
      prompt: legacyPrompts.summarize || DEFAULT_AI_PROMPT_TEMPLATES[2].prompt
    },
    {
      id: `translate-${legacyTranslateLanguage.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`,
      title: `Translate to ${legacyTranslateLanguage}`,
      prompt: buildLegacyTranslatePrompt(legacyTranslatePromptBase, legacyTranslateLanguage)
    },
    ...styleTemplates,
    {
      ...DEFAULT_AI_PROMPT_TEMPLATES[8],
      prompt: legacyPrompts.rewrite || DEFAULT_AI_PROMPT_TEMPLATES[8].prompt
    }
  ];
}

function getAiPromptTemplateLabel(template: AiPromptTemplate) {
  return template.title.trim() || "Untitled Prompt";
}

const graphemeSegmenter =
  typeof Intl !== "undefined" && "Segmenter" in Intl
    ? new Intl.Segmenter(undefined, { granularity: "grapheme" })
    : null;
const wordSegmenter =
  typeof Intl !== "undefined" && "Segmenter" in Intl
    ? new Intl.Segmenter(undefined, { granularity: "word" })
    : null;
const sentenceSegmenter =
  typeof Intl !== "undefined" && "Segmenter" in Intl
    ? new Intl.Segmenter(undefined, { granularity: "sentence" })
    : null;

function getDocumentStats(text: string): DocumentStats {
  const normalized = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
  const characters = graphemeSegmenter
    ? Array.from(graphemeSegmenter.segment(normalized)).length
    : Array.from(normalized).length;
  const words = wordSegmenter
    ? Array.from(wordSegmenter.segment(normalized)).filter((segment) => segment.isWordLike).length
    : (normalized.match(/\b[\p{L}\p{N}][\p{L}\p{N}'’-]*/gu) ?? []).length;
  const sentences = sentenceSegmenter
    ? Array.from(sentenceSegmenter.segment(normalized)).filter(
        (segment) => segment.segment.trim().length > 0
      ).length
    : (normalized.match(/[^.!?]+(?:[.!?]+|$)/g) ?? [])
        .map((segment) => segment.trim())
        .filter(Boolean).length;

  return {
    characters,
    words,
    sentences,
    estimatedTokens: Math.round((words * 4) / 3)
  };
}

function getImportedTitle(filePath: string) {
  const filename = filePath.split(/[\\/]/).pop()?.trim() || DEFAULT_TITLE;
  const lastDot = filename.lastIndexOf(".");
  if (lastDot <= 0) return filename || DEFAULT_TITLE;
  const stripped = filename.slice(0, lastDot).trim();
  return stripped || filename || DEFAULT_TITLE;
}

function getFileLabel(filePath: string) {
  return filePath.split(/[\\/]/).pop()?.trim() || filePath;
}

function getErrorMessage(error: unknown, fallback: string) {
  return error instanceof Error && error.message ? error.message : fallback;
}

export default function App() {
  const [texts, setTexts] = useState<Text[]>([]);
  const [selectedTextId, setSelectedTextId] = useState<string | null>(null);
  const [textSearch, setTextSearch] = useState("");
  const [loadingTexts, setLoadingTexts] = useState(true);
  const [folders, setFolders] = useState<Folder[]>([]);
  const [loadingFolders, setLoadingFolders] = useState(true);

  const [title, setTitle] = useState("");
  const [lastPersistedTitle, setLastPersistedTitle] = useState("");
  const [body, setBody] = useState("");
  const [lastPersistedBody, setLastPersistedBody] = useState("");
  const [hasDraft, setHasDraft] = useState(false);
  const [restoredDraft, setRestoredDraft] = useState(false);
  const [latestManualVersionId, setLatestManualVersionId] = useState<string | null>(null);
  const [draftBaseVersionId, setDraftBaseVersionId] = useState<string | null>(null);

  const [historyOpen, setHistoryOpen] = useState(false);
  const [historyItems, setHistoryItems] = useState<HistoryEntry[]>([]);
  const [viewingVersion, setViewingVersion] = useState<HistoryEntry | null>(null);
  const [selectedHistoryId, setSelectedHistoryId] = useState<string | null>(null);
  const [confirmState, setConfirmState] = useState<ConfirmState | null>(null);
  const [settingsOpen, setSettingsOpen] = useState(false);
  const [dbExporting, setDbExporting] = useState(false);
  const [dbExportStatus, setDbExportStatus] = useState<DbExportStatus | null>(null);
  const [markdownPreview, setMarkdownPreview] = useState(false);
  const [editingFolderId, setEditingFolderId] = useState<string | null>(null);
  const [editingFolderName, setEditingFolderName] = useState("");
  const [editingTextId, setEditingTextId] = useState<string | null>(null);
  const [editingTextTitle, setEditingTextTitle] = useState("");
  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(() => {
    const stored = localStorage.getItem("textdb.expandedFolders");
    if (!stored) return new Set();
    try {
      const parsed = JSON.parse(stored);
      if (Array.isArray(parsed)) {
        return new Set(parsed.filter((value) => typeof value === "string"));
      }
    } catch {
      return new Set();
    }
    return new Set();
  });
  const [theme, setTheme] = useState<"dark" | "light">(() => {
    const storedTheme = localStorage.getItem("textdb.theme");
    if (storedTheme === "dark" || storedTheme === "light") {
      return storedTheme;
    }
    return storedTheme === "default" ? "dark" : "dark";
  });
  const [textSize, setTextSize] = useState(() => {
    const storedSize = Number(localStorage.getItem("textdb.textSize"));
    if (!Number.isNaN(storedSize) && storedSize >= 12 && storedSize <= 18) {
      return storedSize;
    }
    return 16;
  });
  const [showLineNumbers, setShowLineNumbers] = useState(() => {
    const stored = localStorage.getItem("textdb.lineNumbers");
    return stored === null ? true : stored === "true";
  });
  const [splitView, setSplitView] = useState(() => {
    const stored = localStorage.getItem("textdb.splitView");
    return stored === null ? true : stored === "true";
  });
  const [ollamaUrl, setOllamaUrl] = useState(() => {
    return localStorage.getItem("textdb.ollamaUrl") || DEFAULT_OLLAMA_URL;
  });
  const [ollamaModel, setOllamaModel] = useState(() => {
    return localStorage.getItem("textdb.ollamaModel") || "";
  });
  const [aiPromptTemplates, setAiPromptTemplates] = useState<AiPromptTemplate[]>(
    () => loadAiPromptTemplates()
  );
  const [expandedPromptId, setExpandedPromptId] = useState<string | null>(null);
  const [ollamaModels, setOllamaModels] = useState<string[]>([]);
  const [ollamaLoading, setOllamaLoading] = useState(false);
  const [ollamaError, setOllamaError] = useState<string | null>(null);
  const [conversionJob, setConversionJob] = useState<ConversionJob | null>(null);
  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
    return localStorage.getItem("textdb.sidebarCollapsed") === "true";
  });
  const [editorReady, setEditorReady] = useState(false);

  const bodyRef = useRef(body);
  const selectedTextIdRef = useRef<string | null>(selectedTextId);
  const historyOpenRef = useRef(historyOpen);
  const viewingVersionRef = useRef<HistoryEntry | null>(viewingVersion);
  const editorViewRef = useRef<EditorView | null>(null);
  const editorValueRef = useRef("");
  const lineNumbersCompartmentRef = useRef(new Compartment());
  const editableCompartmentRef = useRef(new Compartment());
  const themeCompartmentRef = useRef(new Compartment());
  const historySnapshotRef = useRef<HistorySnapshot | null>(null);
  const recentOpenRef = useRef(new Map<string, number>());
  const searchRestoreSplitRef = useRef<boolean | null>(null);
  const pendingEditorFocusRef = useRef(false);
  const ignoreTextBlurRef = useRef(false);
  const ignoreFolderBlurRef = useRef(false);


  bodyRef.current = body;
  selectedTextIdRef.current = selectedTextId;
  historyOpenRef.current = historyOpen;
  viewingVersionRef.current = viewingVersion;


  useEffect(() => {
    document.body.dataset.theme = theme === "dark" ? "default" : "light";
    localStorage.setItem("textdb.theme", theme);
  }, [theme]);

  useEffect(() => {
    document.documentElement.style.setProperty("--base-font-size", `${textSize}px`);
    localStorage.setItem("textdb.textSize", String(textSize));
  }, [textSize]);

  useEffect(() => {
    localStorage.setItem("textdb.sidebarCollapsed", String(sidebarCollapsed));
  }, [sidebarCollapsed]);

  useEffect(() => {
    localStorage.setItem("textdb.lineNumbers", String(showLineNumbers));
  }, [showLineNumbers]);

  useEffect(() => {
    localStorage.setItem("textdb.splitView", String(splitView));
  }, [splitView]);

  useEffect(() => {
    localStorage.setItem("textdb.ollamaUrl", ollamaUrl);
  }, [ollamaUrl]);

  useEffect(() => {
    localStorage.setItem("textdb.ollamaModel", ollamaModel);
  }, [ollamaModel]);

  useEffect(() => {
    localStorage.setItem(
      AI_PROMPT_TEMPLATES_STORAGE_KEY,
      JSON.stringify(aiPromptTemplates)
    );
  }, [aiPromptTemplates]);

  useEffect(() => {
    if (aiPromptTemplates.length === 0) {
      if (expandedPromptId !== null) {
        setExpandedPromptId(null);
      }
      return;
    }
    if (
      expandedPromptId === null ||
      !aiPromptTemplates.some((template) => template.id === expandedPromptId)
    ) {
      setExpandedPromptId(aiPromptTemplates[0].id);
    }
  }, [aiPromptTemplates, expandedPromptId]);

  useEffect(() => {
    localStorage.setItem(
      "textdb.expandedFolders",
      JSON.stringify(Array.from(expandedFolders))
    );
  }, [expandedFolders]);

  useEffect(() => {
    if (selectedTextId) {
      localStorage.setItem("textdb.selectedTextId", selectedTextId);
    }
  }, [selectedTextId]);

  const editorThemeExtension = useMemo(
    () =>
      EditorView.theme(
        {
          ".cm-content, .cm-scroller": {
            caretColor: theme === "dark" ? "#f5f5f5" : "#1f1f1f"
          },
          "&.cm-focused > .cm-scroller > .cm-cursorLayer .cm-cursor": {
            borderLeftColor: theme === "dark" ? "#f5f5f5" : "#1f1f1f",
            borderLeftWidth: "1.6px"
          },
          ".cm-dropCursor": {
            borderLeftColor: theme === "dark" ? "#f5f5f5" : "#1f1f1f",
            borderLeftWidth: "1.6px"
          },
          ".cm-fatCursor": {
            background: theme === "dark" ? "rgba(245, 245, 245, 0.45)" : "rgba(31, 31, 31, 0.28)"
          }
        },
        { dark: theme === "dark" }
      ),
    [theme]
  );

  const editorHostRef = useCallback((node: HTMLDivElement | null) => {
    if (!node) {
      if (editorViewRef.current) {
        editorViewRef.current.destroy();
        editorViewRef.current = null;
        setEditorReady(false);
      }
      return;
    }
    if (editorViewRef.current) return;
    const state = EditorState.create({
      doc: bodyRef.current,
      extensions: [
        EditorView.lineWrapping,
        history(),
        search(),
        keymap.of([...defaultKeymap, ...historyKeymap, ...searchKeymap]),
        themeCompartmentRef.current.of(editorThemeExtension),
        lineNumbersCompartmentRef.current.of([]),
        editableCompartmentRef.current.of(EditorView.editable.of(true)),
        EditorView.updateListener.of((update) => {
          if (!searchPanelOpen(update.state) && searchRestoreSplitRef.current !== null) {
            const nextSplitView = searchRestoreSplitRef.current;
            searchRestoreSplitRef.current = null;
            setSplitView(nextSplitView);
          }
          if (!update.docChanged) return;
          const value = update.state.doc.toString();
          editorValueRef.current = value;
          setBody(value);
        })
      ]
    });
    const view = new EditorView({
      state,
      parent: node
    });
    editorViewRef.current = view;
    editorValueRef.current = bodyRef.current;
    setEditorReady(true);
  }, [editorThemeExtension]);

  const isViewingHistory = viewingVersion !== null;
  const isConverting = conversionJob !== null;
  const isDirty = !isViewingHistory && body !== lastPersistedBody;
  const hasText = body.trim().length > 0;
  const showLineNumbersActive = showLineNumbers && (!markdownPreview || splitView);
  const hasSearch = textSearch.trim().length > 0;
  const documentStats = useMemo(() => getDocumentStats(body), [body]);
  const markdownHtml = useMemo(
    () => (markdownPreview ? markdownToHTML(body) : ""),
    [body, markdownPreview]
  );
  const normalizedOllamaUrl = useMemo(() => {
    const trimmed = ollamaUrl.trim();
    return (trimmed || DEFAULT_OLLAMA_URL).replace(/\/+$/, "");
  }, [ollamaUrl]);

  const folderById = useMemo(() => {
    const map = new Map<string, Folder>();
    for (const folder of folders) {
      map.set(folder.id, folder);
    }
    return map;
  }, [folders]);

  const visibleFolderIds = useMemo(() => {
    if (!hasSearch) return null;
    const visible = new Set<string>();
    for (const text of texts) {
      let current = text.folder_id ?? null;
      while (current) {
        if (visible.has(current)) break;
        visible.add(current);
        current = folderById.get(current)?.parent_id ?? null;
      }
    }
    return visible;
  }, [folderById, hasSearch, texts]);

  const entriesByParent = useMemo(() => {
    const map = new Map<string | null, SidebarEntry[]>();
    const addEntry = (parentId: string | null, entry: SidebarEntry) => {
      const list = map.get(parentId);
      if (list) {
        list.push(entry);
      } else {
        map.set(parentId, [entry]);
      }
    };

    for (const folder of folders) {
      if (hasSearch && visibleFolderIds && !visibleFolderIds.has(folder.id)) {
        continue;
      }
      addEntry(folder.parent_id ?? null, { kind: "folder", item: folder });
    }

    for (const text of texts) {
      addEntry(text.folder_id ?? null, { kind: "text", item: text });
    }

    for (const [key, list] of map.entries()) {
      list.sort((a, b) => b.item.updated_at - a.item.updated_at);
      map.set(key, list);
    }
    return map;
  }, [folders, hasSearch, texts, visibleFolderIds]);

  const folderChildCount = useMemo(() => {
    const counts = new Map<string, number>();
    for (const folder of folders) {
      if (!folder.parent_id) continue;
      counts.set(folder.parent_id, (counts.get(folder.parent_id) ?? 0) + 1);
    }
    for (const text of texts) {
      if (!text.folder_id) continue;
      counts.set(text.folder_id, (counts.get(text.folder_id) ?? 0) + 1);
    }
    return counts;
  }, [folders, texts]);

  const isFolderEmpty = useCallback(
    (folderId: string) => (folderChildCount.get(folderId) ?? 0) === 0,
    [folderChildCount]
  );

  const handleMarkdownPreviewClick = useCallback(
    (event: React.MouseEvent<HTMLDivElement>) => {
      const target = event.target as HTMLElement | null;
      const copyButton = target?.closest?.(".md-codeblock__copy") as HTMLElement | null;
      if (copyButton) {
        event.preventDefault();
        const encoded = copyButton.getAttribute("data-copy-code") ?? "";
        const text = decodeURIComponent(encoded);
        if (!text) return;
        writeClipboardText(text).catch(() => {
          if (navigator?.clipboard?.writeText) {
            navigator.clipboard.writeText(text);
          }
        });
        return;
      }
      const link = target?.closest?.("a");
      if (!link) return;
      const href = link.getAttribute("href");
      if (!href || href.startsWith("#") || href.startsWith("/")) return;
      event.preventDefault();
      openExternal(href);
    },
    []
  );

  useEffect(() => {
    if (!settingsOpen) return;
    const controller = new AbortController();
    const loadModels = async () => {
      setOllamaLoading(true);
      setOllamaError(null);
      try {
        const response = await fetch(`${normalizedOllamaUrl}/api/tags`, {
          signal: controller.signal
        });
        if (!response.ok) {
          throw new Error(`Ollama responded with ${response.status}`);
        }
        const data = await response.json();
        const models = Array.isArray(data?.models)
          ? data.models.map((model: { name?: string }) => model.name).filter(Boolean)
          : [];
        setOllamaModels(models);
        if (!ollamaModel && models.length > 0) {
          setOllamaModel(models[0]);
        }
      } catch (error) {
        if (controller.signal.aborted) return;
        setOllamaModels([]);
        setOllamaError("Unable to reach Ollama.");
      } finally {
        if (!controller.signal.aborted) {
          setOllamaLoading(false);
        }
      }
    };
    loadModels();
    return () => controller.abort();
  }, [normalizedOllamaUrl, settingsOpen]);

  useEffect(() => {
    if (!settingsOpen) return;
    setDbExportStatus(null);
  }, [settingsOpen]);

  const handlePrintMarkdown = useCallback(() => {
    if (!markdownPreview) return;
    document.body.classList.add("print-markdown");
    const cleanup = () => {
      document.body.classList.remove("print-markdown");
      window.removeEventListener("afterprint", cleanup);
    };
    window.addEventListener("afterprint", cleanup);
    requestAnimationFrame(() => {
      window.print();
    });
  }, [markdownPreview]);

  const openDocumentSearch = useCallback(() => {
    if (!selectedTextIdRef.current) return false;

    const revealEditor = markdownPreview && !splitView;
    if (revealEditor) {
      searchRestoreSplitRef.current = false;
      setSplitView(true);
    } else {
      searchRestoreSplitRef.current = null;
    }

    window.requestAnimationFrame(() => {
      const view = editorViewRef.current;
      if (!view) return;
      openSearchPanel(view);
      view.focus();
    });

    return true;
  }, [markdownPreview, splitView]);

  const handleCancelConversion = useCallback(() => {
    conversionJob?.controller.abort();
  }, [conversionJob]);

  const handleUpdateAiPromptTemplate = useCallback((
    templateId: string,
    field: "title" | "prompt",
    value: string
  ) => {
    setAiPromptTemplates((current) =>
      current.map((template) =>
        template.id === templateId
          ? {
              ...template,
              [field]: value
            }
          : template
      )
    );
  }, []);

  const handleAddAiPromptTemplate = useCallback(() => {
    const template: AiPromptTemplate = {
      id: crypto.randomUUID(),
      title: "New Prompt",
      prompt: ""
    };
    setAiPromptTemplates((current) => [...current, template]);
    setExpandedPromptId(template.id);
  }, []);

  const handleDeleteAiPromptTemplate = useCallback((templateId: string) => {
    setAiPromptTemplates((current) =>
      current.filter((template) => template.id !== templateId)
    );
    setExpandedPromptId((current) => (current === templateId ? null : current));
  }, []);

  const statusKey = useMemo(() => {
    if (isViewingHistory) return "history";
    if (isDirty) return "unsaved";
    if (hasDraft) return "draft";
    return "saved";
  }, [hasDraft, isDirty, isViewingHistory]);

  const canSave = !isViewingHistory && (isDirty || hasDraft);

  const statusLabel = useMemo(() => {
    switch (statusKey) {
      case "history":
        return "Viewing history";
      case "unsaved":
        return "Unsaved";
      case "draft":
        return "Draft autosaved";
      default:
        return "Saved";
    }
  }, [statusKey]);
  const conversionLabel = useMemo(() => {
    if (!conversionJob) return null;
    if (conversionJob.sourceTextId === selectedTextId) {
      return conversionJob.actionLabel;
    }
    return `${conversionJob.actionLabel}: ${conversionJob.sourceTitle}`;
  }, [conversionJob, selectedTextId]);

  const historyIconSrc = theme === "light" ? historyIconBright : historyIcon;
  const folderIconSrc = theme === "light" ? folderIconBright : folderIcon;
  const newFolderIconSrc = theme === "light" ? newFolderIconBright : newFolderIcon;
  const newTextIconSrc = theme === "light" ? newTextIconBright : newTextIcon;
  const openFileIconSrc = theme === "light" ? openFileIconBright : openFileIcon;
  const settingsIconSrc = theme === "light" ? settingsIconBright : settingsIcon;
  const sidebarCollapseIconSrc =
    theme === "light" ? sidebarCollapseIconBright : sidebarCollapseIcon;
  const sidebarExpandIconSrc =
    theme === "light" ? sidebarExpandIconBright : sidebarExpandIcon;


  useEffect(() => {
    const view = editorViewRef.current;
    if (!view) return;
    const extensions = showLineNumbersActive
      ? [lineNumbers(), highlightActiveLineGutter()]
      : [];
    view.dispatch({
      effects: lineNumbersCompartmentRef.current.reconfigure(extensions)
    });
  }, [editorReady, showLineNumbersActive]);

  useEffect(() => {
    const view = editorViewRef.current;
    if (!view) return;
    view.dispatch({
      effects: editableCompartmentRef.current.reconfigure(
        EditorView.editable.of(!isViewingHistory && (!markdownPreview || splitView))
      )
    });
  }, [editorReady, isViewingHistory, markdownPreview, splitView]);

  useEffect(() => {
    const view = editorViewRef.current;
    if (!view) return;
    view.dispatch({
      effects: themeCompartmentRef.current.reconfigure(editorThemeExtension)
    });
  }, [editorReady, editorThemeExtension]);


  useEffect(() => {
    const view = editorViewRef.current;
    if (!view) return;
    if (body === editorValueRef.current) return;
    view.dispatch({
      changes: { from: 0, to: view.state.doc.length, insert: body },
      annotations: Transaction.addToHistory.of(false)
    });
    editorValueRef.current = body;
  }, [body]);

  useEffect(() => {
    const view = editorViewRef.current;
    if (!view) return;
    view.requestMeasure();
  }, [markdownPreview, splitView, textSize, sidebarCollapsed, historyOpen]);

  useEffect(() => {
    if (!pendingEditorFocusRef.current) return;
    if (!selectedTextId || !editorReady || isViewingHistory) return;
    if (markdownPreview && !splitView) return;

    pendingEditorFocusRef.current = false;
    window.requestAnimationFrame(() => {
      editorViewRef.current?.focus();
    });
  }, [editorReady, isViewingHistory, markdownPreview, selectedTextId, splitView]);


  const refreshTexts = useCallback(async () => {
    setLoadingTexts(true);
    try {
      const trimmed = textSearch.trim();
      const rows = trimmed ? await searchTexts(trimmed) : await listTexts();
      setTexts(rows);
    } finally {
      setLoadingTexts(false);
    }
  }, [textSearch]);

  const refreshFolders = useCallback(async () => {
    setLoadingFolders(true);
    try {
      const rows = await listFolders();
      setFolders(rows);
    } finally {
      setLoadingFolders(false);
    }
  }, []);

  const isFolderExpanded = useCallback(
    (folderId: string) => {
      if (hasSearch) {
        return visibleFolderIds?.has(folderId) ?? false;
      }
      return expandedFolders.has(folderId);
    },
    [expandedFolders, hasSearch, visibleFolderIds]
  );

  const toggleFolderExpanded = useCallback((folderId: string) => {
    setExpandedFolders((prev) => {
      const next = new Set(prev);
      if (next.has(folderId)) {
        next.delete(folderId);
      } else {
        next.add(folderId);
      }
      return next;
    });
  }, []);

  const refreshVersions = useCallback(async (targetTextId?: string | null) => {
    const textId = targetTextId ?? selectedTextIdRef.current;
    if (!textId || !historyOpenRef.current) return;
    const [manualRows, draft] = await Promise.all([
      listVersions(textId),
      getDraft(textId)
    ]);
    const manualItems: HistoryEntry[] = manualRows.map((row) => ({
      id: row.id,
      created_at: row.created_at,
      kind: "manual",
      body: row.body
    }));
    const draftItem: HistoryEntry[] = draft
      ? [
          {
            id: `draft:${textId}`,
            created_at: draft.updated_at,
            kind: "draft",
            body: draft.body,
            baseVersionId: draft.base_version_id ?? null
          }
        ]
      : [];
    const combined = [...draftItem, ...manualItems].sort(
      (a, b) => b.created_at - a.created_at
    );
    setHistoryItems(combined);
  }, []);

  const runAiAction = useCallback(
    async ({ template }: AiActionRequest) => {
      if (!selectedTextId || !hasText || isViewingHistory || isConverting) return;
      if (!ollamaModel) {
        setConfirmState({
          title: "Ollama",
          message: "Select an Ollama model first.",
          actionLabel: "OK",
          onConfirm: () => {}
        });
        return;
      }

      const actionLabel = getAiPromptTemplateLabel(template);
      const prompt = template.prompt.trim();
      if (!prompt) {
        setConfirmState({
          title: "Prompt template",
          message: `The prompt template "${actionLabel}" is empty.`,
          actionLabel: "OK",
          onConfirm: () => {}
        });
        return;
      }

      const controller = new AbortController();
      const sourceTextId = selectedTextId;
      const sourceBody = body;
      const sourceTitle = title.trim() || DEFAULT_TITLE;
      const sourceDraftBaseVersionId = draftBaseVersionId;
      const fullPrompt = `${prompt}\n\nDocument:\n${sourceBody}`;

      setConversionJob({
        actionLabel,
        openPreviewOnSuccess: Boolean(template.openPreviewOnSuccess),
        sourceTextId,
        sourceTitle,
        sourceBody,
        sourceDraftBaseVersionId,
        controller
      });

      try {
        const response = await fetch(`${normalizedOllamaUrl}/api/generate`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          signal: controller.signal,
          body: JSON.stringify({
            model: ollamaModel,
            prompt: fullPrompt,
            stream: false
          })
        });
        if (!response.ok) {
          throw new Error(`Ollama responded with ${response.status}`);
        }
        const data = await response.json();
        const resultText = typeof data?.response === "string" ? data.response.trim() : "";
        if (!resultText) {
          throw new Error("Ollama returned an empty response.");
        }
        if (controller.signal.aborted) {
          return;
        }

        const hasLiveEditsOnSource =
          selectedTextIdRef.current === sourceTextId &&
          viewingVersionRef.current === null &&
          bodyRef.current !== sourceBody;

        if (hasLiveEditsOnSource) {
          setConfirmState({
            title: "AI edit skipped",
            message: `${actionLabel} finished, but the source text changed while it was running. The result was not applied.`,
            actionLabel: "OK",
            onConfirm: () => {}
          });
          return;
        }

        await upsertDraft(sourceTextId, resultText, sourceDraftBaseVersionId);

        const canApplyToVisibleEditor =
          selectedTextIdRef.current === sourceTextId &&
          viewingVersionRef.current === null;

        if (canApplyToVisibleEditor) {
          setBody(resultText);
          setLastPersistedBody(resultText);
          setHasDraft(true);
          setRestoredDraft(false);
          setDraftBaseVersionId(sourceDraftBaseVersionId);
          setSelectedHistoryId(`draft:${sourceTextId}`);
          setViewingVersion(null);
          historySnapshotRef.current = null;
          if (template.openPreviewOnSuccess) {
            setMarkdownPreview(true);
          }
        }

        await refreshTexts();
        if (selectedTextIdRef.current === sourceTextId && historyOpenRef.current) {
          await refreshVersions(sourceTextId);
        }
      } catch (error) {
        if (error instanceof Error && error.name === "AbortError") {
          return;
        }
        console.error("Failed to run AI edit", error);
        setConfirmState({
          title: "Ollama error",
          message: error instanceof Error ? error.message : `${actionLabel} failed.`,
          actionLabel: "OK",
          onConfirm: () => {}
        });
      } finally {
        setConversionJob((current) =>
          current?.controller === controller ? null : current
        );
      }
    },
    [
      body,
      draftBaseVersionId,
      hasText,
      isConverting,
      isViewingHistory,
      normalizedOllamaUrl,
      ollamaModel,
      refreshTexts,
      refreshVersions,
      selectedTextId,
      title
    ]
  );

  const handleOpenAiToolsMenu = useCallback(async () => {
    if (!selectedTextId || !hasText || isViewingHistory || isConverting) return;
    if (aiPromptTemplates.length === 0) {
      setConfirmState({
        title: "AI Tools",
        message: "Add at least one prompt template in Settings first.",
        actionLabel: "OK",
        onConfirm: () => {}
      });
      return;
    }

    const menu = await Menu.new({
      items: aiPromptTemplates.map((template) => ({
        text: getAiPromptTemplateLabel(template),
        action: () => {
          runAiAction({ template }).catch((error) => {
            console.error("Failed to run AI tool", error);
          });
        }
      }))
    });
    await menu.popup(undefined, getCurrentWindow());
  }, [
    aiPromptTemplates,
    hasText,
    isConverting,
    isViewingHistory,
    runAiAction,
    selectedTextId
  ]);

  useEffect(() => {
    refreshTexts().catch((error) => {
      console.error("Failed to load texts", error);
    });
  }, [refreshTexts]);

  useEffect(() => {
    refreshFolders().catch((error) => {
      console.error("Failed to load folders", error);
    });
  }, [refreshFolders]);

  useEffect(() => {
    if (selectedTextId || texts.length === 0) return;
    const storedId = localStorage.getItem("textdb.selectedTextId");
    const fallback = texts[0].id;
    const resolved = storedId && texts.some((text) => text.id === storedId)
      ? storedId
      : fallback;
    setSelectedTextId(resolved);
  }, [selectedTextId, texts]);

  useEffect(() => {
    if (!historyOpen) {
      setHistoryItems([]);
      return;
    }
    refreshVersions().catch((error) => {
      console.error("Failed to load versions", error);
    });
  }, [historyOpen, refreshVersions, selectedTextId]);

  useEffect(() => {
    if (!selectedTextId) {
      const view = editorViewRef.current;
      if (view) {
        closeSearchPanel(view);
      }
      searchRestoreSplitRef.current = null;
      setTitle("");
      setLastPersistedTitle("");
      setBody("");
      setLastPersistedBody("");
      setHasDraft(false);
      setRestoredDraft(false);
      setLatestManualVersionId(null);
      setDraftBaseVersionId(null);
      setViewingVersion(null);
      setSelectedHistoryId(null);
      historySnapshotRef.current = null;
      return;
    }

    let cancelled = false;
    const loadText = async () => {
      const [text, manualVersion, draft] = await Promise.all([
        getText(selectedTextId),
        getLatestManualVersion(selectedTextId),
        getDraft(selectedTextId)
      ]);

      if (cancelled) return;

      if (!text) {
        setSelectedTextId(null);
        localStorage.removeItem("textdb.selectedTextId");
        return;
      }

      const resolvedTitle = text.title || DEFAULT_TITLE;
      const resolvedBody = draft?.body ?? manualVersion?.body ?? "";
      const baseVersionId = draft?.base_version_id ?? manualVersion?.id ?? null;

      setTitle(resolvedTitle);
      setLastPersistedTitle(resolvedTitle);
      setBody(resolvedBody);
      setLastPersistedBody(resolvedBody);
      setHasDraft(Boolean(draft));
      setRestoredDraft(Boolean(draft));
      setLatestManualVersionId(manualVersion?.id ?? null);
      setDraftBaseVersionId(baseVersionId);
      setViewingVersion(null);
      setSelectedHistoryId(
        draft ? `draft:${selectedTextId}` : manualVersion?.id ?? null
      );
      historySnapshotRef.current = null;
    };

    loadText().catch((error) => {
      console.error("Failed to load text", error);
    });

    return () => {
      cancelled = true;
    };
  }, [selectedTextId]);

  useEffect(() => {
    if (!selectedTextId || !isDirty || isViewingHistory) return;

    const currentBody = body;
    const handle = window.setTimeout(() => {
      upsertDraft(selectedTextId, currentBody, draftBaseVersionId)
        .then(() => {
          if (bodyRef.current !== currentBody) return;
          setHasDraft(true);
          setLastPersistedBody(currentBody);
          setSelectedHistoryId(`draft:${selectedTextId}`);
          if (historyOpen) {
            refreshVersions().catch((error) => {
              console.error("Failed to refresh history", error);
            });
          }
        })
        .catch((error) => {
          console.error("Failed to autosave draft", error);
        });
    }, 600);

    return () => window.clearTimeout(handle);
  }, [
    body,
    draftBaseVersionId,
    historyOpen,
    isDirty,
    isViewingHistory,
    refreshVersions,
    selectedTextId
  ]);

  const handleNewText = useCallback(async () => {
    const { textId } = await createText(DEFAULT_TITLE, "", null);
    await refreshTexts();
    pendingEditorFocusRef.current = true;
    setMarkdownPreview(false);
    setSelectedTextId(textId);
  }, [refreshTexts]);

  const handleNewFolder = useCallback(async () => {
    const { folderId } = await createFolder(DEFAULT_FOLDER_NAME, null);
    await refreshFolders();
    setEditingTextId(null);
    setEditingTextTitle("");
    setEditingFolderId(folderId);
    setEditingFolderName(DEFAULT_FOLDER_NAME);
  }, [refreshFolders]);

  const clearFolderEditing = useCallback(() => {
    setEditingFolderId(null);
    setEditingFolderName("");
  }, []);

  const clearTextEditing = useCallback(() => {
    setEditingTextId(null);
    setEditingTextTitle("");
  }, []);

  const startEditingFolder = useCallback((folder: Folder) => {
    setEditingFolderId(folder.id);
    setEditingFolderName(folder.name);
    setEditingTextId(null);
    setEditingTextTitle("");
  }, []);

  const startEditingText = useCallback((text: Text) => {
    setEditingTextId(text.id);
    setEditingTextTitle(text.title);
    setEditingFolderId(null);
    setEditingFolderName("");
  }, []);

  const commitFolderEdit = useCallback(async () => {
    if (!editingFolderId) return;
    const folderId = editingFolderId;
    const nextName = editingFolderName.trim() || DEFAULT_FOLDER_NAME;
    const currentName = folderById.get(folderId)?.name ?? "";
    clearFolderEditing();
    if (nextName === currentName) return;
    await updateFolderName(folderId, nextName);
    await refreshFolders();
  }, [
    clearFolderEditing,
    editingFolderId,
    editingFolderName,
    folderById,
    refreshFolders
  ]);

  const commitTextEdit = useCallback(async () => {
    if (!editingTextId) return;
    const textId = editingTextId;
    const nextTitle = editingTextTitle.trim() || DEFAULT_TITLE;
    const currentTitle = texts.find((text) => text.id === textId)?.title ?? "";
    clearTextEditing();
    if (nextTitle === currentTitle) return;
    if (selectedTextId === textId) {
      setTitle(nextTitle);
      setLastPersistedTitle(nextTitle);
    }
    await updateTextTitle(textId, nextTitle);
    await refreshTexts();
  }, [
    clearTextEditing,
    editingTextId,
    editingTextTitle,
    refreshTexts,
    selectedTextId,
    texts
  ]);

  const buildFolderPath = useCallback(
    (folderId: string) => {
      const names: string[] = [];
      let current: string | null = folderId;
      const seen = new Set<string>();
      while (current) {
        if (seen.has(current)) break;
        seen.add(current);
        const folder = folderById.get(current);
        if (!folder) break;
        names.unshift(folder.name);
        current = folder.parent_id ?? null;
      }
      return names.join(" / ");
    },
    [folderById]
  );

  const folderPathList = useMemo(() => {
    return folders
      .map((folder) => ({
        id: folder.id,
        label: buildFolderPath(folder.id)
      }))
      .sort((a, b) => a.label.localeCompare(b.label));
  }, [buildFolderPath, folders]);

  const isDescendantFolder = useCallback(
    (folderId: string, potentialAncestorId: string) => {
      let current: string | null = folderById.get(folderId)?.parent_id ?? null;
      while (current) {
        if (current === potentialAncestorId) return true;
        current = folderById.get(current)?.parent_id ?? null;
      }
      return false;
    },
    [folderById]
  );

  const handleMoveTextToFolder = useCallback(
    async (textId: string, folderId: string | null) => {
      await moveTextToFolder(textId, folderId);
      await refreshTexts();
      if (folderId) {
        setExpandedFolders((prev) => {
          const next = new Set(prev);
          next.add(folderId);
          return next;
        });
      }
    },
    [refreshTexts]
  );

  const handleMoveFolderToFolder = useCallback(
    async (folderId: string, parentId: string | null) => {
      await moveFolder(folderId, parentId);
      await refreshFolders();
      if (parentId) {
        setExpandedFolders((prev) => {
          const next = new Set(prev);
          next.add(parentId);
          return next;
        });
      }
    },
    [refreshFolders]
  );

  const handleDeleteText = useCallback(
    async (promptId: string) => {
      await deleteText(promptId);
      await refreshTexts();
      if (selectedTextId === promptId) {
        setSelectedTextId(null);
        localStorage.removeItem("textdb.selectedTextId");
      }
    },
    [refreshTexts, selectedTextId]
  );

  const isQuickDeleteText = useCallback(
    async (text: Text) => {
      if ((text.title || "").trim() !== DEFAULT_TITLE) return false;
      if (text.id === selectedTextId && body.trim().length > 0) return false;

      const draft = await getDraft(text.id);
      if (draft) return false;

      const versions = await listVersions(text.id);
      if (versions.length === 0) return true;
      if (versions.length > 1) return false;
      return versions[0].body.trim().length === 0;
    },
    [body, selectedTextId]
  );

  const requestDeleteText = useCallback(
    async (text: Text) => {
      const skipConfirm = await isQuickDeleteText(text);
      if (skipConfirm) {
        await handleDeleteText(text.id);
        return;
      }
      setConfirmState({
        title: "Delete text",
        message: `Delete \"${text.title}\"? This removes all versions and drafts.`,
        actionLabel: "Delete text",
        onConfirm: () => handleDeleteText(text.id)
      });
    },
    [handleDeleteText, isQuickDeleteText]
  );

  const handleDeleteFolder = useCallback(
    async (folderId: string) => {
      await deleteFolder(folderId);
      await Promise.all([refreshFolders(), refreshTexts()]);
      setExpandedFolders((prev) => {
        const next = new Set(prev);
        next.delete(folderId);
        return next;
      });
      if (editingFolderId === folderId) {
        clearFolderEditing();
      }
    },
    [clearFolderEditing, editingFolderId, refreshFolders, refreshTexts]
  );

  const requestDeleteFolder = useCallback(
    async (folder: Folder) => {
      if (isFolderEmpty(folder.id)) {
        await handleDeleteFolder(folder.id);
        return;
      }
      setConfirmState({
        title: "Delete folder",
        message:
          "Delete this folder? Its subfolders and texts will move one level up.",
        actionLabel: "Delete folder",
        onConfirm: () => handleDeleteFolder(folder.id)
      });
    },
    [handleDeleteFolder, isFolderEmpty]
  );

  const handleTextContextMenu = useCallback(
    async (event: React.MouseEvent, text: Text) => {
      event.preventDefault();
      const textId = text.id;
      const items = [
        {
          text: "Top level",
          action: () => {
            handleMoveTextToFolder(textId, null).catch((error) => {
              console.error("Failed to move text", error);
            });
          }
        },
        ...folderPathList.map((folder) => ({
          text: folder.label,
          action: () => {
            handleMoveTextToFolder(textId, folder.id).catch((error) => {
              console.error("Failed to move text", error);
            });
          }
        }))
      ];

      const menu = await Menu.new({
        items: [
          {
            text: "Rename",
            action: () => startEditingText(text)
          },
          {
            text: "Delete",
            action: () => {
              requestDeleteText(text).catch((error) => {
                console.error("Failed to delete text", error);
              });
            }
          },
          {
            text: "Move to folder",
            items
          }
        ]
      });
      await menu.popup(undefined, getCurrentWindow());
    },
    [folderPathList, handleMoveTextToFolder, requestDeleteText, startEditingText]
  );

  const handleFolderContextMenu = useCallback(
    async (event: React.MouseEvent, folder: Folder) => {
      event.preventDefault();
      const moveTargets = [
        {
          text: "Top level",
          action: () => {
            handleMoveFolderToFolder(folder.id, null).catch((error) => {
              console.error("Failed to move folder", error);
            });
          }
        },
        ...folderPathList
          .filter(
            (candidate) =>
              candidate.id !== folder.id &&
              !isDescendantFolder(candidate.id, folder.id)
          )
          .map((candidate) => ({
            text: candidate.label,
            action: () => {
              handleMoveFolderToFolder(folder.id, candidate.id).catch((error) => {
                console.error("Failed to move folder", error);
              });
            }
          }))
      ];
      const menu = await Menu.new({
        items: [
          {
            text: "Rename",
            action: () => startEditingFolder(folder)
          },
          {
            text: "Delete",
            action: () => {
              requestDeleteFolder(folder).catch((error) => {
                console.error("Failed to delete folder", error);
              });
            }
          },
          {
            text: "Move to folder",
            items: moveTargets
          }
        ]
      });
      await menu.popup(undefined, getCurrentWindow());
    },
    [folderPathList, handleMoveFolderToFolder, isDescendantFolder, requestDeleteFolder, startEditingFolder]
  );

  const createTextFromFile = useCallback(
    async (filePath: string) => {
      try {
        const title = getImportedTitle(filePath);
        const contents = await readTextFile(filePath);
        if (contents.includes("\u0000")) {
          throw new Error("This file appears to be binary and cannot be opened as text.");
        }
        const { textId } = await createText(title, contents, null);
        await refreshTexts();
        setSelectedTextId(textId);
      } catch (error) {
        console.error("Failed to open text file", error);
        const fileLabel = getFileLabel(filePath);
        setConfirmState({
          title: "Open file error",
          message: `Unable to open "${fileLabel}" as text. ${getErrorMessage(
            error,
            "The file could not be decoded as text."
          )}`,
          actionLabel: "OK",
          onConfirm: () => {}
        });
      }
    },
    [refreshTexts]
  );

  const handleFilePaths = useCallback(
    async (paths: string[]) => {
      const now = Date.now();
      const recent = recentOpenRef.current;
      for (const path of paths) {
        const key = path.toLowerCase();
        const last = recent.get(key);
        if (last && now - last < 1000) continue;
        recent.set(key, now);
        await createTextFromFile(path);
      }
      for (const [key, timestamp] of recent.entries()) {
        if (now - timestamp > 2000) recent.delete(key);
      }
    },
    [createTextFromFile]
  );

  useEffect(() => {
    let unlisten: (() => void) | null = null;
    getCurrentWindow()
      .onDragDropEvent(async (event) => {
        if (event.payload.type !== "drop") return;
        await handleFilePaths(event.payload.paths ?? []);
      })
      .then((cleanup) => {
        unlisten = cleanup;
      })
      .catch((error) => {
        console.error("Failed to register drag/drop handler", error);
      });
    return () => {
      if (unlisten) unlisten();
    };
  }, [handleFilePaths]);

  useEffect(() => {
    let unlisten: (() => void) | null = null;
    listen<string[]>("file-opened", async (event) => {
      await handleFilePaths(event.payload ?? []);
    })
      .then((cleanup) => {
        unlisten = cleanup;
      })
      .catch((error) => {
        console.error("Failed to register file-open listener", error);
      });

    invoke<string[]>("take_pending_opens")
      .then((paths) => handleFilePaths(paths ?? []))
      .catch((error) => {
        console.error("Failed to load pending file opens", error);
      });

    return () => {
      if (unlisten) unlisten();
    };
  }, [handleFilePaths]);

  const handleOpenText = useCallback(async () => {
    const baseDir = await appDataDir();
    const path = await open({
      multiple: false,
      directory: false,
      defaultPath: baseDir
    });
    if (!path || Array.isArray(path)) return;
    await createTextFromFile(path);
  }, [createTextFromFile]);

  const handleExportDatabase = useCallback(async () => {
    setDbExportStatus(null);
    const selectedPath = await save({
      defaultPath: buildDatabaseExportFilename(),
      filters: [{ name: "SQLite Database", extensions: ["db", "sqlite"] }]
    });
    if (!selectedPath) return;

    const destinationPath =
      selectedPath.endsWith(".db") || selectedPath.endsWith(".sqlite")
        ? selectedPath
        : `${selectedPath}.db`;

    setDbExporting(true);
    let snapshotPath: string | null = null;

    try {
      if (selectedTextId && isDirty && !isViewingHistory) {
        await upsertDraft(selectedTextId, body, draftBaseVersionId);
        setHasDraft(true);
        setLastPersistedBody(body);
        setSelectedHistoryId(`draft:${selectedTextId}`);
        if (historyOpen) {
          await refreshVersions();
        }
      }

      const baseDir = await appDataDir();
      const sourcePath = await join(baseDir, "text.db");
      snapshotPath = await join(baseDir, `textdb-export-${Date.now()}.db`);

      if (destinationPath === sourcePath) {
        throw new Error("Choose a different destination than the live database file.");
      }

      if (await exists(snapshotPath)) {
        await remove(snapshotPath);
      }
      if (await exists(destinationPath)) {
        await remove(destinationPath);
      }

      await exportDatabaseSnapshot(snapshotPath);
      await copyFile(snapshotPath, destinationPath);

      setDbExportStatus({
        tone: "success",
        message: `Database exported to ${destinationPath}`
      });
    } catch (error) {
      console.error("Failed to export database", error);
      setDbExportStatus({
        tone: "error",
        message: error instanceof Error ? error.message : "Failed to export database."
      });
    } finally {
      if (snapshotPath && (await exists(snapshotPath).catch(() => false))) {
        await remove(snapshotPath).catch(() => {});
      }
      setDbExporting(false);
    }
  }, [
    body,
    draftBaseVersionId,
    historyOpen,
    isDirty,
    isViewingHistory,
    refreshVersions,
    selectedTextId
  ]);

  const handleSaveVersion = useCallback(async () => {
    if (!selectedTextId || !canSave) return;
    const normalizedTitle = title.trim() || DEFAULT_TITLE;
    if (normalizedTitle !== title) {
      setTitle(normalizedTitle);
    }
    const result = await saveManualVersion(selectedTextId, normalizedTitle, body);
    setLastPersistedBody(body);
    setLastPersistedTitle(normalizedTitle);
    setHasDraft(false);
    setRestoredDraft(false);
    setLatestManualVersionId(result.versionId);
    setDraftBaseVersionId(result.versionId);
    setSelectedHistoryId(result.versionId);
    await refreshTexts();
    await refreshVersions();
  }, [body, canSave, refreshTexts, refreshVersions, selectedTextId, title]);

  const applyTitleUpdate = useCallback((promptId: string, nextTitle: string) => {
    const now = Date.now();
    setTexts((prev) =>
      prev.map((text) =>
        text.id === promptId ? { ...text, title: nextTitle, updated_at: now } : text
      )
    );
  }, []);

  const handleTitleChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      const nextTitle = event.target.value;
      setTitle(nextTitle);
      if (!selectedTextId || isViewingHistory) return;
      applyTitleUpdate(selectedTextId, nextTitle);
      setLastPersistedTitle(nextTitle);
      updateTextTitle(selectedTextId, nextTitle).catch((error) => {
        console.error("Failed to update title", error);
      });
    },
    [applyTitleUpdate, isViewingHistory, selectedTextId]
  );

  const handleDiscardDraft = useCallback(async () => {
    if (!selectedTextId || isViewingHistory) return;
    await discardDraft(selectedTextId);
    const manualVersion = await getLatestManualVersion(selectedTextId);
    const resolvedBody = manualVersion?.body ?? "";
    setBody(resolvedBody);
    setLastPersistedBody(resolvedBody);
    setHasDraft(false);
    setRestoredDraft(false);
    setLatestManualVersionId(manualVersion?.id ?? null);
    setDraftBaseVersionId(manualVersion?.id ?? null);
    setSelectedHistoryId(manualVersion?.id ?? null);
    await refreshVersions();
  }, [isViewingHistory, refreshVersions, selectedTextId]);

  const handleExportText = useCallback(async () => {
    if (!hasText) return;
    const filename = `${title.trim() || DEFAULT_TITLE}.txt`;
    const path = await save({
      defaultPath: filename,
      filters: [{ name: "Text", extensions: ["txt"] }]
    });
    if (!path) return;
    const finalPath = path.endsWith(".txt") ? path : `${path}.txt`;
    await writeTextFile(finalPath, body);
  }, [body, hasText, title]);

  const handleExitHistory = useCallback(() => {
    const snapshot = historySnapshotRef.current;
    if (snapshot) {
      setBody(snapshot.body);
      setLastPersistedBody(snapshot.lastPersistedBody);
      setLastPersistedTitle(snapshot.lastPersistedTitle);
      setHasDraft(snapshot.hasDraft);
      setRestoredDraft(snapshot.restoredDraft);
      setDraftBaseVersionId(snapshot.draftBaseVersionId);
      setLatestManualVersionId(snapshot.latestManualVersionId);
    }
    setViewingVersion(null);
    setSelectedHistoryId(null);
    historySnapshotRef.current = null;
  }, []);

  const applyVersionAsCurrent = useCallback(
    (version: HistoryEntry) => {
      const snapshot = historySnapshotRef.current;
      if (snapshot) {
        setLastPersistedBody(snapshot.lastPersistedBody);
        setLastPersistedTitle(snapshot.lastPersistedTitle);
        setHasDraft(snapshot.hasDraft);
        setRestoredDraft(snapshot.restoredDraft);
        setLatestManualVersionId(snapshot.latestManualVersionId);
      }
      setDraftBaseVersionId(
        version.kind === "manual" ? version.id : version.baseVersionId ?? null
      );
      setBody(version.body);
      setLastPersistedBody(version.body);
      setViewingVersion(null);
      setSelectedHistoryId(version.id);
      historySnapshotRef.current = null;
    },
    []
  );

  const handleDeleteVersion = useCallback(
    async (version: HistoryEntry) => {
      if (!selectedTextId) return;

      const currentItems = historyItems;
      const index = currentItems.findIndex((item) => item.id === version.id);
      const olderCandidate =
        index >= 0 ? currentItems[index + 1] ?? null : null;
      const fallbackCandidate =
        index > 0 ? currentItems[index - 1] ?? null : null;
      const shouldAutoSelect =
        historyOpen && (!viewingVersion || viewingVersion.id === version.id);

      if (version.kind === "draft") {
        await discardDraft(selectedTextId);
        setHasDraft(false);
        setRestoredDraft(false);
        setDraftBaseVersionId(latestManualVersionId ?? null);
        if (historySnapshotRef.current) {
          historySnapshotRef.current.hasDraft = false;
          historySnapshotRef.current.restoredDraft = false;
          historySnapshotRef.current.draftBaseVersionId =
            latestManualVersionId ?? null;
        }
      } else {
        await deleteTextVersion(selectedTextId, version.id);
      }
      await refreshVersions();

      if (version.kind === "manual" && latestManualVersionId === version.id) {
        const manualVersion = await getLatestManualVersion(selectedTextId);
        const resolvedBody = manualVersion?.body ?? "";
        const nextManualId = manualVersion?.id ?? null;
        setLatestManualVersionId(nextManualId);
        setDraftBaseVersionId(nextManualId);
        if (historySnapshotRef.current) {
          historySnapshotRef.current.latestManualVersionId = nextManualId;
          historySnapshotRef.current.draftBaseVersionId = nextManualId;
        }
        if (!hasDraft && !isViewingHistory) {
          setBody(resolvedBody);
          setLastPersistedBody(resolvedBody);
        }
      }

      if (shouldAutoSelect) {
        if (olderCandidate) {
          applyVersionAsCurrent(olderCandidate);
        } else if (fallbackCandidate) {
          applyVersionAsCurrent(fallbackCandidate);
        } else {
          handleExitHistory();
        }
      }
    },
    [
      applyVersionAsCurrent,
      handleExitHistory,
      hasDraft,
      isViewingHistory,
      historyOpen,
      latestManualVersionId,
      refreshVersions,
      selectedTextId,
      historyItems,
      viewingVersion
    ]
  );

  const handleConfirm = useCallback(async () => {
    if (!confirmState) return;
    const action = confirmState.onConfirm;
    setConfirmState(null);
    try {
      await action();
    } catch (error) {
      console.error("Delete failed", error);
    }
  }, [confirmState]);

  const handleTitleBlur = useCallback(async () => {
    if (!selectedTextId || isViewingHistory) return;
    const normalizedTitle = title.trim() || DEFAULT_TITLE;
    if (normalizedTitle !== title) {
      setTitle(normalizedTitle);
      applyTitleUpdate(selectedTextId, normalizedTitle);
    }
    if (normalizedTitle === lastPersistedTitle) return;
    await updateTextTitle(selectedTextId, normalizedTitle);
    setLastPersistedTitle(normalizedTitle);
    await refreshTexts();
  }, [
    applyTitleUpdate,
    isViewingHistory,
    lastPersistedTitle,
    refreshTexts,
    selectedTextId,
    title
  ]);

  const handleToggleHistory = useCallback(() => {
    if (historyOpen && viewingVersion) {
      const snapshot = historySnapshotRef.current;
      if (snapshot) {
        setBody(snapshot.body);
        setLastPersistedBody(snapshot.lastPersistedBody);
        setLastPersistedTitle(snapshot.lastPersistedTitle);
        setHasDraft(snapshot.hasDraft);
        setRestoredDraft(snapshot.restoredDraft);
        setDraftBaseVersionId(snapshot.draftBaseVersionId);
        setLatestManualVersionId(snapshot.latestManualVersionId);
      }
      setViewingVersion(null);
      historySnapshotRef.current = null;
    }
    setHistoryOpen((prev) => !prev);
  }, [historyOpen, viewingVersion]);

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.defaultPrevented) return;
      const isFind =
        (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "f";
      if (isFind && !settingsOpen && !confirmState) {
        const opened = openDocumentSearch();
        if (opened) {
          event.preventDefault();
          return;
        }
      }

      const isSave =
        (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s";
      if (isSave) {
        event.preventDefault();
        handleSaveVersion().catch((error) => {
          console.error("Failed to save version", error);
        });
        return;
      }

      if (event.key === "Tab") return;
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [confirmState, handleSaveVersion, openDocumentSearch, settingsOpen]);

  const renderTextItem = (text: Text) => (
    <div
      key={text.id}
      className={`prompt-item${text.id === selectedTextId ? " is-active" : ""}`}
      onClick={() => {
        if (editingTextId === text.id) return;
        setSelectedTextId(text.id);
      }}
      onContextMenu={(event) => handleTextContextMenu(event, text)}
      role="button"
      tabIndex={0}
      onKeyDown={(event) => {
        if (event.key === "Enter" || event.key === " ") {
          event.preventDefault();
          setSelectedTextId(text.id);
        }
      }}
    >
      <div className="prompt-item__content">
        {editingTextId === text.id ? (
          <input
            className="prompt-item__input"
            value={editingTextTitle}
            onChange={(event) => setEditingTextTitle(event.target.value)}
            onClick={(event) => event.stopPropagation()}
            onFocus={(event) => event.currentTarget.select()}
            onKeyDown={(event) => {
              if (event.key === "Enter") {
                event.preventDefault();
                commitTextEdit().catch((error) => {
                  console.error("Failed to rename text", error);
                });
              } else if (event.key === "Escape") {
                event.preventDefault();
                ignoreTextBlurRef.current = true;
                clearTextEditing();
              }
            }}
            onBlur={() => {
              if (ignoreTextBlurRef.current) {
                ignoreTextBlurRef.current = false;
                return;
              }
              commitTextEdit().catch((error) => {
                console.error("Failed to rename text", error);
              });
            }}
            autoFocus
          />
        ) : (
          <div className="prompt-item__title">{text.title}</div>
        )}
      </div>
      <button
        className="prompt-item__delete"
        onClick={(event) => {
          event.stopPropagation();
          requestDeleteText(text).catch((error) => {
            console.error("Failed to delete text", error);
          });
        }}
        aria-label="Delete text"
        title="Delete text"
      >
        ×
      </button>
    </div>
  );

  const renderFolder = (folder: Folder) => {
    if (hasSearch && !visibleFolderIds?.has(folder.id)) return null;
    const expanded = isFolderExpanded(folder.id);
    const childEntries = entriesByParent.get(folder.id) ?? [];

    return (
      <div key={folder.id} className="folder-node">
        <div
          className={`folder-item${expanded ? " is-open" : ""}`}
          onClick={() => {
            if (editingFolderId === folder.id) return;
            toggleFolderExpanded(folder.id);
          }}
          onContextMenu={(event) => handleFolderContextMenu(event, folder)}
        >
          <div className="folder-item__lead">
            <button
              className="folder-item__toggle"
              type="button"
              aria-label={expanded ? "Collapse folder" : "Expand folder"}
              onClick={(event) => {
                event.stopPropagation();
                toggleFolderExpanded(folder.id);
              }}
            >
              {expanded ? "▾" : "▸"}
            </button>
            <img src={folderIconSrc} alt="" className="folder-item__icon" />
          </div>
          {editingFolderId === folder.id ? (
            <input
              className="folder-item__input"
              value={editingFolderName}
              onChange={(event) => setEditingFolderName(event.target.value)}
              onClick={(event) => event.stopPropagation()}
              onFocus={(event) => event.currentTarget.select()}
              onKeyDown={(event) => {
                if (event.key === "Enter") {
                  event.preventDefault();
                  commitFolderEdit().catch((error) => {
                    console.error("Failed to rename folder", error);
                  });
                } else if (event.key === "Escape") {
                  event.preventDefault();
                  ignoreFolderBlurRef.current = true;
                  clearFolderEditing();
                }
              }}
              onBlur={() => {
                if (ignoreFolderBlurRef.current) {
                  ignoreFolderBlurRef.current = false;
                  return;
                }
                commitFolderEdit().catch((error) => {
                  console.error("Failed to rename folder", error);
                });
              }}
              autoFocus
            />
          ) : (
            <div className="folder-item__title">{folder.name}</div>
          )}
          <button
            className="folder-item__delete"
            onClick={(event) => {
              event.stopPropagation();
              requestDeleteFolder(folder).catch((error) => {
                console.error("Failed to delete folder", error);
              });
            }}
            aria-label="Delete folder"
            title="Delete folder"
          >
            ×
          </button>
        </div>
        {expanded && childEntries.length > 0 ? (
          <div className="folder-children">
            {childEntries.map((entry) =>
              entry.kind === "folder"
                ? renderFolder(entry.item)
                : renderTextItem(entry.item)
            )}
          </div>
        ) : null}
      </div>
    );
  };

  return (
    <div className={`app app--theme-${theme}${sidebarCollapsed ? " app--sidebar-collapsed" : ""}`}>
      {!sidebarCollapsed ? (
        <aside className="sidebar">
          <div className="sidebar__header">
            <div className="sidebar__title-row">
              <div className="app-title">TextDB</div>
            </div>
            <input
              className="search"
              placeholder="Search texts"
              value={textSearch}
              onChange={(event) => setTextSearch(event.target.value)}
            />
          </div>
          <div className="prompt-list">
            <div className="prompt-list__inner">
              {loadingTexts || loadingFolders ? (
                <div className="empty">Loading…</div>
              ) : hasSearch && texts.length === 0 ? (
                <div className="empty">No matching texts.</div>
              ) : texts.length === 0 && folders.length === 0 ? (
                <div className="empty">No texts yet.</div>
              ) : (
                <>
                  {(entriesByParent.get(null) ?? []).map((entry) =>
                    entry.kind === "folder"
                      ? renderFolder(entry.item)
                      : renderTextItem(entry.item)
                  )}
                </>
              )}
            </div>
          </div>
          <div className="sidebar__footer">
            <button
              className="icon-button"
              onClick={handleOpenText}
              aria-label="Open text"
              title="Open text"
              type="button"
            >
              <img src={openFileIconSrc} alt="" className="icon-button__img" />
            </button>
            <button
              className="icon-button"
              onClick={handleNewText}
              aria-label="New text"
              title="New text"
              type="button"
            >
              <img src={newTextIconSrc} alt="" className="icon-button__img" />
            </button>
            <button
              className="icon-button"
              onClick={handleNewFolder}
              aria-label="New folder"
              title="New folder"
              type="button"
            >
              <img src={newFolderIconSrc} alt="" className="icon-button__img" />
            </button>
            <button
              className="icon-button"
              onClick={() => setSettingsOpen(true)}
              aria-label="Open settings"
              title="Settings"
              type="button"
            >
              <img src={settingsIconSrc} alt="" className="icon-button__img" />
            </button>
            <button
              className="icon-button"
              onClick={() => setSidebarCollapsed(true)}
              aria-label="Collapse sidebar"
              title="Collapse sidebar"
              type="button"
            >
              <img src={sidebarCollapseIconSrc} alt="" className="icon-button__img" />
            </button>
          </div>
        </aside>
      ) : null}

      <main className="workspace">
        <div className="workspace__body">
          {!selectedTextId ? (
            <>
              <div className="empty-state">
                <div className="empty-state__title">Create your first text</div>
                <div className="empty-state__subtitle">
                  Everything stays offline in a single SQLite database.
                </div>
                <button className="button button--primary" onClick={handleNewText}>
                  New Text
                </button>
              </div>
              {sidebarCollapsed ? (
                <div className="editor__footer">
                  <button
                    className="icon-button"
                    onClick={() => setSidebarCollapsed(false)}
                    aria-label="Expand sidebar"
                    title="Expand sidebar"
                    type="button"
                  >
                    <img src={sidebarExpandIconSrc} alt="" className="icon-button__img" />
                  </button>
                </div>
              ) : null}
            </>
          ) : (
            <div
              className={`workspace__content${
                historyOpen ? " workspace__content--history" : ""
              }`}
            >
            <section className="editor">
              <div className="editor__header">
                <div className="editor__title-row">
                  <input
                    className="title-input"
                    value={title}
                    onChange={handleTitleChange}
                    onBlur={handleTitleBlur}
                    placeholder="Text title"
                    disabled={isViewingHistory}
                  />
                  <button
                    className={`icon-button${historyOpen ? " is-active" : ""}`}
                    onClick={handleToggleHistory}
                    aria-label={historyOpen ? "Close history" : "Open history"}
                    title={historyOpen ? "Close history" : "Open history"}
                    type="button"
                  >
                    <img src={historyIconSrc} alt="" className="icon-button__img" />
                  </button>
                </div>
              </div>

              <div
                className={`editor__textarea-wrap${
                  markdownPreview && !splitView ? " editor__textarea-wrap--preview" : ""
                }${markdownPreview && splitView ? " editor__textarea-wrap--split" : ""}`}
              >
                <div
                  ref={editorHostRef}
                  className={`editor__codemirror${
                    markdownPreview && !splitView ? " editor__codemirror--hidden" : ""
                  }`}
                />
                <div
                  className={`markdown-preview md-root${markdownPreview ? "" : " markdown-preview--hidden"}`}
                  dangerouslySetInnerHTML={{ __html: markdownHtml }}
                  onClick={handleMarkdownPreviewClick}
                />
              </div>

              <div className="editor__footer">
                {sidebarCollapsed ? (
                  <button
                    className="icon-button"
                    onClick={() => setSidebarCollapsed(false)}
                    aria-label="Expand sidebar"
                    title="Expand sidebar"
                    type="button"
                  >
                    <img src={sidebarExpandIconSrc} alt="" className="icon-button__img" />
                  </button>
                ) : null}
                {hasText || isConverting ? (
                  <>
                    {hasText ? (
                      <button
                        className="button"
                        type="button"
                        onClick={() => setMarkdownPreview((value) => !value)}
                      >
                        {markdownPreview
                          ? splitView
                            ? "Hide Preview"
                            : "Edit"
                          : "Preview Markdown"}
                      </button>
                    ) : null}
                    <button
                      className="button"
                      type="button"
                      onClick={isConverting ? handleCancelConversion : handleOpenAiToolsMenu}
                      disabled={
                        isConverting
                          ? false
                          : !ollamaModel || isViewingHistory || !hasText || aiPromptTemplates.length === 0
                      }
                    >
                      {isConverting ? "Cancel AI Edit" : "AI Tools"}
                    </button>
                    {hasText ? (
                      <button className="button" onClick={handleExportText}>
                        Export Text
                      </button>
                    ) : null}
                    {hasText && markdownPreview ? (
                      <button className="button" type="button" onClick={handlePrintMarkdown}>
                        Print
                      </button>
                    ) : null}
                  </>
                ) : null}
                {hasDraft && !isViewingHistory ? (
                  <button
                    className="button"
                    onClick={() =>
                      setConfirmState({
                        title: "Discard draft",
                        message: "Discard this draft? This cannot be undone.",
                        actionLabel: "Discard draft",
                        onConfirm: handleDiscardDraft
                      })
                    }
                  >
                    Discard Draft
                  </button>
                ) : null}
                <div className="editor__footer-status">
                  <div className="status-line">
                    <span className={`status status--${statusKey}`}></span>
                    {statusLabel}
                  </div>
                  {conversionLabel ? (
                    <div className="status-line status-line--secondary">{conversionLabel}</div>
                  ) : null}
                  <div className="editor__stats" aria-label="Document statistics">
                    <span>{documentStats.characters} chars</span>
                    <span>{documentStats.words} words</span>
                    <span>{documentStats.sentences} sentences</span>
                    <span>{documentStats.estimatedTokens} est. tokens</span>
                  </div>
                </div>
                <button
                  className="button button--primary button--save"
                  onClick={handleSaveVersion}
                  disabled={!canSave}
                >
                  Save Version (⌘S)
                </button>
              </div>
            </section>

            {historyOpen ? (
              <aside className="history">
                <div className="history__header">
                  <span>History</span>
                  <button
                    className="history__close"
                    onClick={handleToggleHistory}
                    aria-label="Close history"
                    title="Close history"
                    type="button"
                  >
                    ×
                  </button>
                </div>
                <div className="history__list">
                  {historyItems.length === 0 ? (
                    <div className="empty">No versions yet.</div>
                  ) : (
                    historyItems.map((version) => (
                      <div
                        key={version.id}
                        className={`history__item${
                          selectedHistoryId === version.id ? " is-active" : ""
                        }`}
                        onClick={() => applyVersionAsCurrent(version)}
                        role="button"
                        tabIndex={0}
                        onKeyDown={(event) => {
                          if (event.key === "Enter" || event.key === " ") {
                            event.preventDefault();
                            applyVersionAsCurrent(version);
                          }
                        }}
                      >
                        <div className="history__item-content">
                          <div className="history__item-title">
                            {formatDate(version.created_at)}
                          </div>
                          <div className="history__item-meta">
                            {version.kind === "draft" ? "Draft" : "Manual save"}
                          </div>
                        </div>
                        <button
                          className="history__item-delete"
                          onClick={(event) => {
                            event.stopPropagation();
                            setConfirmState({
                              title:
                                version.kind === "draft"
                                  ? "Discard draft"
                                  : "Delete version",
                              message:
                                version.kind === "draft"
                                  ? "Discard this draft? This cannot be undone."
                                  : "Delete this version? This cannot be undone.",
                              actionLabel:
                                version.kind === "draft"
                                  ? "Discard draft"
                                  : "Delete version",
                              onConfirm: () => handleDeleteVersion(version)
                            });
                          }}
                          aria-label={
                            version.kind === "draft"
                              ? "Discard draft"
                              : "Delete version"
                          }
                          title={
                            version.kind === "draft"
                              ? "Discard draft"
                              : "Delete version"
                          }
                        >
                          ×
                        </button>
                      </div>
                    ))
                  )}
                </div>
              </aside>
            ) : null}
            </div>
          )}
        </div>
      </main>

      {settingsOpen ? (
        <div className="settings-overlay">
          <div
            className="settings-overlay__backdrop"
            onClick={() => setSettingsOpen(false)}
          />
          <div className="settings-panel" role="dialog" aria-modal="true">
            <div className="settings-panel__header">
              <div className="settings-panel__title">Settings</div>
              <button
                className="icon-button icon-button--ghost"
                onClick={() => setSettingsOpen(false)}
                aria-label="Close settings"
                title="Close settings"
                type="button"
              >
                <span aria-hidden="true">×</span>
              </button>
            </div>
            <div className="settings-panel__body">
              <div className="settings-panel__section-title">Interface</div>
              <div className="settings-panel__section">
                <label className="settings-panel__label" htmlFor="theme-select">
                  Theme
                </label>
                <select
                  id="theme-select"
                  className="settings-panel__select"
                  value={theme}
                  onChange={(event) =>
                    setTheme(event.target.value as "dark" | "light")
                  }
                >
                  <option value="dark">Dark</option>
                  <option value="light">Bright</option>
                </select>
              </div>
              <div className="settings-panel__section settings-panel__section--row">
                <label className="settings-panel__label" htmlFor="line-numbers-toggle">
                  Line numbers
                </label>
                <input
                  id="line-numbers-toggle"
                  type="checkbox"
                  checked={showLineNumbers}
                  onChange={(event) => setShowLineNumbers(event.target.checked)}
                />
              </div>
              <div className="settings-panel__section settings-panel__section--row">
                <label className="settings-panel__label" htmlFor="split-view-toggle">
                  Split view
                </label>
                <input
                  id="split-view-toggle"
                  type="checkbox"
                  checked={splitView}
                  onChange={(event) => setSplitView(event.target.checked)}
                />
              </div>
              <div className="settings-panel__section">
                <label className="settings-panel__label" htmlFor="text-size">
                  Text size
                </label>
                <div className="settings-panel__slider-row">
                  <input
                    id="text-size"
                    className="settings-panel__range"
                    type="range"
                    min={12}
                    max={18}
                    step={1}
                    value={textSize}
                    onChange={(event) => setTextSize(Number(event.target.value))}
                  />
                  <div className="settings-panel__value">{textSize}px</div>
                </div>
              </div>
              <div className="settings-panel__section-title">Ollama</div>
              <div className="settings-panel__section">
                <label className="settings-panel__label" htmlFor="ollama-url">
                  URL
                </label>
                <input
                  id="ollama-url"
                  className="settings-panel__input"
                  type="text"
                  value={ollamaUrl}
                  onChange={(event) => setOllamaUrl(event.target.value)}
                  placeholder={DEFAULT_OLLAMA_URL}
                />
              </div>
              <div className="settings-panel__section">
                <label className="settings-panel__label" htmlFor="ollama-model">
                  Model
                </label>
                <select
                  id="ollama-model"
                  className="settings-panel__select"
                  value={ollamaModel}
                  onChange={(event) => setOllamaModel(event.target.value)}
                  disabled={ollamaLoading}
                >
                  {ollamaModels.length > 0 ? (
                    ollamaModels.map((model) => (
                      <option key={model} value={model}>
                        {model}
                      </option>
                    ))
                  ) : ollamaModel ? (
                    <option value={ollamaModel}>{ollamaModel}</option>
                  ) : (
                    <option value="">
                      {ollamaLoading ? "Loading models…" : "No models found"}
                    </option>
                  )}
                </select>
                {ollamaError ? (
                  <div className="settings-panel__hint">{ollamaError}</div>
                ) : null}
              </div>
              <div className="settings-panel__section-title">Prompts</div>
              <div className="settings-panel__section settings-panel__section--flush">
                <button
                  className="button"
                  type="button"
                  onClick={handleAddAiPromptTemplate}
                >
                  Add Prompt Template
                </button>
                {aiPromptTemplates.map((template) => {
                  const isOpen = expandedPromptId === template.id;
                  return (
                    <div
                      key={template.id}
                      className={`prompt-accordion${isOpen ? " is-open" : ""}`}
                    >
                      <button
                        className="prompt-accordion__toggle"
                        type="button"
                        onClick={() =>
                          setExpandedPromptId((current) =>
                            current === template.id ? null : template.id
                          )
                        }
                      >
                        <span>{getAiPromptTemplateLabel(template)}</span>
                        <span className="prompt-accordion__indicator" aria-hidden="true">
                          {isOpen ? "−" : "+"}
                        </span>
                      </button>
                      {isOpen ? (
                        <div className="prompt-accordion__body">
                          <label className="settings-panel__label">
                            Title
                          </label>
                          <input
                            className="settings-panel__input"
                            type="text"
                            value={template.title}
                            onChange={(event) =>
                              handleUpdateAiPromptTemplate(
                                template.id,
                                "title",
                                event.target.value
                              )
                            }
                            placeholder="Prompt title"
                          />
                          <label className="settings-panel__label">
                            Prompt
                          </label>
                          <textarea
                            className="settings-panel__textarea"
                            value={template.prompt}
                            onChange={(event) =>
                              handleUpdateAiPromptTemplate(
                                template.id,
                                "prompt",
                                event.target.value
                              )
                            }
                            rows={7}
                          />
                          <div className="prompt-accordion__actions">
                            <button
                              className="button button--danger"
                              type="button"
                              onClick={() => handleDeleteAiPromptTemplate(template.id)}
                            >
                              Remove Template
                            </button>
                          </div>
                        </div>
                      ) : null}
                    </div>
                  );
                })}
              </div>
              <div className="settings-panel__section-title">Export</div>
              <div className="settings-panel__section">
                <button
                  className="button"
                  onClick={() => {
                    handleExportDatabase().catch((error) => {
                      console.error("Failed to export database", error);
                    });
                  }}
                  disabled={dbExporting}
                  type="button"
                >
                  {dbExporting ? "Exporting…" : "Export DB"}
                </button>
                <div className="settings-panel__hint">
                  Save a backup copy of the current SQLite database.
                </div>
                {dbExportStatus ? (
                  <div
                    className={`settings-panel__status settings-panel__status--${dbExportStatus.tone}`}
                  >
                    {dbExportStatus.message}
                  </div>
                ) : null}
              </div>
            </div>
          </div>
        </div>
      ) : null}

      {confirmState ? (
        <div className="modal">
          <div className="modal__overlay" onClick={() => setConfirmState(null)} />
          <div className="modal__card" role="dialog" aria-modal="true">
            <div className="modal__title">{confirmState.title}</div>
            <div className="modal__message">{confirmState.message}</div>
            <div className="modal__actions">
              <button className="button" onClick={() => setConfirmState(null)}>
                Cancel
              </button>
              <button className="button button--danger" onClick={handleConfirm}>
                {confirmState.actionLabel ?? "Delete"}
              </button>
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
}