snotes updates, actions, attachments, easy user space
This commit is contained in:
187
static/app.css
187
static/app.css
@@ -1,14 +1,96 @@
|
||||
:root {
|
||||
--bg: #f5f7fb;
|
||||
--surface: #ffffff;
|
||||
--border: #e4e8f0;
|
||||
--text: #1b2430;
|
||||
--muted: #6b7688;
|
||||
--primary: #3b82f6;
|
||||
--primary-dark: #2563eb;
|
||||
--danger: #ef4444;
|
||||
--radius: 10px;
|
||||
--shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
|
||||
--code-bg: #1e293b;
|
||||
--code-fg: #e2e8f0;
|
||||
}
|
||||
|
||||
/* ── Dark (default) ──────────────────────────────────── */
|
||||
html, [data-theme="dark"] {
|
||||
--bg: #1a1b1e; --surface: #26272b; --border: #3a3b40;
|
||||
--text: #e4e4e7; --muted: #9ca3af;
|
||||
--primary: #7dd3fc; --primary-bg: #0c4a6e; --primary-dark: #075985; --on-primary: #7dd3fc;
|
||||
--danger: #f87171; --input-bg: #1a1b1e; --bg-hover: #2b2c31;
|
||||
}
|
||||
|
||||
/* ── Light ───────────────────────────────────────────── */
|
||||
[data-theme="light"] {
|
||||
--bg: #f5f7fb; --surface: #ffffff; --border: #e4e8f0;
|
||||
--text: #1b2430; --muted: #6b7688;
|
||||
--primary: #3b82f6; --primary-bg: #3b82f6; --primary-dark: #2563eb; --on-primary: #ffffff;
|
||||
--danger: #ef4444; --input-bg: #ffffff; --bg-hover: #f3f5f9;
|
||||
}
|
||||
|
||||
/* ── Summer ──────────────────────────────────────────── */
|
||||
[data-theme="summer"] {
|
||||
--bg: #fff8f0; --surface: #fff0e0; --border: #ffd0a0;
|
||||
--text: #4a3528; --muted: #9a8070;
|
||||
--primary: #f08040; --primary-bg: #e06830; --primary-dark: #c05020; --on-primary: #fff8f0;
|
||||
--danger: #c04030; --input-bg: #ffffff; --bg-hover: #ffe0c0;
|
||||
}
|
||||
|
||||
/* ── Max Summer ───────────────────────────────────────── */
|
||||
[data-theme="max-summer"] {
|
||||
--bg: #fffdf5; --surface: #fff9e8; --border: #ffe082;
|
||||
--text: #212121; --muted: #757575;
|
||||
--primary: #e53935; --primary-bg: #d32f2f; --primary-dark: #b71c1c; --on-primary: #fffdf5;
|
||||
--danger: #c62828; --input-bg: #fffefa; --bg-hover: #fff3c8;
|
||||
}
|
||||
|
||||
/* ── Autumn ──────────────────────────────────────────── */
|
||||
[data-theme="autumn"] {
|
||||
--bg: #f4f1ec; --surface: #eae5de; --border: #d4c8bc;
|
||||
--text: #3d3228; --muted: #8a7a6a;
|
||||
--primary: #d59b6a; --primary-bg: #d59b6a; --primary-dark: #c0834a; --on-primary: #f4f1ec;
|
||||
--danger: #c04040; --input-bg: #ffffff; --bg-hover: #e0d8ce;
|
||||
}
|
||||
|
||||
/* ── Dracula ─────────────────────────────────────────── */
|
||||
[data-theme="dracula"] {
|
||||
--bg: #0c0c1e; --surface: #12122a; --border: #222;
|
||||
--text: #eee; --muted: #aaa;
|
||||
--primary: #7c6af7; --primary-bg: #4a3a9a; --primary-dark: #6a5aba; --on-primary: #eee;
|
||||
--danger: #f87272; --input-bg: #1a1a3a; --bg-hover: #2a2a4e;
|
||||
}
|
||||
|
||||
/* ── Nord ────────────────────────────────────────────── */
|
||||
[data-theme="nord"] {
|
||||
--bg: #2e3440; --surface: #3b4252; --border: #4c566a;
|
||||
--text: #eceff4; --muted: #b0b9ca;
|
||||
--primary: #88c0d0; --primary-bg: #5e81ac; --primary-dark: #81a1c1; --on-primary: #eceff4;
|
||||
--danger: #bf616a; --input-bg: #3b4252; --bg-hover: #434c5e;
|
||||
}
|
||||
|
||||
/* ── Tokyo Night ─────────────────────────────────────── */
|
||||
[data-theme="tokyo-night"] {
|
||||
--bg: #1a1b26; --surface: #1f2335; --border: #2f3549;
|
||||
--text: #c0caf5; --muted: #787c99;
|
||||
--primary: #7aa2f7; --primary-bg: #3d59a1; --primary-dark: #5470b8; --on-primary: #a9b1d6;
|
||||
--danger: #f7768e; --input-bg: #1f2335; --bg-hover: #292e42;
|
||||
}
|
||||
|
||||
/* ── Catppuccin ──────────────────────────────────────── */
|
||||
[data-theme="catppuccin"] {
|
||||
--bg: #1e1e2e; --surface: #26263a; --border: #313150;
|
||||
--text: #cdd6f4; --muted: #9399b2;
|
||||
--primary: #cba6f7; --primary-bg: #7350a0; --primary-dark: #8b6bc0; --on-primary: #cdd6f4;
|
||||
--danger: #f38ba8; --input-bg: #26263a; --bg-hover: #313150;
|
||||
}
|
||||
|
||||
/* ── One Dark ────────────────────────────────────────── */
|
||||
[data-theme="one-dark"] {
|
||||
--bg: #21252b; --surface: #282c34; --border: #333842;
|
||||
--text: #dcdfe4; --muted: #9196a0;
|
||||
--primary: #61afef; --primary-bg: #2b5780; --primary-dark: #3a6ea0; --on-primary: #61afef;
|
||||
--danger: #e06c75; --input-bg: #282c34; --bg-hover: #333842;
|
||||
}
|
||||
|
||||
/* ── Sunset ──────────────────────────────────────────── */
|
||||
[data-theme="sunset"] {
|
||||
--bg: #1c1018; --surface: #251420; --border: #352030;
|
||||
--text: #fce7f3; --muted: #b090a0;
|
||||
--primary: #f472b6; --primary-bg: #831843; --primary-dark: #9d174d; --on-primary: #f9a8d4;
|
||||
--danger: #f87171; --input-bg: #251420; --bg-hover: #352030;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
@@ -20,6 +102,7 @@ body {
|
||||
color: var(--text);
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.muted { color: var(--muted); }
|
||||
@@ -46,25 +129,27 @@ body {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
background: var(--bg);
|
||||
background: var(--input-bg);
|
||||
color: var(--text);
|
||||
}
|
||||
.search:focus { outline: 2px solid var(--primary); background: #fff; }
|
||||
.search:focus { outline: 2px solid var(--primary); background: var(--input-bg); }
|
||||
|
||||
.topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
|
||||
.user-select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
|
||||
.user-select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text); }
|
||||
|
||||
.btn {
|
||||
padding: 8px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.btn:hover { background: #f3f5f9; }
|
||||
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
|
||||
.btn.primary:hover { background: var(--primary-dark); }
|
||||
.btn:hover { background: var(--bg-hover); }
|
||||
.btn.primary { background: var(--primary-bg); border-color: var(--primary-bg); color: var(--on-primary); }
|
||||
.btn.primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
|
||||
.btn.danger { color: var(--danger); border-color: var(--danger); }
|
||||
.btn.ghost { background: transparent; border-color: transparent; }
|
||||
|
||||
@@ -97,7 +182,7 @@ body {
|
||||
|
||||
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.tag-chip {
|
||||
background: #eef4ff;
|
||||
background: color-mix(in srgb, var(--primary) 12%, transparent);
|
||||
color: var(--primary);
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
@@ -105,14 +190,14 @@ body {
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tag-chip:hover { background: #dbe7ff; }
|
||||
.tag-chip:hover { background: color-mix(in srgb, var(--primary) 22%, transparent); }
|
||||
|
||||
.editor-wrap { max-width: 900px; margin: 20px auto; padding: 0 20px; }
|
||||
.editor-topbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
|
||||
.spacer { flex: 1; }
|
||||
.toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; }
|
||||
.tool-btn { padding: 6px 10px; border: none; background: transparent; border-radius: 6px; cursor: pointer; font-size: 13px; }
|
||||
.tool-btn:hover { background: #f3f5f9; }
|
||||
.tool-btn { padding: 6px 10px; border: none; background: transparent; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--text); }
|
||||
.tool-btn:hover { background: var(--bg-hover); }
|
||||
.sep { width: 1px; background: var(--border); margin: 4px 6px; }
|
||||
|
||||
.editor {
|
||||
@@ -125,10 +210,11 @@ body {
|
||||
.editor .ProseMirror { min-height: 55vh; outline: none; }
|
||||
.editor h1, .editor h2, .editor h3 { margin: 0.5em 0 0.25em; }
|
||||
.editor p { margin: 0.4em 0; }
|
||||
.editor pre { background: #1e293b; color: #e2e8f0; padding: 12px; border-radius: 8px; overflow-x: auto; }
|
||||
.editor code { background: #f1f5f9; padding: 1px 4px; border-radius: 4px; font-size: 0.9em; }
|
||||
.editor pre { background: var(--code-bg); color: var(--code-fg); padding: 12px; border-radius: 8px; overflow-x: auto; }
|
||||
.editor code { background: color-mix(in srgb, var(--border) 55%, transparent); padding: 1px 4px; border-radius: 4px; font-size: 0.9em; }
|
||||
.editor pre code { background: none; padding: 0; }
|
||||
.editor blockquote { border-left: 3px solid var(--primary); margin: 0.5em 0; padding-left: 12px; color: var(--muted); }
|
||||
.editor a { color: var(--primary); text-decoration: underline; cursor: pointer; }
|
||||
|
||||
.status { margin-top: 10px; color: var(--muted); font-size: 13px; min-height: 20px; }
|
||||
|
||||
@@ -146,7 +232,7 @@ body {
|
||||
text-align: center;
|
||||
}
|
||||
.login-logo { width: 56px; height: 56px; border-radius: 12px; margin: 0 auto; object-fit: cover; }
|
||||
.login-card input { padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; }
|
||||
.login-card input { padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text); }
|
||||
.error { color: var(--danger); font-size: 13px; min-height: 18px; }
|
||||
|
||||
.overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); display: flex; align-items: center; justify-content: center; z-index: 100; }
|
||||
@@ -154,8 +240,65 @@ body {
|
||||
.history-list { list-style: none; padding: 0; margin: 0 0 16px; }
|
||||
.history-list li { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
|
||||
|
||||
/* ── Theme selector ──────────────────────────────────── */
|
||||
.theme-selector { position: relative; }
|
||||
.theme-btn {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px;
|
||||
background: var(--surface); color: var(--text);
|
||||
font-size: 13px; font-family: inherit; cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.theme-btn:hover { background: var(--bg-hover); }
|
||||
.theme-label { color: var(--muted); }
|
||||
.chevron { font-size: 9px; color: var(--muted); }
|
||||
.theme-popover {
|
||||
position: absolute; top: calc(100% + 6px); right: 0;
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
|
||||
padding: 10px; min-width: 200px; z-index: 60;
|
||||
}
|
||||
.theme-pop-header {
|
||||
font-size: 11px; color: var(--muted);
|
||||
text-transform: uppercase; letter-spacing: 0.6px;
|
||||
margin-bottom: 8px; padding: 0 4px;
|
||||
}
|
||||
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
|
||||
.theme-option {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 7px 8px; border: 1px solid transparent; border-radius: 6px;
|
||||
background: var(--bg); cursor: pointer; font-family: inherit;
|
||||
font-size: 13px; color: var(--text);
|
||||
transition: background 0.12s, border-color 0.12s;
|
||||
}
|
||||
.theme-option:hover { border-color: var(--border); }
|
||||
.theme-option.active { border-color: var(--primary); }
|
||||
.theme-swatch { display: flex; gap: 2px; flex-shrink: 0; }
|
||||
.theme-dot { width: 10px; height: 10px; border-radius: 2px; }
|
||||
.mode-row {
|
||||
display: flex; gap: 4px; margin-bottom: 8px;
|
||||
background: var(--bg); padding: 3px; border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.mode-btn {
|
||||
flex: 1; padding: 5px 0; border: none; border-radius: 6px;
|
||||
background: transparent; color: var(--muted);
|
||||
font-family: inherit; font-size: 12px; cursor: pointer;
|
||||
transition: background 0.12s, color 0.12s;
|
||||
}
|
||||
.mode-btn.active { background: var(--primary-bg); color: var(--on-primary); font-weight: 600; }
|
||||
.auto-panel { display: flex; flex-direction: column; gap: 6px; }
|
||||
.auto-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
|
||||
.auto-panel select {
|
||||
width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
|
||||
background: var(--input-bg); color: var(--text); font-family: inherit; font-size: 13px;
|
||||
}
|
||||
.hidden { display: none !important; }
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.layout { grid-template-columns: 1fr; }
|
||||
.topbar { flex-wrap: wrap; }
|
||||
.search { max-width: none; order: 3; flex-basis: 100%; }
|
||||
.theme-popover { right: -60px; }
|
||||
}
|
||||
|
||||
172
static/app.js
172
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: "▾" }),
|
||||
]);
|
||||
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" }, [
|
||||
|
||||
@@ -3,8 +3,22 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>snotes</title>
|
||||
<link rel="icon" type="image/png" href="/static/snotes-main.png">
|
||||
<title>snotes</title>
|
||||
<script>
|
||||
(function () {
|
||||
var cfg = {};
|
||||
try { cfg = JSON.parse(localStorage.getItem("snotes-theme-config")) || {}; } catch (e) {}
|
||||
var id;
|
||||
if (cfg.mode === "manual") {
|
||||
id = cfg.manual || "dark";
|
||||
} else {
|
||||
var dark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
id = dark ? (cfg.dark || "dark") : (cfg.light || "light");
|
||||
}
|
||||
if (id) document.documentElement.setAttribute("data-theme", id);
|
||||
})();
|
||||
</script>
|
||||
<link rel="icon" type="image/png" href="/static/snotes-new.png">
|
||||
<link rel="stylesheet" href="/static/app.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
BIN
static/snotes-new.png
Normal file
BIN
static/snotes-new.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 467 KiB |
Reference in New Issue
Block a user