\n \n \n \n\n","label",[173,66],"frontend","pulls","branches",1,"forks","envVars",{"_182":26,"_184":26},"connections",{"_182":26,"_183":26},"count","unfilledCount","emptyCount",{"_34":273,"_13":173,"_64":164,"_44":-5,"_36":37,"_165":274,"_166":158,"_38":275,"_40":26,"_67":270,"_169":-5,"_68":24,"_171":-5,"_204":276,"_17":277},{"_34":268,"_13":243,"_64":237,"_44":164,"_36":37,"_165":201,"_166":158,"_38":269,"_40":26,"_67":270,"_169":-5,"_68":24,"_171":-5,"_204":271,"_17":272},{"_34":260,"_13":261,"_64":262,"_44":237,"_36":37,"_165":263,"_166":158,"_38":264,"_40":168,"_67":219,"_169":265,"_68":24,"_171":-5,"_204":266,"_17":267},{"_34":252,"_13":253,"_64":254,"_44":237,"_36":37,"_165":255,"_166":158,"_38":256,"_40":176,"_67":219,"_169":257,"_68":24,"_171":-5,"_204":258,"_17":259},{"_34":244,"_13":245,"_64":246,"_44":237,"_36":37,"_165":247,"_166":158,"_38":248,"_40":176,"_67":219,"_169":249,"_68":24,"_171":-5,"_204":250,"_17":251},{"_34":234,"_13":235,"_64":236,"_44":237,"_36":37,"_165":238,"_166":158,"_38":239,"_40":26,"_67":219,"_169":240,"_68":24,"_171":-5,"_204":241,"_17":242},{"_34":226,"_13":227,"_64":228,"_44":164,"_36":37,"_165":229,"_166":158,"_38":230,"_40":26,"_67":21,"_169":231,"_68":24,"_171":-5,"_204":232,"_17":233},{"_34":163,"_13":66,"_64":65,"_44":164,"_36":37,"_165":83,"_166":158,"_38":223,"_40":168,"_67":21,"_169":170,"_68":24,"_171":-5,"_204":224,"_17":225},{"_34":214,"_13":215,"_64":216,"_44":164,"_36":37,"_165":217,"_166":158,"_38":218,"_40":26,"_67":219,"_169":220,"_68":24,"_171":-5,"_204":221,"_17":222},{"_34":207,"_13":208,"_64":209,"_44":-5,"_36":37,"_165":126,"_166":158,"_38":210,"_40":168,"_67":21,"_169":211,"_68":24,"_171":-5,"_204":212,"_17":213},{"_34":196,"_13":197,"_64":198,"_44":-5,"_36":37,"_165":199,"_166":158,"_38":200,"_40":201,"_67":202,"_169":203,"_68":24,"_171":-5,"_204":205,"_17":206},"9bd88df2-566c-11f1-b80d-ee650bb23af1","main.ts","0bf95956-566b-11f1-b6c2-ee650bb23af1",23,["D",1779515989617],4,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob\";\n\nconst VALID_MOODS = [\"happy\", \"sad\", \"angry\", \"tired\"];\nconst BLOB_KEY = \"mood-tracker-entries\";\n\ninterface MoodEntry {\n id: number;\n mood: string;\n text: string;\n timestamp: string;\n}\n\nasync function getEntries(): Promise {\n try {\n return (await blob.getJSON(BLOB_KEY)) as MoodEntry[] || [];\n } catch {\n return [];\n }\n}\n\nasync function saveEntries(entries: MoodEntry[]): Promise {\n await blob.setJSON(BLOB_KEY, entries);\n}\n\nconst app = new Hono();\n\n// Serve frontend\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// API: Get all mood entries\napp.get(\"/api/moods\", async (c) => {\n const entries = await getEntries();\n // Return newest first\n return c.json(entries.slice().reverse());\n});\n\n// API: Submit a new mood entry\napp.post(\"/api/moods\", async (c) => {\n const { mood, text } = await c.req.json();\n\n // Validate mood\n if (!mood || !VALID_MOODS.includes(mood)) {\n return c.json({ error: `Invalid mood. Must be one of: ${VALID_MOODS.join(\", \")}` }, 400);\n }\n\n // Validate text — reject empty submissions\n if (!text || typeof text !== \"string\" || text.trim().length === 0) {\n return c.json({ error: \"Text content is required. Empty submissions are not allowed.\" }, 400);\n }\n\n const entries = await getEntries();\n const newEntry: MoodEntry = {\n id: entries.length > 0 ? Math.max(...entries.map((e) => e.id)) + 1 : 1,\n mood,\n text: text.trim(),\n timestamp: new Date().toISOString(),\n };\n entries.push(newEntry);\n await saveEntries(entries);\n\n return c.json(newEntry, 201);\n});\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","children",[],[197],"bd99d77a-566c-11f1-81cb-ee650bb23af1","README.md","4b6627fe-566b-11f1-9b44-ee650bb23af1",["D",1779516046248],"# 😊 Mood Tracker\n\nTrack your moods throughout the day. Pick from Happy, Sad, Angry, or Tired — each with its own emoji, color scheme, and dynamic background.\n\n## Features\n\n- 🎨 **Dynamic background** — page color changes based on selected mood\n- 😊😢😠😴 **Emoji indicators** — each mood entry shows its emoji\n- 📝 **Required text** — describe how you're feeling (empty submissions blocked)\n- 💾 **Blob storage** — moods persisted via Val Town's `std/blob` (JSON)\n- ⏰ **Timestamps** — each entry saved with an ISO timestamp\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"main.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Form[\"MoodForm.tsx\"]\n App -->|renders| List[\"MoodList.tsx\"]\n Form -->|\"POST /api/moods\"| Hono\n App -->|\"GET /api/moods\"| Hono\n Hono -->|reads/writes| Blob[\"Blob Storage
(std/blob)\"]\n```\n\n## Data shape\n\nEach mood entry stored in blob storage:\n\n```json\n{ \"id\": 1, \"mood\": \"happy\", \"text\": \"Sunny day!\", \"timestamp\": \"2026-05-23T06:00:00.000Z\" }\n```\n\n## File structure\n\n```\nmain.ts ← Hono backend (API + blob persistence)\nfrontend/\n index.html ← HTML shell\n index.tsx ← React entrypoint\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (state + dynamic bg)\n MoodForm.tsx ← Mood selector + text input + validation\n MoodList.tsx ← Displays mood history with emoji cards\n moods.ts ← Shared mood config (emoji, colors)\n```\n",[],[208],"35085914-566b-11f1-9b44-ee650bb23af1","index.tsx","350859e6-566b-11f1-9b44-ee650bb23af1",8,["D",1779515387629],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();\n",[],[173,215],["D",1779515779548],[],[173,66],"3417fd5c-566b-11f1-9b44-ee650bb23af1","favicon.svg","3417fe2e-566b-11f1-9b44-ee650bb23af1",7,["D",1779515386048],"\n\n",[],[173,227],"096cf1f6-566c-11f1-8cc7-ee650bb23af1","moods.ts","096cf2d2-566c-11f1-8cc7-ee650bb23af1","2ae7502a-566b-11f1-ab0d-ee650bb23af1",14,["D",1779515743964],"export type Mood = \"happy\" | \"sad\" | \"angry\" | \"tired\";\n\nexport interface MoodConfig {\n emoji: string;\n label: string;\n bg: string; // page background class\n cardBorder: string; // card border color class\n cardBg: string; // card background class\n accent: string; // accent text color class\n btnBg: string; // button color\n btnHover: string; // button hover\n}\n\nexport const MOOD_MAP: Record = {\n happy: {\n emoji: \"😊\",\n label: \"Happy\",\n bg: \"bg-yellow-50\",\n cardBorder: \"border-yellow-300\",\n cardBg: \"bg-yellow-50\",\n accent: \"text-yellow-600\",\n btnBg: \"bg-yellow-500\",\n btnHover: \"hover:bg-yellow-600\",\n },\n sad: {\n emoji: \"😢\",\n label: \"Sad\",\n bg: \"bg-blue-50\",\n cardBorder: \"border-blue-300\",\n cardBg: \"bg-blue-50\",\n accent: \"text-blue-600\",\n btnBg: \"bg-blue-500\",\n btnHover: \"hover:bg-blue-600\",\n },\n angry: {\n emoji: \"😠\",\n label: \"Angry\",\n bg: \"bg-red-50\",\n cardBorder: \"border-red-300\",\n cardBg: \"bg-red-50\",\n accent: \"text-red-600\",\n btnBg: \"bg-red-500\",\n btnHover: \"hover:bg-red-600\",\n },\n tired: {\n emoji: \"😴\",\n label: \"Tired\",\n bg: \"bg-purple-50\",\n cardBorder: \"border-purple-300\",\n cardBg: \"bg-purple-50\",\n accent: \"text-purple-600\",\n btnBg: \"bg-purple-500\",\n btnHover: \"hover:bg-purple-600\",\n },\n};\n\nexport const ALL_MOODS: Mood[] = [\"happy\", \"sad\", \"angry\", \"tired\"];\n",[],[173,243,235],"components","ad60c3f0-566c-11f1-b80d-ee650bb23af1","MoodList.tsx","1a4f7d4a-566c-11f1-9c0a-ee650bb23af1",26,["D",1779516019023],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { type Mood, MOOD_MAP } from \"./moods.ts\";\nimport type { MoodEntry } from \"./App.tsx\";\n\ninterface MoodListProps {\n entries: MoodEntry[];\n}\n\nfunction formatTimestamp(iso: string): string {\n return new Date(iso).toLocaleString();\n}\n\nexport function MoodList({ entries }: MoodListProps) {\n if (entries.length === 0) {\n return (\n

No moods logged yet

Pick a mood above and hit \"Log Mood\"!

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

\n Mood History ({entries.length})\n

\n {entries.map((entry) => {\n const config = MOOD_MAP[entry.mood as Mood] || MOOD_MAP.happy;\n return (\n \n

\n {config.emoji}\n

{config.label}

{entry.text}

\n #{entry.id} · {formatTimestamp(entry.timestamp)}\n

\n );\n })}\n \n );\n}\n",[],[173,243,245],"a9a25fbc-566c-11f1-9414-ee650bb23af1","MoodForm.tsx","166a7978-566c-11f1-9c0a-ee650bb23af1",25,["D",1779516012748],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { type Mood, ALL_MOODS, MOOD_MAP } from \"./moods.ts\";\n\ninterface MoodFormProps {\n onSubmit: (mood: Mood, text: string) => Promise;\n selectedMood: Mood;\n onMoodChange: (mood: Mood) => void;\n}\n\nexport function MoodForm({ onSubmit, selectedMood, onMoodChange }: MoodFormProps) {\n const [text, setText] = useState(\"\");\n const [submitting, setSubmitting] = useState(false);\n const [error, setError] = useState(null);\n\n const config = MOOD_MAP[selectedMood];\n\n async function handleSubmit(e: React.FormEvent) {\n e.preventDefault();\n\n // Client-side validation: reject empty text\n if (!text.trim()) {\n setError(\"Please describe how you're feeling — empty submissions are not allowed.\");\n return;\n }\n\n setSubmitting(true);\n setError(null);\n try {\n await onSubmit(selectedMood, text.trim());\n setText(\"\");\n } catch (err: any) {\n setError(err.message);\n } finally {\n setSubmitting(false);\n }\n }\n\n return (\n

\n {/* Mood selector as buttons */}\n

\n Select your mood\n

\n {ALL_MOODS.map((mood) => {\n const m = MOOD_MAP[mood];\n const isSelected = mood === selectedMood;\n return (\n onMoodChange(mood)}\n class={`flex-1 py-3 rounded-lg text-center transition-all cursor-pointer border-2 ${\n isSelected\n ? `${m.cardBg} ${m.cardBorder} shadow-md scale-105`\n : \"bg-gray-50 border-gray-200 hover:bg-gray-100\"\n }`}\n >\n {m.emoji}\n \n {m.label}\n \n \n );\n })}\n

\n\n {/* Text content (required) */}\n

\n \n What's going on? *\n \n

\n { setText(e.target.value); setError(null); }}\n placeholder=\"Describe how you're feeling...\"\n class={`flex-1 px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-transparent text-base ${\n error ? \"border-red-300 bg-red-50\" : \"border-gray-300\"\n }`}\n disabled={submitting}\n />\n \n {submitting ? \"Saving...\" : \"Log Mood\"}\n \n

\n\n {error &&

{error}

}\n

\n );\n}\n",[],[173,243,253],"a251b136-566c-11f1-9642-ee650bb23af1","App.tsx","3a833c56-566b-11f1-9b44-ee650bb23af1",24,["D",1779516000470],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { MoodForm } from \"./MoodForm.tsx\";\nimport { MoodList } from \"./MoodList.tsx\";\nimport { type Mood, MOOD_MAP } from \"./moods.ts\";\n\nexport interface MoodEntry {\n id: number;\n mood: Mood;\n text: string;\n timestamp: string;\n}\n\nexport function App() {\n const [entries, setEntries] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [selectedMood, setSelectedMood] = useState(\"happy\");\n\n useEffect(() => {\n fetchEntries();\n }, []);\n\n async function fetchEntries() {\n try {\n const res = await fetch(\"/api/moods\");\n if (!res.ok) throw new Error(\"Failed to fetch moods\");\n const data = await res.json();\n setEntries(data);\n } catch (err: any) {\n setError(err.message);\n } finally {\n setLoading(false);\n }\n }\n\n async function handleSubmit(mood: Mood, text: string) {\n const res = await fetch(\"/api/moods\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ mood, text }),\n });\n if (!res.ok) {\n const data = await res.json();\n throw new Error(data.error || \"Failed to submit mood\");\n }\n const newEntry = await res.json();\n setEntries((prev) => [newEntry, ...prev]);\n }\n\n const moodConfig = MOOD_MAP[selectedMood];\n\n return (\n

\n Mood Tracker {moodConfig.emoji}\n

How are you feeling right now?

\n\n \n\n {loading ? (\n

Loading mood entries...

\n ) : error ? (\n

{error}

\n ) : (\n \n )}\n\n

\n View source\n

\n );\n}\n",[],[173,243,261],"2ae74f4e-566b-11f1-ab0d-ee650bb23af1",["D",1779515370636],"directory",[187,188,189,190],[173,243],"29a18410-566b-11f1-9b44-ee650bb23af1",3,["D",1779515368499],[186,191,192,193],[173],["D",1779515318728],["D",1789517443998],{"_11":12,"_140":71},{"_11":12,"_135":136,"_70":71,"_30":69,"_137":138,"_139":24},{"_40":126,"_13":16,"_34":37,"_127":89,"_128":-5,"_129":-5,"_130":-5,"_131":-5,"_132":-5,"_133":14,"_134":12},"ctx",{"_54":-5,"_160":316,"_317":318,"_319":320,"_321":24,"_322":24,"_323":24,"_324":158,"_325":-5,"_326":-7,"_327":-7,"_328":26,"_329":24,"_330":24,"_331":-5,"_332":24,"_333":24,"_334":24,"_335":-5},"ENV",{"_287":288,"_289":290,"_291":16,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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"]

History · index.html