`;\n }\n const hex = flowerColorHex(value);\n return ``;\n}\n\n// Reusable flower color picker (dropdown + custom upload + live preview).\n// Multiple can exist on one page — JS wires them up generically via the\n// .flower-picker / .flower-select / .flower-file / .flower-hidden classes.\nfunction flowerPickerHtml(inputName: string, currentValue: string) {\n const optionsHtml = FLOWER_COLORS\n .map((f) =>\n ``\n )\n .join(\"\");\n return `\n

\n \n

Or upload your own small flower icon.

\n \n

\n `;\n}\n\nconst PARCHMENT_TEXTURE =\n \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E\" +\n \"%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E\" +\n \"%3CfeColorMatrix type='matrix' values='0 0 0 0 0.16 0 0 0 0 0.14 0 0 0 0 0.11 0 0 0 0.05 0'/%3E%3C/filter%3E\" +\n \"%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\";\n\nfunction page(title: string, body: string) {\n return `\n\n\n\n\n${escapeHtml(title)}\n\n\n\n\n\n\n${body}\n\n`;\n}\n\nfunction buildBarChart(\n idPrefix: string,\n segments: { key: string; label: string; value: number }[],\n) {\n const total = segments.reduce((s, x) => s + x.value, 0) || 1;\n return segments\n .map((seg, i) => {\n const percent = Math.round((seg.value / total) * 100);\n const color = CHART_COLORS[i % CHART_COLORS.length];\n return `

${\n escapeHtml(seg.label)\n }${percent}%

`;\n })\n .join(\"\");\n}\n\n// --- The one-screen garden ---\n\nasync function renderMainPage(me: string, key: string) {\n const pendingRes = await sqlite.execute(\n `SELECT * FROM ${TABLE} WHERE verifier = ? AND status = 'submitted' ORDER BY created_at ASC`,\n [me],\n );\n const pendingItems = pendingRes.rows as any[];\n const pendingCount = pendingItems.length;\n\n const occupantsRes = await sqlite.execute(\n `SELECT * FROM ${TABLE} WHERE status IN ('submitted','verified') ORDER BY plot_index ASC`,\n );\n const occupants = occupantsRes.rows as any[];\n const occupantMap = new Map();\n let maxIndex = -1;\n for (const g of occupants) {\n if (g.plot_index !== null && g.plot_index !== undefined) {\n occupantMap.set(Number(g.plot_index), g);\n maxIndex = Math.max(maxIndex, Number(g.plot_index));\n }\n }\n const usedSlots = maxIndex + 1;\n const totalSlots = Math.max(MIN_SLOTS, usedSlots + BUFFER_SLOTS);\n\n const pastGoals = await sqlite.execute(\n `SELECT description, flower_emoji, MAX(created_at) as last_used\n FROM ${TABLE} WHERE creator = ? GROUP BY description ORDER BY last_used DESC LIMIT 25`,\n [me],\n );\n const pastVerifiers = await sqlite.execute(\n `SELECT verifier, MAX(created_at) as last_used\n FROM ${TABLE} WHERE creator = ? GROUP BY verifier ORDER BY last_used DESC LIMIT 25`,\n [me],\n );\n const goalSelectOptions = (pastGoals.rows as any[])\n .map((r) =>\n ``\n )\n .join(\"\");\n const verifierSelectOptions = (pastVerifiers.rows as any[])\n .map((r) =>\n ``\n )\n .join(\"\");\n const descToEmoji = Object.fromEntries(\n (pastGoals.rows as any[]).map((\n r,\n ) => [r.description, r.flower_emoji || DEFAULT_FLOWER_KEY]),\n );\n\n // Build the grid.\n let gridHtml = \"\";\n for (let i = 0; i < totalSlots; i++) {\n const occ = occupantMap.get(i);\n if (occ) {\n const isBloomed = occ.status === \"verified\";\n const cls = isBloomed ? \"plot bloomed\" : \"plot dulled\";\n gridHtml +=\n ``;\n } else if (pendingCount > 0) {\n gridHtml +=\n ``;\n } else {\n gridHtml +=\n ``;\n }\n }\n\n // Build detail blocks for every occupant.\n let detailsHtml = \"\";\n for (const occ of occupants) {\n const isBloomed = occ.status === \"verified\";\n if (isBloomed) {\n const isMine = occ.creator === me;\n detailsHtml += `\n

${escapeHtml(occ.creator)} — ${\n escapeHtml(occ.description)\n }

Verified ${formatDate(occ.verified_at)}

\n ${\n isMine\n ? ``\n : \"\"\n }\n \n

`;\n } else if (occ.verifier === me) {\n detailsHtml += `\n

${escapeHtml(occ.creator)} — ${\n escapeHtml(occ.description)\n }

Waiting on your verification, planted ${\n formatDate(occ.created_at)\n }.

\n ${\n occ.photo_data\n ? `

`\n : `

No photo attached.

`\n }\n

\n \n \n

\n \n

`;\n } else {\n detailsHtml += `\n

${escapeHtml(occ.creator)} — ${\n escapeHtml(occ.description)\n }

Waiting on ${\n escapeHtml(occ.verifier)\n } to verify. Planted ${formatDate(occ.created_at)}.

\n \n

`;\n }\n }\n\n if (pendingCount > 0) {\n const pendingListHtml = pendingItems\n .map(\n (g) => `\n

${\n flowerHtml(g.flower_emoji, 24, true)\n }${escapeHtml(g.creator)} — ${\n escapeHtml(g.description)\n }

\n ${\n g.photo_data\n ? `

`\n : `

No photo attached.

`\n }\n

\n \n \n

`,\n )\n .join(\"\");\n detailsHtml += `\n

Clear your queue first

You can't plant a new goal until you've verified or rejected everything waiting on you.

\n ${pendingListHtml}\n \n

`;\n }\n\n detailsHtml += `\n

Plant a goal

\n \n \n

`;\n\n const verifiedRows = occupants.filter((g) => g.status === \"verified\");\n const byPerson = new Map();\n const byType = new Map();\n for (const g of verifiedRows) {\n byPerson.set(g.creator, (byPerson.get(g.creator) || 0) + 1);\n byType.set(g.description, (byType.get(g.description) || 0) + 1);\n }\n const personSegments = Array.from(byPerson.entries())\n .sort((a, b) => b[1] - a[1])\n .map(([k, v]) => ({ key: k, label: k, value: v }));\n const typeSegments = Array.from(byType.entries())\n .sort((a, b) => b[1] - a[1])\n .map(([k, v]) => ({ key: k, label: k, value: v }));\n\n const chartsHtml = verifiedRows.length\n ? `\n

By person

\n ${buildBarChart(\"person\", personSegments)}\n

By goal type

\n ${buildBarChart(\"desc\", typeSegments)}\n

\n `\n : `

Bars will appear once flowers have bloomed.

`;\n\n return page(\n \"Habit Garden\",\n `\n

Habit Garden

Signed in as ${\n escapeHtml(me)\n }${\n pendingCount > 0 ? ` · ${pendingCount} waiting on your verification` : \"\"\n }

\n\n

${gridHtml}

\n\n ${detailsHtml}\n\n

Contributions

\n ${chartsHtml}\n

\n\n \n `,\n );\n}\n\nexport default async function (req: Request): Promise {\n await ensureTable();\n const url = new URL(req.url);\n const path = url.pathname;\n const me = (url.searchParams.get(\"me\") || \"\").trim();\n const key = (url.searchParams.get(\"key\") || \"\").trim();\n\n const requiredSecret = Deno.env.get(\"APP_SECRET\");\n if (requiredSecret && key !== requiredSecret) {\n return new Response(\n page(\n \"Locked\",\n `

Locked

This link needs a valid key. Ask whoever set up the app for the shared link.

`,\n ),\n { status: 401, headers: { \"content-type\": \"text/html\" } },\n );\n }\n\n if ((path === \"/garden\" || path === \"/verify\") && req.method === \"GET\") {\n return Response.redirect(url.origin + \"/\" + qs(me, key), 302);\n }\n\n if (path === \"/\" && req.method === \"GET\") {\n if (!me) {\n return new Response(\n page(\n \"Habit Garden\",\n `

Habit Garden

Open this link with your name, e.g. ?me=Sahana

\n `,\n ),\n { headers: { \"content-type\": \"text/html\" } },\n );\n }\n return new Response(await renderMainPage(me, key), {\n headers: { \"content-type\": \"text/html\" },\n });\n }\n\n if (path === \"/api/goals\" && req.method === \"POST\") {\n const form = await req.formData();\n const description = String(form.get(\"description\") || \"\").trim();\n const verifier = String(form.get(\"verifier\") || \"\").trim();\n const flowerEmoji =\n String(form.get(\"flower_emoji\") || DEFAULT_FLOWER_KEY).trim() ||\n DEFAULT_FLOWER_KEY;\n const photoData = String(form.get(\"photo_data\") || \"\").trim() || null;\n const plotIndexRaw = String(form.get(\"plot_index\") || \"\").trim();\n const plotIndex = Number.parseInt(plotIndexRaw, 10);\n\n if (\n !description || !verifier || !me || Number.isNaN(plotIndex) ||\n plotIndex < 0\n ) {\n return new Response(\"Missing or invalid fields\", { status: 400 });\n }\n\n const pendingToVerify = await sqlite.execute(\n `SELECT COUNT(*) as cnt FROM ${TABLE} WHERE verifier = ? AND status = 'submitted'`,\n [me],\n );\n const pendingCount = Number((pendingToVerify.rows[0] as any)?.cnt || 0);\n if (pendingCount > 0) {\n return new Response(\n page(\n \"Verify first\",\n `

Verify first

You have ${pendingCount} thing${\n pendingCount === 1 ? \"\" : \"s\"\n } waiting on your verification. Clear those before planting a new goal.

\n `,\n ),\n { status: 409, headers: { \"content-type\": \"text/html\" } },\n );\n }\n\n const occupied = await sqlite.execute(\n `SELECT id FROM ${TABLE} WHERE plot_index = ? AND status IN ('submitted','verified')`,\n [plotIndex],\n );\n if (occupied.rows.length > 0) {\n return new Response(\n page(\n \"Spot taken\",\n `

That spot's taken

Someone just planted there. Head back and pick another spot.

\n `,\n ),\n { status: 409, headers: { \"content-type\": \"text/html\" } },\n );\n }\n\n await sqlite.execute(\n `INSERT INTO ${TABLE} (id, creator, verifier, description, flower_emoji, status, photo_data, plot_index, created_at)\n VALUES (?, ?, ?, ?, ?, 'submitted', ?, ?, ?)`,\n [\n uid(),\n me,\n verifier,\n description,\n flowerEmoji,\n photoData,\n plotIndex,\n new Date().toISOString(),\n ],\n );\n return Response.redirect(url.origin + \"/\" + qs(me, key), 303);\n }\n\n const verifyMatch = path.match(/^\\/api\\/goals\\/([\\w-]+)\\/verify$/);\n if (verifyMatch && req.method === \"POST\") {\n const goalId = verifyMatch[1];\n const form = await req.formData();\n const decision = String(form.get(\"decision\") || \"\");\n\n const existing = await sqlite.execute(\n `SELECT * FROM ${TABLE} WHERE id = ?`,\n [goalId],\n );\n const goal = existing.rows[0] as any;\n if (!goal || goal.verifier !== me) {\n return new Response(\"Not authorized to verify this goal\", {\n status: 403,\n });\n }\n if (goal.status !== \"submitted\") {\n return new Response(\"Goal is not awaiting verification\", { status: 400 });\n }\n\n const newStatus = decision === \"approve\" ? \"verified\" : \"rejected\";\n await sqlite.execute(\n `UPDATE ${TABLE} SET status = ?, verified_at = ?, photo_data = NULL WHERE id = ?`,\n [newStatus, new Date().toISOString(), goalId],\n );\n return Response.redirect(url.origin + \"/\" + qs(me, key), 303);\n }\n\n // Let the original creator restyle a flower after it's already bloomed.\n const flowerMatch = path.match(/^\\/api\\/goals\\/([\\w-]+)\\/flower$/);\n if (flowerMatch && req.method === \"POST\") {\n const goalId = flowerMatch[1];\n const form = await req.formData();\n const flowerEmoji = String(form.get(\"flower_emoji\") || \"\").trim();\n\n const existing = await sqlite.execute(\n `SELECT * FROM ${TABLE} WHERE id = ?`,\n [goalId],\n );\n const goal = existing.rows[0] as any;\n if (!goal || goal.creator !== me) {\n return new Response(\"Not authorized to edit this goal's flower\", {\n status: 403,\n });\n }\n if (goal.status !== \"verified\") {\n return new Response(\"Only verified goals can have their flower changed\", {\n status: 400,\n });\n }\n if (!flowerEmoji) {\n return new Response(\"Missing flower value\", { status: 400 });\n }\n\n await sqlite.execute(`UPDATE ${TABLE} SET flower_emoji = ? WHERE id = ?`, [\n flowerEmoji,\n goalId,\n ]);\n return Response.redirect(url.origin + \"/\" + qs(me, key), 303);\n }\n\n return new Response(\"Not found\", { status: 404 });\n}","habitgarden",[142],"pulls","branches",1,"forks","envVars",{"_157":151,"_159":64},"connections",{"_157":64,"_158":64},"count","unfilledCount","emptyCount",{"_44":141,"_33":142,"_31":58,"_134":-5,"_42":43,"_41":143,"_135":25,"_39":166,"_13":145,"_34":38,"_36":146,"_24":25,"_138":147,"_163":167,"_27":168},{"_44":133,"_33":28,"_31":32,"_134":-5,"_42":43,"_41":14,"_135":25,"_39":162,"_13":137,"_34":38,"_36":37,"_24":25,"_138":139,"_163":164,"_27":165},["D",1784501297290],"children",[],[28],["D",1784500168348],[],[142],["D",1784490986084],["D",1789472446807],{"_101":100,"_109":105},{"_101":100,"_102":103,"_104":105,"_18":56,"_106":107,"_108":25},{"_13":90,"_33":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"ctx",{"_83":-5,"_128":207,"_208":209,"_210":211,"_212":25,"_213":25,"_214":25,"_215":60,"_216":-5,"_217":-7,"_218":-7,"_219":64,"_220":25,"_221":25,"_222":-5,"_223":25,"_224":25,"_225":25,"_226":-5},"ENV",{"_178":179,"_180":181,"_182":91,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206},"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"]

Diff · v15