W1 web Home and accounts: W-2 Home, W-3 account detail, W-4 account editor

Home (mirrors S-4, S-3 while the partner has not joined): global balance hero with the seesaw and §9.3 wording, Settle up, active accounts with balance and this month's count, collapsed "Arkiverade (n)" kept for the session, empty, loading and error states, New expense when an active account exists. Account detail (S-5): header with default split, split bar, archived badge and balance; expenses and settlements interleaved by date, grouped by month with household spend (settlement rows carry the allocation, AC-11.7); overflow menu with Edit, Archive/Unarchive (undo snackbar, D-071) and Delete only when allowed (AC-6.5); not-found, loading and error states. Account editor (S-6): name (1-60 code points, name_taken on the field), two percent fields that always sum to 100 with two decimals, slider and presets, the "Av 100,00 kr" preview; discard dialog with a title and no body (D-080) on every navigation away; E-18/E-19 apply the returned row. The account preset for W-5 and W-7 is the query parameter `account` (proposed D-144). Tests over a shared snapshot fixture and the fake server. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TQd3pEP9UeN2uifbHknQ7B
2026-10-21 21:25:52 +02:00
parent aaa09d9073
commit 934eee793c
35 changed files with 3705 additions and 13 deletions
@@ -0,0 +1,81 @@
+.card {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 14px;
+  row-gap: var(--s1);
+  min-height: 76px;
+  padding: 14px var(--s4);
+  border-radius: var(--radius-account-card);
+  background: var(--card);
+  box-shadow: var(--elevation-card);
+  color: var(--on-surface);
+  text-decoration: none;
+}
+.card:hover {
+  background: color-mix(in srgb, var(--card) 94%, var(--on-surface));
+}
+.archived {
+  opacity: 0.92;
+}
+.middle {
+  flex: 1 1 140px;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.nameLine {
+  display: flex;
+  align-items: center;
+  gap: var(--s2);
+  min-width: 0;
+}
+.name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: var(--type-title-medium);
+  letter-spacing: var(--tracking-title-medium);
+}
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  flex: none;
+  padding: 1px var(--s2);
+  border-radius: var(--radius-full);
+  background: var(--surface-container-high);
+  color: var(--on-surface-variant);
+  font: var(--type-label-small);
+}
+.count {
+  font: var(--type-body-small);
+  letter-spacing: var(--tracking-body-small);
+  color: var(--on-surface-variant);
+}
+/* The balance column wraps under the name when it does not fit (long names, 7-digit amounts, large text). */
+.end {
+  flex: 0 1 auto;
+  margin-left: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  text-align: end;
+}
+.wording {
+  font: var(--type-label-medium);
+}
+.owed {
+  color: var(--owed);
+}
+.owing {
+  color: var(--owing);
+}
+.settled {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--s1);
+  font: var(--type-title-medium);
+  color: var(--settled);
+}