minor sidebar + buttons adjustments

src/Layout.tsx

@@ -1,16 +1,38 @@
 import ThemeToggle from "@/components/theme-toggle";
+import { Link, useLocation } from "react-router-dom";
+import { Home, Settings } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
+    const location = useLocation();
+
     return (
         <div className="flex h-screen w-full">
             {/* sidebar - fixed width */}
-            <aside className="w-80 border-r bg-card p-6 flex flex-col gap-4">
+            <div className="w-80 border-r bg-card p-4 flex flex-col gap-4">
                 <div className="flex items-center justify-between">
                     <h1 className="text-2xl font-semibold">The Shape of Sound</h1>
-                    <ThemeToggle />
                 </div>
                 <div className="flex-1">{/* controls will go here in later phases */}</div>
-            </aside>
+
+                <div className="flex items-center gap-4">
+                    <ThemeToggle className="rounded-lg" />
+                    {location.pathname !== "/settings" && (
+                        <Link to="/settings">
+                            <Button variant="ghost" size="icon" className="rounded-lg">
+                                <Settings className="size-6" />
+                            </Button>
+                        </Link>
+                    )}
+                    {location.pathname !== "/" && (
+                        <Link to="/">
+                            <Button variant="ghost" size="icon" className="rounded-lg">
+                                <Home className="size-6" />
+                            </Button>
+                        </Link>
+                    )}
+                </div>
+            </div>
 
             {/* canvas area - flex-1 */}
             <main className="flex-1 flex items-center justify-center bg-background">{children}</main>

src/components/theme-toggle.tsx

@@ -1,8 +1,9 @@
 import { Moon, Sun } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
-function ThemeToggle() {
+function ThemeToggle({ className }: { className?: string }) {
     const [theme, setTheme] = useState<string | null>();
 
     useEffect(() => {
@@ -22,9 +23,9 @@ function ThemeToggle() {
     return (
         <Button
             type="button"
-            variant="dummy"
-            size="none"
-            className="rounded cursor-pointer"
+            variant="ghost"
+            size="icon"
+            className={cn("", className)}
             onClick={() => {
                 if (!theme || theme === "light") updateTheme("dark");
                 else updateTheme("light");

src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
     {
         variants: {
             variant: {