In the navbar of my app (basic event app where users can add other users friends and create events) I have a inbox popover, essentially a button which displays the total number of notifications (friend requests and event invites)

I'm reworking my ui to add support for mobile, replicating the contents of the navbar to a shadcn sheet (hamburger nav)
currently this is the popover shown on desktop:

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline" className={`gap-2 pl-4 pr-4 h-10 rounded-full `}>
    <Inbox className="w-6 h-5" color="rgb(2,8,23)" />
                {messageText}
    </Button>
  </PopoverTrigger>
  <PopoverContent className="min-w-[300px]">
    <div className="flex flex-row items-center">
       <h2 className="text-sm font-semibold">Inbox</h2>
    </div>
    <Tabs defaultValue="messages">
      <TabsList className="flex ">
        <TabsTrigger value="messages" className="flex gap-2 w-full">
          Messages
          {notificationsCount > 0 &&
          <Badge variant="default" className="pl-2 pr-2">{messageCount}</Badge>}
        </TabsTrigger>
        <TabsTrigger value="requests" className="flex gap-2 w-full">
          Requests
          {friendRequestCount > 0 &&
          <Badge variant="secondary" className="pl-2 pr-2">{friendRequestCount}</Badge>}
        </TabsTrigger>
      </TabsList>

      <TabsContent value="messages">
        <Messages notifications={unreadNotifications} />
      </TabsContent>
      <TabsContent value="requests">
        <FriendRequests requests={friendRequests} />
      </TabsContent>
    </Tabs>
  </PopoverContent>
</Popover>

Ideally I want to use the same tabs component between the popover and the mobile sheet, however how do I then control the number of total notifications displayed for the popover ?