Overhaul (#83)

* WIP Layout Refactor

* New Connection Dialog

* WIP form overhaul

* Fix remaining config pages

src/components/UI/Sidebar/SidebarSection.tsx

@@ -0,0 +1,17 @@
+import { H4 } from "../Typography/H4.js";
+
+export interface SidebarSectionProps {
+  label: string;
+  subheader?: string;
+  children: React.ReactNode;
+}
+
+export const SidebarSection = ({
+  label: title,
+  children
+}: SidebarSectionProps): JSX.Element => (
+  <div className="px-4 py-2">
+    <H4 className="mb-2 ml-2">{title}</H4>
+    <div className="space-y-1">{children}</div>
+  </div>
+);

src/components/UI/Sidebar/sidebarButton.tsx

@@ -0,0 +1,29 @@
+import type { LucideIcon } from "lucide-react";
+import { Button } from "../Button.js";
+
+export interface SidebarButtonProps {
+  label: string;
+  active?: boolean;
+  icon?: LucideIcon;
+  element?: JSX.Element;
+  onClick?: () => void;
+}
+
+export const SidebarButton = ({
+  label,
+  active,
+  icon: Icon,
+  element,
+  onClick
+}: SidebarButtonProps): JSX.Element => (
+  <Button
+    onClick={onClick}
+    variant={active ? "subtle" : "ghost"}
+    size="sm"
+    className="w-full justify-start gap-2"
+  >
+    {Icon && <Icon size={16} />}
+    {element && element}
+    {label}
+  </Button>
+);