refactor: implement user deletion functionality and enhance settings management

frontend/src/components/organisms/UserMenu.tsx

@@ -12,6 +12,7 @@ import {
   LogOut,
   Plus,
   Server,
+  Settings,
   Trello,
 } from "lucide-react";
 
@@ -22,17 +23,26 @@ import {
 } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
 
-export function UserMenu({ className }: { className?: string }) {
+type UserMenuProps = {
+  className?: string;
+  displayName?: string;
+  displayEmail?: string;
+};
+
+export function UserMenu({
+  className,
+  displayName: displayNameFromDb,
+  displayEmail: displayEmailFromDb,
+}: UserMenuProps) {
   const [open, setOpen] = useState(false);
   const { user } = useUser();
   if (!user) return null;
 
   const avatarUrl = user.imageUrl ?? null;
-  const avatarLabelSource = user.firstName ?? user.username ?? user.id ?? "U";
+  const avatarLabelSource = displayNameFromDb ?? user.id ?? "U";
   const avatarLabel = avatarLabelSource.slice(0, 1).toUpperCase();
-  const displayName =
-    user.fullName ?? user.firstName ?? user.username ?? "Account";
-  const displayEmail = user.primaryEmailAddress?.emailAddress ?? "";
+  const displayName = displayNameFromDb ?? "Account";
+  const displayEmail = displayEmailFromDb ?? "";
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -140,6 +150,7 @@ export function UserMenu({ className }: { className?: string }) {
               { href: "/activity", label: "Activity", icon: Activity },
               { href: "/agents", label: "Agents", icon: Bot },
               { href: "/gateways", label: "Gateways", icon: Server },
+              { href: "/settings", label: "Settings", icon: Settings },
             ] as const
           ).map((item) => (
             <Link

frontend/src/components/templates/DashboardShell.tsx

@@ -4,7 +4,7 @@ import { useEffect } from "react";
 import type { ReactNode } from "react";
 import { usePathname, useRouter } from "next/navigation";
 
-import { SignedIn, useAuth, useUser } from "@/auth/clerk";
+import { SignedIn, useAuth } from "@/auth/clerk";
 
 import { ApiError } from "@/api/mutator";
 import {
@@ -20,9 +20,6 @@ export function DashboardShell({ children }: { children: ReactNode }) {
   const router = useRouter();
   const pathname = usePathname();
   const { isSignedIn } = useAuth();
-  const { user } = useUser();
-  const displayName =
-    user?.fullName ?? user?.firstName ?? user?.username ?? "Operator";
   const isOnboardingPath = pathname === "/onboarding";
 
   const meQuery = useGetMeApiV1UsersMeGet<
@@ -36,6 +33,8 @@ export function DashboardShell({ children }: { children: ReactNode }) {
     },
   });
   const profile = meQuery.data?.status === 200 ? meQuery.data.data : null;
+  const displayName = profile?.name ?? profile?.preferred_name ?? "Operator";
+  const displayEmail = profile?.email ?? "";
 
   useEffect(() => {
     if (!isSignedIn || isOnboardingPath) return;
@@ -91,7 +90,7 @@ export function DashboardShell({ children }: { children: ReactNode }) {
                 </p>
                 <p className="text-xs text-slate-500">Operator</p>
               </div>
-              <UserMenu />
+              <UserMenu displayName={displayName} displayEmail={displayEmail} />
             </div>
           </SignedIn>
         </div>