fixed some bugs

components/layout/ui/ActionButtons.tsx

@@ -9,11 +9,7 @@ import { useCart, useFavorites, useOrders, useCartCount } from "@/lib/hooks";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useTranslations } from "next-intl";
 import { useLogout } from "@/lib/hooks/useAuth";
-import {
-  CartIcon,
-  FavoriteIcon,
-  OrderIcon,
-} from "@/components/icons";
+import { CartIcon, FavoriteIcon, OrderIcon } from "@/components/icons";
 
 interface ActionButtonsProps {
   isAuthenticated: boolean;
@@ -44,27 +40,24 @@ export default function ActionButtons({
   const { data: favoritesData, isLoading: favoritesLoading } = useFavorites();
   const { data: ordersData, isLoading: ordersLoading } = useOrders();
 
-  // Calculate cart count from cart items array
-const cartCount = useCartCount()
+  const cartCount = useCartCount();
 
-  // 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 = () => {
+  const handleLogout = () => {
     logout(undefined, {
       onSuccess: () => {
         router.push(`/${locale}`);
-        router.refresh(); 
-      }
+        router.refresh();
+      },
     });
   };
 
@@ -100,50 +93,11 @@ const cartCount = useCartCount()
       cartCount,
       cartLoading,
       t,
-    ]
+    ],
   );
 
   return (
     <div className="hidden items-center gap-1 lg: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 cursor-pointer gap-0.5 h-auto px-2 py-2"
-            >
-              <ProfileIcon />
-              <span className="text-xs text-gray-700">{t("profile")}</span>
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={() => router.push(`/${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 cursor-pointer gap-0.5 h-auto px-2 py-2"
-          onClick={onAuthClick}
-        >
-          <ProfileIcon />
-          <span className="text-xs text-gray-700">{t("common.login")}</span>
-        </Button>
-      )} */}
-
-      {/* Other Action Buttons */}
       {buttons.map((button, index) => (
         <ActionButton key={index} {...button} />
       ))}
@@ -163,25 +117,28 @@ function ActionButton({
     <Button
       variant="ghost"
       size="sm"
-      className="relative flex-col gap-0.5 h-auto px-2 py-2"
+      className="relative flex-col gap-1 h-auto px-3 py-2.5  hover:bg-gray-100 transition-all duration-200 group"
       onClick={onClick}
     >
       <div className="relative">
-        {icon}
+        <div className="transition-transform duration-200 group-hover:scale-110">
+          {icon}
+        </div>
         {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]"
-          >
+          <Badge className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px] font-normal bg-gray-900 hover:bg-gray-900 text-white border border-white shadow-sm">
             {isLoading ? (
-              <Skeleton className="h-3 w-3 rounded-full" />
+              <Skeleton className="h-3 w-3 " />
+            ) : badgeCount > 99 ? (
+              "99+"
             ) : (
               badgeCount
             )}
           </Badge>
         )}
       </div>
-      <span className="text-xs text-gray-700">{label}</span>
+      <span className="text-xs  text-gray-700 group-hover:text-gray-900 transition-colors">
+        {label}
+      </span>
     </Button>
   );