\n \n \n\n",[126],"8637517b-401d-45b5-8f4e-465b178826ea","client.tsx","ecf23e6a-7a46-11f1-8199-1607ee4eb77e",["D",1783458046629],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\ninterface Note {\n id: string;\n body: string;\n updated_at: number;\n}\n\n// ---- helpers ----\nfunction noteTitle(body: string): string {\n const lines = body.split(\"\\n\");\n for (const line of lines) {\n if (line.trim().length > 0) return line.trim();\n }\n return \"New Note\";\n}\n\nfunction notePreview(body: string): string {\n const lines = body.split(\"\\n\");\n let titleIdx = -1;\n for (let i = 0; i < lines.length; i++) {\n if (lines[i].trim().length > 0) {\n titleIdx = i;\n break;\n }\n }\n if (titleIdx === -1) return \"\";\n const rest = lines\n .slice(titleIdx + 1)\n .map((l) => l.trim())\n .filter((l) => l.length > 0)\n .join(\" \");\n if (rest.length > 80) return rest.slice(0, 80).trimEnd() + \"…\";\n return rest;\n}\n\nfunction formatTimestamp(ms: number): string {\n const d = new Date(ms);\n const pad = (n: number) => String(n).padStart(2, \"0\");\n return `${d.getUTCFullYear()}-${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())} ${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}`;\n}\n\n// ---- API ----\nfunction api(password: string) {\n const headers = { \"x-password\": password, \"content-type\": \"application/json\" };\n return {\n async listNotes(): Promise {\n const res = await fetch(\"/api/notes\", { headers });\n if (!res.ok) throw new Error(\"Failed to load notes\");\n const data = await res.json();\n return data.notes;\n },\n async createNote(): Promise {\n const res = await fetch(\"/api/notes\", { method: \"POST\", headers });\n if (!res.ok) throw new Error(\"Failed to create note\");\n return (await res.json()).note;\n },\n async getNote(id: string): Promise {\n const res = await fetch(`/api/notes/${id}`, { headers });\n if (res.status === 404) return null;\n if (!res.ok) throw new Error(\"Failed to load note\");\n return (await res.json()).note;\n },\n async saveNote(id: string, body: string): Promise {\n const res = await fetch(`/api/notes/${id}`, {\n method: \"PUT\",\n headers,\n body: JSON.stringify({ body }),\n });\n if (!res.ok) throw new Error(\"Failed to save note\");\n return (await res.json()).note;\n },\n async deleteNote(id: string): Promise {\n const res = await fetch(`/api/notes/${id}`, { method: \"DELETE\", headers });\n if (!res.ok) throw new Error(\"Failed to delete note\");\n },\n };\n}\n\n// ---- Password Gate ----\nfunction PasswordGate({ onUnlock }: { onUnlock: (password: string) => void }) {\n const [value, setValue] = useState(\"\");\n const [error, setError] = useState(\"\");\n const [busy, setBusy] = useState(false);\n\n const submit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (value.length === 0) {\n setError(\"Password is required\");\n return;\n }\n setBusy(true);\n setError(\"\");\n try {\n const res = await fetch(\"/api/unlock\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ password: value }),\n });\n if (res.ok) {\n onUnlock(value);\n } else {\n const data = await res.json().catch(() => ({}));\n setError(data.error || \"Incorrect password\");\n }\n } catch {\n setError(\"Something went wrong. Please try again.\");\n } finally {\n setBusy(false);\n }\n };\n\n return (\n

\n \n

🔒

Notes

\n Enter the password to unlock your notes.\n

\n \n Password\n \n setValue(e.target.value)}\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"Password\"\n />\n {error && (\n

\n {error}\n

\n )}\n \n Unlock\n \n \n

\n );\n}\n\n// ---- Notes List ----\nfunction NotesList({\n password,\n onOpenNote,\n}: {\n password: string;\n onOpenNote: (id: string) => void;\n}) {\n const [notes, setNotes] = useState(null);\n const [query, setQuery] = useState(\"\");\n const client = api(password);\n\n const load = useCallback(async () => {\n const list = await api(password).listNotes();\n setNotes(list);\n }, [password]);\n\n useEffect(() => {\n load();\n }, [load]);\n\n const handleNew = async () => {\n const note = await client.createNote();\n onOpenNote(note.id);\n };\n\n const handleDelete = async (e: React.MouseEvent, note: Note) => {\n e.stopPropagation();\n const ok = window.confirm(\n `Delete \"${noteTitle(note.body)}\"? This will permanently delete the note. This cannot be undone.`,\n );\n if (!ok) return;\n await client.deleteNote(note.id);\n setNotes((prev) => (prev ? prev.filter((n) => n.id !== note.id) : prev));\n };\n\n const q = query.toLowerCase();\n const filtered = (notes || []).filter((n) => {\n if (q === \"\") return true;\n return (\n noteTitle(n.body).toLowerCase().includes(q) ||\n n.body.toLowerCase().includes(q)\n );\n });\n\n return (\n

📝 Notes

\n \n New Note\n \n

\n setQuery(e.target.value)}\n placeholder=\"Search notes…\"\n aria-label=\"Search notes\"\n className=\"w-full border border-gray-300 rounded-lg px-3 py-2 mb-4 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n {notes === null ? (\n

Loading…

\n ) : filtered.length === 0 ? (\n

\n {notes.length === 0\n ? \"No notes yet. Click \\u201CNew Note\\u201D to create one.\"\n : \"No notes match your search.\"}\n

\n ) : (\n

onOpenNote(note.id)}\n className=\"bg-white rounded-xl shadow px-4 py-3 cursor-pointer hover:bg-blue-50 flex items-start gap-3\"\n >\n

{noteTitle(note.body)}

\n {notePreview(note.body) || \"\\u00A0\"}\n

\n {formatTimestamp(note.updated_at)}\n

\n handleDelete(e, note)}\n title=\"Delete note\"\n aria-label=\"Delete note\"\n className=\"text-red-500 hover:text-red-700 hover:bg-red-50 rounded-lg px-2 py-1 text-sm shrink-0\"\n >\n Delete\n \n \n ))}\n

\n )}\n \n

\n );\n}\n\n// ---- Editor ----\nfunction Editor({\n password,\n noteId,\n onBack,\n registerSaver,\n}: {\n password: string;\n noteId: string;\n onBack: () => void;\n registerSaver: (fn: (() => Promise) | null) => void;\n}) {\n const [note, setNote] = useState(undefined);\n const bodyRef = useRef(\"\");\n const dirtyRef = useRef(false);\n const client = api(password);\n\n useEffect(() => {\n let cancelled = false;\n api(password)\n .getNote(noteId)\n .then((n) => {\n if (cancelled) return;\n setNote(n);\n if (n) bodyRef.current = n.body;\n });\n return () => {\n cancelled = true;\n };\n }, [noteId, password]);\n\n const save = useCallback(async () => {\n if (!dirtyRef.current) return;\n dirtyRef.current = false;\n await api(password).saveNote(noteId, bodyRef.current);\n }, [noteId, password]);\n\n useEffect(() => {\n registerSaver(save);\n return () => registerSaver(null);\n }, [save, registerSaver]);\n\n const handleBack = async () => {\n await save();\n onBack();\n };\n\n const handleDelete = async () => {\n const ok = window.confirm(\n \"Delete this note? This will permanently delete the note. This cannot be undone.\",\n );\n if (!ok) return;\n dirtyRef.current = false;\n registerSaver(null);\n await client.deleteNote(noteId);\n onBack();\n };\n\n if (note === undefined) {\n return

Loading…

;\n }\n\n if (note === null) {\n return (\n

Note not found. It may have been deleted.

\n \n Back to notes\n \n

\n );\n }\n\n return (\n

\n \n ← Back\n \n \n Delete\n \n

\n {\n bodyRef.current = e.target.value;\n dirtyRef.current = true;\n }}\n placeholder=\"Start typing your note…\"\n aria-label=\"Note body\"\n className=\"flex-1 w-full bg-white rounded-xl shadow p-4 resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-sm\"\n style={{ minHeight: \"60vh\", whiteSpace: \"pre-wrap\" }}\n />\n

\n Changes save automatically when you leave this note.\n

\n );\n}\n\n// ---- App with routing ----\nfunction currentRoute(): { view: \"list\" } | { view: \"note\"; id: string } {\n const m = window.location.pathname.match(/^\\/note\\/([^/]+)$/);\n if (m) return { view: \"note\", id: decodeURIComponent(m[1]) };\n return { view: \"list\" };\n}\n\nfunction App() {\n const [password, setPassword] = useState(null);\n const [route, setRoute] = useState(currentRoute());\n const saverRef = useRef<(() => Promise) | null>(null);\n\n const registerSaver = useCallback((fn: (() => Promise) | null) => {\n saverRef.current = fn;\n }, []);\n\n useEffect(() => {\n const onPop = async () => {\n if (saverRef.current) {\n try {\n await saverRef.current();\n } catch {}\n }\n setRoute(currentRoute());\n };\n window.addEventListener(\"popstate\", onPop);\n return () => window.removeEventListener(\"popstate\", onPop);\n }, []);\n\n const navigate = useCallback(async (path: string) => {\n if (saverRef.current) {\n try {\n await saverRef.current();\n } catch {}\n }\n window.history.pushState({}, \"\", path);\n setRoute(currentRoute());\n }, []);\n\n if (password === null) {\n return ;\n }\n\n if (route.view === \"note\") {\n return (\n navigate(\"/\")}\n registerSaver={registerSaver}\n />\n );\n }\n\n return (\n navigate(`/note/${id}`)}\n />\n );\n}\n\ncreateRoot(document.getElementById(\"root\")!).render();\n",[133],"pulls","branches","forks","envVars",{"_146":40,"_148":40},"connections",{"_146":40,"_147":40},"count","unfilledCount","emptyCount",{"_18":132,"_20":133,"_110":134,"_112":-5,"_113":66,"_114":64,"_116":100,"_22":159,"_63":40,"_118":136,"_120":137,"_122":26,"_123":-5,"_153":160,"_83":161},{"_18":125,"_20":126,"_110":127,"_112":-5,"_113":66,"_114":128,"_116":100,"_22":156,"_63":40,"_118":93,"_120":130,"_122":26,"_123":-5,"_153":157,"_83":158},{"_18":108,"_20":109,"_110":111,"_112":-5,"_113":66,"_114":115,"_116":100,"_22":152,"_63":40,"_118":119,"_120":121,"_122":26,"_123":-5,"_153":154,"_83":155},["D",1783458046178],"children",[],[109],["D",1783458046329],[],[126],["D",1783458046629],[],[133],["D",1783458046030],{"_16":17,"_81":76},{"_16":17,"_75":76,"_77":76,"_33":34,"_78":79,"_80":26},{"_63":64,"_20":65,"_18":66,"_67":19,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":21,"_74":17},"ctx",{"_56":-5,"_102":199,"_200":201,"_202":203,"_204":26,"_205":26,"_206":26,"_207":100,"_208":-5,"_209":-7,"_210":-7,"_211":40,"_212":26,"_213":26,"_214":-5,"_215":26,"_216":26,"_217":26,"_218":-5},"ENV",{"_170":171,"_172":173,"_174":65,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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"]