style: apply linear design system across all components#99
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughReplaces many hardcoded Tailwind color utilities with theme token classes and component utilities, adds global Tailwind component layer and new theme tokens (including Inter font), narrows root content width, and forces the persisted/default app theme to "dark". Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 16
Note
Due to the large number of review comments, Critical, Major severity comments were prioritized as inline comments.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (8)
src/components/UpdateChecker.tsx (2)
150-156:⚠️ Potential issue | 🟡 Minor
dark:hover:bg-gray-600on an alpha surface produces a jarring hover jump.Line 152 sets dark base to
dark:bg-white/[0.04](≈4% white overlay) but dark hover todark:hover:bg-gray-600(solid#4b5563). Hovering flips a near-transparent chip to a solid mid-gray — visually inconsistent with the alpha-overlay system the PR adopts elsewhere (e.g.,.btn-subtle,.btn-ghostinsrc/index.cssusewhite/10hover).🎨 Suggested fix
- className="px-4 py-2 bg-gray-200 dark:bg-white/[0.04] text-gray-700 dark:text-text-secondary rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors" + className="px-4 py-2 bg-gray-200 dark:bg-white/[0.04] text-gray-700 dark:text-text-secondary rounded-lg hover:bg-gray-300 dark:hover:bg-white/10 transition-colors"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/UpdateChecker.tsx` around lines 150 - 156, The dark-mode hover on the "Later" button in UpdateChecker.tsx uses a solid color (dark:hover:bg-gray-600) which causes a visual jump from the alpha base (dark:bg-white/[0.04]); update the hover to an alpha white overlay (e.g., dark:hover:bg-white/[0.10] or white/10) to match the project’s subtle/ghost button pattern (look for the button element in UpdateChecker.tsx and replace the dark:hover:bg-gray-600 token with a white alpha hover such as dark:hover:bg-white/[0.10]).
73-89:⚠️ Potential issue | 🟡 MinorPrimary CTAs and the icon badge were not migrated — still blue in dark mode.
The "Check for Updates" button (Line 76) and "Download Now" button (Line 145) remain
bg-blue-600 hover:bg-blue-700in both modes, and the Package icon circle (Line 105) is stillbg-blue-100 dark:bg-blue-900. Since the PR's stated intent is "Primary accent colors transition from blue to violet", these are the most visible accents and should likely bebg-brand-violet hover:bg-brand-hover(anddark:bg-brand-violet/20for the badge). Otherwise the violet bullet (Line 133) sits next to a blue icon-badge and blue CTA in the same dialog.Also applies to: 105-107, 143-149
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/UpdateChecker.tsx` around lines 73 - 89, Update the primary CTA and icon badge color classes in UpdateChecker.tsx so they use the new violet accent: replace occurrences of bg-blue-600 and hover:bg-blue-700 on the "Check for Updates" button (the JSX that calls checkForUpdates and uses isChecking) and the "Download Now" button with bg-brand-violet and hover:bg-brand-hover; also replace the package icon circle class bg-blue-100 dark:bg-blue-900 with dark:bg-brand-violet/20 (or bg-brand-violet/20 for light mode if needed) and update any matching blue classes near the violet bullet (the icon-badge and CTA JSX blocks referenced around the Package icon and the Download button) to the new brand-violet classes so the accent colors are consistent.src/components/LoginScreen.tsx (1)
201-208:⚠️ Potential issue | 🟡 MinorDark-mode link hover reverts from violet → blue-300.
Line 205's class list
dark:text-brand-violet dark:hover:text-blue-300means the link is violet at rest but hovers to a blue color in dark mode — an off-palette jump. Either keep the whole hover chain in violet (dark:hover:text-brand-hover) or keep the full link blue.🎨 Suggested fix
- className="text-blue-600 hover:text-blue-700 dark:text-brand-violet dark:hover:text-blue-300 text-sm font-medium hover:underline" + className="text-blue-600 hover:text-blue-700 dark:text-brand-violet dark:hover:text-brand-hover text-sm font-medium hover:underline"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/LoginScreen.tsx` around lines 201 - 208, In LoginScreen.tsx update the anchor's dark-mode hover class so dark hover color matches the resting violet; locate the <a> tag in the LoginScreen component (the link with text from t('在GitHub上创建token →', ...)) and replace the class token dark:hover:text-blue-300 with the violet hover token (e.g. dark:hover:text-brand-hover) so dark:text-brand-violet and the hover state use the same palette, or alternatively remove the dark: prefix from both color classes to keep the link fully blue—ensure the final class list is consistent (rest and hover) for dark mode.src/components/UpdateNotificationBanner.tsx (1)
29-67:⚠️ Potential issue | 🟡 MinorPartial migration: violet icon/close-button stranded inside an otherwise all-blue banner.
The Package icon (Line 34) and close button (Line 63) were switched to
dark:text-brand-violet, but the surrounding container, badge circle, heading, body text, hover background, and the primary "Download" button are all stillblue-50/100/200/300/600/700/800/900. In dark mode, a lone violet element now sits on a blue chip — visually inconsistent with the rest of the PR's migration. Either complete the migration (container →dark:bg-panel-dark+ tokens, Download →bg-brand-violet hover:bg-brand-hover), or leave the icon/close as blue to match the banner.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/UpdateNotificationBanner.tsx` around lines 29 - 67, The banner has a partial theme migration: the Package icon and close X are using dark:text-brand-violet but the rest of the banner remains blue, so either revert those two to blue or complete the migration; update the UpdateNotificationBanner component to complete the migration by replacing blue dark tokens with panel/brand tokens (change container dark:bg-blue-900/20 → dark:bg-panel-dark, border dark:border-blue-800 → dark:border-panel-border, badge dark:bg-blue-900 → dark:bg-panel-dark, heading/body text dark:text-blue-100/300 → dark:text-panel-foreground, download button bg/hover blue → bg-brand-violet and hover:bg-brand-hover) so the violet icon and close button match the rest, or alternatively revert the Package and X classes back to the original blue classes to keep the banner consistent.src/components/AssetFilterManager.tsx (1)
146-170:⚠️ Potential issue | 🟡 MinorHover & accent migrations are incomplete on the toggle/expand header.
Line 148: base bg moved to
dark:bg-white/[0.04]but hover stilldark:hover:bg-gray-600— a large step up in lightness that jumps the panel color on hover.
Line 155: expanded accent usesdark:text-brand-violet, but line 214 below keepsdark:hover:text-blue-400for the Reset button.Suggest replacing
dark:hover:bg-gray-600→dark:hover:bg-white/10, anddark:hover:text-blue-400→dark:hover:text-brand-violetfor consistency across this component.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/AssetFilterManager.tsx` around lines 146 - 170, The header toggle's dark-mode hover and accent classes are inconsistent: update the button that toggles expansion (uses setIsExpanded/isExpanded and renders Filter, ChevronUp/ChevronDown) to replace dark:hover:bg-gray-600 with dark:hover:bg-white/10 so hover doesn't jump, and also update the component's Reset button (the reset control that currently uses dark:hover:text-blue-400) to use dark:hover:text-brand-violet so the expanded accent dark:text-brand-violet matches hover styling across the component; locate these class strings in the toggle button and the Reset button and swap them accordingly.src/components/CategorySidebar.tsx (1)
538-571: 🛠️ Refactor suggestion | 🟠 MajorExpanded desktop category buttons were missed in the token migration.
The mobile (lines 349-377) and collapsed (lines 444-457) variants of the same category row were migrated to the new tokens, but this expanded-view block still uses the old palette for the selected and drag-target states:
- Line 542:
dark:bg-blue-900 dark:text-blue-300(selected)- Line 544:
dark:bg-green-900 dark:text-green-300(drag target)- Line 564:
dark:bg-blue-800 dark:text-blue-200(selected badge)- Line 566:
dark:bg-green-800 dark:text-green-200(drag-target badge)- Line 567:
dark:bg-gray-600(idle badge)The same row will therefore look different depending on whether the sidebar is collapsed or expanded. Align these with the tokens already used in the mobile/collapsed variants.
🎨 Proposed fix
- className={`flex w-full items-center justify-between px-3 py-2.5 rounded-lg text-left transition-all duration-200 ease-out ${ - isSelected - ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300' - : isDragTarget - ? 'bg-green-100 text-green-700 ring-2 ring-green-400 dark:bg-green-900 dark:text-green-300' - : 'text-gray-700 dark:text-text-secondary hover:bg-gray-100 dark:hover:bg-white/10' + className={`flex w-full items-center justify-between px-3 py-2.5 rounded-lg text-left transition-all duration-200 ease-out ${ + isSelected + ? 'bg-blue-100 text-blue-700 dark:bg-white/[0.04] dark:text-text-primary' + : isDragTarget + ? 'bg-green-100 text-green-700 ring-2 ring-green-400 dark:bg-status-emerald/20 dark:text-status-emerald' + : 'text-gray-700 dark:text-text-secondary hover:bg-gray-100 dark:hover:bg-white/10' @@ - className={`text-xs px-2 py-1 rounded-full shrink-0 transition-all duration-200 ease-out ${ - isSelected - ? 'bg-blue-200 text-blue-800 dark:bg-blue-800 dark:text-blue-200' - : isDragTarget - ? 'bg-green-200 text-green-800 dark:bg-green-800 dark:text-green-200' - : 'bg-gray-200 text-gray-600 dark:bg-gray-600 dark:text-text-tertiary' + className={`text-xs px-2 py-1 rounded-full shrink-0 transition-all duration-200 ease-out ${ + isSelected + ? 'bg-blue-200 text-blue-800 dark:bg-white/10 dark:text-text-primary' + : isDragTarget + ? 'bg-green-200 text-green-800 dark:bg-status-emerald/30 dark:text-status-emerald' + : 'bg-gray-200 text-gray-600 dark:bg-transparent dark:border dark:border-white/10 dark:text-text-tertiary'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/CategorySidebar.tsx` around lines 538 - 571, The expanded desktop category row in CategorySidebar.tsx still uses old dark-palette classes on the button and badge (replace occurrences of dark:bg-blue-900, dark:text-blue-300, dark:bg-green-900, dark:text-green-300, dark:bg-blue-800, dark:text-blue-200, dark:bg-green-800, dark:text-green-200, dark:bg-gray-600) — update the button's className (the block that uses isSelected / isDragTarget) and the badge <span> (showing count) to use the same new token classes used by the mobile and collapsed variants of this category row so the expanded view matches them exactly; copy the exact token class strings from those migrated mobile/collapsed variants into the button and badge className expressions to ensure consistent dark-mode styling.src/components/SettingsPanel.tsx (2)
185-186:⚠️ Potential issue | 🟡 MinorEdge gradient masks will clash with the new panel surface.
The container now uses
dark:bg-panel-dark/95(L131), but the left/right fade masks still start fromdark:from-gray-800. In dark mode these edges will show a different color than the tab bar they're supposed to fade into, producing a visible seam.🎨 Proposed fix
- <div className="absolute left-0 top-0 bottom-0 w-4 bg-gradient-to-r from-gray-50 dark:from-gray-800 to-transparent pointer-events-none md:hidden" /> - <div className="absolute right-0 top-0 bottom-0 w-4 bg-gradient-to-l from-gray-50 dark:from-gray-800 to-transparent pointer-events-none md:hidden" /> + <div className="absolute left-0 top-0 bottom-0 w-4 bg-gradient-to-r from-gray-50 dark:from-panel-dark to-transparent pointer-events-none md:hidden" /> + <div className="absolute right-0 top-0 bottom-0 w-4 bg-gradient-to-l from-gray-50 dark:from-panel-dark to-transparent pointer-events-none md:hidden" />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/SettingsPanel.tsx` around lines 185 - 186, In SettingsPanel.tsx the left/right gradient mask divs still use dark:from-gray-800 which creates a visible seam against the container background (dark:bg-panel-dark/95); update both gradient classes (the two divs with bg-gradient-to-r and bg-gradient-to-l) to use the same dark start color as the panel (e.g. replace dark:from-gray-800 with dark:from-panel-dark/95 or the appropriate panel token) so the edge fades match the panel surface in dark mode.
177-177:⚠️ Potential issue | 🟡 MinorIndicator color inconsistent with tab text.
The active tab text switched to
dark:text-brand-violet(L161), but the underline indicator below still usesdark:bg-blue-400. They should share the accent color so the indicator tracks the tab text.🎨 Proposed fix
- className="absolute bottom-0 h-0.5 bg-blue-600 dark:bg-blue-400 rounded-full transition-all duration-200 ease-out will-change-transform" + className="absolute bottom-0 h-0.5 bg-blue-600 dark:bg-brand-violet rounded-full transition-all duration-200 ease-out will-change-transform"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/SettingsPanel.tsx` at line 177, The underline indicator element in SettingsPanel (the element with className "absolute bottom-0 h-0.5 bg-blue-600 dark:bg-blue-400 rounded-full...") uses blue styles that don't match the active tab text which uses dark:text-brand-violet (around the active tab class near L161); update the indicator's classes to use the same accent token as the active tab (replace bg-blue-600 and dark:bg-blue-400 with bg-brand-violet and dark:bg-brand-violet) so the underline and active tab text share the same accent color.
♻️ Duplicate comments (4)
src/components/SearchDemo.tsx (1)
66-89:⚠️ Potential issue | 🟡 MinorLegacy "View Demo" card not migrated — still fully blue/purple gradient in dark mode.
The unexpanded showcase (Lines 66–89) still uses
from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20,border-blue-200 dark:border-blue-700, andbg-blue-100 dark:bg-blue-900for the icon badge andbg-blue-600 hover:bg-blue-700for the "View Demo" button. Only the Lightbulb icon color (Line 70) was flipped to violet, matching the isolated-violet-icon pattern also seen inUpdateNotificationBanner. Either migrate the whole card or revert the icon color for consistency.Also: every
dark:border-white/8in this file (Lines 94, 135, 168, 232) is dead — see root-cause comment ontailwind.config.js.Also applies to: 83-83
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/SearchDemo.tsx` around lines 66 - 89, The "View Demo" card uses legacy blue/purple dark-mode classes while only the Lightbulb icon was flipped to violet; update the container, border, icon-badge, and button classNames to the new migrated color scheme (or revert Lightbulb to the legacy blue for consistency) by changing the classes referenced in the JSX surrounding the Lightbulb and Play usages and the onClick that calls setShowDemo (search for the div with bg-gradient-to-r and the button with onClick={() => setShowDemo(true)}); also remove all dead dark:border-white/8 class usages in this file (present near lines referenced in the review) so the component uses the new design tokens consistently.src/components/SortAlgorithmTooltip.tsx (1)
86-91:⚠️ Potential issue | 🟡 MinorTooltip arrow colors weren't migrated — arrow tip no longer matches the panel background.
Panel is now
dark:bg-panel-dark(#0f1011) withdark:border-white/8, but the arrow (Lines 89–90) still usesdark:border-b-gray-700(outline) anddark:border-b-gray-800(fill,#1f2937). The inner arrow fill is visibly lighter than the panel body now, producing a seam/miscolored tip in dark mode.🎨 Suggested fix
- <div className="w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-gray-200 dark:border-b-gray-700" /> - <div className="absolute left-1/2 -translate-x-1/2 top-0.5 w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-white dark:border-b-gray-800" /> + <div className="w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-gray-200 dark:border-b-white/10" /> + <div className="absolute left-1/2 -translate-x-1/2 top-0.5 w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-white dark:border-b-panel-dark" />Note:
dark:border-white/8on Line 86 will not emit any CSS under Tailwind's default opacity scale — see root-cause comment ontailwind.config.js. This applies to everywhite/8occurrence in this file.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/SortAlgorithmTooltip.tsx` around lines 86 - 91, In SortAlgorithmTooltip update the two arrow divs (the outer outline and inner fill triangle elements) so their dark-mode border-bottom colors match the panel: change dark:border-b-gray-700 (outline) to an explicit dark-mode translucent white (e.g. dark:border-b-[`#ffffff14`]) and change dark:border-b-gray-800 (inner fill) to the panel-dark hex (e.g. dark:border-b-[`#0f1011`]); modify both triangle divs inside the "Arrow" block so the fill equals the panel background and the outline uses the correct translucent white since dark:border-white/8 does not emit CSS.src/components/LoginScreen.tsx (1)
66-96:⚠️ Potential issue | 🟡 MinorPartial migration: gradient background, ring, disabled state, and primary CTA still on old palette.
- Line 66 page gradient is still
blue-50→indigo-100/gray-900→gray-800— not tokenized.- Line 101 logo ring
ring-blue-100 dark:ring-gray-700— not migrated.- Line 159 input disabled:
dark:disabled:bg-gray-600anddark:disabled:text-gray-400— should usedark:disabled:bg-white/[0.02]anddark:disabled:text-text-quaternary.- Line 174 primary "Connect to GitHub" CTA remains
bg-blue-600 hover:bg-blue-700in dark mode despite PR intent to move primary accent to violet.Not blocking; flagging for consistency with the PR's stated migration.
Also note: every
dark:border-white/8in this file (Lines 70, 88, 116, 159) is a dead class under Tailwind's default opacity scale — see root-cause comment ontailwind.config.js.Also applies to: 101-101, 159-159, 171-187
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/LoginScreen.tsx` around lines 66 - 96, The LoginScreen contains partially migrated color styles: the page wrapper's gradient, the logo ring, input disabled styles, and the primary "Connect to GitHub" button still use old hard-coded palettes and the dead class dark:border-white/8; update these to use the new design tokens and valid Tailwind utilities. Specifically, in the main wrapper div (the gradient at the top), replace blue-50→indigo-100 / gray-900→gray-800 with the new token classes for page background gradient; update the logo ring (ring-blue-100 dark:ring-gray-700) to the tokenized ring classes; change input disabled classes from dark:disabled:bg-gray-600 and dark:disabled:text-gray-400 to dark:disabled:bg-white/[0.02] and dark:disabled:text-text-quaternary; switch the primary CTA (Connect to GitHub) bg-blue-600/hover:bg-blue-700 to the new violet primary token classes; and remove or replace every dark:border-white/8 occurrence with the correct token or opacity utility (do not leave dark:border-white/8 as it is dead).src/components/FilterModal.tsx (1)
161-161:⚠️ Potential issue | 🟡 MinorSame duplicated class pattern as CategoryEditModal.
dark:bg-status-emerald/80 dark:hover:bg-status-emeraldis repeated twice in the enabled branch of the Save button. Clean up to a single occurrence.♻️ Proposed fix
- className={`px-4 py-2 rounded-lg transition-colors ${(!name.trim() || keywords.length === 0) ? 'bg-gray-300 text-gray-500 dark:bg-white/5 dark:text-text-tertiary cursor-not-allowed' : 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-status-emerald/80 dark:hover:bg-status-emerald dark:bg-status-emerald/80 dark:hover:bg-status-emerald'}`} + className={`px-4 py-2 rounded-lg transition-colors ${(!name.trim() || keywords.length === 0) ? 'bg-gray-300 text-gray-500 dark:bg-white/5 dark:text-text-tertiary cursor-not-allowed' : 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-status-emerald/80 dark:hover:bg-status-emerald'}`}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/FilterModal.tsx` at line 161, The Save button in the FilterModal component has duplicated Tailwind classes in its enabled branch; inside the className string (the button JSX that checks (!name.trim() || keywords.length === 0)) remove the repeated "dark:bg-status-emerald/80 dark:hover:bg-status-emerald" so each class appears only once, ensuring the enabled branch for the Save button in FilterModal.tsx contains a single occurrence of those dark-mode classes.
🟡 Minor comments (19)
src/components/SortAlgorithmTooltip.tsx-79-79 (1)
79-79:⚠️ Potential issue | 🟡 MinorHover tint mismatch: violet text over blue-tinted background.
Line 79 changes text hover to
brand-violetbut keepshover:bg-blue-50 dark:hover:bg-blue-900/30. The violet-on-blue combination clashes with the surrounding tooltip which uses violet-on-panel. Prefer a neutral hover surface likehover:bg-gray-100 dark:hover:bg-white/10.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/SortAlgorithmTooltip.tsx` at line 79, The hover styles in SortAlgorithmTooltip's icon/button (className on the element in SortAlgorithmTooltip) mix brand-violet text with blue-tinted hover backgrounds, causing a clash; change the hover background classes from hover:bg-blue-50 and dark:hover:bg-blue-900/30 to neutral surfaces like hover:bg-gray-100 and dark:hover:bg-white/10 so the brand-violet hover text sits on a neutral panel consistent with the tooltip.src/index.css-656-661 (1)
656-661:⚠️ Potential issue | 🟡 Minor
btn-primarybase is indigo but hover jumps to violet — likely intended to bebg-brand-violet.
brand-indigo(#5e6ad2) →brand-hover(#828fff) is an indigo→violet jump; the PR summary says the primary accent is moving from blue to violet. Either set the base tobg-brand-violet(#7170ff) for a smooth violet→lighter-violet hover, or renamebrand-hoverto reflect its indigo-hover intent. As-is, this is inconsistent with the rest of the PR which usesbrand-violetfor primary accents (e.g.,UpdateCheckerpill,BackToTop, tooltip highlights).♻️ Suggested alignment
.btn-primary { - `@apply` bg-brand-indigo text-white px-4 py-2 rounded-md transition-colors duration-200 border border-transparent; + `@apply` bg-brand-violet text-white px-4 py-2 rounded-md transition-colors duration-200 border border-transparent; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/index.css` around lines 656 - 661, The .btn-primary rule currently uses bg-brand-indigo while .btn-primary:hover uses bg-brand-hover (an indigo→violet jump); update the styles so the primary button uses the violet palette consistently — replace bg-brand-indigo with bg-brand-violet in the .btn-primary definition (or, if you intend the base to remain indigo, change bg-brand-hover to a consistent indigo hover token) so .btn-primary and .btn-primary:hover match the PR’s violet primary accent convention.src/components/SearchDemo.tsx-132-136 (1)
132-136:⚠️ Potential issue | 🟡 MinorSelected-state mismatch:
brand-violetborder wrapping ablue-50/blue-900fill.When a realtime example is selected, the button gets
border-brand-violetbut the fill isbg-blue-50 dark:bg-blue-900/20. The violet border visually frames a blue tint — inconsistent with the rest of the card's violet accents (pulse dots on Lines 121/190/239 usebg-brand-violet). Align the fill to a violet tint.🎨 Suggested fix
- ? 'border-brand-violet bg-blue-50 dark:bg-blue-900/20' + ? 'border-brand-violet bg-brand-violet/10 dark:bg-brand-violet/15' : 'border-gray-200 dark:border-white/8 hover:border-blue-300 dark:hover:border-blue-600'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/SearchDemo.tsx` around lines 132 - 136, The selected-state uses a blue fill while the border uses brand-violet; update the selected branch of the template string in the SearchDemo component (the className where selectedExample?.query === example.query) to use a violet background instead of blue — e.g., replace bg-blue-50 and dark:bg-blue-900/20 with matching brand-violet variants (such as bg-brand-violet-50 and dark:bg-brand-violet-900/20 or the project's equivalent utility names) so the border and fill match the violet accent.tailwind.config.js-91-115 (1)
91-115:⚠️ Potential issue | 🟡 MinorRemove the no-op shadow layer from
boxShadow.dialog.The first layer
0px 8px 2px rgba(0,0,0,0)has alpha 0 and contributes nothing visually. Remove it to simplify the declaration:Diff
- 'dialog': '0px 8px 2px rgba(0,0,0,0), 0px 5px 2px rgba(0,0,0,0.01), 0px 3px 2px rgba(0,0,0,0.04), 0px 1px 1px rgba(0,0,0,0.07), 0px 0px 1px rgba(0,0,0,0.08)', + 'dialog': '0px 5px 2px rgba(0,0,0,0.01), 0px 3px 2px rgba(0,0,0,0.04), 0px 1px 1px rgba(0,0,0,0.07), 0px 0px 1px rgba(0,0,0,0.08)',The
fontWeightvalues 510/590 are intentional and correct—Tailwind's system-ui stack uses variable fonts (SF Pro, Segoe UI Variable) that support these intermediate weights distinctly from 500/600, matching Linear's design system.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@tailwind.config.js` around lines 91 - 115, Remove the no-op first layer from the boxShadow definition for the 'dialog' key in the tailwind config: update the boxShadow.dialog value to drop the "0px 8px 2px rgba(0,0,0,0)" layer so the string begins with "0px 5px 2px rgba(0,0,0,0.01), ..." (leave the remaining dialog shadow layers unchanged). This simplifies the CSS output while keeping the dialog shadow semantics intact.src/components/MarkdownRenderer.tsx-717-717 (1)
717-717:⚠️ Potential issue | 🟡 MinorInconsistent migration:
h2andthstill use legacydark:text-gray-200.The other headings and the
tdcell migrated to the new token scale (dark:text-text-primary,dark:text-text-secondary), buth2(Line 717) andth(Line 779) are still ondark:text-gray-200. In rendered tables this is visible as header rows rendering in a slightly different shade than the body rows, and within prose h2 will look different from h1/h3.🎨 Suggested fix
- return <h2 id={id} className="text-base font-semibold text-gray-800 dark:text-gray-200 mt-3 mb-2">{children}</h2>; + return <h2 id={id} className="text-base font-semibold text-gray-800 dark:text-text-primary mt-3 mb-2">{children}</h2>; ... - <th className="border border-gray-200 dark:border-white/8 px-3 py-2 text-left font-semibold text-gray-800 dark:text-gray-200"> + <th className="border border-gray-200 dark:border-white/8 px-3 py-2 text-left font-semibold text-gray-800 dark:text-text-primary">Also applies to: 779-779
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/MarkdownRenderer.tsx` at line 717, h2 and table header cells still use the legacy "dark:text-gray-200" token; update their classNames to use the new token scale so headings and table headers match other components. In the MarkdownRenderer component, replace "dark:text-gray-200" on the h2 JSX returned (the element rendering h2) with "dark:text-text-primary", and do the same for the th element (the table header rendering) so both use "dark:text-text-primary" instead of the old gray token.src/components/AssetFilterManager.tsx-275-280 (1)
275-280:⚠️ Potential issue | 🟡 MinorCustom-filter pill hover still uses legacy
gray-600.Line 278:
dark:bg-white/[0.04] ... hover:bg-gray-200 dark:hover:bg-gray-600— same jump as the header. Preferdark:hover:bg-white/10. The preset pill on line 233 was migrated correctly; this is the only remaining occurrence.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/AssetFilterManager.tsx` around lines 275 - 280, The custom-filter pill's dark mode hover class still uses legacy "dark:hover:bg-gray-600"; update the className on the element that renders the pill (the JSX block that checks selectedFilters.includes(filter.id)) to replace "dark:hover:bg-gray-600" with "dark:hover:bg-white/10" so it matches the preset pill migration and uses the correct dark-mode hover style.src/components/DiscoverySidebar.tsx-82-86 (1)
82-86:⚠️ Potential issue | 🟡 MinorSelected channel surface is darker than the hover surface in dark mode.
Line 84 sets the selected state to
dark:bg-white/[0.04](≈4% white), but line 85 sets the hover state of unselected rows todark:hover:bg-white/5(5% white). The hover thus appears brighter than the "active" selection, which inverts the usual visual hierarchy — thering-1 dark:ring-white/10partially compensates, but the surfaces themselves still read wrong.Consider bumping the selected state (e.g.
dark:bg-white/[0.06]ordark:bg-brand-indigo/15) so that selected > hover > default.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/DiscoverySidebar.tsx` around lines 82 - 86, The selected-row background in DiscoverySidebar.tsx is currently `dark:bg-white/[0.04]`, which is dimmer than the hover `dark:hover:bg-white/5`; update the selected branch inside the className conditional for isSelected to a stronger dark-mode background (e.g., `dark:bg-white/[0.06]` or `dark:bg-brand-indigo/15`) so the selected surface reads brighter than hover while keeping the existing ring classes (modify the isSelected branch in the className string).src/components/settings/DataManagementPanel.tsx-1185-1191 (1)
1185-1191:⚠️ Potential issue | 🟡 MinorExport checkbox still uses legacy
text-blue-600.The focus ring was migrated to
focus:ring-brand-violetbut the checked-state color (text-blue-600) was left on the blue palette, so the checkmark is blue while its focus halo is violet. Usetext-brand-violet(or equivalent) to keep both in sync.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/settings/DataManagementPanel.tsx` around lines 1185 - 1191, The checkbox input's checked-state color uses the old blue class ("text-blue-600") causing a mismatch with the migrated focus ring; update the input element (the one with className "export-checkbox" and data-type={item.key}) to replace "text-blue-600" with the new token "text-brand-violet" so the checkmark color matches the existing "focus:ring-brand-violet".src/components/settings/WebDAVPanel.tsx-227-231 (1)
227-231:⚠️ Potential issue | 🟡 MinorHover state of inactive card reverts to legacy
gray-500.Default border was updated to
dark:border-white/8but the hover keptdark:hover:border-gray-500. The transition flips from the tokenized low-opacity border to a legacy mid-gray on hover, which will look like a color jump. Suggestdark:hover:border-white/20.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/settings/WebDAVPanel.tsx` around lines 227 - 231, In the className conditional for the WebDAV config card (the JSX block that compares config.id === activeWebDAVConfig), update the inactive-card hover token from dark:hover:border-gray-500 to dark:hover:border-white/20 so the dark-mode hover transitions from dark:border-white/8 to a consistent higher-opacity white token; locate the className string around the conditional that sets 'border-gray-200 dark:border-white/8 hover:border-gray-300 dark:hover:border-gray-500' and replace only the dark:hover token.src/components/settings/DataManagementPanel.tsx-1246-1250 (1)
1246-1250:⚠️ Potential issue | 🟡 Minor
dark:hover:bg-gray-600appears on several migrated surfaces.Lines 1248 (Select File), 1477 (Cancel in confirm modal), and 1568 (Cancel in import preview) all pair new
dark:bg-white/[0.04]surfaces with a legacydark:hover:bg-gray-600hover. Standardize todark:hover:bg-white/10to match what other migrated components in this PR use.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/settings/DataManagementPanel.tsx` around lines 1246 - 1250, The dark-mode hover class is inconsistent: replace legacy dark:hover:bg-gray-600 with the standardized dark:hover:bg-white/10 across the DataManagementPanel component; update the label for the import file input (the element with htmlFor="import-file-input" and text "选择文件"/"Select File"), the Cancel button in the confirm modal (Cancel text around line ~1477), and the Cancel in the import preview (Cancel text around line ~1568) to use dark:hover:bg-white/10 alongside the existing dark:bg-white/[0.04] so all migrated surfaces use the same dark hover style.src/components/settings/WebDAVPanel.tsx-240-240 (1)
240-240:⚠️ Potential issue | 🟡 MinorDark focus ring + ring-offset still on legacy palette.
The light state was moved to
focus:ring-brand-violet, but the dark state keepsdark:focus:ring-blue-600anddark:ring-offset-gray-800. Keyboard-focus rings on radios will visibly snap between violet and blue depending on theme, and the ring-offset no longer matches the migratedpanel-darksurface.Proposed fix
-className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-brand-violet dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-white/[0.04] dark:border-white/8" +className="w-4 h-4 text-brand-violet bg-gray-100 border-gray-300 focus:ring-brand-violet dark:focus:ring-brand-violet dark:ring-offset-panel-dark focus:ring-2 dark:bg-white/[0.04] dark:border-white/8"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/settings/WebDAVPanel.tsx` at line 240, The focused radio in WebDAVPanel.tsx uses mixed legacy dark tokens causing a violet/blue snap and wrong offset; update the className on the radio element (the element with the current className string) to replace dark:focus:ring-blue-600 with the migrated dark focus token (dark:focus:ring-brand-violet) and replace dark:ring-offset-gray-800 with the new dark ring-offset token that matches the migrated panel surface (e.g., dark:ring-offset-panel-dark) so both light and dark focus rings and offsets use the same brand/panel tokens.src/components/settings/DataManagementPanel.tsx-1100-1101 (1)
1100-1101:⚠️ Potential issue | 🟡 MinorDefine
panel-darkwith the<alpha-value>placeholder to enable opacity modifiers.Currently,
panel-darkis defined as a plain hex color ('#0f1011'), which prevents the/20opacity modifier from working. Tailwind silently ignores it. Change to:'panel-dark': 'rgba(15, 16, 17, <alpha-value>)'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/settings/DataManagementPanel.tsx` around lines 1100 - 1101, The custom color "panel-dark" is defined as a plain hex string which prevents Tailwind's opacity modifier (/20) from working; update the "panel-dark" entry in your theme colors (the one used by dark:bg-panel-dark/20 and referenced by bgColor) to use an rgba value with the <alpha-value> placeholder (i.e., rgba(15, 16, 17, <alpha-value>)) so Tailwind can apply opacity utilities correctly.src/components/ReadmeModal.tsx-345-350 (1)
345-350:⚠️ Potential issue | 🟡 MinorRetry button dark-mode color looks unintentional.
The button uses
bg-brand-violetin light mode but switches todark:bg-status-red/80in dark mode. A retry action isn’t destructive, and the rest of the error state (icon aside) doesn’t use the red status token — this looks like an accidental paste from a different button’s styling. Users will see a red “Retry” button only in dark mode.🎨 Proposed fix
- className="px-4 py-2 bg-brand-violet text-white rounded-lg hover:bg-brand-violet/90 dark:bg-status-red/80 dark:hover:bg-status-red transition-colors" + className="px-4 py-2 bg-brand-violet text-white rounded-lg hover:bg-brand-violet/90 transition-colors"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/ReadmeModal.tsx` around lines 345 - 350, The Retry button in ReadmeModal (the <button> that calls fetchReadme) uses bg-brand-violet for light mode but mistakenly uses dark:bg-status-red/80 and dark:hover:bg-status-red, making it red in dark mode; update the class list to use the brand violet dark variants instead (for example replace dark:bg-status-red/80 with dark:bg-brand-violet/80 and replace dark:hover:bg-status-red with dark:hover:bg-brand-violet/90 or remove the dark-specific classes so the hover:bg-brand-violet/90 applies in both themes) so the Retry button remains the non-destructive brand violet color in dark mode.src/components/settings/GeneralPanel.tsx-34-68 (1)
34-68:⚠️ Potential issue | 🟡 MinorDark focus ring overrides the new brand accent.
Both language radios now set
focus:ring-brand-violetfor light mode but still carrydark:focus:ring-blue-600 dark:ring-offset-gray-800from before the migration. The dark override wins in dark mode, so the focus indicator will be blue on the oldgray-800offset while the surrounding panel ispanel-darkwith abrand-violetaccent.🎨 Proposed fix (applies to both labels)
- className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-brand-violet dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-white/[0.04] dark:border-white/8" + className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-brand-violet dark:focus:ring-brand-violet dark:ring-offset-marketing-black focus:ring-2 dark:bg-white/[0.04] dark:border-white/8"(Adjust the offset token to whatever
RepositoryList.tsxradios use — e.g.dark:ring-offset-marketing-blackat lines 1017/1032 — so both settings match.)🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/settings/GeneralPanel.tsx` around lines 34 - 68, The radio inputs for language (the input elements with name="language" and onChange={(e) => setLanguage(...)} in GeneralPanel.tsx) still include legacy dark:focus:ring-blue-600 and dark:ring-offset-gray-800 which override the new brand accent in dark mode; update their className to replace dark:focus:ring-blue-600 with dark:focus:ring-brand-violet and replace dark:ring-offset-gray-800 with the correct dark offset token used elsewhere (e.g. dark:ring-offset-marketing-black) so both radios use dark:focus:ring-brand-violet and dark:ring-offset-marketing-black, applying the change to both label blocks.src/components/RepositoryEditModal.tsx-994-994 (1)
994-994:⚠️ Potential issue | 🟡 MinorVerify toggle track border is visible.
The toggle switch track keeps
dark:border-white/8alongside an unmodifiedafter:border-gray-300. The outer border on the track may be barely visible in dark mode (it was previously contributing depth). If this looked fine in screenshots ignore; otherwise consider bumping todark:border-white/10.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/RepositoryEditModal.tsx` at line 994, In RepositoryEditModal.tsx locate the toggle track div (the element with className containing "relative w-11 h-6 ... dark:border-white/8 ... after:border-gray-300") and update the dark-mode border to be more visible by changing dark:border-white/8 to dark:border-white/10; also add a matching dark variant for the knob border by replacing or supplementing after:border-gray-300 with a dark-aware class (e.g., after:dark:border-white/10) so both track and knob have consistent, slightly stronger borders in dark mode.src/components/settings/AIConfigPanel.tsx-618-618 (1)
618-618:⚠️ Potential issue | 🟡 MinorActive-config radio still uses legacy tokens.
Unlike the checkbox above, this radio still uses
dark:focus:ring-purple-600anddark:ring-offset-gray-800. Minor inconsistency with the token palette but likely acceptable if kept intentionally for the purple-accent "active config" affordance.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/settings/AIConfigPanel.tsx` at line 618, The radio's className in AIConfigPanel (the element using class string containing dark:focus:ring-purple-600 and dark:ring-offset-gray-800) uses legacy purple tokens; update those two classes to the project's design-token equivalents (match the same dark:focus:ring-... and dark:ring-offset-... tokens used by the checkbox in the same file) so the "active-config" radio uses the consistent token palette rather than hard-coded purple/gray values.src/components/DiscoveryView.tsx-256-256 (1)
256-256:⚠️ Potential issue | 🟡 MinorPlatform filter button keeps legacy
dark:hover:bg-gray-600.The rest of the file moved to
dark:hover:bg-white/10overlays, but this trigger still mixesdark:bg-white/[0.04](idle) withdark:hover:bg-gray-600(hover). Hover will jump to a very different shade.🎨 Proposed fix
- className="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium bg-gray-100 text-gray-700 dark:bg-white/[0.04] dark:text-text-secondary hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors" + className="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium bg-gray-100 text-gray-700 dark:bg-white/[0.04] dark:text-text-secondary hover:bg-gray-200 dark:hover:bg-white/10 transition-colors"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/DiscoveryView.tsx` at line 256, Update the platform filter button's hover color to match the rest of the file by replacing the legacy dark:hover:bg-gray-600 in the className used by the platform filter (the string containing "dark:bg-white/[0.04]" and "className=\"flex items-center...\"") with dark:hover:bg-white/10 so the dark-mode idle and hover overlays are consistent with other controls in DiscoveryView.tsx.src/components/CategoryEditModal.tsx-1101-1101 (1)
1101-1101:⚠️ Potential issue | 🟡 MinorDuplicate classes in Save-button
className.
dark:bg-status-emerald/80 dark:hover:bg-status-emeraldappears twice in the enabled branch — looks like a copy/paste artifact during the migration. Harmless at runtime but should be cleaned up.♻️ Proposed fix
- className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-colors ${hasChanges ? 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-status-emerald/80 dark:hover:bg-status-emerald dark:bg-status-emerald/80 dark:hover:bg-status-emerald' : 'bg-gray-300 text-gray-500 dark:bg-white/5 dark:text-text-tertiary cursor-not-allowed'}`} + className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-colors ${hasChanges ? 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-status-emerald/80 dark:hover:bg-status-emerald' : 'bg-gray-300 text-gray-500 dark:bg-white/5 dark:text-text-tertiary cursor-not-allowed'}`}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/CategoryEditModal.tsx` at line 1101, The Save-button's className in CategoryEditModal contains duplicated Tailwind classes in the enabled branch; remove the duplicate "dark:bg-status-emerald/80" and "dark:hover:bg-status-emerald" so each class appears only once. Edit the JSX in CategoryEditModal (the element that uses hasChanges in its className) to de-duplicate those two classes in the enabled branch, leaving the rest of the conditional styling unchanged.src/components/settings/AIConfigPanel.tsx-497-497 (1)
497-497:⚠️ Potential issue | 🟡 MinorHardcoded blue focus ring breaks brand-violet migration.
dark:focus:ring-blue-600overrides thefocus:ring-brand-violetapplied above it in dark mode. Given the PR migrates accents to violet, this is almost certainly unintended.🛡️ Proposed fix
- className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-brand-violet dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-white/[0.04] dark:border-white/8" + className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-brand-violet dark:ring-offset-gray-800 focus:ring-2 dark:bg-white/[0.04] dark:border-white/8"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/settings/AIConfigPanel.tsx` at line 497, The focus ring color is being overridden in dark mode by the utility "dark:focus:ring-blue-600" inside the AIConfigPanel component's checkbox input className; replace that token with "dark:focus:ring-brand-violet" (or remove the blue override) so the existing "focus:ring-brand-violet" styling remains consistent in dark mode, ensuring the component consistently uses the brand-violet accent.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: dbec674e-ae3f-439f-95a2-23817ed2cdb0
📒 Files selected for processing (39)
src/App.tsxsrc/components/AssetFilterManager.tsxsrc/components/BackToTop.tsxsrc/components/BulkActionToolbar.tsxsrc/components/BulkCategorizeModal.tsxsrc/components/CategoryEditModal.tsxsrc/components/CategorySidebar.tsxsrc/components/DiscoverySidebar.tsxsrc/components/DiscoveryView.tsxsrc/components/ErrorBoundary.tsxsrc/components/FilterModal.tsxsrc/components/Header.tsxsrc/components/LoginScreen.tsxsrc/components/MarkdownRenderer.tsxsrc/components/Modal.tsxsrc/components/ReadmeModal.tsxsrc/components/ReleaseCard.tsxsrc/components/ReleaseTimeline.tsxsrc/components/RepositoryCard.tsxsrc/components/RepositoryEditModal.tsxsrc/components/RepositoryList.tsxsrc/components/SearchBar.tsxsrc/components/SearchDemo.tsxsrc/components/SearchResultStats.tsxsrc/components/SearchShortcutsHelp.tsxsrc/components/SettingsPanel.tsxsrc/components/SortAlgorithmTooltip.tsxsrc/components/SubscriptionRepoCard.tsxsrc/components/UpdateChecker.tsxsrc/components/UpdateNotificationBanner.tsxsrc/components/settings/AIConfigPanel.tsxsrc/components/settings/BackendPanel.tsxsrc/components/settings/BackupPanel.tsxsrc/components/settings/CategoryPanel.tsxsrc/components/settings/DataManagementPanel.tsxsrc/components/settings/GeneralPanel.tsxsrc/components/settings/WebDAVPanel.tsxsrc/index.csstailwind.config.js
| <div className="min-h-screen bg-gray-50 dark:bg-panel-dark flex items-center justify-center p-4"> | ||
| <div className="max-w-lg w-full bg-white dark:bg-panel-dark rounded-lg shadow-lg p-6"> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Inspect tailwind config to see which token is designated for elevated card surfaces on top of panel-dark
fd -H -t f 'tailwind.config.(js|ts|cjs|mjs)' --exec cat {}Repository: AmintaCCCP/GithubStarsManager
Length of output: 5560
🏁 Script executed:
# View the ErrorBoundary.tsx file around lines 86-87
wc -l src/components/ErrorBoundary.tsxRepository: AmintaCCCP/GithubStarsManager
Length of output: 110
🏁 Script executed:
# Read the specific lines 80-95 to see the context
sed -n '80,95p' src/components/ErrorBoundary.tsxRepository: AmintaCCCP/GithubStarsManager
Length of output: 810
🏁 Script executed:
# Search for other card/modal surfaces with dark mode styling to understand the pattern
rg "bg-white dark:bg-" --type tsx --type ts -B2 -A2Repository: AmintaCCCP/GithubStarsManager
Length of output: 101
🏁 Script executed:
# Search for other dark mode card/modal patterns
rg "dark:bg-" -g "*.tsx" -g "*.ts" --max-count 20 -B 1 -A 1 | head -80Repository: AmintaCCCP/GithubStarsManager
Length of output: 7851
🏁 Script executed:
# Check lines 115-130 to see line 121 context
sed -n '115,130p' src/components/ErrorBoundary.tsxRepository: AmintaCCCP/GithubStarsManager
Length of output: 903
🏁 Script executed:
# Check lines 150-170 to see line 157 context
sed -n '150,170p' src/components/ErrorBoundary.tsxRepository: AmintaCCCP/GithubStarsManager
Length of output: 985
Card surface collapses into background in dark mode.
Both the outer wrapper (Line 86) and the card (Line 87) resolve to dark:bg-panel-dark in dark mode, eliminating the visual contrast that exists in light mode (bg-gray-50 vs bg-white). The shadow-lg alone is insufficient to maintain the card's visual separation as a modal/error overlay. Use dark:bg-surface-3 for the card to create proper elevation against the page background.
🎨 Suggested fix
- <div className="min-h-screen bg-gray-50 dark:bg-panel-dark flex items-center justify-center p-4">
- <div className="max-w-lg w-full bg-white dark:bg-panel-dark rounded-lg shadow-lg p-6">
+ <div className="min-h-screen bg-gray-50 dark:bg-panel-dark flex items-center justify-center p-4">
+ <div className="max-w-lg w-full bg-white dark:bg-surface-3 rounded-lg shadow-lg p-6">Also update the hover state on line 157's report button from dark:hover:bg-gray-600 to dark:hover:bg-white/10 for consistency with the design system pattern.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="min-h-screen bg-gray-50 dark:bg-panel-dark flex items-center justify-center p-4"> | |
| <div className="max-w-lg w-full bg-white dark:bg-panel-dark rounded-lg shadow-lg p-6"> | |
| <div className="min-h-screen bg-gray-50 dark:bg-panel-dark flex items-center justify-center p-4"> | |
| <div className="max-w-lg w-full bg-white dark:bg-surface-3 rounded-lg shadow-lg p-6"> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/ErrorBoundary.tsx` around lines 86 - 87, The card in
ErrorBoundary uses the same dark background as the outer wrapper causing
collapse; change the card's className background from dark:bg-panel-dark to
dark:bg-surface-3 so it remains elevated against the outer div (outer wrapper
keeps dark:bg-panel-dark). Also update the report button's hover class (the
button that currently uses dark:hover:bg-gray-600) to dark:hover:bg-white/10 to
match the design system hover pattern.
| .btn-ghost:focus { | ||
| @apply shadow-focus outline-none; | ||
| } |
There was a problem hiding this comment.
Accessibility: .btn-ghost:focus removes the outline but shadow-focus isn't a visible focus indicator.
shadow-focus is defined as 0px 4px 12px rgba(0,0,0,0.1) (a soft drop shadow), which on dark panels is essentially invisible and never surrounds the element. Combined with outline-none, keyboard users lose any focus indicator on every .btn-ghost in the app. Use a ring-style shadow (e.g., the existing shadow-ring) or a Tailwind focus:ring-* utility to preserve keyboard accessibility.
♿ Suggested fix
.btn-ghost:focus {
- `@apply` shadow-focus outline-none;
+ `@apply` outline-none ring-2 ring-brand-violet/60 ring-offset-2 ring-offset-panel-dark;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .btn-ghost:focus { | |
| @apply shadow-focus outline-none; | |
| } | |
| .btn-ghost:focus { | |
| `@apply` outline-none ring-2 ring-brand-violet/60 ring-offset-2 ring-offset-panel-dark; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/index.css` around lines 645 - 647, The .btn-ghost:focus rule removes the
native outline and applies a soft drop shadow (shadow-focus) which is not a
sufficient visible focus indicator; update the focus styling for
.btn-ghost:focus to use a visible ring-based indicator (for example swap
shadow-focus for shadow-ring or add a Tailwind focus:ring-* utility) so keyboard
users retain a clear focus outline; modify the CSS rule for .btn-ghost:focus to
remove outline-none only if you add the ring (e.g., use shadow-ring or add
focus:ring-2/focus:ring-offset and a contrasting color) ensuring the change
references .btn-ghost:focus and the existing shadow-focus/shadow-ring utilities.
| colors: { | ||
| // Linear Base Backgrounds | ||
| 'marketing-black': '#08090a', | ||
| 'panel-dark': '#0f1011', | ||
| 'surface-3': '#191a1b', | ||
| 'surface-sec': '#28282c', | ||
|
|
||
| // Linear Text | ||
| 'text-primary': '#f7f8f8', | ||
| 'text-secondary': '#d0d6e0', | ||
| 'text-tertiary': '#8a8f98', | ||
| 'text-quaternary': '#62666d', | ||
|
|
||
| // Linear Brand & Accent | ||
| 'brand-indigo': '#5e6ad2', | ||
| 'brand-violet': '#7170ff', | ||
| 'brand-hover': '#828fff', | ||
| 'security-lavender': '#7a7fad', | ||
|
|
||
| // Linear Status | ||
| 'status-green': '#27a644', | ||
| 'status-emerald': '#10b981', | ||
|
|
||
| // Linear Borders (Solid fallbacks, though we mainly use rgba) | ||
| 'border-primary': '#23252a', | ||
| 'border-secondary': '#34343a', | ||
| 'border-tertiary': '#3e3e44', | ||
| 'line-tint': '#141516', | ||
| 'line-tertiary': '#18191a', | ||
|
|
||
| // Linear Light Mode Neutrals (Fallbacks if needed) | ||
| 'light-bg': '#f7f8f8', | ||
| 'light-surface': '#f3f4f5', | ||
| 'light-border': '#d0d6e0', | ||
| 'light-border-alt': '#e6e6e6', |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Confirm all call sites using the `/8` opacity modifier without brackets.
rg -nP '\b(bg|border|text|ring|divide|outline|from|via|to|fill|stroke|accent|caret|placeholder|decoration|shadow)-(white|black|[a-z]+-\d+)/8\b' --type=ts --type=tsx --type=jsx --type=js --type=html --type=cssRepository: AmintaCCCP/GithubStarsManager
Length of output: 101
🏁 Script executed:
# First, check if tailwind.config.js exists and examine the repository structure
git ls-files | head -20Repository: AmintaCCCP/GithubStarsManager
Length of output: 483
🏁 Script executed:
# Look for tailwind.config.js
fd -t f "tailwind"Repository: AmintaCCCP/GithubStarsManager
Length of output: 92
🏁 Script executed:
# Check the opacity scale in tailwind config if it exists
fd -t f "tailwind.config" && cat "tailwind.config.js" 2>/dev/null | head -100Repository: AmintaCCCP/GithubStarsManager
Length of output: 2910
🏁 Script executed:
# Search for /8 opacity usage with corrected flags (try without tsx)
rg -nP '\b(bg|border|text|ring|divide|outline|from|via|to|fill|stroke|accent|caret|placeholder|decoration|shadow)-(white|black|[a-z]+-\d+)/8\b' --type=js --type=jsx -iRepository: AmintaCCCP/GithubStarsManager
Length of output: 101
🏁 Script executed:
# Also search more broadly for any white/8 patterns
rg "white/8|black/8" --type=js --type=jsx --type=html -iRepository: AmintaCCCP/GithubStarsManager
Length of output: 101
🏁 Script executed:
# Read the complete tailwind.config.js file
cat tailwind.config.jsRepository: AmintaCCCP/GithubStarsManager
Length of output: 5560
🏁 Script executed:
# Search for /8 usage with simpler approach (no type flags)
rg "/8\b" --type-list | head -5Repository: AmintaCCCP/GithubStarsManager
Length of output: 463
🏁 Script executed:
# Search for any file containing white/8 or /8 opacity references
rg "white/8|border.*8\|bg.*8"Repository: AmintaCCCP/GithubStarsManager
Length of output: 35617
🏁 Script executed:
# Check if the mentioned component files exist
fd "SortAlgorithmTooltip|LoginScreen|SearchDemo|UpdateChecker" -t fRepository: AmintaCCCP/GithubStarsManager
Length of output: 207
🏁 Script executed:
# List all tsx/ts files in src to see actual component structure
fd -e tsx -e ts src/ | head -30Repository: AmintaCCCP/GithubStarsManager
Length of output: 395
🏁 Script executed:
# Search for bracket notation usage
rg "white/\[0\.08\]"Repository: AmintaCCCP/GithubStarsManager
Length of output: 692
🏁 Script executed:
# Check the default Tailwind opacity scale documentation to confirm
# Also search for any opacity configuration that might be in CSS
fd -e css -e scss | xargs grep -l "opacity" 2>/dev/null | head -5Repository: AmintaCCCP/GithubStarsManager
Length of output: 87
🏁 Script executed:
# Count total occurrences of white/8 to quantify the scope
rg "white/8" | wc -lRepository: AmintaCCCP/GithubStarsManager
Length of output: 77
Add 8 to the opacity scale — white/8 dead-classes used across 30+ components (178+ occurrences).
The opacity value 8 is not in Tailwind v3's default opacity scale (0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100). Without extending the opacity configuration, classes like dark:border-white/8 become dead classes and produce no CSS, leaving borders, backgrounds, and text silently transparent in dark mode.
This pattern appears across 30+ component files with 178+ occurrences. While some CSS in src/index.css works around this using bracket notation (white/[0.08]), the consistent pattern throughout components is white/8 without brackets, which fails silently.
Extend the opacity scale in tailwind.config.js:
fontWeight: {
'light': '300',
'normal': '400',
'medium': '510',
'semibold': '590',
},
+ opacity: {
+ '8': '0.08',
+ },
letterSpacing: {Alternatively, standardize all occurrences on white/[0.08] bracket notation, but extending opacity is simpler and aligns with the chosen token syntax throughout the codebase.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@tailwind.config.js` around lines 17 - 51, The Tailwind opacity scale is
missing the '8' value so classes like white/8 produce no CSS; update the
Tailwind config by extending theme.extend.opacity to include the '8': '0.08'
entry (i.e., add opacity key '8' mapping to 0.08) in tailwind.config.js so
classes like dark:border-white/8 generate styles; locate the theme.extend block
near the colors object and add the new opacity entry (alternatively, convert
usages to bracket notation white/[0.08], but prefer adding the '8' opacity).
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/store/useAppStore.ts`:
- Around line 281-282: The store currently forces theme: 'dark' during
normalizePersistedState/merge on every rehydrate which overrides user toggles;
instead implement this as a one-time migration: remove the unconditional theme
assignment from normalizePersistedState/merge, add a migrate handler (bump the
store version to 6) that sets theme = 'dark' only for legacy persisted states
needing migration, and keep theme included in partialize so future user changes
persist; also ensure Header.tsx / LoginScreen.tsx keep using setTheme and no UI
removal is done. Reference migrate, merge/normalizePersistedState, partialize,
and the setTheme calls in Header.tsx / LoginScreen.tsx when making the change.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
| // Force dark theme: migrate legacy 'light' users to the new Linear dark-mode-first design | ||
| theme: 'dark', |
There was a problem hiding this comment.
Force-dark on every rehydrate silently overrides the theme toggle.
normalizePersistedState runs on every app load and unconditionally rewrites theme to 'dark', but partialize (line 1306) still persists state.theme, and Header.tsx / LoginScreen.tsx still render working theme toggles that call setTheme('light'). Net effect: a user clicks the Sun/Moon toggle, the UI switches to light, and on the next reload their choice is silently reverted to dark. The toggle appears functional but is effectively broken across sessions.
Pick one of:
- If the intent is a one-time migration of legacy light users to the new Linear design (and then respect the user's choice going forward), do it in
migrateby bumping the storeversionto 6, not inmerge:
♻️ One-time migration (preferred)
@@ normalizePersistedState
- ...currentState,
- ...safePersisted,
- // Force dark theme: migrate legacy 'light' users to the new Linear dark-mode-first design
- theme: 'dark',
+ ...currentState,
+ ...safePersisted,
repositories,@@ persist options
- version: 5,
+ version: 6,
@@ migrate
// 迁移仓库数据中的旧标记
+ // v5 → v6: one-time migration of legacy 'light' theme users to the new Linear dark design
+ if (state) {
+ state.theme = 'dark';
+ }- If the intent is to truly force dark everywhere (per the commit message), also remove the toggle UI in
Header.tsx/LoginScreen.tsx, dropsetThemefrom actions, and removethemefrompartializeso the contradictory persisted state isn't kept around.
As-is, the two mechanisms contradict each other.
Note: the initial default change on line 642 (theme: 'dark') is fine on its own regardless of which direction you take.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/store/useAppStore.ts` around lines 281 - 282, The store currently forces
theme: 'dark' during normalizePersistedState/merge on every rehydrate which
overrides user toggles; instead implement this as a one-time migration: remove
the unconditional theme assignment from normalizePersistedState/merge, add a
migrate handler (bump the store version to 6) that sets theme = 'dark' only for
legacy persisted states needing migration, and keep theme included in partialize
so future user changes persist; also ensure Header.tsx / LoginScreen.tsx keep
using setTheme and no UI removal is done. Reference migrate,
merge/normalizePersistedState, partialize, and the setTheme calls in Header.tsx
/ LoginScreen.tsx when making the change.
- Update index.html to use Linear dark-mode classes (bg-marketing-black) - Load Inter font CSS and enable OpenType features (cv01, ss03) - Add Inter to tailwind fontFamily.sans - Add Berkeley Mono to fontFamily.mono for code
|
个人感觉对比度太高了 |
|
是的，正在调。这个项目最早一个版本是bolt.new写的，因为太早了，那会的UI还比较粗糙。然后后面一直没统一设计系统，导致各处按钮五颜六色，设计规范不统一。这次想用成熟的Design.md把前端样式统一下。正在一点点调，只调样式，不改业务逻辑。 |
|
可以给一个L站的邀请码吗 发到zjhao233@126.com |
好像现在邀请得3级了，我从3级掉下来了...
|
…rders - Replace bg-gray-*/text-gray-* with Linear classes in Header and ReleaseTimeline - Replace rainbow colors (bg-blue-*, etc.) with brand-indigo/brand-violet - Fix borders: use border-white/5 and border-white/8 per DESIGN.md - Fix Release list item heights and spacing per 8px grid system - Update tailwind.config.js with status-red color
- Replace ALL bg-gray-*/text-gray-* (384+ lines) across 20+ files - Replace ALL rainbow colors: bg-blue-*/bg-green-*/bg-red-*/bg-purple-*/bg-yellow-* (291+ lines) - Update borders to border-white/12 (12% opacity = 3.2:1 contrast ✓ WCAG AAA) - Fix ReleaseTimeline list spacing per 8px grid system - Remove hamburger menu from Header per DESIGN.md - Migrate Header and ReleaseTimeline to full Linear design Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
看下邮件，不知道用的着吗 |
There was a problem hiding this comment.
Actionable comments posted: 14
Note
Due to the large number of review comments, Critical severity comments were prioritized as inline comments.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (17)
src/components/SettingsPanel.tsx (1)
336-446:⚠️ Potential issue | 🔴 CriticalSeveral other merged light/dark class tokens in the modal and standalone layouts.
Same merged-token bug as in other files, on lines 336, 339, 348, 354, 403, 411, and 446:
bg-light-bgdark:bg-panel-dark→bg-light-bg dark:bg-panel-darktext-text-primarydark:text-text-primary→text-text-primary dark:text-text-primarytext-text-tertiarydark:text-text-tertiary→text-text-tertiary dark:text-text-tertiaryAll are silently dropped by Tailwind, so the modal header background, title color, close-icon color, sidebar background, standalone heading color, sidebar container background, and content container background are not themed as intended.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/SettingsPanel.tsx` around lines 336 - 446, The merged light/dark Tailwind tokens in SettingsPanel are wrong and must be split into separate classes: replace occurrences like "bg-light-bgdark:bg-panel-dark", "text-text-primarydark:text-text-primary", and "text-text-tertiarydark:text-text-tertiary" with "bg-light-bg dark:bg-panel-dark", "text-text-primary dark:text-text-primary", and "text-text-tertiary dark:text-text-tertiary" respectively; update these className strings where they appear in the modal header div (the div with Settings and X icons), the modal title h2, the close button X icon, the desktop sidebar div, the standalone page heading h2, the sidebar container div, and the main content container div so Tailwind correctly applies light/dark styles.src/components/DiscoverySidebar.tsx (1)
60-99:⚠️ Potential issue | 🔴 CriticalMalformed class names: same merged-token bug as elsewhere.
- Line 60:
text-text-primarydark:text-text-primary→text-text-primary dark:text-text-primary- Line 85:
text-text-primarydark:text-text-secondaryandhover:bg-light-surfacedark:hover:bg-white/5→text-text-primary dark:text-text-secondary/hover:bg-light-surface dark:hover:bg-white/5- Line 99:
text-text-tertiarydark:text-text-tertiary→text-text-tertiary dark:text-text-tertiaryAll generate no CSS, so sidebar heading color, unselected channel row color, and timestamp color are never applied. See the root-cause verification script in
BulkCategorizeModal.tsx.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/DiscoverySidebar.tsx` around lines 60 - 99, In DiscoverySidebar (inside the component rendering the heading and channel buttons) there are malformed merged-tailwind tokens that disable dark-mode classes; replace the bad merged strings with separate normal and dark variants: change "text-text-primarydark:text-text-primary" to "text-text-primary dark:text-text-primary" in the h3, change "text-text-primarydark:text-text-secondary" to "text-text-primary dark:text-text-secondary" and "hover:bg-light-surfacedark:hover:bg-white/5" to "hover:bg-light-surface dark:hover:bg-white/5" in the channel button class, and change "text-text-tertiarydark:text-text-tertiary" to "text-text-tertiary dark:text-text-tertiary" where the timestamp span is rendered (the enabledChannels map/button render block).src/components/settings/AIConfigPanel.tsx (1)
315-686:⚠️ Potential issue | 🔴 CriticalSystemic merged-token bug in most
classNamestrings.Across this file, automated replacement dropped the space between base and
dark:variants (and between two bare tokens), producing unparseable classes. Representative instances:
- Lines 315, 330, 336, 343, 349, 355, 366, 373, 384, 396, 406, 413, 419, 426, 432, 441, 444, 450, 456, 465, 499, 621, 630, 686:
text-text-*dark:text-*/bg-light-*dark:*patterns.- Line 329:
bg-light-bgdark:bg-white/[0.04].- Line 497:
bg-light-surfaceborder-light-border→ two separate tokens that got merged.- Line 509:
dark:text-text-tertiarycursor-not-allowed→ mergedtext-text-tertiaryand the standalonecursor-not-allowed.- Line 510:
text-text-secondaryhover:text-text-primarydark:text-text-tertiary→ three classes merged into one.- Line 533:
bg-light-bgdark:bg-panel-dark text-text-primarydark:text-text-secondary.- Line 618: same as 497 pattern.
None of these generate CSS, so the AI config form will render with unthemed default colors across labels, inputs, helper text, and the empty-state block. Insert spaces between each merged pair.
🐛 Example fixes
- className="w-4 h-4 text-brand-violet bg-light-surfaceborder-light-border rounded focus:ring-brand-violet dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-white/[0.04] dark:border-white/12" + className="w-4 h-4 text-brand-violet bg-light-surface border-light-border rounded focus:ring-brand-violet dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-white/[0.04] dark:border-white/12" ... - className={`flex items-center space-x-1 text-sm ${ - showCustomPrompt - ? 'text-gray-400 dark:text-text-tertiarycursor-not-allowed' - : 'text-text-secondaryhover:text-text-primarydark:text-text-tertiary dark:hover:text-gray-300' - }`} + className={`flex items-center space-x-1 text-sm ${ + showCustomPrompt + ? 'text-gray-400 dark:text-text-tertiary cursor-not-allowed' + : 'text-text-secondary hover:text-text-primary dark:text-text-tertiary dark:hover:text-gray-300' + }`}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/settings/AIConfigPanel.tsx` around lines 315 - 686, Many className strings in AIConfigPanel.tsx were accidentally merged (e.g., tokens like "text-text-primarydark:text-text-primary", "bg-light-bgdark:bg-white/[0.04]", "bg-light-surfaceborder-light-border", "dark:text-text-tertiarycursor-not-allowed") causing invalid Tailwind classes; locate these occurrences inside the AIConfigPanel component (around the form render and the aiConfigs mapping—helpers referenced include buildFinalApiUrl, handleUseCustomPromptChange, handleToggleDefaultPrompt, handleRestoreDefaultPrompt, handleSave, handleTestForm, resetForm, and the aiConfigs rendering using activeAIConfig/testingId) and fix each className by inserting the missing spaces between merged tokens so each Tailwind utility is a separate token (e.g., "text-text-primary dark:text-text-primary", "bg-light-bgdark: bg-white/[0.04]" as appropriate), ensuring all className strings contain properly separated classes.src/components/RepositoryEditModal.tsx (1)
594-1181:⚠️ Potential issue | 🔴 CriticalSame merged-token class bug affects most styled elements in this modal.
Dozens of occurrences in this file — some notable ones:
- Line 594:
text-text-primarydark:text-text-primary- Line 595 (
inputClass):bg-light-bgdark:bg-white/[0.04]andtext-text-primarydark:text-text-primary— applies to every input, textarea and select in the modal viaclassName={inputClass}.- Line 615, 618, 623, 639, 646, 997, 1020, 1046:
text-text-*dark:text-*merges.- Line 663: triple merge
bg-light-surfacetext-text-primarydark:bg-white/[0.04].- Lines 749, 750, 813, 814, 815, 940, 941: merged
bg-light-bgdark:bg-white/[0.04],text-text-secondarydark:text-text-secondary, etc.- Lines 788, 789, 885, 886: triple merges on button class strings (
bg-light-surfacetext-text-primaryborder-light-border).- Line 1170:
text-text-primarydark:text-text-primaryandbg-light-surfacedark:bg-white/[0.04].Because
inputClassitself is broken, all form fields in this modal will render without their intended background, border, or text color; combined with the many similar breaks in per-section callouts, the modal's dark-theme styling will be essentially unapplied. Insert a space between each merged pair.🐛 Representative fixes
- const sectionClass = "p-5 bg-white dark:bg-panel-dark rounded-xl border border-light-border dark:border-white/12"; - const labelClass = "flex items-center space-x-2 text-sm font-medium text-text-primarydark:text-text-primary mb-3"; - const inputClass = "w-full px-3 py-2 bg-light-bgdark:bg-white/[0.04] border border-light-border dark:border-white/12 rounded-lg text-text-primarydark:text-text-primary placeholder-gray-400 dark:placeholder-text-tertiary focus:outline-none focus:ring-2 focus:ring-brand-violet focus:border-transparent transition-all"; + const sectionClass = "p-5 bg-white dark:bg-panel-dark rounded-xl border border-light-border dark:border-white/12"; + const labelClass = "flex items-center space-x-2 text-sm font-medium text-text-primary dark:text-text-primary mb-3"; + const inputClass = "w-full px-3 py-2 bg-light-bg dark:bg-white/[0.04] border border-light-border dark:border-white/12 rounded-lg text-text-primary dark:text-text-primary placeholder-gray-400 dark:placeholder-text-tertiary focus:outline-none focus:ring-2 focus:ring-brand-violet focus:border-transparent transition-all"; ... - ? 'bg-light-surfacetext-text-primaryborder-light-border dark:bg-white/10 dark:text-text-primary dark:border-white/20' - : 'bg-white text-text-secondaryborder-light-border hover:bg-light-bgdark:bg-white/[0.04] dark:text-text-secondary dark:border-white/12 dark:hover:bg-white/10 dark:hover:text-text-primary' + ? 'bg-light-surface text-text-primary border-light-border dark:bg-white/10 dark:text-text-primary dark:border-white/20' + : 'bg-white text-text-secondary border-light-border hover:bg-light-bg dark:bg-white/[0.04] dark:text-text-secondary dark:border-white/12 dark:hover:bg-white/10 dark:hover:text-text-primary'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/RepositoryEditModal.tsx` around lines 594 - 1181, Many Tailwind class strings were accidentally merged (e.g. "text-text-primarydark:text-text-primary", "bg-light-bgdark:bg-white/[0.04]", "bg-light-surfacetext-text-primaryborder-light-border"); update each merged token by inserting a space between the two intended classes so they become separate tokens (for example "text-text-primary dark:text-text-primary", "bg-light-bgdark: ???" — follow the established naming pattern in the codebase) — fix all occurrences, starting with the shared class constants inputClass, labelClass, buttonSecondaryClass, tagClass and then the inline className usages such as className={`${inputClass} resize-none`} and the per-section callouts (any string containing "dark:" or "border" merged into another token).src/components/BulkCategorizeModal.tsx (1)
61-112:⚠️ Potential issue | 🔴 CriticalFix malformed class names: missing space between light-mode and
dark:variants.An automated find/replace operation dropped spaces in several
classNamestrings, producing invalid single tokens that Tailwind cannot parse. This affects light and dark theme styling throughout the component.Affected lines in this file:
- Line 61:
text-text-secondarydark:text-text-secondary→text-text-secondary dark:text-text-secondary- Line 66:
text-text-primarydark:text-text-primary→text-text-primary dark:text-text-primary- Line 82:
text-text-primarydark:text-text-primary→ same fix- Line 112:
text-text-primarydark:text-text-primary bg-light-surfacedark:bg-white/[0.04]→ insert spaces in both tokensProposed fixes
- <p className="text-sm text-text-secondarydark:text-text-secondary"> + <p className="text-sm text-text-secondary dark:text-text-secondary"> - <label className="block text-sm font-medium text-text-primarydark:text-text-primary mb-2"> + <label className="block text-sm font-medium text-text-primary dark:text-text-primary mb-2"> - <span className="text-sm font-medium text-text-primarydark:text-text-primary"> + <span className="text-sm font-medium text-text-primary dark:text-text-primary"> - className="px-4 py-2 text-text-primarydark:text-text-primary bg-light-surfacedark:bg-white/[0.04] rounded-lg hover:bg-gray-200 dark:hover:bg-white/10 disabled:opacity-50" + className="px-4 py-2 text-text-primary dark:text-text-primary bg-light-surface dark:bg-white/[0.04] rounded-lg hover:bg-gray-200 dark:hover:bg-white/10 disabled:opacity-50"This pattern is pervasive across many files in the PR and should be addressed systematically.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/BulkCategorizeModal.tsx` around lines 61 - 112, In BulkCategorizeModal (the component rendering category buttons and footer), several Tailwind className tokens were concatenated (e.g., "text-text-secondarydark:text-text-secondary", "text-text-primarydark:text-text-primary", and "bg-light-surfacedark:bg-white/[0.04]"); fix by inserting a space before each "dark:" and before any "dark-*" or "dark:" variant so tokens become "text-text-secondary dark:text-text-secondary", "text-text-primary dark:text-text-primary", and "bg-light-surface dark:bg-white/[0.04]" respectively (search for occurrences in the JSX for setSelectedCategory/selectedCategory rendering, the error block, and the footer button to correct all malformed className tokens).src/components/Header.tsx (1)
25-25:⚠️ Potential issue | 🟡 Minor
mobileMenuOpenstate is now orphaned; the mobile dropdown is effectively dead code.The hamburger toggle button was removed from the JSX (per the DESIGN.md commit), but:
useState(false)formobileMenuOpenis still declared at L25.- The
{mobileMenuOpen && (…)}dropdown block (L282-356) is still rendered, but nothing flips the flag totrueany more — it will never show. The only writes are thesetMobileMenuOpen(false)calls inside each nav item, which are always no-ops.If the hamburger is gone for good, drop the state, the dropdown JSX, and the corresponding
setMobileMenuOpen(false)calls so the mobile menu region can't be accidentally re-enabled in a half-working state. If it was meant to come back, add back the toggle.Also applies to: 282-356
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/Header.tsx` at line 25, The mobile menu state and related dead code in Header are orphaned: remove the useState declaration for mobileMenuOpen and its setter (mobileMenuOpen, setMobileMenuOpen) from the Header component, delete the conditional mobile dropdown JSX block that is rendered when mobileMenuOpen is true, and remove any calls to setMobileMenuOpen(false) inside the nav item handlers; also remove any now-unused imports (e.g., useState) so the Header component no longer contains vestigial mobile-menu logic.src/components/SubscriptionRepoCard.tsx (1)
312-485:⚠️ Potential issue | 🔴 CriticalWhitespace-loss between token and
dark:variant across many className strings.L312, L361, L374, L391, L423, L428, L437, L473, L485 each concatenate the new token with its dark variant (e.g.
text-text-primarydark:text-text-primary,bg-light-surfacetext-text-tertiarydark:bg-white/[0.04]). Dark-mode text color, GitHub/Star button surfaces, description, platform labels, stats row, and the unstar-confirm modal body/Cancel button all lose their dark styling.🛠️ Example fixes
- className="flex items-center justify-center w-8 h-8 rounded-lg bg-light-surfacetext-text-tertiarydark:bg-white/[0.04] dark:text-text-tertiary hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors" + className="flex items-center justify-center w-8 h-8 rounded-lg bg-light-surface text-text-tertiary dark:bg-white/[0.04] dark:text-text-tertiary hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"- className="px-4 py-2 rounded-lg text-sm font-medium text-text-secondarydark:text-text-tertiary hover:bg-light-surfacedark:hover:bg-white/10 transition-colors" + className="px-4 py-2 rounded-lg text-sm font-medium text-text-secondary dark:text-text-tertiary hover:bg-light-surface dark:hover:bg-white/10 transition-colors"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/SubscriptionRepoCard.tsx` around lines 312 - 485, Multiple className strings in SubscriptionRepoCard.tsx have missing whitespace between the base class and the dark: variant (e.g. "text-text-primarydark:text-text-primary"), which breaks Tailwind variant parsing; locate the affected JSX elements (the cardTitle span, AI/GitHub/Star button anchors, description <p>, AI summary, tags/platform spans, stats row, and the unstar modal cancel button) and fix each className by inserting a space before the dark: variant so classes read like "text-text-primary dark:text-text-primary" or "bg-light-surface text-text-tertiary dark:bg-white/[0.04] dark:text-text-tertiary" as appropriate; ensure all occurrences of concatenated tokens (search for "dark:" joined to other class names) are corrected so Tailwind variants apply properly.src/components/FilterModal.tsx (1)
73-161:⚠️ Potential issue | 🔴 CriticalSame missing-whitespace bug at L73, L87, L99, L114, L137, L154, L161.
Each of these lines fuses the light-mode token with its
dark:variant (e.g.text-text-primarydark:text-text-primary,bg-light-surfacedark:bg-white/[0.04],text-text-tertiarydark:text-text-tertiary). Dark-mode labels, inputs, empty-state hint, and the Cancel/Save buttons all fall back to light-mode colors.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/FilterModal.tsx` around lines 73 - 161, Several className strings in FilterModal.tsx fuse light and dark utility tokens (e.g., "text-text-primarydark:text-text-primary", "bg-light-surfacedark:bg-white/[0.04]", "text-text-tertiarydark:text-text-tertiary") causing dark-mode variants to be ignored; fix by adding a separating space between the light-mode token and the dark: variant in each affected className (update the label and input around setName, the keyword input using setNewKeyword and handleKeyPress, the keywords list item containing handleRemoveKeyword, the empty-state hint, and the Cancel/Save buttons that reference onClose and handleSave) so each token appears as "...text-text-primary dark:text-text-primary", "...bg-light-surface dark:bg-white/[0.04]", etc.src/components/SearchBar.tsx (1)
732-1192:⚠️ Potential issue | 🔴 CriticalExtensive whitespace-loss — dark-mode styling broken across search input, dropdowns, filter chips, and sort controls.
The same concatenation issue is present on these lines: L750, L757, L762, L771, L784, L798, L812, L867, L882, L897, L913, L924, L936, L950, L968, L986, L1004, L1022, L1040, L1058, L1076, L1090, L1101, L1114, L1125, L1139, L1150, L1167, L1177, L1181, L1191 (and similar). Because
SearchBaris on every main screen, this is the file where the visual regression will be most visible — all inactive filter chips, the history/suggestion dropdowns, the star-range inputs, and the placeholder text lose their dark variant.🛠️ Representative fix
- className="w-full pl-10 pr-24 sm:pr-40 py-3 border border-light-border dark:border-white/12 rounded-lg focus:ring-2 focus:ring-brand-violet focus:border-transparent bg-white dark:bg-white/[0.04] text-text-primarydark:text-text-primary placeholder-gray-500 dark:placeholder-gray-400" + className="w-full pl-10 pr-24 sm:pr-40 py-3 border border-light-border dark:border-white/12 rounded-lg focus:ring-2 focus:ring-brand-violet focus:border-transparent bg-white dark:bg-white/[0.04] text-text-primary dark:text-text-primary placeholder-gray-500 dark:placeholder-gray-400"- ? 'bg-brand-indigo/20 text-blue-700 dark:bg-brand-indigo/20 dark:text-blue-300' - : 'bg-light-surfacetext-text-primarydark:bg-white/[0.04] dark:text-text-secondary hover:bg-gray-200 dark:hover:bg-gray-600' + ? 'bg-brand-indigo/20 text-blue-700 dark:bg-brand-indigo/20 dark:text-blue-300' + : 'bg-light-surface text-text-primary dark:bg-white/[0.04] dark:text-text-secondary hover:bg-gray-200 dark:hover:bg-gray-600'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/SearchBar.tsx` around lines 732 - 1192, The className strings in SearchBar (e.g., the main search input element with ref searchInputRef, the search history/suggestions dropdowns, filter chips like the buttons that toggle isAnalyzed/isSubscribed/etc., the sort controls/select, and the star-range inputs) have lost spaces so dark: variants are concatenated (e.g., "text-text-primarydark:text-text-primary" instead of "text-text-primary dark:text-text-primary"); fix by restoring missing spaces between utility classes and their dark: variants across those className props and in the template literals used for conditional classes so each token is separated (verify className on the input, dropdown wrappers, each filter button, the select/button in Sort Controls, and the min/max star inputs), ensuring conditional concatenation preserves leading/trailing spaces when building the strings.src/components/ReleaseCard.tsx (1)
83-266:⚠️ Potential issue | 🔴 CriticalWidespread whitespace-loss in className strings — and L102 also kills
truncate.Missing spaces between the legacy utility and its
dark:variant at L83, L102, L118, L139, L156, L166, L191, L194, L206, L217, L221, L239, L266. Dark-mode text and button surfaces don't apply.L102 is especially impactful:
className="text-xs text-gray-400 dark:text-text-tertiarytruncate"Here the glued-on token is
truncate, which is not a color — it's the ellipsis/overflow utility. Sincedark:text-text-tertiarytruncateis unknown, the row loses both dark-mode color and ellipsis truncation; longrepository.full_namevalues will wrap or overflow the card header.🛠️ Fixes for the worst offenders
- <p className="text-xs text-gray-400 dark:text-text-tertiarytruncate"> + <p className="text-xs text-gray-400 dark:text-text-tertiary truncate"> {release.repository.full_name} </p>- ? 'bg-brand-indigo/20 text-blue-700 dark:bg-brand-indigo/20 dark:text-blue-300' - : 'bg-light-surfacetext-text-secondarydark:bg-white/[0.04] dark:text-text-tertiary hover:bg-gray-200 dark:hover:bg-gray-600' + ? 'bg-brand-indigo/20 text-blue-700 dark:bg-brand-indigo/20 dark:text-blue-300' + : 'bg-light-surface text-text-secondary dark:bg-white/[0.04] dark:text-text-tertiary hover:bg-gray-200 dark:hover:bg-gray-600'- className="p-1 rounded bg-light-surfacetext-text-tertiarydark:bg-white/[0.04] dark:text-text-tertiary hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors" + className="p-1 rounded bg-light-surface text-text-tertiary dark:bg-white/[0.04] dark:text-text-tertiary hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/ReleaseCard.tsx` around lines 83 - 266, Multiple className strings in ReleaseCard (e.g., the span rendering release.repository.full_name, the release.name span, the Download/count span and the buttons that reference isAssetsExpanded/isReleaseNotesExpanded) have missing spaces that merge tokens like "dark:text-...truncate" so dark-mode styles and utilities such as truncate aren't applied; fix by locating those className attributes in the ReleaseCard component (search for strings containing "dark:text" glued to another token or "truncate" attached to a color token) and insert the missing space(s) so each Tailwind token is separate (e.g., change "dark:text-text-tertiarytruncate" to "dark:text-text-tertiary truncate" and similarly add spaces before dark: variants in the asset/release-note button className strings and any other glued tokens).src/components/DiscoveryView.tsx (1)
169-1244:⚠️ Potential issue | 🔴 CriticalSame whitespace-loss across the file — critically including utilities that aren't colors.
Missing whitespace between a token and its
dark:variant on L197, L256, L275, L310, L315, L354, L376, L379, L381, L908, L924, L1132, L1147, L1156, L1167, L1176, L1211, L1239, L1241, L1244 (dark-mode text/background lost).Three additional cases are worse than dark-mode color loss because the glued-on tail is a layout utility, not a color:
- L914:
dark:text-text-tertiaryhidden—hidden(display:none) is never applied, so the “Updated …” timestamp can't be hidden at its intended breakpoint and will ignore thesm:blocktoggle.- L1159, L1179:
dark:text-text-tertiaryleading-relaxed—leading-relaxed(line-height: 1.625) is dropped, so the empty-state paragraph loses its intended typography.These will cause visible layout bugs in addition to color regressions.
🛠️ Fixes for the layout-breaking ones
- <p className="text-[11px] text-gray-400 dark:text-text-tertiaryhidden sm:block"> + <p className="text-[11px] text-gray-400 dark:text-text-tertiary hidden sm:block"> {t('更新于', 'Updated')} {formatLastRefresh(currentLastRefresh)} </p>- <p className="text-sm text-gray-400 dark:text-text-tertiaryleading-relaxed"> + <p className="text-sm text-gray-400 dark:text-text-tertiary leading-relaxed"> {t('输入关键字搜索 GitHub 仓库', 'Enter keywords to search GitHub repositories')} </p>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/DiscoveryView.tsx` around lines 169 - 1244, Whitespace was accidentally removed between utility tokens in several className strings causing dark: variants (and some layout utilities) to be merged; restore a space before every "dark:" token and split merged layout utilities. Find className usages that contain merged fragments like "text-text-secondarydark:text-text-tertiary", "text-text-tertiarydark:text-text-tertiary", "bg-light-surfacedark:bg-white/[0.04]", "dark:text-text-tertiaryhidden", and "dark:text-text-tertiaryleading-relaxed" and insert the missing space(s) so they read e.g. "text-text-secondary dark:text-text-tertiary", "bg-light-surface dark:bg-white/[0.04]", "dark:text-text-tertiary hidden sm:block", and "dark:text-text-tertiary leading-relaxed"; update every occurrence (including the three layout-breaking ones: the timestamp paragraph using formatLastRefresh, and the two empty-state paragraphs) to ensure both color and layout utilities are separate tokens.src/components/SearchDemo.tsx (1)
73-258:⚠️ Potential issue | 🔴 CriticalSame whitespace-loss bug as LoginScreen — many
dark:variants are glued to the preceding utility.Dark-mode text/background/border tokens are swallowed into unknown classes on these lines: 73, 76, 101, 104, 111, 122, 140, 144, 155, 177, 187, 191, 194, 200, 205, 233, 240, 244, 254, 258. The result is that text hierarchy and panel surfaces don't adapt to dark mode on the entire demo component.
🛠️ Representative fix
- <h3 className="font-medium text-text-primarydark:text-text-primary"> - {t('搜索功能升级', 'Search Feature Upgrade')} - </h3> - <p className="text-sm text-text-secondarydark:text-text-tertiary"> + <h3 className="font-medium text-text-primary dark:text-text-primary"> + {t('搜索功能升级', 'Search Feature Upgrade')} + </h3> + <p className="text-sm text-text-secondary dark:text-text-tertiary">Apply the same split to every line listed above.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/SearchDemo.tsx` around lines 73 - 258, In SearchDemo component the Tailwind dark: variants were concatenated into preceding utility names (e.g. "text-text-primarydark:text-text-primary"), breaking dark-mode styles; find occurrences in JSX (headers like the h3/h4/h5 elements, paragraphs, code blocks, buttons, the selectedExample block and usage tips where className strings appear) and insert a space before every "dark:" token so each variant is a separate class (e.g. "... text-text-primary dark:text-text-primary"); update all className strings referenced around symbols searchExamples, handleExampleClick, selectedExample, and the component render so dark: variants are split consistently across the listed lines.src/components/LoginScreen.tsx (1)
70-194:⚠️ Potential issue | 🔴 CriticalMissing whitespace merges utilities into unknown classes — dark-mode styling silently broken across entire codebase.
Many updated class strings concatenate the light-mode utility directly with its
dark:variant (no space), producing unknown tokens that Tailwind drops. This affects 100+ instances across multiple files. Specific issues in LoginScreen.tsx:
- Lines 73, 79, 88:
text-text-secondarydark:text-text-secondaryandhover:bg-light-surfacedark:hover:bg-white/10- Lines 108, 111, 118, 119, 122, 144, 159, 191, 194: Similar concatenation patterns
- Line 131:
bg-status-emerald0— malformed utility (stray trailing0)- Line 190:
bg-light-bgdark:bg-white/[0.04]/50— both missing space AND double opacity syntax- Lines 129–131: Parent
bg-status-emeraldwith childtext-status-emeraldcreates unreadable light mode (same color for background and text)The automated migration pass dropped the space separating legacy and dark utilities. Needs systematic fix across entire codebase or sweeping re-audit of all className strings.
🛠️ Example fixes
- className={`px-3 py-2 text-sm font-medium transition-colors ${language === 'zh' ? 'bg-brand-indigo text-white' : 'text-text-secondarydark:text-text-secondary hover:bg-light-surfacedark:hover:bg-white/10'}`} + className={`px-3 py-2 text-sm font-medium transition-colors ${language === 'zh' ? 'bg-brand-indigo text-white' : 'text-text-secondary dark:text-text-secondary hover:bg-light-surface dark:hover:bg-white/10'}`}- <div className="mt-6 p-4 bg-light-bgdark:bg-white/[0.04]/50 rounded-lg"> + <div className="mt-6 p-4 bg-light-bg dark:bg-white/[0.04] rounded-lg">- <div className="w-2 h-2 bg-status-emerald0 rounded-full"></div> + <div className="w-2 h-2 bg-status-emerald rounded-full"></div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/LoginScreen.tsx` around lines 70 - 194, In LoginScreen (component LoginScreen), several className strings have merged light and dark Tailwind utilities (e.g., "text-text-secondarydark:text-text-secondary", "hover:bg-light-surfacedark:hover:bg-white/10", "bg-light-bgdark:bg-white/[0.04]/50") and malformed tokens ("bg-status-emerald0"); fix them by inserting the missing space between the light utility and the dark: variant (e.g., "... text-text-secondary dark:text-text-secondary", "... hover:bg-light-surface dark:hover:bg-white/10"), correct the malformed utility names (remove stray characters like the trailing 0 and fix double opacity syntax), and resolve the contrast problem where bg-status-emerald and text-status-emerald are used together by choosing a contrasting text utility (e.g., text-white or dark:text-green-400) for readability; apply the same pattern to other occurrences in this file (buttons that call setLanguage, setTheme, the token input, status block showing repositories/lastSync, and the connect button/loader) and run a repo-wide audit to fix the same merged-class issue across files.src/components/ReadmeModal.tsx (1)
241-362:⚠️ Potential issue | 🔴 CriticalSame malformed-class pattern — numerous
dark:variants glued to the preceding token.Occurrences in this file (all need a space between the base class and the
dark:variant, and in a couple of places between two base classes):
- Line 241:
text-text-primarydark:text-text-primary- Line 244:
text-text-tertiarydark:text-text-secondary- Line 256:
hover:text-text-secondarydark:hover:text-text-primaryandhover:bg-light-surfacedark:hover:bg-white/10- Line 265: same pair as line 256
- Line 274: three concatenations —
text-text-secondarydark:text-text-secondary,hover:text-text-primarydark:hover:text-text-primary, andhover:bg-light-surfacedark:hover:bg-white/10- Line 282: same pair as line 256
- Line 303:
text-text-primarydark:text-text-primary- Lines 313, 315:
text-text-primarydark:text-text-primary/text-text-primarydark:text-text-secondary- Line 316:
text-text-tertiarydark:text-text-tertiary- Line 317:
hover:bg-light-surfacedark:hover:bg-white/5- Line 335:
text-text-tertiarydark:text-text-secondary- Line 342:
text-text-primarydark:text-text-secondary- Line 362:
text-text-tertiarydark:text-text-secondaryNet effect: the header title/subtitle, the TOC toggle/font/close buttons' hover states, the TOC item hover background, the loading/error/empty-state text, and the "View on GitHub" hover all lose their intended colors.
🛠️ Example fix for the header region (lines 241–247)
- <h3 id="readme-modal-title" className="text-lg font-semibold text-text-primarydark:text-text-primary"> + <h3 id="readme-modal-title" className="text-lg font-semibold text-text-primary dark:text-text-primary"> {repository.full_name} </h3> - <p className="text-sm text-text-tertiarydark:text-text-secondary"> + <p className="text-sm text-text-tertiary dark:text-text-secondary"> README </p>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/ReadmeModal.tsx` around lines 241 - 362, In ReadmeModal component update the malformed Tailwind class tokens that have no space before dark: or between adjacent classes—e.g., occurrences like "text-text-primarydark:text-text-primary", "text-text-tertiarydark:text-text-secondary", "hover:text-text-secondarydark:hover:text-text-primary", "hover:bg-light-surfacedark:hover:bg-white/10", and "hover:bg-light-surfacedark:hover:bg-white/5"—so each base class is separated from its dark: variant (e.g., "text-text-primary dark:text-text-primary") and any adjacent base classes are separated by spaces; search for those exact concatenated tokens in the ReadmeModal JSX (header title/subtitle, TOC toggle/font/close buttons, TOC items, loading/error/empty states, and View on GitHub anchor) and insert the missing spaces to restore proper Tailwind class parsing.src/components/RepositoryCard.tsx (1)
731-998:⚠️ Potential issue | 🔴 CriticalMalformed Tailwind classes throughout the card — tokens fused to their
dark:variants.Same pattern as
RepositoryList.tsx: the base class has no whitespace before thedark:qualifier, so the JIT compiler sees an unknown class and drops it. Occurrences:
- Line 731:
text-text-primarydark:text-text-primary→ needs space beforedark:.- Line 734:
text-text-tertiarydark:text-text-secondary.- Line 762: both
hover:text-text-secondarydark:text-text-tertiaryandhover:bg-light-surfacedark:hover:bg-white/5.- Lines 803 and 836: three classes are fused —
bg-light-surfacetext-text-tertiarydark:bg-white/[0.04]must becomebg-light-surface text-text-tertiary dark:bg-white/[0.04].- Line 862:
text-text-primarydark:text-text-secondary.- Lines 912, 937, 962, 979:
text-text-tertiarydark:text-text-tertiary.- Line 948:
bg-light-surfacedark:bg-white/[0.04]andtext-text-secondarydark:text-text-tertiary.- Line 998:
hover:bg-light-surfacedark:hover:bg-white/10.Lines 803 and 836 are the most impactful — the subscribe button and the "View on GitHub" anchor lose their light-mode surface color and text color, so they'll appear as unstyled buttons on light theme.
🛠️ Example fix for line 803
- : 'bg-light-surfacetext-text-tertiarydark:bg-white/[0.04] dark:text-text-secondary hover:bg-gray-200 dark:hover:bg-white/10' + : 'bg-light-surface text-text-tertiary dark:bg-white/[0.04] dark:text-text-secondary hover:bg-gray-200 dark:hover:bg-white/10'Separately — line 904 mixes
text-status-emeraldwith a legacydark:text-green-400. Low priority, but worth aligning for consistency with the rest of the token migration.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/RepositoryCard.tsx` around lines 731 - 998, The card contains malformed Tailwind class tokens (missing spaces before dark: and fused class names) causing JIT to drop styles; in RepositoryCard.tsx fix all fused classes by inserting the missing whitespace and splitting combined tokens into separate class names (e.g. change "text-text-primarydark:text-text-primary" → "text-text-primary dark:text-text-primary", "bg-light-surfacetext-text-tertiarydark:bg-white/[0.04]" → "bg-light-surface text-text-tertiary dark:bg-white/[0.04]", and similarly for "hover:text-text-secondarydark:text-text-tertiary", "hover:bg-light-surfacedark:hover:bg-white/5", "bg-light-surfacedark:bg-white/[0.04] text-text-secondarydark:text-text-tertiary", "text-text-tertiarydark:text-text-tertiary", etc.); apply these fixes to the h3/p title blocks, drag handle div, SelectionAwareButton variants (AI/subscribe/unstar), the two anchor links (BookOpen/ExternalLink), platform icon container, and stats/update row so light/dark tokens are separate (also optionally normalize "text-status-emerald dark:text-green-400" to a single token for consistency).src/components/SearchResultStats.tsx (1)
51-138:⚠️ Potential issue | 🔴 CriticalSame malformed-class pattern as
RepositoryList.tsx— all token/dark pairs are concatenated.Every changed line in this file fuses the base class to its
dark:variant, e.g.:
- Line 69:
text-text-tertiarydark:text-text-tertiary- Lines 78, 90, 103, 116:
text-text-primarydark:text-text-primary- Lines 81, 93, 106, 119, 131:
text-text-secondarydark:text-text-tertiary- Lines 84, 96, 109, 122:
text-text-tertiarydark:text-text-tertiary- Line 134:
text-text-primarydark:text-text-primaryTailwind drops these silently, so the stats text will render with the browser's default/inherited color rather than the intended token color. Split with a space in each case.
Also worth noting (outside the
~annotated diff):
- Line 47 still uses the old blue/purple gradient and
border-blue-200 dark:border-blue-800on the outer wrapper.- Line 59 still uses
text-purple-600 dark:text-purple-400.- Line 138 mixes a new token (
text-status-emerald) with a legacy utility (dark:text-green-400).If the intent of this PR is full tokenization, these should be migrated too; otherwise the file ends up in a half-migrated state that will make future diffs noisier.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/SearchResultStats.tsx` around lines 51 - 138, The classnames in SearchResultStats are malformed: token and dark variants were concatenated (e.g. "text-text-tertiarydark:text-text-tertiary") so Tailwind drops them; update each affected class in the JSX (look around usages of searchTime, foundRepos, stats.*, and searchQuery inside the SearchResultStats component) to split the classes with a space (e.g. "text-text-tertiary dark:text-text-tertiary") and ensure all occurrences referencing text-text-primary/secondary/tertiary are fixed; also decide whether to fully tokenise or keep legacy utilities and make them consistent — migrate or align the outer wrapper border ("border-blue-200 dark:border-blue-800"), the search type colors ("text-purple-600 dark:text-purple-400"), and the mixed token/legacy pair ("text-status-emerald" with "dark:text-green-400") so they follow the same tokenization pattern.src/components/RepositoryList.tsx (1)
873-1045:⚠️ Potential issue | 🔴 CriticalMalformed Tailwind classes — base tokens concatenated with variants without spaces (Tailwind JIT will silently drop both).
The migration lost whitespace between base classes and their
dark:/hover:/focus:variants in hundreds of locations across the codebase, producing invalid class names that Tailwind will ignore silently. Every affected element renders unstyled for that property in both light and dark modes.Examples in RepositoryList.tsx (lines 873–1045):
- Line 873:
text-text-tertiarydark:text-text-tertiary→text-text-tertiary dark:text-text-tertiary- Lines 935, 947, 959:
hover:bg-light-bgdark:hover:bg-white/5→hover:bg-light-bg dark:hover:bg-white/5- Lines 937, 949, 961, 1019, 1034:
text-text-primarydark:text-text-primary→text-text-primary dark:text-text-primary- Lines 940, 952, 964, 1045:
text-text-tertiarydark:text-text-tertiary→text-text-tertiary dark:text-text-tertiary- Lines 981, 1003:
text-text-secondarydark:text-text-tertiary→text-text-secondary dark:text-text-tertiary- Lines 1017, 1032:
bg-light-surfaceborder-light-border→bg-light-surface border-light-border(two base tokens run together)This issue is widespread: 200+ instances found across the entire codebase (App.tsx, SearchBar.tsx, GeneralPanel.tsx, WebDAVPanel.tsx, CategoryPanel.tsx, DataManagementPanel.tsx, BackupPanel.tsx, and many others).
Add a space between the base token and each variant prefix:
text-text-tertiary dark:text-text-tertiary,hover:bg-light-bg dark:hover:bg-white/5, etc.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/RepositoryList.tsx` around lines 873 - 1045, In RepositoryList.tsx there are malformed Tailwind class strings where base tokens run into variant prefixes (e.g., "text-text-tertiarydark:text-text-tertiary", "hover:bg-light-bgdark:hover:bg-white/5", "bg-light-surfaceborder-light-border"); fix by inserting a space between the base token and the variant (e.g., "text-text-tertiary dark:text-text-tertiary", "hover:bg-light-bg dark:hover:bg-white/5", "bg-light-surface border-light-border") for every affected class in this component (search for the strings shown and update classes used in the AI Analysis dropdown, progress controls, radio labels — e.g., the JSX around showDropdown, handleAIAnalyze, analysisProgress, hasAnalyzedRepos, setShowAISummary). Ensure all similar concatenations are corrected consistently across the file.
♻️ Duplicate comments (7)
src/components/SettingsPanel.tsx (1)
162-162:⚠️ Potential issue | 🔴 CriticalInvalid chained opacity
dark:hover:bg-white/10/50and merged class tokens on this line.Line 162 still contains
dark:hover:bg-white/10/50— Tailwind does not support chained opacity modifiers; the previous review comment about this has not been addressed. Additionally, the automated replace merged several tokens on the same line:text-text-secondarydark:text-text-tertiary,hover:text-text-primarydark:hover:text-gray-200, andhover:bg-light-surfacedark:hover:bg-white/10/50. None of these compile.🐛 Proposed fix
- : 'text-text-secondarydark:text-text-tertiary hover:text-text-primarydark:hover:text-gray-200 hover:bg-light-surfacedark:hover:bg-white/10/50' + : 'text-text-secondary dark:text-text-tertiary hover:text-text-primary dark:hover:text-gray-200 hover:bg-light-surface dark:hover:bg-white/10'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/SettingsPanel.tsx` at line 162, The class string in SettingsPanel.tsx is broken: multiple class tokens were merged and there is an invalid chained opacity token "dark:hover:bg-white/10/50"; fix by splitting the merged token into separate Tailwind classes (e.g., text-text-secondary and dark:text-text-tertiary; hover:text-text-primary and dark:hover:text-gray-200; hover:bg-light-surface and dark:hover:bg-white/50) and replace the invalid chained opacity with a single valid opacity suffix (e.g., /50) applied to the dark:hover modifier so all classes compile.src/components/DiscoveryView.tsx (3)
900-900:⚠️ Potential issue | 🔴 CriticalChained opacity on borders:
dark:border-white/12/60(and/12/50) still invalid.The past review flagged
dark:border-white/8/60— the migration bumped the numerator to/12but kept the trailing/60(and/50at L1240). These utilities still don't parse, so the toolbar card and the search toolbar border remain effectively invisible in dark mode.🛠️ Fix
- <div className="bg-white/80 dark:bg-panel-dark/80 backdrop-blur-xl rounded-2xl border border-light-border/60 dark:border-white/12/60 p-3.5 sm:p-4 mb-4 shadow-sm shadow-gray-200/50 dark:shadow-gray-900/20"> + <div className="bg-white/80 dark:bg-panel-dark/80 backdrop-blur-xl rounded-2xl border border-light-border/60 dark:border-white/12 p-3.5 sm:p-4 mb-4 shadow-sm shadow-gray-200/50 dark:shadow-gray-900/20">Apply the same at L1041 (
border-white/12/60→border-white/12) and L1240 (border-white/12/50→border-white/12).Also applies to: 1041-1041, 1240-1240
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/DiscoveryView.tsx` at line 900, The Tailwind class strings include invalid chained opacity tokens like "dark:border-white/12/60" (and similar "border-white/12/60" and "border-white/12/50") which fail to parse; update the className values to use a single opacity segment (e.g., change "dark:border-white/12/60" to "dark:border-white/12" and change "border-white/12/60" and "border-white/12/50" to "border-white/12") in the affected JSX elements (search for the div with className containing dark:border-white/12/60 and the other two occurrences) so borders render correctly in dark mode.
931-934:⚠️ Potential issue | 🟠 MajorTooltip:
dark:bg-white/[0.04]still makes white text unreadable (unchanged from previous review).Tooltip bubble and its arrow on the refresh button still use
dark:bg-white/[0.04], rendering the tooltip near-transparent against white text in dark mode.🛠️ Fix
- <div className="bg-gray-900 dark:bg-white/[0.04] text-white text-xs rounded-lg px-3 py-2 whitespace-nowrap shadow-lg"> + <div className="bg-gray-900 dark:bg-panel-dark text-white text-xs rounded-lg px-3 py-2 whitespace-nowrap shadow-lg"> {t('每次刷新都能看到不一样的内容', 'Each refresh shows different content')} </div> - <div className="absolute -top-1 right-3 w-2 h-2 bg-gray-900 dark:bg-white/[0.04] rotate-45" /> + <div className="absolute -top-1 right-3 w-2 h-2 bg-gray-900 dark:bg-panel-dark rotate-45" />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/DiscoveryView.tsx` around lines 931 - 934, The tooltip uses dark:bg-white/[0.04] which makes the white text nearly invisible in dark mode; update the tooltip bubble (the div with classes "bg-gray-900 dark:bg-white/[0.04] text-white ...") and its arrow (the div with classes "absolute -top-1 right-3 w-2 h-2 bg-gray-900 dark:bg-white/[0.04] rotate-45") to use a darker background in dark mode (for example dark:bg-gray-800 or dark:bg-black/80) so the white text remains readable, keeping the original light-mode bg-gray-900 for consistency. Ensure both elements use the same new dark:bg utility so the bubble and arrow match.
948-948:⚠️ Potential issue | 🔴 CriticalForm controls:
dark:bg-white/[0.04]/80double opacity still present across seven controls.The previous review flagged this pattern; the current diff retains it on all seven
<select>/<input>elements (trending time-range, topic, search input, language, sort-by, sort-order, platform). Every one of them is transparent in dark mode.🛠️ Fix (apply to each)
- className="px-3 py-2 text-sm rounded-xl border border-light-border dark:border-white/12 bg-white/80 dark:bg-white/[0.04]/80 text-text-primarydark:text-text-secondary focus:ring-2 focus:ring-brand-violet focus:border-transparent transition-colors" + className="px-3 py-2 text-sm rounded-xl border border-light-border dark:border-white/12 bg-white/80 dark:bg-white/[0.05] text-text-primary dark:text-text-secondary focus:ring-2 focus:ring-brand-violet focus:border-transparent transition-colors"Also applies to: 960-960, 1051-1051, 1070-1070, 1092-1092, 1102-1102, 1111-1111
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/DiscoveryView.tsx` at line 948, In DiscoveryView.tsx update the seven form controls (trending time-range, topic, search input, language, sort-by, sort-order, platform) that use the className containing the erroneous "dark:bg-white/[0.04]/80" token: locate the className string in the DiscoveryView component and replace "dark:bg-white/[0.04]/80" with a single opacity token like "dark:bg-white/[0.04]" (apply the same replacement for all seven select/input elements so dark mode background opacity is not doubled).src/components/SearchDemo.tsx (1)
187-187:⚠️ Potential issue | 🔴 Critical
dark:bg-white/[0.04]/50still present after previous flag.The selected-example detail panel still has a double-opacity
dark:bg-white/[0.04]/50(also missing whitespace afterbg-light-bg). Dark-mode panel background will not render.🛠️ Fix
- <div className="bg-light-bgdark:bg-white/[0.04]/50 rounded-lg p-4"> + <div className="bg-light-bg dark:bg-white/[0.02] rounded-lg p-4">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/SearchDemo.tsx` at line 187, The className on the selected-example detail panel in SearchDemo.tsx contains a malformed token "bg-light-bgdark:bg-white/[0.04]/50" (missing space and duplicated opacity), so update the class string used in that JSX element (in the SearchDemo component) to separate the light and dark classes and remove the extra "/50" opacity: replace the token with "bg-light-bg dark:bg-white/[0.04]" (ensure there is a space after "bg-light-bg" and only one dark:bg entry with the correct opacity syntax).src/components/ReleaseCard.tsx (1)
199-199:⚠️ Potential issue | 🔴 CriticalL199: double opacity
dark:bg-white/[0.04]/50still not fixed (and now also missing whitespace).The download-list panel still uses two opacity modifiers stacked. Tailwind drops the class, so the panel has no dark-mode background and bleeds into the card surface. The previous review called this out; it remained because the automation pass glued
bg-light-bgonto it without space and left the/50in place.🛠️ Fix
- <div className="bg-light-bgdark:bg-white/[0.04]/50 rounded border border-light-border dark:border-white/12 max-h-72 overflow-y-auto"> + <div className="bg-light-bg dark:bg-white/[0.02] rounded border border-light-border dark:border-white/12 max-h-72 overflow-y-auto">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/ReleaseCard.tsx` at line 199, The div in ReleaseCard.tsx with the className containing "bg-light-bgdark:bg-white/[0.04]/50" has a broken/malformed Tailwind class: remove the extra "/50" opacity token and insert a space between "bg-light-bg" and "dark:bg-white/[0.04]". In other words, update the className on the div inside the ReleaseCard component so it reads with two separate classes "bg-light-bg" and "dark:bg-white/[0.04]" (followed by the existing rounded/border/overflow classes) to restore dark-mode background behavior.src/components/LoginScreen.tsx (1)
190-190:⚠️ Potential issue | 🔴 CriticalDouble opacity modifier
/[0.04]/50still not fixed.Even after the previous pass, L190 still reads
dark:bg-white/[0.04]/50(now additionally glued tobg-light-bgwithout a space). Tailwind can't parse two opacity modifiers on one utility, so the dark-mode background is dropped entirely and the panel has no visible surface in dark mode.🛠️ Fix
- <div className="mt-6 p-4 bg-light-bgdark:bg-white/[0.04]/50 rounded-lg"> + <div className="mt-6 p-4 bg-light-bg dark:bg-white/[0.02] rounded-lg">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/LoginScreen.tsx` at line 190, The className on the div in LoginScreen.tsx has a malformed/merged token "bg-light-bgdark:bg-white/[0.04]/50" which combines two classes and two opacity modifiers; split the classes and remove the duplicate opacity so Tailwind can parse it — e.g. change the className to include "bg-light-bg" followed by "dark:bg-white/[0.04]" (or "dark:bg-white/50" if you prefer a 50% opacity) and keep the rest ("mt-6 p-4 rounded-lg") intact so the dark-mode background renders correctly.
🟡 Minor comments (3)
src/components/RepositoryEditModal.tsx-1181-1181 (1)
1181-1181:⚠️ Potential issue | 🟡 MinorSave button light/dark palettes don't match.
bg-brand-indigo text-white ... hover:bg-green-700 dark:bg-status-emerald/80 dark:hover:bg-status-emerald— light mode is indigo with a green hover (palette mismatch), while dark mode is emerald. Pick a consistent family. Given this is the Save button, emerald/green throughout may be intended; if so the base should also be emerald. Consider:🎨 Proposed fix
- className="flex items-center space-x-2 px-4 py-2 bg-brand-indigo text-white rounded-lg hover:bg-green-700 dark:bg-status-emerald/80 dark:hover:bg-status-emerald disabled:opacity-50 disabled:cursor-not-allowed transition-colors" + className="flex items-center space-x-2 px-4 py-2 bg-status-emerald text-white rounded-lg hover:bg-status-emerald/90 dark:bg-status-emerald/80 dark:hover:bg-status-emerald disabled:opacity-50 disabled:cursor-not-allowed transition-colors"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/RepositoryEditModal.tsx` at line 1181, The Save button in RepositoryEditModal.tsx uses mismatched light/dark palettes (class string includes bg-brand-indigo text-white hover:bg-green-700 dark:bg-status-emerald/80 dark:hover:bg-status-emerald); change the light-mode classes to the same emerald family so both modes match—replace bg-brand-indigo and hover:bg-green-700 with the corresponding emerald classes (e.g., bg-status-emerald or bg-status-emerald/whatever and hover:bg-status-emerald for hover) while keeping text-white, rounded-lg, disabled and transition classes intact so the Save button uses a consistent green/emerald palette across light and dark themes.src/components/settings/AIConfigPanel.tsx-573-581 (1)
573-581:⚠️ Potential issue | 🟡 MinorSave/Test button hover colors contradict base colors.
Lines 573 and 581 apply
bg-brand-indigo text-whiteas the base but keep the pre-migrationhover:bg-green-700/hover:bg-blue-700, so the buttons visibly flip palette on hover. Pick the token-based hover for consistency.🎨 Proposed fix
- className="flex items-center space-x-2 px-4 py-2 bg-brand-indigo text-white rounded-lg hover:bg-green-700 transition-colors" + className="flex items-center space-x-2 px-4 py-2 bg-brand-indigo text-white rounded-lg hover:bg-brand-hover transition-colors" ... - className="flex items-center space-x-2 px-4 py-2 bg-brand-indigo text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50" + className="flex items-center space-x-2 px-4 py-2 bg-brand-indigo text-white rounded-lg hover:bg-brand-hover transition-colors disabled:opacity-50"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/settings/AIConfigPanel.tsx` around lines 573 - 581, The save and test buttons in AIConfigPanel (the button rendering the <Save /> icon and the button with onClick={handleTestForm} using disabled={testingForm}) use base class bg-brand-indigo but still have legacy hover classes hover:bg-green-700 / hover:bg-blue-700; replace those legacy hover classes with the token-based hover (e.g., hover:bg-brand-indigo-700) on both buttons so the hover color matches the bg-brand-indigo token.src/components/ReadmeModal.tsx-345-350 (1)
345-350:⚠️ Potential issue | 🟡 MinorRetry button dark variant uses
status-red— semantic mismatch.The Retry control is a benign recovery action, but in dark mode it renders in
bg-status-red/80 hover:bg-status-red, which is the same palette used elsewhere for destructive actions (e.g., the unstar button inRepositoryCard.tsxline 38). Users will read this as "confirm destructive operation" rather than "retry load". Light mode correctly usesbg-brand-violet; dark mode should stay on the brand palette for consistency.🛠️ Proposed fix
- className="px-4 py-2 bg-brand-violet text-white rounded-lg hover:bg-brand-violet/90 dark:bg-status-red/80 dark:hover:bg-status-red transition-colors" + className="px-4 py-2 bg-brand-violet text-white rounded-lg hover:bg-brand-violet/90 dark:bg-brand-indigo dark:hover:bg-brand-indigo/90 transition-colors"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/ReadmeModal.tsx` around lines 345 - 350, The Retry button in ReadmeModal uses the wrong dark-mode classes (dark:bg-status-red/80 dark:hover:bg-status-red) which semantically signals a destructive action; update the button (inside the ReadmeModal component where onClick={fetchReadme}) to use the brand palette for dark mode instead (e.g., replace dark:bg-status-red/80 and dark:hover:bg-status-red with the dark-mode equivalents of bg-brand-violet and hover:bg-brand-violet/90) so the control remains a benign retry action across themes.
| return ( | ||
| <div | ||
| className="relative w-full border-b border-gray-200 dark:border-gray-700 bg-gray-50/95 dark:bg-gray-800/95 backdrop-blur-sm lg:hidden" | ||
| className="relative w-full border-b border-light-border dark:border-white/12 bg-light-bg95 dark:bg-panel-dark/95 backdrop-blur-sm lg:hidden" |
There was a problem hiding this comment.
bg-light-bg95 / bg-light-surface80 are missing the / before their opacity step — not valid utilities.
- L169:
bg-light-bg95should bebg-light-bg/95(mobile tab container background with 95% opacity). As-is, the sticky tab bar has no background and won't be opaque enough forbackdrop-blur-smto be visible. - L948 / L960:
bg-light-surface80should bebg-light-surface/80(trending time-range and topic selectors). The selects will render transparent in light mode.
🛠️ Fix
- className="relative w-full border-b border-light-border dark:border-white/12 bg-light-bg95 dark:bg-panel-dark/95 backdrop-blur-sm lg:hidden"
+ className="relative w-full border-b border-light-border dark:border-white/12 bg-light-bg/95 dark:bg-panel-dark/95 backdrop-blur-sm lg:hidden"- className="px-2.5 py-1.5 rounded-lg text-xs font-medium bg-light-surface80 text-text-primarydark:bg-white/[0.04]/80 dark:text-text-secondary border border-light-border dark:border-white/12 focus:ring-2 focus:ring-brand-violet focus:border-transparent transition-colors"
+ className="px-2.5 py-1.5 rounded-lg text-xs font-medium bg-light-surface/80 text-text-primary dark:bg-white/[0.04] dark:text-text-secondary border border-light-border dark:border-white/12 focus:ring-2 focus:ring-brand-violet focus:border-transparent transition-colors"(Apply the same to L960.)
Also applies to: 948-948, 960-960
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/DiscoveryView.tsx` at line 169, Replace the invalid Tailwind
utilities that miss the slash in opacity steps: change "bg-light-bg95" to
"bg-light-bg/95" in the mobile tab container className string that starts with
"relative w-full border-b ... backdrop-blur-sm lg:hidden", and change every
"bg-light-surface80" to "bg-light-surface/80" on the trending time-range and
topic selector elements (the select controls rendering the trending filters) so
the background opacity is applied correctly and backdrop-blur becomes visible.
| <Loader2 className="w-7 h-7 animate-spin text-brand-violet" /> | ||
| </div> | ||
| <div className="absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full animate-ping opacity-75" /> | ||
| <div className="absolute -top-1 -right-1 w-4 h-4 bg-status-emerald0 rounded-full animate-ping opacity-75" /> |
There was a problem hiding this comment.
bg-status-emerald0 — malformed utility (same bug as LoginScreen.tsx:131).
The ping dot over the initial loader spinner has bg-status-emerald0, which Tailwind won't emit. The green ping indicator will be missing.
🛠️ Fix
- <div className="absolute -top-1 -right-1 w-4 h-4 bg-status-emerald0 rounded-full animate-ping opacity-75" />
+ <div className="absolute -top-1 -right-1 w-4 h-4 bg-status-emerald rounded-full animate-ping opacity-75" />If both occurrences came from the same replacement rule, re-running it against rg -n 'bg-status-emerald0' should catch the rest.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/DiscoveryView.tsx` at line 1129, The ping-dot div in
DiscoveryView.tsx uses a malformed Tailwind utility "bg-status-emerald0" so the
green indicator won't render; update the className on the JSX element with
className "absolute -top-1 -right-1 w-4 h-4 bg-status-emerald0 rounded-full
animate-ping opacity-75" to use the correct utility (e.g., "bg-status-emerald-0"
— add the missing hyphen or the correct project-specific token), then re-run a
search for "bg-status-emerald0" (the same replacement that affected
LoginScreen.tsx) and fix any other occurrences.
| <div className="w-2 h-2 bg-green-500 rounded-full"></div> | ||
| <div className="mb-4 p-3 bg-status-emerald dark:bg-green-900/30 border border-green-200 dark:border-green-800 rounded-lg"> | ||
| <div className="flex items-center space-x-2 text-status-emerald dark:text-green-400"> | ||
| <div className="w-2 h-2 bg-status-emerald0 rounded-full"></div> |
There was a problem hiding this comment.
Malformed utility bg-status-emerald0 will not emit any CSS.
bg-status-emerald0 is not a valid Tailwind class — looks like a botched replacement of something like bg-emerald-500/bg-green-500 where the numeric suffix lost its dash. The dot in the inline spec probably loses its background in light mode.
🛠️ Fix
- <div className="w-2 h-2 bg-status-emerald0 rounded-full"></div>
+ <div className="w-2 h-2 bg-status-emerald rounded-full"></div>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="w-2 h-2 bg-status-emerald0 rounded-full"></div> | |
| <div className="w-2 h-2 bg-status-emerald rounded-full"></div> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/LoginScreen.tsx` at line 131, The utility class
"bg-status-emerald0" in the LoginScreen component's status dot is invalid and
emits no CSS; update the className on the small status div (the element with
className currently containing "w-2 h-2 bg-status-emerald0 rounded-full") to use
a valid Tailwind background color like "bg-emerald-500" or "bg-green-500" (or
pick the correct shade used elsewhere in the UI) so the dot renders correctly in
both light and dark modes.
| return ( | ||
| <div | ||
| className="relative w-full border-b border-gray-200 dark:border-gray-700 bg-gray-50/95 dark:bg-gray-800/95 backdrop-blur-sm" | ||
| className="relative w-full border-b border-light-border dark:border-white/12 bg-light-bg95 dark:bg-panel-dark/95 backdrop-blur-sm" |
There was a problem hiding this comment.
bg-light-bg95 is missing the opacity / separator.
Should be bg-light-bg/95 to apply the light-bg token at 95% opacity. As written, bg-light-bg95 is an unknown class and produces no CSS — the nav background will fall through to whatever is behind it on light mode.
🐛 Proposed fix
- className="relative w-full border-b border-light-border dark:border-white/12 bg-light-bg95 dark:bg-panel-dark/95 backdrop-blur-sm"
+ className="relative w-full border-b border-light-border dark:border-white/12 bg-light-bg/95 dark:bg-panel-dark/95 backdrop-blur-sm"Note: /95 also needs to be in the opacity scale — see the tailwind.config.js root-cause comment about the missing /12 entry. The default Tailwind scale does include 95, so this specific one is fine, but audit all custom /N values.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/SettingsPanel.tsx` at line 131, Update the class string in
SettingsPanel.tsx where className includes the invalid token "bg-light-bg95":
replace "bg-light-bg95" with "bg-light-bg/95" so the light-bg color token is
applied at 95% opacity; also verify the Tailwind opacity scale in
tailwind.config.js includes the /95 entry (and audit other custom color/opacity
tokens) to ensure the generated utility exists.
| ? 'bg-brand-indigo/20 text-blue-700 dark:bg-brand-indigo/20/30 dark:text-blue-300' | ||
| : 'text-text-primarydark:text-text-secondary hover:bg-gray-200 dark:hover:bg-white/10' |
There was a problem hiding this comment.
Invalid chained opacity dark:bg-brand-indigo/20/30 and merged-token class on the selected-tab styling (desktop sidebar & standalone mode).
Line 366 (and the same pattern on line 423 in the standalone-page variant) has dark:bg-brand-indigo/20/30 — chained opacity is not valid Tailwind syntax, so the active tab's dark background never renders. Also text-text-primarydark:text-text-secondary on line 367 (and hover:bg-light-surfacedark:hover:bg-white/10 on line 424) are merged tokens.
🐛 Proposed fix (apply to both line 366/367 and line 423/424 blocks)
- ? 'bg-brand-indigo/20 text-blue-700 dark:bg-brand-indigo/20/30 dark:text-blue-300'
- : 'text-text-primarydark:text-text-secondary hover:bg-gray-200 dark:hover:bg-white/10'
+ ? 'bg-brand-indigo/20 text-blue-700 dark:bg-brand-indigo/30 dark:text-blue-300'
+ : 'text-text-primary dark:text-text-secondary hover:bg-gray-200 dark:hover:bg-white/10'
...
- ? 'bg-brand-indigo/20 text-blue-700 dark:bg-brand-indigo/20/30 dark:text-blue-300'
- : 'text-text-primarydark:text-text-secondary hover:bg-light-surfacedark:hover:bg-white/10'
+ ? 'bg-brand-indigo/20 text-blue-700 dark:bg-brand-indigo/30 dark:text-blue-300'
+ : 'text-text-primary dark:text-text-secondary hover:bg-light-surface dark:hover:bg-white/10'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/SettingsPanel.tsx` around lines 366 - 367, In SettingsPanel
update the two className ternaries that build the selected-tab styles (the
conditional that currently returns the strings containing
"dark:bg-brand-indigo/20/30" and "text-text-primarydark:text-text-secondary" in
the desktop sidebar and the analogous standalone variant) to use valid Tailwind
tokens: replace the chained opacity "dark:bg-brand-indigo/20/30" with a single
opacity token such as "dark:bg-brand-indigo/30" (or "dark:bg-brand-indigo/20" if
20 was intended) and split the merged token
"text-text-primarydark:text-text-secondary" into two tokens "text-text-primary
dark:text-text-secondary"; likewise split any merged hover token into
"hover:bg-light-surface dark:hover:bg-white/10". Apply these exact replacements
in both occurrences inside the SettingsPanel component.
| <span | ||
| key={tag} | ||
| className="px-2 py-0.5 rounded-md text-xs font-medium bg-blue-50/50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300" | ||
| className="px-2 py-0.5 rounded-md text-xs font-medium bg-blue-50/50 text-blue-700 dark:bg-brand-indigo/20/30 dark:text-blue-300" |
There was a problem hiding this comment.
AI tag chip: double opacity dark:bg-brand-indigo/20/30.
bg-brand-indigo/20/30 is invalid; Tailwind drops the class so the tag chip has no dark-mode background.
🛠️ Fix
- className="px-2 py-0.5 rounded-md text-xs font-medium bg-blue-50/50 text-blue-700 dark:bg-brand-indigo/20/30 dark:text-blue-300"
+ className="px-2 py-0.5 rounded-md text-xs font-medium bg-blue-50/50 text-blue-700 dark:bg-brand-indigo/30 dark:text-blue-300"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| className="px-2 py-0.5 rounded-md text-xs font-medium bg-blue-50/50 text-blue-700 dark:bg-brand-indigo/20/30 dark:text-blue-300" | |
| className="px-2 py-0.5 rounded-md text-xs font-medium bg-blue-50/50 text-blue-700 dark:bg-brand-indigo/30 dark:text-blue-300" |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/SubscriptionRepoCard.tsx` at line 412, The Tailwind class in
SubscriptionRepoCard.tsx for the AI tag chip uses an invalid combined opacity
token `dark:bg-brand-indigo/20/30`, which gets dropped; update the className on
the tag chip (the string containing "px-2 py-0.5 rounded-md text-xs font-medium
bg-blue-50/50 text-blue-700 dark:bg-brand-indigo/20/30 dark:text-blue-300") to
use a single valid dark-mode background utility such as
`dark:bg-brand-indigo/30` (or `dark:bg-brand-indigo/20`) so the dark-mode
background actually applies.
| @apply bg-white/[0.02] text-text-primary border border-white/12 rounded-md px-3 py-1.5 transition-colors duration-200; | ||
| } | ||
| .btn-ghost:hover { | ||
| @apply bg-white/5 border-white/12; | ||
| } | ||
| .btn-ghost:focus { | ||
| @apply shadow-focus outline-none; | ||
| } | ||
|
|
||
| .btn-subtle { | ||
| @apply bg-white/[0.04] text-text-secondary rounded-md px-[6px] py-0 transition-colors duration-200; | ||
| } | ||
| .btn-subtle:hover { | ||
| @apply bg-white/10 text-text-primary; | ||
| } | ||
|
|
||
| .btn-primary { | ||
| @apply bg-brand-indigo text-white px-4 py-2 rounded-md transition-colors duration-200 border border-transparent; | ||
| } | ||
| .btn-primary:hover { | ||
| @apply bg-brand-hover; | ||
| } | ||
|
|
||
| .btn-icon { | ||
| @apply bg-white/[0.03] text-text-primary border border-white/[0.08] rounded-full p-2 flex items-center justify-center transition-colors duration-200; | ||
| } | ||
| .btn-icon:hover { | ||
| @apply bg-white/10; | ||
| } | ||
|
|
||
| .pill { | ||
| @apply bg-transparent text-text-secondary px-[10px] py-0 rounded-full border border-border-primary text-[12px] font-medium flex items-center gap-1; | ||
| } | ||
| .pill-success { | ||
| @apply bg-status-emerald text-text-primary rounded-full text-[10px] font-medium; | ||
| } | ||
| .badge-subtle { | ||
| @apply bg-white/5 text-text-primary px-2 py-0 rounded-sm border border-white/12 text-[10px] font-medium; | ||
| } | ||
|
|
||
| .input-base { | ||
| @apply bg-white/[0.02] text-text-secondary border border-white/[0.08] rounded-md px-[14px] py-[12px] focus:outline-none focus:border-white/20 focus:shadow-focus transition-all duration-200; | ||
| } | ||
| .input-search { | ||
| @apply bg-transparent text-text-primary focus:outline-none placeholder:text-text-tertiary; | ||
| } | ||
|
|
||
| .linear-card { | ||
| @apply bg-white/[0.03] border border-white/[0.08] rounded-lg shadow-subtle hover:bg-white/[0.05] transition-colors duration-200; | ||
| } | ||
| .linear-panel { | ||
| @apply bg-white/[0.03] border border-white/[0.08] rounded-xl shadow-elevated; | ||
| } | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Does Tailwind CSS v3.4.1's default theme.opacity scale include a '12' key (i.e., does bg-white/12orborder-white/12 work without extending the opacity scale)?
💡 Result:
No. Tailwind CSS v3.4.1’s default opacity scale does not include a 12 key/value, so utilities like bg-white/12 and border-white/12 will not work out of the box. Tailwind’s default opacity utilities for v3 list opacity-0, opacity-5, opacity-10, opacity-15, … up to opacity-95, opacity-100, i.e. the scale steps are in increments of 5 (not 12).
Citations:
🏁 Script executed:
# Find and read tailwind.config.js
find . -name "tailwind.config.js" -o -name "tailwind.config.ts" | head -5Repository: AmintaCCCP/GithubStarsManager
Length of output: 94
🏁 Script executed:
# Search for /12 opacity usage in the codebase
rg '/12' --type css --type scss -nRepository: AmintaCCCP/GithubStarsManager
Length of output: 102
🏁 Script executed:
# Also check for 12 in tailwind config files to see if opacity is extended
rg "opacity.*12|'12'|\"12\"" --type js --type ts -A 2 -B 2Repository: AmintaCCCP/GithubStarsManager
Length of output: 664
🏁 Script executed:
# Read the tailwind configuration
cat -n tailwind.config.jsRepository: AmintaCCCP/GithubStarsManager
Length of output: 6874
🏁 Script executed:
# Search for /12 opacity in CSS/HTML files (broader search)
rg '/12' -nRepository: AmintaCCCP/GithubStarsManager
Length of output: 37285
Add '12': '0.12' to the opacity scale in tailwind.config.js.
Tailwind v3.4's default opacity scale includes only 0, 5, 10, 15, …, 95, 100 — 12 is not included. The widespread use of /12 opacity utilities (border-white/12, bg-white/12, etc.) throughout the codebase will compile to empty classes and fail to apply unless this value is declared in theme.extend.opacity. Extend the config to include '12': '0.12'.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/index.css` around lines 640 - 693, Tailwind's default opacity scale lacks
a "12" value, so all utilities like /12 (e.g., border-white/12, bg-white/12)
don't generate CSS; fix this by updating tailwind.config.js and add '12': '0.12'
under theme.extend.opacity so the classes used across the project (referenced in
styles like .btn-ghost, .btn-icon, .linear-card, etc.) will compile correctly.
| // Linear Status | ||
| 'status-green': '#27a644', | ||
| 'status-emerald': '#10b981', | ||
| 'status-red': '#ef4444', | ||
|
|
||
| // Linear Borders (Solid fallbacks, though we mainly use rgba) | ||
| 'border-primary': '#23252a', | ||
| 'border-secondary': '#34343a', | ||
| 'border-tertiary': '#3e3e44', | ||
| 'line-tint': '#141516', | ||
| 'line-tertiary': '#18191a', | ||
|
|
||
| // Linear Light Mode Neutrals (Fallbacks if needed) | ||
| 'light-bg': '#f7f8f8', | ||
| 'light-surface': '#f3f4f5', | ||
| 'light-border': '#d0d6e0', | ||
| 'light-border-alt': '#e6e6e6', |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Enumerate all call sites that rely on the missing `status-amber` token and on the `/12` opacity.
echo "=== status-amber references ==="
rg -nP --type=tsx --type=ts --type=css '\b(bg|text|border|ring|from|to|via|fill|stroke|shadow|divide)-status-amber(/\[?[\w.]+\]?)?\b' -g '!**/node_modules/**'
echo
echo "=== /12 opacity modifier references ==="
rg -nP '\b(bg|text|border|ring|divide|outline|from|via|to|fill|stroke)-(?:white|black|[a-z]+-(?:indigo|violet|primary|secondary|tertiary|emerald|amber|red|green))/12\b' -g '!**/node_modules/**'
echo
echo "=== confirm status-amber is NOT defined in tailwind.config.js ==="
rg -nP "status-amber" tailwind.config.js || echo "NOT defined"
echo
echo "=== confirm opacity '12' is NOT defined in tailwind.config.js ==="
rg -nP "opacity" tailwind.config.jsRepository: AmintaCCCP/GithubStarsManager
Length of output: 37899
🏁 Script executed:
# Check the actual tailwind.config.js content at the relevant lines
head -60 tailwind.config.js | tail -30Repository: AmintaCCCP/GithubStarsManager
Length of output: 1034
🏁 Script executed:
# Search more broadly for any amber-related status color
rg "status.*amber|amber.*status" --type ts --type tsx --type js --type cssRepository: AmintaCCCP/GithubStarsManager
Length of output: 101
🏁 Script executed:
# Check the specific files mentioned in the review comment
echo "=== Checking BulkCategorizeModal.tsx for status-amber ==="
rg "status-amber" src/components/BulkCategorizeModal.tsx || echo "NOT FOUND"
echo "=== Checking RepositoryEditModal.tsx for status-amber ==="
rg "status-amber" src/components/RepositoryEditModal.tsx || echo "NOT FOUND"Repository: AmintaCCCP/GithubStarsManager
Length of output: 2399
🏁 Script executed:
# Look at actual opacity configuration in tailwind.config.js more thoroughly
rg -B2 -A10 "extend.*colors" tailwind.config.js | head -80Repository: AmintaCCCP/GithubStarsManager
Length of output: 55
Missing status-amber color token and /12 opacity scale entry.
Two root-cause configuration gaps that break multiple components:
-
status-amberis not defined but is referenced in the codebase:BulkCategorizeModal.tsx:dark:bg-status-amber/10,dark:border-status-amber/20RepositoryEditModal.tsx:dark:bg-status-amber/10,dark:border-status-amber/20,dark:text-status-amber,peer-checked:bg-status-amber
Without this token, amber warning/status indicators will be transparent or missing in dark mode.
-
/12is not in the opacity scale (Tailwind v3.4 defaults to0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100). Every instance ofdark:border-white/12across the codebase (100+ occurrences in SettingsPanel, CategoryPanel, RepositoryEditModal, and others) generates no CSS — borders and fills silently disappear.
The PR replaced the previous /8 opacity with /12 for improved AAA contrast, but the opacity scale extension was not added to the config.
🛠 Suggested fix
'status-green': '#27a644',
'status-emerald': '#10b981',
'status-red': '#ef4444',
+ 'status-amber': '#f59e0b',
// Linear Borders (Solid fallbacks, though we mainly use rgba)
...
fontWeight: {
'light': '300',
'normal': '400',
'medium': '510',
'semibold': '590',
},
+ opacity: {
+ '12': '0.12',
+ },
letterSpacing: {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@tailwind.config.js` around lines 37 - 53, Add a missing color token and the
/12 opacity entry to the Tailwind theme: define 'status-amber' (used by
BulkCategorizeModal.tsx and RepositoryEditModal.tsx) in the theme colors (e.g.,
set a suitable amber hex for the 'status-amber' key) and extend the
theme.opacity map to include a '12': '0.12' entry so classes like
dark:border-white/12 and dark:border-status-amber/20 resolve correctly; update
tailwind.config.js under theme.extend to add these entries where other
'status-*' colors and opacity values are defined.
- Fix index.html body classes to support light mode properly - Add missing spaces before dark: variants across all TSX files - Revert border-white/12 to border-white/[0.04] per DESIGN.md for softer borders - Fix dropdown (select) background colors and option element contrast - Fix invalid tailwind classes like bg-light-surface80
There was a problem hiding this comment.
Actionable comments posted: 19
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
src/components/Header.tsx (1)
25-25:⚠️ Potential issue | 🔴 CriticalMobile navigation is now unreachable — toggle was removed but dropdown state remains.
Menu/Xicons and the toggle button that flippedmobileMenuOpenwere removed, yet:
mobileMenuOpenis still declared at line 25 and only ever set tofalse(lines 288, 309, 325, 341).- The mobile dropdown at line 282 is gated on
mobileMenuOpen, so it can never render.- Tablet nav is
md:flex xl:hiddenand desktop nav isxl:flex, so on viewports<768pxthere is now no navigation UI at all — users cannot switch between Repositories / Releases / Trending / Settings on mobile.Despite the PR being described as style-only, this is a functional regression. Either restore a hamburger toggle button (recommended) or delete the dead
mobileMenuOpenstate + dropdown block entirely and provide an alternative mobile nav.🛠️ Minimal fix: restore the toggle button and icon imports
-import { Settings, Calendar, Search, Moon, Sun, LogOut, RefreshCw, TrendingUp } from 'lucide-react'; +import { Settings, Calendar, Search, Moon, Sun, LogOut, RefreshCw, TrendingUp, Menu, X } from 'lucide-react';Then add a toggle button inside the mobile breakpoint (e.g., next to the user actions or logo) — something like:
<button type="button" onClick={() => setMobileMenuOpen(v => !v)} className="md:hidden p-2 rounded-lg hover:bg-light-surface dark:hover:bg-white/5 transition-colors" aria-label={t('菜单', 'Menu')} aria-expanded={mobileMenuOpen} > {mobileMenuOpen ? <X className="w-5 h-5 text-text-secondary" /> : <Menu className="w-5 h-5 text-text-secondary" />} </button>Also applies to: 282-356
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/Header.tsx` at line 25, mobileMenuOpen is declared but never toggled because the hamburger toggle and Menu/X icon imports were removed, leaving the mobile dropdown (the block gated on mobileMenuOpen) unreachable; restore a toggle button that calls setMobileMenuOpen(v => !v) and re-add the Menu and X icon imports, placing the button inside the mobile breakpoint (md:hidden) near the logo or user actions so small viewports can open the dropdown, ensure the button has accessible attributes (type="button", aria-label, aria-expanded={mobileMenuOpen}) and matching styling (p-2 rounded hover bg classes) so the mobile dropdown controlled by mobileMenuOpen can render; alternatively remove mobileMenuOpen and the entire mobile dropdown block if you intentionally want no mobile nav.src/components/SettingsPanel.tsx (1)
185-186:⚠️ Potential issue | 🟡 MinorMobile tab-bar edge-fade gradients no longer match the container color.
Container is
bg-light-bg/95/dark:bg-panel-dark/95, but the left/right gradient masks are hardcoded tofrom-gray-50 dark:from-gray-800. The fade's origin color won't match the tab-bar background, leaving a visible vertical seam instead of a smooth fade-out on the first/last tab.- <div className="absolute left-0 top-0 bottom-0 w-4 bg-gradient-to-r from-gray-50 dark:from-gray-800 to-transparent pointer-events-none md:hidden" /> - <div className="absolute right-0 top-0 bottom-0 w-4 bg-gradient-to-l from-gray-50 dark:from-gray-800 to-transparent pointer-events-none md:hidden" /> + <div className="absolute left-0 top-0 bottom-0 w-4 bg-gradient-to-r from-light-bg dark:from-panel-dark to-transparent pointer-events-none md:hidden" /> + <div className="absolute right-0 top-0 bottom-0 w-4 bg-gradient-to-l from-light-bg dark:from-panel-dark to-transparent pointer-events-none md:hidden" />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/SettingsPanel.tsx` around lines 185 - 186, The two gradient mask divs (the elements with classes "bg-gradient-to-r from-gray-50 dark:from-gray-800 ..." and "bg-gradient-to-l from-gray-50 dark:from-gray-800 ...") use hardcoded from colors that no longer match the tab-bar container (bg-light-bg/95 and dark:bg-panel-dark/95), producing a visible seam; update these gradient origins to match the container background instead (e.g., replace the hardcoded from-* colors with the same bg classes or a CSS variable used by the container such as from-[color:var(--tabbar-bg)] / dark:from-[color:var(--tabbar-bg-dark)] or Tailwind arbitrary color utilities that mirror bg-light-bg/95 and dark:bg-panel-dark/95) so the fade starts from the exact container color and produces a smooth edge.src/components/settings/BackendPanel.tsx (1)
183-190:⚠️ Potential issue | 🟠 MajorConnected-state badges are unreadable in light mode.
Line 186 and Lines 210-218 pair
bg-status-emeraldwithtext-status-emerald, so the connected label, icon, and version text blend into the background.Suggested fix
- return 'bg-status-emerald text-status-emerald dark:bg-green-900 dark:text-green-200'; + return 'bg-status-emerald/10 text-status-emerald dark:bg-green-900 dark:text-green-200';- <div className="p-4 bg-status-emerald dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800"> + <div className="p-4 bg-status-emerald/10 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">Also applies to: 209-218
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/settings/BackendPanel.tsx` around lines 183 - 190, The connected-state badge uses the same token for background and text so the label becomes unreadable; update getStatusClass (and any JSX that repeats the class combo around the connected badge in the render block) to use a contrasting text color for the 'connected' case instead of 'text-status-emerald' (for example use 'text-white' or a darker/lighter emerald contrast token) while keeping the existing bg-status-emerald and the dark-mode classes (dark:bg-green-900 dark:text-green-200) intact so the badge is readable in light and dark modes.
♻️ Duplicate comments (13)
src/components/LoginScreen.tsx (3)
131-131:⚠️ Potential issue | 🔴 CriticalInvalid class
bg-status-emerald0still present — status dot will have no background.This was flagged on a prior commit and marked addressed, but the current code still contains
bg-status-emerald0. Tailwind will drop this utility entirely, so the indicator dot renders as transparent/inheriting the (also broken — see adjacent comment) parent background. The intended token isbg-status-emerald(defined intailwind.config.js).🛠️ Fix
- <div className="w-2 h-2 bg-status-emerald0 rounded-full"></div> + <div className="w-2 h-2 bg-status-emerald rounded-full"></div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/LoginScreen.tsx` at line 131, In LoginScreen component replace the invalid Tailwind utility on the status dot: locate the div using className "w-2 h-2 bg-status-emerald0 rounded-full" and change the background token to the correct one ("bg-status-emerald"); ensure no other occurrences of "bg-status-emerald0" remain so Tailwind emits the proper utility for the indicator.
190-190:⚠️ Potential issue | 🔴 CriticalDouble opacity modifier
dark:bg-white/[0.04]/50still present — class will be dropped by Tailwind.Previously flagged as fixed, but line 190 still stacks two opacity modifiers (
/[0.04]and/50) on one utility. Tailwind's JIT parser cannot resolve this and emits nothing, so the panel has no dark-mode background — it falls through to the parentbg-panel-dark.Pick a single opacity, e.g.
dark:bg-white/[0.02]if the intent was 4% × 50%.🛠️ Fix
- <div className="mt-6 p-4 bg-light-bg dark:bg-white/[0.04]/50 rounded-lg"> + <div className="mt-6 p-4 bg-light-bg dark:bg-white/[0.02] rounded-lg">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/LoginScreen.tsx` at line 190, The dark-mode background utility on the div with className "mt-6 p-4 bg-light-bg dark:bg-white/[0.04]/50 rounded-lg" uses two opacity modifiers which Tailwind drops; remove the duplicate opacity and replace the combined modifiers with a single opacity token (for example use dark:bg-white/[0.02] or dark:bg-white/[0.04] depending on intended darkness) so the dark:bg utility is emitted and the panel gets the correct dark-mode background.
205-205:⚠️ Potential issue | 🟡 Minor"Create token" link still reverts to raw blue on hover — inconsistent with brand tokens.
text-brand-violet hover:text-blue-700 dark:hover:text-blue-300mixes the brand-violet base with hardcoded blue hovers in both modes. The design system definesbrand-hover(#828fff) exactly for this purpose; using it keeps the violet hue on hover and matches the rest of the migrated components.🛠️ Proposed fix
- className="text-brand-violet hover:text-blue-700 dark:text-brand-violet dark:hover:text-blue-300 text-sm font-medium hover:underline" + className="text-brand-violet hover:text-brand-hover dark:text-brand-violet dark:hover:text-brand-hover text-sm font-medium hover:underline"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/LoginScreen.tsx` at line 205, The "Create token" link's className mixes brand-violet with hardcoded blue hover colors; update the hover classes to use the design token by replacing hover:text-blue-700 and dark:hover:text-blue-300 with hover:text-brand-hover and dark:hover:text-brand-hover (leaving text-brand-violet and other classes intact) so the link preserves the brand-violet hue on hover and matches the migrated components.src/components/SettingsPanel.tsx (3)
131-131:⚠️ Potential issue | 🔴 Critical
bg-light-bg95still missing the/opacity separator.Renders no CSS — the sticky mobile tab bar loses its background and backdrop blur falls onto whatever is behind it.
- className="relative w-full border-b border-light-border dark:border-white/[0.04] bg-light-bg95 dark:bg-panel-dark/95 backdrop-blur-sm" + className="relative w-full border-b border-light-border dark:border-white/[0.04] bg-light-bg/95 dark:bg-panel-dark/95 backdrop-blur-sm"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/SettingsPanel.tsx` at line 131, The class string in SettingsPanel (the className containing "bg-light-bg95") is missing the Tailwind opacity separator and thus doesn't generate CSS; update the className in SettingsPanel.tsx to replace "bg-light-bg95" with "bg-light-bg/95" so the light background uses the intended 95% opacity (matching the existing dark:bg-panel-dark/95) and preserves the backdrop-blur and sticky tab bar background.
366-366:⚠️ Potential issue | 🔴 Critical
dark:bg-brand-indigo/20/30chained opacity still present on the selected sidebar tab (both modal and standalone layouts).The active tab's dark background never renders — users can't tell which settings page is selected in dark mode.
- ? 'bg-brand-indigo/20 text-blue-700 dark:bg-brand-indigo/20/30 dark:text-blue-300' + ? 'bg-brand-indigo/20 text-blue-700 dark:bg-brand-indigo/30 dark:text-blue-300'(apply to both line 366 and 423)
Also applies to: 423-423
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/SettingsPanel.tsx` at line 366, The dark-mode background utility is malformed as "dark:bg-brand-indigo/20/30", preventing the active tab background from rendering; update both occurrences in SettingsPanel.tsx (the class string used for the selected sidebar tab in the JSX ternary expression) to use a single valid Tailwind opacity token such as "dark:bg-brand-indigo/30" (or "dark:bg-brand-indigo/20") so the dark background renders for the active tab in both modal and standalone layouts.
162-162:⚠️ Potential issue | 🔴 Critical
dark:hover:bg-white/10/50chained opacity is still invalid.Tailwind only accepts a single
/<opacity>per color utility, so this produces no CSS and inactive mobile tabs have no hover background in dark mode.- : 'text-text-secondary dark:text-text-tertiary hover:text-text-primary dark:hover:text-gray-200 hover:bg-light-surface dark:hover:bg-white/10/50' + : 'text-text-secondary dark:text-text-tertiary hover:text-text-primary dark:hover:text-gray-200 hover:bg-light-surface dark:hover:bg-white/10'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/SettingsPanel.tsx` at line 162, The Tailwind class string in SettingsPanel (the conditional class that currently contains "dark:hover:bg-white/10/50") is invalid because Tailwind accepts only one "/<opacity>" per color; update that class in SettingsPanel.tsx to a valid utility such as "dark:hover:bg-white/10" (or "dark:hover:bg-white/50" depending on desired opacity) or use bracket/rgba notation (e.g., "dark:hover:bg-[rgba(255,255,255,0.1)]") so the hover background in dark mode actually applies for the inactive mobile tabs.src/components/SearchDemo.tsx (1)
134-134:⚠️ Potential issue | 🔴 Critical
dark:bg-brand-indigo/20/20chained opacity still present.Both the selected real-time example (L134) and the info panel (L213) still chain two
/20modifiers, so the dark-mode background emits no CSS.- ? 'border-brand-violet bg-blue-50 dark:bg-brand-indigo/20/20' + ? 'border-brand-violet bg-blue-50 dark:bg-brand-indigo/20' ... - <div className="mt-4 p-3 bg-blue-50 dark:bg-brand-indigo/20/20 rounded-lg"> + <div className="mt-4 p-3 bg-blue-50 dark:bg-brand-indigo/20 rounded-lg">Also applies to: 213-213
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/SearchDemo.tsx` at line 134, The class string 'dark:bg-brand-indigo/20/20' in SearchDemo.tsx contains a duplicated opacity token; replace both occurrences of 'dark:bg-brand-indigo/20/20' (used for the selected real-time example and the info panel) with a single opacity token 'dark:bg-brand-indigo/20' so the dark-mode background emits correct CSS.src/components/RepositoryCard.tsx (1)
787-793:⚠️ Potential issue | 🟠 MajorKeep contrast on the analyzed-state AI button.
Line 791 makes the light-mode analyzed state
bg-status-emerald text-status-emerald, so the Bot icon effectively disappears.Suggested fix
- ? 'bg-status-emerald text-status-emerald dark:bg-status-emerald/20 dark:text-status-emerald hover:bg-green-200 dark:hover:bg-status-emerald/30' + ? 'bg-status-emerald/10 text-status-emerald dark:bg-status-emerald/20 dark:text-status-emerald hover:bg-status-emerald/20 dark:hover:bg-status-emerald/30'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/RepositoryCard.tsx` around lines 787 - 793, The analyzed-state button currently uses identical bg and text colors (bg-status-emerald text-status-emerald) causing the icon to disappear; update the conditional branch in RepositoryCard's className (the repository.analyzed_at branch) to use a contrasting text color for light mode (for example text-white or another high-contrast token) while keeping the existing dark-mode classes (dark:bg-status-emerald/20 dark:text-status-emerald) intact so the icon remains visible.src/components/settings/GeneralPanel.tsx (1)
40-40:⚠️ Potential issue | 🟡 MinorSplit the radio input background and border classes.
Line 40 and Line 58 still merge
bg-light-surfacewithborder-light-border. Tailwind drops that token, so the light-theme radio styling falls back to the browser default.Suggested fix
- className="w-4 h-4 text-brand-violet bg-light-surfaceborder-light-border focus:ring-brand-violet dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-white/[0.04] dark:border-white/[0.04]" + className="w-4 h-4 text-brand-violet bg-light-surface border-light-border focus:ring-brand-violet dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-white/[0.04] dark:border-white/[0.04]"#!/bin/bash rg -n -C1 'bg-light-surfaceborder-light-border' src/components/settings/GeneralPanel.tsxAlso applies to: 58-58
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/settings/GeneralPanel.tsx` at line 40, The radio input className in GeneralPanel.tsx contains a merged Tailwind token "bg-light-surfaceborder-light-border" which Taillwind drops; update the radio input(s) (the JSX input element(s) in the GeneralPanel component) to use separate tokens "bg-light-surface" and "border-light-border" (e.g., replace the merged token in the className on the radio input(s) found around the existing className that starts with "w-4 h-4 text-brand-violet...") and apply the same fix for the second occurrence around line 58 so light-theme radio styling uses the intended background and border classes.src/components/settings/DataManagementPanel.tsx (1)
1316-1316:⚠️ Potential issue | 🟡 MinorKeep a single opacity modifier on the dark hover rows.
Line 1316 and Line 1400 still use
dark:hover:bg-white/10/50. Tailwind drops that utility, so there is no dark-mode hover feedback on these rows.Suggested fix
- className="flex items-center justify-between px-4 py-4 hover:bg-light-bg dark:hover:bg-white/10/50 transition-colors" + className="flex items-center justify-between px-4 py-4 hover:bg-light-bg dark:hover:bg-white/10 transition-colors"- <tr key={log.id} className="hover:bg-light-bg dark:hover:bg-white/10/50"> + <tr key={log.id} className="hover:bg-light-bg dark:hover:bg-white/10">#!/bin/bash rg -n -C1 'dark:hover:bg-white/10/50' src/components/settings/DataManagementPanel.tsxAlso applies to: 1400-1400
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/settings/DataManagementPanel.tsx` at line 1316, In DataManagementPanel (JSX className strings for the hover rows) the Tailwind utility uses an invalid combined opacity "dark:hover:bg-white/10/50"; replace both occurrences with a single valid opacity modifier such as "dark:hover:bg-white/10" (or "dark:hover:bg-white/50" if stronger) so the dark-mode hover style is applied; search for the className containing "dark:hover:bg-white/10/50" in DataManagementPanel and update those className values accordingly.src/components/SubscriptionRepoCard.tsx (1)
412-412:⚠️ Potential issue | 🟡 MinorUse a single opacity modifier on the AI tag chip.
Line 412 still uses
dark:bg-brand-indigo/20/30. Tailwind treats that as invalid syntax, so the dark-mode chip background is never emitted.Suggested fix
- className="px-2 py-0.5 rounded-md text-xs font-medium bg-blue-50/50 text-blue-700 dark:bg-brand-indigo/20/30 dark:text-blue-300" + className="px-2 py-0.5 rounded-md text-xs font-medium bg-blue-50/50 text-blue-700 dark:bg-brand-indigo/30 dark:text-blue-300"#!/bin/bash rg -n -C1 'dark:bg-brand-indigo/20/30' src/components/SubscriptionRepoCard.tsx🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/SubscriptionRepoCard.tsx` at line 412, The dark-mode chip class uses invalid Tailwind syntax "dark:bg-brand-indigo/20/30"; update the className on the AI tag chip in SubscriptionRepoCard (the JSX element with className="px-2 py-0.5 rounded-md text-xs font-medium bg-blue-50/50 text-blue-700 dark:bg-brand-indigo/20/30 dark:text-blue-300") to use a single opacity modifier such as "dark:bg-brand-indigo/20" (or "dark:bg-brand-indigo/30") so Tailwind will emit the dark background utility.src/components/ReleaseTimeline.tsx (1)
869-869:⚠️ Potential issue | 🟡 MinorFix the repository-group dark hover utility.
Line 869 still uses
dark:hover:bg-white/10/50. That utility does not compile, so expanded repository groups have no hover feedback in dark mode.Suggested fix
- className="w-full flex items-center justify-between p-2 hover:bg-light-bg dark:hover:bg-white/10/50 transition-colors" + className="w-full flex items-center justify-between p-2 hover:bg-light-bg dark:hover:bg-white/10 transition-colors"#!/bin/bash rg -n -C1 'dark:hover:bg-white/10/50' src/components/ReleaseTimeline.tsx🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/ReleaseTimeline.tsx` at line 869, The dark-mode hover utility is invalid: replace the bad utility string "dark:hover:bg-white/10/50" used in the ReleaseTimeline component's JSX (the element with className "w-full flex items-center justify-between p-2 hover:bg-light-bg dark:hover:bg-white/10/50 transition-colors") with a valid Tailwind opacity utility such as "dark:hover:bg-white/10" (or "dark:hover:bg-white/50" if you intended 50% opacity) so expanded repository groups get dark-mode hover feedback.src/components/ReleaseCard.tsx (1)
199-199:⚠️ Potential issue | 🟠 MajorKeep only one opacity modifier on the assets panel background.
Line 199 still uses
dark:bg-white/[0.04]/50. Tailwind drops that class, so the expanded downloads panel has no dark-mode background.Suggested fix
- <div className="bg-light-bg dark:bg-white/[0.04]/50 rounded border border-light-border dark:border-white/[0.04] max-h-72 overflow-y-auto"> + <div className="bg-light-bg dark:bg-white/[0.04] rounded border border-light-border dark:border-white/[0.04] max-h-72 overflow-y-auto">#!/bin/bash rg -n -C1 'dark:bg-white/\[0\.04\]/50' src/components/ReleaseCard.tsx🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/ReleaseCard.tsx` at line 199, The dark-mode background class in the ReleaseCard component uses two opacity modifiers ("dark:bg-white/[0.04]/50") which Tailwind drops; update the div that currently contains class "bg-light-bg dark:bg-white/[0.04]/50 rounded border ..." (inside ReleaseCard) to keep a single opacity modifier—e.g., replace "dark:bg-white/[0.04]/50" with "dark:bg-white/[0.04]" (or "dark:bg-white/50" if you prefer percent opacity) so the dark-mode background is applied correctly.
🧹 Nitpick comments (2)
src/components/Header.tsx (1)
143-143: Redundant/conflicting position utilities on<header>.
sticky top-0 ... relativesets bothposition: stickyandposition: relativeon the same element. Tailwind's source order keepsstickywinning today, but this is fragile and confusing — droprelativeunless it's deliberately needed for absolute-positioned descendants (in which casestickyalready establishes a positioning context).✏️ Proposed tweak
- <header className="bg-light-bg dark:bg-panel-dark border-b border-light-border dark:border-white/[0.04] sticky top-0 z-50 hd-drag lg:hd-drag relative"> + <header className="bg-light-bg dark:bg-panel-dark border-b border-light-border dark:border-white/[0.04] sticky top-0 z-50 hd-drag lg:hd-drag">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/Header.tsx` at line 143, The header element's className contains conflicting position utilities ("sticky" and "relative"); remove the redundant "relative" from the className on the <header> in Header.tsx unless you intentionally rely on an ancestor for absolute-positioned children—if you do need relative positioning for descendants, leave a clarifying comment above the <header> and keep both, otherwise drop "relative" from the className string to avoid the conflicting position utilities.src/components/FilterModal.tsx (1)
104-104: Light-mode hover/accent colors still hardcoded toblue-700/800.After migrating to
bg-brand-indigo/text-brand-violet, these still reach into the rawblue-*palette, producing a hue shift on hover (indigo → blue) and inconsistency with the rest of the retokened UI. Considerhover:bg-brand-indigo/90(button) andtext-brand-violet/hover:text-brand-violet/80(chip & help text).Also applies to: 126-126, 145-145
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/FilterModal.tsx` at line 104, The hover and accent colors in FilterModal.tsx still use raw blue palette (e.g., the className on the primary button that contains hover:bg-blue-700 and similar hover classes), causing a hue shift; update those classes to use the brand tokens instead (use hover:bg-brand-indigo/90 for the button and replace any text hover/accent uses of blue with text-brand-violet and hover:text-brand-violet/80 for chips/help text), and apply the same substitution for the other occurrences in this component where hover:bg-blue-700 or hover:bg-blue-800 is used so all hover/accent styles consistently use brand-indigo/brand-violet tokens.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/CategoryEditModal.tsx`:
- Line 1101: The enabled branch of the Save button's className contains
duplicate dark-mode utilities; locate the JSX that builds the button class (the
expression using hasChanges in CategoryEditModal, same pattern as in
FilterModal.tsx) and remove the repeated "dark:bg-status-emerald/80
dark:hover:bg-status-emerald" so each utility appears only once in the string
for the hasChanges=true branch, preserving spacing and the other classes.
In `@src/components/FilterModal.tsx`:
- Line 161: In FilterModal.tsx, fix the duplicated dark-mode utilities in the
primary action button's className (the conditional string used where the
expression checks (!name.trim() || keywords.length === 0)); remove the repeated
"dark:bg-status-emerald/80 dark:hover:bg-status-emerald" so each dark-mode
utility appears only once in that class string.
In `@src/components/LoginScreen.tsx`:
- Line 174: The button class in LoginScreen.tsx uses a hardcoded Tailwind hover
color ("hover:bg-blue-700") that conflicts with the design token; update the
className on the relevant JSX element (the one with className="...
bg-brand-indigo hover:bg-blue-700 ...") to use the design-token hover class
"hover:bg-brand-hover" instead of "hover:bg-blue-700" so the hover uses the
brand hover color defined in tailwind.config.js.
- Around line 129-139: The cached-repositories banner in LoginScreen uses the
foreground token bg-status-emerald and matching text-status-emerald which makes
light-mode text unreadable; update the light-mode classes on the outer panel and
text spans to use a muted/tinted background and darker text (for example replace
bg-status-emerald with a light surface token like bg-green-50 or a dedicated
bg-status-emerald-50 and replace text-status-emerald with a darker text token
like text-green-700 / text-green-800) while keeping the existing dark: classes
(dark:bg-green-900/30, dark:text-green-400/500) and leave the repository- and
lastSync-binding (repositories, lastSync) unchanged.
In `@src/components/ReadmeModal.tsx`:
- Line 291: In ReadmeModal.tsx update the invalid Tailwind class on the
scroll-progress track div (currently "h-1 bg-gray-200 dark:bg-white/8
flex-shrink-0") to use a valid arbitrary color/opacity token—replace the dark
mode token with an arbitrary rgba or CSS variable (for example use
dark:bg-[rgba(255,255,255,0.08)] or an equivalent CSS variable) so Tailwind can
compile and the dark-mode track is visible.
In `@src/components/ReleaseCard.tsx`:
- Line 102: In ReleaseCard (JSX classes), correct the merged Tailwind utilities
by splitting each concatenated token into two separate classes: change
"dark:text-text-tertiarytruncate" to "dark:text-text-tertiary truncate", change
every "bg-light-surfacetext-text-secondary" to "bg-light-surface
text-text-secondary", change every "bg-light-surfacetext-text-tertiary" to
"bg-light-surface text-text-tertiary", and change
"bg-light-surfacetext-text-primary" to "bg-light-surface text-text-primary" so
the intended background and text utilities apply (look for these exact
concatenated strings in the ReleaseCard component to locate the JSX elements to
update).
In `@src/components/ReleaseTimeline.tsx`:
- Line 658: Several className strings in the ReleaseTimeline component have
merged Tailwind tokens (e.g., "text-text-tertiarytransition-transform",
"bg-light-surfacetext-text-secondary", "dark:text-text-secondarymx-auto") which
breaks styling; locate the ChevronDown usage and other className props in
ReleaseTimeline (search for ChevronDown, pagination buttons, and the empty-state
icon/components) and split concatenated tokens by inserting missing spaces
between utility classes (e.g., ensure "text-text-tertiary transition-transform",
"bg-light-surface text-text-secondary", "dark:text-text-secondary mx-auto");
verify the chevron rotation, pagination button styles, and empty-state
alignment/color are restored after fixing those className strings.
- Around line 675-677: In ReleaseTimeline.tsx fix the invalid Tailwind opacity
modifier "dark:bg-brand-indigo/20/30" used in the selected dropdown option class
string (and the other occurrence noted) by replacing it with a single valid
modifier such as "dark:bg-brand-indigo/30" (or "dark:bg-brand-indigo/20" if you
prefer lighter opacity); update both occurrences where the ternary builds the
className (the expressions referencing viewMode === 'timeline') so the selected
option correctly shows a dark-mode background.
In `@src/components/RepositoryCard.tsx`:
- Around line 801-804: The JSX className in RepositoryCard (the conditional
block using isSubscribed) contains merged Tailwind tokens like
"bg-light-surfacetext-text-tertiary" which Tailwind ignores; split these into
separate utility classes (e.g., replace "bg-light-surfacetext-text-tertiary"
with "bg-light-surface text-text-tertiary", and similarly
"bg-light-surfacetext-text-primary" → "bg-light-surface text-text-primary",
"bg-light-surfacetext-text-secondary" → "bg-light-surface text-text-secondary",
and "bg-light-surfaceborder-light-border" → "bg-light-surface
border-light-border") in the className expression here and apply the same
token-splitting fix across the listed components (SubscriptionRepoCard.tsx,
ReleaseCard.tsx, ReleaseTimeline.tsx, SearchBar.tsx, ErrorBoundary.tsx,
DiscoveryView.tsx, BulkActionToolbar.tsx, AssetFilterManager.tsx,
RepositoryEditModal.tsx, RepositoryList.tsx and settings/*) so Tailwind
correctly picks up background, text, and border utilities.
In `@src/components/RepositoryList.tsx`:
- Line 1017: The radio input className in RepositoryList is using a merged token
"bg-light-surfaceborder-light-border" due to missing whitespace, which breaks
Tailwind utilities; update the className strings for the radio inputs (the JSX
input elements in RepositoryList.tsx) to separate the utilities into
"bg-light-surface" and "border-light-border" (apply the same fix to both
occurrences referenced around the radio inputs).
In `@src/components/SearchBar.tsx`:
- Line 949: The selected-pill CSS uses both bg-status-emerald and
text-status-emerald which makes the label invisible; in the SearchBar component
change the selected-state class string (the conditional that currently returns
"bg-status-emerald text-status-emerald ...") to use a readable foreground (e.g.,
text-white or a design token like text-on-emerald) instead of
text-status-emerald so the "AI Analyzed" and "Tags" pills render legible text.
- Line 882: There’s a merged Tailwind token 'bg-light-surfacetext-text-primary'
used in SearchBar that should be two separate classes so Tailwind doesn't strip
it; replace every occurrence (the filters toggle and all pill inactive branches)
with 'bg-light-surface text-text-primary' (i.e., split
'bg-light-surfacetext-text-primary' into 'bg-light-surface text-text-primary')
inside the SearchBar component wherever that combined string appears.
In `@src/components/SearchDemo.tsx`:
- Line 187: The dark-mode background utility on the div in SearchDemo.tsx uses a
chained opacity class "dark:bg-white/[0.04]/50" which Tailwind rejects and
causes full transparency; fix it by using only a single opacity token (e.g.,
replace "dark:bg-white/[0.04]/50" with either "dark:bg-white/[0.04]" if you want
4% opacity or "dark:bg-white/50" for 50% opacity) in the className on that div
so Tailwind parses the color utility correctly.
In `@src/components/settings/BackupPanel.tsx`:
- Line 306: The Backup/Restore button classes in BackupPanel.tsx use
bg-brand-indigo for base but have mismatched hover classes (hover:bg-green-700
on the Backup button and hover:bg-blue-700 on Restore) causing a jarring hue
flip; update the className for the Backup and Restore button elements (the
button JSX in BackupPanel component) so their hover uses the same hue family —
either change hover:bg-green-700 and hover:bg-blue-700 to
hover:bg-brand-indigo/90 to keep the current indigo base, or switch the Backup
button to bg-status-emerald with hover:bg-status-emerald/90 (and keep Restore as
brand-indigo with hover:bg-brand-indigo/90) so hover darkens within the same
color family.
- Line 282: The dark-mode background class on the "Last backup" banner in
BackupPanel is invalid (`dark:bg-brand-indigo/20/20`) and emits no CSS; update
the class on the div used for the banner (the p-4 bg-blue-50 ... element in
BackupPanel) to a valid Tailwind opacity variant such as
`dark:bg-brand-indigo/20` (or another single opacity like `/50`) so the dark
background actually renders.
In `@src/components/settings/DataManagementPanel.tsx`:
- Around line 749-750: Multiple success surfaces use matching green text and
green background (the color and bgColor object keys in DataManagementPanel.tsx),
causing low contrast; update each occurrence (the color/bgColor pairs around the
shown diff and the other occurrences at the same pattern) to use a high-contrast
text class instead of text-status-emerald (for example replace
text-status-emerald with a readable foreground like text-white or a dedicated
foreground token), and ensure the success toast rendering logic that reads that
color value uses the updated text class so icons and toast content are readable
in light mode.
- Around line 734-736: Update the invalid Tailwind background class strings that
include a double opacity modifier (e.g., "dark:bg-brand-indigo/20/20") to a
single opacity token (e.g., "dark:bg-brand-indigo/20") so the dark-mode accent
backgrounds render; locate the occurrences inside the DataManagementPanel
component where bgColor is set (the object with color/bgColor around the snippet
shown and the other two similar bgColor usages) and replace
"dark:bg-brand-indigo/20/20" with "dark:bg-brand-indigo/20".
In `@src/components/SubscriptionRepoCard.tsx`:
- Around line 323-328: The analyzed-state button currently uses isAnalyzed in
the className ternary with 'bg-status-emerald text-status-emerald ...' which
causes low contrast; update the isAnalyzed branch in the className (the ternary
that checks isAnalyzed) to use a high-contrast text color in light mode (e.g.,
replace text-status-emerald with text-white) while keeping the dark mode text
class (dark:text-green-400) and existing bg/hover classes so the icon remains
visible.
- Line 361: The neutral action button className strings in SubscriptionRepoCard
JSX have a merged token "bg-light-surfacetext-text-tertiary" which Tailwind
drops; update both occurrences (the className on the GitHub and star/unstar
neutral action buttons in SubscriptionRepoCard) to split into two valid classes
"bg-light-surface text-text-tertiary" (i.e., insert a space between
bg-light-surface and text-text-tertiary) so the light-theme background and text
styles are applied correctly.
---
Outside diff comments:
In `@src/components/Header.tsx`:
- Line 25: mobileMenuOpen is declared but never toggled because the hamburger
toggle and Menu/X icon imports were removed, leaving the mobile dropdown (the
block gated on mobileMenuOpen) unreachable; restore a toggle button that calls
setMobileMenuOpen(v => !v) and re-add the Menu and X icon imports, placing the
button inside the mobile breakpoint (md:hidden) near the logo or user actions so
small viewports can open the dropdown, ensure the button has accessible
attributes (type="button", aria-label, aria-expanded={mobileMenuOpen}) and
matching styling (p-2 rounded hover bg classes) so the mobile dropdown
controlled by mobileMenuOpen can render; alternatively remove mobileMenuOpen and
the entire mobile dropdown block if you intentionally want no mobile nav.
In `@src/components/settings/BackendPanel.tsx`:
- Around line 183-190: The connected-state badge uses the same token for
background and text so the label becomes unreadable; update getStatusClass (and
any JSX that repeats the class combo around the connected badge in the render
block) to use a contrasting text color for the 'connected' case instead of
'text-status-emerald' (for example use 'text-white' or a darker/lighter emerald
contrast token) while keeping the existing bg-status-emerald and the dark-mode
classes (dark:bg-green-900 dark:text-green-200) intact so the badge is readable
in light and dark modes.
In `@src/components/SettingsPanel.tsx`:
- Around line 185-186: The two gradient mask divs (the elements with classes
"bg-gradient-to-r from-gray-50 dark:from-gray-800 ..." and "bg-gradient-to-l
from-gray-50 dark:from-gray-800 ...") use hardcoded from colors that no longer
match the tab-bar container (bg-light-bg/95 and dark:bg-panel-dark/95),
producing a visible seam; update these gradient origins to match the container
background instead (e.g., replace the hardcoded from-* colors with the same bg
classes or a CSS variable used by the container such as
from-[color:var(--tabbar-bg)] / dark:from-[color:var(--tabbar-bg-dark)] or
Tailwind arbitrary color utilities that mirror bg-light-bg/95 and
dark:bg-panel-dark/95) so the fade starts from the exact container color and
produces a smooth edge.
---
Duplicate comments:
In `@src/components/LoginScreen.tsx`:
- Line 131: In LoginScreen component replace the invalid Tailwind utility on the
status dot: locate the div using className "w-2 h-2 bg-status-emerald0
rounded-full" and change the background token to the correct one
("bg-status-emerald"); ensure no other occurrences of "bg-status-emerald0"
remain so Tailwind emits the proper utility for the indicator.
- Line 190: The dark-mode background utility on the div with className "mt-6 p-4
bg-light-bg dark:bg-white/[0.04]/50 rounded-lg" uses two opacity modifiers which
Tailwind drops; remove the duplicate opacity and replace the combined modifiers
with a single opacity token (for example use dark:bg-white/[0.02] or
dark:bg-white/[0.04] depending on intended darkness) so the dark:bg utility is
emitted and the panel gets the correct dark-mode background.
- Line 205: The "Create token" link's className mixes brand-violet with
hardcoded blue hover colors; update the hover classes to use the design token by
replacing hover:text-blue-700 and dark:hover:text-blue-300 with
hover:text-brand-hover and dark:hover:text-brand-hover (leaving
text-brand-violet and other classes intact) so the link preserves the
brand-violet hue on hover and matches the migrated components.
In `@src/components/ReleaseCard.tsx`:
- Line 199: The dark-mode background class in the ReleaseCard component uses two
opacity modifiers ("dark:bg-white/[0.04]/50") which Tailwind drops; update the
div that currently contains class "bg-light-bg dark:bg-white/[0.04]/50 rounded
border ..." (inside ReleaseCard) to keep a single opacity modifier—e.g., replace
"dark:bg-white/[0.04]/50" with "dark:bg-white/[0.04]" (or "dark:bg-white/50" if
you prefer percent opacity) so the dark-mode background is applied correctly.
In `@src/components/ReleaseTimeline.tsx`:
- Line 869: The dark-mode hover utility is invalid: replace the bad utility
string "dark:hover:bg-white/10/50" used in the ReleaseTimeline component's JSX
(the element with className "w-full flex items-center justify-between p-2
hover:bg-light-bg dark:hover:bg-white/10/50 transition-colors") with a valid
Tailwind opacity utility such as "dark:hover:bg-white/10" (or
"dark:hover:bg-white/50" if you intended 50% opacity) so expanded repository
groups get dark-mode hover feedback.
In `@src/components/RepositoryCard.tsx`:
- Around line 787-793: The analyzed-state button currently uses identical bg and
text colors (bg-status-emerald text-status-emerald) causing the icon to
disappear; update the conditional branch in RepositoryCard's className (the
repository.analyzed_at branch) to use a contrasting text color for light mode
(for example text-white or another high-contrast token) while keeping the
existing dark-mode classes (dark:bg-status-emerald/20 dark:text-status-emerald)
intact so the icon remains visible.
In `@src/components/SearchDemo.tsx`:
- Line 134: The class string 'dark:bg-brand-indigo/20/20' in SearchDemo.tsx
contains a duplicated opacity token; replace both occurrences of
'dark:bg-brand-indigo/20/20' (used for the selected real-time example and the
info panel) with a single opacity token 'dark:bg-brand-indigo/20' so the
dark-mode background emits correct CSS.
In `@src/components/settings/DataManagementPanel.tsx`:
- Line 1316: In DataManagementPanel (JSX className strings for the hover rows)
the Tailwind utility uses an invalid combined opacity
"dark:hover:bg-white/10/50"; replace both occurrences with a single valid
opacity modifier such as "dark:hover:bg-white/10" (or "dark:hover:bg-white/50"
if stronger) so the dark-mode hover style is applied; search for the className
containing "dark:hover:bg-white/10/50" in DataManagementPanel and update those
className values accordingly.
In `@src/components/settings/GeneralPanel.tsx`:
- Line 40: The radio input className in GeneralPanel.tsx contains a merged
Tailwind token "bg-light-surfaceborder-light-border" which Taillwind drops;
update the radio input(s) (the JSX input element(s) in the GeneralPanel
component) to use separate tokens "bg-light-surface" and "border-light-border"
(e.g., replace the merged token in the className on the radio input(s) found
around the existing className that starts with "w-4 h-4 text-brand-violet...")
and apply the same fix for the second occurrence around line 58 so light-theme
radio styling uses the intended background and border classes.
In `@src/components/SettingsPanel.tsx`:
- Line 131: The class string in SettingsPanel (the className containing
"bg-light-bg95") is missing the Tailwind opacity separator and thus doesn't
generate CSS; update the className in SettingsPanel.tsx to replace
"bg-light-bg95" with "bg-light-bg/95" so the light background uses the intended
95% opacity (matching the existing dark:bg-panel-dark/95) and preserves the
backdrop-blur and sticky tab bar background.
- Line 366: The dark-mode background utility is malformed as
"dark:bg-brand-indigo/20/30", preventing the active tab background from
rendering; update both occurrences in SettingsPanel.tsx (the class string used
for the selected sidebar tab in the JSX ternary expression) to use a single
valid Tailwind opacity token such as "dark:bg-brand-indigo/30" (or
"dark:bg-brand-indigo/20") so the dark background renders for the active tab in
both modal and standalone layouts.
- Line 162: The Tailwind class string in SettingsPanel (the conditional class
that currently contains "dark:hover:bg-white/10/50") is invalid because Tailwind
accepts only one "/<opacity>" per color; update that class in SettingsPanel.tsx
to a valid utility such as "dark:hover:bg-white/10" (or "dark:hover:bg-white/50"
depending on desired opacity) or use bracket/rgba notation (e.g.,
"dark:hover:bg-[rgba(255,255,255,0.1)]") so the hover background in dark mode
actually applies for the inactive mobile tabs.
In `@src/components/SubscriptionRepoCard.tsx`:
- Line 412: The dark-mode chip class uses invalid Tailwind syntax
"dark:bg-brand-indigo/20/30"; update the className on the AI tag chip in
SubscriptionRepoCard (the JSX element with className="px-2 py-0.5 rounded-md
text-xs font-medium bg-blue-50/50 text-blue-700 dark:bg-brand-indigo/20/30
dark:text-blue-300") to use a single opacity modifier such as
"dark:bg-brand-indigo/20" (or "dark:bg-brand-indigo/30") so Tailwind will emit
the dark background utility.
---
Nitpick comments:
In `@src/components/FilterModal.tsx`:
- Line 104: The hover and accent colors in FilterModal.tsx still use raw blue
palette (e.g., the className on the primary button that contains
hover:bg-blue-700 and similar hover classes), causing a hue shift; update those
classes to use the brand tokens instead (use hover:bg-brand-indigo/90 for the
button and replace any text hover/accent uses of blue with text-brand-violet and
hover:text-brand-violet/80 for chips/help text), and apply the same substitution
for the other occurrences in this component where hover:bg-blue-700 or
hover:bg-blue-800 is used so all hover/accent styles consistently use
brand-indigo/brand-violet tokens.
In `@src/components/Header.tsx`:
- Line 143: The header element's className contains conflicting position
utilities ("sticky" and "relative"); remove the redundant "relative" from the
className on the <header> in Header.tsx unless you intentionally rely on an
ancestor for absolute-positioned children—if you do need relative positioning
for descendants, leave a clarifying comment above the <header> and keep both,
otherwise drop "relative" from the className string to avoid the conflicting
position utilities.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 8c84654e-f28f-45cc-861c-fc353957dff5
📒 Files selected for processing (37)
index.htmlsrc/App.tsxsrc/components/AssetFilterManager.tsxsrc/components/BulkActionToolbar.tsxsrc/components/BulkCategorizeModal.tsxsrc/components/CategoryEditModal.tsxsrc/components/CategorySidebar.tsxsrc/components/DiscoverySidebar.tsxsrc/components/DiscoveryView.tsxsrc/components/ErrorBoundary.tsxsrc/components/FilterModal.tsxsrc/components/Header.tsxsrc/components/LoginScreen.tsxsrc/components/MarkdownRenderer.tsxsrc/components/Modal.tsxsrc/components/ReadmeModal.tsxsrc/components/ReleaseCard.tsxsrc/components/ReleaseTimeline.tsxsrc/components/RepositoryCard.tsxsrc/components/RepositoryEditModal.tsxsrc/components/RepositoryList.tsxsrc/components/SearchBar.tsxsrc/components/SearchDemo.tsxsrc/components/SearchResultStats.tsxsrc/components/SearchShortcutsHelp.tsxsrc/components/SettingsPanel.tsxsrc/components/SortAlgorithmTooltip.tsxsrc/components/SubscriptionRepoCard.tsxsrc/components/UpdateChecker.tsxsrc/components/settings/AIConfigPanel.tsxsrc/components/settings/BackendPanel.tsxsrc/components/settings/BackupPanel.tsxsrc/components/settings/CategoryPanel.tsxsrc/components/settings/DataManagementPanel.tsxsrc/components/settings/GeneralPanel.tsxsrc/components/settings/WebDAVPanel.tsxsrc/index.css
✅ Files skipped from review due to trivial changes (5)
- index.html
- src/App.tsx
- src/components/SortAlgorithmTooltip.tsx
- src/components/SearchResultStats.tsx
- src/components/RepositoryEditModal.tsx
🚧 Files skipped from review as they are similar to previous changes (14)
- src/index.css
- src/components/Modal.tsx
- src/components/ErrorBoundary.tsx
- src/components/DiscoverySidebar.tsx
- src/components/settings/WebDAVPanel.tsx
- src/components/BulkActionToolbar.tsx
- src/components/SearchShortcutsHelp.tsx
- src/components/BulkCategorizeModal.tsx
- src/components/AssetFilterManager.tsx
- src/components/settings/AIConfigPanel.tsx
- src/components/CategorySidebar.tsx
- src/components/DiscoveryView.tsx
- src/components/MarkdownRenderer.tsx
- src/components/settings/CategoryPanel.tsx
| onClick={handleSave} | ||
| disabled={!hasChanges} | ||
| className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-colors ${hasChanges ? 'bg-blue-600 text-white hover:bg-blue-700' : 'bg-gray-300 text-gray-500 dark:bg-gray-600 dark:text-gray-400 cursor-not-allowed'}`} | ||
| className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-colors ${hasChanges ? 'bg-brand-indigo text-white hover:bg-blue-700 dark:bg-status-emerald/80 dark:hover:bg-status-emerald dark:bg-status-emerald/80 dark:hover:bg-status-emerald' : 'bg-gray-300 text-text-tertiary dark:bg-white/5 dark:text-text-tertiary cursor-not-allowed'}`} |
There was a problem hiding this comment.
Duplicate dark-mode utilities on the Save button.
Same issue as FilterModal.tsx — dark:bg-status-emerald/80 dark:hover:bg-status-emerald is repeated twice in the enabled branch.
🛠️ Proposed fix
- className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-colors ${hasChanges ? 'bg-brand-indigo text-white hover:bg-blue-700 dark:bg-status-emerald/80 dark:hover:bg-status-emerald dark:bg-status-emerald/80 dark:hover:bg-status-emerald' : 'bg-gray-300 text-text-tertiary dark:bg-white/5 dark:text-text-tertiary cursor-not-allowed'}`}
+ className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-colors ${hasChanges ? 'bg-brand-indigo text-white hover:bg-brand-indigo/90 dark:bg-status-emerald/80 dark:hover:bg-status-emerald' : 'bg-gray-300 text-text-tertiary dark:bg-white/5 dark:text-text-tertiary cursor-not-allowed'}`}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-colors ${hasChanges ? 'bg-brand-indigo text-white hover:bg-blue-700 dark:bg-status-emerald/80 dark:hover:bg-status-emerald dark:bg-status-emerald/80 dark:hover:bg-status-emerald' : 'bg-gray-300 text-text-tertiary dark:bg-white/5 dark:text-text-tertiary cursor-not-allowed'}`} | |
| className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-colors ${hasChanges ? 'bg-brand-indigo text-white hover:bg-brand-indigo/90 dark:bg-status-emerald/80 dark:hover:bg-status-emerald' : 'bg-gray-300 text-text-tertiary dark:bg-white/5 dark:text-text-tertiary cursor-not-allowed'}`} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/CategoryEditModal.tsx` at line 1101, The enabled branch of the
Save button's className contains duplicate dark-mode utilities; locate the JSX
that builds the button class (the expression using hasChanges in
CategoryEditModal, same pattern as in FilterModal.tsx) and remove the repeated
"dark:bg-status-emerald/80 dark:hover:bg-status-emerald" so each utility appears
only once in the string for the hasChanges=true branch, preserving spacing and
the other classes.
| onClick={handleConnect} | ||
| disabled={isLoading || !token.trim()} | ||
| className="w-full flex items-center justify-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded-lg font-medium transition-colors" | ||
| className="w-full flex items-center justify-center space-x-2 px-6 py-3 bg-brand-indigo hover:bg-blue-700 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded-lg font-medium transition-colors" |
There was a problem hiding this comment.
Hover color reverts to raw blue-700 instead of the design-token brand hover.
bg-brand-indigo hover:bg-blue-700 mixes a token base with a hardcoded Tailwind blue on hover. Per the design-system migration, the intended hover is hover:bg-brand-hover (defined as #828fff in tailwind.config.js), which keeps the indigo hue on hover instead of shifting to blue.
🛠️ Proposed fix
- className="w-full flex items-center justify-center space-x-2 px-6 py-3 bg-brand-indigo hover:bg-blue-700 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded-lg font-medium transition-colors"
+ className="w-full flex items-center justify-center space-x-2 px-6 py-3 bg-brand-indigo hover:bg-brand-hover disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded-lg font-medium transition-colors"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| className="w-full flex items-center justify-center space-x-2 px-6 py-3 bg-brand-indigo hover:bg-blue-700 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded-lg font-medium transition-colors" | |
| className="w-full flex items-center justify-center space-x-2 px-6 py-3 bg-brand-indigo hover:bg-brand-hover disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded-lg font-medium transition-colors" |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/LoginScreen.tsx` at line 174, The button class in
LoginScreen.tsx uses a hardcoded Tailwind hover color ("hover:bg-blue-700") that
conflicts with the design token; update the className on the relevant JSX
element (the one with className="... bg-brand-indigo hover:bg-blue-700 ...") to
use the design-token hover class "hover:bg-brand-hover" instead of
"hover:bg-blue-700" so the hover uses the brand hover color defined in
tailwind.config.js.
- Replace isolated text-text-* classes with explicit light mode grays (text-gray-900, 700, 500, 400) - Unify colorful buttons in settings and search box to use brand-indigo or neutral Linear palette - Fix bright expanded asset background in ReleaseCard dark mode - Fix incorrect spacing and quotes in class names broken during bulk replacements
- Refactor CategorySidebar and DiscoverySidebar selection states to standard Linear patterns - Refactor RepositoryCard action icons, spacing, and tags to neutral variants - Refactor FilterModal and AssetFilterManager selections to solid brand colors - Refactor RepositoryEditModal to remove excessive colorful gradients and components - Redesign ReleaseCard header and list elements to match 8px grid and padding specifications - Fix dark mode color-scheme for native OS dropdowns compatibility - Unify AI Analysis buttons and dropdown styling
- Unify Category and Discovery sidebar selection styles (exact class match) - Unify Header top nav selected state to clean background with high contrast text - Unify Filter components to dark solid active state for maximum contrast - Unify all RepositoryCard and SubscriptionCard action buttons to neutral states - Fix AI Dropdown text sizing and colors - Rebuild ReleaseCard header structure for perfect alignment and increase padding - Remove strange gradients from Discovery trending cards - Unify all `<select>` inputs across the app - Ensure Test Connection and other critical buttons maintain text visibility - Unify all Settings overview stats icons
…n language - Reduce light mode border weights to 6% black opacity for softer appearance - Re-align and space elements in ReleaseCard header for perfect vertical alignment - Increase Asset list row heights and remove bottom gaps - Unify data overview stats icons in Data Management - Adjust Category Panel text sizing and spacing - Add cohesive opacity to Discovery View channel icons - Consolidate AI Analyzed tags into a single elegant gradient tag with Sparkles icon - Fix all Repository List filters (AI Analyzed, etc.) active state contrast - Remove residual pure green backgrounds from Bulk Action Toolbar - Substitute repository hover drag handle with GripVertical and align with title - Remove pure white borders and colorful gradients from Discovery View load more buttons and filter containers
2 participants
Unified UI Style
Summary by CodeRabbit