mirror of
https://github.com/onyx-dot-app/onyx.git
synced 2026-10-22 11:22:49 -05:00
roshan
1257f6bb44
## Description **Targets main.** This is the first of four cleanup PRs (#16240, #16241, #16242, #16243) that fix the design-system violations that #16234 (merged) put in the warn-only baseline. This PR replaces `lucide-react` and `react-icons` with `@opal/icons`. ### Before and after 10 files imported `lucide-react` (3) or `react-icons` (7). This PR migrates them all, except for 3 icons that have no Opal match. Three files are now clean of the design-system rules, so they are removed from the baseline in `web/.oxlintrc.json`: - `src/app/admin/agents/CollapsibleSection.tsx` - `src/app/app/message/messageComponents/interfaces.ts` - `src/views/admin/connectors/FederatedDetailPage/index.tsx` ### Changes (all under `web/src/`) | File | Old | New | | --- | --- | --- | | `app/admin/agents/CollapsibleSection.tsx` | `FiSettings` | `SvgSettings` (size 16 kept) | | `app/admin/bots/[bot-id]/channels/SlackChannelConfigFormFields.tsx` | lucide `AlertCircle` | `SvgAlertCircle` (classes kept) | | `app/admin/documents/feedback/DocumentFeedbackTable.tsx` | `FiEye`, `FiEyeOff` | `SvgEye`, `SvgEyeOff` | | `app/admin/documents/sets/page.tsx` | `FiCheckCircle`, `FiClock`, `FiAlertTriangle`, `FiLock`, `FiEdit2` | The matching `Svg*` icons; `FiEdit2` becomes `SvgEdit` | | `app/app/message/errorHelpers.tsx` | lucide `AlertCircle`, `Clock`, `Lock`, `Server` | The matching `Svg*` icons | | `app/app/message/messageComponents/interfaces.ts` | `IconType` from `react-icons` | `IconFunctionComponent \| null`. No caller passes a react-icons icon any more | | `app/app/message/messageComponents/toolDisplayHelpers.tsx` | `FiTool`, `FiCircle` | `SvgWrench`, `SvgCircle` | | `app/ee/admin/performance/query-history/[id]/page.tsx` | `FiBook` | `SvgBook` | | `app/ee/admin/standard-answer/page.tsx` | `FiTag` | `SvgTag` (size 16) | | `views/admin/connectors/FederatedDetailPage/index.tsx` | lucide `Loader2` | `SvgLoader` (classes kept) | ### Kept on purpose (no matching Opal icon) These sites still trip the rule and stay in the baseline. Each needs an icon added to `web/lib/opal/src/icons/` from Figma first: - `Wifi` in `errorHelpers.tsx`: Opal has no wifi or signal icon. - `FiUnlock` in `documents/sets/page.tsx`: Opal has `lock` but no unlock icon. The lock and unlock icons in that table now come from different sets. - `FiList` in `toolDisplayHelpers.tsx`: no Opal icon has the same bullet-list shape (`list-tree`, `list-check` and `text-lines` all differ). ### Visual differences reviewers should check - **Size:** react-icons default to `1em`, but Opal icons have no default size, so I set an explicit size from the text size around each icon: - `SvgEye`/`SvgEyeOff` are 12 (they sit in `text-xs`). - `SvgBook` is 14 (it sits in `text-sm`). - `SvgEdit` is 16. Its button sets no text size, so this one is a guess. - **Stroke:** lucide icons use stroke width 2, and Opal icons use 1.5, so lines look slightly thinner. - **`FiEdit2` to `SvgEdit`:** Opal's pencil has an underline. - **`FiCircle` to `SvgCircle`:** the Opal circle is smaller (r=4 in a 16 box, where the old one was r=10 in a 24 box). It is only the fallback when there are no packets, and `ReasoningRenderer` already uses `SvgCircle`. ## How Has This Been Tested? - oxlint: in the changed files, only the 3 icons listed above still report. The full run has 0 errors. - `bun run types:check`: no type errors, and type coverage stays at 99.04%. - pre-commit (oxfmt, oxlint) passes on the changed files. ## Additional Options - [ ] [Optional] Please cherry-pick this PR to the latest release version. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated icons across admin pages, document controls, chat tools, and message error states for a more consistent appearance. * Loading indicators, visibility controls, and error-state behavior remain unchanged. <!-- end of auto-generated comment: release notes by coderabbit.ai -->