adrianbonpin
e32fe7967c
* feat: settings back button returns to origin view (push/pop nav) * feat: redesign settings screen with db-viewer border styling * fix: settings sidebar — icon+text tabs, back at top, top border (PR feedback) * fix: tighten settings sidebar — back and tabs in one group * fix: settings header shows active tab name instead of duplicated title * fix: settings — accent back button, header shows active tab; fix App test * fix: tags settings — no create label, no card chrome (bg/border/padding) * feat: drag-and-drop tag reordering in settings tags tab * fix: general settings — remove section card chrome (bg/border/padding) * fix: merge Appearance and Interface into one settings section * fix: remove row separators between settings items within sections * fix: settings rows use gap spacing instead of per-row padding * feat: strip section cards from all settings tabs; delete SettingsSection * feat: apply theme and font size settings (appearance wiring) * feat: honor default folder setting on startup * feat: confirm_before_delete setting now skips delete confirmations * feat: default_ports setting prefills new connection forms * fix: light theme — text colors, native window chrome, ThemePicker preview * fix: sync window background color with theme so title bar follows light mode * fix: window-sync test uses microtask flush instead of vi.waitFor * fix: app root carries canvas bg so home-screen parent matches theme * fix: grant window set-theme/set-background-color permissions so title bar follows theme * fix: overlay title bar — webview paints under traffic lights, flat canvas color in both themes * fix: compact 28px overlay titlebar with visible bottom border * fix: in-flow titlebar strip (draggable via allowed permission); screens fill remaining height, no bottom clipping * fix: top border only on settings + db viewer pages, not the titlebar strip * fix: db viewer sidebar h-screen -> h-full (28px overflow clipped bottom icons) * fix: system theme resets window to OS before reading matchMedia (was polluted by forced window theme) * fix: theme switcher labels moved below previews for readability * feat: configurable accent color setting (circle palette in Appearance) * docs: update AGENTS.md + README for settings redesign, wired settings, accent color
84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
import {
|
|
Boxes,
|
|
Clock,
|
|
Database,
|
|
DatabaseBackup,
|
|
Home,
|
|
Settings,
|
|
Share2,
|
|
} from "lucide-react";
|
|
import { Tooltip } from "../ui/Tooltip";
|
|
|
|
export interface DbViewerSidebarProps {
|
|
currentView: string;
|
|
onNavigate: (view: string) => void;
|
|
}
|
|
|
|
interface NavItem {
|
|
id: string;
|
|
label: string;
|
|
icon: React.ReactNode;
|
|
stub?: boolean;
|
|
}
|
|
|
|
export function DbViewerSidebar({
|
|
currentView,
|
|
onNavigate,
|
|
}: DbViewerSidebarProps) {
|
|
const topItems: NavItem[] = [
|
|
{ id: "db-viewer", label: "Explorer", icon: <Database size={16} /> },
|
|
{
|
|
id: "queries",
|
|
label: "Queries",
|
|
icon: <Clock size={16} />,
|
|
},
|
|
{
|
|
id: "schema-visualizer",
|
|
label: "Schema Visualizer",
|
|
icon: <Share2 size={16} />,
|
|
},
|
|
{ id: "objects", label: "Objects", icon: <Boxes size={16} /> },
|
|
{ id: "tools", label: "Tools", icon: <DatabaseBackup size={16} /> },
|
|
];
|
|
|
|
const bottomItems: NavItem[] = [
|
|
{ id: "home", label: "Home", icon: <Home size={16} /> },
|
|
{ id: "settings", label: "Settings", icon: <Settings size={16} /> },
|
|
];
|
|
|
|
function renderItem(item: NavItem) {
|
|
const isActive = currentView === item.id;
|
|
const baseClass =
|
|
"w-8 h-8 flex items-center justify-center rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-accent/50";
|
|
const activeClass = "text-accent";
|
|
const inactiveClass =
|
|
"text-text-muted hover:text-text hover:bg-surface-raised";
|
|
const stubClass = "opacity-40 cursor-not-allowed";
|
|
|
|
return (
|
|
<Tooltip key={item.id} content={item.label} side="right">
|
|
<button
|
|
type="button"
|
|
aria-label={item.label}
|
|
disabled={item.stub}
|
|
onClick={() => onNavigate(item.id)}
|
|
className={`${baseClass} ${isActive ? activeClass : inactiveClass} ${item.stub ? stubClass : ""}`}
|
|
>
|
|
{item.icon}
|
|
</button>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="w-14 h-full bg-canvas border-r border-border flex flex-col items-center py-3 gap-2 shrink-0">
|
|
<div className="flex flex-col gap-2 flex-1">
|
|
{topItems.map(renderItem)}
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
{bottomItems.map(renderItem)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|