\n \n\n\n",[129],"50e06628-4468-4bc3-b336-db6d24f0ac2c","app.js","37fbce12-7a47-11f1-9165-1607ee4eb77e",["D",1783458172563],"script","import React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport htm from \"https://esm.sh/htm@3.1.1\";\n\nconst html = htm.bind(React.createElement);\n\nconst PW_KEY = \"notes-unlocked\";\n\nfunction getPassword() {\n return sessionStorage.getItem(PW_KEY) || \"\";\n}\n\nasync function api(path, opts = {}) {\n const headers = Object.assign({}, opts.headers, {\n \"x-notes-password\": getPassword(),\n });\n if (opts.body) headers[\"Content-Type\"] = \"application/json\";\n const res = await fetch(path, { ...opts, headers });\n return res;\n}\n\nfunction formatTimestamp(ms) {\n const d = new Date(ms);\n const pad = (n) => String(n).padStart(2, \"0\");\n const yyyy = d.getUTCFullYear();\n const mm = pad(d.getUTCMonth() + 1);\n const dd = pad(d.getUTCDate());\n const hh = pad(d.getUTCHours());\n const min = pad(d.getUTCMinutes());\n return `${yyyy}-${mm}-${dd} ${hh}:${min}`;\n}\n\nfunction deriveTitle(body) {\n const lines = (body || \"\").split(\"\\n\");\n for (const line of lines) {\n const t = line.trim();\n if (t) return t;\n }\n return \"New Note\";\n}\n\nfunction derivePreview(body) {\n const lines = (body || \"\").split(\"\\n\");\n let titleIndex = -1;\n for (let i = 0; i < lines.length; i++) {\n if (lines[i].trim()) {\n titleIndex = i;\n break;\n }\n }\n if (titleIndex === -1) return \"\";\n for (let i = titleIndex + 1; i < lines.length; i++) {\n const t = lines[i].trim();\n if (t) return t;\n }\n return \"\";\n}\n\n// ---------- Password Gate ----------\nfunction PasswordGate({ onUnlock }) {\n const [pw, setPw] = useState(\"\");\n const [error, setError] = useState(\"\");\n const inputRef = useRef(null);\n\n useEffect(() => {\n if (inputRef.current) inputRef.current.focus();\n }, []);\n\n async function submit(e) {\n e.preventDefault();\n setError(\"\");\n if (!pw) {\n setError(\"Password is required\");\n return;\n }\n const res = await fetch(\"/api/unlock\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ password: pw }),\n });\n if (res.ok) {\n sessionStorage.setItem(PW_KEY, pw);\n onUnlock();\n } else {\n setError(\"Incorrect password\");\n }\n }\n\n return html`\n

\n `;\n}\n\n// ---------- Confirm Dialog ----------\nfunction ConfirmDialog({ onConfirm, onCancel }) {\n return html`\n

Delete note?

\n This note will be permanently deleted. This action cannot be undone.\n

\n \n Cancel\n \n \n Delete\n \n

\n `;\n}\n\n// ---------- Notes List ----------\nfunction NotesList({ onOpen, onNew }) {\n const [notes, setNotes] = useState([]);\n const [query, setQuery] = useState(\"\");\n const [loading, setLoading] = useState(true);\n const [confirmId, setConfirmId] = useState(null);\n\n async function load() {\n const res = await api(\"/api/notes\");\n if (res.ok) {\n const data = await res.json();\n setNotes(data.notes);\n }\n setLoading(false);\n }\n\n useEffect(() => {\n load();\n }, []);\n\n async function handleDelete(id) {\n await api(`/api/notes/${id}`, { method: \"DELETE\" });\n setConfirmId(null);\n load();\n }\n\n const q = query.trim().toLowerCase();\n const filtered = q\n ? notes.filter((n) => {\n const body = (n.body || \"\").toLowerCase();\n const title = deriveTitle(n.body).toLowerCase();\n return body.includes(q) || title.includes(q);\n })\n : notes;\n\n return html`\n

Notes

\n \n + New Note\n \n

\n\n setQuery(e.target.value)}\n placeholder=\"Search notes...\"\n class=\"w-full border border-gray-300 rounded px-3 py-2 mb-4 focus:outline-none focus:ring-2 focus:ring-blue-400\"\n />\n\n ${loading\n ? html`

`\n : filtered.length === 0\n ? html`

\n ${notes.length === 0 ? \"No notes yet. Create your first note!\" : \"No matching notes.\"}\n

`\n : html`\n

\n ${filtered.map(\n (n) => html`\n onOpen(n.id)}\n class=\"p-4 hover:bg-gray-50 cursor-pointer flex items-start justify-between gap-3\"\n >\n

${deriveTitle(n.body)}

${derivePreview(n.body)}

${formatTimestamp(n.updated_at)}

\n {\n e.stopPropagation();\n setConfirmId(n.id);\n }}\n class=\"text-red-500 hover:text-red-700 text-sm px-2 py-1 shrink-0\"\n >\n Delete\n \n

\n `,\n )}\n

\n `}\n\n

\n view source\n

\n\n ${confirmId !== null &&\n html`<${ConfirmDialog}\n onConfirm=${() => handleDelete(confirmId)}\n onCancel=${() => setConfirmId(null)}\n />`}\n \n `;\n}\n\n// ---------- Editor ----------\nfunction Editor({ id, onBack, onDeleted }) {\n const [body, setBody] = useState(\"\");\n const [loading, setLoading] = useState(true);\n const [notFound, setNotFound] = useState(false);\n const [confirm, setConfirm] = useState(false);\n const textRef = useRef(null);\n const bodyRef = useRef(\"\");\n const dirtyRef = useRef(false);\n\n useEffect(() => {\n let active = true;\n (async () => {\n const res = await api(`/api/notes/${id}`);\n if (!active) return;\n if (res.ok) {\n const data = await res.json();\n setBody(data.note.body || \"\");\n bodyRef.current = data.note.body || \"\";\n } else {\n setNotFound(true);\n }\n setLoading(false);\n })();\n return () => {\n active = false;\n };\n }, [id]);\n\n useEffect(() => {\n if (!loading && !notFound && textRef.current) {\n textRef.current.focus();\n const len = textRef.current.value.length;\n textRef.current.setSelectionRange(len, len);\n }\n }, [loading, notFound]);\n\n async function save() {\n if (!dirtyRef.current) return;\n await api(`/api/notes/${id}`, {\n method: \"PUT\",\n body: JSON.stringify({ body: bodyRef.current }),\n });\n dirtyRef.current = false;\n }\n\n async function handleBack() {\n await save();\n onBack();\n }\n\n async function handleDelete() {\n await api(`/api/notes/${id}`, { method: \"DELETE\" });\n setConfirm(false);\n onDeleted();\n }\n\n if (loading) {\n return html`

`;\n }\n\n if (notFound) {\n return html`\n

\n \n

Note not found.

\n `;\n }\n\n return html`\n

\n \n setConfirm(true)}\n class=\"text-red-600 hover:text-red-800 font-medium\"\n >\n Delete\n \n

\n\n {\n setBody(e.target.value);\n bodyRef.current = e.target.value;\n dirtyRef.current = true;\n }}\n placeholder=\"Start typing your note...\"\n class=\"w-full h-96 border border-gray-300 rounded p-4 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-blue-400 bg-white\"\n >\n\n ${confirm &&\n html`<${ConfirmDialog}\n onConfirm=${handleDelete}\n onCancel=${() => setConfirm(false)}\n />`}\n

\n `;\n}\n\n// ---------- App / Router ----------\nfunction App() {\n const [unlocked, setUnlocked] = useState(!!getPassword());\n const [path, setPath] = useState(window.location.pathname);\n\n useEffect(() => {\n const onPop = () => setPath(window.location.pathname);\n window.addEventListener(\"popstate\", onPop);\n return () => window.removeEventListener(\"popstate\", onPop);\n }, []);\n\n function navigate(to) {\n window.history.pushState({}, \"\", to);\n setPath(to);\n }\n\n if (!unlocked) {\n return html`<${PasswordGate} onUnlock=${() => setUnlocked(true)} />`;\n }\n\n const noteMatch = path.match(/^\\/note\\/(\\d+)$/);\n\n if (noteMatch) {\n const id = noteMatch[1];\n return html`<${Editor}\n key=${id}\n id=${id}\n onBack=${() => navigate(\"/\")}\n onDeleted=${() => navigate(\"/\")}\n />`;\n }\n\n return html`<${NotesList}\n onOpen=${(id) => navigate(`/note/${id}`)}\n onNew=${async () => {\n const res = await api(\"/api/notes\", { method: \"POST\" });\n if (res.ok) {\n const data = await res.json();\n navigate(`/note/${data.note.id}`);\n }\n }}\n />`;\n}\n\ncreateRoot(document.getElementById(\"root\")).render(html`<${App} />`);\n",[136],"pulls","branches","forks","envVars",{"_149":40,"_151":40},"connections",{"_149":40,"_150":40},"count","unfilledCount","emptyCount",{"_18":135,"_20":136,"_113":137,"_115":-5,"_116":69,"_117":67,"_119":103,"_22":162,"_66":40,"_121":139,"_123":140,"_125":26,"_126":-5,"_156":163,"_86":164},{"_18":128,"_20":129,"_113":130,"_115":-5,"_116":69,"_117":131,"_119":103,"_22":159,"_66":40,"_121":96,"_123":133,"_125":26,"_126":-5,"_156":160,"_86":161},{"_18":111,"_20":112,"_113":114,"_115":-5,"_116":69,"_117":118,"_119":103,"_22":155,"_66":40,"_121":122,"_123":124,"_125":26,"_126":-5,"_156":157,"_86":158},["D",1783458171637],"children",[],[112],["D",1783458172165],[],[129],["D",1783458172563],[],[136],["D",1783458171408],["D",1789524079207],{"_16":17,"_84":79},{"_16":17,"_78":79,"_80":79,"_33":34,"_81":82,"_83":26},{"_66":67,"_20":68,"_18":69,"_70":19,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":21,"_77":17},"ctx",{"_59":-5,"_105":203,"_204":205,"_206":207,"_208":26,"_209":26,"_210":26,"_211":103,"_212":-5,"_213":-7,"_214":-7,"_215":40,"_216":26,"_217":26,"_218":-5,"_219":26,"_220":26,"_221":26,"_222":-5},"ENV",{"_174":175,"_176":177,"_178":68,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

🔒 Notes

Delete note?

Notes