feat: #856 manage friends (#857)

* feat: #856 manage friends

* finish friends page

Author: marcelpanse

frontend/public/locales/de-DE/header.json

@@ -2,6 +2,7 @@
   "overview": "Übersicht",
   "collection": "Sammlung",
   "trade": "Tausch",
+  "friends": "Freunde",
   "scan": "Scannen",
   "decks": "Decks",
   "selectLanguage": "Sprache auswählen",

frontend/public/locales/en-US/header.json

@@ -2,6 +2,7 @@
   "overview": "Overview",
   "collection": "Collection",
   "trade": "Trade",
+  "friends": "Friends",
   "scan": "Scan",
   "decks": "Decks",
   "selectLanguage": "Select language",

frontend/public/locales/es-ES/header.json

@@ -2,6 +2,7 @@
   "overview": "Inicio",
   "collection": "Colección",
   "trade": "Intercambios",
+  "friends": "Amigos",
   "selectLanguage": "Seleccionar idioma",
   "community": "Comunidad ↗",
   "login": "Iniciar sesión",

frontend/public/locales/fr-FR/header.json

@@ -2,6 +2,7 @@
   "overview": "Vue d'ensemble",
   "collection": "Collection",
   "trade": "Échanges",
+  "friends": "Amis",
   "scan": "Scanneur",
   "decks": "Decks",
   "selectLanguage": "Sélectionner une langue",

frontend/public/locales/it-IT/header.json

@@ -2,6 +2,7 @@
   "overview": "Panoramica",
   "collection": "Collezione",
   "trade": "Scambio",
+  "friends": "Amici",
   "scan": "Scansiona",
   "selectLanguage": "Seleziona lingua",
   "community": "Community ↗",

frontend/public/locales/pt-BR/header.json

@@ -2,6 +2,7 @@
   "overview": "Visão Geral",
   "collection": "Coleção",
   "trade": "Troca",
+  "friends": "Amigos",
   "selectLanguage": "Selecionar idioma",
   "community": "Comunidade ↗",
   "login": "Entrar",

frontend/src/App.tsx

@@ -25,6 +25,8 @@ const Scan = lazy(() => import('./pages/scan/Scan.tsx'))
 const EditProfile = lazy(() => import('./components/EditProfile.tsx'))
 const CardDetail = lazy(() => import('./pages/collection/CardDetail.tsx'))
 
+const Friends = lazy(() => import('./pages/friends/Friends.tsx'))
+
 const TradeWithRedirect = () => {
   const { friendId } = useParams()
   return <Navigate to={`/trade/${friendId}`} replace />
@@ -90,6 +92,7 @@ function App() {
         { path: '/decks/:id', element: <DeckView /> },
         { path: '/scan', element: <Scan /> },
         { path: '/trade/*', element: <Trade /> },
+        { path: '/friends', element: <Friends /> },
       ],
     },
   ])

frontend/src/components/HamburgerMenu.tsx

@@ -21,6 +21,7 @@ const menuItems: MenuItem[] = [
   { title: 'collection', href: '/collection' },
   { title: 'decks', href: '/decks' },
   { title: 'trade', href: '/trade' },
+  { title: 'friends', href: '/friends' },
   { title: 'scan', href: '/scan' },
   { title: 'blog', href: 'https://blog.tcgpocketcollectiontracker.com' },
   { title: 'community', href: 'https://community.tcgpocketcollectiontracker.com' },
@@ -40,7 +41,7 @@ export default function HamburgerMenu() {
   return (
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>
-        <Button variant="ghost" size="icon" className="md:hidden">
+        <Button variant="ghost" size="icon" className="lg:hidden">
           <Menu className="h-5 w-5" />
           <span className="sr-only">{t('toggle')}</span>
         </Button>

frontend/src/components/Header.tsx

@@ -21,6 +21,7 @@ import Export from '@/pages/export/Export'
 import Import from '@/pages/import/Import'
 import { useProfileDialog } from '@/services/account/useAccount'
 import { useLoginDialog, useLogout, useUser } from '@/services/auth/useAuth'
+import { usePendingRequests } from '@/services/friends/useFriends'
 import { useActionableTradeCount } from '@/services/trade/useTrade.ts'
 import { Badge } from './ui/badge'
 
@@ -29,6 +30,8 @@ export function Header() {
   const { t, i18n } = useTranslation('header')
   const { data: user } = useUser()
   const { data: actionableTradeCount } = useActionableTradeCount()
+  const { data: pendingRequests = [] } = usePendingRequests()
+  const pendingFriendCount = pendingRequests.length
   const logoutMutation = useLogout()
 
   const { isLoginDialogOpen, setIsLoginDialogOpen } = useLoginDialog()
@@ -62,36 +65,36 @@ export function Header() {
         <NavigationMenu className="max-w-full justify-start">
           <NavigationMenuList>
             {/* dynamic item for mobile that switches between overview and collection depending on the current page */}
-            <NavigationMenuLink asChild className="block sm:hidden">
+            <NavigationMenuLink asChild className="block md:hidden">
               <Link to={isOverviewPage ? '/collection' : '/'}>
                 <Button className="px-2 sm:px-4" variant="ghost">
                   {isOverviewPage ? t('collection') : t('overview')}
                 </Button>
               </Link>
             </NavigationMenuLink>
 
-            <NavigationMenuLink asChild className="hidden sm:block">
+            <NavigationMenuLink asChild className="hidden md:block">
               <Link to="/">
                 <Button className="px-2 sm:px-4" variant="ghost">
                   {t('overview')}
                 </Button>
               </Link>
             </NavigationMenuLink>
-            <NavigationMenuLink asChild className="hidden sm:block">
+            <NavigationMenuLink asChild className="hidden md:block">
               <Link to="/collection">
                 <Button className="px-2 sm:px-4" variant="ghost">
                   {t('collection')}
                 </Button>
               </Link>
             </NavigationMenuLink>
-            <NavigationMenuLink asChild className="hidden sm:block">
+            <NavigationMenuLink asChild className="hidden md:block">
               <Link to="/decks">
                 <Button className="px-2 sm:px-4" variant="ghost">
                   {t('Decks')}
                 </Button>
               </Link>
             </NavigationMenuLink>
-            <NavigationMenuLink asChild className={`${actionableTradeCount ? 'block' : 'hidden'} sm:block`}>
+            <NavigationMenuLink asChild className={`${actionableTradeCount ? 'block' : 'hidden'} md:block`}>
               <Link to="/trade">
                 <Button className="px-2 sm:px-4" variant="ghost">
                   {t('trade')}
@@ -104,22 +107,35 @@ export function Header() {
                 </Button>
               </Link>
             </NavigationMenuLink>
-            <NavigationMenuLink asChild className={`${actionableTradeCount ? 'hidden sm:block' : ''}`}>
+            <NavigationMenuLink asChild className={`${pendingFriendCount && !actionableTradeCount ? 'block' : 'hidden'} md:block`}>
+              <Link to="/friends">
+                <Button className="px-2 sm:px-4" variant="ghost">
+                  {t('friends')}
+                  <Badge
+                    className={`h-5 min-w-5 rounded-full font-mono tabular-nums -mt-2 ${pendingFriendCount ? 'flex' : 'hidden'} justify-center`}
+                    variant="destructive"
+                  >
+                    {pendingFriendCount}
+                  </Badge>
+                </Button>
+              </Link>
+            </NavigationMenuLink>
+            <NavigationMenuLink asChild className={`${actionableTradeCount || pendingFriendCount ? 'hidden sm:block' : ''}`}>
               <Link to="/scan">
                 <Button className="px-2 sm:px-4" variant="ghost">
                   {t('scan')}
                 </Button>
               </Link>
             </NavigationMenuLink>
             <NavigationMenuLink asChild className="hidden lg:block">
-              <Link to="https://blog.tcgpocketcollectiontracker.com" className="hidden md:block">
+              <Link to="https://blog.tcgpocketcollectiontracker.com" className="hidden lg:block">
                 <Button className="px-2 sm:px-4" variant="ghost">
                   {t('blog')}
                 </Button>
               </Link>
             </NavigationMenuLink>
             <NavigationMenuLink asChild className="hidden lg:block">
-              <Link to="https://community.tcgpocketcollectiontracker.com" className="hidden md:block">
+              <Link to="https://community.tcgpocketcollectiontracker.com" className="hidden lg:block">
                 <Button className="px-2 sm:px-4" variant="ghost">
                   {t('community')}
                 </Button>
@@ -158,6 +174,9 @@ export function Header() {
                   <DropdownMenuLabel>{t('myAccount')}</DropdownMenuLabel>
                   <DropdownMenuSeparator />
                   <DropdownMenuItem onClick={() => setIsProfileDialogOpen(true)}>{t('editProfile')}</DropdownMenuItem>
+                  <DropdownMenuItem asChild>
+                    <Link to="/friends">{t('friends')}</Link>
+                  </DropdownMenuItem>
                   <DropdownMenuSeparator />
                   <DropdownMenuItem onClick={() => setIsExportDialogOpen(true)}>{t('export')}</DropdownMenuItem>
                   <DropdownMenuItem onClick={() => setIsImportDialogOpen(true)}>{t('import')}</DropdownMenuItem>