feat(web): refine page layouts and typography controls by atulmgupta · Pull Request #160 · ev-dev-labs/teslasync

atulmgupta · 2026-09-27T06:48:23Z

Description

Fit short-range Drive Calendar heatmaps beside the activity charts and place Charge History sessions below spending next to Price Radar, retaining long-range and narrow-screen layouts.
Make New Layout the single dashboard template-creation flow, with blank and three additional populated layouts; keep Add Widget focused on widgets.
Simplify Appearance's default controls while keeping the full mode catalog available. Expand Typography with searchable font catalogs, reading presets, and a live specimen; validate font IDs across the pre-paint bootstrap, runtime, and settings API.

Type of Change

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Documentation update

How to test

docker compose build teslasync-api web --quiet
cd web && npm run build
cd web && npx tsc --noEmit
Combined targeted Vitest run: 239 passed; combined desktop/mobile Playwright run: 21 passed.
go test -race ./internal/api/settings; changed-file ESLint, locale-generation check and engineering guideline audit.

Checklist

My code follows the project's style guidelines
I have performed a self-review of my code
I have added tests that prove my fix is effective or my feature works
New and existing targeted tests pass locally
I have updated the documentation accordingly
My changes generate no new warnings in changed-file lint

Improve drive calendar and charging history density, streamline appearance settings, expand typography presets, and unify dashboard layout creation. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot

Copilot review overview

🟡 Changes recommended

A stale removed prop breaks TypeScript compilation, and pre-paint font validation accepts inherited keys.

Review effort: Lite
Findings: 1

Open (1)

Update WidgetPicker test after removing onApplyPreset · New

What changed in this PR

Refines responsive dashboard, charging, and Drive Calendar layouts, separates layout creation from widget selection, and expands appearance/typography controls with font validation.

Changes:

Adds dashboard templates and responsive layout improvements.
Adds searchable font catalogs, presets, previews, and validation.
Simplifies appearance controls and updates related documentation.

Review findings:

Critical (3 votes): WidgetPicker removal leaves a stale onApplyPreset prop in driving.test.tsx, breaking TypeScript compilation.
Moderate (1 vote): Pre-paint font validation accepts inherited object keys such as constructor.

File	Summary
`web/src/i18n/en/usage-manifest.json`	Updates translation usage keys.
`web/src/i18n/en/shell.json`	Adds theme labels.
`web/src/i18n/en/locale-detail-theme.json`	Adds appearance translations.
`web/src/i18n/en/locale-detail-settings.json`	Adds typography translations.
`web/src/i18n/en/locale-dashboard.json`	Adds layout translations.
`web/src/i18n/en.json`	Updates the English catalog.
`web/src/features/settings/pages/SettingsPage.tsx`	Uses shared font labels.
`web/src/features/settings/components/TypographySpecimen.tsx`	Adds a live typography specimen.
`web/src/features/settings/components/TypographySettings.tsx`	Adds font catalogs and controls.
`web/src/features/settings/components/TypographySettings.test.tsx`	Tests typography interactions.
`web/src/features/settings/components/fontPreview.css`	Styles font previews.
`web/src/features/settings/components/FontFamilyPicker.tsx`	Adds a searchable font picker.
`web/src/features/settings/components/fontChoices.ts`	Defines font choices.
`web/src/features/settings/components/AppearanceSettings.tsx`	Collapses advanced appearance options.
`web/src/features/settings/components/AppearanceSettings.test.tsx`	Tests accordion behavior.
`web/src/features/dashboard/pages/DashboardPage.tsx`	Separates layout and widget actions.
`web/src/features/dashboard/hooks/useDashboardLayout.ts`	Adds presets and ID generation.
`web/src/features/dashboard/hooks/useDashboardLayout.test.ts`	Tests preset layouts.
`web/src/features/dashboard/components/WidgetPicker.tsx`	Removes template controls.
`web/src/features/dashboard/components/WidgetPicker.test.tsx`	Updates widget-picker tests.
`web/src/features/dashboard/components/TemplateGallery.tsx`	Adds the layout creation gallery.
`web/src/features/dashboard/components/__tests__/TemplateGallery.test.tsx`	Tests gallery behavior.
`web/src/features/charging/pages/TeslaChargingHistoryPage.tsx`	Reflows charging panels.
`web/src/features/charging/pages/__tests__/TeslaChargingHistoryPage.test.tsx`	Tests responsive placement.
`web/src/features/analytics/pages/DriveCalendarPage.tsx`	Adds compact heatmap layouts.
`web/src/features/analytics/pages/DriveCalendarPage.test.tsx`	Tests calendar layouts.
`web/src/features/analytics/components/drive-calendar/DriveCalendarHeatmap.tsx`	Supports custom layout classes.
`web/src/components/ui/ThemePicker.tsx`	Adds essential/full mode browsing.
`web/src/components/ui/ThemePicker.test.tsx`	Tests mode filtering.
`web/src/components/ui/FontProvider.tsx`	Expands font catalogs and validation.
`web/src/components/ui/FontProvider.test.tsx`	Tests font presets.
`web/index.html`	Adds pre-paint font mappings.
`web/e2e/typography-studio.smoke.spec.ts`	Adds typography E2E coverage.
`web/e2e/mockApi.ts`	Adds charging fixtures.
`web/e2e/drive-calendar-layout.smoke.spec.ts`	Adds calendar layout coverage.
`web/e2e/dashboard-layouts.smoke.spec.ts`	Updates dashboard E2E coverage.
`web/e2e/charging-history-layout.smoke.spec.ts`	Adds charging layout coverage.
`web/e2e/appearance-consolidation.smoke.spec.ts`	Adds appearance E2E coverage.
`internal/api/settings/handler.go`	Validates expanded font IDs.
`internal/api/settings/font_validation_test.go`	Tests accepted font IDs.
`docs/features/dashboard.md`	Documents the new layout flow.
`docs/features/catalogue-settings.md`	Documents typography settings.

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

  onAddWidgets: (widgetIds: string[]) => void;
-  onApplyPreset: (presetId: string) => void;
  activeWidgetIds: string[];


Keep push, scheduled, manual, and stateful workflow runs intact while cancelling obsolete PR security, Helm, and Copilot setup checks. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Keep pull-request validation and mainline push verification while avoiding two checks for the same feature-branch commit. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Trigger a new pull-request head while the previous CI jobs are running, without changing source or test content. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot

Copilot review overview

🔵 Needs a closer look

Resolve the stale WidgetPicker prop caller and localize the Typography specimen samples.

Review effort: Lite
Findings: 1

Open (1)

Update WidgetPicker test after removing onApplyPreset

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot

Copilot review overview

🔵 Needs a closer look

Update the stale WidgetPicker test helper and localize the TypographySpecimen preview text.

Review effort: Lite
Findings: 1

Open (1)

Update WidgetPicker test after removing onApplyPreset

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot

Copilot review overview

🔵 Needs a closer look

Update the stale WidgetPicker test caller and regenerate the i18n coverage report.

Review effort: Lite
Findings: 1

Open (1)

Update WidgetPicker test after removing onApplyPreset

feat(web): refine page layouts and typography controls

2feb79e

Improve drive calendar and charging history density, streamline appearance settings, expand typography presets, and unify dashboard layout creation. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot AI lite review requested due to automatic review settings September 27, 2026 06:48

github-actions Bot added frontend backend docs labels Sep 27, 2026

Copilot started reviewing on behalf of atulmgupta September 27, 2026 06:57

View session

fix(web): render font samples without inline typography styles

98b4c72

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot AI reviewed Sep 27, 2026

View reviewed changes

Comment thread web/src/features/dashboard/components/WidgetPicker.tsx

Comment on lines 97 to 98

onAddWidgets: (widgetIds: string[]) => void;

onApplyPreset: (presetId: string) => void;

activeWidgetIds: string[];

ci: cancel superseded read-only pull request runs

4af8b5a

Keep push, scheduled, manual, and stateful workflow runs intact while cancelling obsolete PR security, Helm, and Copilot setup checks. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot AI review requested due to automatic review settings September 27, 2026 07:09

github-actions Bot added the ci label Sep 27, 2026

Copilot started reviewing on behalf of atulmgupta September 27, 2026 07:10

View session

atulmgupta and others added 2 commits September 27, 2026 00:10

ci: avoid duplicate Copilot setup runs on PR branches

fc8e067

Keep pull-request validation and mainline push verification while avoiding two checks for the same feature-branch commit. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

chore(ci): verify superseded PR run cancellation

11330a0

Trigger a new pull-request head while the previous CI jobs are running, without changing source or test content. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot AI reviewed Sep 27, 2026

View reviewed changes

fix(ci): Align CSP hashes, font mocks, and visual baselines

db5557c

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot AI review requested due to automatic review settings September 27, 2026 07:32

github-actions Bot added the helm label Sep 27, 2026

Copilot started reviewing on behalf of atulmgupta September 27, 2026 07:33

View session

Copilot AI reviewed Sep 27, 2026

View reviewed changes

fix(ci): Stabilize notification loading and SSE drop assertion

ebdaf2a

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot AI review requested due to automatic review settings September 27, 2026 07:50

Copilot started reviewing on behalf of atulmgupta September 27, 2026 07:50

View session

Copilot AI reviewed Sep 27, 2026

View reviewed changes

atulmgupta merged commit c83b4ab into main Sep 27, 2026
67 checks passed

atulmgupta deleted the late-might-fixes branch September 27, 2026 08:05

Navigation Menu

Repository navigation

feat(web): refine page layouts and typography controls - #160

feat(web): refine page layouts and typography controls#160
atulmgupta merged 7 commits into
mainfrom
late-might-fixes

atulmgupta commented Sep 27, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

atulmgupta commented Sep 27, 2026

Description

Type of Change

How to test

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟡 Changes recommended

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🔵 Needs a closer look

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🔵 Needs a closer look

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🔵 Needs a closer look

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants