From 05e4dcd123e43ad22d62b162e75cff809169677a Mon Sep 17 00:00:00 2001 From: Amirhossein Khalili Date: Thu, 20 Aug 2026 22:59:07 +0330 Subject: [PATCH] fix: polish dashboard loading and interactions --- DESIGN.md | 3 ++- src/app.css | 3 +++ src/lib/components/AppShell.svelte | 8 +++--- src/lib/components/DashboardControls.svelte | 18 +++++++------ src/lib/components/PaymentHistoryChart.svelte | 27 +++++++++++++++---- src/lib/components/PeriodPicker.svelte | 13 +++++---- .../components/ui/skeleton/skeleton.svelte | 2 +- 7 files changed, 48 insertions(+), 26 deletions(-) diff --git a/DESIGN.md b/DESIGN.md index 6eca8b8..1ee0494 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -132,6 +132,7 @@ The approved Persian-first baseline remains authoritative where the shipped arti | Version | Date | Decision | | ------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| 0.8.0 | 2026-08-20 | Increased light-theme skeleton contrast, constrained and animated chart tooltips, made default period choices explicitly applicable, hid collapsed-sidebar labels, and strengthened the separation between period type and exact-period controls. | | 0.7.0 | 2026-08-20 | Made period changes confirm-on-selection, moved narrow-screen filters into a bottom sheet, enlarged collapsed navigation targets, simplified focus rings, and promoted the fee-share chart into a dedicated visual column. | | 0.6.0 | 2026-08-20 | Added full-span Jalali period selection, unified transaction status/amount controls, persistent skeleton states, custom RTL dropdowns, semantic peer/retry tones, and fee-share visualization; tightened the narrow navbar and 600px KPI breakpoint. | | 0.5.0 | 2026-08-20 | Reconciled the approved baseline with the shipped routed frontend and desktop, mobile, and 639px review captures; converted the file to canonical DESIGN.md format and added the design sidecar. | @@ -288,7 +289,7 @@ Scope changes immediately replace data-dependent cards, tables, detail panels, a ### Payment-History Chart -The signature chart is a blue line with outlined points, a low-opacity blue area, and dashed neutral gridlines. It follows a written title and reporting-period chip, provides focusable points with spoken values, and animates its initial trace once over 900ms while reduced-motion collapses the effect. +The signature chart is a blue line with outlined points, a low-opacity blue area, and dashed neutral gridlines. It follows a written title and reporting-period chip, provides focusable points with spoken values, and animates its initial trace once over 900ms while reduced-motion collapses the effect. Point tooltips use a short scale/fade transition, flip above or below according to vertical room, and clamp their center so the surface never leaves the chart wrapper. ### Transaction Table diff --git a/src/app.css b/src/app.css index 742727c..d6e45fd 100644 --- a/src/app.css +++ b/src/app.css @@ -19,6 +19,7 @@ --text: #19191a; --text-secondary: #3d3d42; --muted: #f3f4f6; + --skeleton: #e1e3e8; --border: #e4e4e7; --brand: #0a33ff; --brand-hover: #0828cc; @@ -87,6 +88,7 @@ --secondary: #27272a; --secondary-foreground: #fafafa; --muted: #27272a; + --skeleton: #323237; --muted-foreground: #a1a1aa; --accent: #202950; --accent-foreground: #a9baff; @@ -244,6 +246,7 @@ select { --color-accent: var(--accent); --color-muted-foreground: var(--muted-foreground); --color-muted: var(--muted); + --color-skeleton: var(--skeleton); --color-secondary-foreground: var(--secondary-foreground); --color-secondary: var(--secondary); --color-primary-foreground: var(--primary-foreground); diff --git a/src/lib/components/AppShell.svelte b/src/lib/components/AppShell.svelte index 73f0faa..5b425cf 100644 --- a/src/lib/components/AppShell.svelte +++ b/src/lib/components/AppShell.svelte @@ -100,7 +100,7 @@ {#snippet child({ props })} - {item.label} + {item.label} {/snippet} @@ -124,11 +124,11 @@ - خروج از حساب + خروج از حساب diff --git a/src/lib/components/DashboardControls.svelte b/src/lib/components/DashboardControls.svelte index 0dd042c..a73bb38 100644 --- a/src/lib/components/DashboardControls.svelte +++ b/src/lib/components/DashboardControls.svelte @@ -52,7 +52,7 @@ {#snippet periodControls(mobile: boolean)} -
+
{:else} - +
+ +
{/if}
{/snippet} diff --git a/src/lib/components/PaymentHistoryChart.svelte b/src/lib/components/PaymentHistoryChart.svelte index 28ab642..d9b79a0 100644 --- a/src/lib/components/PaymentHistoryChart.svelte +++ b/src/lib/components/PaymentHistoryChart.svelte @@ -1,4 +1,6 @@
@@ -89,13 +99,20 @@ {#if active !== null && positions[active]}
- {persianDate(positions[active].localDate)} - {formatValue(positions[active].bankPaidSessions)} پرداخت موفق - {formatMoney(positions[active].bankPaidAmountRial)} +
+ {persianDate(positions[active].localDate)} + {formatValue(positions[active].bankPaidSessions)} پرداخت موفق + {formatMoney(positions[active].bankPaidAmountRial)} +
{/if} {/if} diff --git a/src/lib/components/PeriodPicker.svelte b/src/lib/components/PeriodPicker.svelte index 16f815f..b226916 100644 --- a/src/lib/components/PeriodPicker.svelte +++ b/src/lib/components/PeriodPicker.svelte @@ -55,9 +55,8 @@ .filter((period) => period.periodType === periodTypeForRange(range) && period.isComplete) .sort((left, right) => right.localStartAt.localeCompare(left.localStartAt)), ); - const selectedPeriod = $derived( - matchingPeriods.find((period) => period.periodId === periodId) ?? matchingPeriods[0], - ); + const explicitPeriod = $derived(matchingPeriods.find((period) => period.periodId === periodId)); + const selectedPeriod = $derived(explicitPeriod ?? matchingPeriods[0]); const calendarGrid = $derived( !selectedYear || (range !== 'day' && range !== 'week') ? [] @@ -168,8 +167,8 @@ {range === 'month' ? 'ماه' : 'فصل'} period.periodId === selectedPeriod?.periodId) - ? selectedPeriod?.periodId + value={explicitPeriod && offered.some((period) => period.periodId === explicitPeriod.periodId) + ? explicitPeriod.periodId : ''} onValueChange={(value) => { if (namedOptions.some((option) => option.period?.periodId === value)) choose(value); @@ -182,8 +181,8 @@ > - {offered.find((period) => period.periodId === selectedPeriod?.periodId) - ? shortPeriodLabel(selectedPeriod) + {explicitPeriod && offered.find((period) => period.periodId === explicitPeriod.periodId) + ? shortPeriodLabel(explicitPeriod) : range === 'month' ? 'انتخاب ماه' : 'انتخاب فصل'} diff --git a/src/lib/components/ui/skeleton/skeleton.svelte b/src/lib/components/ui/skeleton/skeleton.svelte index 1737f85..73db882 100644 --- a/src/lib/components/ui/skeleton/skeleton.svelte +++ b/src/lib/components/ui/skeleton/skeleton.svelte @@ -12,6 +12,6 @@