snotes updates, actions, attachments, easy user space

2026-09-22 17:31:55 -07:00
parent ce30c6f4f7
commit abfbf3de1f
21 changed files with 669 additions and 53 deletions
--- a/static/app.js
+++ b/static/app.js
@@ -1,11 +1,109 @@
 import { Editor } from "https://esm.sh/@tiptap/core@2.11.5";
 import StarterKit from "https://esm.sh/@tiptap/starter-kit@2.11.5";
+import Link from "https://esm.sh/@tiptap/extension-link@2.11.5";

 const root = document.getElementById("root");
 const turndownService = new TurndownService({ headingStyle: "atx", codeBlockStyle: "fenced" });
 marked.setOptions({ gfm: true, breaks: false });

-const state = { user: null, local: true, authed: true, editor: null, noteId: null, view: "home" };
+const state = { user: null, local: true, authed: true, editor: null, noteId: null, view: "home", space: null, userNames: null };
+
+const THEMES = [
+  { id: "dark", label: "Dark", dark: true, dots: ["#1a1b1e", "#26272b", "#7dd3fc"] },
+  { id: "light", label: "Light", dark: false, dots: ["#f5f7fb", "#ffffff", "#3b82f6"] },
+  { id: "summer", label: "Summer", dark: false, dots: ["#fff8f0", "#fff0e0", "#f08040"] },
+  { id: "max-summer", label: "Max Summer", dark: false, dots: ["#fffdf5", "#fff9e8", "#e53935"] },
+  { id: "autumn", label: "Autumn", dark: false, dots: ["#f4f1ec", "#eae5de", "#d59b6a"] },
+  { id: "dracula", label: "Dracula", dark: true, dots: ["#0c0c1e", "#12122a", "#7c6af7"] },
+  { id: "nord", label: "Nord", dark: true, dots: ["#2e3440", "#3b4252", "#88c0d0"] },
+  { id: "tokyo-night", label: "Tokyo Night", dark: true, dots: ["#1a1b26", "#1f2335", "#7aa2f7"] },
+  { id: "catppuccin", label: "Catppuccin", dark: true, dots: ["#1e1e2e", "#26263a", "#cba6f7"] },
+  { id: "one-dark", label: "One Dark", dark: true, dots: ["#21252b", "#282c34", "#61afef"] },
+  { id: "sunset", label: "Sunset", dark: true, dots: ["#1c1018", "#251420", "#f472b6"] },
+];
+const THEME_CONFIG_KEY = "snotes-theme-config";
+const themeMQ = window.matchMedia("(prefers-color-scheme: dark)");
+
+function findTheme(id) { return THEMES.find((t) => t.id === id); }
+
+function loadThemeConfig() {
+  let cfg = {};
+  try { cfg = JSON.parse(localStorage.getItem(THEME_CONFIG_KEY)) || {}; } catch (e) {}
+  cfg.mode = cfg.mode === "manual" ? "manual" : "auto";
+  cfg.light = findTheme(cfg.light) ? cfg.light : "light";
+  cfg.dark = findTheme(cfg.dark) ? cfg.dark : "dark";
+  cfg.manual = findTheme(cfg.manual) ? cfg.manual : "dark";
+  return cfg;
+}
+let themeConfig = loadThemeConfig();
+
+function saveThemeConfig() { try { localStorage.setItem(THEME_CONFIG_KEY, JSON.stringify(themeConfig)); } catch (e) {} }
+
+function activeThemeId() {
+  return themeConfig.mode === "auto" ? (themeMQ.matches ? themeConfig.dark : themeConfig.light) : themeConfig.manual;
+}
+
+function applyTheme() {
+  const id = activeThemeId();
+  document.documentElement.setAttribute("data-theme", id);
+  const t = findTheme(id);
+  const label = document.querySelector(".theme-label");
+  const swatch = document.querySelector(".theme-btn .theme-swatch");
+  if (label) label.textContent = t ? t.label : "";
+  if (swatch && t) swatch.innerHTML = t.dots.map((c) => `<span class="theme-dot" style="background:${c}"></span>`).join("");
+}
+
+function themeSelector() {
+  const sel = el("div", { class: "theme-selector" });
+  const btn = el("button", { class: "theme-btn", title: "Change theme" }, [
+    el("span", { class: "theme-swatch" }),
+    el("span", { class: "theme-label" }),
+    el("span", { class: "chevron", html: "&#9662;" }),
+  ]);
+  const pop = el("div", { class: "theme-popover hidden" });
+  sel.appendChild(btn); sel.appendChild(pop);
+
+  function render() {
+    applyTheme();
+    pop.innerHTML = `
+      <div class="theme-pop-header">Themes</div>
+      <div class="mode-row">
+        <button type="button" class="mode-btn ${themeConfig.mode === "auto" ? "active" : ""}" data-mode="auto">Auto</button>
+        <button type="button" class="mode-btn ${themeConfig.mode === "manual" ? "active" : ""}" data-mode="manual">Manual</button>
+      </div>
+      <div class="auto-panel ${themeConfig.mode === "auto" ? "" : "hidden"}">
+        <label class="auto-label">Light theme</label>
+        <select data-role="light">${THEMES.filter((t) => !t.dark).map((t) => `<option value="${t.id}" ${t.id === themeConfig.light ? "selected" : ""}>${t.label}</option>`).join("")}</select>
+        <label class="auto-label">Dark theme</label>
+        <select data-role="dark">${THEMES.filter((t) => t.dark).map((t) => `<option value="${t.id}" ${t.id === themeConfig.dark ? "selected" : ""}>${t.label}</option>`).join("")}</select>
+      </div>
+      <div class="theme-grid ${themeConfig.mode === "manual" ? "" : "hidden"}">
+        ${THEMES.map((t) => `<button type="button" class="theme-option ${themeConfig.mode === "manual" && t.id === themeConfig.manual ? "active" : ""}" data-theme="${t.id}">
+          <span class="theme-swatch">${t.dots.map((c) => `<span class="theme-dot" style="background:${c}"></span>`).join("")}</span>
+          <span>${t.label}</span>
+        </button>`).join("")}
+      </div>`;
+  }
+
+  btn.addEventListener("click", (e) => { e.stopPropagation(); pop.classList.toggle("hidden"); });
+  pop.addEventListener("click", (e) => {
+    const modeBtn = e.target.closest(".mode-btn");
+    if (modeBtn) { themeConfig.mode = modeBtn.dataset.mode; saveThemeConfig(); render(); return; }
+    const opt = e.target.closest(".theme-option");
+    if (opt) { themeConfig.mode = "manual"; themeConfig.manual = opt.dataset.theme; saveThemeConfig(); render(); pop.classList.add("hidden"); }
+  });
+  pop.addEventListener("change", (e) => {
+    if (e.target.matches('select[data-role="light"]')) { themeConfig.light = e.target.value; saveThemeConfig(); render(); }
+    else if (e.target.matches('select[data-role="dark"]')) { themeConfig.dark = e.target.value; saveThemeConfig(); render(); }
+  });
+  document.addEventListener("click", (e) => { if (!sel.contains(e.target)) pop.classList.add("hidden"); });
+
+  render();
+  return sel;
+}
+
+if (themeMQ.addEventListener) themeMQ.addEventListener("change", () => { if (themeConfig.mode === "auto") applyTheme(); });
+else if (themeMQ.addListener) themeMQ.addListener(() => { if (themeConfig.mode === "auto") applyTheme(); });

 function el(tag, attrs = {}, children = []) {
  const node = document.createElement(tag);
@@ -51,7 +149,7 @@ async function boot() {
 function showLogin() {
  root.innerHTML = "";
  const form = el("form", { class: "login-card", onsubmit: async (e) => { e.preventDefault(); await doLogin(); } }, [
-    el("img", { src: "/static/snotes-main.png", class: "login-logo" }),
+    el("img", { src: "/static/snotes-new.png", class: "login-logo" }),
    el("h1", { text: "snotes" }),
    el("p", { class: "muted", text: "Remote access — enter password" }),
    el("input", { type: "password", id: "pw", placeholder: "Password", autofocus: true }),
@@ -74,13 +172,14 @@ async function doLogin() {
 function header() {
  return el("header", { class: "topbar" }, [
    el("div", { class: "brand" }, [
-      el("img", { src: "/static/snotes-main.png", class: "brand-logo" }),
+      el("img", { src: "/static/snotes-new.png", class: "brand-logo" }),
      el("span", { text: "snotes" }),
    ]),
    el("input", { id: "search", class: "search", type: "search", placeholder: "Search notes…", oninput: debounce(onSearch, 250) }),
    el("div", { class: "topbar-right" }, [
      el("select", { id: "user-select", class: "user-select", onchange: onUserChange }),
      el("button", { class: "btn primary", text: "+ New note", onclick: () => openNote(null) }),
+      themeSelector(),
    ]),
  ]);
 }
@@ -107,7 +206,8 @@ async function showHome() {
 async function populateUsers() {
  const users = await api("GET", "/api/users");
  const sel = document.getElementById("user-select");
-  const names = users.map((u) => u.name).concat(["common"]);
+  const names = users.map((u) => u.name);
+  state.userNames = names;
  for (const n of names) {
    sel.appendChild(el("option", { value: n, text: n }));
  }
@@ -191,15 +291,16 @@ function debounce(fn, ms) {
 async function openNote(noteId) {
  state.view = "editor";
  state.noteId = noteId;
-  let body = "";
+  let body = "", owner = null;
  if (noteId) {
    const note = await api("GET", "/api/notes/" + noteId);
    body = note.body;
+    owner = note.username;
  }
-  renderEditor(body);
+  renderEditor(body, owner);
 }

-function renderEditor(body) {
+function renderEditor(body, owner) {
  root.innerHTML = "";
  state.editor?.destroy();

@@ -208,6 +309,14 @@ function renderEditor(body) {
  const del = state.noteId ? el("button", { class: "btn danger", text: "Delete", onclick: deleteNote }) : null;
  const hist = state.noteId ? el("button", { class: "btn ghost", text: "History", onclick: showHistory }) : null;

+  const spaceSel = el("select", { id: "space-select", class: "user-select", onchange: (e) => { state.space = e.target.value; } });
+  for (const n of (state.userNames || [state.user])) {
+    spaceSel.appendChild(el("option", { value: n, text: n }));
+  }
+  const initialSpace = owner || state.space || state.user;
+  spaceSel.value = initialSpace;
+  state.space = initialSpace;
+
  const toolbar = el("div", { class: "toolbar" }, [
    toolbarBtn("B", "bold"), toolbarBtn("I", "italic"),
    sep(), toolbarBtn("H1", "heading1"), toolbarBtn("H2", "heading2"), toolbarBtn("H3", "heading3"),
@@ -218,16 +327,22 @@ function renderEditor(body) {
  const editorArea = el("div", { class: "editor" });
  const status = el("div", { class: "status", text: "" });

-  root.appendChild(el("div", { class: "editor-wrap" }, [
-    el("div", { class: "editor-topbar" }, [back, el("div", { class: "spacer" }), hist, del, save]),
+  const fileInput = el("input", { type: "file", style: "display:none" });
+  fileInput.addEventListener("change", () => uploadAttachment(fileInput));
+  const attach = el("button", { class: "btn", text: "Attach", onclick: () => fileInput.click() });
+
+  const wrap = el("div", { class: "editor-wrap" }, [
+    el("div", { class: "editor-topbar" }, [back, spaceSel, el("div", { class: "spacer" }), attach, hist, del, save]),
    toolbar,
    editorArea,
    status,
-  ]));
+  ]);
+  wrap.appendChild(fileInput);
+  root.appendChild(wrap);

  state.editor = new Editor({
    element: editorArea,
-    extensions: [StarterKit],
+    extensions: [StarterKit, Link.configure({ openOnClick: false })],
    content: marked.parse(body),
    autofocus: true,
  });
@@ -262,14 +377,15 @@ async function saveNote() {
  const body = turndownService.turndown(html);
  const status = document.querySelector(".status");
  try {
+    let note;
    if (state.noteId) {
-      const note = await api("PUT", "/api/notes/" + state.noteId, { body });
-      status.textContent = "Saved · " + (note.tags || []).map((t) => "#" + t).join(" ") || "";
+      note = await api("PUT", "/api/notes/" + state.noteId, { body, username: state.space });
    } else {
-      const note = await api("POST", "/api/notes", { body });
+      note = await api("POST", "/api/notes", { body, username: state.space });
      state.noteId = note.id;
-      status.textContent = "Saved · " + (note.tags || []).map((t) => "#" + t).join(" ") || "";
    }
+    state.editor.commands.setContent(marked.parse(note.body));
+    status.textContent = "Saved · " + (note.tags || []).map((t) => "#" + t).join(" ") || "";
  } catch (e) { status.textContent = "Error: " + e.message; }
 }

@@ -279,6 +395,32 @@ async function deleteNote() {
  showHome();
 }

+async function uploadAttachment(input) {
+  const file = input.files && input.files[0];
+  if (!file) return;
+  const fd = new FormData();
+  fd.append("file", file);
+  fd.append("username", state.space);
+  const status = document.querySelector(".status");
+  try {
+    const resp = await fetch("/api/attachments", { method: "POST", body: fd });
+    if (!resp.ok) {
+      const err = await resp.json().catch(() => ({}));
+      throw new Error(err.detail || resp.statusText);
+    }
+    const data = await resp.json();
+    state.editor.chain().focus().insertContent({
+      type: "text",
+      text: data.name,
+      marks: [{ type: "link", attrs: { href: data.url } }],
+    }).run();
+    if (status) status.textContent = "Attached " + data.name;
+  } catch (e) {
+    if (status) status.textContent = "Error: " + e.message;
+  }
+  input.value = "";
+}
+
 async function showHistory() {
  const rows = await api("GET", "/api/notes/" + state.noteId + "/history");
  const overlay = el("div", { class: "overlay" }, [