Skip to content

Align UI with FalkorDB design language #616

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gkorland merged 7 commits into from
Mar 14, 2026
Merged

Align UI with FalkorDB design language #616

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b4fdad0
Merge pull request #612 from FalkorDB/staging
gkorland Mar 14, 2026
692df49
Align UI with FalkorDB design language
gkorland Mar 14, 2026
dd8a946
Fix Playwright helpers for redesigned UI
gkorland Mar 14, 2026
d6dbc23
Replace fixed Playwright graph sleep
gkorland Mar 14, 2026
63f9304
Fix theme toggle review feedback
gkorland Mar 14, 2026
064bc33
Potential fix for pull request finding
gkorland Mar 14, 2026
899f11d
Tighten Playwright graph interaction checks
gkorland Mar 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Oswald:wght@400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<title>Code Graph by FalkorDB</title>
</head>
<body>
Expand Down
251 changes: 143 additions & 108 deletions app/src/App.tsx
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions app/src/components/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ export default function Input({ onValueChange, handleSubmit, graph, icon, node,
}
}}
onKeyDown={handleKeyDown}
className={cn("w-full border p-2 rounded-md pointer-events-auto", className)}
className={cn("w-full border p-2 rounded-md pointer-events-auto bg-background text-foreground focus:border-primary focus:ring-1 focus:ring-primary/50 focus-visible:outline-none transition-colors", className)}
placeholder="Search for nodes in the graph"
value={node?.name || ""}
onChange={(e) => {
Expand All @@ -175,7 +175,7 @@ export default function Input({ onValueChange, handleSubmit, graph, icon, node,
open &&
<div
ref={containerRef}
className="z-10 w-full bg-white absolute flex flex-col pointer-events-auto border rounded-md md:max-h-[50dvh] h-[25dvh] overflow-y-auto overflow-x-hidden p-2 gap-2"
className="z-10 w-full bg-background absolute flex flex-col pointer-events-auto border rounded-md md:max-h-[50dvh] h-[25dvh] overflow-y-auto overflow-x-hidden p-2 gap-2"
data-name='search-bar-list'
style={{
top: inputHeight + 16
Expand All @@ -201,7 +201,7 @@ export default function Input({ onValueChange, handleSubmit, graph, icon, node,
<button
className={cn(
"w-full flex gap-3 p-1 items-center rounded-md",
selectedOption === index && "bg-gray-100"
selectedOption === index && "bg-muted"
)}
onMouseEnter={() => setSelectedOption(index)}
onClick={() => {
Expand All @@ -216,7 +216,7 @@ export default function Input({ onValueChange, handleSubmit, graph, icon, node,
<p className="truncate" title={name}>
{name}
</p>
<p className="truncate p-1 text-xs font-medium text-gray-400" title={path}>
<p className="truncate p-1 text-xs font-medium text-muted-foreground" title={path}>
{path}
</p>
</div>
Expand Down
19 changes: 10 additions & 9 deletions app/src/components/chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { Graph, GraphData, Node } from "./model";
import { cn, GraphRef } from "@/lib/utils";
import { TypeAnimation } from "react-type-animation";
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";

const AUTH_HEADERS: HeadersInit = import.meta.env.VITE_SECRET_TOKEN
? { 'Authorization': `Bearer ${import.meta.env.VITE_SECRET_TOKEN}` }
Expand Down Expand Up @@ -548,7 +549,7 @@ export function Chat({ messages, setMessages, query, setQuery, selectedPath, set
value={path?.start?.name || ""}
placeholder="Start typing starting point"
type="text"
icon={<ChevronDown color="gray" />}
icon={<ChevronDown className="text-muted-foreground" />}
node={path?.start}
scrollToBottom={() => containerRef.current?.scrollTo(0, containerRef.current?.scrollHeight)}
/>
Expand All @@ -559,7 +560,7 @@ export function Chat({ messages, setMessages, query, setQuery, selectedPath, set
onValueChange={({ name, id }) => setPath(prev => ({ end: { name, id }, start: prev?.start }))}
placeholder="Start typing end point"
type="text"
icon={<ChevronDown color="gray" />}
icon={<ChevronDown className="text-muted-foreground" />}
node={path?.end}
scrollToBottom={() => containerRef.current?.scrollTo(0, containerRef.current?.scrollHeight)}
/>
Expand All @@ -578,7 +579,7 @@ export function Chat({ messages, setMessages, query, setQuery, selectedPath, set
p.nodes.length === selectedPath?.nodes.length &&
selectedPath?.nodes.every(node => p?.nodes.some((n) => n.id === node.id)) &&
"border-[#ffde21] bg-[#ffde2133]",
message.graphName !== graph.Id && "opacity-50 bg-gray-200"
message.graphName !== graph.Id && "opacity-50 bg-secondary"
)}
title={message.graphName !== graph.Id ? `Move to graph ${message.graphName} to use this path` : undefined}
disabled={message.graphName !== graph.Id}
Expand Down Expand Up @@ -642,19 +643,19 @@ export function Chat({ messages, setMessages, query, setQuery, selectedPath, set
<footer className="flex gap-4 px-4 overflow-hidden min-h-fit">
<DropdownMenu open={sugOpen} onOpenChange={setSugOpen}>
<DropdownMenuTrigger asChild>
<button data-name="lightbulb" className="p-4 border rounded-md hover:border-[#FF66B3] hover:bg-[#FFF0F7]">
<button data-name="lightbulb" className="p-4 border rounded-md hover:border-primary hover:bg-primary/5 transition-colors">
<Lightbulb />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="flex flex-col gap-2 mb-4 w-[81.51dvw] md:w-[20dvw] overflow-y-auto" side="top">
{getTip("!w-full")}
</DropdownMenuContent>
</DropdownMenu>
<form className="grow flex items-center border rounded-md px-2" onSubmit={sendQuery}>
<input className="w-1 grow p-4 rounded-md focus-visible:outline-none" placeholder="Ask your question" onChange={handleQueryInputChange} value={query} />
<button disabled={isSendMessage} className={`bg-gray-200 p-2 rounded-md ${!isSendMessage && 'hover:bg-gray-300'}`}>
<ArrowRight color="white" />
</button>
<form className="grow flex items-center border rounded-md px-2 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary/50 transition-colors" onSubmit={sendQuery}>
<input className="w-1 grow p-4 rounded-md bg-transparent focus-visible:outline-none" placeholder="Ask your question" onChange={handleQueryInputChange} value={query} />
<Button disabled={isSendMessage} variant="default" size="icon" className="shrink-0">
<ArrowRight />
</Button>
</form>
</footer>
</div>
Expand Down
35 changes: 20 additions & 15 deletions app/src/components/code-graph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Graph, GraphData, Node, Link } from "./model";
import { Toolbar } from "./toolbar";
import { Labels } from "./labels";
import { Download, GitFork, Search, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import ElementMenu from "./elementMenu";
import Combobox from "./combobox";
import { toast } from '@/components/ui/use-toast';
Expand Down Expand Up @@ -346,9 +347,9 @@ export function CodeGraph({
}

return (
<div className="grow md:h-full w-full flex flex-col gap-4 p-4 pt-0 md:p-8 md:bg-gray-100">
<div className="grow md:h-full w-full flex flex-col gap-4 p-4 pt-0 md:p-8 md:bg-muted">
<header className="flex flex-col gap-4 relative">
<div className="absolute md:hidden inset-x-0 top-8 h-[50%] bg-gray-100 -mx-8 -mt-8 px-8 border-b border-gray-400" />
<div className="absolute md:hidden inset-x-0 top-8 h-[50%] bg-muted -mx-8 -mt-8 px-8 border-b border-border" />
<Combobox
options={options}
setOptions={setOptions}
Expand All @@ -357,7 +358,7 @@ export function CodeGraph({
/>
</header>
<div className='h-1 grow flex flex-col'>
<main ref={containerRef} className="bg-white h-1 grow">
<main ref={containerRef} className="bg-background h-1 grow">
{
graph.Id ?
<div className="h-full relative border flex flex-col md:block">
Expand All @@ -377,8 +378,10 @@ export function CodeGraph({
<div className="flex gap-2">
{
(isPathResponse || isPathResponse === undefined) &&
<button
className='bg-[#ECECEC] hover:bg-[#D3D3D3] p-2 rounded-md flex gap-2 items-center pointer-events-auto'
<Button
variant="secondary"
size="sm"
className='pointer-events-auto'
onClick={() => {
const canvas = canvasRef.current

Expand Down Expand Up @@ -406,13 +409,15 @@ export function CodeGraph({
}}
>
<X size={15} />
<p>Reset Graph</p>
</button>
Reset Graph
</Button>
}
{
hasHiddenElements &&
<button
className='bg-[#ECECEC] hover:bg-[#D3D3D3] p-2 rounded-md flex gap-2 items-center pointer-events-auto'
<Button
variant="secondary"
size="sm"
className='pointer-events-auto'
onClick={() => {
const canvas = canvasRef.current;

Expand All @@ -435,8 +440,8 @@ export function CodeGraph({
}}
>
<X size={15} />
<p>Unhide Nodes</p>
</button>
Unhide Nodes
</Button>
}
</div>
</div>
Expand Down Expand Up @@ -476,15 +481,15 @@ export function CodeGraph({
zoomedNodes={zoomedNodes}
/>
<div data-name="canvas-info-panel" className="w-full md:absolute md:bottom-0 md:left-0 md:flex md:justify-between md:items-center md:p-4 z-10 pointer-events-none">
<div data-name="metrics-panel" className="flex gap-4 justify-center bg-gray-100 md:bg-transparent md:text-gray-500 p-2 md:p-0">
<div data-name="metrics-panel" className="flex gap-4 justify-center bg-muted md:bg-transparent md:text-muted-foreground p-2 md:p-0">
<p>{nodesCount} Nodes</p>
<p className="md:hidden">|</p>
<p>{edgesCount} Edges</p>
</div>
<div className='hidden md:flex gap-4'>
{
commitIndex !== commits.length &&
<div className='bg-white flex gap-2 border rounded-md p-2 pointer-events-auto'>
<div className='bg-background flex gap-2 border rounded-md p-2 pointer-events-auto'>
<div className='flex gap-2 items-center'>
<Checkbox
className='h-5 w-5 bg-gray-500 data-[state true]'
Expand All @@ -511,8 +516,8 @@ export function CodeGraph({
</div>
</div>
</div>
: <div className="flex flex-col items-center justify-center h-full text-gray-400">
<GitFork className="md:w-24 md:h-24 w-16 h-16" color="gray" />
: <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
<GitFork className="md:w-24 md:h-24 w-16 h-16" />
<h1 className="md:text-4xl text-2xl text-center">Select a repo to show its graph here</h1>
</div>
}
Expand Down
2 changes: 1 addition & 1 deletion app/src/components/combobox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export default function Combobox({ options, setOptions, selectedValue, onSelecte

return (
<Select open={open} onOpenChange={setOpen} value={selectedValue} onValueChange={onSelectedValue}>
<SelectTrigger className="z-10 md:z-0 rounded-md border border-gray-400 md:border-gray-100 focus:ring-0 focus:ring-offset-0">
<SelectTrigger className="z-10 md:z-0 rounded-md border border-border focus:ring-1 focus:ring-primary">
<SelectValue placeholder="Select a repo" />
</SelectTrigger>
<SelectContent>
Expand Down
Loading
Loading