From ed9bbfe60aa7051a90b89b45a5fb801b8a090060 Mon Sep 17 00:00:00 2001
From: AI Assistant <ai@architools.local>
Date: Fri, 27 Feb 2026 12:36:39 +0200
Subject: [PATCH] feat: redesign sidebar logos (wider, theme-aware) + animated
 sun/moon theme toggle

---
 src/shared/components/common/theme-toggle.tsx | 100 ++++++++++++++++++
 src/shared/components/layout/header.tsx       |  28 +----
 src/shared/components/layout/sidebar.tsx      |  32 +++---
 3 files changed, 123 insertions(+), 37 deletions(-)
 create mode 100644 src/shared/components/common/theme-toggle.tsx

diff --git a/src/shared/components/common/theme-toggle.tsx b/src/shared/components/common/theme-toggle.tsx
new file mode 100644
index 0000000..e7a44fe
--- /dev/null
+++ b/src/shared/components/common/theme-toggle.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { cn } from "@/shared/lib/utils";
+
+export function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) {
+    // Prevent hydration mismatch — render placeholder
+    return <div className="h-7 w-14 rounded-full bg-muted" />;
+  }
+
+  const isDark = resolvedTheme === "dark";
+
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={isDark}
+      aria-label="Schimbă tema"
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      className={cn(
+        "relative inline-flex h-7 w-14 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-500 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        isDark
+          ? "bg-gradient-to-r from-indigo-900 to-slate-800"
+          : "bg-gradient-to-r from-sky-300 to-amber-200",
+      )}
+    >
+      {/* Stars — visible in dark mode */}
+      <span
+        className={cn(
+          "pointer-events-none absolute right-2 top-1 flex gap-[3px] transition-opacity duration-500",
+          isDark ? "opacity-100" : "opacity-0",
+        )}
+      >
+        <span className="h-[3px] w-[3px] rounded-full bg-white/80 animate-[pulse_2s_ease-in-out_infinite]" />
+        <span
+          className="mt-1 h-[2px] w-[2px] rounded-full bg-white/60 animate-[pulse_3s_ease-in-out_infinite]"
+          style={{ animationDelay: "0.5s" }}
+        />
+        <span
+          className="h-[2px] w-[2px] rounded-full bg-white/50 animate-[pulse_2.5s_ease-in-out_infinite]"
+          style={{ animationDelay: "1s" }}
+        />
+      </span>
+
+      {/* Sliding circle (sun/moon) */}
+      <span
+        className={cn(
+          "pointer-events-none relative inline-block h-5 w-5 rounded-full shadow-lg transition-all duration-500 ease-in-out",
+          isDark ? "translate-x-7" : "translate-x-1",
+          isDark
+            ? "bg-slate-200 shadow-slate-400/30"
+            : "bg-amber-400 shadow-amber-500/40",
+        )}
+      >
+        {/* Sun rays — visible in light mode */}
+        <span
+          className={cn(
+            "absolute inset-0 transition-opacity duration-300",
+            isDark ? "opacity-0" : "opacity-100",
+          )}
+        >
+          {/* Glow */}
+          <span className="absolute -inset-1 rounded-full bg-amber-300/30 animate-[pulse_2s_ease-in-out_infinite]" />
+        </span>
+
+        {/* Moon craters — visible in dark mode */}
+        <span
+          className={cn(
+            "absolute inset-0 transition-opacity duration-300",
+            isDark ? "opacity-100" : "opacity-0",
+          )}
+        >
+          <span className="absolute left-1 top-1 h-1.5 w-1.5 rounded-full bg-slate-300/60" />
+          <span className="absolute bottom-1.5 right-1.5 h-1 w-1 rounded-full bg-slate-300/40" />
+          <span className="absolute right-1 top-2.5 h-[3px] w-[3px] rounded-full bg-slate-300/30" />
+        </span>
+      </span>
+
+      {/* Clouds — visible in light mode */}
+      <span
+        className={cn(
+          "pointer-events-none absolute bottom-0.5 left-1.5 transition-all duration-500",
+          isDark
+            ? "translate-y-2 opacity-0"
+            : "translate-y-0 opacity-100",
+        )}
+      >
+        <span className="inline-block h-2 w-4 rounded-full bg-white/60" />
+        <span className="absolute -right-1 -top-0.5 h-1.5 w-2.5 rounded-full bg-white/40" />
+      </span>
+    </button>
+  );
+}
diff --git a/src/shared/components/layout/header.tsx b/src/shared/components/layout/header.tsx
index 732180d..9473164 100644
--- a/src/shared/components/layout/header.tsx
+++ b/src/shared/components/layout/header.tsx
@@ -1,9 +1,6 @@
 "use client";
 
-import { useTheme } from "next-themes";
 import {
-  Moon,
-  Sun,
   PanelLeft,
   User as UserIcon,
   LogOut,
@@ -20,13 +17,13 @@ import {
 } from "@/shared/components/ui/dropdown-menu";
 import { useAuth } from "@/core/auth";
 import { signIn, signOut } from "next-auth/react";
+import { ThemeToggle } from "@/shared/components/common/theme-toggle";
 
 interface HeaderProps {
   onToggleSidebar?: () => void;
 }
 
 export function Header({ onToggleSidebar }: HeaderProps) {
-  const { setTheme } = useTheme();
   const { user, isAuthenticated } = useAuth();
 
   return (
@@ -42,27 +39,8 @@ export function Header({ onToggleSidebar }: HeaderProps) {
         </Button>
       </div>
 
-      <div className="flex items-center gap-2">
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon">
-              <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-              <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-              <span className="sr-only">Schimbă tema</span>
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={() => setTheme("light")}>
-              Luminos
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => setTheme("dark")}>
-              Întunecat
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => setTheme("system")}>
-              Sistem
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+      <div className="flex items-center gap-3">
+        <ThemeToggle />
 
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
diff --git a/src/shared/components/layout/sidebar.tsx b/src/shared/components/layout/sidebar.tsx
index 57590d4..8630786 100644
--- a/src/shared/components/layout/sidebar.tsx
+++ b/src/shared/components/layout/sidebar.tsx
@@ -130,7 +130,7 @@ function SidebarLogos() {
   );
 
   return (
-    <div className="relative flex items-center gap-1.5">
+    <div className="relative flex w-full items-center justify-between gap-2">
       {LOGO_COMPANIES.map((companyId, index) => {
         const company = COMPANIES[companyId];
         const logoSrc =
@@ -159,9 +159,9 @@ function SidebarLogos() {
             <Image
               src={logoSrc}
               alt={company.shortName}
-              width={40}
+              width={200}
               height={40}
-              className="h-10 w-10 object-contain"
+              className="h-7 w-auto max-w-[72px] object-contain"
               suppressHydrationWarning
             />
           </button>
@@ -170,7 +170,7 @@ function SidebarLogos() {
 
       {/* Confetti burst on secret combo */}
       {showConfetti && (
-        <div className="pointer-events-none absolute -top-2 left-1/2 -translate-x-1/2 z-50">
+        <div className="pointer-events-none absolute -bottom-6 left-1/2 -translate-x-1/2 z-50">
           <div className="flex gap-0.5 animate-[fadeIn_0.2s_ease-in]">
             {["🎉", "✨", "🏗️", "✨", "🎉"].map((emoji, i) => (
               <span
@@ -197,14 +197,22 @@ export function Sidebar() {
 
   return (
     <aside className="flex h-full w-64 shrink-0 flex-col border-r bg-card">
-      <Link
-        href="/"
-        className="flex h-14 items-center gap-2.5 border-b px-4 transition-colors hover:bg-accent/30"
-        title="Panou principal"
-      >
-        <SidebarLogos />
-        <span className="text-lg font-semibold">ArchiTools</span>
-      </Link>
+      <div className="border-b px-4 py-3">
+        <Link
+          href="/"
+          className="mb-2 flex w-full items-center justify-center"
+          title="Panou principal"
+        >
+          <SidebarLogos />
+        </Link>
+        <Link
+          href="/"
+          className="block text-center text-base font-semibold tracking-wide transition-colors hover:text-primary"
+          title="Panou principal"
+        >
+          ArchiTools
+        </Link>
+      </div>
 
       <ScrollArea className="flex-1 px-3 py-3">
         <Link