feat(frontend): replace emoji with inline Material Symbols icon system

Add a self-contained icon system: vendored Material Symbols registry, an
<Icon> component that references a single <symbol> sprite via <use>, plus
IconButton/IconSprite. Replace every emoji/Unicode glyph (logo, theme
switcher, cover placeholder, like/comment counts, lightbox controls, back
links) and add leading icons to key controls. Decorative icons are
aria-hidden; icon-only buttons get labels; theme toggles expose
aria-pressed; counters get accessible names.

Recorded in openspec change material-icons-ui (all tasks complete).
This commit is contained in:
iu
2026-10-10 13:19:29 +03:00
parent 84ce4d1930
commit 997ec5e6c1
21 changed files with 582 additions and 69 deletions
@@ -0,0 +1,35 @@
# Tasks
## 1. Ядро иконочной системы
- [x] 1.1 Создать `frontend/src/lib/icons/registry.ts`: записи `имя -> { path, filled?, label? }` с вендоренной inner-разметкой Material Symbols; проверить, что реестр импортируется без ошибок и содержит все иконки из инвентаря
- [x] 1.2 Реализовать `Icon.svelte` (пропсы `name`, `label`; `aria-hidden`/`focusable`, `role=img` при `label`, классы размера, `fill=currentColor`); проверить рендер известного и неизвестного имени (dev-warn)
- [x] 1.3 Реализовать `IconSprite.svelte` (один скрытый `<svg>` со всеми `<symbol id="i-...">` из реестра) и смонтировать его в `+layout.svelte`; проверить, что `<use>` в дочерних компонентах разрешается
- [x] 1.4 Реализовать `IconButton.svelte` с обязательным `label` (-> `aria-label` на `<button>`); проверить доступное имя в дереве доступности
## 2. Замена эмодзи и юникод-глифов
- [x] 2.1 `ThemeSwitcher`: заменить `☀️ 🌙 🌾 💻` на `light_mode`/`dark_mode`/`palette`/`brightness_auto`; проверить переключение тем и `aria-pressed`
- [x] 2.2 Логотип в `+layout.svelte`: заменить `📷` на `photo_camera` рядом с текстом «Galo»; проверить отображение в трёх темах
- [x] 2.3 Список альбомов: заменить `🖼️` на `image` (крупный плейсхолдер); проверить вёрстку карточки
- [x] 2.4 `PhotoGrid`: заменить `♥`/`💬` на `favorite`/`favorite_fill` и `mode_comment`; проверить счётчики и состояние «лайкнут»
- [x] 2.5 `Lightbox`: заменить `✕ ‹ ›` на `close`/`chevron_left`/`chevron_right`; проверить навигацию и закрытие
- [x] 2.6 Ссылки «назад к альбому» (участники, настройки): заменить `←` на `arrow_back`; проверить навигацию
## 3. Ведущие иконки контролов
- [x] 3.1 Список альбомов и страница альбома: добавить `add`/`photo_library` (создать, пустой список); проверить создание альбома
- [x] 3.2 `Uploader`: `cloud_upload`/`add_photo_alternate`; проверить загрузку фото
- [x] 3.3 `Lightbox`/share: `download`; проверить скачивание
- [x] 3.4 Участники/настройки: `group`, `settings`, `add_link`, `link_off`, `save`, `delete_forever`; проверить роли, share-ссылки, сохранение и удаление
- [x] 3.5 Навигация и вход: `login`, `logout`, `check`, `send`, `delete`, `content_copy`, `expand_more`; проверить login/logout, инвайт и комментарии
## 4. Доступность
- [x] 4.1 Проставить `aria-hidden="true" focusable="false"` декоративным иконкам и `aria-label` иконочным кнопкам; проверить через дерево доступности браузера
- [x] 4.2 Дать счётчикам лайков/комментариев доступные имена (`aria-label="N лайков"`); проверить, что число читается скринридером
## 5. Проверка
- [x] 5.1 Собрать фронтенд (`make frontend`) и прогнать `svelte-check`; проверить отсутствие ошибок типов и сборки
- [x] 5.2 Playwright-проверка: иконки отрисованы, эмодзи/юникод-глифы в разметке отсутствуют; проверить на трёх темах