feat(profile): show which area a notification is for (chat / orders)

The bottom-nav profile badge sums unread chat + order updates, but the
profile page gave no breakdown. Wire useBadgeCounts into the mobile
account hub: the پیام‌ها (messages) menu item shows the chat unread count,
and the سفارش‌ها quick action shows the order-updates count. Adds a badge
slot to the menu item content.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

app/routes/profile._index.tsx

@@ -20,6 +20,7 @@ import {
 import { Link, useNavigate } from "@remix-run/react";
 import { useServiceGetProfile } from "~/utils/RequestHandler";
 import { useServiceGetWallet } from "~/requestHandler/use-wallet-hooks";
+import { useBadgeCounts } from "~/hooks/useBadgeCounts";
 import { Skeleton } from "~/components/ui/skeleton";
 import { useState } from "react";
 import { Button } from "~/components/ui/button";
@@ -35,6 +36,7 @@ interface MenuItemType {
   pageName: string;
   hasBorder?: boolean;
   image: React.ReactNode;
+  badge?: number | null;
 }
 // Guard: the account hub requires login (sub-pages are already protected via
 // validateTokens; this covers the /profile index itself).
@@ -56,6 +58,7 @@ export default function Profile() {
   const [logoutModalOpen, setLogoutModalOpen] = useState(false);
   const { data: profileData } = useServiceGetProfile();
   const { data: walletData } = useServiceGetWallet();
+  const { data: badgeCounts } = useBadgeCounts();
   const { data: followedSellers, isLoading: isFollowedSellersLoading } =
     useServiceGetFollowedSellers();
 
@@ -72,7 +75,7 @@ export default function Profile() {
       label: "سفارش‌ها",
       link: "/profile/orders",
       icon: <ShoppingBag size={22} />,
-      badge: null as number | null,
+      badge: (badgeCounts?.order_updates || null) as number | null,
     },
     {
       label: "نشان‌ها",
@@ -124,6 +127,7 @@ export default function Profile() {
       link: "/profile/threads",
       pageName: "messages",
       image: <MessageCircle size={20} />,
+      badge: badgeCounts?.chat || null,
     },
     {
       title: "کیف پول",
@@ -371,7 +375,14 @@ const MenuItemContent = ({ item }: { item: MenuItemType }) => {
         {item.image}
         <p className={"text-R12"}>{item.title}</p>
       </div>
-      <ChevronLeft className="size-4" />
+      <div className="flex items-center gap-2">
+        {item.badge ? (
+          <span className="min-w-[18px] h-[18px] px-1 rounded-full bg-RED text-white text-[10px] font-bold grid place-items-center">
+            {item.badge > 99 ? "99+" : item.badge}
+          </span>
+        ) : null}
+        <ChevronLeft className="size-4" />
+      </div>
     </div>
   );
 };