defuss-shadcn / Application / Scaffolds / scaffold-issue-tracker
Issue Tracker
A Linear-style project tracker as a clickdummy - "Vector". Switch the issues to a board and drag a card to another column, right-click a row, open an issue and change its status, press C to create one, J / K to move, ⌘K for everything else. Every control is a shipped component. Part of the Application Scaffolds.
On this page (2)
§Issue tracker
The whole tracker in one source. Views and issue pages are URL fragments (#issues, #ENG-142…) shown with :target; the list ⇄ board switch, the scope chips and the status groups are CSS state (:has(), details); status and priority icons are drawn from inherited custom properties, so a status change is one attribute - a short script keeps the row, the card and the issue page in step.
§How it works
A page, not a component: it composes the library and keeps its own glue small.
- Shell - the Sidebar (collapsible, ⌘B, a drawer on narrow screens) beside an inset panel; workspace and account menus are Dropdowns.
- Views - Issues, My issues, Inbox, Cycles, Projects and every issue are sections with an id, shown with
:target: links, back and forward just work. - Issues - status groups are
<details>; the Toggle Group swaps the list for a board and the All / Active / Backlog chips filter both, through:has(). Cards move between columns with native drag and drop; rows and cards open a Context Menu on right-click. - Icons from state -
data-statusanddata-priorityset inherited custom properties; the status ring, pie and check and the priority bars are drawn from them. Changing a status is changing one attribute. - Issue pages - Selects edit status, priority and assignee (the activity feed records it), sub-issues are Checkboxes, comments use the Textarea group.
- Creating - C, the sidebar button, a column's + or the Command palette open a Dialog; a new issue is stamped from
<template>s into the list, the board and a new issue page, and a Toast confirms it. - Cycles and projects - a Radial Progress and stats recomputed from the issues, an SVG burn-up chart, Progress per assignee, a Table of projects with health Badges.
- Full screen - app-issue-tracker.html is generated from this page's example at build time.
Comments, ideas or improvements? Edit this page's source on GitHub