Friends Management

package.json

@@ -37,6 +37,7 @@
     "@mantine/core": "^7.14.1",
     "@mantine/hooks": "^7.14.1",
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.3.1",
     "@radix-ui/react-context-menu": "^2.2.1",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -50,10 +51,12 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-toast": "^1.2.13",
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tanstack/react-router": "^1.46.4",
+    "@tanstack/react-table": "^8.21.3",
     "@uidotdev/usehooks": "^2.4.1",
     "axios": "^1.7.7",
     "axios-retry": "^4.5.0",
@@ -67,6 +70,7 @@
     "i18next": "^24.1.2",
     "immer": "^10.1.1",
     "just-random": "^3.2.0",
+    "just-split": "^3.2.0",
     "lucide-react": "^0.372.0",
     "modern-screenshot": "^4.6.0",
     "next-themes": "^0.3.0",

src/app.tsx

@@ -24,7 +24,8 @@ import { LoadGroups } from './bootstrap/components/load-groups'
 import { LoadSettings } from './bootstrap/components/load-settings'
 import { LoadTags } from './bootstrap/components/load-tags'
 
-import { Toaster } from './components/ui/sonner'
+import { SonnerToaster } from './components/ui/sonner'
+import { Toaster } from './components/ui/toaster'
 import { ThemeProvider } from './components/theme-provider'
 
 import 'dayjs/locale/es'
@@ -65,7 +66,8 @@ root.render(
         defaultNotFoundComponent={IndexComponent}
       />
 
-      <Toaster position="bottom-center" />
+      <SonnerToaster position="bottom-center" />
+      <Toaster />
     </ThemeProvider>
   </MantineProvider>
 )

src/bootstrap/components/load-friends.tsx

@@ -1,9 +1,20 @@
 import { useEffect } from 'react'
 
 import { usePartyFriendsForm } from '../../hooks/stw-operations/party'
+import { useFriendsManagementActions } from '../../hooks/management/friends'
+
+import { toast } from '../../lib/notifications'
 
 export function LoadFriends() {
   const { syncFriends } = usePartyFriendsForm()
+  const {
+    removeFriends,
+    syncBlocklist,
+    syncIncoming,
+    syncOutgoing,
+    syncSummary,
+    updateLoading,
+  } = useFriendsManagementActions()
 
   useEffect(() => {
     const listener = window.electronAPI.notificationLoadFriends(
@@ -19,5 +30,99 @@ export function LoadFriends() {
     }
   }, [])
 
+  useEffect(() => {
+    const summaryListener = window.electronAPI.notificationFriendsSummary(
+      async (accountId, summary) => {
+        updateLoading(false)
+        syncSummary(accountId, summary)
+      }
+    )
+    const blockFriendsListener =
+      window.electronAPI.notificationBlockFriends(
+        async (account, blocklist, context) => {
+          if (context === undefined) {
+            removeFriends(
+              account.accountId,
+              blocklist.map((item) => item.accountId)
+            )
+          } else if (context === 'incoming') {
+            syncIncoming('remove', account.accountId, blocklist)
+          } else if (context === 'outgoing') {
+            syncOutgoing('remove', account.accountId, blocklist)
+          }
+
+          syncBlocklist('add', account.accountId, blocklist)
+
+          toast(`Total bloqueados: ${blocklist.length}`)
+        }
+      )
+    const unblockFriendsListener =
+      window.electronAPI.notificationUnblockFriends(
+        async (account, unblocklist) => {
+          syncBlocklist(
+            'remove',
+            account.accountId,
+            unblocklist === 'full' ? undefined : unblocklist
+          )
+
+          toast(
+            unblocklist === 'full'
+              ? 'Se desbloquearon a todos'
+              : `Total desbloqueados: ${unblocklist.length}`
+          )
+        }
+      )
+    const addFriendsListener = window.electronAPI.notificationAddFriends(
+      async (account, friends, context) => {
+        if (context === undefined) {
+          //
+        } else if (context === 'incoming') {
+          syncIncoming('remove', account.accountId, friends)
+        }
+
+        toast(`Total añadidos: ${friends.length}`)
+      }
+    )
+    const removeFriendsListener =
+      window.electronAPI.notificationRemoveFriends(
+        async (account, friends, context) => {
+          const isFull = friends === 'full'
+
+          if (context === undefined) {
+            removeFriends(
+              account.accountId,
+              isFull ? undefined : friends.map((item) => item.accountId)
+            )
+          } else if (context === 'incoming') {
+            syncIncoming(
+              'remove',
+              account.accountId,
+              isFull ? undefined : friends
+            )
+          } else if (context === 'outgoing') {
+            syncOutgoing(
+              'remove',
+              account.accountId,
+              isFull ? undefined : friends
+            )
+          }
+
+          toast(
+            isFull
+              ? 'Se eliminaron todos los amigos'
+              : `Total eliminados: ${friends.length}`
+          )
+        }
+      )
+
+    return () => {
+      summaryListener.removeListener()
+      blockFriendsListener.removeListener()
+      unblockFriendsListener.removeListener()
+      addFriendsListener.removeListener()
+      removeFriendsListener.removeListener()
+    }
+  }, [])
+
   return null
 }

src/components/menu/sidebar.tsx

@@ -270,6 +270,23 @@ export function SidebarMenu({
                       </Link>
                     </li>
                   )}
+                  {getMenuOptionVisibility('friendsManagement') && (
+                    <li className="item">
+                      <Link
+                        to="/account-management/friends-management"
+                        className={currentClassNameHover}
+                        activeProps={{
+                          className: cn(activeClassName),
+                        }}
+                        onClick={goToPage}
+                        onAuxClick={whatIsThis()}
+                      >
+                        {t(
+                          'account-management.options.friends-management'
+                        )}
+                      </Link>
+                    </li>
+                  )}
                   {getMenuOptionVisibility('redeemCodes') && (
                     <li className="item">
                       <Link

src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+import type { ComponentPropsWithoutRef, ElementRef } from 'react'
+
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { Check } from 'lucide-react'
+import { forwardRef } from 'react'
+
+import { cn } from '../../lib/utils'
+
+const Checkbox = forwardRef<
+  ElementRef<typeof CheckboxPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn('flex items-center justify-center text-current')}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }