A personal, interactive dashboard for organizing your Val Town vals into collections. Built as a Val Town HTTP val with a React frontend.

Key idea: Remix (fork) this val to get your own private copy that runs under your account. It automatically sees your vals (via the Val Town SDK) and stores collections in your private SQLite database. No data sharing, no setup.

• View all your vals (fetched live via @valtown/sdk)
• Create named collections (persisted in your val's private SQLite)
• Add / remove vals from collections
• Click a collection in the sidebar to filter the main list to only the vals in that collection
• "Add more vals" section appears when viewing a specific collection (lists vals not yet in it)
• Optimistic UI updates for instant feedback (no full page reloads on add/remove)
• Fully server-rendered initial HTML shell + client-side React for interactivity
• Works with your real private data (no demo mode)

1. Find the original val on Val Town (search for dashboard-collections or visit the author's page).
2. Click Remix (or "Fork"). This creates a copy under your username.
3. Visit the remixed val's URL (it serves the dashboard at the root path).
4. The app will automatically load your vals and let you create/manage collections that are private to your account.

That's it! Everything runs in your Val Town context, so:

• Vals come from me.vals.list() (your private + public ones).
• Collections live in this val's SQLite (yours only).
• No login, no tokens, no shared data.

• Use the form in the sidebar (under "COLLECTIONS").
• Type a name and submit. The new collection appears immediately (optimistic) and is auto-selected.

• Click a collection in the sidebar → the grid filters to only its current members (with "Remove" buttons).
• Below the filtered list you'll see an "Add more vals" section with the rest of your vals (each with a "+ Add" button).
• Buttons use optimistic updates: the UI changes instantly, then syncs with your DB in the background.
• Click "All vals" to clear the filter and see everything.

• The sidebar always shows live counts.
• Cards link to the actual val on Val Town.
• Use /debug on the val for a raw dump of what the SDK returns (useful for troubleshooting).
• All mutations go through simple JSON APIs (/api/collections, /api/val-collections) so the data layer is easy to inspect or extend.

The val is a small multi-file project:

• index.ts – Hono HTTP handler. Serves the HTML shell, the React client at /client.js, and all /api/* endpoints. Also owns SDK + SQLite logic.
• Dashboard.tsx – Tiny HTML shell (CDNs + root div + script tag).
• client.ts – Exports the full client React app as a string (served as /client.js). This is where the interactive UI lives (sidebar filtering, forms, optimistic updates, card rendering, etc.).

vt clone <your-username>/dashboard-collections   # or the original
cd dashboard-collections
# edit files
vt push

• Every remix gets a fresh copy of the code + its own SQLite DB.
• Your remixed val can only ever see your vals and your collections.
• Feel free to customize the React UI in client.ts, add more API routes, improve the server rendering in the handler, etc.

• Backend: Val Town + Hono. Vals loaded via the official SDK (me.vals.list). Collections + membership live in std/sqlite (per-val, private to the account that owns the val).
• Frontend: React 18 (loaded via UMD CDN for zero-build). Talks to the same val's /api/* routes. State is managed client-side with optimistic updates for add/remove/create.
• Why this works per-user: When you remix, the val runs as you. The SDK and SQLite are scoped to the runner's identity.

Early design explorations are available at /prototypes on the val. These use completely fake data (no real vals are exposed) and demonstrate the three main concepts we explored:

• Tags (lightweight multi-label filtering)
• Sections (presentational grouping)
• Hybrid (sidebar collections + quick filters with filtering)

These were the original static HTML mocks before the live React version.

This is an exploration / study project (originally based on a saved copy of the Val Town dashboard UI). It is working (you can create collections and move vals around with a reasonable React UX) but "not perfect yet" – some polish, edge cases, and possible additional features are still open.

Contributions / remixes / experiments welcome!

• Original Val Town: https://www.val.town
• SDK docs: https://docs.val.town/reference/api/sdk/
• SQLite in Val Town: search for std/sqlite in the platform

Made with ❤️ for the Val Town community. Remix it and make it yours!