Skip to content

epic(ui): harden desktop shell UX, accessibility, and visual consistency #339

Description

@ZhuchkaTriplesix

Описание задачи (Epic)

Аудит текущего Querya Desktop против продуктовой базы знаний показал, что базовая UI-архитектура уже сформирована (shadcn, workbench/editor theme layers, UI scale, motion tokens, reduced motion), но desktop shell пока содержит маркетинговый empty state, визуально и функционально ложные controls, слабую keyboard/screen-reader accessibility и несколько обходов общей дизайн-системы.

Цель эпика — привести оболочку приложения и общие UI-компоненты к минималистичному IDE-like интерфейсу Querya: предсказуемому, task-oriented, доступному и одинаковому во всех темах.

Источники требований

  • obsidian/Querya/Querya/04 — Расширения/Единый UI-стандарт для драйверов и расширений.md
  • obsidian/Querya/Querya/02 — Архитектура/Единообразие дерева подключений.md
  • obsidian/Querya/Querya/03 — Система тем/Анимации и высокая частота.md
  • obsidian/Querya/Querya/03 — Система тем/Система тем.md
  • obsidian/Querya/Querya/05 — Релизы/Чеклист релиза.md

Паритет driver workspaces и SDUI/RPC уже отслеживается отдельно в #322#326; этот эпик не должен дублировать их scope.

Найденные проблемы

1. Empty workspace не ориентирован на рабочий сценарий

WorkspaceEmptyHero занимает небольшую часть большого workspace и показывает marketing copy, декоративный mock editor и ссылки на файлы документации. Для desktop DB-клиента primary flow должен вести к подключению или открытию локальной БД.

Дополнительно текст calm dark interface неверен при Light/System theme.

2. Ложные или мёртвые controls

  • fallback-вкладка Query History показывает Coming Soon, хотя рабочий showSqlQueryHistoryDialog уже используется в driver workspaces;
  • fallback-кнопка Execute/Refresh (F5) всегда disabled;
  • меню показывает Shift+Ctrl+N, но shortcut не зарегистрирован;
  • search icon в title bar визуально выглядит интерактивным, но не имеет действия.

3. Недостаточная accessibility

  • кастомные tabs построены на GestureDetector без tab semantics, focus state и keyboard navigation;
  • resize handles управляются только drag-мышью и не имеют semantic label/keyboard actions;
  • отсутствуют semantics/widget tests для основных shell-компонентов.

Reduced motion уже реализован и должен сохраниться.

4. Общая дизайн-система применяется непоследовательно

  • часть overlays использует showAppDialog с blur/scale, часть — Material showDialog / AlertDialog;
  • часть уведомлений использует Material Snackbar вместо общего toast pattern;
  • Redis/Mongo views содержат hardcoded status/type colors вместо theme/workbench tokens;
  • showAppDialog должен иметь однозначно проверенное поведение barrierDismissible.

5. Недостаточная visual QA

  • в репозитории нет golden tests и эталонных desktop screenshots;
  • assets/images/ объявлен в pubspec.yaml, но source assets и fallback-поведение необходимо проверить чистой сборкой;
  • sidebar width не сохраняется между запусками;
  • глобальный read-only state недостаточно заметен в window chrome.

Предлагаемые workstreams

  • UI-S1 — Task-oriented empty state: заменить marketing-first hero на быстрые действия New Connection, New from URL, Open SQLite file, recent connections; убрать theme-dependent copy.
  • UI-S2 — Honest controls: подключить существующую Query History либо удалить fallback-tab; реализовать/скрыть disabled Execute; зарегистрировать заявленный shortcut; сделать search action рабочим или убрать декоративную иконку.
  • UI-S3 — Keyboard & semantics baseline: добавить focus/semantics/keyboard navigation для tabs, icon actions и resize handles.
  • UI-S4 — Overlay and feedback consistency: унифицировать dialogs через общий helper, уведомления через общий toast API, проверить dismiss behavior.
  • UI-S5 — Theme-token cleanup: заменить hardcoded UI colors в Redis/Mongo на semantic theme/workbench tokens и проверить Dark/Light/imported themes.
  • UI-S6 — Shell persistence and state visibility: сохранять sidebar width; добавить ненавязчивый persistent read-only indicator.
  • UI-S7 — Visual regression baseline: добавить golden/semantics tests и поддерживаемые screenshots основных состояний.
  • UI-S8 — Asset integrity: проверить clean build, восстановить отсутствующие database icons либо гарантировать единый fallback во всех местах.

Место в коде (ориентир)

  • lib/features/main_screen/workspace_empty_hero.dart
  • lib/features/main_screen/workspace_panel.dart
  • lib/features/main_screen/querya_window_title_bar.dart
  • lib/features/main_screen/main_screen.dart
  • lib/shared/widgets/app_dialog.dart
  • lib/features/redis/
  • lib/features/mongodb/
  • lib/core/theme/
  • test/features/main_screen/
  • pubspec.yaml, assets/images/

Acceptance Criteria

  • Empty workspace предоставляет прямой путь к основным first-run действиям и корректно выглядит в Dark/Light/System themes.
  • В shell нет controls, обещающих недоступное действие или незарегистрированный shortcut.
  • Tabs и resize handles доступны с клавиатуры, имеют видимый focus и корректные semantics.
  • Все общие dialogs/confirmations/notifications используют согласованные Querya patterns и motion tokens.
  • Status/type colors читаются из semantic theme tokens и сохраняют достаточный контраст в bundled/imported themes.
  • Sidebar width восстанавливается после перезапуска; read-only state виден без открытия меню.
  • Clean Linux/Windows/macOS build не содержит missing-asset ошибок для database icons.
  • Добавлены golden/semantics tests для empty state, title bar, tabs и dialogs; существующие layout/motion tests остаются зелёными.
  • Проверено отсутствие overflow при минимальном размере окна и UI scale 75–150%.

Scope

  • Scope: desktop
  • Component: App Shell / Shared UI / Accessibility / Themes
  • Kind: epic / UX hardening

Metadata

Metadata

Labels

accessibilityReduced motion, OS accessibility preferencesepicEpic / umbrella issueqaTheme parser epic label: qauiUser interface components and widgets

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions