UI improvements and initial loading screen color

src/components/Navigation.tsx

@@ -1,4 +1,4 @@
-import { type Component, For } from "solid-js";
+import { type Component, For, Show } from "solid-js";
 import { LayoutDashboard, ListTodo, Settings, Clock, ArrowUpCircle, PanelLeftClose } from "lucide-solid";
 import { cn } from "@/lib/utils";
 import { Button } from "./ui/button";
@@ -57,19 +57,28 @@ export const Sidebar: Component<{
             )}
         >
             <div class={cn("p-4 flex items-center justify-between", !props.isLocked && "pl-14")}>
-                <h1 class="text-xl font-bold tracking-tighter text-primary px-2">Tasgrid</h1>
+                <h1 class={cn(
+                    "text-xl font-bold tracking-tighter text-primary px-2 transition-opacity",
+                    (props.isLocked || props.isPeeking)
+                        ? "opacity-100 duration-500 delay-[50ms]"
+                        : "opacity-0 duration-116 delay-0"
+                )}>
+                    Tasgrid
+                </h1>
                 {/* Close Button - Only visible when Locked (to collapse) or Peeking (manual close) */}
-                <Button
-                    variant="ghost"
-                    size="icon"
-                    class="h-8 w-8 text-muted-foreground hover:text-foreground"
-                    onClick={() => {
-                        props.setIsLocked(false);
-                        props.setIsPeeking(false);
-                    }}
-                >
-                    <PanelLeftClose size={16} />
-                </Button>
+                <Show when={props.isLocked}>
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        class="h-8 w-8 text-muted-foreground hover:text-foreground"
+                        onClick={() => {
+                            props.setIsLocked(false);
+                            props.setIsPeeking(false);
+                        }}
+                    >
+                        <PanelLeftClose size={16} />
+                    </Button>
+                </Show>
             </div>
             <nav class="flex-1 px-3 space-y-1 mt-2">
                 <For each={navItems.filter(i => i.view !== "settings")}>