feat(web): UserMenu (email/role + sign out) + HeaderSearch components (#54)

2026-06-07 19:23:43 +02:00
parent 4b55218c69
commit 5c8fe3cd81
6 changed files with 163 additions and 0 deletions
@@ -0,0 +1,42 @@
+import { CircleUser } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+
+import { useLogout, useMe } from "../api/queries";
+import { Button } from "@/components/ui/button";
+import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from "@/components/ui/menu";
+
+export function UserMenu() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { data: me } = useMe();
+  const logout = useLogout();
+
+  const onSignOut = () =>
+    logout.mutate(undefined, {
+      onSuccess: () => navigate("/login", { replace: true }),
+    });
+
+  if (!me) return null;
+
+  return (
+    <Menu>
+      <MenuTrigger
+        render={
+          <Button variant="ghost" size="sm" className="max-w-44">
+            <CircleUser className="h-4 w-4" aria-hidden />
+            <span className="truncate">{me.email}</span>
+          </Button>
+        }
+      />
+      <MenuContent>
+        <div className="px-2 py-1.5">
+          <div className="truncate text-sm font-medium">{me.email}</div>
+          <div className="text-xs text-muted-foreground">{me.role}</div>
+        </div>
+        <MenuSeparator />
+        <MenuItem onClick={onSignOut}>{t("auth.signOut")}</MenuItem>
+      </MenuContent>
+    </Menu>
+  );
+}