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

73
src/components/layout/Sidebar.tsx
View File

@@ -11,7 +11,7 @@ import { SchemaTree } from "@/components/schema/SchemaTree";
import { HistoryPanel } from "@/components/history/HistoryPanel";
import { SavedQueriesPanel } from "@/components/saved-queries/SavedQueriesPanel";
import { AdminPanel } from "@/components/management/AdminPanel";
import { Search, RefreshCw } from "lucide-react";
import { Search, RefreshCw, Layers, Clock, Bookmark, Shield } from "lucide-react";
type SidebarView = "schema" | "history" | "saved" | "admin";
@@ -20,6 +20,13 @@ const SCHEMA_QUERY_KEYS = [
"functions", "sequences", "completionSchema", "column-details",
];
const SIDEBAR_TABS: { id: SidebarView; label: string; icon: React.ReactNode }[] = [
{ id: "schema", label: "Schema", icon: <Layers className="h-3.5 w-3.5" /> },
{ id: "history", label: "History", icon: <Clock className="h-3.5 w-3.5" /> },
{ id: "saved", label: "Saved", icon: <Bookmark className="h-3.5 w-3.5" /> },
{ id: "admin", label: "Admin", icon: <Shield className="h-3.5 w-3.5" /> },
];
export function Sidebar() {
const [view, setView] = useState<SidebarView>("schema");
const [search, setSearch] = useState("");
@@ -32,58 +39,33 @@ export function Sidebar() {
};
return (
<div className="flex h-full flex-col bg-card">
<div className="flex border-b text-xs">
<button
className={`flex-1 px-3 py-1.5 font-medium ${
view === "schema"
? "bg-background text-foreground"
: "text-muted-foreground hover:text-foreground"
}`}
onClick={() => setView("schema")}
>
Schema
</button>
<button
className={`flex-1 px-3 py-1.5 font-medium ${
view === "history"
? "bg-background text-foreground"
: "text-muted-foreground hover:text-foreground"
}`}
onClick={() => setView("history")}
>
History
</button>
<button
className={`flex-1 px-3 py-1.5 font-medium ${
view === "saved"
? "bg-background text-foreground"
: "text-muted-foreground hover:text-foreground"
}`}
onClick={() => setView("saved")}
>
Saved
</button>
<button
className={`flex-1 px-3 py-1.5 font-medium ${
view === "admin"
? "bg-background text-foreground"
: "text-muted-foreground hover:text-foreground"
}`}
onClick={() => setView("admin")}
>
Admin
</button>
<div className="flex h-full flex-col" style={{ background: "var(--sidebar)" }}>
{/* Sidebar navigation tabs */}
<div className="flex border-b border-border/50">
{SIDEBAR_TABS.map((tab) => (
<button
key={tab.id}
className={`relative flex flex-1 items-center justify-center gap-1.5 px-2 py-2 text-[11px] font-medium tracking-wide transition-colors ${
view === tab.id
? "text-foreground tusk-sidebar-tab-active"
: "text-muted-foreground hover:text-foreground/70"
}`}
onClick={() => setView(tab.id)}
>
{tab.icon}
<span className="hidden min-[220px]:inline">{tab.label}</span>
</button>
))}
</div>
{view === "schema" ? (
<>
<div className="flex items-center gap-1 p-2">
<div className="relative flex-1">
<Search className="absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
<Search className="absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/60" />
<Input
placeholder="Search objects..."
className="h-7 pl-7 text-xs"
className="h-7 border-border/40 bg-background/50 pl-7 text-xs placeholder:text-muted-foreground/40 focus:border-primary/40 focus:ring-primary/20"
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
@@ -94,6 +76,7 @@ export function Sidebar() {
variant="ghost"
size="icon-xs"
onClick={handleRefreshSchema}
className="text-muted-foreground hover:text-foreground"
>
<RefreshCw className="h-3.5 w-3.5" />
</Button>