added debounce to - + buttons

components/layout/ui/ActionButtons.tsx

@@ -1,75 +1,134 @@
-"use client"
+"use client";
 
-import type React from "react"
-import Link from "next/link"
-import { User, Truck, Heart, ShoppingCart } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { useCart, useFavorites, useOrders } from "@/lib/hooks"
-import { Skeleton } from "@/components/ui/skeleton"
+import { useMemo } from "react";
+import type React from "react";
+import Link from "next/link";
+import { User, Truck, Heart, ShoppingCart, LogOut } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useCart, useFavorites, useOrders } from "@/lib/hooks";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useTranslations } from "next-intl";
+import { useLogout } from "@/lib/hooks/useAuth";
 
 interface ActionButtonsProps {
-  isAuthenticated: boolean
-  onAuthClick: () => void
-  translations: {
-    profile: string
-    login: string
-    orders: string
-    favorites: string
-    cart: string
-  }
+  isAuthenticated: boolean;
+  onAuthClick: () => void;
+  isLoading?: boolean;
+  locale?: string;
 }
 
 interface ActionButtonData {
-  icon: React.ReactNode
-  label: string
-  href?: string
-  onClick?: () => void
-  badgeCount?: number
-  isLoading?: boolean
+  icon: React.ReactNode;
+  label: string;
+  href?: string;
+  onClick?: () => void;
+  badgeCount?: number;
+  isLoading?: boolean;
 }
 
-export default function ActionButtons({ isAuthenticated, onAuthClick, translations: t }: ActionButtonsProps) {
-  const { data: cartData, isLoading: cartLoading } = useCart()
-  const { data: favoritesData, isLoading: favoritesLoading } = useFavorites()
-  const { data: ordersData, isLoading: ordersLoading } = useOrders()
+export default function ActionButtons({ 
+  isAuthenticated, 
+  onAuthClick, 
+  isLoading: authLoading,
+  locale = "ru" 
+}: ActionButtonsProps) {
+  const t = useTranslations();
+  const { mutate: logout, isPending: isLoggingOut } = useLogout();
+  
+  const { data: cartData, isLoading: cartLoading } = useCart();
+  const { data: favoritesData, isLoading: favoritesLoading } = useFavorites();
+  const { data: ordersData, isLoading: ordersLoading } = useOrders();
 
-  const buttons: ActionButtonData[] = [
-    {
-      icon: <User className="h-5 w-5 text-gray-600" />,
-      label: isAuthenticated ? t.profile : t.login,
-      onClick: onAuthClick,
-    },
+  // Calculate cart count from cart items array
+  const cartCount = useMemo(() => {
+    if (!cartData?.data) return 0;
+    return cartData.data.length;
+  }, [cartData]);
+
+  // Calculate favorites count
+  const favoritesCount = useMemo(() => {
+    if (!favoritesData) return 0;
+    return Array.isArray(favoritesData) ? favoritesData.length : 0;
+  }, [favoritesData]);
+
+  // Calculate orders count
+  const ordersCount = useMemo(() => {
+    if (!ordersData) return 0;
+    return Array.isArray(ordersData) ? ordersData.length : 0;
+  }, [ordersData]);
+
+  const handleLogout = () => {
+    logout();
+  };
+
+  const buttons: ActionButtonData[] = useMemo(() => [
     {
       icon: <Truck className="h-5 w-5 text-gray-600" />,
-      label: t.orders,
+      label: t("common.orders"),
       href: "/orders",
-      badgeCount: ordersData?.length || 0,
+      badgeCount: ordersCount,
       isLoading: ordersLoading,
     },
     {
       icon: <Heart className="h-5 w-5 text-gray-600" />,
-      label: t.favorites,
+      label: t("common.favorites"),
       href: "/favorites",
-      badgeCount: favoritesData?.length || 0,
+      badgeCount: favoritesCount,
       isLoading: favoritesLoading,
     },
     {
       icon: <ShoppingCart className="h-5 w-5 text-gray-600" />,
-      label: t.cart,
+      label: t("common.cart"),
       href: "/cart",
-      badgeCount: cartData?.count || 0,
+      badgeCount: cartCount,
       isLoading: cartLoading,
     },
-  ]
+  ], [ordersCount, ordersLoading, favoritesCount, favoritesLoading, cartCount, cartLoading, t]);
 
   return (
     <div className="hidden items-center gap-1 md:flex">
+      {/* Profile/Login Button with Dropdown */}
+      {authLoading ? (
+        <div className="h-10 w-24 animate-pulse bg-gray-200 rounded" />
+      ) : isAuthenticated ? (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="flex-col gap-0.5 h-auto px-2 py-2">
+              <User className="h-5 w-5 text-gray-600" />
+              <span className="text-xs text-gray-700">{t("profile")}</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => (window.location.href = `/${locale}/me`)}>
+              <User className="mr-2 h-4 w-4" />
+              {t("profile")}
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={handleLogout} disabled={isLoggingOut}>
+              <LogOut className="mr-2 h-4 w-4" />
+              {isLoggingOut ? t("logging_out") : t("common.logout")}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : (
+        <Button variant="ghost" size="sm" className="flex-col gap-0.5 h-auto px-2 py-2" onClick={onAuthClick}>
+          <User className="h-5 w-5 text-gray-600" />
+          <span className="text-xs text-gray-700">{t("common.login")}</span>
+        </Button>
+      )}
+
+      {/* Other Action Buttons */}
       {buttons.map((button, index) => (
         <ActionButton key={index} {...button} />
       ))}
     </div>
-  )
+  );
 }
 
 function ActionButton({ icon, label, href, onClick, badgeCount, isLoading }: ActionButtonData) {
@@ -77,7 +136,7 @@ function ActionButton({ icon, label, href, onClick, badgeCount, isLoading }: Act
     <Button variant="ghost" size="sm" className="relative flex-col gap-0.5 h-auto px-2 py-2" onClick={onClick}>
       <div className="relative">
         {icon}
-        {badgeCount !== undefined && (
+        {badgeCount !== undefined && badgeCount > 0 && (
           <Badge
             variant="destructive"
             className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
@@ -88,11 +147,11 @@ function ActionButton({ icon, label, href, onClick, badgeCount, isLoading }: Act
       </div>
       <span className="text-xs text-gray-700">{label}</span>
     </Button>
-  )
+  );
 
   if (href) {
-    return <Link href={href}>{buttonContent}</Link>
+    return <Link href={href}>{buttonContent}</Link>;
   }
 
-  return buttonContent
-}
+  return buttonContent;
+}