added on local at 2026-07-01 12:35:00
| 1 | <div class="page-header"><div><h1>Labels</h1><p class="subtitle">Cross-cutting tags for tasks. Any task can have any number of labels.</p></div></div> | |
| 2 | ||
| 3 | <div class="card" style="margin-bottom:20px;border-left:3px solid var(--col-accent)"> | |
| 4 | <div style="padding:16px 20px"> | |
| 5 | <div style="font-size:13px;font-weight:600;color:var(--col-text);margin-bottom:8px">What are labels for?</div> | |
| 6 | <p style="font-size:13px;color:var(--col-text-dim);line-height:1.6;margin:0 0 12px"> | |
| 7 | Labels are <strong>free-form tags</strong> you stick on tasks so you can filter, group, or report on them without changing the task's project, status, or assignee. Think of them as a flexible <em>second axis</em> of organization that cuts across everything — the only categorization in PTMatrix that's many-to-many. | |
| 8 | </p> | |
| 9 | <div style="font-size:13px;color:var(--col-text-dim);line-height:1.6;margin-bottom:8px"><strong>Common patterns:</strong></div> | |
| 10 | <ul style="font-size:13px;color:var(--col-text-dim);line-height:1.7;margin:0 0 14px;padding-left:22px"> | |
| 11 | <li><strong>Functional area</strong> — <code>backend</code>, <code>frontend</code>, <code>infra</code>, <code>design</code>, <code>copy</code>. Filter your board to "show me everything backend across all projects."</li> | |
| 12 | <li><strong>Release / version</strong> — <code>v2.0</code>, <code>Q3-launch</code>, <code>holiday-rollout</code>. Track which tasks belong to a release without spinning up a separate project.</li> | |
| 13 | <li><strong>Risk / blocker</strong> — <code>blocked</code>, <code>needs-review</code>, <code>customer-waiting</code>. Surfaces urgency in reports and filters.</li> | |
| 14 | <li><strong>Audience / customer</strong> — <code>enterprise</code>, <code>ACME-Corp</code>, <code>internal</code>. Use when a task has implications for a specific buyer or segment.</li> | |
| 15 | <li><strong>Tech / dependency</strong> — <code>stripe</code>, <code>postgres</code>, <code>3rd-party-api</code>. Quickly find every task touching a given system.</li> | |
| 16 | </ul> | |
| 17 | <div style="font-size:13px;color:var(--col-text-dim);line-height:1.6;margin-bottom:8px"><strong>How labels differ from the other categorization:</strong></div> | |
| 18 | <ul style="font-size:13px;color:var(--col-text-dim);line-height:1.7;margin:0;padding-left:22px"> | |
| 19 | <li><strong>Task Types</strong> (Bug / Feature / Chore / Epic) describe <em>what kind of thing</em> a task is — one per task, mutually exclusive.</li> | |
| 20 | <li><strong>Projects</strong> are the work-stream a task belongs to — one per task.</li> | |
| 21 | <li><strong>Departments</strong> assign work organizationally — one per task.</li> | |
| 22 | <li><strong>Labels</strong> stack freely — one task can carry "backend", "v2.0", and "stripe" all at once.</li> | |
| 23 | </ul> | |
| 24 | <p style="font-size:12px;color:var(--col-text-dim);line-height:1.6;margin:14px 0 0;font-style:italic"> | |
| 25 | Tip: start small. 5–10 labels covering your top filtering needs beats 50 labels nobody remembers to use. You can always add more. | |
| 26 | </p> | |
| 27 | </div> | |
| 28 | </div> | |
| 29 | ||
| 30 | <div class="row" style="gap:24px;flex-wrap:wrap"> | |
| 31 | <div class="col" style="min-width:280px;flex:2"> | |
| 32 | <div class="card"> | |
| 33 | <div class="card-header"><h3>Your labels</h3></div> | |
| 34 | [if:$has_labels] | |
| 35 | <div style="display:flex;flex-wrap:wrap;gap:8px"> | |
| 36 | [loop:@labels] | |
| 37 | <div style="display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:5px;border:1px solid var(--col-border);background:$loop1.color;color:#fff;font-size:12.5px;font-weight:500"> | |
| 38 | <span>$loop1.name</span> | |
| 39 | <span style="opacity:.7;font-size:11px">($loop1.used_n)</span> | |
| 40 | <form method="POST" style="margin:0"><input type="hidden" name="act" value="delete"><input type="hidden" name="id" value="$loop1.id"><button type="submit" style="background:transparent;border:0;color:#fff;cursor:pointer;padding:0 0 0 4px;font-size:14px" onclick="return confirm('Delete label?')">×</button></form> | |
| 41 | </div> | |
| 42 | [/loop] | |
| 43 | </div> | |
| 44 | [/if] | |
| 45 | [if:!$has_labels]<p class="text-dim">No labels yet.</p>[/if] | |
| 46 | </div> | |
| 47 | </div> | |
| 48 | <div class="col" style="min-width:240px;flex:1"> | |
| 49 | <div class="card"> | |
| 50 | <div class="card-header"><h3>Add a label</h3></div> | |
| 51 | <form method="POST"> | |
| 52 | <input type="hidden" name="act" value="create"> | |
| 53 | <div class="field"><label>Name *</label><input class="input" name="name" required placeholder="backend"></div> | |
| 54 | <div class="field"><label>Color</label><input class="input" type="color" name="color" value="#5aa9ff" style="height:38px;padding:2px"></div> | |
| 55 | <div class="flex-end"><button type="submit" class="btn btn-primary">Add label</button></div> | |
| 56 | </form> | |
| 57 | </div> | |
| 58 | </div> | |
| 59 | </div> |