@allbluecn/web-app 0.4.22 → 0.5.1

package/src/components/notifications/team-notifications.tsx

@@ -0,0 +1,343 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// Adapted from @hextaui/team-notifications (https://www.hextaui.com)
+import { useMemo, useState } from 'react'
+import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query'
+import { useNavigate } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import {
+  Bell,
+  Check,
+  CheckCheck,
+  CreditCard,
+  Megaphone,
+  MessageSquare,
+  MoreVertical,
+  ShieldCheck,
+  Trash2,
+  Users,
+  X,
+} from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import {
+  Empty,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@/components/ui/empty'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Separator } from '@/components/ui/separator'
+import { cn } from '@/lib/utils'
+import { useNotifications, NOTIFICATION_LIST_KEY, NOTIFICATION_ROOT_KEY } from '@/hooks/use-notifications'
+import type { NotificationCategory, NotificationItem } from '@allbluecn/shared'
+import {
+  clearNotificationsFn,
+  deleteNotificationFn,
+  listNotificationsFn,
+  markAllNotificationsReadFn,
+  markNotificationReadFn,
+} from '@/server/serverFns/notifications'
+
+export const CATEGORY_ICONS: Record<NotificationCategory, LucideIcon> & { all: LucideIcon } = {
+  all: Bell,
+  team: Users,
+  collaboration: MessageSquare,
+  system: Megaphone,
+  billing: CreditCard,
+  security: ShieldCheck,
+}
+
+const CATEGORY_FILTERS: ('all' | NotificationCategory)[] = [
+  'all',
+  'team',
+  'collaboration',
+  'system',
+  'billing',
+  'security',
+]
+
+type StatusFilter = 'all' | 'unread' | 'read'
+
+const STATUS_FILTERS: StatusFilter[] = ['all', 'unread', 'read']
+
+const STATUS_LABEL_KEYS: Record<StatusFilter, string> = {
+  all: 'filters.all',
+  unread: 'unreadBadge',
+  read: 'filters.read',
+}
+
+export function formatRelativeTime(
+  createdAt: string,
+  t: (key: string, opts?: Record<string, unknown>) => string
+): string {
+  const diffMs = Date.now() - new Date(createdAt).getTime()
+  const minutes = Math.floor(diffMs / 60000)
+  const hours = Math.floor(minutes / 60)
+  const days = Math.floor(hours / 24)
+  if (minutes < 1) return t('relativeTime.justNow')
+  if (minutes < 60) return t('relativeTime.minutesAgo', { count: minutes })
+  if (hours < 24) return t('relativeTime.hoursAgo', { count: hours })
+  return t('relativeTime.daysAgo', { count: Math.min(days, 30) })
+}
+
+export function TeamNotificationsPanel() {
+  const { t } = useTranslation('notifications')
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const { unreadCount } = useNotifications({ toastEnabled: false })
+  const [categoryFilter, setCategoryFilter] = useState<'all' | NotificationCategory>('all')
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all')
+
+  const { data, isLoading, fetchNextPage, isFetchingNextPage, hasNextPage } = useInfiniteQuery({
+    queryKey: [...NOTIFICATION_LIST_KEY, categoryFilter === 'all' ? undefined : categoryFilter],
+    queryFn: async ({ pageParam }) => {
+      const base = categoryFilter === 'all' ? {} : { category: categoryFilter }
+      return listNotificationsFn({
+        data: pageParam ? { ...base, cursor: pageParam } : base,
+      })
+    },
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (lastPage) =>
+      lastPage.hasMore ? lastPage.items[lastPage.items.length - 1].id : undefined,
+  })
+
+  const items = useMemo(() => data?.pages.flatMap((page) => page.items) ?? [], [data])
+
+  const filteredItems = useMemo(
+    () =>
+      items.filter((item) => {
+        if (statusFilter === 'unread') return !item.readAt
+        if (statusFilter === 'read') return !!item.readAt
+        return true
+      }),
+    [items, statusFilter]
+  )
+
+  const invalidateNotificationData = () => {
+    queryClient.invalidateQueries({ queryKey: NOTIFICATION_ROOT_KEY })
+  }
+
+  const handleMarkRead = async (id: string) => {
+    await markNotificationReadFn({ data: { id } })
+    invalidateNotificationData()
+  }
+
+  const handleMarkAllRead = async () => {
+    await markAllNotificationsReadFn({ data: {} })
+    invalidateNotificationData()
+  }
+
+  const handleDelete = async (id: string) => {
+    await deleteNotificationFn({ data: { id } })
+    invalidateNotificationData()
+  }
+
+  const handleClearAll = async () => {
+    await clearNotificationsFn({ data: {} })
+    invalidateNotificationData()
+  }
+
+  const handleOpenItem = (item: NotificationItem) => {
+    if (!item.readAt) void handleMarkRead(item.id)
+    if (item.link) navigate({ to: item.link as never })
+  }
+
+  return (
+    <Card className="w-full flex-1 bg-transparent shadow-none ring-0">
+      <CardHeader className="shrink-0">
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col flex-wrap gap-3 md:flex-row md:items-start md:justify-between">
+            <div className="flex min-w-0 flex-1 flex-col gap-2">
+              {/* <CardTitle>{t('title')}</CardTitle> */}
+              <CardDescription>
+                {unreadCount > 0 ? (
+                  <span className="text-primary">{t('unreadCount', { count: unreadCount })}</span>
+                ) : (
+                  t('allCaughtUp')
+                )}
+              </CardDescription>
+            </div>
+            <div className="flex gap-2">
+              {unreadCount > 0 && (
+                <Button onClick={handleMarkAllRead} size="sm" type="button" variant="outline">
+                  <CheckCheck className="size-4" />
+                  {t('actions.markAllRead')}
+                </Button>
+              )}
+              {items.length > 0 && (
+                <Button onClick={handleClearAll} size="sm" type="button" variant="outline">
+                  <X className="size-4" />
+                  {t('actions.clearAll')}
+                </Button>
+              )}
+            </div>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Select
+              onValueChange={(value) => setCategoryFilter(value as 'all' | NotificationCategory)}
+              value={categoryFilter}
+            >
+              <SelectTrigger className="w-full md:w-[140px]">
+                <SelectValue placeholder={t('filters.allTypes')} />
+              </SelectTrigger>
+              <SelectContent>
+                {CATEGORY_FILTERS.map((key) => (
+                  <SelectItem key={key} value={key}>
+                    {t(key === 'all' ? 'filters.allTypes' : `tabs.${key}`)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select
+              onValueChange={(value) => setStatusFilter(value as StatusFilter)}
+              value={statusFilter}
+            >
+              <SelectTrigger className="w-full md:w-[140px]">
+                <SelectValue placeholder={t('filters.all')} />
+              </SelectTrigger>
+              <SelectContent>
+                {STATUS_FILTERS.map((key) => (
+                  <SelectItem key={key} value={key}>
+                    {t(STATUS_LABEL_KEYS[key])}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="min-h-0 flex-1 overflow-y-auto">
+        {filteredItems.length === 0 ? (
+          <Empty>
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <Bell className="size-6" />
+              </EmptyMedia>
+              <EmptyTitle>
+                {categoryFilter !== 'all' || statusFilter !== 'all'
+                  ? t('emptyFiltered')
+                  : t('empty')}
+              </EmptyTitle>
+            </EmptyHeader>
+          </Empty>
+        ) : (
+          <div className="flex flex-col gap-0">
+            {filteredItems.map((item, idx) => {
+              const Icon = CATEGORY_ICONS[item.category]
+              const isUnread = !item.readAt
+              const isFirst = idx === 0
+              const isLast = idx === filteredItems.length - 1
+              return (
+                <div key={item.id}>
+                  <div
+                    className={cn(
+                      'flex cursor-pointer items-start gap-4 p-4 transition-colors',
+                      isUnread && 'bg-primary/5',
+                      'hover:bg-muted/50',
+                      isFirst && 'rounded-t-lg',
+                      isLast && 'rounded-b-lg'
+                    )}
+                    onClick={() => handleOpenItem(item)}
+                  >
+                    <div
+                      className={cn(
+                        'flex size-10 shrink-0 items-center justify-center rounded-full',
+                        isUnread ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'
+                      )}
+                    >
+                      <Icon className="size-5" />
+                    </div>
+                    <div className="flex min-w-0 flex-1 flex-col gap-2">
+                      <div className="flex flex-wrap items-center gap-1">
+                        <span className="font-medium text-sm">{item.title}</span>
+                        {isUnread && <div className="size-2 shrink-0 rounded-full bg-primary" />}
+                        <Badge className="text-xs" variant="outline">
+                          {t(`tabs.${item.category}`)}
+                        </Badge>
+                      </div>
+                      {item.body && (
+                        <p className="wrap-break-word text-muted-foreground text-sm">{item.body}</p>
+                      )}
+                      <span className="text-muted-foreground text-xs">
+                        {formatRelativeTime(item.createdAt, t)}
+                      </span>
+                    </div>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          aria-label={t('moreOptions')}
+                          size="icon-sm"
+                          type="button"
+                          variant="ghost"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <MoreVertical className="size-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end" onClick={(e) => e.stopPropagation()}>
+                        {isUnread && (
+                          <DropdownMenuItem onClick={() => void handleMarkRead(item.id)}>
+                            <Check className="size-4" />
+                            {t('actions.markRead')}
+                          </DropdownMenuItem>
+                        )}
+                        {item.link && (
+                          <DropdownMenuItem onClick={() => navigate({ to: item.link as never })}>
+                            <MessageSquare className="size-4" />
+                            {t('actions.view')}
+                          </DropdownMenuItem>
+                        )}
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                          variant="destructive"
+                          onClick={() => void handleDelete(item.id)}
+                        >
+                          <Trash2 className="size-4" />
+                          {t('actions.delete')}
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                  {idx < filteredItems.length - 1 && <Separator />}
+                </div>
+              )
+            })}
+            {Boolean(hasNextPage) && (
+              <Button
+                className="mt-4"
+                disabled={isFetchingNextPage}
+                onClick={() => void fetchNextPage()}
+                size="sm"
+                type="button"
+                variant="ghost"
+              >
+                {t('actions.loadMore')}
+              </Button>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/src/components/settings/personal-team/team/team-client.tsx

@@ -31,6 +31,8 @@ import {
   approveTeamInvitationFn,
   approveTeamJoinRequestFn,
   rejectTeamJoinRequestFn,
+  deleteTeamInvitationFn,
+  deleteTeamJoinRequestFn,
   removeTeamMemberFn,
   leaveTeamFn,
   clearExpiredInvitationsFn,
@@ -44,6 +46,7 @@ import {
   CardTitle,
 } from "@/components/ui/card"
 import { Progress } from "@/components/ui/progress"
+import { Skeleton } from "@/components/ui/skeleton"
 import {
   AlertDialog,
   AlertDialogAction,
@@ -331,6 +334,36 @@ export default function TeamClient({ user }: TeamClientProps) {
     await rejectRequestMutation.mutateAsync(requestId)
   }
 
+  const deleteInvitationMutation = useMutation({
+    mutationFn: (invitationId: string) => deleteTeamInvitationFn({ data: { invitationId } }),
+    onSuccess: () => {
+      toast.success(t("team.invite.deleteRecord"))
+      invalidate()
+    },
+    onError: (err) => {
+      toast.error(err instanceof Error ? err.message : t("team.inviteCreateFailed"))
+    },
+  })
+
+  const deleteRequestMutation = useMutation({
+    mutationFn: (requestId: string) => deleteTeamJoinRequestFn({ data: { requestId } }),
+    onSuccess: () => {
+      toast.success(t("team.invite.deleteRecord"))
+      invalidate()
+    },
+    onError: (err) => {
+      toast.error(err instanceof Error ? err.message : t("team.inviteCreateFailed"))
+    },
+  })
+
+  const handleDeleteInvitation = async (invitationId: string) => {
+    await deleteInvitationMutation.mutateAsync(invitationId)
+  }
+
+  const handleDeleteRequest = async (requestId: string) => {
+    await deleteRequestMutation.mutateAsync(requestId)
+  }
+
   const handleRemove = async (memberId: string) => {
     const membershipId = membershipIdByUserId[memberId]
     if (membershipId) {
@@ -425,18 +458,24 @@ export default function TeamClient({ user }: TeamClientProps) {
         />
       </div>
 
-      <TeamInvitations
-        invitations={mappedInvitations}
-        joinRequests={mappedJoinRequests}
-        onCreate={handleCreate}
-        onRefreshLink={handleRefreshLink}
-        onRevoke={handleRevoke}
-        onResend={handleResend}
-        onApproveLink={handleApproveLink}
-        onApproveRequest={handleApproveRequest}
-        onRejectRequest={handleRejectRequest}
-        onClearExpired={handleClearExpired}
-      />
+      {inviteData ? (
+        <TeamInvitations
+          invitations={mappedInvitations}
+          joinRequests={mappedJoinRequests}
+          onCreate={handleCreate}
+          onRefreshLink={handleRefreshLink}
+          onRevoke={handleRevoke}
+          onResend={handleResend}
+          onApproveLink={handleApproveLink}
+          onApproveRequest={handleApproveRequest}
+          onRejectRequest={handleRejectRequest}
+          onDeleteInvitation={handleDeleteInvitation}
+          onDeleteRequest={handleDeleteRequest}
+          onClearExpired={handleClearExpired}
+        />
+      ) : (
+        <Skeleton className="h-96 w-full rounded-lg" />
+      )}
 
       <TeamMemberList
         members={mappedMembers}