Skip to content

feat(ui): align Community actions with Lucide icons - #2249

Merged
openai0229 merged 9 commits into
mainfrom
feat/2248-lucide-icons
Jul 27, 2026
Merged

feat(ui): align Community actions with Lucide icons#2249
openai0229 merged 9 commits into
mainfrom
feat/2248-lucide-icons

Conversation

@openai0229

@openai0229 openai0229 commented Jul 27, 2026

Copy link
Copy Markdown
Contributor

Related issue

Closes #2248

Summary

Replace mixed legacy iconfont and Ant Design glyphs with Lucide icons across affected Community navigation, chat, MySQL account tree, pagination, directional controls, and local SQL file surfaces. Dashboard uses ChartNoAxesCombined, created from Lucide official node data through createLucideIcon because the current direct lucide-react@0.356.0 dependency predates its named export. Main-navigation glyphs use 18px sizing; file-toolbar actions keep stable 24px boxes with 16px glyphs; and the collapsed Community settings trigger centers its existing 24px Logo in the same 34px target as navigation.

Project-owned directional actions now use Lucide chevrons, including paired chevrons for pagination boundaries. The local-file tree uses one state-aware action: ChevronsUpDown expands directory nodes already loaded in the frontend, while ChevronsDownUp collapses the tree. It does not recursively fetch unopened directories. Community Web continues to hide the desktop-only Files capability.

Affected surfaces

  • Frontend / Web
  • Backend / API / Storage
  • Database plugin / Driver
  • JCEF / Desktop packaging
  • CI / Build / Release
  • Documentation only

Verification

  • Commands and results:
    • yarn install --frozen-lockfile - passed; lockfile unchanged.
    • Targeted ESLint for all 17 changed TSX files in the directional-icon follow-up - passed.
    • Targeted ESLint for the CommunityMainPage Dashboard follow-up - passed.
    • yarn test:i18n - passed after updating Spanish and Korean translations and their English source hashes.
    • yarn run lint - passed; ESLint and Stylelint completed with zero warnings.
    • yarn run build:web:community --app_version=0.0.0 - passed; related frontend tests passed and Webpack compiled successfully.
    • git diff --check - passed.
  • Manual verification: Served the runtime code from an isolated Community Web preview on the final runtime commit; /workspace returned HTTP 200 and Webpack hot compilation completed. The final follow-up commit changes only i18n source hashes. Automated browser inspection was unavailable, so final visual review remains manual.
  • UI evidence: N/A - screenshots were used during local iteration but are not included in the repository.

Risk and compatibility

  • Public API or stored data: N/A - no API, schema, or persisted-data changes.
  • Database or driver compatibility: N/A - no database plugin or driver behavior changes.
  • Network, privacy, or security: N/A - presentation and local frontend state changes only.
  • Community / Local / Pro boundary: The local-file tree remains backed by Desktop JCEF and the standard Community Web build still hides Files. Expand all only updates keys for directory nodes already present in frontend state.
  • Backward compatibility: Existing navigation keys, action boxes, disabled states, and click handlers are preserved. The file-tree action intentionally adds loaded-node expand-all behavior while retaining collapse-all and its existing shortcut.

Reviewer map

  • Start here: chat2db-community-client/src/pages/main/workspace/components/LocalSQLFileTree/index.tsx for the state-aware expand/collapse action, src/components/Pagination/index.tsx for boundary navigation, src/components/SQLEditor/editor/MonacoEditor/ContentDiffViewer.tsx for imperative Lucide SVG rendering, and src/pages/main/CommunityMainPage.tsx for the Dashboard icon mapping and navigation/settings sizing.
  • Failure condition: Any icon renders blank, points in the wrong direction, changes control dimensions, causes compact controls to overflow, recursively loads unopened file directories, or changes another runtime's settings Logo size.
  • Rollback or disable path: Revert the commits in this PR to restore the prior iconfont and sizing behavior.

Contributor declaration

  • I linked the Issue that defines this change.
  • I tested the affected behavior and reported the actual results above.
  • I did not include credentials, private data, or generated build output.
  • I disclosed substantial AI assistance below, or this PR contains no substantial AI-generated code.

AI assistance: Substantial AI assistance was used to inspect the affected frontend paths, select and apply Lucide icon mappings, implement the loaded-node expand/collapse state, refine icon sizing, run verification, and prepare the Issue and PR. The resulting diff and runtime boundary were reviewed locally.

@openai0229

Copy link
Copy Markdown
Contributor Author

Follow-up ff5b7d33 aligns selector and group chevrons across the AI input, Basic Settings, Editor Settings, and Shortcut Settings surfaces. Selector arrows now use Lucide ChevronDown at 14px; shortcut groups use ChevronDown / ChevronRight in a stable 14px box. Targeted ESLint, full frontend lint, build:web:community --app_version=0.0.0, git diff --check, knowledge lint, and live HTTP checks for 10825/api/system, 8890/api/system, and 8890/workspace all passed.

@openai0229
openai0229 merged commit d882beb into main Jul 27, 2026
16 checks passed
@openai0229 openai0229 moved this from In Review to Done in Chat2DB Community Jul 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

Align Community navigation and tree actions with Lucide icons

1 participant