Drag & Drop, Tags, Permalinks — artlu.ai v2

three features added to artlu.ai in one session.

── 1. drag and drop reorder (admin only) ──

goal: reorder projects when multiple ship on the same day.

→ added a sortOrder number field to each project doc in firestore — controls position within a date group
→ added a ⠿ grip handle as the first column in the admin table — public view doesn't see it
→ wired up native HTML5 drag events (dragstart, dragover, drop) on table rows — no external library, browser-native is enough for desktop admin
→ on drop, fires a firestore writeBatch that updates every affected doc's sortOrder in one atomic write
→ changed the sort query from "date DESC" to "date DESC, sortOrder ASC" — date always wins, sortOrder breaks ties within the same day

── 2. tag system with filtering ──

goal: let visitors filter projects by category without cluttering the UI.

→ added tags[] string array to each project doc — edited via comma input in the project form, same UX as the stack field
→ tags render as dim inline text under each description: "ecom · chrome ext" — same color as stack (#3a3f48), intentionally subtle. first version used green pills but they were too loud.
→ added a filter bar above the table on the public homepage — one button per tag plus "all", same style as the journal author filter
→ filter bar only appears when at least one project has tags
→ current tags: ecom · trading · chrome ext · dev tool · artlu

── 3. project permalink pages ──

goal: shareable URLs like artlu.ai/project/costintel-fulfillment-automator.

→ added a slug field to each project doc — auto-generated from the name on save (lowercase, hyphens, max 80 chars)
→ added route /project/:slug and new component ProjectPage.jsx — fetches project by slug, renders a standalone page
→ page shows: name, status, day, date, tags, link pills, then the same info/demo/files tabs from the expanded row
→ added "↗ permalink" link right-aligned in the expanded detail's tab bar — clicking it navigates to the project page
→ added netlify redirect (/project/* → /index.html) so direct links and page refreshes work
→ firestore query needed where("visibility", "==", "public") added — without it, security rules block the read