slop/spark
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v2

Browse Source
This commit is contained in:
Nicholas Keller
2026-06-10 00:40:26 -04:00
parent 6cf48a9a9e
commit df1cd6836c
16 changed files with 1502 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.js
+198 -112
View File
@@ -1,84 +1,99 @@
// --- Tiny API client ---
const api = {
async req(method, path, body) {
const res = await fetch(path, {
method,
headers: body ? { "Content-Type": "application/json" } : undefined,
body: body ? JSON.stringify(body) : undefined,
});
const data = res.status === 204 ? null : await res.json().catch(() => null);
if (!res.ok) throw new Error((data && data.error) || "Request failed");
return data;
},
ideas: () => api.req("GET", "/api/ideas"),
createIdea: (title, description) =>
// --- API endpoints (relies on window.api from common.js) ---
const ideasApi = {
list: () => api.req("GET", "/api/ideas"),
create: (title, description) =>
api.req("POST", "/api/ideas", { title, description }),
deleteIdea: (id) => api.req("DELETE", `/api/ideas/${id}`),
remove: (id) => api.req("DELETE", `/api/ideas/${id}`),
setVisibility: (id, visibility) =>
api.req("PUT", `/api/ideas/${id}/visibility`, { visibility }),
enableShare: (id) => api.req("POST", `/api/ideas/${id}/share`),
disableShare: (id) => api.req("DELETE", `/api/ideas/${id}/share`),
notes: (id) => api.req("GET", `/api/ideas/${id}/notes`),
addNote: (id, body) => api.req("POST", `/api/ideas/${id}/notes`, { body }),
deleteNote: (id) => api.req("DELETE", `/api/notes/${id}`),
};
// --- State ---
let me = null;
let ideas = [];
let selectedId = null;
// --- Helpers ---
const $ = (sel) => document.querySelector(sel);
function escapeHtml(s) {
return String(s)
.replace(/&/g, "&")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;");
// --- Auth bootstrap ---
async function init() {
$("#idea-form").addEventListener("submit", onCreateIdea);
try {
me = await api.req("GET", "/api/me");
showApp();
await refresh();
} catch (e) {
if (e.status === 401) showLogin();
else toast(e.message, true);
}
}
// SQLite stores UTC datetimes as "YYYY-MM-DD HH:MM:SS"; parse as UTC.
function parseUTC(s) {
return new Date(s.replace(" ", "T") + "Z");
async function showLogin() {
$("#app-main").hidden = true;
$("#login-gate").hidden = false;
const params = new URLSearchParams(location.search);
if (params.get("auth_error")) {
const el = $("#login-error");
el.hidden = false;
el.textContent =
params.get("auth_error") === "state"
? "Sign-in session expired or was tampered with. Please try again."
: "Could not complete sign-in. Please try again.";
}
try {
const { providers } = await api.req("GET", "/api/auth/providers");
const box = $("#provider-buttons");
if (!providers.length) {
$("#login-note").hidden = false;
return;
}
box.innerHTML = providers.map(providerButton).join("");
box.querySelectorAll(".provider-btn").forEach((btn) => {
btn.addEventListener("click", () => {
location.href = `/auth/${btn.dataset.provider}`;
});
});
} catch (e) {
toast(e.message, true);
}
}
function relativeTime(s) {
const then = parseUTC(s);
const diff = (Date.now() - then.getTime()) / 1000;
if (diff < 45) return "just now";
if (diff < 90) return "a minute ago";
if (diff < 3600) return `${Math.round(diff / 60)} min ago`;
if (diff < 7200) return "an hour ago";
if (diff < 86400) return `${Math.round(diff / 3600)} hours ago`;
if (diff < 172800) return "yesterday";
if (diff < 604800) return `${Math.round(diff / 86400)} days ago`;
return then.toLocaleDateString(undefined, {
month: "short",
day: "numeric",
year: "numeric",
function showApp() {
$("#login-gate").hidden = true;
$("#app-main").hidden = false;
renderUserChip();
}
function renderUserChip() {
const nav = $("#nav-right");
// Remove any existing chip first.
nav.querySelector(".user-chip")?.remove();
const avatar = me.avatar_url
? `<img src="${escapeHtml(me.avatar_url)}" alt="" />`
: `<span class="avatar-fallback">${escapeHtml(
(me.name || "?")[0].toUpperCase()
)}</span>`;
const chip = document.createElement("div");
chip.className = "user-chip";
chip.innerHTML = `${avatar}<span>${escapeHtml(
me.name
)}</span><span class="logout" title="Sign out">⎋</span>`;
chip.querySelector(".logout").addEventListener("click", () => {
location.href = "/auth/logout";
});
nav.appendChild(chip);
}
function fullTime(s) {
return parseUTC(s).toLocaleString(undefined, {
dateStyle: "medium",
timeStyle: "short",
});
}
let toastTimer;
function toast(msg, isError = false) {
const el = $("#toast");
el.textContent = msg;
el.classList.toggle("error", isError);
el.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(() => el.classList.remove("show"), 2600);
}
// --- Rendering ---
// --- Rendering: idea list ---
function renderList() {
const list = $("#ideas-list");
$("#idea-count").textContent = ideas.length;
if (ideas.length === 0) {
if (!ideas.length) {
list.innerHTML =
'<div class="empty" style="padding:30px 10px">No ideas yet. Add your first one!</div>';
return;
@@ -90,19 +105,27 @@ function renderList() {
<div class="idea-item ${idea.id === selectedId ? "active" : ""}" data-id="${idea.id}">
<h3>${escapeHtml(idea.title)}</h3>
<div class="meta">
<span class="pill">${idea.note_count} note${idea.note_count === 1 ? "" : "s"}</span>
<span class="pill">${idea.note_count} note${
idea.note_count === 1 ? "" : "s"
}</span>
<span class="vis-badge ${idea.visibility}">${
idea.visibility === "public" ? "🌐 public" : "🔒 private"
}</span>
<span>updated ${relativeTime(idea.updated_at)}</span>
</div>
</div>`
)
.join("");
list.querySelectorAll(".idea-item").forEach((el) => {
el.addEventListener("click", () => selectIdea(Number(el.dataset.id)));
});
list
.querySelectorAll(".idea-item")
.forEach((el) =>
el.addEventListener("click", () => selectIdea(Number(el.dataset.id)))
);
}
async function renderDetail() {
// --- Rendering: detail + privacy + notes ---
function renderDetail() {
const panel = $("#detail-panel");
const idea = ideas.find((i) => i.id === selectedId);
@@ -112,13 +135,57 @@ async function renderDetail() {
return;
}
const shareUrl = idea.share_token
? `${location.origin}/share/${idea.share_token}`
: "";
panel.innerHTML = `
<div class="detail-head">
<h2>${escapeHtml(idea.title)}</h2>
<button class="btn btn-danger btn-sm" id="del-idea">Delete idea</button>
</div>
${idea.description ? `<p class="detail-desc">${escapeHtml(idea.description)}</p>` : ""}
${
idea.description
? `<p class="detail-desc">${escapeHtml(idea.description)}</p>`
: ""
}
<div class="detail-meta">Created ${fullTime(idea.created_at)}</div>
<div class="privacy-bar">
<span class="vis-badge ${idea.visibility}">${
idea.visibility === "public" ? "🌐 Public" : "🔒 Private"
}</span>
<label class="switch">
<input type="checkbox" id="vis-toggle" ${
idea.visibility === "public" ? "checked" : ""
} />
<span class="track"></span>
<span>List on public Explore feed</span>
</label>
</div>
<div class="share-box">
<div class="share-head">
<h4>🔗 Shareable read-only link</h4>
${
idea.share_token
? `<button class="btn btn-danger btn-sm" id="share-disable">Disable</button>`
: `<button class="btn btn-sm" id="share-enable">Create link</button>`
}
</div>
${
idea.share_token
? `<div class="share-row">
<input type="text" id="share-url" value="${escapeHtml(
shareUrl
)}" readonly />
<button class="btn btn-sm" id="share-copy">Copy</button>
</div>
<div class="share-hint">Anyone with this link can view the idea and its notes (read-only) — no account needed.</div>`
: `<div class="share-hint">Generate a secret link to share this idea read-only, even while it stays private.</div>`
}
</div>
<div class="divider"></div>
<h2 style="font-size:1.05rem;margin-bottom:4px">Notes</h2>
<div id="notes-container"><div class="empty" style="padding:20px">Loading…</div></div>
@@ -129,6 +196,16 @@ async function renderDetail() {
`;
$("#del-idea").addEventListener("click", () => onDeleteIdea(idea.id));
$("#vis-toggle").addEventListener("change", (e) =>
onToggleVisibility(idea.id, e.target.checked)
);
$("#share-enable")?.addEventListener("click", () => onEnableShare(idea.id));
$("#share-disable")?.addEventListener("click", () => onDisableShare(idea.id));
$("#share-copy")?.addEventListener("click", async () => {
await navigator.clipboard.writeText(shareUrl).catch(() => {});
toast("Link copied to clipboard 🔗");
});
const form = $("#note-form");
form.addEventListener("submit", (e) => {
@@ -145,45 +222,20 @@ async function renderDetail() {
loadNotes(idea.id);
}
function renderNotes(notes) {
const container = $("#notes-container");
if (!container) return;
if (notes.length === 0) {
container.innerHTML =
'<div class="empty" style="padding:24px">No notes yet — add the first one below.</div>';
return;
}
container.innerHTML = notes
.map(
(n) => `
<div class="note">
<div class="avatar">📝</div>
<div class="note-body">
<div class="text">${escapeHtml(n.body)}</div>
<div class="note-time">
<span title="${escapeHtml(fullTime(n.created_at))}">${relativeTime(n.created_at)}</span>
<span class="del" data-note="${n.id}">delete</span>
</div>
</div>
</div>`
)
.join("");
container.querySelectorAll(".del").forEach((el) => {
el.addEventListener("click", () => onDeleteNote(Number(el.dataset.note)));
});
}
// --- Actions ---
async function refresh() {
try {
ideas = await api.ideas();
ideas = await ideasApi.list();
renderList();
renderDetail();
} catch (e) {
toast(e.message, true);
}
}
async function refreshListOnly() {
ideas = await ideasApi.list();
renderList();
}
function selectIdea(id) {
selectedId = id;
@@ -193,8 +245,9 @@ function selectIdea(id) {
async function loadNotes(id) {
try {
const notes = await api.notes(id);
if (selectedId === id) renderNotes(notes);
const notes = await ideasApi.notes(id);
if (selectedId === id)
renderNotesInto($("#notes-container"), notes, onDeleteNote);
} catch (e) {
toast(e.message, true);
}
@@ -206,7 +259,7 @@ async function onCreateIdea(e) {
const description = $("#idea-desc").value.trim();
if (!title) return;
try {
const idea = await api.createIdea(title, description);
const idea = await ideasApi.create(title, description);
$("#idea-form").reset();
await refresh();
selectIdea(idea.id);
@@ -219,7 +272,7 @@ async function onCreateIdea(e) {
async function onDeleteIdea(id) {
if (!confirm("Delete this idea and all its notes?")) return;
try {
await api.deleteIdea(id);
await ideasApi.remove(id);
if (selectedId === id) selectedId = null;
await refresh();
toast("Idea deleted");
@@ -228,28 +281,57 @@ async function onDeleteIdea(id) {
}
}
async function onToggleVisibility(id, makePublic) {
try {
const updated = await ideasApi.setVisibility(id, makePublic ? "public" : "private");
mergeIdea(updated);
renderList();
renderDetail();
toast(makePublic ? "Now public on Explore 🌐" : "Set to private 🔒");
} catch (err) {
toast(err.message, true);
renderDetail();
}
}
async function onEnableShare(id) {
try {
const updated = await ideasApi.enableShare(id);
mergeIdea(updated);
renderDetail();
toast("Share link created 🔗");
} catch (err) {
toast(err.message, true);
}
}
async function onDisableShare(id) {
try {
const updated = await ideasApi.disableShare(id);
mergeIdea(updated);
renderDetail();
toast("Share link disabled");
} catch (err) {
toast(err.message, true);
}
}
async function onAddNote(id) {
const input = $("#note-body");
const body = input.value.trim();
if (!body) return;
try {
await api.addNote(id, body);
await ideasApi.addNote(id, body);
input.value = "";
// Refresh notes immediately, plus list for the updated count/order.
await Promise.all([loadNotes(id), refreshListOnly()]);
} catch (err) {
toast(err.message, true);
}
}
async function refreshListOnly() {
ideas = await api.ideas();
renderList();
}
async function onDeleteNote(noteId) {
try {
await api.deleteNote(noteId);
await ideasApi.deleteNote(noteId);
if (selectedId) await Promise.all([loadNotes(selectedId), refreshListOnly()]);
toast("Note deleted");
} catch (err) {
@@ -257,6 +339,10 @@ async function onDeleteNote(noteId) {
}
}
// --- Init ---
$("#idea-form").addEventListener("submit", onCreateIdea);
refresh();
// Replace an idea in local state with a fresh copy (preserving note_count).
function mergeIdea(updated) {
const idx = ideas.findIndex((i) => i.id === updated.id);
if (idx !== -1) ideas[idx] = { ...ideas[idx], ...updated };
}
init();