Align UI with FalkorDB design language#616
Merged
Conversation
Staging-->Main
Replace custom Roboto/Oswald fonts and blue/pink/orange palette with FalkorDB standard: Inter font, purple primary accent, clean dark/light mode with theme toggle, and consistent shadcn/ui component usage. - Update CSS variables to purple primary, add full dark mode token set - Rename graph category colors with graph- prefix to separate from theme - Add ThemeProvider (system/light/dark, localStorage) and ThemeToggle - Redesign header: compact layout, icon-only nav with tooltips, remove gradient bar - Replace all hardcoded colors (bg-white, text-black, bg-gray-*, etc.) with semantic tokens (bg-background, text-foreground, bg-muted, etc.) - Standardize buttons/inputs to shadcn Button/focus-ring patterns - Add dark scrollbar styles and panel resize hover states Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Contributor
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughAdds a theme system (ThemeProvider + useTheme + ThemeToggle), wraps App with ThemeProvider, migrates global styles and font to Inter, refactors header/navigation to a tooltip-driven toolbar, renames several graph color tokens, and applies widespread presentational updates across many UI components without changing core logic. Changes
Sequence Diagram(s)sequenceDiagram
participant App
participant ThemeProvider
participant LocalStorage
participant DocumentRoot
App->>ThemeProvider: Render inside <ThemeProvider defaultTheme="system">
ThemeProvider->>LocalStorage: read storageKey
alt stored theme found
ThemeProvider-->>App: provide theme state (dark/light/system)
else no stored theme
ThemeProvider->>DocumentRoot: query prefers-color-scheme
DocumentRoot-->>ThemeProvider: system preference
ThemeProvider-->>App: provide computed theme state
end
App->>ThemeProvider: useTheme().setTheme("dark"|"light"|"system")
ThemeProvider->>LocalStorage: persist chosen theme
ThemeProvider->>DocumentRoot: update root class for theme
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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 |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR aligns the Code Graph frontend with FalkorDB's design language by replacing custom fonts with Inter, updating the primary color to purple, adding dark/light mode support with a theme toggle, redesigning the header to use compact icon-only navigation with tooltips, and replacing hardcoded colors with semantic CSS variable tokens across 13 component files.
Changes:
- Added dark mode infrastructure (ThemeProvider, ThemeToggle) with system/light/dark modes and localStorage persistence
- Redesigned header to compact icon-only nav with shadcn Button/Tooltip components, removed gradient divider
- Replaced all hardcoded colors with semantic CSS tokens (
bg-background,text-foreground,bg-muted, etc.) across components
Reviewed changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
app/index.html |
Removed Roboto & Oswald font imports |
app/tailwind.config.ts |
Added Inter font, renamed graph colors with graph- prefix |
app/src/globals.css |
Updated primary color to purple, added dark mode variables, removed old font classes |
app/src/main.tsx |
Wrapped app with ThemeProvider |
app/src/components/theme-provider.tsx |
New React context for theme management |
app/src/components/theme-toggle.tsx |
New sun/moon toggle button |
app/src/components/model.ts |
Updated color names to match new Tailwind config |
app/src/App.tsx |
Header redesign with icon buttons, tooltips, theme toggle, semantic colors |
app/src/components/code-graph.tsx |
Semantic colors, shadcn Button for Reset/Unhide |
app/src/components/chat.tsx |
Semantic colors, shadcn Button for send |
app/src/components/dataPanel.tsx |
Semantic colors replacing hardcoded hex values |
app/src/components/elementMenu.tsx |
Removed hardcoded color="white" from icons |
app/src/components/combobox.tsx |
Semantic border/ring colors |
app/src/components/Input.tsx |
Semantic colors for background, selection, text |
app/src/components/labels.tsx |
bg-background instead of bg-white |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
app/src/components/code-graph.tsx (1)
492-506:⚠️ Potential issue | 🟡 MinorUpdate legend swatches to use the new graph token colors.
The legend still uses Tailwind defaultpink-500/blue-500, which no longer matches the renamed graph palette and can mislead users about category/change colors.Suggested tweak
- <div className='h-4 w-4 bg-pink-500 bg-opacity-50 border-[3px] border-pink-500 rounded-full' /> - <p className='text-pink-500'>Were added</p> + <div className='h-4 w-4 bg-graph-pink bg-opacity-50 border-[3px] border-graph-pink rounded-full' /> + <p className='text-graph-pink'>Were added</p> - <div className='h-4 w-4 bg-blue-500 bg-opacity-50 border-[3px] border-blue-500 rounded-full' /> - <p className='text-blue-500'>Were edited</p> + <div className='h-4 w-4 bg-graph-purple bg-opacity-50 border-[3px] border-graph-purple rounded-full' /> + <p className='text-graph-purple'>Were edited</p>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/src/components/code-graph.tsx` around lines 492 - 506, The legend still uses old Tailwind classes (bg-pink-500/bg-blue-500, border-pink-500/border-blue-500, text-pink-500/text-blue-500) in the swatch divs and their label <p> elements (the blocks around the "Were added" and "Were edited" text and the small swatch divs), so replace those hardcoded Tailwind color classes with the new graph palette tokens or CSS variables your graph uses (the same tokens used elsewhere in this component for node/edge colors) for background, border and text; also update any bg-opacity and Checkbox-related color classes if they reference the old colors to keep the legend consistent with the renamed graph palette.
🧹 Nitpick comments (5)
app/src/components/dataPanel.tsx (1)
77-93: Prefer semantic theme tokens over hardcoded JSONTree hex colors.
The current palette bypasses your new design tokens, so this panel can drift from app-wide light/dark tuning and contrast updates.Example direction
theme={{ base00: 'transparent', - base01: '#000000', - base02: '#CE9178', - base03: '#CE9178', - base04: '#CE9178', - base05: '#CE9178', + base01: 'hsl(var(--background))', + base02: 'hsl(var(--muted-foreground))', + base03: 'hsl(var(--muted-foreground))', + base04: 'hsl(var(--muted-foreground))', + base05: 'hsl(var(--foreground))', ... - base09: '#b5cea8', - base0D: '#99E4E5', + base09: 'hsl(var(--primary))', + base0D: 'hsl(var(--primary))', }}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/src/components/dataPanel.tsx` around lines 77 - 93, The JSONTree theme in dataPanel.tsx currently hardcodes hex colors (base00..base0F); replace those hex values with semantic design tokens from your theme provider (e.g. useTheme() or the app's token map) so the JSON viewer respects light/dark and contrast updates—update the theme object passed to JSONTree (the base00..base0F keys) to reference token names (colors.background, colors.text, colors.muted, colors.accent, etc.) or helper getters instead of literal hex strings and ensure the component imports/consumes the token source used elsewhere in the app.app/src/globals.css (1)
124-130: Optional: add Firefox scrollbar styling for cross-browser parity.
Current scrollbar theming only targets WebKit pseudo-elements.Optional addition
+html { + scrollbar-width: thin; + scrollbar-color: `#a8bbbf` transparent; +} + +.dark html { + scrollbar-color: `#555` transparent; +}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/src/globals.css` around lines 124 - 130, The dark-mode scrollbar styles currently only target WebKit (:: -webkit-scrollbar-thumb selectors), so add equivalent Firefox rules by setting scrollbar-color and scrollbar-width for the dark theme (e.g., target .dark on the root or body such as .dark { scrollbar-color: `#444` transparent; scrollbar-width: thin; } and optionally .dark * { scrollbar-color: `#444` `#222`; }) so Firefox displays a matching dark thumb and width; keep the selectors referenced in the diff (.dark ::-webkit-scrollbar-thumb and .dark ::-webkit-scrollbar-thumb:hover) in place and add the scrollbar-color/scrollbar-width declarations to achieve cross-browser parity.app/src/components/theme-provider.tsx (2)
57-60: Context undefined check will never trigger.Since
createContextis called with a default value (lines 10-13),useContext(ThemeProviderContext)will never returnundefined. The error check won't catch usage outside of a provider.To properly detect missing provider, use
nullas the default and check for that:♻️ Proposed fix
-const ThemeProviderContext = createContext<ThemeProviderState>({ - theme: "system", - setTheme: () => null, -}) +const ThemeProviderContext = createContext<ThemeProviderState | null>(null) // ... in useTheme: export const useTheme = () => { const context = useContext(ThemeProviderContext) - if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider") + if (!context) throw new Error("useTheme must be used within a ThemeProvider") return context }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/src/components/theme-provider.tsx` around lines 57 - 60, The current undefined check in useTheme will never run because ThemeProviderContext was created with a non-null default; change the context creation to use null as the default value (createContext<... | null>(null)) and update useTheme to check for null instead of undefined so it throws when used outside ThemeProvider; adjust the context type annotations (and any non-null assertions where the provider actually supplies a value) to reflect the nullable context type and ensure consumers call useTheme safely.
24-26: Validate localStorage value before using as Theme.The value from
localStorage.getItem(storageKey)could be an invalid string (e.g., if manually tampered or from a stale version). Theas Themeassertion doesn't provide runtime validation.🛡️ Proposed fix to validate theme value
+const isValidTheme = (value: string | null): value is Theme => + value === "dark" || value === "light" || value === "system" + export function ThemeProvider({ children, defaultTheme = "system", storageKey = "code-graph-theme", }: { children: React.ReactNode defaultTheme?: Theme storageKey?: string }) { const [theme, setTheme] = useState<Theme>( - () => (localStorage.getItem(storageKey) as Theme) || defaultTheme + () => { + const stored = localStorage.getItem(storageKey) + return isValidTheme(stored) ? stored : defaultTheme + } )🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/src/components/theme-provider.tsx` around lines 24 - 26, The useState initializer reads localStorage.getItem(storageKey) and force-casts it to Theme without runtime validation; replace that with a safe initializer that retrieves the raw string, checks it against the allowed Theme values (e.g., via an isValidTheme(value: string): value is Theme helper or by comparing to known Theme enum/array), and only returns the persisted value if valid, otherwise return defaultTheme; update the initializer in the theme/setTheme state (and any related restore logic) to fall back to defaultTheme when validation fails.app/src/components/theme-toggle.tsx (1)
8-8: Consider reactivity to system preference changes.When
theme === "system", theisDarkvalue is computed synchronously and won't update if the user changes their OS color scheme while the app is open. The button icon may become stale until a re-render occurs.Consider adding a listener for system preference changes, or accept this as a minor UX trade-off since the actual theme class on
<html>is updated by ThemeProvider's effect.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/src/components/theme-toggle.tsx` at line 8, The computed isDark expression (const isDark = theme === "dark" || (theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches)) is not reactive to OS color-scheme changes, so when theme === "system" the toggle icon can become stale; modify the ThemeToggle component to track system preference via state and subscribe to window.matchMedia("(prefers-color-scheme: dark)") change events (add listener on mount and remove on unmount) and use that state in place of the one-time .matches call, or alternatively document and accept the minor UX trade-off because ThemeProvider already updates <html>.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@app/src/components/code-graph.tsx`:
- Around line 492-506: The legend still uses old Tailwind classes
(bg-pink-500/bg-blue-500, border-pink-500/border-blue-500,
text-pink-500/text-blue-500) in the swatch divs and their label <p> elements
(the blocks around the "Were added" and "Were edited" text and the small swatch
divs), so replace those hardcoded Tailwind color classes with the new graph
palette tokens or CSS variables your graph uses (the same tokens used elsewhere
in this component for node/edge colors) for background, border and text; also
update any bg-opacity and Checkbox-related color classes if they reference the
old colors to keep the legend consistent with the renamed graph palette.
---
Nitpick comments:
In `@app/src/components/dataPanel.tsx`:
- Around line 77-93: The JSONTree theme in dataPanel.tsx currently hardcodes hex
colors (base00..base0F); replace those hex values with semantic design tokens
from your theme provider (e.g. useTheme() or the app's token map) so the JSON
viewer respects light/dark and contrast updates—update the theme object passed
to JSONTree (the base00..base0F keys) to reference token names
(colors.background, colors.text, colors.muted, colors.accent, etc.) or helper
getters instead of literal hex strings and ensure the component imports/consumes
the token source used elsewhere in the app.
In `@app/src/components/theme-provider.tsx`:
- Around line 57-60: The current undefined check in useTheme will never run
because ThemeProviderContext was created with a non-null default; change the
context creation to use null as the default value (createContext<... |
null>(null)) and update useTheme to check for null instead of undefined so it
throws when used outside ThemeProvider; adjust the context type annotations (and
any non-null assertions where the provider actually supplies a value) to reflect
the nullable context type and ensure consumers call useTheme safely.
- Around line 24-26: The useState initializer reads
localStorage.getItem(storageKey) and force-casts it to Theme without runtime
validation; replace that with a safe initializer that retrieves the raw string,
checks it against the allowed Theme values (e.g., via an isValidTheme(value:
string): value is Theme helper or by comparing to known Theme enum/array), and
only returns the persisted value if valid, otherwise return defaultTheme; update
the initializer in the theme/setTheme state (and any related restore logic) to
fall back to defaultTheme when validation fails.
In `@app/src/components/theme-toggle.tsx`:
- Line 8: The computed isDark expression (const isDark = theme === "dark" ||
(theme === "system" && window.matchMedia("(prefers-color-scheme:
dark)").matches)) is not reactive to OS color-scheme changes, so when theme ===
"system" the toggle icon can become stale; modify the ThemeToggle component to
track system preference via state and subscribe to
window.matchMedia("(prefers-color-scheme: dark)") change events (add listener on
mount and remove on unmount) and use that state in place of the one-time
.matches call, or alternatively document and accept the minor UX trade-off
because ThemeProvider already updates <html>.
In `@app/src/globals.css`:
- Around line 124-130: The dark-mode scrollbar styles currently only target
WebKit (:: -webkit-scrollbar-thumb selectors), so add equivalent Firefox rules
by setting scrollbar-color and scrollbar-width for the dark theme (e.g., target
.dark on the root or body such as .dark { scrollbar-color: `#444` transparent;
scrollbar-width: thin; } and optionally .dark * { scrollbar-color: `#444` `#222`; })
so Firefox displays a matching dark thumb and width; keep the selectors
referenced in the diff (.dark ::-webkit-scrollbar-thumb and .dark
::-webkit-scrollbar-thumb:hover) in place and add the
scrollbar-color/scrollbar-width declarations to achieve cross-browser parity.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: c8edb17e-0560-425b-a56b-50a79d7b4fdc
📒 Files selected for processing (15)
app/index.htmlapp/src/App.tsxapp/src/components/Input.tsxapp/src/components/chat.tsxapp/src/components/code-graph.tsxapp/src/components/combobox.tsxapp/src/components/dataPanel.tsxapp/src/components/elementMenu.tsxapp/src/components/labels.tsxapp/src/components/model.tsapp/src/components/theme-provider.tsxapp/src/components/theme-toggle.tsxapp/src/globals.cssapp/src/main.tsxapp/tailwind.config.ts
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
e2e/logic/POM/codeGraph.ts (1)
426-433: Consider reducing the hardcoded delay.The
waitForFunctioncorrectly handles both graph data structures. However, the 3-second hardcoded delay on line 433 adds significant test execution time. If this delay is for animation settling, consider reducing it or using a more targeted wait condition (e.g., waiting fordata-engine-status="stopped"viawaitForCanvasAnimationToEnd()).Potential optimization
return Array.isArray(nodes) && nodes.length > 0; }, graphGetter, { timeout: 10000 }); - await this.page.waitForTimeout(3000); + await this.waitForCanvasAnimationToEnd();🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@e2e/logic/POM/codeGraph.ts` around lines 426 - 433, The fixed 3s sleep after waiting for graph data (graphGetter / waitForFunction / waitForTimeout) is unnecessary and slows tests; replace the unconditional await this.page.waitForTimeout(3000) with a targeted wait: either call the existing helper waitForCanvasAnimationToEnd() (or implement one that waits for data-engine-status="stopped" on the canvas) or use page.waitForFunction to poll for the canvas attribute/data-engine-status === "stopped" (or another specific DOM/JS flag that signals animation completion) so tests only wait as long as needed.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@e2e/logic/POM/codeGraph.ts`:
- Around line 426-433: The fixed 3s sleep after waiting for graph data
(graphGetter / waitForFunction / waitForTimeout) is unnecessary and slows tests;
replace the unconditional await this.page.waitForTimeout(3000) with a targeted
wait: either call the existing helper waitForCanvasAnimationToEnd() (or
implement one that waits for data-engine-status="stopped" on the canvas) or use
page.waitForFunction to poll for the canvas attribute/data-engine-status ===
"stopped" (or another specific DOM/JS flag that signals animation completion) so
tests only wait as long as needed.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 1153a719-65d6-4059-9a55-3beae0751385
📒 Files selected for processing (1)
e2e/logic/POM/codeGraph.ts
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR aligns the Code Graph UI with FalkorDB's design language by replacing custom fonts with Inter, updating the primary color to purple, adding dark/light theme support, and redesigning the header to use compact icon-only navigation with tooltips. All hardcoded colors are replaced with semantic CSS variable tokens.
Changes:
- Added dark/light theme infrastructure (ThemeProvider, ThemeToggle) and replaced hardcoded colors with CSS variable tokens across 13 component files
- Redesigned header navigation to icon-only buttons with tooltips, removed gradient divider
- Updated e2e test selectors and canvas interaction logic to match new UI structure
Reviewed changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
app/src/globals.css |
Updated primary color to purple, added dark mode variables, removed old font classes |
app/tailwind.config.ts |
Added Inter font, renamed graph color keys with graph- prefix |
app/index.html |
Removed Roboto & Oswald font imports |
app/src/main.tsx |
Wrapped app with ThemeProvider |
app/src/components/theme-provider.tsx |
New theme context with system/light/dark modes and localStorage |
app/src/components/theme-toggle.tsx |
New Sun/Moon toggle button |
app/src/App.tsx |
Header redesign: icon-only nav, tooltips, theme toggle, semantic tokens |
app/src/components/model.ts |
Updated color names to match new Tailwind config |
app/src/components/elementMenu.tsx |
Replaced hardcoded colors with semantic tokens |
app/src/components/dataPanel.tsx |
Replaced hardcoded colors with semantic tokens |
app/src/components/chat.tsx |
Updated to use shadcn Button, semantic tokens |
app/src/components/code-graph.tsx |
Replaced hardcoded colors, switched to shadcn Button |
app/src/components/combobox.tsx |
Updated focus ring to use primary color |
app/src/components/Input.tsx |
Replaced hardcoded colors with semantic tokens |
app/src/components/labels.tsx |
bg-white → bg-background |
e2e/logic/POM/codeGraph.ts |
Updated selectors for new UI, improved canvas interaction logic |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@e2e/logic/POM/codeGraph.ts`:
- Around line 508-516: The code currently clamps out-of-bounds click coordinates
(computed from canvasElement.boundingBox()) into targetX/targetY and proceeds,
which can falsely succeed because elementMenu.isVisible() may also appear for
blank-canvas clicks; change the behavior to fail fast for out-of-bounds inputs
by validating x/y against the bounding box returned by
canvasElement.boundingBox() and throwing a descriptive Error if the point lies
outside the box (instead of clamping), or alternatively after the right-click
verify a node-specific indicator (e.g., check for a node-specific menu action or
selector) before treating the action as successful; update the function that
computes targetX/targetY and the post-click check around elementMenu.isVisible()
accordingly to use these stricter validations.
- Around line 426-434: The wait currently uses a local graphGetter and only
checks for non-empty nodes, which can pass for an already-populated graph and
duplicates the mobile/desktop selection that waitForGraphData() still assumes
graphDesktop; change this to centralize the active getter (use the same decision
as waitForGraphData, e.g., reference graphMobile/graphDesktop via a single
active getter selection method or variable based on this.isMobile) and make the
wait compare the new dataset to the previous one (capture the prior graph
data/nodes from the active getter before triggering the switch, then in
page.waitForFunction wait until the active getter returns nodes that are
different from the prior nodes or the graph identifier changes), then call
waitForCanvasViewportToSettle() as before; ensure you update waitForGraphData to
use the same active getter logic so mobile and desktop flows are consistent
(referencing graphGetter, graphMobile, graphDesktop, waitForFunction,
waitForGraphData, waitForCanvasViewportToSettle, and isMobile).
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: a2131b66-1372-434c-89a6-d14be65be765
📒 Files selected for processing (1)
e2e/logic/POM/codeGraph.ts
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
bg-background,text-foreground,bg-muted, etc.) for consistent themingChanges
Design Tokens & Typography
globals.css: Purple primary (247 100% 70%), full.darkmode variable set, dark scrollbar stylestailwind.config.ts:Interfont, graph colors renamed withgraph-prefix (graph-purple,graph-pink, etc.)index.html: Removed Roboto & Oswald font importsmodel.ts: UpdatedCOLORS_ORDER_NAMEto match new Tailwind color namesDark Mode Infrastructure
theme-provider.tsx: React context with system/light/dark modes, localStorage persistencetheme-toggle.tsx: Sun/Moon toggle buttonmain.tsx: Wrapped app withThemeProviderHeader Redesign (
App.tsx)border-b border-borderButton variant="ghost" size="icon"withTooltipwrappersThemeToggleto desktop and mobile headers<Button>Component Standardization
elementMenu.tsxbg-popover text-popover-foreground, removed allcolor="white"from iconsdataPanel.tsxbg-card/bg-muted,text-primarykey labels, transparent syntax theme bgchat.tsxButtonfor send,focus-withinring on formcode-graph.tsxbg-mutedbackgrounds,Button variant="secondary"for Reset/Unhidecombobox.tsxfocus:ring-1 focus:ring-primaryInput.tsxbg-background,focus:border-primary,bg-mutedselection highlightlabels.tsxbg-backgroundinstead ofbg-whiteTest plan
npm run buildsucceeds with no TypeScript errors ✅bg-graph-purple,bg-graph-pinketc. are generated ✅🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Style