oier/collective-lists
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(detail): drop "ACTIVE LIST" / "TASK MANAGER" eyebrow; show status via pill + strikethrough

Browse Source 
Detail views (/lists/[id], /tasks/[id]) no longer show the editorial
uppercase label above the editable title. The title moves up into that
space for a cleaner top.

Status signaling on /lists/[id] (replaces the hardcoded "ACTIVE LIST"):
  - list.status === 'completed'  → title renders text-text-secondary + line-through
  - list.status === 'archived'   → muted pill next to the title
    (data-testid="list-status-pill", slate-200 bg)
  - list.status === 'active'     → no extra chrome, just the title

/tasks/[id] has no status on task_lists — just the label drop.

Verified: just test-all → exit 0, 233 green, 2 skipped.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Oier Bravo
2026-04-14 03:21:27 +02:00
parent 12b7b7443f
commit 73bc51e0ab
2 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
apps/web/src/routes/(app)/lists/[id]/+page.svelte
View File

@@ -672,19 +672,25 @@
<!-- Items --> <!-- Items -->
<div class="flex-1 overflow-y-auto pb-16 md:pb-6"> <div class="flex-1 overflow-y-auto pb-16 md:pb-6">
<!-- Inline rename title — matches /notes editor pattern. Autosaves after <!-- Inline rename title — matches /notes editor pattern. Autosaves after
NAME_SAVE_DEBOUNCE_MS of inactivity. --> NAME_SAVE_DEBOUNCE_MS of inactivity. Status signals: strikethrough
<div class="px-4 pt-4 pb-2 md:px-8 md:pt-6 md:pb-4"> on completed lists, muted pill next to the title for archived. -->
<p class="mb-1 text-[13px] font-semibold uppercase tracking-[0.05em] text-text-secondary"> <div class="flex items-center gap-2 px-4 pt-2 pb-2 md:px-8 md:pt-3 md:pb-4">
{m.list_status_active()}
</p>
<input <input
bind:value={listName} bind:value={listName}
oninput={scheduleNameSave} oninput={scheduleNameSave}
onblur={flushNameSave} onblur={flushNameSave}
placeholder={m.list_name_placeholder()} placeholder={m.list_name_placeholder()}
class="w-full bg-transparent text-[26px] md:text-[32px] font-semibold tracking-[-0.02em] text-text-primary placeholder:text-text-secondary focus:outline-none" class="min-w-0 flex-1 bg-transparent text-[26px] md:text-[32px] font-semibold tracking-[-0.02em] placeholder:text-text-secondary focus:outline-none {list?.status === 'completed' ? 'text-text-secondary line-through' : 'text-text-primary'}"
aria-label={m.list_name_placeholder()} aria-label={m.list_name_placeholder()}
/> />
{#if list?.status === 'archived'}
<span
data-testid="list-status-pill"
class="shrink-0 rounded-full bg-slate-200 px-2.5 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-text-secondary dark:bg-slate-800"
>
{m.list_status_archived()}
</span>
{/if}
</div> </div>
{#if uncheckedItems.length === 0 && checkedItems.length === 0} {#if uncheckedItems.length === 0 && checkedItems.length === 0}

5
apps/web/src/routes/(app)/tasks/[id]/+page.svelte
View File

@@ -233,10 +233,7 @@
<div class="flex-1 overflow-y-auto px-4 py-4 md:px-6"> <div class="flex-1 overflow-y-auto px-4 py-4 md:px-6">
<!-- Inline rename title input (autosave on idle) --> <!-- Inline rename title input (autosave on idle) -->
<div class="pt-2 pb-4 md:pt-4 md:pb-6"> <div class="pt-1 pb-4 md:pt-2 md:pb-6">
<p class="mb-1 text-[13px] font-semibold uppercase tracking-[0.05em] text-text-secondary">
{m.masthead_tasks_label()}
</p>
<input <input
bind:value={listName} bind:value={listName}
oninput={scheduleNameSave} oninput={scheduleNameSave}