tools/tusk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign UI with Twilight design system

Browse Source 
Outfit + JetBrains Mono typography, soft dark palette with blue
undertones, electric teal primary, purple-branded AI features,
noise texture, glow effects, glassmorphism, and refined grid/tree.
This commit is contained in:
Alexey Shakhmatov
2026-04-06 10:27:20 +03:00
parent 64e27f79a4
commit 4e5714b291
14 changed files with 674 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/layout/Toolbar.tsx
View File

@@ -1,6 +1,5 @@
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { ConnectionSelector } from "@/components/connections/ConnectionSelector";
import { ConnectionList } from "@/components/connections/ConnectionList";
import { ConnectionDialog } from "@/components/connections/ConnectionDialog";
@@ -61,70 +60,73 @@ export function Toolbar() {
return (
<>
<div
className="flex h-10 items-center gap-2 border-b px-3 bg-card"
style={{ borderLeftWidth: activeColor ? 3 : 0, borderLeftColor: activeColor }}
className="tusk-toolbar tusk-conn-strip flex h-10 items-center gap-1.5 px-3"
style={{
"--strip-width": activeColor ? "3px" : "0px",
"--strip-color": activeColor ?? "transparent",
} as React.CSSProperties}
>
<Button
variant="ghost"
size="sm"
className="h-7 gap-1.5"
size="xs"
className="gap-1.5 text-muted-foreground hover:text-foreground"
onClick={() => setListOpen(true)}
>
<Database className="h-3.5 w-3.5" />
Connections
<span className="text-xs font-medium">Connections</span>
</Button>
<Separator orientation="vertical" className="h-5" />
<div className="mx-1 h-4 w-px bg-border" />
<ConnectionSelector />
<Button
variant="ghost"
size="sm"
className="h-7 w-7 p-0"
size="icon-xs"
onClick={handleReconnect}
disabled={!activeConnectionId || reconnectMutation.isPending}
title="Reconnect"
className="text-muted-foreground hover:text-foreground"
>
<RefreshCw className={`h-3.5 w-3.5 ${reconnectMutation.isPending ? "animate-spin" : ""}`} />
</Button>
<Separator orientation="vertical" className="h-5" />
<div className="mx-1 h-4 w-px bg-border" />
<ReadOnlyToggle />
<Separator orientation="vertical" className="h-5" />
<div className="mx-1 h-4 w-px bg-border" />
<Button
variant="ghost"
size="sm"
className="h-7 gap-1.5"
size="xs"
className="gap-1.5 text-muted-foreground hover:text-foreground"
onClick={handleNewQuery}
disabled={!activeConnectionId}
>
<Plus className="h-3.5 w-3.5" />
New Query
<span className="text-xs font-medium">New Query</span>
</Button>
<Button
variant="ghost"
size="sm"
className="h-7 gap-1.5"
size="xs"
className="gap-1.5 text-muted-foreground hover:text-foreground"
onClick={handleNewLookup}
disabled={!activeConnectionId}
>
<Search className="h-3.5 w-3.5" />
Entity Lookup
<span className="text-xs font-medium">Lookup</span>
</Button>
<div className="flex-1" />
<Button
variant="ghost"
size="sm"
className="h-7 w-7 p-0"
size="icon-xs"
onClick={() => setSettingsOpen(true)}
title="Settings"
className="text-muted-foreground hover:text-foreground"
>
<Settings className="h-3.5 w-3.5" />
</Button>