Skip to content

ui(icons): unify mini-icon system for trees and shared chrome #472

Description

@ZhuchkaTriplesix

Problem

Mini icons across Querya Desktop are almost entirely ad-hoc material.Icon(..., size: N) with no shared semantic registry or size tokens. Lucide / shadcn icon wrappers exist in vendored shadcn_flutter but are unused in lib/.

This causes the same UI roles to render differently by surface (native tree vs SDUI vs toolbars) and makes density / branding hard to keep consistent.

Scope

1. Shared icon layer

  • Introduce a small semantic icon map (e.g. QueryaIcons / AppIcons) for tree + chrome roles: database, schema, table, view, function, sequence, index, folder, expand, error, loading affordance, etc.
  • Centralize size tokens for mini roles (tree leaf / group / expand / toolbar / menu) instead of scattered 12|13|14|16|18.
  • Keep Material as the glyph source for now (or explicitly decide Lucide) — avoid mixing families without a rule.

2. Connections / object trees

Align entity → icon across drivers and reuse one row chrome path where possible:

Role Current drift
Table leaf PG reuses table_chart; MySQL/SQLite use grid_on
View Tree view_agenda_rounded vs SDUI visibility_outlined
Schema Only PG uses diamond_outlined (outlined among rounded)
Expand / spinner 13 vs 14; spinner 10–14
Errors Mongo has error_outline; PG/MySQL often text-only
Redis DB rows Custom InkWell — bypasses _PgTreeRow
SDUI extension tree Separate outlined map at size 16 (sdui_tree_builder.dart)

Key files:

  • lib/features/connections/connections_panel_pg_tree.dart (_PgTreeRow)
  • lib/features/connections/connections_panel_{mysql,sqlite,redis,mongo,extension}.dart
  • lib/core/sdui/sdui_tree_builder.dart
  • lib/features/connections/driver_icon.dart (PNG brands — keep)

3. Deduplicate connection-type icons

ConnectionType / driver → icon maps are copied in:

  • connections_panel.dart
  • new_connection_dialog.dart
  • workspace_empty_hero.dart

Collapse to one source (ideally next to DriverIcon).

4. Broader chrome (light pass)

Apply the same size tokens to toolbars, title-bar menu leadings, toasts, and dialog headers so mini icons don’t jump between 15–24 without reason. Tab strip can stay text-only unless we deliberately add icons later.

Non-goals

  • Full Lucide migration of the app
  • Redesigning driver PNG brand marks
  • Changing tree information architecture / labels

Acceptance criteria

  • One semantic icon map used by PG/MySQL/SQLite/Mongo/Redis trees and SDUI string→icon mapping
  • Shared size tokens for tree mini icons (leaf / group / expand) and documented toolbar/menu sizes
  • Connection-type icon map defined once; panel / new-connection / empty hero consume it
  • Same entity type shows the same glyph across native trees (and SDUI where the string maps to that entity)
  • Error / empty affordances in trees consistently use an icon + message pattern
  • No new Lucide/Material mix without an explicit comment/policy in the icon module

References

Post-0.4.11-b UI pass; related surfaces shipped under shell UX / connections panel.

Metadata

Metadata

Labels

enhancementNew feature or requestuiUser interface components and widgets

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions