[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_109":110,"_111":112},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","callmepotluck","name","habits-claude-aug19u","path","frontend/App.tsx","project",{"_22":48,"_11":12,"_35":49,"_50":-5,"_51":44,"_52":53,"_54":53,"_55":56,"_57":-5,"_58":59,"_60":61,"_62":34,"_63":-5,"_64":-5,"_65":38,"_66":67,"_68":69,"_70":71,"_72":73,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/callmepotluck/habits-claude-aug19u/code/frontend/App.tsx","extension","id","1bcac4fb-15b1-4a1e-bb75-f0a1ae0ebdd6","App.tsx","fileId","edca1010-9bcf-11f1-8cab-1607ee4eb77e","parentId","c0cf2da9-2ece-4d55-ad2b-269089f943ee","branchId","f85d9548-38c1-4389-be75-11ee53f90618","branchVersion",14,"latest",true,"createdAt",["D",1787145277510],"version",0,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useCallback, useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, type Entry, type Habit, key } from \"./api.ts\";\nimport { addDays, currentStreak, longestStreak, prettyDay, todayStr } from \"../shared/dates.ts\";\nimport { AddHabitForm } from \"./components/AddHabitForm.tsx\";\nimport { HabitCard } from \"./components/HabitCard.tsx\";\nimport { CompletionChart } from \"./components/CompletionChart.tsx\";\nimport { StreakChart } from \"./components/StreakChart.tsx\";\n\nexport function App() {\n const today = todayStr();\n const [habits, setHabits] = useState([]);\n const [done, setDone] = useState>(new Set());\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n const load = useCallback(async () => {\n try {\n const since = addDays(today, -400);\n const data = await api.state(since);\n setHabits(data.habits);\n setDone(new Set(data.entries.map((e: Entry) => key(e.habitId, e.day))));\n setError(null);\n } catch (e: any) {\n setError(e?.message ?? \"Could not load your habits.\");\n } finally {\n setLoading(false);\n }\n }, [today]);\n\n useEffect(() => {\n load();\n }, [load]);\n\n const toggle = useCallback(async (habitId: number, day: string) => {\n const k = key(habitId, day);\n setDone((prev) => {\n const next = new Set(prev);\n next.has(k) ? next.delete(k) : next.add(k);\n return next;\n });\n try {\n await api.toggle(habitId, day);\n } catch (e: any) {\n setError(e?.message ?? \"That change didn't save.\");\n load();\n }\n }, [load]);\n\n const addHabit = useCallback(async (h: { name: string; emoji: string; color: string }) => {\n const created = await api.createHabit({ ...h, createdAt: today });\n setHabits((prev) => [...prev, created]);\n }, [today]);\n\n const rename = useCallback(async (id: number, name: string) => {\n setHabits((prev) => prev.map((h) => (h.id === id ? { ...h, name } : h)));\n try {\n await api.renameHabit(id, name);\n } catch {\n load();\n }\n }, [load]);\n\n const remove = useCallback(async (id: number) => {\n setHabits((prev) => prev.filter((h) => h.id !== id));\n try {\n await api.deleteHabit(id);\n } catch {\n load();\n }\n }, [load]);\n\n const perHabit = useMemo(() =>\n habits.map((habit) => {\n const days = new Set();\n const prefix = `${habit.id}|`;\n for (const k of done) if (k.startsWith(prefix)) days.add(k.slice(prefix.length));\n return {\n habit,\n days,\n current: currentStreak(days, today),\n best: longestStreak(days),\n };\n }), [habits, done, today]);\n\n const doneToday = perHabit.filter((p) => p.days.has(today)).length;\n const bestStreak = perHabit.reduce((m, p) => Math.max(m, p.current), 0);\n\n return (\n

🌱 Habit Tracker

{prettyDay(today)} · your private, single-user dashboard

\n\n {error && (\n

\n {error}\n

\n )}\n\n

\n \n \n \n

\n\n

\n \n\n {loading\n ?

Loading…

\n : habits.length === 0\n ? (\n

\n No habits yet. Add your first one above and start a streak today.\n

\n )\n : (\n <>\n \n ({ habit, current, best }))} />\n\n

\n {perHabit.map(({ habit, days }) => (\n \n ))}\n

\n \n )}\n

\n\n \n

\n );\n}\n\nfunction Stat({ label, value }: { label: string; value: string }) {\n return (\n

{value}

{label}

\n );\n}\n","deleted",false,"label",[47,24],"frontend","096cd013-9eb0-45e4-b62a-d386d83529ea",["D",1787144617655],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Single-user habit tracker: form, heatmaps, streak charts","imageUrl","userId","64a25dff-97c9-4036-a643-e4dc22e6015c","pinnedFileId","6484bf5e-9bce-11f1-a36d-1607ee4eb77e","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019ea8b5-62e4-71f9-94d1-1a9ae3f0ebe7","tursoName","096cd0139eb045e4b62ad386d83529ea","tursoHostname","096cd0139eb045e4b62ad386d83529ea-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789485645684],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_108":104},"org",{"_9":10,"_101":102,"_103":104,"_58":59,"_105":106,"_107":44},"branch",{"_37":91,"_11":92,"_22":30,"_93":48,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":12,"_100":10},"isOwned",16,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Potluck Mittal","avatar","https://lh3.googleusercontent.com/a/ACg8ocJrC5mDbeIgKgav6s7-_mva1XAfWU7NJhGHTfS09GOohU9PsH8=s96-c","tier","free","canRestrictVals","profileImageUrl","ctx",{"_84":-5,"_142":143,"_144":145,"_146":147,"_148":44,"_149":44,"_150":44,"_151":34,"_152":-5,"_153":-7,"_154":-7,"_155":38,"_156":44,"_157":44,"_158":-5,"_159":44,"_160":44,"_161":44,"_162":-5},"ENV",{"_113":114,"_115":116,"_117":92,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137,"_138":139,"_140":141},"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","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]