From 6713ce29fc29ebd703a287a985bd8ee9f76179d6 Mon Sep 17 00:00:00 2001
From: myusername <sarthaksam003@gmail.com>
Date: Thu, 21 May 2026 16:00:12 +0530
Subject: [PATCH] feat: Created BottomNavItem and BottomNav composites for
 mobile view.Fixed padding on the reportcard buttons

---
 src/layouts/AdminLayout.tsx                   | 163 +++++++++---------
 .../BottomNav/BottomNav.stories.tsx           | 147 ++++++++++++++++
 src/shared/composites/BottomNav/BottomNav.tsx |  52 ++++++
 src/shared/composites/BottomNav/index.ts      |   0
 .../BottomNavItem/BottomNavItem.stories.tsx   |  89 ++++++++++
 .../BottomNavItem/BottomNavItem.tsx           | 106 ++++++++++++
 src/shared/composites/BottomNavItem/index.ts  |   3 +
 src/shared/composites/ListCard/ListCard.tsx   |  54 +++---
 .../composites/ReportCard/ReportCard.tsx      |   2 +-
 9 files changed, 498 insertions(+), 118 deletions(-)
 create mode 100644 src/shared/composites/BottomNav/BottomNav.stories.tsx
 create mode 100644 src/shared/composites/BottomNav/BottomNav.tsx
 create mode 100644 src/shared/composites/BottomNav/index.ts
 create mode 100644 src/shared/composites/BottomNavItem/BottomNavItem.stories.tsx
 create mode 100644 src/shared/composites/BottomNavItem/BottomNavItem.tsx
 create mode 100644 src/shared/composites/BottomNavItem/index.ts

diff --git a/src/layouts/AdminLayout.tsx b/src/layouts/AdminLayout.tsx
index dedcbab..914cbc6 100644
--- a/src/layouts/AdminLayout.tsx
+++ b/src/layouts/AdminLayout.tsx
@@ -18,123 +18,102 @@ import {
   UsersIcon,
 } from '@heroicons/react/24/outline'
 import { Skeleton } from '@/shared/primitives/Skeleton'
+import BottomNav from '@/shared/composites/BottomNav/BottomNav'
 
-const AdminLayout = () => {
-  const [collapsed, setCollapsed] = useState(false)
-  const [activeItem, setActiveItem] = useState('Queue')
-  const [loading, setLoading] = useState(true)
+const navItems = [
+  {
+    label: 'Queue',
 
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setLoading(false)
-    }, 5000)
+    route: '/queue',
 
-    return () => {
-      clearTimeout(timer)
-    }
-  }, [])
+    icon: <QueueListIcon className="size-4" />,
 
-  return (
-    <div className="bg-bg-primary text-text-primary min-h-screen">
-      <ToastProvider />
+    badge: 3,
 
-      <aside
-        className={`fixed top-0 left-0 z-30 h-screen transition-all duration-300 ${
-          collapsed ? 'w-[72px]' : 'w-64'
-        } `}
-      >
-        <SidebarNav
-          collapsed={collapsed}
-          onToggle={() => {
-            setCollapsed(!collapsed)
-          }}
-          items={[
-            {
-              label: 'Queue',
+    badgeVariant: 'danger' as const,
+  },
 
-              icon: <QueueListIcon className="size-4" />,
+  {
+    label: 'Resolved',
 
-              badge: 3,
+    route: '/resolved',
 
-              badgeVariant: 'danger',
+    icon: <CheckIcon className="size-4" />,
 
-              isActive: activeItem === 'Queue',
+    badge: 12,
 
-              onClick: () => {
-                setActiveItem('Queue')
+    badgeVariant: 'info' as const,
+  },
 
-                console.log('Queue clicked')
-              },
-            },
-
-            {
-              label: 'Resolved',
-
-              icon: <CheckIcon className="size-4" />,
+  {
+    label: 'Escalated',
 
-              badge: 12,
+    route: '/escalated',
 
-              badgeVariant: 'info',
+    icon: <ExclamationTriangleIcon className="size-4" />,
 
-              isActive: activeItem === 'Resolved',
+    badge: 1,
 
-              onClick: () => {
-                setActiveItem('Resolved')
+    badgeVariant: 'danger' as const,
+  },
 
-                console.log('Resolved clicked')
-              },
-            },
-
-            {
-              label: 'Escalated',
+  {
+    label: 'Users',
 
-              icon: <ExclamationTriangleIcon className="size-4" />,
+    route: '/users',
 
-              badge: 1,
+    icon: <UsersIcon className="size-4" />,
+  },
 
-              badgeVariant: 'danger',
+  {
+    label: 'Analytics',
 
-              isActive: activeItem === 'Escalated',
+    route: '/analytics',
 
-              onClick: () => {
-                setActiveItem('Escalated')
+    icon: <PresentationChartLineIcon className="size-4" />,
+  },
+]
 
-                console.log('Escalated clicked')
-              },
-            },
-
-            {
-              label: 'Users',
-
-              icon: <UsersIcon className="size-4" />,
-
-              isActive: activeItem === 'Users',
-
-              onClick: () => {
-                setActiveItem('Users')
+const AdminLayout = () => {
+  const [collapsed, setCollapsed] = useState(false)
+  const [activeRoute, setActiveRoute] = useState('/queue')
+  const [loading, setLoading] = useState(true)
 
-                console.log('Users clicked')
-              },
-            },
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setLoading(false)
+    }, 5000)
 
-            {
-              label: 'Analytics',
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [])
 
-              icon: <PresentationChartLineIcon className="size-4" />,
+  return (
+    <div className="bg-bg-primary text-text-primary min-h-screen">
+      <ToastProvider />
 
-              isActive: activeItem === 'Analytics',
+      <aside
+        className={`fixed top-0 left-0 z-30 hidden h-screen transition-all duration-300 md:block ${collapsed ? 'w-[72px]' : 'w-64'} `}
+      >
+        <SidebarNav
+          collapsed={collapsed}
+          onToggle={() => {
+            setCollapsed(!collapsed)
+          }}
+          items={navItems.map((item) => ({
+            ...item,
 
-              onClick: () => {
-                setActiveItem('Analytics')
+            isActive: activeRoute === item.label,
 
-                console.log('Analytics clicked')
-              },
+            onClick: () => {
+              setActiveRoute(item.label)
             },
-          ]}
+          }))}
         />
       </aside>
 
-      <div className={`transition-all duration-300 ${collapsed ? 'ml-[72px]' : 'ml-64'} `}>
+      <div className={`transition-all duration-300 ${collapsed ? 'md:ml-[72px]' : 'md:ml-64'} `}>
         <Topbar
           title="Moderation Queue"
           showSearch
@@ -148,10 +127,22 @@ const AdminLayout = () => {
           }
         />
 
-        <main className="p-6">
+        <main className="p-6 pb-24 md:pb-6">
           <Outlet />
         </main>
       </div>
+      <BottomNav
+        items={navItems}
+        activeRoute={activeRoute}
+        onNavigate={(route) => {
+          setActiveRoute(route)
+
+          window.scrollTo({
+            top: 0,
+            behavior: 'smooth',
+          })
+        }}
+      />
     </div>
   )
 }
diff --git a/src/shared/composites/BottomNav/BottomNav.stories.tsx b/src/shared/composites/BottomNav/BottomNav.stories.tsx
new file mode 100644
index 0000000..1204db6
--- /dev/null
+++ b/src/shared/composites/BottomNav/BottomNav.stories.tsx
@@ -0,0 +1,147 @@
+import { useState } from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import {
+  QueueListIcon,
+  CheckIcon,
+  ExclamationTriangleIcon,
+  UsersIcon,
+  PresentationChartLineIcon,
+} from '@heroicons/react/24/outline'
+
+import { BottomNav } from './BottomNav'
+
+const items = [
+  {
+    label: 'Queue',
+
+    route: '/queue',
+
+    icon: <QueueListIcon className="size-5" />,
+
+    badge: 3,
+
+    badgeVariant: 'danger' as const,
+  },
+
+  {
+    label: 'Resolved',
+
+    route: '/resolved',
+
+    icon: <CheckIcon className="size-5" />,
+
+    badge: 12,
+
+    badgeVariant: 'info' as const,
+  },
+
+  {
+    label: 'Escalated',
+
+    route: '/escalated',
+
+    icon: <ExclamationTriangleIcon className="size-5" />,
+
+    badge: 1,
+
+    badgeVariant: 'danger' as const,
+  },
+
+  {
+    label: 'Users',
+
+    route: '/users',
+
+    icon: <UsersIcon className="size-5" />,
+  },
+
+  {
+    label: 'Analytics',
+
+    route: '/analytics',
+
+    icon: <PresentationChartLineIcon className="size-5" />,
+  },
+]
+
+const meta = {
+  title: 'Shared/Composites/BottomNav',
+
+  component: BottomNav,
+
+  tags: ['autodocs'],
+
+  parameters: {
+    layout: 'fullscreen',
+
+    viewport: {
+      defaultViewport: 'mobile1',
+    },
+  },
+
+  decorators: [
+    (Story) => (
+      <div className="bg-bg-primary min-h-screen">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof BottomNav>
+
+export default meta
+
+type Story = StoryObj
+
+export const Default: Story = {
+  render: () => (
+    <BottomNav
+      items={items}
+      activeRoute="/queue"
+      onNavigate={(route) => {
+        console.log(route)
+      }}
+    />
+  ),
+}
+
+export const ThirdItemActive: Story = {
+  render: () => (
+    <BottomNav
+      items={items}
+      activeRoute="/escalated"
+      onNavigate={(route) => {
+        console.log(route)
+      }}
+    />
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [activeRoute, setActiveRoute] = useState('/queue')
+
+    return (
+      <BottomNav
+        items={items}
+        activeRoute={activeRoute}
+        onNavigate={(route) => {
+          setActiveRoute(route)
+        }}
+      />
+    )
+  },
+}
+
+export const AccessibilityPreview: Story = {
+  render: () => (
+    <BottomNav
+      items={items}
+      activeRoute="/queue"
+      onNavigate={(route) => {
+        console.log(route)
+      }}
+    />
+  ),
+}
diff --git a/src/shared/composites/BottomNav/BottomNav.tsx b/src/shared/composites/BottomNav/BottomNav.tsx
new file mode 100644
index 0000000..9a7b29f
--- /dev/null
+++ b/src/shared/composites/BottomNav/BottomNav.tsx
@@ -0,0 +1,52 @@
+import React from 'react'
+
+import BottomNavItem from '../BottomNavItem'
+
+export interface BottomNavItemConfig {
+  label: string
+
+  route: string
+
+  icon: React.ReactNode
+
+  badge?: number
+
+  badgeVariant?: 'danger' | 'info'
+}
+
+export interface BottomNavProps {
+  items: BottomNavItemConfig[]
+
+  activeRoute: string
+
+  onNavigate: (route: string) => void
+
+  className?: string
+}
+
+export function BottomNav({ items, activeRoute, onNavigate, className = '' }: BottomNavProps) {
+  return (
+    <nav
+      aria-label="Mobile navigation"
+      className={`bg-bg-primary border-border-tertiary fixed right-0 bottom-0 left-0 z-40 border-t px-2 py-2 pb-[calc(env(safe-area-inset-bottom)+0.5rem)] md:hidden ${className} `}
+    >
+      <div className="flex items-center justify-between gap-1">
+        {items.map((item) => (
+          <BottomNavItem
+            key={item.route}
+            label={item.label}
+            icon={item.icon}
+            badge={item.badge}
+            badgeVariant={item.badgeVariant}
+            isActive={activeRoute === item.route}
+            onClick={() => {
+              onNavigate(item.route)
+            }}
+          />
+        ))}
+      </div>
+    </nav>
+  )
+}
+
+export default BottomNav
diff --git a/src/shared/composites/BottomNav/index.ts b/src/shared/composites/BottomNav/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/shared/composites/BottomNavItem/BottomNavItem.stories.tsx b/src/shared/composites/BottomNavItem/BottomNavItem.stories.tsx
new file mode 100644
index 0000000..7f0b8ba
--- /dev/null
+++ b/src/shared/composites/BottomNavItem/BottomNavItem.stories.tsx
@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { QueueListIcon, CheckIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline'
+
+import { BottomNavItem } from './BottomNavItem'
+
+const meta = {
+  title: 'Shared/Composites/BottomNavItem',
+
+  component: BottomNavItem,
+
+  tags: ['autodocs'],
+
+  parameters: {
+    layout: 'centered',
+
+    viewport: {
+      defaultViewport: 'mobile1',
+    },
+  },
+
+  decorators: [
+    (Story) => (
+      <div className="bg-bg-primary flex items-end justify-center p-6">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof BottomNavItem>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    label: 'Queue',
+
+    icon: <QueueListIcon className="size-5" />,
+  },
+}
+
+export const Active: Story = {
+  args: {
+    label: 'Queue',
+
+    isActive: true,
+
+    icon: <QueueListIcon className="size-5" />,
+  },
+}
+
+export const DangerBadge: Story = {
+  args: {
+    label: 'Escalated',
+
+    badge: 3,
+
+    badgeVariant: 'danger',
+
+    icon: <ExclamationTriangleIcon className="size-5" />,
+  },
+}
+
+export const InfoBadge: Story = {
+  args: {
+    label: 'Resolved',
+
+    badge: 12,
+
+    badgeVariant: 'info',
+
+    icon: <CheckIcon className="size-5" />,
+  },
+}
+
+export const AccessibilityPreview: Story = {
+  args: {
+    label: 'Queue',
+
+    badge: 3,
+
+    badgeVariant: 'danger',
+
+    isActive: true,
+
+    icon: <QueueListIcon className="size-5" />,
+  },
+}
diff --git a/src/shared/composites/BottomNavItem/BottomNavItem.tsx b/src/shared/composites/BottomNavItem/BottomNavItem.tsx
new file mode 100644
index 0000000..a42fa15
--- /dev/null
+++ b/src/shared/composites/BottomNavItem/BottomNavItem.tsx
@@ -0,0 +1,106 @@
+import React from 'react'
+
+import { cva } from 'class-variance-authority'
+
+import { Badge } from '@/shared/primitives/Badge'
+
+const bottomNavItem = cva(
+  `
+    relative
+    flex
+    flex-1
+    flex-col
+    items-center
+    justify-center
+    gap-1
+    rounded-lg
+    px-2
+    py-2
+    transition-colors
+    duration-150
+    select-none
+    focus-visible:outline-none
+    focus-visible:ring-2
+    focus-visible:ring-border-info
+    active:scale-[0.98]
+  `,
+  {
+    variants: {
+      isActive: {
+        true: `
+          text-text-primary
+          font-medium
+        `,
+
+        false: `
+          text-text-tertiary
+          hover:text-text-primary
+        `,
+      },
+    },
+
+    defaultVariants: {
+      isActive: false,
+    },
+  }
+)
+
+export interface BottomNavItemProps {
+  label: string
+
+  icon: React.ReactNode
+
+  isActive?: boolean
+
+  badge?: number
+
+  badgeVariant?: 'danger' | 'info'
+
+  onClick?: () => void
+
+  className?: string
+}
+
+export function BottomNavItem({
+  label,
+  icon,
+  isActive = false,
+  badge,
+  badgeVariant = 'info',
+  onClick,
+  className,
+}: BottomNavItemProps) {
+  return (
+    <button
+      type="button"
+      aria-current={isActive ? 'page' : undefined}
+      aria-label={label}
+      onClick={onClick}
+      className={bottomNavItem({
+        isActive,
+        className,
+      })}
+    >
+      {/* Icon + Badge */}
+      <div className="relative flex items-center justify-center">
+        <span className="shrink-0">{icon}</span>
+
+        {badge !== undefined && badge > 0 && (
+          <Badge
+            size="xs"
+            notification
+            variant={badgeVariant === 'danger' ? 'danger' : 'info'}
+            className="absolute -top-2 -right-3"
+          >
+            {badge}
+          </Badge>
+        )}
+      </div>
+
+      {/* Label */}
+      <span className="max-w-full truncate text-[11px] leading-none">{label}</span>
+    </button>
+  )
+}
+
+export default BottomNavItem
diff --git a/src/shared/composites/BottomNavItem/index.ts b/src/shared/composites/BottomNavItem/index.ts
new file mode 100644
index 0000000..b17d213
--- /dev/null
+++ b/src/shared/composites/BottomNavItem/index.ts
@@ -0,0 +1,3 @@
+export * from './BottomNavItem'
+
+export { default } from './BottomNavItem'
diff --git a/src/shared/composites/ListCard/ListCard.tsx b/src/shared/composites/ListCard/ListCard.tsx
index 2186009..651aeef 100644
--- a/src/shared/composites/ListCard/ListCard.tsx
+++ b/src/shared/composites/ListCard/ListCard.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 
 import { BaseCard } from '@/shared/primitives/BaseCard'
-// import { Button } from '@/stories/Button'
 
 export interface ListCardProps {
   children: React.ReactNode
@@ -34,40 +33,33 @@ export function ListCard({
 
   onToggle,
 
-  className = 'cursor-pointer',
-}: ListCardProps) {
-  const handleToggle = () => {
-    if (!isClickable || !onToggle) {
-      return
-    }
-
-    onToggle()
-  }
+  className = '',
 
+  testId,
+}: ListCardProps) {
   return (
-    <BaseCard className={className}>
-      <div
-        role={isClickable ? 'button' : undefined}
-        tabIndex={isClickable ? 0 : undefined}
-        onClick={isClickable ? handleToggle : undefined}
-        onKeyDown={(e) => {
-          if (isClickable && (e.key === 'Enter' || e.key === ' ')) {
-            e.preventDefault()
-
-            handleToggle()
-          }
-        }}
-        className="outline-none"
+    <BaseCard className={className} testId={testId}>
+      {/* Header Trigger */}
+      <button
+        type="button"
+        aria-expanded={isExpanded}
+        onClick={isClickable ? onToggle : undefined}
+        disabled={!isClickable}
+        className="focus-visible:ring-border-primary w-full cursor-pointer text-left transition-colors outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-default"
       >
         <div className="p-4">{header}</div>
-
-        {isExpanded && (
-          <>
-            <div className="border-border-tertiary border-t p-4">{children}</div>
-            <div className="flex gap-3">{footer}</div>
-          </>
-        )}
-      </div>
+      </button>
+
+      {/* Expanded Content */}
+      {isExpanded && (
+        <>
+          <div className="border-border-tertiary border-t p-4">{children}</div>
+
+          {footer && (
+            <div className="border-border-tertiary flex flex-wrap gap-2 border-t p-4">{footer}</div>
+          )}
+        </>
+      )}
     </BaseCard>
   )
 }
diff --git a/src/shared/composites/ReportCard/ReportCard.tsx b/src/shared/composites/ReportCard/ReportCard.tsx
index b0f0e7f..4290065 100644
--- a/src/shared/composites/ReportCard/ReportCard.tsx
+++ b/src/shared/composites/ReportCard/ReportCard.tsx
@@ -267,7 +267,7 @@ export function ReportCard({
               <LockClosedIcon className="h-4 w-4" /> Being reviewed by {claimedBy}
             </div>
           ) : (
-            <div className="flex flex-wrap gap-1 py-2 sm:gap-3 sm:px-4">
+            <div className="flex flex-wrap gap-1 py-2 sm:gap-3">
               {availableActions.map((action) => (
                 <Button
                   key={action}