refactor: enhance dashboard layout and settings components for improved user experience

Updated the AnalyticsDashboardSkeleton to utilize a new grid layout for KPI tiles, increasing the number of displayed items and adjusting their size for better visibility. Modified the SettingsSettingField component to accept a ReactNode for the description, allowing for richer content. Refactored the Settings component to improve the organization of API token management and session status display, enhancing clarity and usability. Additionally, integrated new UI elements for theme selection and improved layout consistency across components.
2026-07-09 21:58:39 +07:00
parent a3f3ffd672
commit 55eb2a6c89
7 changed files with 323 additions and 65 deletions
@@ -15,6 +15,10 @@ export const UI_SURFACE = 'card' as const
 /** Shared padding for KPI / metric tiles inside PanelCard. */
 export const kpiCardContentClassName = 'flex flex-col items-start gap-4 p-5'

+/** Compact 6-tile KPI row on dashboard overview. */
+export const dashboardKpiGridClassName =
+  'grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-6'
+
 /** Grid for dashboard-5 style KPI sparkline row (4 columns at xl). */
 export const kpiGridClassName =
  'grid grid-cols-1 gap-4 @3xl:grid-cols-2 @6xl:grid-cols-4'