From e02da42f39e96c75013d19a5587d76d4dc65e725 Mon Sep 17 00:00:00 2001
From: Sergey Kozyrenko <sirozha_blr@tut.by>
Date: Mon, 18 May 2026 02:44:08 +0700
Subject: [PATCH] feat(frontend): collapse Dashboard period switcher to icons
 on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On screens narrower than the `sm` breakpoint (640 px) the
Week / Month / Quarter triggers were forcing the period switcher to
crowd the Analytics / Overview tabs into the next line. Replaced
the labels with lucide calendar icons (CalendarDays / Calendar /
CalendarRange) that swap in below `sm` while the full text comes
back above it.

Accessibility preserved — each TabsTrigger keeps an explicit
aria-label and the icons are aria-hidden so screen readers still
announce "Week" / "Month" / "Quarter" instead of duplicate icon
descriptions.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/pages/dashboard/dashboard.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/dashboard/dashboard.tsx b/frontend/src/pages/dashboard/dashboard.tsx
index cd4f3eba..8cfeaa93 100644
--- a/frontend/src/pages/dashboard/dashboard.tsx
+++ b/frontend/src/pages/dashboard/dashboard.tsx
@@ -1,4 +1,4 @@
-import { LayoutDashboard } from 'lucide-react';
+import { Calendar, CalendarDays, CalendarRange, LayoutDashboard, type LucideIcon } from 'lucide-react';
 import { useState, useTransition } from 'react';
 
 import { PageTitle } from '@/components/shared/page-title';
@@ -12,10 +12,10 @@ import { cn } from '@/lib/utils';
 import { DashboardAnalytics } from '@/pages/dashboard/dashboard-analytics';
 import { DashboardOverview } from '@/pages/dashboard/dashboard-overview';
 
-const periodOptions: { label: string; value: UsageStatsPeriod }[] = [
-    { label: 'Week', value: UsageStatsPeriod.Week },
-    { label: 'Month', value: UsageStatsPeriod.Month },
-    { label: 'Quarter', value: UsageStatsPeriod.Quarter },
+const periodOptions: { icon: LucideIcon; label: string; value: UsageStatsPeriod }[] = [
+    { icon: CalendarDays, label: 'Week', value: UsageStatsPeriod.Week },
+    { icon: Calendar, label: 'Month', value: UsageStatsPeriod.Month },
+    { icon: CalendarRange, label: 'Quarter', value: UsageStatsPeriod.Quarter },
 ];
 
 const VALID_PERIODS = new Set<string>(Object.values(UsageStatsPeriod));
@@ -112,12 +112,17 @@ function Dashboard() {
                                 value={period}
                             >
                                 <TabsList>
-                                    {periodOptions.map(({ label, value }) => (
+                                    {periodOptions.map(({ icon: Icon, label, value }) => (
                                         <TabsTrigger
+                                            aria-label={label}
                                             key={value}
                                             value={value}
                                         >
-                                            {label}
+                                            <Icon
+                                                aria-hidden="true"
+                                                className="size-4 sm:hidden"
+                                            />
+                                            <span className="hidden sm:inline">{label}</span>
                                         </TabsTrigger>
                                     ))}
                                 </TabsList>