Add app settings page with theme, button layout and log visibility #11

Merged

forgejo-admin merged 2 commits from feature/10_app_settings_page into main

2026-09-25 13:52:38 +00:00

developer commented

2026-09-25 13:48:34 +00:00

Collaborator

Что сделано

Реализация настроек приложения по постановке #10.

В шапке вместо переключателя темы — кнопка «⚙ Настройки» (issue-постановка: «Там где сейчас выбор темы, нужно поместить кнопку Настройки с иконкой шестеренки»).
Кнопка открывает отдельную страницу настроек (замещает основной экран, «← Назад» возвращает):
1. Тема — «Светлая» / «Тёмная».
2. Отображение кнопок — «В линию» (текущий вид, 5 в ряд), «Матрица 1×3», «Матрица 2×3», «Матрица 3×2», «Матрица 3×1».
3. Журнал — флаг «Отображать Журнал нажатий».
Все настройки хранятся в localStorage (ключ keba-panel-settings), восстанавливаются при загрузке; прежний сохранённый выбор темы (keba-panel-theme) мигрирует автоматически.
Расширяемость: все настройки — один объект AppSettings (web/src/utils/settings.ts), варианты раскладок — таблица LAYOUT_OPTIONS. Новый пункт меню = поле в AppSettings + секция на SettingsPage.

Телефонный режим

На ширинах ≤520px кнопки панели всегда показываются сеткой 2 колонки (5-я кнопка переносится), независимо от выбранной раскладки: инлайн-стиль десктопной раскладки подавляется через media query.
Страница настроек адаптирована: секции в столбец, контролы переносятся (скриншот settings_mobile_light.png).
В issue задан вопрос по трактовке матриц для 5 кнопок (принято: первая цифра = колонки); если задумано иначе — поправлю по ответу.

Как проверить

make web-dev (или make web-build + бекенд) → открыть панель.
«⚙ Настройки» → сменить тему/раскладку/флаг журнала → «← Назад» — изменения применяются и переживают перезагрузку страницы.
Сузить окно ≤520px — кнопки всегда 2 колонки; страница настроек остаётся удобной.
make web-test — 33/33 зелёные (новые тесты: settings.test.ts, useSettings.test.ts, SettingsPage.test.tsx; обновлены App.test.tsx).

Скриншоты

Приложены к issue #10 (страница настроек desktop/mobile, все раскладки, тёмная тема, телефонный режим, планшет). Также лежат в web/public/screenshots/.

Closes #10

## Что сделано Реализация настроек приложения по постановке #10. - В шапке вместо переключателя темы — кнопка «⚙ Настройки» (issue-постановка: «Там где сейчас выбор темы, нужно поместить кнопку Настройки с иконкой шестеренки»). - Кнопка открывает **отдельную страницу настроек** (замещает основной экран, «← Назад» возвращает): 1. **Тема** — «Светлая» / «Тёмная». 2. **Отображение кнопок** — «В линию» (текущий вид, 5 в ряд), «Матрица 1×3», «Матрица 2×3», «Матрица 3×2», «Матрица 3×1». 3. **Журнал** — флаг «Отображать Журнал нажатий». - Все настройки хранятся в localStorage (ключ `keba-panel-settings`), восстанавливаются при загрузке; прежний сохранённый выбор темы (`keba-panel-theme`) мигрирует автоматически. - Расширяемость: все настройки — один объект `AppSettings` (`web/src/utils/settings.ts`), варианты раскладок — таблица `LAYOUT_OPTIONS`. Новый пункт меню = поле в `AppSettings` + секция на `SettingsPage`. ## Телефонный режим - На ширинах ≤520px кнопки панели всегда показываются сеткой 2 колонки (5-я кнопка переносится), независимо от выбранной раскладки: инлайн-стиль десктопной раскладки подавляется через media query. - Страница настроек адаптирована: секции в столбец, контролы переносятся (скриншот `settings_mobile_light.png`). - В issue задан вопрос по трактовке матриц для 5 кнопок (принято: первая цифра = колонки); если задумано иначе — поправлю по ответу. ## Как проверить 1. `make web-dev` (или `make web-build` + бекенд) → открыть панель. 2. «⚙ Настройки» → сменить тему/раскладку/флаг журнала → «← Назад» — изменения применяются и переживают перезагрузку страницы. 3. Сузить окно ≤520px — кнопки всегда 2 колонки; страница настроек остаётся удобной. 4. `make web-test` — 33/33 зелёные (новые тесты: `settings.test.ts`, `useSettings.test.ts`, `SettingsPage.test.tsx`; обновлены `App.test.tsx`). ## Скриншоты Приложены к issue #10 (страница настроек desktop/mobile, все раскладки, тёмная тема, телефонный режим, планшет). Также лежат в `web/public/screenshots/`. Closes #10

developer added 2 commits

2026-09-25 13:48:34 +00:00

Add settings module with theme, button layout and log visibility 4c625dc6f4

Add settings page screenshots for issue #10 review 2f0c73bd4d

developer referenced this pull request

2026-09-25 13:50:08 +00:00

Создать настройки приложения #10

developer referenced this pull request

2026-09-25 13:50:35 +00:00

Создать настройки приложения #10