+ | Page chrome |
+ | Search bar wrapper | bg-white border-b border-line -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8 py-3.5 flex items-center gap-3 sticky top-[65px] z-20 | padding 14px responsive | Topbar = 1px accent + 64px nav = 65px. Negative margins break out of container padding so bar spans full container width. |
+ | Search input | flex-1 h-9 border border-ink rounded-sm px-3 font-sans text-sm text-ink bg-white | height 36px | Active: navy border |
+ | Sort bar wrapper | bg-white border-b border-line -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8 py-2.5 flex items-center gap-3 sticky top-[113px] z-20 | padding 10px responsive | Stacks below search bar (65 + 48 = 113px) |
+ | Filters toggle (closed) | h-7 px-3 border border-line rounded-sm font-sans text-[10px] font-bold uppercase tracking-wide text-ink flex items-center gap-1.5 | height 28px | — |
+ | Filters toggle (open) | h-7 px-3 bg-ink text-white rounded-sm font-sans text-[10px] font-bold uppercase tracking-wide flex items-center gap-1.5 | height 28px | Navy fill when active |
+ | Filter panel wrapper | bg-white border-b border-line -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8 py-4 flex flex-col sm:flex-row sm:flex-wrap gap-4 | padding 16px responsive | Use Svelte slide transition; stacks vertically on mobile |
+ | List body | py-5 | vertical padding only | No extra horizontal padding — app container handles it |
+
+ | Year group card |
+ | Card container | border border-line bg-surface shadow-sm mb-4 overflow-hidden | — | Matches current DocumentList outer div exactly |
+ | Year header | bg-sand border-b border-line px-5 py-1.5 font-sans text-[10px] font-bold uppercase tracking-widest text-ink-3 | padding 6px 20px | — |
+ | Row list | divide-y divide-line-2 | — | Matches current <ul> pattern |
+
+ | Document row |
+ Row wrapper <li> | group transition-colors duration-200 hover:bg-muted/50 | — | Same hover pattern as current |
+ | Row inner (link) | block sm:flex sm:items-stretch | — | Full-row <a href="/documents/{id}">; flex only on sm+ |
+ | Left column | p-4 sm:flex-1 sm:min-w-0 sm:pr-5 sm:border-r sm:border-line-2 | padding 16px | Right border only on sm+ |
+ | Right column (sm+) | hidden sm:flex sm:w-48 lg:w-60 flex-shrink-0 p-3.5 flex-col justify-between gap-2 | sm: 192px · lg: 240px | Hidden on mobile; narrower on tablet |
+ | Mobile metadata grid | sm:hidden border-t border-line-2 mt-3 pt-3 grid grid-cols-2 gap-x-4 gap-y-0.5 | — | 2×2 compact grid shown only on mobile, inside left col |
+ | Mobile meta bottom row | sm:hidden flex items-center justify-between mt-3 | — | Ring + contributors on mobile, shown only <sm |
+ | Document title | font-serif text-base font-bold text-ink mb-1.5 leading-snug group-hover:underline | 16px / 700 | — |
+ | Snippet text | font-serif text-sm italic text-ink-2 line-clamp-2 mb-2 | 14px | Only when snippet present |
+ | Meta label | font-sans text-[10px] font-bold uppercase tracking-wide text-ink-3 mr-1.5 | 10px / 700 | DATE · FROM · TO · ARCHIVE |
+ | Meta value | font-sans text-[11px] text-ink-2 | 11px | — |
+
+ | Progress ring |
+ | SVG container | relative w-9 h-9 flex-shrink-0 | 36×36px | — |
+ | Track circle | stroke="var(--c-sand)" stroke-width="3" | r=13, circumference 81.7px | — |
+ | Fill arc | stroke="var(--c-accent)" stroke-width="3" stroke-linecap="round" | dasharray = pct/100 × 81.7 | rotate(−90deg) |
+ | Percentage label | absolute inset-0 flex items-center justify-center font-sans text-[8px] font-bold | 8px / 800 | Mint when >0, gray-400 when 0 |
+
+ | New files |
+ NEW frontend/src/routes/documents/+page.svelte | — | — | Document list page (extract from homepage) |
+ NEW frontend/src/routes/documents/+page.server.ts | — | — | Loads search results, same API call as current homepage |
+ CHANGED frontend/src/routes/AppNav.svelte | — | — | Documents tab href: / → /documents |
+ CHANGED frontend/src/routes/+page.svelte | — | — | Remove dual-mode logic; always render dashboard |
+ CHANGED frontend/src/routes/+page.server.ts | — | — | Remove search branch; always fetch dashboard data |
+ CHANGED frontend/src/routes/DocumentList.svelte | — | — | Refactor to new two-column layout + year cards |
+ NEW query backend/.../DocumentSearchRepository | — | — | Add completionPercentage + contributors to search projection |
+
+