feat: migrate Rider-Pi dashboard styles to shared layout

[mpieniak01]

Zakres

Krótko: co PR przenosi/porządkuje (MOVE-FIRST), bez zmiany zachowań.

Checklista (WYMAGANE)

• MOVE-FIRST (w diff widoczne renames/moves).
• NO-STUB: nie zastąpiłem działającej logiki szkieletem (pass/TODO/NotImplementedError).
• Brak nieuzasadnionych delecji. Jeśli są: label allow-delete + DLACZEGO.
• Publiczne importy/API kompatybilne (re-eksporty zapewnione).
• ruff check --fix && ruff format zielone (≤120 znaków/linia).
• pytest zielony (dla audio: ALSA_SKIP_LSOF=1 pytest -q -k voice).
• Żaden plik nie przekracza 600 linii albo został rozbity w tym PR.

Uwagi techniczne (opcjonalnie)

Co przeniesiono i gdzie, ewentualne decyzje projektowe.

[gemini-code-assist]

Summary of Changes

Hello @mpieniak01, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

Ten pull request wprowadza znaczącą refaktoryzację stylów dashboardu Rider-Pi, przechodząc na modułową architekturę CSS. Celem jest poprawa utrzymywalności, skalowalności i spójności wizualnej interfejsu użytkownika. Zmiany obejmują usunięcie przestarzałych plików CSS, wprowadzenie scentralizowanych tokenów projektowych i komponentów UI, a także umożliwienie dynamicznego zarządzania motywami. Dzięki temu kod CSS jest bardziej uporządkowany i łatwiejszy do rozwijania w przyszłości.

Highlights

• Nowa architektura CSS: Wprowadzono modułową architekturę CSS, dzieląc style na mniejsze, bardziej zarządzalne pliki, takie jak tokens.css (tokeny projektowe), base.css (style bazowe), layout.css (układy), components.css (komponenty) i utilities.css (klasy narzędziowe).
• Usunięcie starych plików CSS: Usunięto stare, monolityczne pliki CSS specyficzne dla stron (chat.css, control.css, google-home.css, home.css, navigation.css, system.css, view.css), zastępując je nową, modułową strukturą.
• Style specyficzne dla stron: Style specyficzne dla poszczególnych stron zostały przeniesione do nowego katalogu web/assets/pages/ (np. pages/chat.css, pages/control.css), co zapewnia lepszą izolację i organizację.
• Dynamiczne ładowanie motywów: Dodano skrypt theme-loader.js oraz pliki CSS dla różnych motywów (classic, classic-plus, v2, v3), umożliwiając dynamiczne przełączanie motywów w panelu sterowania.
• Zaktualizowane szablony HTML: Wszystkie pliki HTML (chat.html, control.html, google_home.html, home.html, navigation.html, system.html, view.html) zostały zaktualizowane, aby korzystać z nowej modułowej struktury CSS, ładowania motywów i wspólnej stopki.
• Wspólna stopka: Wprowadzono wspólną stopkę (dashboard_footer_template.html i footer.js), która wyświetla status systemu i umożliwia wybór motywu, co zapewnia spójność na wszystkich stronach.
• Dokumentacja CSS: Dodano plik web/assets/css/README.md zawierający szczegółową dokumentację nowej architektury CSS, mapowanie starych klas na nowe oraz przewodnik migracji.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

Świetna robota z migracją stylów do nowej, modułowej architektury CSS! Podział na tokeny, bazę, layout, komponenty i utility to bardzo dobra praktyka, która znacząco poprawi utrzymywalność i spójność wizualną dashboardu. Wprowadzenie motywów przez zmienne CSS to również duży plus.

Znalazłem kilka kwestii, które warto byłoby zaadresować:

• Rozmiar pliku components.css przekracza ustalone w projekcie limity, co może utrudnić jego utrzymanie.
• Pliki CSS dla poszczególnych stron (web/assets/pages/*.css) są zminifikowane, co utrudnia ich przeglądanie i edycję.
• W pliku control.html usunięto funkcjonalność "Zezwól na ruch", co wydaje się być zmianą w zachowaniu, a PR jest oznaczony jako "MOVE-FIRST".

Szczegóły zawarłem w komentarzach do kodu. Poza tymi uwagami, refaktoryzacja wygląda bardzo solidnie.

I am having trouble creating individual review comments. Click here to see my feedback.

web/control.html (130-151)

Wygląda na to, że funkcjonalność 'Zezwól na ruch' (ang. 'Allow motion') została usunięta w tym PR. Zniknął zarówno odpowiedni fragment HTML, jak i logika w JavaScript. Zgodnie z opisem, ten PR miał być typu 'MOVE-FIRST' bez zmiany zachowania. Usunięcie funkcjonalności jest zmianą w zachowaniu. Czy to zamierzone? Jeśli tak, warto zaktualizować opis PR.

web/assets/css/components.css (1-838)

Ten plik ma ponad 800 linii, co przekracza ustalony w projekcie limit 600 linii na plik. Warto rozważyć jego podział na mniejsze, bardziej wyspecjalizowane pliki, np. cards.css, buttons.css, forms.css itp. Ułatwi to nawigację i przyszłe modyfikacje.

web/assets/pages/assistant.css (1)

Pliki CSS w katalogu web/assets/pages/ (w tym ten) są zminifikowane. W kodzie źródłowym powinna znajdować się czytelna, nieskompresowana wersja, aby ułatwić przeglądanie zmian i przyszłe prace. Minifikacja powinna być krokiem w procesie budowania aplikacji na produkcję, a nie częścią kodu źródłowego w repozytorium.

[Copilot]

Pull request overview

This PR migrates Rider-Pi dashboard styles from page-specific CSS files to a modular, shared layout system. The migration follows the MOVE-FIRST principle by extracting common styles into reusable CSS modules (tokens.css, base.css, layout.css, components.css, utilities.css) while consolidating page-specific overrides into smaller files under web/assets/pages/. The PR introduces a theme system with four variants (classic, classic-plus, v2, v3) managed by theme-loader.js, and adds a shared footer component loaded dynamically via footer.js.

Key changes:

• Modular CSS architecture splits 2000+ lines of duplicate styles into ~1500 lines of shared modules
• HTML files adopt semantic layout structure (.layout-header, .layout-main, .layout-footer)
• Theme system allows runtime switching between four visual variants
• Footer component replaces inline status bars with shared template

Reviewed changes

Copilot reviewed 43 out of 43 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
web/view.html	Migrated to shared layout structure with theme support and footer component
web/system.html	Adopted shared layout classes and removed inline styles
web/navigation.html	Replaced Tailwind-like utilities with shared layout components
web/home.html	Restructured with semantic HTML and shared component classes
web/google_home.html	Migrated to layout system, added dual auth button placement
web/control.html	Large refactor adopting shared layout, removed motion.enable feature UI
web/chat.html	Migrated to shared layout with audit mode support
web/dashboard_footer_template.html	New shared footer template with theme switcher
web/assets/dashboard-common.css	Converted to import-only entry point for modular CSS
web/assets/css/tokens.css	Design tokens (colors, spacing, typography, shadows)
web/assets/css/base.css	CSS reset and foundational element styles
web/assets/css/layout.css	Layout systems (grid, flex, page structure)
web/assets/css/components.css	Reusable UI components (cards, buttons, pills, forms)
web/assets/css/utilities.css	Single-purpose utility classes
web/assets/css/menu.css	Navigation menu component styles
web/assets/css/footer.css	Footer/statusbar component styles
web/assets/pages/*.css	Page-specific overrides (<200 lines each)
web/assets/themes/*/*.css	Theme variant stylesheets
web/assets/theme-loader.js	Theme switching and persistence logic
web/assets/footer.js	Footer component dynamic loading and state management
web/assets/[page].css (deleted)	Old monolithic page styles removed