SG Daily Essentials

\n {/* NOTES */}\n {active === \"notes\" && (\n

Quick notes

\n \n

\n                <button>Add note</button>\n              </form>\n              <ul className=\"list\">\n                {notes.map((n: any) => (\n                  <li key={n.id}>\n                    <span className=\"grow\">{n.text}</span>\n                    <form method=\"post\" action=\"/?t=notes\">\n                      <input type=\"hidden\" name=\"action\" value=\"delNote\" />\n                      <input type=\"hidden\" name=\"id\" value={n.id} />\n                      <button className=\"ghost\">✕</button>\n                    </form>\n                  </li>\n                ))}\n                {notes.length === 0 && <p className=\"empty\">No notes yet.</p>}\n              </ul>\n            </section>\n          )}\n\n          {/* TO-DO */}\n          {active === \"todo\" && (\n            <section>\n              <h2>To-do list <small>{open} open</small></h2>\n              <form method=\"post\" action=\"/?t=todo\" className=\"grid\">\n                <input type=\"hidden\" name=\"action\" value=\"addTodo\" />\n                <input name=\"text\" placeholder=\"What needs doing?\" autoComplete=\"off\" required />\n                <input name=\"reminder\" type=\"datetime-local\" aria-label=\"Reminder date & time\" />\n                <button>Add</button>\n              </form>\n              <ul className=\"list\">\n                {todos.map((t: any) => (\n                  <li key={t.id} className={t.done ? \"done\" : isOverdue(t) ? \"overdue\" : \"\"}>\n                    <form method=\"post\" action=\"/?t=todo\" className=\"toggle\">\n                      <input type=\"hidden\" name=\"action\" value=\"toggleTodo\" />\n                      <input type=\"hidden\" name=\"id\" value={t.id} />\n                      <button className=\"check\">{t.done ? \"✓\" : \"\"}</button>\n                    </form>\n                    <div className=\"grow todobody\">\n                      <span>{t.text}</span>\n                      {t.reminder && (\n                        <small className={isOverdue(t) ? \"due-due\" : \"due\"}>\n                          {isOverdue(t) ? \"⏰ overdue · \" : \"reminder · \"}{fmtReminder(t.reminder)}\n                        </small>\n                      )}\n                    </div>\n                    <form method=\"post\" action=\"/?t=todo\">\n                      <input type=\"hidden\" name=\"action\" value=\"delTodo\" />\n                      <input type=\"hidden\" name=\"id\" value={t.id} />\n                      <button className=\"ghost\">✕</button>\n                    </form>\n                  </li>\n                ))}\n                {todos.length === 0 && <p className=\"empty\">Nothing on the list.</p>}\n              </ul>\n            </section>\n          )}\n\n          {/* DRAWINGS */}\n          {active === \"drawings\" && (\n            <section>\n              <h2>Shop drawing revisions</h2>\n              <details className=\"add\">\n                <summary>+ Add drawing / revision</summary>\n                <form method=\"post\" action=\"/?t=drawings\" className=\"grid\">\n                  <input type=\"hidden\" name=\"action\" value=\"addDraw\" />\n                  <input name=\"drawingNo\" placeholder=\"Drawing no. (e.g. A-101)\" required />\n                  <input name=\"client\" placeholder=\"Client\" />\n                  <input name=\"revision\" placeholder=\"Revision (A/B/C...)\" />\n                  <select name=\"status\">\n                    <option>draft</option><option>issued</option>\n                    <option>client review</option><option>approved</option>\n                  </select>\n                  <input name=\"dateIssued\" placeholder=\"Date issued (DD/MM/YYYY)\" />\n                  <textarea name=\"notes\" rows={2} placeholder=\"Notes\" />\n                  <button>Save</button>\n                </form>\n              </details>\n              <div className=\"drawcards\">\n                {drawings.map((d: any) => (\n                  <div className=\"card\" key={d.id}>\n                    <div className=\"cardhead\">\n                      <strong>{d.drawingNo}</strong>\n                      <span className=\"chip\" style={{ background: statusColor(d.status) }}>{d.status}</span>\n                    </div>\n                    <div className=\"row\"><b>Client:</b> {d.client || \"—\"}</div>\n                    <div className=\"row\"><b>Rev:</b> {d.revision || \"—\"}</div>\n                    <div className=\"row\"><b>Issued:</b> {d.dateIssued || \"—\"}</div>\n                    {d.notes && <div className=\"row note\">{d.notes}</div>}\n                    <form method=\"post\" action=\"/?t=drawings\">\n                      <input type=\"hidden\" name=\"action\" value=\"delDraw\" />\n                      <input type=\"hidden\" name=\"id\" value={d.id} />\n                      <button className=\"ghost\">Remove</button>\n                    </form>\n                  </div>\n                ))}\n                {drawings.length === 0 && <p className=\"empty\">No drawings tracked yet.</p>}\n              </div>\n            </section>\n          )}\n\n          {/* CALCULATOR */}\n          {active === \"calc\" && (\n            <section>\n              <h2>Calculator</h2>\n              <p className=\"empty\">\n                Calculator needs tiny client-side JS to be interactive. For now, quick server-side\n                sums: use the form below (e.g. <code>12+7</code>).\n              </p>\n              <form method=\"post\" action=\"/?t=calc\" className=\"grid\">\n                <input type=\"hidden\" name=\"action\" value=\"calc\" />\n                <input name=\"expr\" placeholder=\"Expression e.g. 12*7+3\" required />\n                <button>Compute</button>\n              </form>\n              {data.calcResult != null && <p className=\"result\">= {data.calcResult}</p>}\n\n              <h3 className=\"sub\">Area → square feet</h3>\n              <p className=\"hint\">Single value in m², or two dimensions (length × width).</p>\n              <form method=\"post\" action=\"/?t=calc\" className=\"grid\">\n                <input type=\"hidden\" name=\"action\" value=\"sqft\" />\n                <input name=\"v1\" type=\"number\" step=\"any\" placeholder=\"m² or length\" required />\n                <input name=\"v2\" type=\"number\" step=\"any\" placeholder=\"width in m (optional)\" />\n                <button>To square feet</button>\n              </form>\n              {data.sqftResult && <p className=\"result\">{data.sqftResult}</p>}\n            </section>\n          )}\n\n          {/* CONVERTER */}\n          {active === \"convert\" && (\n            <section>\n              <h2>Metric unit converter</h2>\n              <form method=\"post\" action=\"/?t=convert\" className=\"grid\">\n                <input type=\"hidden\" name=\"action\" value=\"convert\" />\n                <input name=\"value\" type=\"number\" step=\"any\" placeholder=\"Value\" required />\n                <select name=\"from\">\n                  <optgroup label=\"Length\">\n                    <option value=\"mm\">mm</option><option value=\"cm\">cm</option>\n                    <option value=\"m\">m</option><option value=\"km\">km</option>\n                  </optgroup>\n                  <optgroup label=\"Weight\">\n                    <option value=\"g\">g</option><option value=\"kg\">kg</option>\n                    <option value=\"t\">tonne (t)</option>\n                  </optgroup>\n                </select>\n                <span className=\"convto\">→</span>\n                <select name=\"to\">\n                  <optgroup label=\"Length\">\n                    <option value=\"mm\">mm</option><option value=\"cm\">cm</option>\n                    <option value=\"m\">m</option><option value=\"km\">km</option>\n                  </optgroup>\n                  <optgroup label=\"Weight\">\n                    <option value=\"g\">g</option><option value=\"kg\">kg</option>\n                    <option value=\"t\">tonne (t)</option>\n                  </optgroup>\n                </select>\n                <button>Convert</button>\n              </form>\n              {data.convertResult && <p className=\"result\">{data.convertResult}</p>}\n            </section>\n          )}\n        </main>\n\n        <footer>\n          Data persists on your val's server (std/blob). Works great on mobile.\n        </footer>\n      </body>\n    </html>\n  );\n}\n\n// ---------- mutations & conversions ----------\nconst TO_M: Record<string, number> = { mm: 0.001, cm: 0.01, m: 1, km: 1000, g: 0.001, kg: 1, t: 1000 };\n\nasync function applyMutation(data: any, form: Record<string, string>) {\n  const a = form.action;\n  const id = () => Math.random().toString(36).slice(2, 9);\n\n  if (a === \"addNote\") data.notes.unshift({ id: id(), text: (form.text || \"\").trim() });\n  else if (a === \"delNote\") data.notes = data.notes.filter((n: any) => n.id !== form.id);\n  else if (a === \"addTodo\") data.todos.unshift({ id: id(), text: (form.text || \"\").trim(), done: false, reminder: (form.reminder || \"\").trim() || undefined });\n  else if (a === \"delTodo\") data.todos = data.todos.filter((t: any) => t.id !== form.id);\n  else if (a === \"toggleTodo\")\n    data.todos = data.todos.map((t: any) => (t.id === form.id ? { ...t, done: !t.done } : t));\n  else if (a === \"addDraw\")\n    data.drawings.push({\n      id: id(), drawingNo: (form.drawingNo || \"\").trim(), client: (form.client || \"\").trim(),\n      revision: (form.revision || \"\").trim(), status: (form.status || \"draft\").trim(),\n      dateIssued: (form.dateIssued || \"\").trim(), notes: (form.notes || \"\").trim(),\n    });\n  else if (a === \"delDraw\") data.drawings = data.drawings.filter((d: any) => d.id !== form.id);\n  else if (a === \"convert\") {\n    const v = Number(form.value);\n    if (isNaN(v)) data.convertResult = \"Enter a number.\";\n    else {\n      const from = TO_M[form.from] ?? 1, to = TO_M[form.to] ?? 1;\n      data.convertResult = `${v} ${form.from} = ${Number((v * from / to).toFixed(6))} ${form.to}`;\n    }\n  } else if (a === \"calc\") {\n    const expr = (form.expr || \"\").replace(/[^0-9+\\-*/(). ]/g, \"\").trim();\n    try { data.calcResult = String(Function(`\"use strict\"; return (${expr || \"0\"})`)()); }\n    catch { data.calcResult = \"Invalid expression\"; }\n  } else if (a === \"sqft\") {\n    const v1 = Number(form.v1);\n    const v2 = form.v2 ? Number(form.v2) : null;\n    if (isNaN(v1) || (form.v2 && isNaN(v2 as number))) data.sqftResult = \"Enter valid numbers.\";\n    else {\n      const areaM2 = (v2 == null ? v1 : v1 * (v2 as number)); // m²\n      const sqft = areaM2 * 10.7639;\n      data.sqftResult = `${v2 == null ? `${v1} m²` : `${v1} m × ${v2} m`} = ${Number(sqft.toFixed(2))} sq ft`;\n    }\n  }\n  return data;\n}\n\n// ---------- HTTP entrypoint ----------\nexport default async function handler(req: Request) {\n  const url = new URL(req.url);\n\n  if (url.pathname === \"/style.css\") {\n    const css = `\n      * { box-sizing: border-box; }\n      body { font-family: system-ui, -apple-system, \"Segoe UI\", sans-serif; margin: 0;\n             background: #f6f7f8; color: #1c1c1c; line-height: 1.5; }\n      header { background: #1a2b3c; color: #fff; padding: 1rem 1.25rem; }\n      header h1 { margin: 0; font-size: 1.2rem; }\n      header .date { font-size: .85rem; opacity: .8; margin-top: .25rem; display: block; }\n      nav.tabs { display: flex; overflow-x: auto; background: #fff; border-bottom: 1px solid #e3e5e8; }\n      nav.tabs a { padding: .8rem 1rem; text-decoration: none; color: #555; white-space: nowrap; font-weight: 600; }\n      nav.tabs a.active { color: #1a2b3c; box-shadow: inset 0 -3px 0 #1a2b3c; }\n      main { max-width: 640px; margin: 0 auto; padding: 1.25rem; }\n      h2 { font-size: 1.05rem; margin: 0 0 .9rem; }\n      h2 small { color: #888; font-weight: 400; }\n      form { display: flex; gap: .5rem; margin-bottom: 1rem; }\n      form.grid { flex-wrap: wrap; }\n      form.toggle { margin: 0; padding: 0; }\n      input, select, textarea, button {\n        font: inherit; padding: .65rem .7rem; border-radius: 8px; border: 1px solid #cfd4d8; }\n      input, select, textarea { flex: 1; min-width: 120px; background: #fff; }\n      textarea { resize: vertical; }\n      button { background: #1a2b3c; color: #fff; border: none; cursor: pointer; font-weight: 600; }\n      button.ghost { background: transparent; color: #888; border: 1px solid #e3e5e8; padding: .2rem .55rem; flex: 0; }\n      button.check { background: transparent; border: 2px solid #cfd4d8; width: 1.5rem; height: 1.5rem;\n                     padding: 0; border-radius: 50%; color: #2e7d32; font-weight: 800; flex: 0; }\n      ul.list { list-style: none; margin: 0; padding: 0; }\n      ul.list li { display: flex; align-items: center; gap: .6rem; background: #fff;\n                   border: 1px solid #e3e5e8; padding: .6rem .8rem; margin-bottom: .5rem; border-radius: 8px; }\n      ul.list li .grow { flex: 1; }\n      ul.list li.done .grow { text-decoration: line-through; color: #888; }\n      ul.list li.overdue { border-color: #d32f2f; background: #fff5f5; }\n      .todobody { display: flex; flex-direction: column; line-height: 1.3; }\n      .todobody small { font-size: .75rem; }\n      .todobody .due { color: #888; }\n      .todobody .due-due { color: #d32f2f; font-weight: 600; }\n      h3.sub { font-size: .95rem; margin: 1.2rem 0 .3rem; }\n      .empty, .hint { color: #888; font-size: .9rem; }\n      details.add { background: #fff; border: 1px solid #e3e5e8; border-radius: 8px; padding: .6rem .8rem; margin-bottom: 1rem; }\n      details.add summary { cursor: pointer; font-weight: 600; }\n      details.add form { margin-top: .7rem; margin-bottom: 0; }\n      .drawcards { display: grid; gap: .6rem; }\n      .card { background: #fff; border: 1px solid #e3e5e8; border-radius: 8px; padding: .8rem; }\n      .cardhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }\n      .chip { color: #fff; font-size: .75rem; padding: .15rem .55rem; border-radius: 999px; font-weight: 600; }\n      .row { font-size: .9rem; }\n      .row.note { color: #555; margin-top: .2rem; }\n      .convto { align-self: center; color: #888; }\n      .result { font-weight: 700; }\n      footer { text-align: center; color: #a0a6ab; font-size: .8rem; padding: 1.5rem; }\n      @media (max-width: 480px){ form{ flex-wrap: wrap; } input,select,textarea,button{ min-width:100%; } }\n    `;\n    return new Response(css, { headers: { \"content-type\": \"text/css; charset=utf-8\" } });\n  }\n\n  let data = await loadData();\n  if (req.method === \"POST\") {\n    const fd = await req.formData();\n    const kv: Record<string, string> = {};\n    for (const [k, v] of fd.entries()) kv[k] = String(v);\n    data = await applyMutation(data, kv);\n    await saveData(data);\n    const t = url.searchParams.get(\"t\") || \"notes\";\n    return Response.redirect(`${url.origin}/?t=${t}`, 303);\n  }\n\n  const active = url.searchParams.get(\"t\") || \"notes\";\n  const html = \"<!doctype html>\" + renderToStaticMarkup(React.createElement(Page, { data, active }));\n  return new Response(html, { headers: { \"content-type\": \"text/html; charset=utf-8\" } });\n}\n","deleted",false,"label","sg-essentials",[36],"846810ce-1e42-4e5f-b335-de4df9153c60","index.ts","6ca1d14c-a9c8-11f1-a359-1607ee4eb77e",1,["D",1788681370604],0,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { renderToStaticMarkup } from \"https://esm.sh/react-dom@18.2.0/server\";\n\n// ---------- persistence ----------\n// Single JSON doc in blob storage; read/write with a light guard against\n// concurrent saves. No browser storage (unsupported), so data lives server-side.\nconst KEY = \"sg-daily-essentials-data\";\nlet savePromise = Promise.resolve();\n\nasync function load(): Promise<any> {\n  for (let i = 0; i < 5; i++) {\n    try {\n      const raw = await Deno.env.get(\"README\") ? null : await fetch(\n        `https://blob.deno.dev?${KEY}`,\n      ).then((r) => (r.ok ? r.json() : null));\n      return raw && typeof raw === \"object\" ? raw : { notes: [], todos: [], drawings: [] };\n    } catch {\n      // fall through\n    }\n  }\n  return { notes: [], todos: [], drawings: [] };\n}\n\n// We'll use a tiny persisted state object imported at the top.\n",[59],{"_34":58,"_13":59,"_37":60,"_39":-5,"_40":41,"_42":61,"_44":45,"_46":72,"_17":63,"_49":50,"_51":64,"_53":54,"_55":-5,"_69":73,"_18":74},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":68,"_17":48,"_49":50,"_51":52,"_53":54,"_55":56,"_69":70,"_18":71},["D",1788682165538],"children",[],[36],["D",1788681370604],[],[59],"dc7d69d2-d372-4ffe-9977-a8323545b5fc",["D",1788681365582],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Dashboard: notes, todo, shop revisions, calculator, converter","imageUrl","userId","154bd18b-7d4f-4fa6-8bd0-2f7e3c8c7ba9","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","01a075b4-9379-748a-a15a-cd0ade8c9887","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_129":125},"org",{"_11":12,"_122":123,"_124":125,"_85":86,"_126":127,"_128":54},"branch",{"_17":43,"_13":16,"_34":41,"_114":75,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":-5,"_120":14,"_121":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Toh Wilson","avatar","https://lh3.googleusercontent.com/a/ACg8ocKFn0_L6dfakCj_okZDw_69VkVaajvYmaDE27lggN3LDZW7=s96-c","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_34":75,"_13":14,"_46":167,"_77":-5,"_78":54,"_79":80,"_81":80,"_82":83,"_84":-5,"_85":86,"_87":60,"_88":45,"_89":-5,"_90":-5,"_91":63,"_92":93,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":99,"_100":99,"_101":102,"_103":102,"_104":102,"_105":99,"_106":99,"_107":168,"_109":169,"_111":170,"_113":54},[161,162],"files",[161,162],"counts",{"_152":63,"_153":61,"_154":63,"_31":155,"_156":157},[148,149],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_34":58,"_13":59,"_37":60,"_39":-5,"_40":41,"_42":61,"_44":45,"_46":62,"_17":63,"_49":50,"_51":64,"_53":54,"_55":-5,"_18":151},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":56,"_18":150},[36],[59],"pulls","branches","forks",{"_158":63,"_160":63},"connections",{"_158":63,"_159":63},"count","unfilledCount","emptyCount",{"_34":58,"_13":59,"_37":60,"_39":-5,"_40":41,"_42":61,"_44":45,"_46":72,"_17":63,"_49":50,"_51":64,"_53":54,"_55":-5,"_69":165,"_18":166},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":68,"_17":48,"_49":50,"_51":52,"_53":54,"_55":56,"_69":163,"_18":164},[],[36],[],[59],["D",1788681365582],{"_11":12,"_129":125},{"_11":12,"_122":123,"_124":125,"_85":86,"_126":127,"_128":54},{"_17":43,"_13":16,"_34":41,"_114":75,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":-5,"_120":14,"_121":12},"ctx",{"_107":-5,"_145":204,"_205":206,"_207":208,"_209":54,"_210":54,"_211":54,"_212":45,"_213":-5,"_214":-7,"_215":-7,"_216":63,"_217":54,"_218":54,"_219":-5,"_220":54,"_221":54,"_222":54,"_223":-5},"ENV",{"_175":176,"_177":178,"_179":16,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203},"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"]
</article></body></html>

Code