Description
Following a comprehensive UI/UX review of the Querya workspace, data grid, and staging workflows, several polish and usability improvements have been identified to enhance visual consistency, ergonomics, and theme integration.
Proposed UI/UX Improvements
1. Theme Color Tokens in Filter Suggestions Overlay
- File: lib/features/workspace/data_grid_filter_bar.dart
- Problem: Background color in the auto-complete suggestions overlay uses hardcoded hex colors (0xFF1E1E22 / 0xFFFFFFFF) instead of semantic theme tokens (colorScheme.popover / colorScheme.card). In non-default themes (e.g. Nord, Solarized, Catppuccin), the suggestions popup clashes with the theme palette.
- Fix: Use colorScheme.popover and colorScheme.popoverForeground / colorScheme.border.
2. Disambiguate Export vs. Database Save Labels
- File: lib/features/workspace/results_tab.dart
- Problem: The export toolbar dropdown is currently labeled Save ▾. When editing tables with the staging buffer active, users see two adjacent "Save" controls: Save Changes (green button that applies mutations to the database) and Save ▾ (which exports rows to a local file). This causes confusion.
- Fix: Rename Save ▾ to Export ▾ to clearly distinguish disk export from database persistence.
3. Staging Toolbar Button Hover & Tooltips with Hotkeys
- File: lib/features/workspace/data_grid_staging_toolbar.dart
- Problem: Toolbar buttons (Add Row, Delete Row, Revert All) currently use raw GestureDetector without hover highlights or informative tooltips. Users cannot tell if buttons are active or what hotkeys are available.
- Fix: Add subtle hover background highlights and tooltips with shortcuts (Ctrl+Delete / Cmd+Backspace, Ctrl+Z, etc.).
4. Quick Filter Bar Ergonomics (Escape to Close)
- File: lib/features/workspace/data_grid_filter_bar.dart, lib/features/workspace/results_tab.dart
- Problem: Pressing Escape when the filter text is empty or suggestions are hidden does not collapse the filter bar, forcing the user to reach for the mouse to hide it.
- Fix: Add an onClose callback or collapse the filter bar on Escape when the field is already cleared.
Acceptance Criteria
- Filter suggestions overlay uses semantic theme tokens.
- Export menu button labeled as Export ▾.
- Staging toolbar buttons have hover states and tooltips with shortcut hints.
- Filter bar can be dismissed via keyboard shortcut (Esc when empty).
- Existing tests pass, no visual regressions.
Reactions are currently unavailable
Description
Following a comprehensive UI/UX review of the Querya workspace, data grid, and staging workflows, several polish and usability improvements have been identified to enhance visual consistency, ergonomics, and theme integration.
Proposed UI/UX Improvements
1. Theme Color Tokens in Filter Suggestions Overlay
2. Disambiguate Export vs. Database Save Labels
3. Staging Toolbar Button Hover & Tooltips with Hotkeys
4. Quick Filter Bar Ergonomics (Escape to Close)
Acceptance Criteria