\n \n \n \n",[],[142,182],"1a891ad4-56e7-41ae-a86b-988800c95cf7","favicon.svg","3cd3f4e6-7a3d-11f1-91c1-1607ee4eb77e",5,["D",1783453885718],"\n",[],[142,190],"40804a04-caf4-4f94-b4dd-40ad6e2e3c65","Counter.tsx","3ced40b8-7a3d-11f1-86f6-1607ee4eb77e","14ceb9c7-ae06-4d84-a85d-1884af211a84",6,["D",1783453885881],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n",[],[142,206,198],"components","940860e0-d81c-4558-875c-a7fa84f339bd","App.tsx","3d6c8242-7a3d-11f1-a0c7-1607ee4eb77e",["D",1783453886688],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { FormEvent, useCallback, useEffect, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\ntype Note = {\n id: string;\n body: string;\n updatedAt: string;\n};\n\nfunction pad(value: number) {\n return String(value).padStart(2, \"0\");\n}\n\nfunction formatTimestamp(iso: string) {\n const date = new Date(iso);\n return date.getUTCFullYear() + \"-\" + pad(date.getUTCMonth() + 1) + \"-\" + pad(date.getUTCDate()) + \" \" + pad(date.getUTCHours()) + \":\" + pad(date.getUTCMinutes());\n}\n\nfunction detailsFor(note: Note) {\n const lines = note.body.split(/\\r?\\n/);\n const titleIndex = lines.findIndex((line) => line.trim().length > 0);\n const title = titleIndex === -1 ? \"New Note\" : lines[titleIndex].trim();\n const previewSource = titleIndex === -1 ? \"\" : lines.slice(titleIndex + 1).join(\" \").trim();\n const preview = previewSource.replace(/\\s+/g, \" \");\n return { title, preview };\n}\n\nfunction sortNotes(notes: Note[]) {\n return [...notes].sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());\n}\n\nfunction noteIdFromPath() {\n const match = window.location.pathname.match(/^\\/notes\\/([^/]+)$/);\n return match ? decodeURIComponent(match[1]) : null;\n}\n\nexport function App() {\n const [unlocked, setUnlocked] = useState(false);\n const [passwordInput, setPasswordInput] = useState(\"\");\n const [passwordError, setPasswordError] = useState(\"\");\n const apiPasswordRef = useRef(\"\");\n\n const [notes, setNotes] = useState([]);\n const notesRef = useRef([]);\n const [loading, setLoading] = useState(false);\n const [appError, setAppError] = useState(\"\");\n const [search, setSearch] = useState(\"\");\n const [path, setPath] = useState(window.location.pathname);\n const [editorBody, setEditorBody] = useState(\"\");\n const editorBodyRef = useRef(\"\");\n const textareaRef = useRef(null);\n const [saving, setSaving] = useState(false);\n\n const selectedId = useMemo(() => {\n const match = path.match(/^\\/notes\\/([^/]+)$/);\n return match ? decodeURIComponent(match[1]) : null;\n }, [path]);\n\n const selectedNote = selectedId ? notes.find((note) => note.id === selectedId) ?? null : null;\n\n useEffect(() => {\n notesRef.current = notes;\n }, [notes]);\n\n useEffect(() => {\n editorBodyRef.current = editorBody;\n }, [editorBody]);\n\n useEffect(() => {\n const onPopState = () => setPath(window.location.pathname);\n window.addEventListener(\"popstate\", onPopState);\n return () => window.removeEventListener(\"popstate\", onPopState);\n }, []);\n\n const apiFetch = useCallback(async (url: string, init: RequestInit = {}) => {\n const headers = new Headers(init.headers);\n headers.set(\"x-notes-password\", apiPasswordRef.current);\n if (init.body && !headers.has(\"content-type\")) {\n headers.set(\"content-type\", \"application/json\");\n }\n const response = await fetch(url, { ...init, headers });\n if (!response.ok) {\n throw new Error(\"Request failed\");\n }\n return response.json();\n }, []);\n\n const loadNotes = useCallback(async () => {\n setLoading(true);\n setAppError(\"\");\n try {\n const data = await apiFetch(\"/api/notes\");\n setNotes(sortNotes(data.notes ?? []));\n } catch (_error) {\n setAppError(\"Unable to load notes. Please try again.\");\n } finally {\n setLoading(false);\n }\n }, [apiFetch]);\n\n async function unlock(event: FormEvent) {\n event.preventDefault();\n setPasswordError(\"\");\n if (!passwordInput) {\n setPasswordError(\"Password is required\");\n return;\n }\n try {\n const response = await fetch(\"/api/unlock\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ password: passwordInput }),\n });\n if (!response.ok) {\n setPasswordError(\"Incorrect password\");\n return;\n }\n apiPasswordRef.current = passwordInput;\n setUnlocked(true);\n setPasswordInput(\"\");\n await loadNotes();\n } catch (_error) {\n setPasswordError(\"Unable to unlock notes right now\");\n }\n }\n\n const navigate = useCallback((nextPath: string) => {\n window.history.pushState({}, \"\", nextPath);\n setPath(nextPath);\n }, []);\n\n const saveCurrentNote = useCallback(async () => {\n if (!selectedId) return;\n const current = notesRef.current.find((note) => note.id === selectedId);\n const body = editorBodyRef.current;\n if (!current || current.body === body) return;\n setSaving(true);\n try {\n const data = await apiFetch(\"/api/notes/\" + encodeURIComponent(selectedId), {\n method: \"PUT\",\n body: JSON.stringify({ body }),\n });\n setNotes((existing) => sortNotes(existing.map((note) => note.id === selectedId ? data.note : note)));\n setAppError(\"\");\n } catch (_error) {\n setAppError(\"Unable to autosave this note. Please stay on this page and try again.\");\n throw _error;\n } finally {\n setSaving(false);\n }\n }, [apiFetch, selectedId]);\n\n useEffect(() => {\n const saveBeforeHistoryNavigation = () => {\n saveCurrentNote().catch(() => undefined);\n };\n window.addEventListener(\"popstate\", saveBeforeHistoryNavigation);\n return () => window.removeEventListener(\"popstate\", saveBeforeHistoryNavigation);\n }, [saveCurrentNote]);\n\n async function goToList() {\n try {\n await saveCurrentNote();\n navigate(\"/\");\n } catch (_error) {\n // Keep the user on the editor if the guaranteed navigation save failed.\n }\n }\n\n async function openNote(id: string) {\n try {\n await saveCurrentNote();\n navigate(\"/notes/\" + encodeURIComponent(id));\n } catch (_error) {\n // Keep current editor visible if autosave failed.\n }\n }\n\n async function createNote() {\n try {\n await saveCurrentNote();\n const data = await apiFetch(\"/api/notes\", { method: \"POST\" });\n setNotes((existing) => sortNotes([data.note, ...existing]));\n navigate(\"/notes/\" + encodeURIComponent(data.note.id));\n setTimeout(() => textareaRef.current?.focus(), 0);\n } catch (_error) {\n setAppError(\"Unable to create a new note. Please try again.\");\n }\n }\n\n async function deleteNote(id: string) {\n const confirmed = window.confirm(\"Permanently delete this note? This action cannot be undone.\");\n if (!confirmed) return;\n try {\n await apiFetch(\"/api/notes/\" + encodeURIComponent(id), { method: \"DELETE\" });\n setNotes((existing) => existing.filter((note) => note.id !== id));\n if (selectedId === id) {\n navigate(\"/\");\n }\n } catch (_error) {\n setAppError(\"Unable to delete the note. Please try again.\");\n }\n }\n\n useEffect(() => {\n if (!unlocked || !selectedNote) return;\n setEditorBody(selectedNote.body);\n setTimeout(() => textareaRef.current?.focus(), 0);\n }, [unlocked, selectedNote?.id]);\n\n useEffect(() => {\n if (!unlocked || !selectedId || !selectedNote || selectedNote.body === editorBody) return;\n const timer = window.setTimeout(() => {\n saveCurrentNote().catch(() => undefined);\n }, 700);\n return () => window.clearTimeout(timer);\n }, [editorBody, saveCurrentNote, selectedId, selectedNote, unlocked]);\n\n useEffect(() => {\n const onBeforeUnload = () => {\n const id = noteIdFromPath();\n if (!id || !apiPasswordRef.current) return;\n const current = notesRef.current.find((note) => note.id === id);\n const body = editorBodyRef.current;\n if (!current || current.body === body) return;\n fetch(\"/api/notes/\" + encodeURIComponent(id), {\n method: \"PUT\",\n keepalive: true,\n headers: {\n \"content-type\": \"application/json\",\n \"x-notes-password\": apiPasswordRef.current,\n },\n body: JSON.stringify({ body }),\n }).catch(() => undefined);\n };\n window.addEventListener(\"beforeunload\", onBeforeUnload);\n return () => window.removeEventListener(\"beforeunload\", onBeforeUnload);\n }, []);\n\n const filteredNotes = useMemo(() => {\n const normalized = search.trim().toLowerCase();\n const sorted = sortNotes(notes);\n if (!normalized) return sorted;\n return sorted.filter((note) => {\n const { title } = detailsFor(note);\n return title.toLowerCase().includes(normalized) || note.body.toLowerCase().includes(normalized);\n });\n }, [notes, search]);\n\n if (!unlocked) {\n return (\n

🔒

Private Notes

Enter the password to unlock this tab.

\n \n

\n );\n }\n\n const sourceLink = (\n View source\n );\n\n if (selectedId) {\n if (loading) {\n return

Loading notes…

;\n }\n if (!selectedNote) {\n return (\n \n

Note not found

This note may have been permanently deleted.

\n \n

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

\n \n

\n {saving ? \"Autosaving…\" : \"Autosaved\"}\n \n

\n {appError &&

{appError}

}\n

\n Last edited {formatTimestamp(selectedNote.updatedAt)} UTC\n

\n setEditorBody(event.currentTarget.value)}\n placeholder=\"Start typing your note…\"\n className=\"block h-[65vh] w-full resize-none border-0 p-5 text-base leading-7 outline-none focus:ring-0\"\n />\n

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

Notes

A single private space for plain text notes.

\n \n

\n Search notes\n setSearch(event.currentTarget.value)}\n placeholder=\"Search notes\"\n className=\"w-full rounded-xl border border-slate-300 bg-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n {appError &&

{appError}

}\n {loading ? (\n

Loading notes…

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

📝

{search.trim() ? \"No matching notes\" : \"No notes yet\"}

{search.trim() ? \"Try a different search.\" : \"Create your first note to get started.\"}

\n ) : (\n

\n \n

\n )}\n \n );\n}\n\nfunction Shell({ children, sourceLink }: { children: unknown; sourceLink: unknown }) {\n return (\n

\n {children}\n \n

\n );\n}\n",[],[142,206,208],"67bb0f52-b326-44fd-b1c7-988d84296817",["D",1783453885881],[159,160],[142,206],["D",1783453885112],[158,161,162,163],[142],["D",1783453884685],["D",1789524636084],{"_11":12,"_89":84},{"_11":12,"_83":84,"_85":84,"_45":46,"_86":87,"_88":38},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_78":-5,"_79":-5,"_80":-5,"_81":14,"_82":12},"ctx",{"_71":-5,"_111":259,"_260":261,"_262":263,"_264":38,"_265":38,"_266":38,"_267":109,"_268":-5,"_269":-7,"_270":-7,"_271":52,"_272":38,"_273":38,"_274":-5,"_275":38,"_276":38,"_277":38,"_278":-5},"ENV",{"_230":231,"_232":233,"_234":26,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

Branches1

Branches
1