\n \n \n \n",[],[133,174],"50df3931-c567-4ec0-9982-6f025acef24e","favicon.svg","45df8d50-7a4e-11f1-84d5-1607ee4eb77e",5,["D",1783461202341],"\n",[],[133,182],"14857877-b355-476f-95a5-c7f80eefbf04","Counter.tsx","45f148a6-7a4e-11f1-b703-1607ee4eb77e","8c390d3e-3ef5-4626-8efa-d31954ede249",6,["D",1783461202456],"/** @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",[],[133,198,190],"components","d8f11400-235c-4d2d-a701-a4ce24cb35b8","App.tsx","460e42b2-7a4e-11f1-87e3-1607ee4eb77e",["D",1783461202647],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState, useCallback, useRef } from \"https://esm.sh/react@18.2.0\";\n\n// ────────────────────────────────────────────────────────────────────────────\n// Types & constants\n// ────────────────────────────────────────────────────────────────────────────\n\ninterface Note {\n id: string;\n body: string;\n updatedAt: number; // epoch ms (UTC)\n}\n\nconst PASSWORD = \"my-notes-are-mine\";\nconst STORAGE_KEY = \"notes-app-notes-v1\";\nconst PLACEHOLDER_TITLE = \"New Note\";\n\n// ────────────────────────────────────────────────────────────────────────────\n// Helpers\n// ────────────────────────────────────────────────────────────────────────────\n\nfunction uid(): string {\n return Date.now().toString(36) + Math.random().toString(36).slice(2, 8);\n}\n\nfunction pad2(n: number): string {\n return n < 10 ? \"0\" + n : String(n);\n}\n\nfunction formatTimestamp(epochMs: number): string {\n const d = new Date(epochMs);\n const y = d.getUTCFullYear();\n const mo = pad2(d.getUTCMonth() + 1);\n const da = pad2(d.getUTCDate());\n const h = pad2(d.getUTCHours());\n const mi = pad2(d.getUTCMinutes());\n return `${y}-${mo}-${da} ${h}:${mi}`;\n}\n\nfunction noteTitle(body: string): string {\n const lines = body.split(\"\\n\");\n for (const line of lines) {\n const trimmed = line.trim();\n if (trimmed) return trimmed;\n }\n return PLACEHOLDER_TITLE;\n}\n\nfunction notePreview(body: string): string {\n const lines = body.split(\"\\n\");\n let foundTitle = false;\n for (const line of lines) {\n const trimmed = line.trim();\n if (trimmed) {\n if (!foundTitle) {\n foundTitle = true;\n continue;\n }\n // first non-empty line after the title line\n const single = trimmed.replace(/\\s+/g, \" \");\n return single.length > 80 ? single.slice(0, 80) + \"…\" : single;\n }\n }\n return \"\";\n}\n\nfunction loadNotes(): Note[] {\n try {\n const raw = localStorage.getItem(STORAGE_KEY);\n if (!raw) return [];\n const parsed = JSON.parse(raw);\n if (!Array.isArray(parsed)) return [];\n return parsed.filter((n: any) => n && typeof n.id === \"string\" && typeof n.body === \"string\" && typeof n.updatedAt === \"number\");\n } catch {\n return [];\n }\n}\n\nfunction saveNotes(notes: Note[]): void {\n localStorage.setItem(STORAGE_KEY, JSON.stringify(notes));\n}\n\n// Simple hash router\nfunction getHash(): string {\n return window.location.hash.replace(/^#/, \"\") || \"/\";\n}\n\nfunction navigate(hash: string): void {\n window.location.hash = hash;\n}\n\n// ────────────────────────────────────────────────────────────────────────────\n// Password Gate\n// ────────────────────────────────────────────────────────────────────────────\n\nfunction PasswordGate({ onUnlock }: { onUnlock: () => void }) {\n const [value, setValue] = useState(\"\");\n const [error, setError] = useState(\"\");\n\n const submit = useCallback((e?: any) => {\n if (e) e.preventDefault();\n if (!value.trim()) {\n setError(\"Password is required\");\n return;\n }\n if (value !== PASSWORD) {\n setError(\"Incorrect password\");\n return;\n }\n setError(\"\");\n onUnlock();\n }, [value]);\n\n return (\n

\n );\n}\n\n// ────────────────────────────────────────────────────────────────────────────\n// Notes List View\n// ────────────────────────────────────────────────────────────────────────────\n\nfunction NotesList({\n notes,\n search,\n setSearch,\n onOpen,\n onNew,\n onDelete,\n}: {\n notes: Note[];\n search: string;\n setSearch: (s: string) => void;\n onOpen: (id: string) => void;\n onNew: () => void;\n onDelete: (id: string) => void;\n}) {\n const q = search.trim().toLowerCase();\n const filtered = q\n ? notes.filter(\n (n) =>\n noteTitle(n.body).toLowerCase().includes(q) ||\n n.body.toLowerCase().includes(q)\n )\n : notes;\n const sorted = [...filtered].sort((a, b) => b.updatedAt - a.updatedAt);\n\n return (\n

My Notes

\n \n + New Note\n \n

\n setSearch(e.target.value)}\n />\n {sorted.length === 0 ? (\n

\n {q ? \"No matching notes.\" : \"No notes yet. Create one to get started.\"}\n

\n ) : (\n

onOpen(n.id)}\n >\n

{noteTitle(n.body)}

\n {notePreview(n.body) && (\n

{notePreview(n.body)}

\n )}\n

{formatTimestamp(n.updatedAt)}

\n {\n e.stopPropagation();\n onDelete(n.id);\n }}\n >\n Delete\n \n \n ))}\n

\n )}\n

\n );\n}\n\n// ────────────────────────────────────────────────────────────────────────────\n// Editor View\n// ────────────────────────────────────────────────────────────────────────────\n\nfunction NoteEditor({\n note,\n onChange,\n onBack,\n onDelete,\n}: {\n note: Note;\n onChange: (body: string) => void;\n onBack: () => void;\n onDelete: (id: string) => void;\n}) {\n const textareaRef = useRef(null);\n\n useEffect(() => {\n if (textareaRef.current) {\n textareaRef.current.focus();\n }\n }, []);\n\n return (\n

\n \n ← Back\n \n onDelete(note.id)}\n class=\"text-red-500 hover:text-red-700 font-medium\"\n >\n Delete\n \n

\n onChange(e.target.value)}\n />\n

\n Last edited: {formatTimestamp(note.updatedAt)}\n

\n );\n}\n\n// ────────────────────────────────────────────────────────────────────────────\n// Confirm Dialog\n// ────────────────────────────────────────────────────────────────────────────\n\nfunction ConfirmDialog({\n message,\n onCancel,\n onConfirm,\n}: {\n message: string;\n onCancel: () => void;\n onConfirm: () => void;\n}) {\n return (\n

{message}

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

\n );\n}\n\n// ────────────────────────────────────────────────────────────────────────────\n// Main App\n// ────────────────────────────────────────────────────────────────────────────\n\nexport function App() {\n const [unlocked, setUnlockedState] = useState(false);\n const [notes, setNotes] = useState([]);\n const [hash, setHash] = useState(getHash());\n const [search, setSearch] = useState(\"\");\n const [draftBody, setDraftBody] = useState(null);\n const [confirmDeleteId, setConfirmDeleteId] = useState(null);\n\n // Load notes when unlocked\n useEffect(() => {\n if (unlocked) setNotes(loadNotes());\n }, [unlocked]);\n\n // Listen to hash changes\n useEffect(() => {\n const onHash = () => {\n setHash(getHash());\n setDraftBody(null);\n };\n window.addEventListener(\"hashchange\", onHash);\n return () => window.removeEventListener(\"hashchange\", onHash);\n }, []);\n\n // Parse route: \"/note/:id\" or \"/\"\n const m = hash.match(/^\\/note\\/(.+)$/);\n const editingId = m ? m[1] : null;\n const editingNote = editingId ? notes.find((n) => n.id === editingId) || null : null;\n\n // ── Autosave: when leaving a note (navigation away), persist draft ─────────\n // We track the currently-open note id. When editingId changes or component\n // unmounts, we flush the draft.\n const flushRef = useRef<(() => void) | null>(null);\n\n const flushDraft = useCallback(() => {\n flushRef.current && flushRef.current();\n }, []);\n\n // Whenever editingId changes, flush the previous draft before switching.\n const prevEditingId = useRef(null);\n useEffect(() => {\n if (prevEditingId.current !== editingId) {\n flushDraft();\n prevEditingId.current = editingId;\n }\n }, [editingId, flushDraft]);\n\n // Keep a ref to latest notes for synchronous save on unload.\n const notesRef = useRef(notes);\n useEffect(() => {\n notesRef.current = notes;\n }, [notes]);\n\n // Set up the flush function for the current note whenever draftBody changes.\n useEffect(() => {\n if (editingId && draftBody !== null) {\n flushRef.current = () => {\n const current = notesRef.current;\n const idx = current.findIndex((n) => n.id === editingId);\n if (idx === -1) return;\n const existing = current[idx];\n if (existing.body === draftBody) return;\n const updated: Note = { ...existing, body: draftBody, updatedAt: Date.now() };\n const next = [...current];\n next[idx] = updated;\n saveNotes(next);\n notesRef.current = next;\n setNotes(next);\n };\n } else {\n flushRef.current = null;\n }\n }, [editingId, draftBody]);\n\n // Flush on unmount / page unload\n useEffect(() => {\n const onBeforeUnload = () => flushDraft();\n window.addEventListener(\"beforeunload\", onBeforeUnload);\n return () => {\n flushDraft();\n window.removeEventListener(\"beforeunload\", onBeforeUnload);\n };\n }, [flushDraft]);\n\n // ── Actions ────────────────────────────────────────────────────────────────\n const doNew = useCallback(() => {\n const note: Note = { id: uid(), body: \"\", updatedAt: Date.now() };\n setNotes((prev) => {\n const next = [note, ...prev];\n saveNotes(next);\n return next;\n });\n setDraftBody(\"\");\n navigate(`/note/${note.id}`);\n }, []);\n\n const doOpen = useCallback((id: string) => {\n setDraftBody(null);\n navigate(`/note/${id}`);\n }, []);\n\n const doBack = useCallback(() => {\n navigate(\"/\");\n }, []);\n\n const requestDelete = useCallback((id: string) => {\n setConfirmDeleteId(id);\n }, []);\n\n const confirmDelete = useCallback(() => {\n const id = confirmDeleteId;\n setConfirmDeleteId(null);\n if (!id) return;\n // flush any pending draft for this note (discard)\n setNotes((prev) => {\n const next = prev.filter((n) => n.id !== id);\n saveNotes(next);\n return next;\n });\n if (editingId === id) {\n navigate(\"/\");\n }\n }, [confirmDeleteId, editingId]);\n\n // ── Render ─────────────────────────────────────────────────────────────────\n if (!unlocked) {\n return setUnlockedState(true)} />;\n }\n\n return (\n

\n {editingId && editingNote ? (\n setDraftBody(body)}\n onBack={doBack}\n onDelete={requestDelete}\n />\n ) : (\n \n )}\n {confirmDeleteId && (\n setConfirmDeleteId(null)}\n onConfirm={confirmDelete}\n />\n )}\n

\n );\n}\n",[],[133,198,200],"65db8150-3e06-48c4-9cb2-3d5786244015",["D",1783461202456],[151,152],[133,198],["D",1783461201496],[150,153,154,155],[133],["D",1783461201240],{"_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":250,"_251":252,"_253":254,"_255":26,"_256":26,"_257":26,"_258":100,"_259":-5,"_260":-7,"_261":-7,"_262":40,"_263":26,"_264":26,"_265":-5,"_266":26,"_267":26,"_268":26,"_269":-5},"ENV",{"_221":222,"_223":224,"_225":65,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249},"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"]

🔒 My Notes

My Notes