\n \n \n \n",[119,109],"680fd2e499131427cb73fae744466607e79c7135cc4d1b687c7a414cdb5ab6ea","frontend","5c059140-3996-11f1-a04c-42b51c65c3df","5404b440-f52b-11ef-99f0-569c3dd06744","a59cbf44-f528-11ef-ae42-569c3dd06744",74,["D",1776345337676],8,"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[119,109],"1ea8b3da4e18d579298229ba24af91b14b14ae02565f57c996f9acaa1f8333bc","frontend/components/App.tsx",{"_32":143,"_13":133,"_81":144,"_83":145,"_84":33,"_85":146,"_86":26,"_34":147,"_40":148,"_88":138,"_90":149,"_66":48,"_92":-5,"_93":-7,"_74":150,"_95":151},{"_32":132,"_13":133,"_81":134,"_83":135,"_84":58,"_85":101,"_86":26,"_34":136,"_40":137,"_88":138,"_90":139,"_66":48,"_92":-5,"_93":-7,"_74":140,"_95":141},"9517f2ae-39b2-11f1-9525-42b51c65c3df","App.tsx","019d9721-9e2a-7242-a257-b0d2f7557178","019d9721-9e2a-7242-a257-bb21027d391b",["D",1776357459318],1,"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Nav } from \"./Nav.tsx\";\nimport { useRoute } from \"../hooks/useRoute.ts\";\nimport { WallPage } from \"../pages/WallPage.tsx\";\nimport { SubmitPage } from \"../pages/SubmitPage.tsx\";\nimport { AdminPage } from \"../pages/AdminPage.tsx\";\n\nexport function App() {\n const { path, navigate } = useRoute();\n\n let page;\n if (path === \"/submit\") {\n page = ;\n } else if (path === \"/admin\") {\n page = ;\n } else {\n page = ;\n }\n\n return (\n

\n );\n}\n",[119,142,133],"029dd54ce77913ca59c60dddc4540e1e39226538b8ad3ae4d9d75fd476cab30c","components","5d7e5e30-3996-11f1-bbdd-42b51c65c3df","6e585892-f52b-11ef-a8e1-569c3dd06744","69ed66bc-f52b-11ef-9dac-569c3dd06744",75,["D",1776345339930],5,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Counter } from \"./Counter.tsx\";\n\nexport function App() {\n return (\n

React + Hono Starter

\n \n

\n View source\n

\n );\n}\n",[119,142,133],"de0a7e5fc76c6fd6135aff964af1a5835e04e2758b23f3d0c7d9fabffe514df7","README.md",{"_32":162,"_13":152,"_81":163,"_83":-5,"_84":33,"_85":164,"_86":48,"_34":165,"_40":166,"_88":115,"_90":167,"_66":48,"_92":-5,"_93":-7,"_74":168,"_95":169},{"_32":155,"_13":152,"_81":156,"_83":-5,"_84":58,"_85":157,"_86":26,"_34":158,"_40":137,"_88":115,"_90":159,"_66":48,"_92":-5,"_93":-7,"_74":160,"_95":161},"cb6df4c0-39b2-11f1-bce1-42b51c65c3df","019d9721-9e2a-7242-a257-ce28489f7d98",21,["D",1776357550499],"# 🏆 Win Wall\n\nA wall of testimonials / wins. People can submit testimonials, an admin can approve or reject them, and approved ones appear on the public wall.\n\n## Pages\n\n- **`/`** — Public win wall showing approved testimonials\n- **`/submit`** — Form for anyone to submit a testimonial\n- **`/admin`** — Admin panel to approve, reject, or delete testimonials\n\n## Architecture\n\n```mermaid\ngraph TD\n A[index.ts - Hono Server] --> B[API Routes]\n A --> C[Frontend SPA]\n B --> D[database/queries.ts]\n D --> E[(SQLite)]\n C --> F[WallPage]\n C --> G[SubmitPage]\n C --> H[AdminPage]\n F --> I[TestimonialCard]\n H --> J[AdminCard]\n```\n\n## Project Structure\n\n```\nindex.ts — Hono HTTP server (entrypoint)\napi/\n testimonials.ts — REST API routes\ndatabase/\n queries.ts — SQLite query functions\nshared/\n types.ts — TypeScript types shared between frontend & backend\nfrontend/\n index.html — HTML shell\n index.tsx — React entry point\n api.ts — Client-side API helpers\n hooks/\n useRoute.ts — Simple client-side router hook\n components/\n App.tsx — Root component with routing\n Nav.tsx — Navigation bar\n TestimonialCard.tsx — Card for the public wall\n AdminCard.tsx — Card with approve/reject/delete actions\n pages/\n WallPage.tsx — Public testimonials wall\n SubmitPage.tsx — Submission form\n AdminPage.tsx — Admin management panel\n```\n",[152],"16564ce13cc07e2cbe94cc03125cb1f484577a19098338c9436f3dac779da82d","1a3cc642-3997-11f1-a3f8-42b51c65c3df","a50c3760-f53e-11ef-bd6d-569c3dd06744",87,["D",1776345656810],30,"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types",[152],"8094bd638fc012f5239882eebeb86eee1944c60d49719e6e20139500b7aaf24e",{"_74":324,"_76":-7,"_78":325},{"_74":313,"_76":-7,"_78":314},{"_74":308,"_76":-7,"_78":309},{"_74":298,"_76":-7,"_78":299},{"_74":288,"_76":-7,"_78":289},{"_74":278,"_76":-7,"_78":279},{"_74":268,"_76":-7,"_78":269},{"_74":258,"_76":-7,"_78":259},{"_74":253,"_76":-7,"_78":254},{"_74":241,"_76":-7,"_78":242},{"_74":235,"_76":-7,"_78":236},{"_74":226,"_76":-7,"_78":227},{"_74":216,"_76":-7,"_78":217},{"_74":204,"_76":-7,"_78":205},{"_74":198,"_76":-7,"_78":199},{"_74":186,"_76":-7,"_78":187},"shared/types.ts",{"_32":188,"_13":189,"_81":190,"_83":191,"_84":58,"_85":192,"_86":26,"_34":193,"_40":194,"_88":138,"_90":195,"_66":48,"_92":-5,"_93":-7,"_74":196,"_95":197},"6c7dc35a-39b2-11f1-a6f1-42b51c65c3df","types.ts","6c7dc40e-39b2-11f1-a6f1-42b51c65c3df","692dbf16-39b2-11f1-99b3-42b51c65c3df",4,["D",1776357391208],0,"export interface Testimonial {\n id: number;\n author_name: string;\n content: string;\n status: \"pending\" | \"approved\" | \"rejected\";\n created_at: string;\n approved_at: string | null;\n}\n\nexport interface SubmitTestimonialRequest {\n author_name: string;\n content: string;\n}\n",[198,189],"58ac024f1ab08e34063b94ccccb92b1491c0f56327a6a458bbe8750af563333b","shared",{"_32":200,"_13":198,"_81":191,"_83":-5,"_84":58,"_85":114,"_86":26,"_34":201,"_40":194,"_88":202,"_90":-5,"_66":48,"_92":-5,"_93":-7,"_74":203,"_95":-5},"692dbe62-39b2-11f1-99b3-42b51c65c3df",["D",1776357385665],"directory",[198],"frontend/pages/WallPage.tsx",{"_32":206,"_13":207,"_81":208,"_83":209,"_84":58,"_85":210,"_86":26,"_34":211,"_40":194,"_88":138,"_90":212,"_66":48,"_92":-5,"_93":-7,"_74":213,"_95":214},"93564c68-39b2-11f1-bce1-42b51c65c3df","WallPage.tsx","93564d4e-39b2-11f1-bce1-42b51c65c3df","808386c8-39b2-11f1-ad0c-42b51c65c3df",14,["D",1776357456398],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { fetchApproved } from \"../api.ts\";\nimport { TestimonialCard } from \"../components/TestimonialCard.tsx\";\nimport type { Testimonial } from \"../../shared/types.ts\";\n\nexport function WallPage() {\n const [testimonials, setTestimonials] = useState([]);\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n fetchApproved()\n .then(setTestimonials)\n .finally(() => setLoading(false));\n }, []);\n\n return (\n

🏆 Win Wall

Real wins from real people

\n\n {loading ? (\n

\n ) : testimonials.length === 0 ? (\n

No testimonials yet.

Be the first to share a win!

\n ) : (\n

\n {testimonials.map((t) => (\n \n ))}\n

\n )}\n

\n );\n}\n",[119,215,207],"c3d4132f6a7ebc65a5ab07e6a46d361cd273c2fc48c3cec3168922ed1e138156","pages","frontend/pages/SubmitPage.tsx",{"_32":218,"_13":219,"_81":220,"_83":209,"_84":58,"_85":221,"_86":26,"_34":222,"_40":194,"_88":138,"_90":223,"_66":48,"_92":-5,"_93":-7,"_74":224,"_95":225},"a03634ac-39b2-11f1-9973-42b51c65c3df","SubmitPage.tsx","a0363556-39b2-11f1-9973-42b51c65c3df",16,["D",1776357477978],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { submitTestimonial } from \"../api.ts\";\n\ninterface Props {\n onNavigate: (path: string) => void;\n}\n\nexport function SubmitPage({ onNavigate }: Props) {\n const [authorName, setAuthorName] = useState(\"\");\n const [content, setContent] = useState(\"\");\n const [submitting, setSubmitting] = useState(false);\n const [success, setSuccess] = useState(false);\n const [error, setError] = useState(\"\");\n\n const charCount = content.length;\n const maxChars = 500;\n\n async function handleSubmit(e: Event) {\n e.preventDefault();\n setError(\"\");\n setSubmitting(true);\n\n try {\n await submitTestimonial({ author_name: authorName, content });\n setSuccess(true);\n setAuthorName(\"\");\n setContent(\"\");\n } catch (err: any) {\n setError(err.message);\n } finally {\n setSubmitting(false);\n }\n }\n\n if (success) {\n return (\n

🎉

Thanks for sharing!

Your testimonial is pending review and will appear on the wall once approved.

\n setSuccess(false)}\n class=\"px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors text-sm font-medium\"\n >\n Submit another\n \n onNavigate(\"/\")}\n class=\"px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors text-sm font-medium\"\n >\n View the wall\n \n

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

✍️ Share a Win

Tell us about something great that happened

\n\n

\n Your name\n setAuthorName(e.target.value)}\n placeholder=\"Jane Doe\"\n required\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent\"\n />\n

\n\n

\n Your win\n setContent(e.target.value)}\n placeholder=\"Tell us what happened...\"\n required\n rows={4}\n maxLength={maxChars}\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent resize-none\"\n />\n

maxChars * 0.9 ? \"text-orange-500\" : \"text-gray-400\"}`}>\n {charCount}/{maxChars}\n

\n\n {error && (\n

{error}

\n )}\n\n \n {submitting ? \"Submitting...\" : \"Submit Testimonial\"}\n \n \n

\n );\n}\n",[119,215,219],"e911f2d8afd332d7ba20dcc52ee5eaacdae0f75f98ec8b9891e515c68cb58191","frontend/pages/AdminPage.tsx",{"_32":228,"_13":229,"_81":230,"_83":209,"_84":58,"_85":20,"_86":26,"_34":231,"_40":137,"_88":138,"_90":232,"_66":48,"_92":-5,"_93":-7,"_74":233,"_95":234},"a12681cc-39b3-11f1-82d2-42b51c65c3df","AdminPage.tsx","ac8c9b38-39b2-11f1-9525-42b51c65c3df",["D",1776357909064],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport {\n fetchAll,\n fetchAuthMe,\n approveTestimonial,\n rejectTestimonial,\n deleteTestimonial,\n} from \"../api.ts\";\nimport { AdminCard } from \"../components/AdminCard.tsx\";\nimport { LoginWithGoogleButton } from \"https://esm.town/v/stevekrouse/LoginWithGoogleButton\";\nimport type { Testimonial } from \"../../shared/types.ts\";\n\ntype Filter = \"all\" | \"pending\" | \"approved\" | \"rejected\";\n\nexport function AdminPage() {\n const [authState, setAuthState] = useState<{\n loading: boolean;\n email: string | null;\n authorized: boolean;\n }>({ loading: true, email: null, authorized: false });\n\n const [testimonials, setTestimonials] = useState([]);\n const [loading, setLoading] = useState(true);\n const [filter, setFilter] = useState(\"pending\");\n\n useEffect(() => {\n fetchAuthMe().then((data) => {\n setAuthState({ loading: false, email: data.email, authorized: data.authorized });\n });\n }, []);\n\n function loadTestimonials() {\n setLoading(true);\n fetchAll()\n .then(setTestimonials)\n .finally(() => setLoading(false));\n }\n\n useEffect(() => {\n if (authState.authorized) {\n loadTestimonials();\n }\n }, [authState.authorized]);\n\n async function handleApprove(id: number) {\n const updated = await approveTestimonial(id);\n setTestimonials((prev) => prev.map((t) => (t.id === id ? updated : t)));\n }\n\n async function handleReject(id: number) {\n const updated = await rejectTestimonial(id);\n setTestimonials((prev) => prev.map((t) => (t.id === id ? updated : t)));\n }\n\n async function handleDelete(id: number) {\n await deleteTestimonial(id);\n setTestimonials((prev) => prev.filter((t) => t.id !== id));\n }\n\n // Loading auth state\n if (authState.loading) {\n return

;\n }\n\n // Not logged in — show Google login button\n if (!authState.email) {\n return (\n

🔒 Admin

\n \n

\n via{\" \"}\n \n LastLogin\n \n

\n );\n }\n\n // Logged in but not authorized\n if (!authState.authorized) {\n return (\n

🚫 Access Denied

\n Signed in as {authState.email}\n

You don't have permission to access this page.

\n \n Sign out\n \n

\n );\n }\n\n // Authorized — show admin panel\n const filtered = filter === \"all\" ? testimonials : testimonials.filter((t) => t.status === filter);\n\n const counts = {\n all: testimonials.length,\n pending: testimonials.filter((t) => t.status === \"pending\").length,\n approved: testimonials.filter((t) => t.status === \"approved\").length,\n rejected: testimonials.filter((t) => t.status === \"rejected\").length,\n };\n\n const filters: { key: Filter; label: string }[] = [\n { key: \"pending\", label: `Pending (${counts.pending})` },\n { key: \"approved\", label: `Approved (${counts.approved})` },\n { key: \"rejected\", label: `Rejected (${counts.rejected})` },\n { key: \"all\", label: `All (${counts.all})` },\n ];\n\n return (\n

🔒 Admin

\n Signed in as {authState.email}\n {\" · \"}\n Sign out\n

\n\n

\n {filters.map((f) => (\n setFilter(f.key)}\n class={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${\n filter === f.key\n ? \"bg-indigo-100 text-indigo-700\"\n : \"bg-gray-100 text-gray-600 hover:bg-gray-200\"\n }`}\n >\n {f.label}\n \n ))}\n

\n\n {loading ? (\n

\n ) : filtered.length === 0 ? (\n

No {filter === \"all\" ? \"\" : filter} testimonials

\n ) : (\n

\n {filtered.map((t) => (\n \n ))}\n

\n )}\n

\n );\n}\n",[119,215,229],"450fe2a4f7a9bc94d279907a0a29d6c8eaf254ec4af9d535ce0470448795e195","frontend/pages",{"_32":237,"_13":215,"_81":209,"_83":111,"_84":58,"_85":238,"_86":26,"_34":239,"_40":194,"_88":202,"_90":-5,"_66":48,"_92":-5,"_93":-7,"_74":240,"_95":-5},"80838628-39b2-11f1-ad0c-42b51c65c3df",9,["D",1776357424788],[119,215],"frontend/hooks/useRoute.ts",{"_32":243,"_13":244,"_81":245,"_83":246,"_84":58,"_85":247,"_86":26,"_34":248,"_40":194,"_88":138,"_90":249,"_66":48,"_92":-5,"_93":-7,"_74":250,"_95":251},"8e5e9710-39b2-11f1-bce1-42b51c65c3df","useRoute.ts","8e5e97b0-39b2-11f1-bce1-42b51c65c3df","154fda2d-9941-49f1-990f-5f8a0c9a6fd4",13,["D",1776357448062],"import { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\n\nexport function useRoute() {\n const [path, setPath] = useState(window.location.pathname);\n\n useEffect(() => {\n const onPop = () => setPath(window.location.pathname);\n window.addEventListener(\"popstate\", onPop);\n return () => window.removeEventListener(\"popstate\", onPop);\n }, []);\n\n const navigate = useCallback((to: string) => {\n window.history.pushState(null, \"\", to);\n setPath(to);\n }, []);\n\n return { path, navigate };\n}\n",[119,252,244],"32e48491de75e9e316543962488f2d34408e2e95dc3c6a719412e95b5591c60c","hooks","frontend/hooks",{"_32":255,"_13":252,"_81":246,"_83":111,"_84":58,"_85":247,"_86":26,"_34":256,"_40":194,"_88":202,"_90":-5,"_66":48,"_92":-5,"_93":-7,"_74":257,"_95":-5},"8e5ea41c-39b2-11f1-bce1-42b51c65c3df",["D",1776357448062],[119,252],"frontend/components/TestimonialCard.tsx",{"_32":260,"_13":261,"_81":262,"_83":135,"_84":58,"_85":263,"_86":26,"_34":264,"_40":194,"_88":138,"_90":265,"_66":48,"_92":-5,"_93":-7,"_74":266,"_95":267},"87e3d5bc-39b2-11f1-afd0-42b51c65c3df","TestimonialCard.tsx","87e3d670-39b2-11f1-afd0-42b51c65c3df",11,["D",1776357437191],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { Testimonial } from \"../../shared/types.ts\";\n\ninterface Props {\n testimonial: Testimonial;\n}\n\nexport function TestimonialCard({ testimonial }: Props) {\n const date = new Date(testimonial.created_at).toLocaleDateString(\"en-US\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n });\n\n return (\n

\"{testimonial.content}\"

\n {testimonial.author_name}\n {date}\n

\n );\n}\n",[119,142,261],"09e7962ffaf6939f85be89ab69716e53adca0647e8efe0f466739ec44256c5b6","frontend/components/Nav.tsx",{"_32":270,"_13":271,"_81":272,"_83":135,"_84":58,"_85":273,"_86":26,"_34":274,"_40":194,"_88":138,"_90":275,"_66":48,"_92":-5,"_93":-7,"_74":276,"_95":277},"8d072364-39b2-11f1-a6f1-42b51c65c3df","Nav.tsx","8d07242c-39b2-11f1-a6f1-42b51c65c3df",12,["D",1776357445813],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface Props {\n currentPath: string;\n onNavigate: (path: string) => void;\n}\n\nexport function Nav({ currentPath, onNavigate }: Props) {\n const links = [\n { path: \"/\", label: \"🏆 Win Wall\" },\n { path: \"/submit\", label: \"✍️ Submit\" },\n { path: \"/admin\", label: \"🔒 Admin\" },\n ];\n\n return (\n

\n {links.map((link) => (\n {\n e.preventDefault();\n onNavigate(link.path);\n }}\n class={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${\n currentPath === link.path\n ? \"bg-indigo-50 text-indigo-700\"\n : \"text-gray-600 hover:bg-gray-50 hover:text-gray-900\"\n }`}\n >\n {link.label}\n \n ))}\n

\n \n view source\n \n

\n );\n}\n",[119,142,271],"a84fec07f4740956f5b007cec2709d00f523e22e1346b393564b6c5810cebeaf","frontend/components/AdminCard.tsx",{"_32":280,"_13":281,"_81":282,"_83":135,"_84":58,"_85":283,"_86":26,"_34":284,"_40":194,"_88":138,"_90":285,"_66":48,"_92":-5,"_93":-7,"_74":286,"_95":287},"a4999836-39b2-11f1-bce1-42b51c65c3df","AdminCard.tsx","a4999926-39b2-11f1-bce1-42b51c65c3df",17,["D",1776357485289],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { Testimonial } from \"../../shared/types.ts\";\n\ninterface Props {\n testimonial: Testimonial;\n onApprove: (id: number) => void;\n onReject: (id: number) => void;\n onDelete: (id: number) => void;\n}\n\nconst statusColors: Record = {\n pending: \"bg-yellow-100 text-yellow-800\",\n approved: \"bg-green-100 text-green-800\",\n rejected: \"bg-red-100 text-red-800\",\n};\n\nexport function AdminCard({ testimonial, onApprove, onReject, onDelete }: Props) {\n const date = new Date(testimonial.created_at).toLocaleDateString(\"en-US\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n hour: \"numeric\",\n minute: \"2-digit\",\n });\n\n return (\n

\n {testimonial.author_name}\n \n {testimonial.status}\n \n

\n\n

\"{testimonial.content}\"

\n\n

\n {date}\n

\n {testimonial.status !== \"approved\" && (\n onApprove(testimonial.id)}\n class=\"px-3 py-1 text-xs font-medium bg-green-50 text-green-700 rounded-lg hover:bg-green-100 transition-colors\"\n >\n ✓ Approve\n \n )}\n {testimonial.status !== \"rejected\" && (\n onReject(testimonial.id)}\n class=\"px-3 py-1 text-xs font-medium bg-orange-50 text-orange-700 rounded-lg hover:bg-orange-100 transition-colors\"\n >\n ✗ Reject\n \n )}\n onDelete(testimonial.id)}\n class=\"px-3 py-1 text-xs font-medium bg-red-50 text-red-700 rounded-lg hover:bg-red-100 transition-colors\"\n >\n 🗑 Delete\n \n

\n );\n}\n",[119,142,281],"efbbe43e07c175d83dca6009a219ccf497a4510c7abd653dd6b350e692820c1e","frontend/api.ts",{"_32":290,"_13":291,"_81":292,"_83":111,"_84":58,"_85":293,"_86":26,"_34":294,"_40":137,"_88":138,"_90":295,"_66":48,"_92":-5,"_93":-7,"_74":296,"_95":297},"93fa841c-39b3-11f1-86dc-42b51c65c3df","api.ts","862b0f6a-39b2-11f1-bce1-42b51c65c3df",23,["D",1776357886966],"import type { Testimonial, SubmitTestimonialRequest } from \"../shared/types.ts\";\n\nexport async function fetchAuthMe(): Promise<{ email: string | null; authorized: boolean }> {\n const res = await fetch(\"/api/auth/me\");\n return res.json();\n}\n\nexport async function fetchApproved(): Promise {\n const res = await fetch(\"/api/testimonials/approved\");\n return res.json();\n}\n\nexport async function fetchAll(): Promise {\n const res = await fetch(\"/api/testimonials/all\");\n return res.json();\n}\n\nexport async function fetchPending(): Promise {\n const res = await fetch(\"/api/testimonials/pending\");\n return res.json();\n}\n\nexport async function submitTestimonial(data: SubmitTestimonialRequest): Promise {\n const res = await fetch(\"/api/testimonials\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(data),\n });\n if (!res.ok) {\n const err = await res.json();\n throw new Error(err.error || \"Failed to submit\");\n }\n return res.json();\n}\n\nexport async function approveTestimonial(id: number): Promise {\n const res = await fetch(`/api/testimonials/${id}/approve`, { method: \"POST\" });\n return res.json();\n}\n\nexport async function rejectTestimonial(id: number): Promise {\n const res = await fetch(`/api/testimonials/${id}/reject`, { method: \"POST\" });\n return res.json();\n}\n\nexport async function deleteTestimonial(id: number): Promise {\n await fetch(`/api/testimonials/${id}`, { method: \"DELETE\" });\n}\n",[119,291],"7f405e6416d15560e1432564c16326a53ff1cf2586516661055b7cd4890b8e05","database/queries.ts",{"_32":300,"_13":301,"_81":302,"_83":303,"_84":58,"_85":148,"_86":26,"_34":304,"_40":194,"_88":138,"_90":305,"_66":48,"_92":-5,"_93":-7,"_74":306,"_95":307},"6fd727ee-39b2-11f1-a6f1-42b51c65c3df","queries.ts","6fd728c0-39b2-11f1-a6f1-42b51c65c3df","696bed18-39b2-11f1-99b3-42b51c65c3df",["D",1776357396838],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport type { Testimonial } from \"../shared/types.ts\";\n\nexport async function getApprovedTestimonials(): Promise {\n const result = await sqlite.execute(\n \"SELECT * FROM testimonials WHERE status = 'approved' ORDER BY approved_at DESC\",\n );\n return result.rows as unknown as Testimonial[];\n}\n\nexport async function getAllTestimonials(): Promise {\n const result = await sqlite.execute(\n \"SELECT * FROM testimonials ORDER BY created_at DESC\",\n );\n return result.rows as unknown as Testimonial[];\n}\n\nexport async function getPendingTestimonials(): Promise {\n const result = await sqlite.execute(\n \"SELECT * FROM testimonials WHERE status = 'pending' ORDER BY created_at DESC\",\n );\n return result.rows as unknown as Testimonial[];\n}\n\nexport async function createTestimonial(authorName: string, content: string): Promise {\n const result = await sqlite.execute({\n sql: \"INSERT INTO testimonials (author_name, content) VALUES (?, ?) RETURNING *\",\n args: [authorName, content],\n });\n return result.rows[0] as unknown as Testimonial;\n}\n\nexport async function approveTestimonial(id: number): Promise {\n const result = await sqlite.execute({\n sql: \"UPDATE testimonials SET status = 'approved', approved_at = datetime('now') WHERE id = ? RETURNING *\",\n args: [id],\n });\n return (result.rows[0] as unknown as Testimonial) ?? null;\n}\n\nexport async function rejectTestimonial(id: number): Promise {\n const result = await sqlite.execute({\n sql: \"UPDATE testimonials SET status = 'rejected' WHERE id = ? RETURNING *\",\n args: [id],\n });\n return (result.rows[0] as unknown as Testimonial) ?? null;\n}\n\nexport async function deleteTestimonial(id: number): Promise {\n const result = await sqlite.execute({\n sql: \"DELETE FROM testimonials WHERE id = ?\",\n args: [id],\n });\n return result.rowsAffected > 0;\n}\n",[308,301],"562b4b62a669155abe905e9917c861058ef36db4ef84935e78dca8986fb22729","database",{"_32":310,"_13":308,"_81":303,"_83":-5,"_84":58,"_85":22,"_86":26,"_34":311,"_40":194,"_88":202,"_90":-5,"_66":48,"_92":-5,"_93":-7,"_74":312,"_95":-5},"696bec5a-39b2-11f1-99b3-42b51c65c3df",["D",1776357386070],[308],"api/testimonials.ts",{"_32":315,"_13":316,"_81":317,"_83":318,"_84":58,"_85":319,"_86":26,"_34":320,"_40":194,"_88":138,"_90":321,"_66":48,"_92":-5,"_93":-7,"_74":322,"_95":323},"790afd0e-39b2-11f1-9973-42b51c65c3df","testimonials.ts","790afdf4-39b2-11f1-9973-42b51c65c3df","733b942e-39b2-11f1-a6f1-42b51c65c3df",7,["D",1776357412276],"import { Hono } from \"npm:hono\";\nimport {\n getApprovedTestimonials,\n getAllTestimonials,\n getPendingTestimonials,\n createTestimonial,\n approveTestimonial,\n rejectTestimonial,\n deleteTestimonial,\n} from \"../database/queries.ts\";\n\nconst api = new Hono();\n\n// Public: get approved testimonials for the wall\napi.get(\"/approved\", async (c) => {\n const testimonials = await getApprovedTestimonials();\n return c.json(testimonials);\n});\n\n// Admin: get all testimonials\napi.get(\"/all\", async (c) => {\n const testimonials = await getAllTestimonials();\n return c.json(testimonials);\n});\n\n// Admin: get pending testimonials\napi.get(\"/pending\", async (c) => {\n const testimonials = await getPendingTestimonials();\n return c.json(testimonials);\n});\n\n// Public: submit a new testimonial\napi.post(\"/\", async (c) => {\n const body = await c.req.json();\n const { author_name, content } = body;\n\n if (!author_name?.trim() || !content?.trim()) {\n return c.json({ error: \"Name and testimonial text are required\" }, 400);\n }\n\n if (content.trim().length > 500) {\n return c.json({ error: \"Testimonial must be 500 characters or fewer\" }, 400);\n }\n\n const testimonial = await createTestimonial(author_name.trim(), content.trim());\n return c.json(testimonial, 201);\n});\n\n// Admin: approve a testimonial\napi.post(\"/:id/approve\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n const testimonial = await approveTestimonial(id);\n if (!testimonial) return c.json({ error: \"Not found\" }, 404);\n return c.json(testimonial);\n});\n\n// Admin: reject a testimonial\napi.post(\"/:id/reject\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n const testimonial = await rejectTestimonial(id);\n if (!testimonial) return c.json({ error: \"Not found\" }, 404);\n return c.json(testimonial);\n});\n\n// Admin: delete a testimonial\napi.delete(\"/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n const deleted = await deleteTestimonial(id);\n if (!deleted) return c.json({ error: \"Not found\" }, 404);\n return c.json({ ok: true });\n});\n\nexport default api;\n",[324,316],"895f85a5f0d21cbc9fc0d0ec68f4cf5f12c65654aedfcf38cf3133205cd5d66b","api",{"_32":326,"_13":324,"_81":318,"_83":-5,"_84":58,"_85":327,"_86":26,"_34":328,"_40":194,"_88":202,"_90":-5,"_66":48,"_92":-5,"_93":-7,"_74":329,"_95":-5},"733b9316-39b2-11f1-a6f1-42b51c65c3df",6,["D",1776357402531],[324],["D",1776357055926],"legacyEnvVars","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","userId","f82d7dbb-2899-430f-8e34-4c8688c5bdad","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019d9718-b2f5-70df-aa7f-b4e7ee91e025","tursoName","a4a85c0039b111f184e842b51c65c3df","tursoHostname","a4a85c0039b111f184e842b51c65c3df-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789506093912],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_371":367},"org",{"_11":12,"_365":-5,"_366":367,"_336":-5,"_368":369,"_370":26},"branch","displayName","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/b87e7fbf-eb13-44a9-847a-14d2be1c5a00/square512?exp=1789538399&sig=516550fcae4d43d3d7ac0526e532550dc99d17a9d81bd138ec4e4fd722551ee4","tier","business","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":59,"_13":14,"_34":522,"_46":-5,"_331":48,"_49":50,"_332":50,"_333":334,"_335":-5,"_336":337,"_338":82,"_339":26,"_340":-5,"_341":-5,"_342":194,"_53":343,"_344":345,"_346":347,"_348":523,"_350":-5,"_351":352,"_353":352,"_354":355,"_356":355,"_357":355,"_358":352,"_359":352,"_360":524,"_362":525,"_364":526,"_47":48},"tree",[429,431,433,450,452,453],"files",[429,430,431,432,433,434,435,436,437,438,439,440,441,442,443,444,445,446,447,448,449,450,451,452,453],"counts",{"_419":194,"_420":137,"_421":194,"_422":423,"_424":425},"contents",[400,401,402,403,404,405],"upstreamProject",{"_32":39,"_13":56,"_333":334,"_335":397,"_49":50,"_360":398},"upstreamBranch",{"_32":33,"_34":395,"_36":396,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789538399&sig=d91a7ef87f90c894c3b8d0b9fb95840fd02478ac34a646812058e001671e6ecb",{"_11":52,"_371":399},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789538399&sig=ed57122c136965e1015088c1b79a18d1d4e6250d1eb81abacde1e740f48894e7",{"_32":326,"_13":324,"_81":318,"_83":-5,"_84":58,"_85":327,"_86":26,"_34":417,"_40":194,"_88":202,"_90":-5,"_66":48,"_92":-5,"_74":418},{"_32":310,"_13":308,"_81":303,"_83":-5,"_84":58,"_85":22,"_86":26,"_34":415,"_40":194,"_88":202,"_90":-5,"_66":48,"_92":-5,"_74":416},{"_32":412,"_13":119,"_81":111,"_83":-5,"_84":58,"_85":137,"_86":26,"_34":413,"_40":194,"_88":202,"_90":-5,"_66":48,"_92":-5,"_74":414},{"_32":200,"_13":198,"_81":191,"_83":-5,"_84":58,"_85":114,"_86":26,"_34":410,"_40":194,"_88":202,"_90":-5,"_66":48,"_92":-5,"_74":411},{"_32":155,"_13":152,"_81":156,"_83":-5,"_84":58,"_85":157,"_86":26,"_34":408,"_40":137,"_88":115,"_90":159,"_66":48,"_92":-5,"_74":409},{"_32":80,"_13":75,"_81":82,"_83":-5,"_84":58,"_85":57,"_86":26,"_34":406,"_40":22,"_88":89,"_90":91,"_66":48,"_92":-5,"_74":407},["D",1776358078298],[75],["D",1776357550499],[152],["D",1776357385665],[198],"a4d9f774-39b1-11f1-84e8-42b51c65c3df",["D",1776357055926],[119],["D",1776357386070],[308],["D",1776357402531],[324],"pulls","branches","forks","envVars",{"_426":194,"_428":194},"connections",{"_426":194,"_427":194},"count","unfilledCount","emptyCount",{"_32":326,"_13":324,"_81":318,"_83":-5,"_84":58,"_85":327,"_86":26,"_34":328,"_40":194,"_88":202,"_90":-5,"_66":48,"_92":-5,"_93":520,"_74":521},{"_32":315,"_13":316,"_81":317,"_83":318,"_84":58,"_85":319,"_86":26,"_34":320,"_40":194,"_88":138,"_90":321,"_66":48,"_92":-5,"_93":518,"_74":519},{"_32":310,"_13":308,"_81":303,"_83":-5,"_84":58,"_85":22,"_86":26,"_34":311,"_40":194,"_88":202,"_90":-5,"_66":48,"_92":-5,"_93":516,"_74":517},{"_32":300,"_13":301,"_81":302,"_83":303,"_84":58,"_85":148,"_86":26,"_34":304,"_40":194,"_88":138,"_90":305,"_66":48,"_92":-5,"_93":514,"_74":515},{"_32":412,"_13":119,"_81":111,"_83":-5,"_84":58,"_85":137,"_86":26,"_34":511,"_40":194,"_88":202,"_90":-5,"_66":48,"_92":-5,"_93":512,"_74":513},{"_32":507,"_13":142,"_81":135,"_83":111,"_84":58,"_85":137,"_86":26,"_34":508,"_40":194,"_88":202,"_90":-5,"_66":48,"_92":-5,"_93":509,"_74":510},{"_32":280,"_13":281,"_81":282,"_83":135,"_84":58,"_85":283,"_86":26,"_34":284,"_40":194,"_88":138,"_90":285,"_66":48,"_92":-5,"_93":505,"_74":506},{"_32":132,"_13":133,"_81":134,"_83":135,"_84":58,"_85":101,"_86":26,"_34":136,"_40":137,"_88":138,"_90":139,"_66":48,"_92":-5,"_93":503,"_74":504},{"_32":496,"_13":497,"_81":498,"_83":135,"_84":58,"_85":137,"_86":26,"_34":499,"_40":194,"_88":138,"_90":500,"_66":48,"_92":-5,"_93":501,"_74":502},{"_32":270,"_13":271,"_81":272,"_83":135,"_84":58,"_85":273,"_86":26,"_34":274,"_40":194,"_88":138,"_90":275,"_66":48,"_92":-5,"_93":494,"_74":495},{"_32":260,"_13":261,"_81":262,"_83":135,"_84":58,"_85":263,"_86":26,"_34":264,"_40":194,"_88":138,"_90":265,"_66":48,"_92":-5,"_93":492,"_74":493},{"_32":255,"_13":252,"_81":246,"_83":111,"_84":58,"_85":247,"_86":26,"_34":256,"_40":194,"_88":202,"_90":-5,"_66":48,"_92":-5,"_93":490,"_74":491},{"_32":243,"_13":244,"_81":245,"_83":246,"_84":58,"_85":247,"_86":26,"_34":248,"_40":194,"_88":138,"_90":249,"_66":48,"_92":-5,"_93":488,"_74":489},{"_32":237,"_13":215,"_81":209,"_83":111,"_84":58,"_85":238,"_86":26,"_34":239,"_40":194,"_88":202,"_90":-5,"_66":48,"_92":-5,"_93":486,"_74":487},{"_32":228,"_13":229,"_81":230,"_83":209,"_84":58,"_85":20,"_86":26,"_34":231,"_40":137,"_88":138,"_90":232,"_66":48,"_92":-5,"_93":484,"_74":485},{"_32":218,"_13":219,"_81":220,"_83":209,"_84":58,"_85":221,"_86":26,"_34":222,"_40":194,"_88":138,"_90":223,"_66":48,"_92":-5,"_93":482,"_74":483},{"_32":206,"_13":207,"_81":208,"_83":209,"_84":58,"_85":210,"_86":26,"_34":211,"_40":194,"_88":138,"_90":212,"_66":48,"_92":-5,"_93":480,"_74":481},{"_32":290,"_13":291,"_81":292,"_83":111,"_84":58,"_85":293,"_86":26,"_34":294,"_40":137,"_88":138,"_90":295,"_66":48,"_92":-5,"_93":478,"_74":479},{"_32":471,"_13":472,"_81":473,"_83":111,"_84":58,"_85":137,"_86":26,"_34":474,"_40":194,"_88":115,"_90":475,"_66":48,"_92":-5,"_93":476,"_74":477},{"_32":108,"_13":109,"_81":110,"_83":111,"_84":58,"_85":112,"_86":26,"_34":113,"_40":114,"_88":115,"_90":116,"_66":48,"_92":-5,"_93":469,"_74":470},{"_32":462,"_13":463,"_81":464,"_83":111,"_84":58,"_85":137,"_86":26,"_34":465,"_40":194,"_88":138,"_90":466,"_66":48,"_92":-5,"_93":467,"_74":468},{"_32":200,"_13":198,"_81":191,"_83":-5,"_84":58,"_85":114,"_86":26,"_34":201,"_40":194,"_88":202,"_90":-5,"_66":48,"_92":-5,"_93":460,"_74":461},{"_32":188,"_13":189,"_81":190,"_83":191,"_84":58,"_85":192,"_86":26,"_34":193,"_40":194,"_88":138,"_90":195,"_66":48,"_92":-5,"_93":458,"_74":459},{"_32":155,"_13":152,"_81":156,"_83":-5,"_84":58,"_85":157,"_86":26,"_34":158,"_40":137,"_88":115,"_90":159,"_66":48,"_92":-5,"_93":456,"_74":457},{"_32":80,"_13":75,"_81":82,"_83":-5,"_84":58,"_85":57,"_86":26,"_34":87,"_40":22,"_88":89,"_90":91,"_66":48,"_92":-5,"_93":454,"_74":455},[],[75],[],[152],[],[198,189],[451],[198],"a4b605a8-39b1-11f1-84e8-42b51c65c3df","index.tsx","019d9721-9e2a-7242-a257-c737246aa74a",["D",1776357055926],"/** @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();",[],[119,463],[],[119,109],"a4b5f9c8-39b1-11f1-84e8-42b51c65c3df","favicon.svg","019d9721-9e2a-7242-a257-bf26622e28b1",["D",1776357055926],"\n",[],[119,472],[],[119,291],[],[119,215,207],[],[119,215,219],[],[119,215,229],[443,444,445],[119,215],[],[119,252,244],[441],[119,252],[],[119,142,261],[],[119,142,271],"a4b5ef46-39b1-11f1-84e8-42b51c65c3df","Counter.tsx","019d9721-9e2a-7242-a257-b503c0040a2c",["D",1776357055926],"/** @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",[],[119,142,497],[],[119,142,133],[],[119,142,281],"a4b5f70c-39b1-11f1-84e8-42b51c65c3df",["D",1776357055926],[435,436,437,438,439],[119,142],["D",1776357055926],[434,440,442,446,447,448,449],[119],[],[308,301],[432],[308],[],[324,316],[430],[324],["D",1776357055926],["D",1789506093912],{"_11":12,"_371":367},{"_11":12,"_365":-5,"_366":367,"_336":-5,"_368":369,"_370":26},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"ctx",{"_360":-5,"_392":560,"_561":562,"_563":564,"_565":48,"_566":48,"_567":48,"_568":26,"_569":-5,"_570":-7,"_571":-7,"_572":194,"_573":48,"_574":48,"_575":-5,"_576":48,"_577":48,"_578":48,"_579":-5},"ENV",{"_531":532,"_533":534,"_535":16,"_536":537,"_538":539,"_540":541,"_542":543,"_544":545,"_546":547,"_548":549,"_550":551,"_552":553,"_554":555,"_556":557,"_558":559},"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"]

Compare

Mergesaltmine/mainintotemplates/main

README.md+37-41

frontend/components/App.tsx+19-7

frontend/index.html+2-2

Hindex.ts+73-9

api

api/testimonials.ts+73-0

database

database/queries.ts+55-0

frontend/api.ts+48-0

frontend/components/AdminCard.tsx+66-0

frontend/components/Nav.tsx+42-0

frontend/components/TestimonialCard.tsx+24-0

frontend/hooks

frontend/hooks/useRoute.ts+18-0

frontend/pages

frontend/pages/AdminPage.tsx+165-0

frontend/pages/SubmitPage.tsx+110-0

frontend/pages/WallPage.tsx+40-0

shared

shared/types.ts+13-0