hazo_auth 0.1.2 → 0.3.0

package/hazo_auth_config.example.ini

@@ -251,6 +251,42 @@ enable_admin_ui = true
 # Login path (redirect target in unauthorized message)
 # login_path = /login
 
+[hazo_auth__profile_pic_menu]
+# Profile picture menu configuration
+# This component can be used in navbar or sidebar to show user profile picture or sign up/sign in buttons
+
+# Button configuration for unauthenticated users
+# Show only "Sign Up" button when true, show both "Sign Up" and "Sign In" buttons when false (default)
+# show_single_button = false
+
+# Sign up button label
+# sign_up_label = Sign Up
+
+# Sign in button label
+# sign_in_label = Sign In
+
+# Register page path
+# register_path = /register
+
+# Login page path
+# login_path = /login
+
+# Settings page path (shown in dropdown menu when authenticated)
+# settings_path = /my_settings
+
+# Logout API endpoint path
+# logout_path = /api/auth/logout
+
+# Custom menu items (optional)
+# Format: "type:label:value_or_href:order" for info/link, or "separator:order" for separator
+# Examples:
+#   - Info item: "info:Phone:+1234567890:3"
+#   - Link item: "link:My Account:/account:4"
+#   - Separator: "separator:2"
+# Custom items are added to the default menu items (name, email, separator, Settings, Logout)
+# Items are sorted by type (info first, then separators, then links) and then by order within each type
+# custom_menu_items = 
+
 [hazo_auth__profile_picture]
 # Profile picture configuration
 # This configuration is used by:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hazo_auth",
-  "version": "0.1.2",
+  "version": "0.3.0",
   "files": [
     "src/**/*",
     "public/file.svg",
@@ -37,6 +37,7 @@
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",

package/src/app/api/auth/library_photos/route.ts

@@ -5,6 +5,9 @@ import { get_library_categories, get_library_photos } from "@/lib/services/profi
 import { create_app_logger } from "@/lib/app_logger";
 import { get_filename, get_line_number } from "@/lib/utils/api_route_helpers";
 
+// section: route_config
+export const dynamic = 'force-dynamic';
+
 // section: api_handler
 export async function GET(request: NextRequest) {
   const logger = create_app_logger();

package/src/components/layouts/my_settings/components/profile_picture_library_tab.tsx

@@ -140,6 +140,21 @@ export function ProfilePictureLibraryTab({
     return "L";
   };
 
+  // Map column count to Tailwind grid class
+  const getGridColumnsClass = (columns: number): string => {
+    const columnMap: Record<number, string> = {
+      1: "grid-cols-1",
+      2: "grid-cols-2",
+      3: "grid-cols-3",
+      4: "grid-cols-4",
+      5: "grid-cols-5",
+      6: "grid-cols-6",
+      7: "grid-cols-7",
+      8: "grid-cols-8",
+    };
+    return columnMap[columns] || "grid-cols-4";
+  };
+
   return (
     <div className="cls_profile_picture_library_tab flex flex-col gap-4">
       {/* Switch */}
@@ -213,7 +228,7 @@ export function ProfilePictureLibraryTab({
               <Loader2 className="h-6 w-6 text-slate-400 animate-spin" aria-hidden="true" />
             </div>
           ) : photos.length > 0 ? (
-            <div className={`cls_profile_picture_library_tab_photos_grid grid grid-cols-${libraryPhotoGridColumns} gap-3 overflow-y-auto p-4 border border-slate-200 rounded-lg bg-slate-50 min-h-[400px] max-h-[400px]`}>
+            <div className={`cls_profile_picture_library_tab_photos_grid grid ${getGridColumnsClass(libraryPhotoGridColumns)} gap-3 overflow-y-auto p-4 border border-slate-200 rounded-lg bg-slate-50 min-h-[400px] max-h-[400px]`}>
               {photos.map((photoUrl) => (
                 <button
                   key={photoUrl}
@@ -221,16 +236,21 @@ export function ProfilePictureLibraryTab({
                   onClick={() => handlePhotoClick(photoUrl)}
                   className={`
                     cls_profile_picture_library_tab_photo_thumbnail
-                    aspect-square rounded-lg overflow-hidden border-2 transition-colors
+                    aspect-square rounded-lg overflow-hidden border-2 transition-colors cursor-pointer
                     ${selectedPhoto === photoUrl ? "border-blue-500 ring-2 ring-blue-200" : "border-slate-200 hover:border-slate-300"}
                   `}
-                  aria-label={`Select ${photoUrl}`}
+                  aria-label={`Select photo ${photoUrl.split('/').pop()}`}
                 >
                   <img
                     src={photoUrl}
-                    alt="Library photo thumbnail"
+                    alt={`Library photo ${photoUrl.split('/').pop()}`}
                     className="cls_profile_picture_library_tab_photo_thumbnail_image w-full h-full object-cover"
                     loading="lazy"
+                    onError={(e) => {
+                      // Fallback if image fails to load
+                      const target = e.target as HTMLImageElement;
+                      target.style.display = 'none';
+                    }}
                   />
                 </button>
               ))}
@@ -256,6 +276,15 @@ export function ProfilePictureLibraryTab({
                   src={selectedPhoto}
                   alt="Selected library photo preview"
                   className="cls_profile_picture_library_tab_preview_image max-w-full max-h-[350px] rounded-lg object-contain"
+                  onError={(e) => {
+                    // Fallback if preview image fails to load
+                    const target = e.target as HTMLImageElement;
+                    target.style.display = 'none';
+                    const wrapper = target.parentElement;
+                    if (wrapper) {
+                      wrapper.innerHTML = '<p class="text-sm text-red-500">Failed to load preview</p>';
+                    }
+                  }}
                 />
               </div>
               <p className="cls_profile_picture_library_tab_preview_text text-sm text-slate-600 text-center">

package/src/components/layouts/shared/components/profile_pic_menu.tsx

@@ -0,0 +1,321 @@
+// file_description: profile picture menu component for navbar or sidebar - shows profile picture when logged in, or sign up/sign in buttons when not logged in
+// section: client_directive
+"use client";
+
+// section: imports
+import { useState, useMemo } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Settings, LogOut } from "lucide-react";
+import { toast } from "sonner";
+import { use_auth_status, trigger_auth_status_refresh } from "@/components/layouts/shared/hooks/use_auth_status";
+// Type-only import from server file is safe (types are erased at runtime)
+import type { ProfilePicMenuMenuItem } from "@/lib/profile_pic_menu_config.server";
+
+// section: types
+export type ProfilePicMenuProps = {
+  show_single_button?: boolean;
+  sign_up_label?: string;
+  sign_in_label?: string;
+  register_path?: string;
+  login_path?: string;
+  settings_path?: string;
+  logout_path?: string;
+  custom_menu_items?: ProfilePicMenuMenuItem[];
+  className?: string;
+  avatar_size?: "default" | "sm" | "lg";
+};
+
+// section: component
+/**
+ * Profile picture menu component
+ * Shows user profile picture when authenticated, or sign up/sign in buttons when not authenticated
+ * Clicking profile picture opens dropdown menu with user info and actions
+ * @param props - Component props including configuration options
+ * @returns Profile picture menu component
+ */
+export function ProfilePicMenu({
+  show_single_button = false,
+  sign_up_label = "Sign Up",
+  sign_in_label = "Sign In",
+  register_path = "/register",
+  login_path = "/login",
+  settings_path = "/my_settings",
+  logout_path = "/api/auth/logout",
+  custom_menu_items = [],
+  className,
+  avatar_size = "default",
+}: ProfilePicMenuProps) {
+  const router = useRouter();
+  const authStatus = use_auth_status();
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+
+  // Get initials from name or email
+  const getInitials = (): string => {
+    if (authStatus.name) {
+      const parts = authStatus.name.trim().split(" ");
+      if (parts.length >= 2) {
+        return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+      }
+      return authStatus.name[0]?.toUpperCase() || "";
+    }
+    if (authStatus.email) {
+      return authStatus.email[0]?.toUpperCase() || "";
+    }
+    return "?";
+  };
+
+  // Handle logout
+  const handleLogout = async () => {
+    setIsLoggingOut(true);
+
+    try {
+      const response = await fetch(logout_path, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      const data = await response.json();
+
+      if (!response.ok || !data.success) {
+        throw new Error(data.error || "Logout failed");
+      }
+
+      toast.success("Logged out successfully");
+      
+      // Trigger auth status refresh in all components
+      trigger_auth_status_refresh();
+      
+      // Refresh the page to update authentication state
+      router.refresh();
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Logout failed. Please try again.";
+      toast.error(errorMessage);
+    } finally {
+      setIsLoggingOut(false);
+    }
+  };
+
+  // Build menu items with default items and custom items
+  const menuItems = useMemo(() => {
+    const items: ProfilePicMenuMenuItem[] = [];
+
+    // Add default info items (only if authenticated)
+    if (authStatus.authenticated) {
+      // User name (info, order: 1)
+      if (authStatus.name) {
+        items.push({
+          type: "info",
+          value: authStatus.name,
+          order: 1,
+          id: "default_name",
+        });
+      }
+
+      // Email address (info, order: 2)
+      if (authStatus.email) {
+        items.push({
+          type: "info",
+          value: authStatus.email,
+          order: 2,
+          id: "default_email",
+        });
+      }
+
+      // Separator (order: 1)
+      items.push({
+        type: "separator",
+        order: 1,
+        id: "default_separator",
+      });
+
+      // Settings (link, order: 1)
+      items.push({
+        type: "link",
+        label: "Settings",
+        href: settings_path,
+        order: 1,
+        id: "default_settings",
+      });
+
+      // Logout (link, order: 2)
+      items.push({
+        type: "link",
+        label: "Logout",
+        href: logout_path,
+        order: 2,
+        id: "default_logout",
+      });
+    }
+
+    // Add custom menu items
+    items.push(...custom_menu_items);
+
+    // Sort items by type group and order
+    // Order: info items first, then separators, then links
+    items.sort((a, b) => {
+      // Define type priority: info = 0, separator = 1, link = 2
+      const typePriority = { info: 0, separator: 1, link: 2 };
+      const aPriority = typePriority[a.type];
+      const bPriority = typePriority[b.type];
+
+      if (aPriority !== bPriority) {
+        return aPriority - bPriority;
+      }
+
+      // Within same type, sort by order
+      return a.order - b.order;
+    });
+
+    return items;
+  }, [authStatus.authenticated, authStatus.name, authStatus.email, settings_path, logout_path, custom_menu_items]);
+
+  // Avatar size classes
+  const avatarSizeClasses = {
+    sm: "h-8 w-8",
+    default: "h-10 w-10",
+    lg: "h-12 w-12",
+  };
+
+  // Show loading state
+  if (authStatus.loading) {
+    return (
+      <div className={`cls_profile_pic_menu ${className || ""}`}>
+        <div className="h-10 w-10 rounded-full bg-slate-200 animate-pulse" />
+      </div>
+    );
+  }
+
+  // Not authenticated - show sign up/sign in buttons
+  if (!authStatus.authenticated) {
+    return (
+      <div className={`cls_profile_pic_menu flex items-center gap-2 ${className || ""}`}>
+        {show_single_button ? (
+          <Button asChild variant="default" size="sm">
+            <Link href={register_path} className="cls_profile_pic_menu_sign_up">
+              {sign_up_label}
+            </Link>
+          </Button>
+        ) : (
+          <>
+            <Button asChild variant="outline" size="sm">
+              <Link href={register_path} className="cls_profile_pic_menu_sign_up">
+                {sign_up_label}
+              </Link>
+            </Button>
+            <Button asChild variant="default" size="sm">
+              <Link href={login_path} className="cls_profile_pic_menu_sign_in">
+                {sign_in_label}
+              </Link>
+            </Button>
+          </>
+        )}
+      </div>
+    );
+  }
+
+  // Authenticated - show profile picture with dropdown menu
+  return (
+    <div className={`cls_profile_pic_menu ${className || ""}`}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            className="cls_profile_pic_menu_trigger focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary rounded-full"
+            aria-label="Profile menu"
+          >
+            <Avatar className={`cls_profile_pic_menu_avatar ${avatarSizeClasses[avatar_size]} cursor-pointer`}>
+              <AvatarImage
+                src={authStatus.profile_picture_url}
+                alt={authStatus.name ? `Profile picture of ${authStatus.name}` : "Profile picture"}
+                className="cls_profile_pic_menu_image"
+              />
+              <AvatarFallback className="cls_profile_pic_menu_fallback bg-slate-200 text-slate-600">
+                {getInitials()}
+              </AvatarFallback>
+            </Avatar>
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="cls_profile_pic_menu_dropdown w-56">
+          {menuItems.map((item) => {
+            if (item.type === "separator") {
+              return <DropdownMenuSeparator key={item.id} className="cls_profile_pic_menu_separator" />;
+            }
+
+            if (item.type === "info") {
+              return (
+                <div key={item.id} className="cls_profile_pic_menu_info">
+                  {item.value && (
+                    <div className="cls_profile_pic_menu_info_value px-2 py-1.5 text-sm text-foreground">
+                      {item.value}
+                    </div>
+                  )}
+                </div>
+              );
+            }
+
+            if (item.type === "link") {
+              // Special handling for logout
+              if (item.id === "default_logout") {
+                return (
+                  <DropdownMenuItem
+                    key={item.id}
+                    onClick={handleLogout}
+                    disabled={isLoggingOut}
+                    className="cls_profile_pic_menu_logout cursor-pointer text-destructive focus:text-destructive"
+                  >
+                    <LogOut className="mr-2 h-4 w-4" />
+                    {isLoggingOut ? "Logging out..." : item.label}
+                  </DropdownMenuItem>
+                );
+              }
+
+              // Special handling for settings
+              if (item.id === "default_settings") {
+                return (
+                  <DropdownMenuItem
+                    key={item.id}
+                    asChild
+                    className="cls_profile_pic_menu_settings cursor-pointer"
+                  >
+                    <Link href={item.href || settings_path}>
+                      <Settings className="mr-2 h-4 w-4" />
+                      {item.label}
+                    </Link>
+                  </DropdownMenuItem>
+                );
+              }
+
+              // Generic link handling
+              return (
+                <DropdownMenuItem
+                  key={item.id}
+                  asChild
+                  className="cls_profile_pic_menu_link cursor-pointer"
+                >
+                  <Link href={item.href || "#"}>
+                    {item.label}
+                  </Link>
+                </DropdownMenuItem>
+              );
+            }
+
+            return null;
+          })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
+

package/src/components/layouts/shared/components/profile_pic_menu_wrapper.tsx

@@ -0,0 +1,40 @@
+// file_description: server wrapper component that loads profile picture menu configuration and passes to client component
+// section: imports
+import { ProfilePicMenu } from "./profile_pic_menu";
+import { get_profile_pic_menu_config } from "@/lib/profile_pic_menu_config.server";
+
+// section: types
+export type ProfilePicMenuWrapperProps = {
+  className?: string;
+  avatar_size?: "default" | "sm" | "lg";
+};
+
+// section: component
+/**
+ * Server wrapper component that loads profile picture menu configuration from hazo_auth_config.ini
+ * and passes it to the client ProfilePicMenu component
+ * @param props - Component props including className and avatar_size
+ * @returns ProfilePicMenu component with loaded configuration
+ */
+export function ProfilePicMenuWrapper({
+  className,
+  avatar_size,
+}: ProfilePicMenuWrapperProps) {
+  const config = get_profile_pic_menu_config();
+
+  return (
+    <ProfilePicMenu
+      show_single_button={config.show_single_button}
+      sign_up_label={config.sign_up_label}
+      sign_in_label={config.sign_in_label}
+      register_path={config.register_path}
+      login_path={config.login_path}
+      settings_path={config.settings_path}
+      logout_path={config.logout_path}
+      custom_menu_items={config.custom_menu_items}
+      className={className}
+      avatar_size={avatar_size}
+    />
+  );
+}
+

package/src/components/layouts/shared/components/sidebar_layout_wrapper.tsx

@@ -17,11 +17,9 @@ import {
   SidebarTrigger,
   SidebarInset,
 } from "@/components/ui/sidebar";
-import { LogIn, UserPlus, BookOpen, ExternalLink, Database, KeyRound, MailCheck, User, LogOut, Key, Settings } from "lucide-react";
-import { use_auth_status, trigger_auth_status_refresh } from "@/components/layouts/shared/hooks/use_auth_status";
-import { LogoutButton } from "@/components/layouts/shared/components/logout_button";
-import { useRouter } from "next/navigation";
-import { toast } from "sonner";
+import { LogIn, UserPlus, BookOpen, ExternalLink, Database, KeyRound, MailCheck, Key, Settings } from "lucide-react";
+import { use_auth_status } from "@/components/layouts/shared/hooks/use_auth_status";
+import { ProfilePicMenu } from "@/components/layouts/shared/components/profile_pic_menu";
 
 // section: types
 type SidebarLayoutWrapperProps = {
@@ -31,36 +29,6 @@ type SidebarLayoutWrapperProps = {
 // section: component
 export function SidebarLayoutWrapper({ children }: SidebarLayoutWrapperProps) {
   const authStatus = use_auth_status();
-  const router = useRouter();
-
-  const handleLogout = async () => {
-    try {
-      const response = await fetch("/api/auth/logout", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-
-      const data = await response.json();
-
-      if (!response.ok || !data.success) {
-        throw new Error(data.error || "Logout failed");
-      }
-
-      toast.success("Logged out successfully");
-      
-      // Trigger auth status refresh in all components (navbar, sidebar, etc.)
-      trigger_auth_status_refresh();
-      
-      // Refresh the page to update authentication state (cookies are cleared server-side)
-      router.refresh();
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : "Logout failed. Please try again.";
-      toast.error(errorMessage);
-    }
-  };
 
   return (
     <SidebarProvider>
@@ -171,16 +139,6 @@ export function SidebarLayoutWrapper({ children }: SidebarLayoutWrapperProps) {
                       </Link>
                     </SidebarMenuButton>
                   </SidebarMenuItem>
-                  <SidebarMenuItem className="cls_sidebar_layout_logout_item">
-                    <SidebarMenuButton
-                      onClick={handleLogout}
-                      className="cls_sidebar_layout_logout_link flex items-center gap-2"
-                      aria-label="Logout"
-                    >
-                      <LogOut className="h-4 w-4" aria-hidden="true" />
-                      <span>Logout</span>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
                 </SidebarMenu>
               </SidebarGroup>
             )}
@@ -231,27 +189,7 @@ export function SidebarLayoutWrapper({ children }: SidebarLayoutWrapperProps) {
                 hazo reusable ui library workspace
               </h2>
             </div>
-            <div className="cls_sidebar_layout_auth_status flex items-center gap-3">
-              {authStatus.loading ? (
-                <span className="cls_sidebar_layout_auth_loading text-sm text-muted-foreground">
-                  Loading...
-                </span>
-              ) : authStatus.authenticated ? (
-                <>
-                  <div className="cls_sidebar_layout_user_info flex items-center gap-2">
-                    <User className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
-                    <span className="cls_sidebar_layout_user_name text-sm font-medium text-foreground">
-                      {authStatus.name || authStatus.email || "Logged in"}
-                    </span>
-                  </div>
-                  <LogoutButton size="sm" />
-                </>
-              ) : (
-                <span className="cls_sidebar_layout_not_logged_in text-sm text-muted-foreground">
-                  Not logged in
-                </span>
-              )}
-            </div>
+            <ProfilePicMenu className="cls_sidebar_layout_auth_status" avatar_size="sm" />
           </header>
           <main className="cls_sidebar_layout_main_content flex flex-1 items-center justify-center p-6">
             {children}

package/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,201 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

package/src/lib/profile_pic_menu_config.server.ts

@@ -0,0 +1,138 @@
+// file_description: server-only helper to read profile picture menu configuration from hazo_auth_config.ini
+// section: imports
+import { get_config_value, get_config_boolean, get_config_array } from "./config/config_loader.server";
+
+// section: types
+// Note: These types are also used in client components, but TypeScript types are erased at runtime
+// so importing from a server file is safe for type-only imports
+export type MenuItemType = "info" | "link" | "separator";
+
+export type ProfilePicMenuMenuItem = {
+  type: MenuItemType;
+  label?: string; // For info and link types
+  value?: string; // For info type (e.g., user name, email)
+  href?: string; // For link type
+  order: number; // Ordering within type group
+  id: string; // Unique identifier for the item
+};
+
+export type ProfilePicMenuConfig = {
+  show_single_button: boolean;
+  sign_up_label: string;
+  sign_in_label: string;
+  register_path: string;
+  login_path: string;
+  settings_path: string;
+  logout_path: string;
+  custom_menu_items: ProfilePicMenuMenuItem[];
+};
+
+// section: helpers
+/**
+ * Parses custom menu items from config string
+ * Format: "type:label:order" or "type:label:href:order" for links
+ * Example: "link:My Custom Link:/custom:3"
+ * @param items_string - Comma-separated string of menu items
+ * @returns Array of parsed menu items
+ */
+function parse_custom_menu_items(items_string: string[]): ProfilePicMenuMenuItem[] {
+  const items: ProfilePicMenuMenuItem[] = [];
+  
+  items_string.forEach((item_string, index) => {
+    const parts = item_string.split(":").map((p) => p.trim());
+    
+    if (parts.length < 3) {
+      return; // Invalid format, skip
+    }
+    
+    const type = parts[0] as MenuItemType;
+    if (type !== "info" && type !== "link" && type !== "separator") {
+      return; // Invalid type, skip
+    }
+    
+    if (type === "separator") {
+      const order = parseInt(parts[1] || "1", 10);
+      items.push({
+        type: "separator",
+        order: isNaN(order) ? 1 : order,
+        id: `custom_separator_${index}`,
+      });
+      return;
+    }
+    
+    if (type === "info") {
+      const label = parts[1] || "";
+      const value = parts[2] || "";
+      const order = parseInt(parts[3] || "1", 10);
+      
+      if (!label || !value) {
+        return; // Invalid format, skip
+      }
+      
+      items.push({
+        type: "info",
+        label,
+        value,
+        order: isNaN(order) ? 1 : order,
+        id: `custom_info_${index}`,
+      });
+      return;
+    }
+    
+    if (type === "link") {
+      const label = parts[1] || "";
+      const href = parts[2] || "";
+      const order = parseInt(parts[3] || "1", 10);
+      
+      if (!label || !href) {
+        return; // Invalid format, skip
+      }
+      
+      items.push({
+        type: "link",
+        label,
+        href,
+        order: isNaN(order) ? 1 : order,
+        id: `custom_link_${index}`,
+      });
+    }
+  });
+  
+  return items;
+}
+
+/**
+ * Reads profile picture menu configuration from hazo_auth_config.ini file
+ * Falls back to defaults if hazo_auth_config.ini is not found or section is missing
+ * @returns Profile picture menu configuration options
+ */
+export function get_profile_pic_menu_config(): ProfilePicMenuConfig {
+  const section = "hazo_auth__profile_pic_menu";
+
+  // Read button configuration
+  const show_single_button = get_config_boolean(section, "show_single_button", false);
+  const sign_up_label = get_config_value(section, "sign_up_label", "Sign Up");
+  const sign_in_label = get_config_value(section, "sign_in_label", "Sign In");
+  const register_path = get_config_value(section, "register_path", "/register");
+  const login_path = get_config_value(section, "login_path", "/login");
+
+  // Read menu paths
+  const settings_path = get_config_value(section, "settings_path", "/my_settings");
+  const logout_path = get_config_value(section, "logout_path", "/api/auth/logout");
+
+  // Read custom menu items
+  const custom_items_string = get_config_array(section, "custom_menu_items", []);
+  const custom_menu_items = parse_custom_menu_items(custom_items_string);
+
+  return {
+    show_single_button,
+    sign_up_label,
+    sign_in_label,
+    register_path,
+    login_path,
+    settings_path,
+    logout_path,
+    custom_menu_items,
+  };
+}
+