feat: add tasks list recipe and small badge size variant

Add a shadcn-inspired tasks list recipe (src/recipes/tasks.cljc) that composes card, table, badge, button, form, and icon components into a full task management page with toolbar, data table, and pagination. Add :size :sm prop to the badge component for compact inline labels used in the tasks table. Small badges have tighter padding, smaller font, and full pill border-radius. Wire the tasks page into all three dev targets (hiccup, replicant, squint) with navigation and routing. Add small badge demos to the components overview in all targets.
2026-03-19 14:12:34 +01:00
parent 63e853b6ac
commit 293df10590
8 changed files with 473 additions and 2098 deletions
--- a/src/ui/recipe-tasks.css
+++ b/src/ui/recipe-tasks.css
@@ -0,0 +1,116 @@
+/* ── Tasks Recipe ─────────────────────────────────────────────────── */
+/* Styles for the Tasks List recipe (shadcn-inspired).               */
+
+.tasks-page {
+  max-width: 64rem;
+  margin: 0 auto;
+}
+
+.tasks-heading {
+  margin: 0;
+  font-size: var(--font-lg);
+  font-weight: 700;
+  letter-spacing: -0.025em;
+}
+
+/* ── Toolbar ─────────────────────────────────────────────────────── */
+
+.tasks-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--size-3);
+  margin-bottom: var(--size-4);
+}
+
+.tasks-toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: var(--size-2);
+  flex: 1;
+}
+
+.tasks-toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: var(--size-2);
+  flex-shrink: 0;
+}
+
+.tasks-search {
+  max-width: 16rem;
+}
+
+/* ── Table overrides ─────────────────────────────────────────────── */
+
+.tasks-table {
+  font-size: var(--font-sm);
+}
+
+.tasks-cell-checkbox {
+  width: var(--size-10);
+  padding-left: var(--size-3);
+  padding-right: 0;
+}
+
+.tasks-cell-id {
+  width: 6rem;
+  white-space: nowrap;
+  font-size: var(--font-xs);
+}
+
+.tasks-cell-label {
+  width: 8rem;
+  white-space: nowrap;
+}
+
+.tasks-cell-title {
+  white-space: nowrap;
+}
+
+.tasks-cell-status {
+  width: 8rem;
+}
+
+.tasks-cell-priority {
+  width: 6rem;
+}
+
+.tasks-cell-actions {
+  width: var(--size-10);
+  text-align: right;
+  padding-right: var(--size-3);
+}
+
+/* ── Status & Priority display ───────────────────────────────────── */
+
+.tasks-status,
+.tasks-priority {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--size-2);
+  font-size: var(--font-sm);
+  color: var(--fg-1);
+  white-space: nowrap;
+}
+
+/* ── Footer ──────────────────────────────────────────────────────── */
+
+.tasks-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: var(--size-4);
+}
+
+.tasks-footer-right {
+  display: flex;
+  align-items: center;
+  gap: var(--size-4);
+}
+
+.tasks-pagination {
+  display: flex;
+  align-items: center;
+  gap: var(--size-1);
+}