\n \n\n\n",[129],"2521f9b4-32b1-4f3e-9b87-41a75cf71d24","app.js","91a7f6f8-7a23-11f1-99a9-1607ee4eb77e",4,["D",1783442861098],"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",1,"forks","envVars",{"_151":40,"_153":40},"connections",{"_151":40,"_152":40},"count","unfilledCount","emptyCount",{"_18":135,"_20":136,"_113":137,"_115":-5,"_116":69,"_117":138,"_118":103,"_22":164,"_66":40,"_121":140,"_123":141,"_125":26,"_126":-5,"_158":165,"_86":166},{"_18":128,"_20":129,"_113":130,"_115":-5,"_116":69,"_117":131,"_118":103,"_22":161,"_66":40,"_121":96,"_123":133,"_125":26,"_126":-5,"_158":162,"_86":163},{"_18":111,"_20":112,"_113":114,"_115":-5,"_116":69,"_117":67,"_118":103,"_22":157,"_66":120,"_121":122,"_123":124,"_125":26,"_126":-5,"_158":159,"_86":160},["D",1783442882856],"children",[],[112],["D",1783442812828],[],[129],["D",1783442861098],[],[136],["D",1783442760541],["D",1789522836959],{"_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":205,"_206":207,"_208":209,"_210":26,"_211":26,"_212":26,"_213":103,"_214":-5,"_215":-7,"_216":-7,"_217":40,"_218":26,"_219":26,"_220":-5,"_221":26,"_222":26,"_223":26,"_224":-5},"ENV",{"_176":177,"_178":179,"_180":68,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","518c05f2c13b243481ef29134a5672756425e459","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