diff --git a/apps/mana/apps/web/src/lib/modules/lasts/ListView.svelte b/apps/mana/apps/web/src/lib/modules/lasts/ListView.svelte index d64718c27..af586ee13 100644 --- a/apps/mana/apps/web/src/lib/modules/lasts/ListView.svelte +++ b/apps/mana/apps/web/src/lib/modules/lasts/ListView.svelte @@ -9,7 +9,25 @@ import { goto } from '$app/navigation'; import { _ } from 'svelte-i18n'; import { ContextMenu, type ContextMenuItem } from '@mana/shared-ui'; - import { PushPin, Trash, Archive } from '@mana/shared-icons'; + import { + PushPin, + Trash, + Archive, + Tray, + Path, + Gear, + ListBullets, + Question, + CheckCircle, + ArrowUUpLeft, + } from '@mana/shared-icons'; + + const TAB_ICONS = { + all: ListBullets, + suspected: Question, + confirmed: CheckCircle, + reclaimed: ArrowUUpLeft, + } as const; import { useItemContextMenu } from '$lib/data/item-context-menu.svelte'; import { onMount } from 'svelte'; import { useAllLasts, useInboxLasts, searchLasts } from './queries'; @@ -127,62 +145,63 @@ - +
{#each ['all', 'suspected', 'confirmed', 'reclaimed'] as const as tab} + {@const Icon = TAB_ICONS[tab]} {/each} - - {$_('lasts.tabs.inbox')} - {#if inboxCount > 0} - {inboxCount} - {/if} - - - {$_('milestones.timeline.title')} - - +
- +
e.preventDefault()} class="quick-add"> -
- - -
-
- - -
+ + +
@@ -262,12 +281,23 @@ /* ── Tab Bar ─────────────────────────────── */ .tab-bar { display: flex; - gap: 0.25rem; + flex-wrap: nowrap; + gap: 0.125rem; border-bottom: 1px solid hsl(var(--color-border)); padding-bottom: 0.25rem; + overflow-x: auto; + scrollbar-width: none; + -ms-overflow-style: none; + } + .tab-bar::-webkit-scrollbar { + display: none; } .tab { - padding: 0.375rem 0.75rem; + display: inline-flex; + align-items: center; + gap: 0.3125rem; + flex-shrink: 0; + padding: 0.375rem 0.625rem; border: none; background: transparent; font-size: 0.75rem; @@ -275,7 +305,12 @@ color: hsl(var(--color-muted-foreground)); cursor: pointer; border-bottom: 2px solid transparent; - transition: all 0.15s; + text-decoration: none; + white-space: nowrap; + transition: + color 0.15s, + border-color 0.15s, + background 0.15s; } .tab:hover { color: hsl(var(--color-foreground)); @@ -285,59 +320,39 @@ border-bottom-color: hsl(var(--color-primary)); } .tab-count { - font-size: 0.625rem; - background: hsl(var(--color-primary) / 0.12); + font-size: 0.6875rem; + font-weight: 400; + color: hsl(var(--color-muted-foreground)); + } + .tab.active .tab-count { + color: hsl(var(--color-primary) / 0.7); + } + .util-count { color: hsl(var(--color-primary)); - padding: 0.0625rem 0.375rem; - border-radius: 9999px; - margin-left: 0.25rem; + font-weight: 600; } - .inbox-link { - margin-left: auto; - padding: 0.375rem 0.625rem; - border-radius: 0.25rem; - font-size: 0.6875rem; - font-weight: 600; - color: hsl(var(--color-muted-foreground)); - text-decoration: none; - transition: all 0.15s; + .utility-cluster { display: inline-flex; align-items: center; - gap: 0.25rem; - } - .inbox-link:hover { - color: hsl(var(--color-primary)); - background: hsl(var(--color-surface-hover)); - } - .inbox-link.settings-link { - margin-left: 0; - font-size: 0.875rem; - } - .inbox-count { - font-size: 0.5625rem; - background: hsl(var(--color-primary)); - color: hsl(var(--color-primary-foreground)); - padding: 0.0625rem 0.375rem; - border-radius: 9999px; - font-weight: 700; + gap: 0.125rem; + flex-shrink: 0; + margin-left: 0.25rem; + padding-left: 0.375rem; + border-left: 1px solid hsl(var(--color-border)); } /* ── Quick Add ───────────────────────────── */ .quick-add { display: flex; - flex-direction: column; - gap: 0.375rem; + align-items: center; + gap: 0.5rem; padding: 0.375rem 0.5rem; border-radius: 0.375rem; border: 1px solid hsl(var(--color-border)); } - .quick-top { - display: flex; - align-items: center; - gap: 0.5rem; - } - .cat-select { + .cat-select, + .mode-select { background: transparent; border: 1px solid hsl(var(--color-border)); border-radius: 0.25rem; @@ -345,9 +360,14 @@ color: hsl(var(--color-foreground)); padding: 0.125rem 0.25rem; outline: none; + cursor: pointer; + } + .mode-select { + color: hsl(var(--color-muted-foreground)); } .add-input { flex: 1; + min-width: 0; border: none; background: transparent; outline: none; @@ -357,25 +377,6 @@ .add-input::placeholder { color: hsl(var(--color-muted-foreground)); } - .quick-toggle { - display: flex; - gap: 0.25rem; - } - .toggle-btn { - padding: 0.125rem 0.5rem; - border-radius: 9999px; - border: 1px solid hsl(var(--color-border)); - background: transparent; - font-size: 0.625rem; - color: hsl(var(--color-muted-foreground)); - cursor: pointer; - transition: all 0.15s; - } - .toggle-btn.active { - background: hsl(var(--color-primary)); - color: hsl(var(--color-primary-foreground)); - border-color: hsl(var(--color-primary)); - } /* ── Search ──────────────────────────────── */ .search-input {