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

drag-to-reorder projects, tag filtering on the public view, and shareable project permalink pages

Type: project entry

Published: 2026-03-22

[Original page](<https://artlu.ai/project/drag-drop-tags-permalinks-artlu-ai-v2>)

[Browse this group](<https://artlu.ai/ai/groups/artlu.md>)

Parent project: artlu.ai

Recorded status: launched

Updated: 2026-05-20T19:37:39.331Z

Technologies: React, Vite, JavaScript, Firestore, Firebase, Netlify

Tags: artlu, dev tool

## Details

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

## Links

[Site or demo](<https://drag-drop-mockup.pages.dev/>)

[Repository](<https://github.com/artluai/artluai-tracker>)

## Related build notes

[learning to match, not approximate](<https://artlu.ai/ai/log/day-5-learning-to-match-not-approximate.md>)


Status and dates describe the published record, not a recent test of an external service. Missing details are not inferred. Public links do not imply an open-source licence or permission to reuse material.

[Directory](<https://artlu.ai/llms.txt>)