improvement: account setting added to header in order to choose organizations/subscribtions/etc

frontend/src/app/(dashboard)/layout.tsx

@@ -1,18 +1,15 @@
 'use client';
 
-import { memo, useCallback, useEffect } from 'react';
+import { memo, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { useAuth } from '@/lib/hooks/useAuth';
 import Sidebar from '@/components/ui/Sidebar';
 import { ThemeToggle } from '@/components/ui/ThemeToggle';
-import { LogOut } from 'lucide-react';
+import { DashboardAccountMenu } from '@/components/ui/DashboardAccountMenu';
 
 export default function DashboardLayout({ children }: { children: React.ReactNode }) {
-  const { user, currentOrganization, isAuthReady, logout } = useAuth();
+  const { user, currentOrganization, isAuthReady } = useAuth();
   const router = useRouter();
-  const handleLogout = useCallback(() => {
-    void logout();
-  }, [logout]);
 
   // ✅ AUTH GUARD (runs once per navigation group)
   useEffect(() => {
@@ -51,11 +48,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
       <Sidebar />
 
       <div className="flex-1 flex flex-col">
-        <DashboardHeader
-          organizationName={currentOrganization.name}
-          userName={user.name}
-          onLogout={handleLogout}
-        />
+        <DashboardHeader organizationName={currentOrganization.name} />
 
         <main className="p-6 flex-1 overflow-y-auto">
           <div className="surface-panel p-6 min-h-full">
@@ -69,27 +62,16 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
 
 const DashboardHeader = memo(function DashboardHeader({
   organizationName,
-  userName,
-  onLogout,
 }: {
   organizationName: string;
-  userName: string;
-  onLogout: () => void;
 }) {
   return (
-    <header className="flex justify-between px-6 py-4 border-b border-border/70 backdrop-blur-sm">
-      <h2 className="text-lg font-medium">{organizationName}</h2>
+    <header className="h-[71px] flex justify-between items-center gap-4 px-6 border-b border-border/70 backdrop-blur-sm">
+      <h2 className="text-lg font-medium truncate min-w-0">{organizationName}</h2>
 
-      <div className="flex items-center gap-4">
+      <div className="flex items-center gap-3 shrink-0">
         <ThemeToggle />
-        <span className="text-sm text-text-secondary">{userName}</span>
-        <button
-          onClick={onLogout}
-          className="inline-flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary transition-colors"
-        >
-          <LogOut className="w-4 h-4 icon-flat" />
-          Logout
-        </button>
+        <DashboardAccountMenu />
       </div>
     </header>
   );