Upload 11 files

app.js

@@ -0,0 +1,1069 @@
+const uiStorageKey = "memo-ui-state-v1";
+
+if (new URLSearchParams(window.location.search).get("device") === "mobile") {
+  document.documentElement.classList.add("force-mobile");
+}
+
+const starterNotes = [
+  {
+    id: crypto.randomUUID(),
+    folder: "notes",
+    body: "欢迎使用备忘录\n\n左侧选择文件夹，中间选择笔记，右侧直接编辑。第一行会自动作为标题。",
+    createdAt: Date.now() - 1000 * 60 * 60 * 24,
+    updatedAt: Date.now() - 1000 * 60 * 12,
+    version: 1
+  },
+  {
+    id: crypto.randomUUID(),
+    folder: "notes",
+    body: "待办清单\n\n- 记录想法\n- 整理项目\n- 做一个真正好用的 Web 版笔记",
+    createdAt: Date.now() - 1000 * 60 * 60 * 3,
+    updatedAt: Date.now() - 1000 * 60 * 35,
+    version: 1
+  }
+];
+
+const authStatus = await getAuthStatus();
+const state = authStatus.authenticated
+  ? await loadState()
+  : hydrateState({ notes: [], folders: defaultFolders() });
+let saveTimer = null;
+let saveStatusTimer = null;
+const saveDelay = 700;
+const maxNoteBodyLength = 1024 * 1024;
+const els = {
+  authGate: document.querySelector("#authGate"),
+  authForm: document.querySelector("#authForm"),
+  authTitle: document.querySelector("#authTitle"),
+  authPassword: document.querySelector("#authPassword"),
+  authSubmit: document.querySelector("#authSubmit"),
+  authMessage: document.querySelector("#authMessage"),
+  folderList: document.querySelector("#folderList"),
+  newFolder: document.querySelector("#newFolder"),
+  listTitle: document.querySelector("#listTitle"),
+  listCount: document.querySelector("#listCount"),
+  noteList: document.querySelector("#noteList"),
+  newNote: document.querySelector("#newNote"),
+  deleteNote: document.querySelector("#deleteNote"),
+  previewToggle: document.querySelector("#previewToggle"),
+  changePassword: document.querySelector("#changePassword"),
+  logout: document.querySelector("#logout"),
+  searchInput: document.querySelector("#searchInput"),
+  mobileBack: document.querySelector("#mobileBack"),
+  mobileBackLabel: document.querySelector("#mobileBackLabel"),
+  mobileTitle: document.querySelector("#mobileTitle"),
+  mobileSearchInput: document.querySelector("#mobileSearchInput"),
+  mobileSearchWrap: document.querySelector("#mobileSearchWrap"),
+  mobileEdit: document.querySelector("#mobileEdit"),
+  mobilePreviewToggle: document.querySelector("#mobilePreviewToggle"),
+  mobileSave: document.querySelector("#mobileSave"),
+  mobileMore: document.querySelector("#mobileMore"),
+  mobileActionMenu: document.querySelector("#mobileActionMenu"),
+  mobileMenuPreview: document.querySelector("#mobileMenuPreview"),
+  mobileMenuSave: document.querySelector("#mobileMenuSave"),
+  mobileMenuDelete: document.querySelector("#mobileMenuDelete"),
+  mobileNoteFolderSelect: document.querySelector("#mobileNoteFolderSelect"),
+  appShell: document.querySelector(".app-shell"),
+  editor: document.querySelector("#editor"),
+  noteFolderSelect: document.querySelector("#noteFolderSelect"),
+  editorPreviewToggle: document.querySelector("#editorPreviewToggle"),
+  saveNote: document.querySelector("#saveNote"),
+  saveStatus: document.querySelector("#saveStatus"),
+  editedAt: document.querySelector("#editedAt"),
+  markdownPreview: document.querySelector("#markdownPreview"),
+  editorPane: document.querySelector(".editor-pane")
+};
+
+render();
+if (!authStatus.authenticated) showAuthGate(authStatus.configured);
+
+window.addEventListener("beforeunload", flushPendingSave);
+
+els.authForm.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  const password = els.authPassword.value;
+  els.authSubmit.disabled = true;
+  els.authMessage.textContent = "";
+
+  try {
+    const path = authStatus.configured ? "/api/auth/login" : "/api/auth/setup";
+    const response = await fetch(path, {
+      method: "POST",
+      headers: {
+        "content-type": "application/json"
+      },
+      body: JSON.stringify({ password })
+    });
+    if (!response.ok) {
+      const message = response.status === 401 ? "密码不正确" : "密码至少需要 8 位";
+      els.authMessage.textContent = message;
+      return;
+    }
+    location.reload();
+  } finally {
+    els.authSubmit.disabled = false;
+  }
+});
+
+els.newNote.addEventListener("click", async () => {
+  const now = Date.now();
+  const note = {
+    id: crypto.randomUUID(),
+    folder: getWriteFolderId(),
+    body: "",
+    createdAt: now,
+    updatedAt: now,
+    version: 1
+  };
+
+  state.notes.unshift(note);
+  if (state.activeFolder === "recent") state.activeFolder = note.folder;
+  state.selectedId = note.id;
+  state.mobileView = "editor";
+  render();
+  els.editor.focus();
+
+  try {
+    setSaveStatus("保存中");
+    const saved = await createNote(note);
+    Object.assign(note, saved);
+    setSaveStatus("已保存", "ok");
+    renderListOnly();
+    renderEditor();
+  } catch (error) {
+    setSaveStatus("保存失败", "error");
+    console.error("Failed to create note.", error);
+  }
+});
+
+els.deleteNote.addEventListener("click", async () => {
+  const current = getSelectedNote();
+  if (!current) return;
+
+  const visible = getVisibleNotes();
+  const index = visible.findIndex((note) => note.id === current.id);
+  state.notes = state.notes.filter((note) => note.id !== current.id);
+  const next = visible[index + 1] || visible[index - 1];
+  state.selectedId = next && state.notes.some((note) => note.id === next.id) ? next.id : null;
+  render();
+
+  try {
+    await deleteNote(current.id);
+    setSaveStatus("已删除", "ok");
+  } catch (error) {
+    state.notes.unshift(current);
+    state.selectedId = current.id;
+    setSaveStatus("删除失败", "error");
+    render();
+    console.error("Failed to delete note.", error);
+  }
+});
+
+els.searchInput.addEventListener("input", (event) => {
+  state.query = event.target.value;
+  const visible = getVisibleNotes();
+  if (!visible.some((note) => note.id === state.selectedId)) {
+    state.selectedId = visible[0]?.id || null;
+  }
+  saveUiState();
+  render();
+});
+
+els.mobileSearchInput.addEventListener("input", (event) => {
+  if (state.mobileView === "folders") {
+    state.folderQuery = event.target.value;
+  } else {
+    state.query = event.target.value;
+    const visible = getVisibleNotes();
+    if (!visible.some((note) => note.id === state.selectedId)) {
+      state.selectedId = visible[0]?.id || null;
+    }
+  }
+  saveUiState();
+  render();
+});
+
+els.mobileBack.addEventListener("click", () => {
+  if (state.mobileView === "editor") {
+    state.mobileView = "list";
+  } else if (state.mobileView === "list") {
+    state.mobileView = "folders";
+  }
+  saveUiState();
+  render();
+});
+
+els.mobileEdit.addEventListener("click", () => {
+  els.newNote.click();
+});
+
+els.mobileSave.addEventListener("click", () => {
+  if (!getSelectedNote()) return;
+  saveSelectedNote({ immediate: true });
+});
+
+els.mobilePreviewToggle.addEventListener("click", togglePreviewMode);
+
+els.mobileMore.addEventListener("click", (event) => {
+  event.stopPropagation();
+  els.mobileActionMenu.hidden = !els.mobileActionMenu.hidden;
+});
+
+els.mobileMenuPreview.addEventListener("click", () => {
+  els.mobileActionMenu.hidden = true;
+  togglePreviewMode();
+});
+
+els.mobileMenuSave.addEventListener("click", () => {
+  els.mobileActionMenu.hidden = true;
+  if (getSelectedNote()) saveSelectedNote({ immediate: true });
+});
+
+els.mobileMenuDelete.addEventListener("click", () => {
+  els.mobileActionMenu.hidden = true;
+  els.deleteNote.click();
+});
+
+document.addEventListener("click", (event) => {
+  if (els.mobileActionMenu.hidden) return;
+  if (event.target.closest("#mobileActions")) return;
+  els.mobileActionMenu.hidden = true;
+});
+
+els.newFolder.addEventListener("click", async () => {
+  const name = getUniqueFolderName("新建文件夹");
+  const folder = {
+    id: crypto.randomUUID(),
+    name,
+    createdAt: Date.now(),
+    updatedAt: Date.now(),
+    version: 1
+  };
+
+  state.folders.push(folder);
+  state.activeFolder = folder.id;
+  state.selectedId = null;
+  state.mobileView = "list";
+  render();
+
+  try {
+    const saved = await createFolder(folder);
+    Object.assign(folder, saved);
+    setSaveStatus("文件夹已创建", "ok");
+    renderFolders();
+    renderEditor();
+  } catch (error) {
+    state.folders = state.folders.filter((entry) => entry.id !== folder.id);
+    state.activeFolder = "all";
+    setSaveStatus("创建失败", "error");
+    render();
+    console.error("Failed to create folder.", error);
+  }
+});
+
+els.editor.addEventListener("input", (event) => {
+  const note = getSelectedNote();
+  if (!note) return;
+
+  if (event.target.value.length > maxNoteBodyLength) {
+    event.target.value = event.target.value.slice(0, maxNoteBodyLength);
+    setSaveStatus("内容已达上限", "error");
+  }
+
+  note.body = event.target.value;
+  note.updatedAt = Date.now();
+  saveSelectedNote();
+  renderListOnly();
+  updateEditorMeta(note);
+  renderMarkdownPreview(note);
+});
+
+els.noteFolderSelect.addEventListener("change", (event) => {
+  moveSelectedNoteToFolder(event.target.value);
+});
+
+els.saveNote.addEventListener("click", () => {
+  if (!getSelectedNote()) return;
+  saveSelectedNote({ immediate: true });
+});
+
+els.mobileNoteFolderSelect.addEventListener("change", (event) => {
+  els.mobileActionMenu.hidden = true;
+  moveSelectedNoteToFolder(event.target.value);
+});
+
+els.previewToggle.addEventListener("click", togglePreviewMode);
+els.editorPreviewToggle.addEventListener("click", togglePreviewMode);
+
+els.logout.addEventListener("click", async () => {
+  await fetch("/api/auth/logout", { method: "POST" });
+  location.reload();
+});
+
+els.changePassword.addEventListener("click", async () => {
+  const currentPassword = window.prompt("请输入当前密码");
+  if (!currentPassword) return;
+  const nextPassword = window.prompt("请输入新密码，至少 8 位");
+  if (!nextPassword) return;
+
+  try {
+    const response = await fetch("/api/auth/password", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ currentPassword, nextPassword })
+    });
+    if (!response.ok) {
+      const message = response.status === 401 ? "当前密码不正确" : "新密码至少需要 8 位";
+      window.alert(message);
+      return;
+    }
+    window.alert("密码已修改");
+  } catch (error) {
+    window.alert("修改失败，请稍后再试");
+    console.error("Failed to change password.", error);
+  }
+});
+
+function moveSelectedNoteToFolder(nextFolder) {
+  const note = getSelectedNote();
+  if (!note) return;
+
+  if (!state.folders.some((folder) => folder.id === nextFolder)) return;
+
+  note.folder = nextFolder;
+  note.updatedAt = Date.now();
+  state.activeFolder = nextFolder;
+  saveSelectedNote({ immediate: true });
+  render();
+}
+
+function togglePreviewMode() {
+  state.previewMode = !state.previewMode;
+  saveUiState();
+  renderEditor();
+  renderMobileChrome();
+}
+
+document.addEventListener("keydown", (event) => {
+  if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "n") {
+    event.preventDefault();
+    els.newNote.click();
+  }
+
+  if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "f") {
+    event.preventDefault();
+    els.searchInput.focus();
+    els.searchInput.select();
+  }
+
+  if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") {
+    event.preventDefault();
+    if (getSelectedNote()) saveSelectedNote({ immediate: true });
+  }
+
+  if (event.key === "Delete" && document.activeElement !== els.editor) {
+    els.deleteNote.click();
+  }
+});
+
+async function loadState() {
+  try {
+    const response = await fetch("/api/state");
+    if (!response.ok) throw new Error(`State API returned ${response.status}`);
+    return hydrateState(await response.json());
+  } catch (error) {
+    console.warn("Falling back to starter notes because the API is unavailable.", error);
+    return hydrateState({ notes: starterNotes, folders: defaultFolders() });
+  }
+}
+
+async function getAuthStatus() {
+  try {
+    const response = await fetch("/api/auth/status");
+    if (!response.ok) throw new Error(`Auth API returned ${response.status}`);
+    return await response.json();
+  } catch (error) {
+    console.warn("Auth API unavailable.", error);
+    return { configured: false, authenticated: false };
+  }
+}
+
+function showAuthGate(configured) {
+  els.authTitle.textContent = configured ? "登录" : "设置密码";
+  els.authPassword.autocomplete = configured ? "current-password" : "new-password";
+  els.authPassword.placeholder = configured ? "密码" : "设置至少 8 位密码";
+  els.authSubmit.textContent = configured ? "登录" : "创建";
+  els.authGate.hidden = false;
+  els.authPassword.focus();
+}
+
+function saveSelectedNote({ immediate = false } = {}) {
+  saveUiState();
+  const note = getSelectedNote();
+  if (!note) return;
+  if (saveTimer) clearTimeout(saveTimer);
+  if (immediate) {
+    saveTimer = null;
+    sendNote(note.id);
+    return;
+  }
+  saveTimer = setTimeout(() => {
+    saveTimer = null;
+    sendNote(note.id);
+  }, saveDelay);
+  setSaveStatus("未保存");
+}
+
+function flushPendingSave() {
+  saveUiState();
+  if (!saveTimer) return;
+  clearTimeout(saveTimer);
+  saveTimer = null;
+  const note = getSelectedNote();
+  if (note) sendNote(note.id, { keepalive: true });
+}
+
+async function sendNote(noteId, { keepalive = false } = {}) {
+  const note = state.notes.find((entry) => entry.id === noteId);
+  if (!note) return;
+
+  setSaveStatus("保存中");
+  try {
+    const response = await fetch(`/api/notes/${encodeURIComponent(note.id)}`, {
+      method: "PATCH",
+      keepalive,
+      headers: {
+        "content-type": "application/json"
+      },
+      body: JSON.stringify({
+        folder: note.folder,
+        body: note.body,
+        updatedAt: note.updatedAt,
+        version: note.version
+      })
+    });
+    const payload = await response.json().catch(() => ({}));
+    if (response.status === 409 && payload.note) {
+      handleNoteConflict(note, payload.note);
+      return;
+    }
+    if (!response.ok) {
+      throw new Error(payload.error || `Save API returned ${response.status}`);
+    }
+    Object.assign(note, payload);
+    setSaveStatus("已保存", "ok");
+    renderListOnly();
+    renderEditor();
+  } catch (error) {
+    setSaveStatus("保存失败", "error");
+    console.error("Failed to save note.", error);
+  }
+}
+
+async function createNote(note) {
+  const response = await fetch("/api/notes", {
+    method: "POST",
+    headers: {
+      "content-type": "application/json"
+    },
+    body: JSON.stringify(note)
+  });
+  if (!response.ok) throw new Error(`Create note API returned ${response.status}`);
+  return await response.json();
+}
+
+async function deleteNote(noteId) {
+  const response = await fetch(`/api/notes/${encodeURIComponent(noteId)}`, { method: "DELETE" });
+  if (!response.ok) throw new Error(`Delete note API returned ${response.status}`);
+}
+
+async function createFolder(folder) {
+  const response = await fetch("/api/folders", {
+    method: "POST",
+    headers: {
+      "content-type": "application/json"
+    },
+    body: JSON.stringify(folder)
+  });
+  if (!response.ok) throw new Error(`Create folder API returned ${response.status}`);
+  return await response.json();
+}
+
+async function removeFolder(folderId) {
+  const response = await fetch(`/api/folders/${encodeURIComponent(folderId)}`, { method: "DELETE" });
+  if (!response.ok) throw new Error(`Delete folder API returned ${response.status}`);
+  return await response.json();
+}
+
+function handleNoteConflict(localNote, serverNote) {
+  setSaveStatus("有冲突", "conflict");
+  const useServer = window.confirm("这条笔记已在其他设备修改。确定载入服务器版本吗？取消则保留本机内容，稍后可再次保存。");
+  if (useServer) {
+    Object.assign(localNote, serverNote);
+    setSaveStatus("已载入服务器版本", "ok");
+    render();
+    return;
+  }
+  localNote.version = serverNote.version;
+  setSaveStatus("保留本机内容", "conflict");
+}
+
+function setSaveStatus(text, type = "") {
+  els.saveStatus.textContent = text;
+  els.saveStatus.className = `save-status${type ? ` is-${type}` : ""}`;
+  if (saveStatusTimer) clearTimeout(saveStatusTimer);
+  if (type === "ok") {
+    saveStatusTimer = setTimeout(() => {
+      els.saveStatus.textContent = "";
+      els.saveStatus.className = "save-status";
+    }, 1800);
+  }
+}
+
+function hydrateState(data) {
+  const folders = Array.isArray(data.folders) && data.folders.length ? data.folders : defaultFolders();
+  const notes = Array.isArray(data.notes)
+    ? data.notes.map((note) => ({ ...note, version: Number(note.version || 1) }))
+    : [];
+  const ui = loadUiState();
+  const selectedId = notes.some((note) => note.id === ui.selectedId) ? ui.selectedId : notes[0]?.id || null;
+  const selectedNote = notes.find((note) => note.id === selectedId);
+  const validFolders = new Set(["all", "recent", ...folders.map((folder) => folder.id)]);
+  let activeFolder = validFolders.has(ui.activeFolder)
+    ? ui.activeFolder
+    : selectedNote?.folder || "all";
+  if (selectedNote && activeFolder !== "all" && activeFolder !== "recent" && activeFolder !== selectedNote.folder) {
+    activeFolder = selectedNote.folder;
+  }
+  if (selectedNote && activeFolder === "recent" && !isRecentNote(selectedNote)) {
+    activeFolder = selectedNote.folder;
+  }
+  const mobileView = ["folders", "list", "editor"].includes(ui.mobileView)
+    ? ui.mobileView
+    : selectedId ? "editor" : "folders";
+
+  return {
+    notes,
+    folders,
+    activeFolder,
+    selectedId,
+    query: "",
+    folderQuery: "",
+    mobileView,
+    previewMode: Boolean(ui.previewMode)
+  };
+}
+
+function loadUiState() {
+  try {
+    return JSON.parse(localStorage.getItem(uiStorageKey)) || {};
+  } catch {
+    return {};
+  }
+}
+
+function saveUiState() {
+  localStorage.setItem(uiStorageKey, JSON.stringify({
+    activeFolder: state.activeFolder,
+    selectedId: state.selectedId,
+    mobileView: state.mobileView,
+    previewMode: state.previewMode
+  }));
+}
+
+function render() {
+  els.searchInput.value = state.query;
+  renderFolders();
+  renderListOnly();
+  renderEditor();
+  renderMobileChrome();
+}
+
+function renderFolders() {
+  const now = Date.now();
+  const recentCutoff = now - 1000 * 60 * 60 * 24 * 7;
+  const allFolder = { id: "all", name: "所有笔记", icon: "▣", count: state.notes.length };
+  const recentFolder = {
+    id: "recent",
+    name: "最近编辑",
+    icon: "clock-3",
+    count: state.notes.filter((note) => note.updatedAt >= recentCutoff).length
+  };
+  allFolder.icon = "file-text";
+  const folderQuery = state.mobileView === "folders" ? state.folderQuery.trim().toLowerCase() : "";
+  const userFolders = state.folders
+    .filter((folder) => !folderQuery || folder.name.toLowerCase().includes(folderQuery))
+    .map((folder) => ({
+      id: folder.id,
+      name: folder.name,
+      icon: "folder",
+      count: state.notes.filter((note) => note.folder === folder.id).length,
+      deletable: folder.id !== "notes"
+    }));
+
+  const smartFolders = [allFolder, recentFolder].filter((folder) => (
+    !folderQuery || folder.name.toLowerCase().includes(folderQuery)
+  ));
+
+  els.folderList.replaceChildren(...[...smartFolders, ...userFolders].map(renderFolderItem));
+}
+
+function renderListOnly() {
+  const visible = getVisibleNotes();
+  if (!visible.some((note) => note.id === state.selectedId)) {
+    state.selectedId = visible[0]?.id || null;
+  }
+
+  const labels = {
+    all: "所有笔记",
+    recent: "最近编辑"
+  };
+  const activeFolder = state.folders.find((folder) => folder.id === state.activeFolder);
+
+  els.listTitle.textContent = labels[state.activeFolder] || activeFolder?.name || "所有笔记";
+  els.listCount.textContent = `${visible.length} 个笔记`;
+  els.deleteNote.disabled = !state.selectedId;
+  els.noteList.replaceChildren(...renderGroupedNotes(visible));
+  renderFolders();
+}
+
+function renderGroupedNotes(notes) {
+  const nodes = [];
+  let currentGroup = "";
+
+  notes.forEach((note) => {
+    const group = formatSectionDate(note.updatedAt);
+    if (group !== currentGroup) {
+      currentGroup = group;
+      const heading = document.createElement("div");
+      heading.className = "note-section-title";
+      heading.textContent = group;
+      nodes.push(heading);
+    }
+    nodes.push(renderNoteButton(note));
+  });
+
+  return nodes;
+}
+
+function renderFolderItem(folder) {
+  const item = document.createElement("div");
+  item.className = `folder-item${folder.deletable ? " can-delete" : ""}`;
+
+  const button = document.createElement("button");
+  button.className = `folder-row${folder.id === state.activeFolder ? " active" : ""}`;
+  button.type = "button";
+  button.dataset.folder = folder.id;
+
+  const icon = document.createElement("i");
+  icon.className = "folder-icon";
+  icon.dataset.lucide = folder.icon;
+  icon.setAttribute("aria-hidden", "true");
+
+  const name = document.createElement("span");
+  name.textContent = folder.name;
+
+  const count = document.createElement("span");
+  count.className = "folder-count";
+  count.textContent = folder.count;
+
+  button.append(icon, name, count);
+  button.addEventListener("click", () => {
+    state.activeFolder = folder.id;
+    const visible = getVisibleNotes();
+    state.selectedId = visible[0]?.id || null;
+    state.mobileView = "list";
+    saveUiState();
+    render();
+  });
+
+  item.append(button);
+
+  if (folder.deletable) {
+    const deleteButton = document.createElement("button");
+    deleteButton.className = "folder-delete";
+    deleteButton.type = "button";
+    deleteButton.setAttribute("aria-label", `删除${folder.name}`);
+    deleteButton.title = "删除文件夹";
+    deleteButton.innerHTML = '<i data-lucide="trash-2" aria-hidden="true"></i>';
+    deleteButton.addEventListener("click", (event) => {
+      event.stopPropagation();
+      deleteFolder(folder.id);
+    });
+    item.append(deleteButton);
+  }
+
+  return item;
+}
+
+function renderNoteButton(note) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = `note-card${note.id === state.selectedId ? " selected" : ""}`;
+  button.dataset.noteId = note.id;
+  button.setAttribute("aria-label", getTitle(note));
+
+  const title = document.createElement("span");
+  title.className = "note-title";
+  title.textContent = getTitle(note);
+
+  const preview = document.createElement("span");
+  preview.className = "note-preview";
+  preview.innerHTML = `<span class="note-date">${formatListDate(note.updatedAt)}</span> ${getPreview(note)}`;
+
+  button.append(title, preview);
+  button.addEventListener("click", () => {
+    state.selectedId = note.id;
+    state.mobileView = "editor";
+    saveUiState();
+    render();
+    els.editor.focus();
+  });
+
+  return button;
+}
+
+function renderEditor() {
+  const note = getSelectedNote();
+  els.editorPane.classList.toggle("empty", !note);
+  els.editor.disabled = !note;
+  els.saveNote.disabled = !note;
+  els.mobileSave.disabled = !note;
+  els.editorPreviewToggle.disabled = !note;
+  els.mobilePreviewToggle.disabled = !note;
+  els.mobileMore.disabled = !note;
+  els.mobileMenuSave.disabled = !note;
+  els.mobileMenuPreview.disabled = !note;
+  els.mobileMenuDelete.disabled = !note;
+  els.previewToggle.classList.toggle("active", state.previewMode);
+  els.editorPreviewToggle.classList.toggle("active", state.previewMode);
+  els.mobilePreviewToggle.classList.toggle("active", state.previewMode);
+  els.mobileMenuPreview.classList.toggle("active", state.previewMode);
+
+  if (!note) {
+    els.mobileActionMenu.hidden = true;
+    els.editor.value = "";
+    els.editor.hidden = false;
+    els.editedAt.textContent = "";
+    els.markdownPreview.hidden = true;
+    els.noteFolderSelect.replaceChildren();
+    els.mobileNoteFolderSelect.replaceChildren();
+    els.noteFolderSelect.disabled = true;
+    els.mobileNoteFolderSelect.disabled = true;
+    return;
+  }
+
+  if (els.editor.value !== note.body) {
+    els.editor.value = note.body;
+  }
+  els.editor.hidden = state.previewMode;
+  els.markdownPreview.hidden = !state.previewMode;
+  renderMarkdownPreview(note);
+  renderNoteFolderSelect(note);
+  updateEditorMeta(note);
+}
+
+function renderNoteFolderSelect(note) {
+  const options = state.folders.map((folder) => {
+    const option = document.createElement("option");
+    option.value = folder.id;
+    option.textContent = folder.name;
+    option.selected = folder.id === note.folder;
+    return option;
+  });
+  const mobileOptions = options.map((option) => option.cloneNode(true));
+  els.noteFolderSelect.disabled = false;
+  els.mobileNoteFolderSelect.disabled = false;
+  els.noteFolderSelect.replaceChildren(...options);
+  els.mobileNoteFolderSelect.replaceChildren(...mobileOptions);
+}
+
+function renderMobileChrome() {
+  if (!["folders", "list", "editor"].includes(state.mobileView)) {
+    state.mobileView = "folders";
+  }
+
+  els.appShell.dataset.mobileView = state.mobileView;
+  const activeLabel = getActiveFolderLabel();
+  const selected = getSelectedNote();
+
+  if (state.mobileView === "folders") {
+    els.mobileTitle.textContent = "文件夹";
+    els.mobileBackLabel.textContent = "返回";
+    els.mobileBack.classList.add("is-hidden");
+    els.mobileSearchInput.value = state.folderQuery;
+    els.mobileSearchInput.placeholder = "搜索文件夹";
+  } else if (state.mobileView === "list") {
+    els.mobileTitle.textContent = activeLabel;
+    els.mobileBackLabel.textContent = "文件夹";
+    els.mobileBack.classList.remove("is-hidden");
+    els.mobileSearchInput.value = state.query;
+    els.mobileSearchInput.placeholder = "搜索";
+  } else {
+    els.mobileTitle.textContent = selected ? getTitle(selected) : "笔记";
+    els.mobileBackLabel.textContent = activeLabel;
+    els.mobileBack.classList.remove("is-hidden");
+    els.mobileSearchInput.value = state.query;
+    els.mobileSearchInput.placeholder = "搜索";
+  }
+  if (state.mobileView !== "editor") {
+    els.mobileActionMenu.hidden = true;
+  }
+  renderIcons();
+}
+
+function updateEditorMeta(note) {
+  els.editedAt.dateTime = new Date(note.updatedAt).toISOString();
+  els.editedAt.textContent = `编辑于 ${formatFullDate(note.updatedAt)}`;
+}
+
+function getVisibleNotes() {
+  const query = state.query.trim().toLowerCase();
+
+  return state.notes
+    .filter((note) => {
+      if (state.activeFolder === "recent") return isRecentNote(note);
+      if (state.activeFolder !== "all") return note.folder === state.activeFolder;
+      return true;
+    })
+    .filter((note) => {
+      if (!query) return true;
+      return `${getTitle(note)} ${note.body}`.toLowerCase().includes(query);
+    })
+    .sort((a, b) => b.updatedAt - a.updatedAt);
+}
+
+function isRecentNote(note) {
+  return note.updatedAt >= Date.now() - 1000 * 60 * 60 * 24 * 7;
+}
+
+function getSelectedNote() {
+  return state.notes.find((note) => note.id === state.selectedId) || null;
+}
+
+async function deleteFolder(folderId) {
+  const folder = state.folders.find((entry) => entry.id === folderId);
+  if (!folder || folder.id === "notes") return;
+
+  const shouldDelete = window.confirm(`删除“${folder.name}”？其中的笔记会移到“备忘录”。`);
+  if (!shouldDelete) return;
+
+  const fallbackFolder = state.folders.find((entry) => entry.id === "notes") || state.folders[0];
+  state.notes.forEach((note) => {
+    if (note.folder === folder.id) {
+      note.folder = fallbackFolder.id;
+      note.updatedAt = Date.now();
+    }
+  });
+
+  state.folders = state.folders.filter((entry) => entry.id !== folder.id);
+  if (state.activeFolder === folder.id) {
+    state.activeFolder = fallbackFolder.id;
+    const visible = getVisibleNotes();
+    state.selectedId = visible[0]?.id || null;
+    state.mobileView = "list";
+  }
+
+  render();
+
+  try {
+    await removeFolder(folder.id);
+    setSaveStatus("文件夹已删除", "ok");
+    const fresh = await loadState();
+    Object.assign(state, fresh);
+    render();
+  } catch (error) {
+    setSaveStatus("删除失败", "error");
+    console.error("Failed to delete folder.", error);
+    const fresh = await loadState();
+    Object.assign(state, fresh);
+    render();
+  }
+}
+
+function getActiveFolderLabel() {
+  if (state.activeFolder === "all") return "所有笔记";
+  if (state.activeFolder === "recent") return "最近编辑";
+  return state.folders.find((folder) => folder.id === state.activeFolder)?.name || "笔记";
+}
+
+function getWriteFolderId() {
+  if (state.folders.some((folder) => folder.id === state.activeFolder)) {
+    return state.activeFolder;
+  }
+  return state.folders[0]?.id || "notes";
+}
+
+function getUniqueFolderName(baseName) {
+  const existing = new Set(state.folders.map((folder) => folder.name));
+  if (!existing.has(baseName)) return baseName;
+
+  let index = 2;
+  while (existing.has(`${baseName} ${index}`)) {
+    index += 1;
+  }
+  return `${baseName} ${index}`;
+}
+
+function defaultFolders() {
+  return [{ id: "notes", name: "备忘录", version: 1 }];
+}
+
+function renderIcons() {
+  window.lucide?.createIcons({
+    attrs: {
+      "stroke-width": 2
+    }
+  });
+}
+
+function renderMarkdownPreview(note) {
+  if (!state.previewMode) return;
+  els.markdownPreview.innerHTML = markdownToHtml(note.body);
+}
+
+function markdownToHtml(markdown) {
+  const lines = String(markdown || "").split("\n");
+  const html = [];
+  let listType = "";
+  let inCode = false;
+  let codeLines = [];
+
+  const closeList = () => {
+    if (!listType) return;
+    html.push(`</${listType}>`);
+    listType = "";
+  };
+
+  lines.forEach((line) => {
+    if (line.trim().startsWith("```")) {
+      if (inCode) {
+        html.push(`<pre><code>${escapeHtml(codeLines.join("\n"))}</code></pre>`);
+        codeLines = [];
+        inCode = false;
+      } else {
+        closeList();
+        inCode = true;
+      }
+      return;
+    }
+
+    if (inCode) {
+      codeLines.push(line);
+      return;
+    }
+
+    const trimmed = line.trim();
+    if (!trimmed) {
+      closeList();
+      return;
+    }
+
+    const heading = trimmed.match(/^(#{1,3})\s+(.+)$/);
+    if (heading) {
+      closeList();
+      html.push(`<h${heading[1].length}>${renderInlineMarkdown(heading[2])}</h${heading[1].length}>`);
+      return;
+    }
+
+    const unordered = trimmed.match(/^[-*]\s+(.+)$/);
+    if (unordered) {
+      if (listType !== "ul") {
+        closeList();
+        listType = "ul";
+        html.push("<ul>");
+      }
+      html.push(`<li>${renderInlineMarkdown(unordered[1])}</li>`);
+      return;
+    }
+
+    const ordered = trimmed.match(/^\d+\.\s+(.+)$/);
+    if (ordered) {
+      if (listType !== "ol") {
+        closeList();
+        listType = "ol";
+        html.push("<ol>");
+      }
+      html.push(`<li>${renderInlineMarkdown(ordered[1])}</li>`);
+      return;
+    }
+
+    if (trimmed.startsWith(">")) {
+      closeList();
+      html.push(`<blockquote>${renderInlineMarkdown(trimmed.slice(1).trim())}</blockquote>`);
+      return;
+    }
+
+    closeList();
+    html.push(`<p>${renderInlineMarkdown(trimmed)}</p>`);
+  });
+
+  if (inCode) {
+    html.push(`<pre><code>${escapeHtml(codeLines.join("\n"))}</code></pre>`);
+  }
+  closeList();
+  return html.join("");
+}
+
+function renderInlineMarkdown(value) {
+  return escapeHtml(value)
+    .replace(/`([^`]+)`/g, "<code>$1</code>")
+    .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
+    .replace(/\*([^*]+)\*/g, "<em>$1</em>")
+    .replace(/\[([^\]]+)\]\((https?:\/\/[^)\s]+)\)/g, '<a href="$2" target="_blank" rel="noreferrer">$1</a>');
+}
+
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#039;");
+}
+
+function getTitle(note) {
+  const firstLine = note.body.split(/\n/).find((line) => line.trim());
+  return firstLine ? firstLine.trim().slice(0, 80) : "新建笔记";
+}
+
+function getPreview(note) {
+  const lines = note.body.split(/\n/).map((line) => line.trim()).filter(Boolean);
+  const text = lines.slice(1).join(" ") || "无附加文本";
+  return text.slice(0, 140);
+}
+
+function formatListDate(value) {
+  const date = new Date(value);
+  const today = new Date();
+  const sameDay = date.toDateString() === today.toDateString();
+  if (sameDay) {
+    return date.toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" });
+  }
+  return date.toLocaleDateString("zh-CN", { month: "numeric", day: "numeric" });
+}
+
+function formatFullDate(value) {
+  return new Date(value).toLocaleString("zh-CN", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+
+function formatSectionDate(value) {
+  const date = new Date(value);
+  const today = new Date();
+  const yesterday = new Date();
+  yesterday.setDate(today.getDate() - 1);
+
+  if (date.toDateString() === today.toDateString()) return "今天";
+  if (date.toDateString() === yesterday.toDateString()) return "昨天";
+
+  const sameYear = date.getFullYear() === today.getFullYear();
+  return date.toLocaleDateString("zh-CN", sameYear
+    ? { month: "long", day: "numeric" }
+    : { year: "numeric", month: "long", day: "numeric" });
+}

auth.mjs

@@ -0,0 +1,65 @@
+const encoder = new TextEncoder();
+const iterations = 310000;
+
+export async function hashPassword(password, salt = crypto.getRandomValues(new Uint8Array(16))) {
+  const key = await crypto.subtle.importKey(
+    "raw",
+    encoder.encode(password),
+    "PBKDF2",
+    false,
+    ["deriveBits"]
+  );
+  const bits = await crypto.subtle.deriveBits(
+    {
+      name: "PBKDF2",
+      hash: "SHA-256",
+      salt,
+      iterations
+    },
+    key,
+    256
+  );
+
+  return `pbkdf2_sha256$${iterations}$${base64url(salt)}$${base64url(new Uint8Array(bits))}`;
+}
+
+export async function verifyPassword(password, storedHash) {
+  const [scheme, storedIterations, saltText, hashText] = String(storedHash || "").split("$");
+  if (scheme !== "pbkdf2_sha256" || Number(storedIterations) !== iterations) return false;
+
+  const candidate = await hashPassword(password, fromBase64url(saltText));
+  return timingSafeEqual(candidate, storedHash);
+}
+
+export async function hashSessionToken(token) {
+  const digest = await crypto.subtle.digest("SHA-256", encoder.encode(token));
+  return base64url(new Uint8Array(digest));
+}
+
+export function createSessionToken() {
+  const bytes = crypto.getRandomValues(new Uint8Array(32));
+  return base64url(bytes);
+}
+
+function timingSafeEqual(a, b) {
+  const left = encoder.encode(a);
+  const right = encoder.encode(b);
+  if (left.length !== right.length) return false;
+
+  let result = 0;
+  for (let index = 0; index < left.length; index += 1) {
+    result |= left[index] ^ right[index];
+  }
+  return result === 0;
+}
+
+function base64url(bytes) {
+  const binary = Array.from(bytes, (byte) => String.fromCharCode(byte)).join("");
+  return btoa(binary).replaceAll("+", "-").replaceAll("/", "_").replaceAll("=", "");
+}
+
+function fromBase64url(value) {
+  const padded = value.replaceAll("-", "+").replaceAll("_", "/").padEnd(Math.ceil(value.length / 4) * 4, "=");
+  const binary = atob(padded);
+  return Uint8Array.from(binary, (char) => char.charCodeAt(0));
+}

index.html

@@ -0,0 +1,131 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>备忘录</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <section class="auth-gate" id="authGate" hidden>
+      <form class="auth-panel" id="authForm">
+        <h1 id="authTitle">登录</h1>
+        <input id="authPassword" type="password" autocomplete="current-password" minlength="8" placeholder="密码" aria-label="密码">
+        <button id="authSubmit" type="submit">继续</button>
+        <p id="authMessage"></p>
+      </form>
+    </section>
+
+    <div class="app-shell">
+      <header class="mobile-nav" aria-label="移动端导航">
+        <button class="mobile-back" id="mobileBack" type="button" aria-label="返回">
+          <i data-lucide="chevron-left" aria-hidden="true"></i>
+          <span id="mobileBackLabel">返回</span>
+        </button>
+        <strong id="mobileTitle">文件夹</strong>
+        <div class="mobile-actions" id="mobileActions">
+          <button class="mobile-more-button" id="mobileMore" type="button" aria-label="更多操作" title="更多操作">
+            <i data-lucide="ellipsis" aria-hidden="true"></i>
+          </button>
+          <div class="mobile-action-menu" id="mobileActionMenu" hidden>
+            <label>
+              <span>移动到</span>
+              <select id="mobileNoteFolderSelect" class="mobile-folder-select" aria-label="移动笔记到文件夹"></select>
+            </label>
+            <button id="mobileMenuPreview" type="button">
+              <i data-lucide="eye" aria-hidden="true"></i>
+              <span>Markdown 预览</span>
+            </button>
+            <button id="mobileMenuSave" type="button">
+              <i data-lucide="save" aria-hidden="true"></i>
+              <span>保存</span>
+            </button>
+            <button id="mobileMenuDelete" type="button">
+              <i data-lucide="trash-2" aria-hidden="true"></i>
+              <span>删除</span>
+            </button>
+          </div>
+        </div>
+      </header>
+
+      <aside class="folders" aria-label="文件夹">
+        <div class="folder-scroll">
+          <div class="sidebar-title">iCloud</div>
+          <div id="folderList"></div>
+        </div>
+        <div class="folder-footer">
+          <button class="new-folder-button" id="newFolder" type="button" aria-label="新建文件夹" title="新建文件夹">
+            <i data-lucide="folder-plus" aria-hidden="true"></i>
+            <span>新建文件夹</span>
+          </button>
+        </div>
+      </aside>
+
+      <main class="notes-pane" aria-label="笔记列表">
+        <header class="toolbar">
+          <button class="icon-button" id="newNote" type="button" aria-label="新建笔记" title="新建笔记">
+            <i data-lucide="plus" aria-hidden="true"></i>
+          </button>
+          <button class="icon-button" id="deleteNote" type="button" aria-label="删除笔记" title="删除笔记">
+            <i data-lucide="trash-2" aria-hidden="true"></i>
+          </button>
+          <button class="icon-button" id="previewToggle" type="button" aria-label="Markdown 预览" title="Markdown 预览">
+            <i data-lucide="eye" aria-hidden="true"></i>
+          </button>
+          <button class="icon-button" id="changePassword" type="button" aria-label="修改密码" title="修改密码">
+            <i data-lucide="key-round" aria-hidden="true"></i>
+          </button>
+          <button class="icon-button" id="logout" type="button" aria-label="退出登录" title="退出登录">
+            <i data-lucide="log-out" aria-hidden="true"></i>
+          </button>
+        </header>
+        <div class="search-wrap">
+          <input id="searchInput" type="search" placeholder="搜索" autocomplete="off" aria-label="搜索笔记">
+        </div>
+        <div class="list-heading">
+          <strong id="listTitle">所有笔记</strong>
+          <span id="listCount">0 个笔记</span>
+        </div>
+        <section class="note-list" id="noteList" aria-label="笔记"></section>
+      </main>
+
+      <section class="editor-pane" aria-label="编辑器">
+        <div class="editor-meta">
+          <time id="editedAt"></time>
+          <span class="save-status" id="saveStatus" aria-live="polite"></span>
+          <select id="noteFolderSelect" aria-label="移动笔记到文件夹"></select>
+          <button class="editor-preview-button" id="editorPreviewToggle" type="button" aria-label="Markdown 预览" title="Markdown 预览">
+            <i data-lucide="eye" aria-hidden="true"></i>
+          </button>
+          <button class="editor-save-button" id="saveNote" type="button" aria-label="保存笔记" title="保存笔记">
+            <i data-lucide="save" aria-hidden="true"></i>
+          </button>
+        </div>
+        <textarea id="editor" spellcheck="true" aria-label="笔记正文"></textarea>
+        <article class="markdown-preview" id="markdownPreview" hidden></article>
+        <div class="empty-state" id="emptyState">
+          <strong>没有选择笔记</strong>
+          <span>新建或选择一条笔记开始编辑</span>
+        </div>
+      </section>
+
+      <footer class="mobile-bottom" aria-label="移动端操作">
+        <div class="mobile-search" id="mobileSearchWrap">
+          <input id="mobileSearchInput" type="search" placeholder="搜索" autocomplete="off" aria-label="移动端搜索">
+        </div>
+        <button class="mobile-edit-button" id="mobileEdit" type="button" aria-label="新建笔记" title="新建笔记">
+          <i data-lucide="square-pen" aria-hidden="true"></i>
+        </button>
+        <button class="mobile-preview-button" id="mobilePreviewToggle" type="button" aria-label="Markdown 预览" title="Markdown 预览">
+          <i data-lucide="eye" aria-hidden="true"></i>
+        </button>
+        <button class="mobile-save-button" id="mobileSave" type="button" aria-label="保存笔记" title="保存笔记">
+          <i data-lucide="save" aria-hidden="true"></i>
+        </button>
+      </footer>
+    </div>
+
+    <script src="/node_modules/lucide/dist/umd/lucide.js"></script>
+    <script type="module" src="app.js"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,12 @@
+{
+	"type": "module",
+	"scripts": {
+		"dev": "node server.mjs",
+		"seed:mock": "node scripts/seed-mock.mjs"
+	},
+	"dependencies": {
+		"@hono/node-server": "^2.0.4",
+		"hono": "^4.12.23",
+		"lucide": "^1.16.0"
+	}
+}

pnpm-lock.yaml

@@ -0,0 +1,44 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@hono/node-server':
+        specifier: ^2.0.4
+        version: 2.0.4(hono@4.12.23)
+      hono:
+        specifier: ^4.12.23
+        version: 4.12.23
+      lucide:
+        specifier: ^1.16.0
+        version: 1.16.0
+
+packages:
+
+  '@hono/node-server@2.0.4':
+    resolution: {integrity: sha512-Ut3y0dMMPWy6bZ2kVfx25EOVbZlm15dhF4mOsezMlhpNHy+4MkU1qN9Y6lnruYi4wPmFzimGX2X7LF/FwHli4A==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      hono: ^4
+
+  hono@4.12.23:
+    resolution: {integrity: sha512-eIaZ9qDgu7XV0pxOCrg7/WhnQ6Ivm22UcxhXx/A3dcbqbbYgBEkc6e/J/s7j2tS96zoB0S9VBdLwQNCWwUo4LA==}
+    engines: {node: '>=16.9.0'}
+
+  lucide@1.16.0:
+    resolution: {integrity: sha512-20QvduCJTB7e7K9WVvoLBuKPsYZ8d6ptwe9PIdTFiZmjVTPdFWQreBNyNCM9QQtGnqHR0PLiEQdxyhYsL1LdoA==}
+
+snapshots:
+
+  '@hono/node-server@2.0.4(hono@4.12.23)':
+    dependencies:
+      hono: 4.12.23
+
+  hono@4.12.23: {}
+
+  lucide@1.16.0: {}

scripts/backup-proxy.mjs

@@ -0,0 +1,252 @@
+import { spawn } from "node:child_process";
+import { createServer } from "node:http";
+
+const port = Number(process.env.PORT || 7860);
+const appOrigin = new URL(process.env.APP_ORIGIN || "http://127.0.0.1:4173");
+let backupRunning = false;
+
+const server = createServer(async (req, res) => {
+  try {
+    const url = new URL(req.url || "/", `http://${req.headers.host || "localhost"}`);
+
+    if (url.pathname === "/backup-injected.js") {
+      sendText(res, 200, injectedScript(), "text/javascript; charset=utf-8");
+      return;
+    }
+
+    if (url.pathname === "/api/backup/run") {
+      await handleBackup(req, res);
+      return;
+    }
+
+    await proxyRequest(req, res, url);
+  } catch (error) {
+    console.error("[backup-proxy]", error);
+    sendJson(res, 500, { ok: false, error: "proxy_error" });
+  }
+});
+
+server.listen(port, "0.0.0.0", () => {
+  console.log(`Backup proxy running at http://0.0.0.0:${port}`);
+  console.log(`Proxying app origin: ${appOrigin.origin}`);
+});
+
+async function handleBackup(req, res) {
+  if (req.method !== "POST") {
+    sendJson(res, 405, { ok: false, error: "method_not_allowed" });
+    return;
+  }
+  if (!isSameOriginRequest(req)) {
+    sendJson(res, 403, { ok: false, error: "origin_forbidden" });
+    return;
+  }
+  if (!await isAuthenticated(req)) {
+    sendJson(res, 401, { ok: false, error: "unauthorized" });
+    return;
+  }
+  if (backupRunning) {
+    sendJson(res, 409, { ok: false, error: "backup_running" });
+    return;
+  }
+
+  backupRunning = true;
+  try {
+    const result = await runBackupScript();
+    sendJson(res, 200, result);
+  } catch (error) {
+    console.error("[backup]", error);
+    sendJson(res, 500, { ok: false, error: "backup_failed" });
+  } finally {
+    backupRunning = false;
+  }
+}
+
+async function isAuthenticated(req) {
+  const response = await fetch(new URL("/api/auth/status", appOrigin), {
+    headers: {
+      cookie: req.headers.cookie || ""
+    }
+  });
+  if (!response.ok) return false;
+  const status = await response.json().catch(() => ({}));
+  return status.authenticated === true;
+}
+
+function isSameOriginRequest(req) {
+  const origin = req.headers.origin;
+  if (!origin) return true;
+  const host = req.headers.host;
+  if (!host) return false;
+  try {
+    return new URL(origin).host === host;
+  } catch {
+    return false;
+  }
+}
+
+function runBackupScript() {
+  return new Promise((resolve, reject) => {
+    const child = spawn(process.execPath, ["scripts/backup-sqlite.mjs", "--backup"], {
+      env: process.env,
+      stdio: ["ignore", "pipe", "pipe"]
+    });
+    let stdout = "";
+    let stderr = "";
+    child.stdout.on("data", (chunk) => {
+      stdout += chunk.toString();
+    });
+    child.stderr.on("data", (chunk) => {
+      stderr += chunk.toString();
+    });
+    child.on("error", reject);
+    child.on("close", (code) => {
+      if (code !== 0) {
+        reject(new Error(`backup_script_failed_${code}: ${stderr.slice(0, 500)}`));
+        return;
+      }
+      resolve(parseLastJson(stdout));
+    });
+  });
+}
+
+async function proxyRequest(req, res, url) {
+  const target = new URL(`${url.pathname}${url.search}`, appOrigin);
+  const headers = new Headers(req.headers);
+  headers.delete("host");
+  headers.delete("content-length");
+
+  const init = {
+    method: req.method,
+    headers,
+    redirect: "manual"
+  };
+  if (!["GET", "HEAD"].includes(req.method || "GET")) {
+    init.body = await readBody(req);
+  }
+
+  const response = await fetch(target, init);
+  const responseHeaders = new Headers(response.headers);
+  let body = Buffer.from(await response.arrayBuffer());
+
+  if (isHtmlResponse(responseHeaders)) {
+    const html = body.toString("utf8");
+    body = Buffer.from(injectBackupScript(html));
+    responseHeaders.set("content-length", String(body.byteLength));
+  }
+
+  res.writeHead(response.status, Object.fromEntries(responseHeaders.entries()));
+  res.end(body);
+}
+
+function injectBackupScript(html) {
+  if (html.includes("/backup-injected.js")) return html;
+  const tag = '<script src="/backup-injected.js" defer></script>';
+  return html.includes("</body>") ? html.replace("</body>", `${tag}</body>`) : `${html}${tag}`;
+}
+
+function injectedScript() {
+  return `
+(() => {
+  const buttonHtml = '<i data-lucide="cloud-upload" aria-hidden="true"></i><span>备份</span>';
+
+  function makeButton(className) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = className;
+    button.setAttribute('aria-label', '备份数据库');
+    button.title = '备份数据库';
+    button.innerHTML = buttonHtml;
+    button.addEventListener('click', runBackup);
+    return button;
+  }
+
+  async function runBackup(event) {
+    const button = event.currentTarget;
+    button.disabled = true;
+    const original = button.innerHTML;
+    button.textContent = '备份中';
+    try {
+      const response = await fetch('/api/backup/run', { method: 'POST' });
+      if (response.status === 401) {
+        alert('请先登录后再备份');
+        return;
+      }
+      if (response.status === 409) {
+        alert('备份正在进行中');
+        return;
+      }
+      if (!response.ok) throw new Error('backup_failed');
+      alert('备份完成');
+    } catch {
+      alert('备份失败，请检查 rclone 配置');
+    } finally {
+      button.disabled = false;
+      button.innerHTML = original;
+      window.lucide?.createIcons({ attrs: { 'stroke-width': 2 } });
+    }
+  }
+
+  function mount() {
+    if (!document.querySelector('[data-backup-button="desktop"]')) {
+      const toolbar = document.querySelector('.toolbar');
+      if (toolbar) {
+        const button = makeButton('icon-button');
+        button.dataset.backupButton = 'desktop';
+        button.innerHTML = '<i data-lucide="cloud-upload" aria-hidden="true"></i>';
+        toolbar.append(button);
+      }
+    }
+
+    if (!document.querySelector('[data-backup-button="mobile"]')) {
+      const menu = document.querySelector('#mobileActionMenu');
+      if (menu) {
+        const button = makeButton('');
+        button.dataset.backupButton = 'mobile';
+        menu.append(button);
+      }
+    }
+
+    window.lucide?.createIcons({ attrs: { 'stroke-width': 2 } });
+  }
+
+  mount();
+  new MutationObserver(mount).observe(document.documentElement, { childList: true, subtree: true });
+})();
+`;
+}
+
+function isHtmlResponse(headers) {
+  return (headers.get("content-type") || "").includes("text/html");
+}
+
+function readBody(req) {
+  return new Promise((resolve, reject) => {
+    const chunks = [];
+    req.on("data", (chunk) => chunks.push(chunk));
+    req.on("end", () => resolve(Buffer.concat(chunks)));
+    req.on("error", reject);
+  });
+}
+
+function parseLastJson(output) {
+  const lines = output.trim().split(/\r?\n/).filter(Boolean);
+  const last = lines.at(-1);
+  if (!last) return { ok: true };
+  try {
+    return JSON.parse(last);
+  } catch {
+    return { ok: true };
+  }
+}
+
+function sendJson(res, status, payload) {
+  sendText(res, status, JSON.stringify(payload), "application/json; charset=utf-8");
+}
+
+function sendText(res, status, body, contentType) {
+  res.writeHead(status, {
+    "content-type": contentType,
+    "content-length": Buffer.byteLength(body)
+  });
+  res.end(body);
+}

scripts/backup-sqlite.mjs

@@ -0,0 +1,133 @@
+import { spawn } from "node:child_process";
+import { existsSync, mkdirSync, mkdtempSync, rmSync, renameSync, statSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { DatabaseSync } from "node:sqlite";
+
+const root = process.cwd();
+const dataDir = join(root, "data");
+const dbPath = join(dataDir, "notes.db");
+const remoteFolder = sanitizeRemoteFolder(process.env.REMOTE_FOLDER || "huggingface:notes");
+const backupFile = "notes.db";
+const uploadFile = "notes.db.uploading";
+const mode = process.argv.includes("--restore") ? "restore" : "backup";
+
+try {
+  if (mode === "restore") {
+    await restoreBackup();
+  } else {
+    await uploadBackup();
+  }
+} catch (error) {
+  console.error(JSON.stringify({
+    ok: false,
+    mode,
+    error: error.message
+  }));
+  process.exitCode = 1;
+}
+
+async function restoreBackup() {
+  mkdirSync(dataDir, { recursive: true });
+  const remote = remotePath(backupFile);
+  const exists = await remoteFileExists();
+  if (!exists) {
+    console.log(JSON.stringify({ ok: true, mode: "restore", restored: false, reason: "remote_backup_missing" }));
+    return;
+  }
+
+  const workDir = mkdtempSync(join(tmpdir(), "notes-restore-"));
+  const restorePath = join(workDir, "notes.db");
+  await rclone(["copyto", remote, restorePath]);
+  assertUsableSqlite(restorePath);
+  renameSync(restorePath, dbPath);
+  rmSync(workDir, { recursive: true, force: true });
+  console.log(JSON.stringify({ ok: true, mode: "restore", restored: true }));
+}
+
+async function uploadBackup() {
+  if (!existsSync(dbPath) || statSync(dbPath).size === 0) {
+    throw new Error("local_database_missing");
+  }
+
+  const workDir = mkdtempSync(join(tmpdir(), "notes-backup-"));
+  const snapshotPath = join(workDir, "notes.db");
+  createSnapshot(snapshotPath);
+  const bytes = statSync(snapshotPath).size;
+
+  const uploading = remotePath(uploadFile);
+  const target = remotePath(backupFile);
+  await rclone(["copyto", snapshotPath, uploading]);
+  await rclone(["moveto", uploading, target]);
+  rmSync(workDir, { recursive: true, force: true });
+  console.log(JSON.stringify({
+    ok: true,
+    mode: "backup",
+    remote: target,
+    bytes,
+    updatedAt: Date.now()
+  }));
+}
+
+async function remoteFileExists() {
+  const output = await rclone(["lsf", remoteFolder, "--files-only", "--include", backupFile], { allowFailure: true });
+  return output.split(/\r?\n/).some((line) => line.trim() === backupFile);
+}
+
+function createSnapshot(snapshotPath) {
+  const db = new DatabaseSync(dbPath);
+  try {
+    db.exec("PRAGMA wal_checkpoint(TRUNCATE)");
+    db.exec(`VACUUM INTO '${escapeSqlitePath(snapshotPath)}'`);
+  } finally {
+    db.close();
+  }
+  assertUsableSqlite(snapshotPath);
+}
+
+function assertUsableSqlite(path) {
+  const db = new DatabaseSync(path);
+  try {
+    db.prepare("SELECT name FROM sqlite_master LIMIT 1").all();
+  } finally {
+    db.close();
+  }
+}
+
+function rclone(args, { allowFailure = false } = {}) {
+  return new Promise((resolve, reject) => {
+    const child = spawn("rclone", args, {
+      env: process.env,
+      stdio: ["ignore", "pipe", "pipe"]
+    });
+    let stdout = "";
+    child.stdout.on("data", (chunk) => {
+      stdout += chunk.toString();
+    });
+    child.stderr.on("data", () => {});
+    child.on("error", reject);
+    child.on("close", (code) => {
+      if (code === 0 || allowFailure) {
+        resolve(stdout);
+        return;
+      }
+      reject(new Error(`rclone_failed_${code}`));
+    });
+  });
+}
+
+function remotePath(file) {
+  return `${remoteFolder.replace(/\/+$/, "")}/${file}`;
+}
+
+function sanitizeRemoteFolder(value) {
+  const trimmed = String(value || "").trim();
+  if (!trimmed) throw new Error("remote_folder_missing");
+  if (/[\0\r\n]/.test(trimmed)) throw new Error("remote_folder_invalid");
+  if (!trimmed.includes(":")) throw new Error("remote_folder_must_include_remote_name");
+  return trimmed;
+}
+
+function escapeSqlitePath(path) {
+  return path.replaceAll("'", "''");
+}

scripts/docker-entrypoint.sh

@@ -0,0 +1,64 @@
+#!/usr/bin/env sh
+set -eu
+
+APP_PORT="${APP_PORT:-4173}"
+PUBLIC_PORT="${PORT:-7860}"
+export APP_ORIGIN="${APP_ORIGIN:-http://127.0.0.1:${APP_PORT}}"
+export REMOTE_FOLDER="${REMOTE_FOLDER:-huggingface:notes}"
+
+APP_PID=""
+PROXY_PID=""
+
+log() {
+  printf '%s\n' "$*"
+}
+
+setup_rclone_config() {
+  if [ -n "${RCLONE_CONF:-}" ] || [ -n "${RCLONE_CONFIG_BASE64:-}" ] || [ -n "${RCLONE_CONFIG_CONTENT:-}" ]; then
+    mkdir -p /root/.config/rclone
+    umask 077
+    export RCLONE_CONFIG="${RCLONE_CONFIG:-/root/.config/rclone/rclone.conf}"
+
+    if [ -n "${RCLONE_CONF:-}" ]; then
+      printf '%s' "$RCLONE_CONF" > "$RCLONE_CONFIG"
+      log "rclone config loaded from RCLONE_CONF."
+    elif [ -n "${RCLONE_CONFIG_BASE64:-}" ]; then
+      printf '%s' "$RCLONE_CONFIG_BASE64" | base64 -d > "$RCLONE_CONFIG"
+      log "rclone config loaded from RCLONE_CONFIG_BASE64."
+    else
+      printf '%s' "$RCLONE_CONFIG_CONTENT" > "$RCLONE_CONFIG"
+      log "rclone config loaded from RCLONE_CONFIG_CONTENT."
+    fi
+
+    chmod 600 "$RCLONE_CONFIG"
+    return
+  fi
+
+  log "No rclone config file secret found; using rclone environment remote config if provided."
+}
+
+shutdown() {
+  log "Shutting down, running final backup..."
+  node scripts/backup-sqlite.mjs --backup >/tmp/final-backup.log 2>&1 || log "Final backup failed."
+  if [ -n "$PROXY_PID" ]; then kill "$PROXY_PID" 2>/dev/null || true; fi
+  if [ -n "$APP_PID" ]; then kill "$APP_PID" 2>/dev/null || true; fi
+  wait 2>/dev/null || true
+}
+
+trap shutdown INT TERM
+
+mkdir -p data
+setup_rclone_config
+
+log "Restoring database from ${REMOTE_FOLDER}/notes.db if it exists..."
+node scripts/backup-sqlite.mjs --restore || log "Restore skipped or failed; continuing with local initialization."
+
+log "Starting app on ${APP_ORIGIN}..."
+PORT="$APP_PORT" node server.mjs &
+APP_PID="$!"
+
+log "Starting backup proxy on port ${PUBLIC_PORT}..."
+PORT="$PUBLIC_PORT" node scripts/backup-proxy.mjs &
+PROXY_PID="$!"
+
+wait "$PROXY_PID"

scripts/seed-mock.mjs

@@ -0,0 +1,43 @@
+import { join } from "node:path";
+import { createRepository } from "../data/repository.mjs";
+
+const repository = createRepository({ dbPath: join(process.cwd(), "data", "notes.db") });
+await repository.init();
+
+const now = Date.now();
+const folders = [
+  { id: "notes", name: "备忘录", createdAt: now - 1000 * 60 * 60 * 24 * 30, updatedAt: now },
+  ...Array.from({ length: 22 }, (_, index) => ({
+    id: `mock-folder-${index + 1}`,
+    name: `测试分类 ${String(index + 1).padStart(2, "0")}`,
+    createdAt: now - 1000 * 60 * 60 * (22 - index),
+    updatedAt: now - 1000 * 60 * index
+  }))
+];
+
+const longParagraph = [
+  "这是一段用于测试内容滚动的长文本。",
+  "移动端需要在内容页保持顶部返回栏和底部编辑按钮稳定。",
+  "桌面端需要编辑区自己滚动，不应该把分类和列表一起带走。",
+  "这里故意写得比较长，用来观察换行、行高和滚动条表现。"
+].join("");
+
+const notes = Array.from({ length: 96 }, (_, index) => {
+  const folder = index < 18 ? "notes" : `mock-folder-${(index % 22) + 1}`;
+  const lines = Array.from({ length: index % 9 === 0 ? 46 : 8 }, (__, lineIndex) => {
+    if (lineIndex === 0) return `测试笔记 ${String(index + 1).padStart(3, "0")}`;
+    if (lineIndex % 6 === 0) return `- 列表项 ${lineIndex}: 检查列表和正文滚动`;
+    return `${lineIndex}. ${longParagraph}`;
+  });
+
+  return {
+    id: `mock-note-${index + 1}`,
+    folder,
+    body: lines.join("\n\n"),
+    createdAt: now - 1000 * 60 * 60 * index,
+    updatedAt: now - 1000 * 60 * index
+  };
+});
+
+await repository.writeState({ folders, notes });
+console.log(`Seeded ${folders.length} folders and ${notes.length} notes.`);

server.mjs

@@ -0,0 +1,230 @@
+import { serve } from "@hono/node-server";
+import { Hono } from "hono";
+import { deleteCookie, getCookie, setCookie } from "hono/cookie";
+import { readFile } from "node:fs/promises";
+import { extname, join, normalize } from "node:path";
+import { createSessionToken, hashPassword, hashSessionToken, verifyPassword } from "./auth.mjs";
+import { createRepository } from "./data/repository.mjs";
+import { maxNoteBodyLength } from "./data/state-utils.mjs";
+
+const port = Number(process.env.PORT || 4173);
+const root = process.cwd();
+const app = new Hono();
+const repository = createRepository({ dbPath: join(root, "data", "notes.db") });
+const sessionCookie = "web_notes_session";
+const sessionTtlMs = 1000 * 60 * 60 * 24 * 30;
+
+await repository.init();
+
+app.get("/api/health", (c) => c.json({ ok: true }));
+
+app.get("/api/auth/status", async (c) => {
+  const user = await repository.getUser();
+  return c.json({
+    configured: Boolean(user),
+    authenticated: await isAuthenticated(c)
+  });
+});
+
+app.post("/api/auth/setup", async (c) => {
+  const existing = await repository.getUser();
+  if (existing) return c.json({ ok: false, error: "already_configured" }, 409);
+
+  const { password } = await c.req.json();
+  if (!isValidPassword(password)) {
+    return c.json({ ok: false, error: "password_too_short" }, 400);
+  }
+
+  await repository.createUser({ passwordHash: await hashPassword(password) });
+  await createSession(c);
+  return c.json({ ok: true });
+});
+
+app.post("/api/auth/login", async (c) => {
+  const user = await repository.getUser();
+  if (!user) return c.json({ ok: false, error: "not_configured" }, 400);
+
+  const { password } = await c.req.json();
+  if (!await verifyPassword(password, user.passwordHash)) {
+    return c.json({ ok: false, error: "invalid_password" }, 401);
+  }
+
+  await createSession(c);
+  return c.json({ ok: true });
+});
+
+app.post("/api/auth/logout", async (c) => {
+  const token = getCookie(c, sessionCookie);
+  if (token) {
+    await repository.deleteSession(await hashSessionToken(token));
+  }
+  deleteCookie(c, sessionCookie, { path: "/" });
+  return c.json({ ok: true });
+});
+
+app.post("/api/auth/password", async (c) => {
+  const user = await repository.getUser();
+  if (!user) return c.json({ ok: false, error: "not_configured" }, 400);
+  if (!await isAuthenticated(c)) return c.json({ ok: false, error: "unauthorized" }, 401);
+
+  const { currentPassword, nextPassword } = await c.req.json();
+  if (!await verifyPassword(currentPassword, user.passwordHash)) {
+    return c.json({ ok: false, error: "invalid_password" }, 401);
+  }
+  if (!isValidPassword(nextPassword)) {
+    return c.json({ ok: false, error: "password_too_short" }, 400);
+  }
+
+  await repository.updateUserPassword({ passwordHash: await hashPassword(nextPassword) });
+  await repository.deleteAllSessions();
+  await createSession(c);
+  return c.json({ ok: true });
+});
+
+app.use("/api/state", async (c, next) => {
+  const user = await repository.getUser();
+  if (!user) return c.json({ ok: false, error: "not_configured" }, 401);
+  if (!await isAuthenticated(c)) return c.json({ ok: false, error: "unauthorized" }, 401);
+  await next();
+});
+
+app.get("/api/state", async (c) => {
+  return c.json(await repository.readState());
+});
+
+app.put("/api/state", async (c) => {
+  const body = await c.req.json();
+  const folders = Array.isArray(body.folders) ? body.folders : [];
+  const notes = Array.isArray(body.notes) ? body.notes : [];
+  return c.json(await repository.writeState({ folders, notes }));
+});
+
+app.post("/api/notes", async (c) => {
+  const authError = await getAuthError(c);
+  if (authError) return authError;
+  const body = await c.req.json();
+  const lengthError = validateBodyLength(body.body);
+  if (lengthError) return c.json(lengthError, 413);
+  return c.json(await repository.createNote(body), 201);
+});
+
+app.patch("/api/notes/:id", async (c) => {
+  const authError = await getAuthError(c);
+  if (authError) return authError;
+  const body = await c.req.json();
+  const lengthError = validateBodyLength(body.body);
+  if (lengthError) return c.json(lengthError, 413);
+
+  const result = await repository.updateNote(c.req.param("id"), body);
+  if (result.status === "missing") return c.json({ ok: false, error: "not_found" }, 404);
+  if (result.status === "conflict") return c.json({ ok: false, error: "conflict", note: result.note }, 409);
+  return c.json(result.note);
+});
+
+app.delete("/api/notes/:id", async (c) => {
+  const authError = await getAuthError(c);
+  if (authError) return authError;
+  await repository.deleteNote(c.req.param("id"));
+  return c.json({ ok: true });
+});
+
+app.post("/api/folders", async (c) => {
+  const authError = await getAuthError(c);
+  if (authError) return authError;
+  const body = await c.req.json();
+  return c.json(await repository.createFolder(body), 201);
+});
+
+app.delete("/api/folders/:id", async (c) => {
+  const authError = await getAuthError(c);
+  if (authError) return authError;
+  const result = await repository.deleteFolder(c.req.param("id"));
+  if (result.status === "missing") return c.json({ ok: false, error: "not_found" }, 404);
+  return c.json(result);
+});
+
+app.get("*", async (c) => {
+  const url = new URL(c.req.url);
+  const requestPath = url.pathname === "/" ? "/index.html" : url.pathname;
+  const safePath = normalize(requestPath).replace(/^(\.\.[/\\])+/, "");
+  const filePath = join(root, safePath);
+
+  if (!filePath.startsWith(root)) {
+    return c.text("Not found", 404);
+  }
+
+  try {
+    const file = await readFile(filePath);
+    return new Response(file, {
+      headers: {
+        "content-type": mimeType(extname(filePath))
+      }
+    });
+  } catch {
+    const index = await readFile(join(root, "index.html"));
+    return new Response(index, {
+      headers: {
+        "content-type": "text/html; charset=utf-8"
+      }
+    });
+  }
+});
+
+serve({ fetch: app.fetch, port }, () => {
+  console.log(`备忘录 running at http://127.0.0.1:${port}`);
+  console.log(`Data repository runtime: ${repository.runtime}`);
+});
+
+function mimeType(ext) {
+  return {
+    ".html": "text/html; charset=utf-8",
+    ".css": "text/css; charset=utf-8",
+    ".js": "text/javascript; charset=utf-8",
+    ".json": "application/json; charset=utf-8",
+    ".png": "image/png",
+    ".svg": "image/svg+xml; charset=utf-8"
+  }[ext] || "application/octet-stream";
+}
+
+async function createSession(c) {
+  const token = createSessionToken();
+  const expiresAt = Date.now() + sessionTtlMs;
+  await repository.createSession({
+    tokenHash: await hashSessionToken(token),
+    expiresAt
+  });
+  setCookie(c, sessionCookie, token, {
+    path: "/",
+    httpOnly: true,
+    sameSite: "Lax",
+    maxAge: Math.floor(sessionTtlMs / 1000),
+    secure: new URL(c.req.url).protocol === "https:"
+  });
+}
+
+async function isAuthenticated(c) {
+  const token = getCookie(c, sessionCookie);
+  if (!token) return false;
+  return Boolean(await repository.getSession(await hashSessionToken(token)));
+}
+
+async function getAuthError(c) {
+  const user = await repository.getUser();
+  if (!user) return c.json({ ok: false, error: "not_configured" }, 401);
+  if (!await isAuthenticated(c)) return c.json({ ok: false, error: "unauthorized" }, 401);
+  return null;
+}
+
+function isValidPassword(password) {
+  return typeof password === "string" && password.length >= 8;
+}
+
+function validateBodyLength(body) {
+  if (body === undefined) return null;
+  if (String(body).length <= maxNoteBodyLength) return null;
+  return {
+    ok: false,
+    error: "note_too_large",
+    maxLength: maxNoteBodyLength
+  };
+}

styles.css

@@ -0,0 +1,1497 @@
+:root {
+  color-scheme: light;
+  --window: #f5f5f3;
+  --sidebar: #ecebe7;
+  --list: #fbfaf7;
+  --editor: #fffefa;
+  --text: #1d1d1f;
+  --muted: #78736b;
+  --line: #d9d6ce;
+  --accent: #f2b84b;
+  --accent-strong: #d89621;
+  --selected: #ffe7ad;
+  --selected-soft: #fff3d5;
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  background: var(--window);
+  color: var(--text);
+  overflow: hidden;
+}
+
+.auth-gate {
+  position: fixed;
+  z-index: 20;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: rgba(245, 245, 243, 0.92);
+  backdrop-filter: blur(16px);
+}
+
+.auth-gate[hidden] {
+  display: none;
+}
+
+.auth-panel {
+  display: grid;
+  width: min(360px, calc(100vw - 32px));
+  gap: 12px;
+  padding: 24px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--editor);
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.12);
+}
+
+.auth-panel h1 {
+  margin: 0 0 4px;
+  font-size: 22px;
+  text-align: center;
+}
+
+.auth-panel input {
+  height: 40px;
+  padding: 0 12px;
+  border: 1px solid #d7d2c8;
+  border-radius: 7px;
+  outline: 0;
+  background: #f8f7f3;
+  font-size: 16px;
+}
+
+.auth-panel input:focus {
+  border-color: var(--accent);
+  background: white;
+}
+
+.auth-panel button {
+  height: 40px;
+  border: 0;
+  border-radius: 7px;
+  background: var(--accent-strong);
+  color: white;
+  font-weight: 700;
+}
+
+.auth-panel p {
+  min-height: 18px;
+  margin: 0;
+  color: #a24624;
+  font-size: 13px;
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+}
+
+.app-shell {
+  display: grid;
+  grid-template-columns: 220px minmax(260px, 340px) minmax(360px, 1fr);
+  height: 100vh;
+  height: 100dvh;
+  min-height: 520px;
+  border: 1px solid var(--line);
+  background: var(--editor);
+}
+
+.app-shell > * {
+  min-height: 0;
+}
+
+.mobile-nav,
+.mobile-bottom {
+  display: none;
+}
+
+.folders {
+  display: flex;
+  flex-direction: column;
+  background: var(--sidebar);
+  border-right: 1px solid var(--line);
+  padding: 18px 12px;
+  overflow: hidden;
+}
+
+.folder-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.sidebar-title {
+  margin: 0 8px 8px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.folder-row {
+  display: grid;
+  grid-template-columns: 22px 1fr auto;
+  column-gap: 2px;
+  align-items: center;
+  width: 100%;
+  min-height: 34px;
+  margin: 2px 0;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--text);
+  text-align: left;
+  touch-action: manipulation;
+  cursor: default;
+}
+
+.folder-item {
+  display: grid;
+  grid-template-columns: 1fr;
+  align-items: center;
+  gap: 4px;
+}
+
+.folder-item.can-delete {
+  grid-template-columns: 1fr auto;
+}
+
+.folder-item .folder-row {
+  min-width: 0;
+}
+
+.folder-delete {
+  display: none;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--accent-strong);
+  touch-action: manipulation;
+  cursor: default;
+}
+
+.folder-item.can-delete:hover .folder-delete,
+.folder-item.can-delete:focus-within .folder-delete {
+  display: grid;
+}
+
+.folder-delete:hover {
+  background: var(--selected-soft);
+}
+
+.folder-delete svg {
+  width: 17px;
+  height: 17px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+
+.folder-row span {
+  white-space: nowrap;
+}
+
+.folder-row.active {
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.folder-row:hover {
+  background: rgba(255, 255, 255, 0.52);
+}
+
+.folder-icon {
+  color: var(--accent-strong);
+  width: 17px;
+  height: 17px;
+  line-height: 1;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.folder-count {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.folder-footer {
+  margin-top: auto;
+  padding-top: 12px;
+}
+
+.new-folder-button {
+  display: grid;
+  grid-template-columns: 22px 1fr;
+  column-gap: 5px;
+  align-items: center;
+  width: 100%;
+  min-height: 34px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--accent-strong);
+  text-align: left;
+  touch-action: manipulation;
+  cursor: default;
+}
+
+.new-folder-button:hover {
+  background: rgba(255, 255, 255, 0.52);
+}
+
+.new-folder-button svg {
+  width: 18px;
+  height: 18px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+
+.new-folder-button span {
+  color: var(--text);
+  white-space: nowrap;
+}
+
+.notes-pane {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--list);
+  border-right: 1px solid var(--line);
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  min-height: 48px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--line);
+}
+
+.icon-button {
+  display: inline-grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--accent-strong);
+  touch-action: manipulation;
+  cursor: default;
+}
+
+.icon-button svg {
+  width: 20px;
+  height: 20px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+
+.icon-button:hover:not(:disabled) {
+  background: var(--selected-soft);
+  border-color: #eed08b;
+}
+
+.icon-button.active {
+  background: var(--selected);
+  border-color: #e3bd5d;
+}
+
+.icon-button:disabled {
+  color: #b9b4aa;
+}
+
+.search-wrap {
+  padding: 10px 12px 4px;
+}
+
+#searchInput {
+  width: 100%;
+  height: 30px;
+  padding: 0 12px;
+  border: 1px solid #d7d2c8;
+  border-radius: 7px;
+  outline: 0;
+  background: #f1f0ec;
+  font-size: 16px;
+}
+
+#searchInput:focus {
+  border-color: var(--accent);
+  background: white;
+}
+
+.list-heading {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px 8px;
+}
+
+.list-heading strong {
+  font-size: 20px;
+}
+
+.list-heading span {
+  color: var(--muted);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.note-list {
+  flex: 1;
+  overflow: auto;
+  padding: 0 8px 12px;
+}
+
+.note-section-title {
+  padding: 12px 8px 4px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.note-card {
+  display: block;
+  width: 100%;
+  min-height: 76px;
+  padding: 10px 12px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  touch-action: manipulation;
+  cursor: default;
+}
+
+.note-card:hover {
+  background: #f3eee3;
+}
+
+.note-card.selected {
+  background: var(--selected);
+}
+
+.note-title {
+  display: block;
+  overflow: hidden;
+  margin-bottom: 4px;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.note-preview {
+  display: -webkit-box;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.35;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.note-date {
+  color: #8a806f;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.editor-pane {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--editor);
+}
+
+.editor-meta {
+  display: grid;
+  grid-template-columns: 1fr auto auto auto auto;
+  align-items: center;
+  gap: 8px;
+  height: 48px;
+  padding: 8px 28px 0;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.editor-meta time {
+  justify-self: center;
+  padding-left: 120px;
+}
+
+.save-status {
+  min-width: 48px;
+  color: #8a806f;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.save-status.is-error,
+.save-status.is-conflict {
+  color: #b42318;
+}
+
+.save-status.is-ok {
+  color: #59823f;
+}
+
+#noteFolderSelect {
+  max-width: 160px;
+  height: 30px;
+  padding: 0 8px;
+  border: 1px solid #d7d2c8;
+  border-radius: 7px;
+  outline: 0;
+  background: #f8f7f3;
+  color: var(--text);
+  font-size: 13px;
+}
+
+.editor-save-button,
+.editor-preview-button {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--accent-strong);
+  touch-action: manipulation;
+}
+
+.editor-save-button:hover:not(:disabled),
+.editor-preview-button:hover:not(:disabled) {
+  background: var(--selected-soft);
+  border-color: #eed08b;
+}
+
+.editor-preview-button.active {
+  background: var(--selected);
+  border-color: #e3bd5d;
+}
+
+.editor-save-button:disabled,
+.editor-preview-button:disabled {
+  color: #b9b4aa;
+}
+
+.editor-save-button svg,
+.editor-preview-button svg {
+  width: 18px;
+  height: 18px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+
+.mobile-folder-select,
+.mobile-save-button,
+.mobile-preview-button {
+  display: none;
+}
+
+.mobile-actions {
+  display: none;
+}
+
+#editor {
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+  padding: 8px 56px 36px;
+  border: 0;
+  outline: 0;
+  resize: none;
+  background: transparent;
+  color: var(--text);
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
+  font-size: 18px;
+  line-height: 1.55;
+}
+
+.markdown-preview {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 8px 56px 36px;
+  color: var(--text);
+  font-size: 18px;
+  line-height: 1.55;
+}
+
+.markdown-preview h1,
+.markdown-preview h2,
+.markdown-preview h3 {
+  margin: 0.8em 0 0.35em;
+  line-height: 1.2;
+}
+
+.markdown-preview p,
+.markdown-preview ul,
+.markdown-preview ol,
+.markdown-preview blockquote,
+.markdown-preview pre {
+  margin: 0.55em 0;
+}
+
+.markdown-preview code,
+.markdown-preview pre {
+  border-radius: 6px;
+  background: #f1f0ec;
+}
+
+.markdown-preview code {
+  padding: 2px 4px;
+}
+
+.markdown-preview pre {
+  overflow: auto;
+  padding: 10px;
+}
+
+.markdown-preview blockquote {
+  border-left: 3px solid #d7d2c8;
+  padding-left: 12px;
+  color: #6e675d;
+}
+
+.empty-state {
+  position: absolute;
+  inset: 48px 0 0;
+  display: none;
+  place-content: center;
+  gap: 8px;
+  background: var(--editor);
+  color: var(--muted);
+  text-align: center;
+}
+
+.empty-state strong {
+  color: #5d5850;
+  font-size: 18px;
+}
+
+.editor-pane.empty #editor,
+.editor-pane.empty .markdown-preview,
+.editor-pane.empty .editor-meta {
+  visibility: hidden;
+}
+
+.editor-pane.empty .empty-state {
+  display: grid;
+}
+
+@media (max-width: 900px) {
+  .app-shell {
+    grid-template-columns: 180px minmax(230px, 300px) minmax(320px, 1fr);
+  }
+
+  #editor {
+    padding-inline: 30px;
+  }
+}
+
+@media (max-width: 720px) {
+  body {
+    overflow: hidden;
+  }
+
+  .app-shell {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto minmax(240px, 36dvh) minmax(360px, 1fr);
+    height: 100vh;
+    height: 100dvh;
+    min-height: 0;
+  }
+
+  .folders {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+    padding: 10px;
+    overflow: hidden;
+  }
+
+  .sidebar-title {
+    display: none;
+  }
+
+  .folder-scroll,
+  #folderList {
+    display: flex;
+    min-width: 0;
+    gap: 8px;
+  }
+
+  .folder-scroll {
+    flex: 1 1 auto;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  #folderList {
+    flex: 0 0 auto;
+  }
+
+  .folder-row {
+    grid-template-columns: 18px auto auto;
+    column-gap: 5px;
+    width: auto;
+    min-height: 38px;
+    min-width: 0;
+    flex: 0 0 auto;
+  }
+
+  .folder-footer {
+    margin-top: 0;
+    padding-top: 0;
+    flex: 0 0 auto;
+  }
+
+  .new-folder-button {
+    grid-template-columns: 22px;
+    width: 38px;
+    min-height: 38px;
+    place-items: center;
+    padding: 0;
+  }
+
+  .new-folder-button span {
+    display: none;
+  }
+
+  .notes-pane {
+    min-height: 0;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .editor-pane {
+    min-height: 0;
+  }
+
+  .toolbar {
+    min-height: 46px;
+  }
+
+  .icon-button {
+    width: 38px;
+    height: 38px;
+  }
+
+  .note-card {
+    min-height: 70px;
+  }
+
+  #editor {
+    padding: 6px 20px 28px;
+    font-size: 17px;
+  }
+
+  .markdown-preview {
+    padding: 6px 20px 28px;
+    font-size: 17px;
+  }
+
+  .editor-meta {
+    grid-template-columns: 1fr;
+    height: 52px;
+    padding: 8px 16px 0;
+  }
+
+  .editor-meta time {
+    padding-left: 0;
+  }
+
+  .save-status {
+    display: none;
+  }
+
+  #noteFolderSelect,
+  .editor-preview-button,
+  .editor-save-button {
+    display: none;
+  }
+
+  .app-shell[data-mobile-view="editor"] .mobile-folder-select {
+    display: block;
+    width: 100%;
+    height: 32px;
+    padding: 0 6px;
+    border: 1px solid #d7d2c8;
+    border-radius: 7px;
+    outline: 0;
+    background: #f8f7f3;
+    color: var(--text);
+    font-size: 12px;
+  }
+}
+
+html.force-mobile body {
+  display: grid;
+  overflow: hidden;
+  min-height: 100vh;
+  place-items: center;
+  background: #2f3337;
+}
+
+html.force-mobile .app-shell {
+  grid-template-columns: 1fr;
+  grid-template-rows: auto minmax(240px, 36dvh) minmax(360px, 1fr);
+  width: min(390px, 100vw);
+  height: min(844px, 100vh);
+  height: min(844px, 100dvh);
+  min-height: 0;
+  overflow: hidden;
+  border: 10px solid #141517;
+  border-radius: 36px;
+}
+
+html.force-mobile .folders {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  overflow: hidden;
+  border-right: 0;
+  border-bottom: 1px solid var(--line);
+  padding: 10px;
+}
+
+html.force-mobile .sidebar-title {
+  display: none;
+}
+
+html.force-mobile .folder-scroll,
+html.force-mobile #folderList {
+  display: flex;
+  min-width: 0;
+  gap: 8px;
+}
+
+html.force-mobile .folder-scroll {
+  flex: 1 1 auto;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+html.force-mobile #folderList {
+  flex: 0 0 auto;
+}
+
+html.force-mobile .folder-row {
+  grid-template-columns: 18px auto auto;
+  column-gap: 5px;
+  flex: 0 0 auto;
+  width: auto;
+  min-width: 0;
+  min-height: 38px;
+}
+
+html.force-mobile .folder-footer {
+  margin-top: 0;
+  padding-top: 0;
+  flex: 0 0 auto;
+}
+
+html.force-mobile .new-folder-button {
+  grid-template-columns: 22px;
+  width: 38px;
+  min-height: 38px;
+  place-items: center;
+  padding: 0;
+}
+
+html.force-mobile .new-folder-button span {
+  display: none;
+}
+
+html.force-mobile .notes-pane {
+  min-height: 0;
+  border-right: 0;
+  border-bottom: 1px solid var(--line);
+}
+
+html.force-mobile .editor-pane {
+  min-height: 0;
+}
+
+html.force-mobile .toolbar {
+  min-height: 46px;
+}
+
+html.force-mobile .icon-button {
+  width: 38px;
+  height: 38px;
+}
+
+html.force-mobile .note-card {
+  min-height: 70px;
+}
+
+html.force-mobile #editor {
+  padding: 6px 20px 28px;
+  font-size: 17px;
+}
+
+html.force-mobile .markdown-preview {
+  padding: 6px 20px 28px;
+  font-size: 17px;
+}
+
+html.force-mobile .editor-meta {
+  grid-template-columns: 1fr;
+  height: 52px;
+  padding: 8px 16px 0;
+}
+
+html.force-mobile .editor-meta time {
+  padding-left: 0;
+}
+
+html.force-mobile .save-status {
+  display: none;
+}
+
+html.force-mobile #noteFolderSelect,
+html.force-mobile .editor-preview-button,
+html.force-mobile .editor-save-button {
+  display: none;
+}
+
+html.force-mobile .app-shell[data-mobile-view="editor"] .mobile-folder-select {
+  display: block;
+  width: 100%;
+  height: 32px;
+  padding: 0 6px;
+  border: 1px solid #d7d2c8;
+  border-radius: 7px;
+  outline: 0;
+  background: #f8f7f3;
+  color: var(--text);
+  font-size: 12px;
+}
+
+@media (max-width: 720px) {
+  .app-shell {
+    grid-template-columns: 1fr;
+    grid-template-rows: 48px minmax(0, 1fr) auto;
+  }
+
+  .mobile-nav {
+    display: grid;
+    grid-template-columns: 118px 1fr 100px;
+    align-items: center;
+    grid-column: 1;
+    grid-row: 1;
+    min-height: 48px;
+    padding: 0 10px;
+    border-bottom: 1px solid var(--line);
+    background: var(--list);
+  }
+
+  .mobile-back {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    min-width: 0;
+    height: 36px;
+    border: 0;
+    background: transparent;
+    color: var(--accent-strong);
+    touch-action: manipulation;
+  }
+
+  .mobile-back span {
+    overflow: hidden;
+    max-width: 92px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .mobile-back svg {
+    width: 22px;
+    height: 22px;
+    fill: none;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 2;
+  }
+
+  .mobile-back.is-hidden {
+    visibility: hidden;
+  }
+
+  #mobileTitle {
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .mobile-actions {
+    position: relative;
+    display: none;
+    justify-self: end;
+  }
+
+  .app-shell[data-mobile-view="editor"] .mobile-actions {
+    display: block;
+  }
+
+  .mobile-more-button {
+    display: grid;
+    place-items: center;
+    width: 38px;
+    height: 38px;
+    border: 0;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--accent-strong);
+  }
+
+  .mobile-action-menu {
+    position: absolute;
+    top: 42px;
+    right: 0;
+    z-index: 30;
+    display: grid;
+    gap: 4px;
+    width: 210px;
+    padding: 8px;
+    border: 1px solid var(--line);
+    border-radius: 8px;
+    background: rgba(248, 247, 243, 0.98);
+    box-shadow: 0 12px 30px rgba(31, 29, 25, 0.18);
+  }
+
+  .mobile-action-menu[hidden] {
+    display: none;
+  }
+
+  .mobile-action-menu label {
+    display: grid;
+    gap: 5px;
+    padding: 6px;
+    color: var(--muted);
+    font-size: 12px;
+  }
+
+  .mobile-action-menu button {
+    display: grid;
+    grid-template-columns: 20px 1fr;
+    align-items: center;
+    gap: 8px;
+    min-height: 36px;
+    border: 0;
+    border-radius: 7px;
+    background: transparent;
+    color: var(--text);
+    text-align: left;
+  }
+
+  .mobile-action-menu button:active {
+    background: var(--selected-soft);
+  }
+
+  .mobile-more-button svg,
+  .mobile-action-menu svg {
+    width: 20px;
+    height: 20px;
+    fill: none;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 2;
+  }
+
+  .mobile-bottom {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 44px;
+    gap: 10px;
+    align-items: center;
+    grid-column: 1;
+    grid-row: 3;
+    min-height: 58px;
+    padding: 8px 12px;
+    border-top: 1px solid var(--line);
+    background: var(--list);
+  }
+
+  .mobile-search input {
+    width: 100%;
+    height: 36px;
+    padding: 0 12px;
+    border: 1px solid #d7d2c8;
+    border-radius: 8px;
+    outline: 0;
+    background: #f1f0ec;
+    font-size: 16px;
+  }
+
+  .mobile-edit-button,
+  .mobile-preview-button,
+  .mobile-save-button {
+    display: grid;
+    place-items: center;
+    width: 42px;
+    height: 42px;
+    border: 0;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--accent-strong);
+    touch-action: manipulation;
+  }
+
+  .mobile-save-button:disabled,
+  .mobile-preview-button:disabled {
+    color: #b9b4aa;
+  }
+
+  .mobile-save-button,
+  .mobile-preview-button {
+    display: none;
+  }
+
+  .mobile-preview-button.active {
+    background: var(--selected);
+  }
+
+  .mobile-edit-button svg,
+  .mobile-preview-button svg,
+  .mobile-save-button svg {
+    width: 22px;
+    height: 22px;
+    fill: none;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 2;
+  }
+
+  .folders,
+  .notes-pane,
+  .editor-pane {
+    display: none;
+    grid-column: 1;
+    grid-row: 2;
+    min-height: 0;
+  }
+
+  .app-shell[data-mobile-view="folders"] .folders,
+  .app-shell[data-mobile-view="list"] .notes-pane,
+  .app-shell[data-mobile-view="editor"] .editor-pane {
+    display: flex;
+  }
+
+  .app-shell[data-mobile-view="editor"] .mobile-bottom {
+    grid-template-columns: 44px 44px 44px;
+    justify-content: end;
+  }
+
+  .app-shell[data-mobile-view="editor"] .mobile-search {
+    display: none;
+  }
+
+  .app-shell[data-mobile-view="editor"] .mobile-save-button {
+    display: grid;
+  }
+
+  .app-shell[data-mobile-view="editor"] .mobile-preview-button {
+    display: grid;
+  }
+
+  .folders {
+    flex-direction: column;
+    gap: 0;
+    overflow: hidden;
+    border-right: 0;
+    border-bottom: 0;
+    padding: 16px 12px;
+  }
+
+  .folder-scroll {
+    display: block;
+    flex: 1 1 auto;
+    overflow: auto;
+  }
+
+  #folderList {
+    display: block;
+  }
+
+  .folder-row {
+    grid-template-columns: 22px 1fr auto;
+    width: 100%;
+    min-height: 42px;
+  }
+
+  .folder-item {
+    grid-template-columns: 1fr;
+  }
+
+  .folder-item.can-delete {
+    grid-template-columns: 1fr 38px;
+  }
+
+  .folder-item.can-delete .folder-delete {
+    display: grid;
+    width: 38px;
+    height: 38px;
+  }
+
+  .folder-footer {
+    margin-top: 12px;
+    padding-top: 8px;
+  }
+
+  .new-folder-button {
+    grid-template-columns: 22px 1fr;
+    width: 100%;
+    min-height: 42px;
+    align-items: center;
+    padding: 0 8px;
+  }
+
+  .new-folder-button span {
+    display: inline;
+  }
+
+  .notes-pane {
+    border-right: 0;
+    border-bottom: 0;
+  }
+
+  .toolbar,
+  .search-wrap {
+    display: none;
+  }
+
+  .list-heading {
+    padding-top: 18px;
+  }
+
+  .editor-pane {
+    border: 0;
+  }
+}
+
+html.force-mobile .app-shell {
+  grid-template-columns: 1fr;
+  grid-template-rows: 48px minmax(0, 1fr) auto;
+}
+
+html.force-mobile .mobile-nav {
+  display: grid;
+  grid-template-columns: 118px 1fr 100px;
+  align-items: center;
+  grid-column: 1;
+  grid-row: 1;
+  min-height: 48px;
+  padding: 0 10px;
+  border-bottom: 1px solid var(--line);
+  background: var(--list);
+}
+
+html.force-mobile .mobile-bottom {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 44px;
+  gap: 10px;
+  align-items: center;
+  grid-column: 1;
+  grid-row: 3;
+  min-height: 58px;
+  padding: 8px 12px;
+  border-top: 1px solid var(--line);
+  background: var(--list);
+}
+
+html.force-mobile .mobile-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  height: 36px;
+  border: 0;
+  background: transparent;
+  color: var(--accent-strong);
+}
+
+html.force-mobile .mobile-back span {
+  overflow: hidden;
+  max-width: 92px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+html.force-mobile .mobile-back svg,
+html.force-mobile .mobile-edit-button svg,
+html.force-mobile .mobile-preview-button svg,
+html.force-mobile .mobile-save-button svg {
+  width: 22px;
+  height: 22px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+
+html.force-mobile .mobile-back.is-hidden {
+  visibility: hidden;
+}
+
+html.force-mobile #mobileTitle {
+  overflow: hidden;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+html.force-mobile .mobile-actions {
+  position: relative;
+  display: none;
+  justify-self: end;
+}
+
+html.force-mobile .app-shell[data-mobile-view="editor"] .mobile-actions {
+  display: block;
+}
+
+html.force-mobile .mobile-more-button {
+  display: grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--accent-strong);
+}
+
+html.force-mobile .mobile-action-menu {
+  position: absolute;
+  top: 42px;
+  right: 0;
+  z-index: 30;
+  display: grid;
+  gap: 4px;
+  width: 210px;
+  padding: 8px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: rgba(248, 247, 243, 0.98);
+  box-shadow: 0 12px 30px rgba(31, 29, 25, 0.18);
+}
+
+html.force-mobile .mobile-action-menu[hidden] {
+  display: none;
+}
+
+html.force-mobile .mobile-action-menu label {
+  display: grid;
+  gap: 5px;
+  padding: 6px;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+html.force-mobile .mobile-action-menu button {
+  display: grid;
+  grid-template-columns: 20px 1fr;
+  align-items: center;
+  gap: 8px;
+  min-height: 36px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--text);
+  text-align: left;
+}
+
+html.force-mobile .mobile-more-button svg,
+html.force-mobile .mobile-action-menu svg {
+  width: 20px;
+  height: 20px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+
+html.force-mobile .mobile-search input {
+  width: 100%;
+  height: 36px;
+  padding: 0 12px;
+  border: 1px solid #d7d2c8;
+  border-radius: 8px;
+  outline: 0;
+  background: #f1f0ec;
+  font-size: 16px;
+}
+
+html.force-mobile .mobile-edit-button,
+html.force-mobile .mobile-preview-button,
+html.force-mobile .mobile-save-button {
+  display: grid;
+  place-items: center;
+  width: 42px;
+  height: 42px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--accent-strong);
+}
+
+html.force-mobile .mobile-save-button:disabled,
+html.force-mobile .mobile-preview-button:disabled {
+  color: #b9b4aa;
+}
+
+html.force-mobile .mobile-save-button,
+html.force-mobile .mobile-preview-button {
+  display: none;
+}
+
+html.force-mobile .mobile-preview-button.active {
+  background: var(--selected);
+}
+
+html.force-mobile .folders,
+html.force-mobile .notes-pane,
+html.force-mobile .editor-pane {
+  display: none;
+  grid-column: 1;
+  grid-row: 2;
+  min-height: 0;
+}
+
+html.force-mobile .app-shell[data-mobile-view="folders"] .folders,
+html.force-mobile .app-shell[data-mobile-view="list"] .notes-pane,
+html.force-mobile .app-shell[data-mobile-view="editor"] .editor-pane {
+  display: flex;
+}
+
+html.force-mobile .app-shell[data-mobile-view="editor"] .mobile-bottom {
+  grid-template-columns: 44px 44px 44px;
+  justify-content: end;
+}
+
+html.force-mobile .app-shell[data-mobile-view="editor"] .mobile-search {
+  display: none;
+}
+
+html.force-mobile .app-shell[data-mobile-view="editor"] .mobile-save-button {
+  display: grid;
+}
+
+html.force-mobile .app-shell[data-mobile-view="editor"] .mobile-preview-button {
+  display: grid;
+}
+
+html.force-mobile .folders {
+  flex-direction: column;
+  gap: 0;
+  overflow: hidden;
+  border-right: 0;
+  border-bottom: 0;
+  padding: 16px 12px;
+}
+
+html.force-mobile .folder-scroll {
+  display: block;
+  flex: 1 1 auto;
+  overflow: auto;
+}
+
+html.force-mobile #folderList {
+  display: block;
+}
+
+html.force-mobile .folder-row {
+  grid-template-columns: 22px 1fr auto;
+  width: 100%;
+  min-height: 42px;
+}
+
+html.force-mobile .folder-item {
+  grid-template-columns: 1fr;
+}
+
+html.force-mobile .folder-item.can-delete {
+  grid-template-columns: 1fr 38px;
+}
+
+html.force-mobile .folder-item.can-delete .folder-delete {
+  display: grid;
+  width: 38px;
+  height: 38px;
+}
+
+html.force-mobile .folder-footer {
+  margin-top: 12px;
+  padding-top: 8px;
+}
+
+html.force-mobile .new-folder-button {
+  grid-template-columns: 22px 1fr;
+  width: 100%;
+  min-height: 42px;
+  align-items: center;
+  padding: 0 8px;
+}
+
+html.force-mobile .new-folder-button span {
+  display: inline;
+}
+
+html.force-mobile .toolbar,
+html.force-mobile .search-wrap {
+  display: none;
+}
+
+html.force-mobile .notes-pane,
+html.force-mobile .editor-pane {
+  border: 0;
+}