refactor(core): Remove obsolete code and consolidate shared behavior

Cargo.toml

@@ -60,7 +60,6 @@ tokio = { version = "1.48.0", features = ["macros", "rt-multi-thread", "signal",
 tokio-util = { version = "0.7", features = ["io"] }
 totp-rs = { version = "5", features = ["gen_secret", "otpauth"] }
 toml = { version = "0.8" }
-tower-http = { version = "0.6", features = ["cors", "compression-full", "trace"] }
 tracing = "0.1.41"
 tracing-subscriber = { version = "0.3.20", features = ["env-filter", "fmt", "json"] }
 url = "2.5.4"

apps/console/src/components/avatar-crop.ts

@@ -7,7 +7,7 @@ export interface AvatarCropInput {
   offsetY: number;
 }
 
-export interface AvatarCrop {
+interface AvatarCrop {
   sourceX: number;
   sourceY: number;
   sourceSize: number;

apps/console/src/components/settings-sidebar-sections.tsx

@@ -0,0 +1,57 @@
+import { ArrowLeftIcon, type LucideIcon } from "lucide-react";
+import { NavLink } from "react-router";
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar";
+
+export function SettingsSidebarSections({
+  title,
+  back,
+  sections,
+}: {
+  title: string;
+  back: { to: string; label: string; tooltip: string };
+  sections: { to: string; label: string; icon: LucideIcon; active: boolean }[];
+}) {
+  return (
+    <>
+      <SidebarGroup>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton asChild tooltip={back.tooltip}>
+                <NavLink to={back.to}>
+                  <ArrowLeftIcon />
+                  <span>{back.label}</span>
+                </NavLink>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+      <SidebarGroup>
+        <SidebarGroupLabel>{title}</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            {sections.map((section) => (
+              <SidebarMenuItem key={section.to}>
+                <SidebarMenuButton asChild tooltip={section.label} isActive={section.active}>
+                  <NavLink to={section.to}>
+                    <section.icon />
+                    <span>{section.label}</span>
+                  </NavLink>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            ))}
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </>
+  );
+}

apps/console/src/features/account/account-menu.tsx

@@ -0,0 +1,79 @@
+import { LogOutIcon, ShieldCheckIcon, UserRoundIcon } from "lucide-react";
+import { NavLink, useNavigate } from "react-router";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+import { useAuth } from "@/features/auth/auth-context";
+import { apiUrl } from "@/lib/api";
+import { showErrorToast } from "@/lib/toast";
+
+export function AccountAvatar({ className }: { className: string }) {
+  const { user } = useAuth();
+  return (
+    <Avatar className={className}>
+      {user?.avatar_url && (
+        <AvatarImage src={apiUrl(user.avatar_url)} alt="" className="object-cover" />
+      )}
+      <AvatarFallback className="text-[10px]">
+        {(user?.display_name || user?.email || "GW").slice(0, 2).toUpperCase()}
+      </AvatarFallback>
+    </Avatar>
+  );
+}
+
+export function AccountMenuContent({
+  showAdministration = false,
+  ...position
+}: {
+  showAdministration?: boolean;
+  align?: "start" | "center" | "end";
+  side?: "top" | "right" | "bottom" | "left";
+}) {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+  const signOut = async () => {
+    try {
+      await logout();
+      navigate("/login", { replace: true });
+    } catch (cause) {
+      showErrorToast(cause);
+    }
+  };
+  return (
+    <DropdownMenuContent {...position} className="w-56">
+      <DropdownMenuGroup>
+        <DropdownMenuLabel className="font-normal">
+          <p className="truncate text-sm font-medium">{user?.display_name ?? user?.email}</p>
+          <p className="truncate text-xs text-muted-foreground">{user?.email}</p>
+        </DropdownMenuLabel>
+      </DropdownMenuGroup>
+      <DropdownMenuSeparator />
+      <DropdownMenuGroup>
+        <DropdownMenuItem asChild>
+          <NavLink to="/account/profile">
+            <UserRoundIcon /> Personal settings
+          </NavLink>
+        </DropdownMenuItem>
+        {showAdministration && (
+          <DropdownMenuItem asChild>
+            <NavLink to="/admin">
+              <ShieldCheckIcon /> Administration
+            </NavLink>
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuGroup>
+      <DropdownMenuSeparator />
+      <DropdownMenuGroup>
+        <DropdownMenuItem onClick={signOut}>
+          <LogOutIcon /> Log out
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+    </DropdownMenuContent>
+  );
+}

apps/console/src/features/account/account-sidebar-nav.tsx

@@ -1,14 +1,7 @@
-import { ArrowLeftIcon, ShieldCheckIcon, UserRoundIcon } from "lucide-react";
-import { NavLink, useLocation } from "react-router";
+import { ShieldCheckIcon, UserRoundIcon } from "lucide-react";
+import { useLocation } from "react-router";
 
-import {
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-} from "@/components/ui/sidebar";
+import { SettingsSidebarSections } from "@/components/settings-sidebar-sections";
 
 const sections = [
   { to: "/account/profile", label: "Profile", icon: UserRoundIcon },
@@ -19,42 +12,13 @@ export function AccountSidebarNav() {
   const location = useLocation();
 
   return (
-    <>
-      <SidebarGroup>
-        <SidebarGroupContent>
-          <SidebarMenu>
-            <SidebarMenuItem>
-              <SidebarMenuButton asChild tooltip="Back to the Console">
-                <NavLink to="/">
-                  <ArrowLeftIcon />
-                  <span>Console</span>
-                </NavLink>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          </SidebarMenu>
-        </SidebarGroupContent>
-      </SidebarGroup>
-      <SidebarGroup>
-        <SidebarGroupLabel>Personal settings</SidebarGroupLabel>
-        <SidebarGroupContent>
-          <SidebarMenu>
-            {sections.map((section) => (
-              <SidebarMenuItem key={section.to}>
-                <SidebarMenuButton
-                  asChild
-                  tooltip={section.label}
-                  isActive={location.pathname === section.to}
-                >
-                  <NavLink to={section.to}>
-                    <section.icon />
-                    <span>{section.label}</span>
-                  </NavLink>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
-            ))}
-          </SidebarMenu>
-        </SidebarGroupContent>
-      </SidebarGroup>
-    </>
+    <SettingsSidebarSections
+      title="Personal settings"
+      back={{ to: "/", label: "Console", tooltip: "Back to the Console" }}
+      sections={sections.map((section) => ({
+        ...section,
+        active: location.pathname === section.to,
+      }))}
+    />
   );
 }