@tuturuuu/ui 0.24.0 → 0.25.2

package/src/components/ui/custom/workspace-select-invitations.tsx

@@ -0,0 +1,202 @@
+'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Check, Loader2, Mail, RefreshCw, X } from '@tuturuuu/icons';
+import type { WorkspaceInvitationRecord } from '@tuturuuu/internal-api/workspaces';
+import {
+  acceptWorkspaceInvite,
+  declineWorkspaceInvite,
+  listWorkspaceInvitations,
+} from '@tuturuuu/internal-api/workspaces';
+import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
+import { Button } from '../button';
+import { CommandGroup, CommandItem } from '../command';
+import { WorkspaceIcon } from './workspace-select-icon';
+
+export function useWorkspaceInvitations({
+  cacheScope,
+  enabled,
+  onAccepted,
+  onDeclined,
+}: {
+  cacheScope?: string;
+  enabled: boolean;
+  onAccepted: (invitation: WorkspaceInvitationRecord) => void;
+  onDeclined: () => void;
+}) {
+  const queryClient = useQueryClient();
+  const t = useTranslations();
+  const query = useQuery({
+    queryKey: ['workspace-invitations', ...(cacheScope ? [cacheScope] : [])],
+    queryFn: async () => (await listWorkspaceInvitations()).invitations,
+    enabled,
+    retry: 1,
+    staleTime: 30_000,
+  });
+  const invitations = query.data ?? [];
+  const mutation = useMutation({
+    mutationFn: async ({
+      action,
+      invitation,
+    }: {
+      action: 'accept' | 'decline';
+      invitation: WorkspaceInvitationRecord;
+    }) => {
+      if (action === 'accept') {
+        await acceptWorkspaceInvite(invitation.workspace.id);
+      } else {
+        await declineWorkspaceInvite(invitation.workspace.id);
+      }
+      return { action, invitation };
+    },
+    onSuccess: async ({ action, invitation }) => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ['workspace-invitations'] }),
+        queryClient.invalidateQueries({ queryKey: ['workspaces'] }),
+        queryClient.invalidateQueries({ queryKey: ['user-workspaces'] }),
+        queryClient.invalidateQueries({ queryKey: ['workspace-user'] }),
+        queryClient.invalidateQueries({ queryKey: ['current-user'] }),
+        queryClient.invalidateQueries({ queryKey: ['user'] }),
+        queryClient.invalidateQueries({ queryKey: ['notifications'] }),
+      ]);
+
+      if (action === 'accept') {
+        toast.success(t('workspace-invitation.accept-success'));
+        onAccepted(invitation);
+      } else {
+        toast.success(t('workspace-invitation.decline-success'));
+        onDeclined();
+      }
+    },
+    onError: (error, { action }) => {
+      toast.error(
+        t(
+          action === 'accept'
+            ? 'workspace-invitation.accept-error'
+            : 'workspace-invitation.decline-error'
+        ),
+        {
+          description: error instanceof Error ? error.message : undefined,
+        }
+      );
+    },
+  });
+
+  return { invitations, mutation, query };
+}
+
+export function WorkspaceInvitationItems({
+  controller,
+  fallbackLogoUrl,
+}: {
+  controller: ReturnType<typeof useWorkspaceInvitations>;
+  fallbackLogoUrl: string;
+}) {
+  const t = useTranslations();
+  const { invitations, mutation, query } = controller;
+
+  return (
+    <>
+      {invitations.length > 0 && (
+        <CommandGroup
+          heading={`${t('workspace-invitation.list-eyebrow')} (${invitations.length})`}
+        >
+          {invitations.map((invitation) => {
+            const workspaceName =
+              invitation.workspace.name ||
+              invitation.workspace.handle ||
+              invitation.workspace.id;
+            const isPending =
+              mutation.isPending &&
+              mutation.variables?.invitation.workspace.id ===
+                invitation.workspace.id;
+
+            return (
+              <div
+                className="flex items-stretch gap-1 [&:has([cmdk-item][hidden])]:hidden"
+                key={`${invitation.workspace.id}-${invitation.source}`}
+              >
+                <CommandItem
+                  className="min-w-0 flex-1 gap-2"
+                  disabled={isPending}
+                  onSelect={() =>
+                    mutation.mutate({ action: 'accept', invitation })
+                  }
+                  value={`${workspaceName} ${invitation.workspace.handle || ''} ${invitation.source} ${invitation.type}`}
+                >
+                  <WorkspaceIcon
+                    avatarUrl={
+                      invitation.workspace.avatar_url ||
+                      invitation.workspace.logo_url
+                    }
+                    fallbackLogoUrl={fallbackLogoUrl}
+                    name={workspaceName}
+                  />
+                  <div className="min-w-0 flex-1">
+                    <div className="truncate text-xs">{workspaceName}</div>
+                    <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
+                      <Mail className="size-3" />
+                      {t(
+                        `workspace-invitation.${
+                          invitation.source === 'email'
+                            ? 'email-invite'
+                            : 'direct-invite'
+                        }`
+                      )}
+                      <span aria-hidden="true">·</span>
+                      {invitation.type === 'GUEST'
+                        ? t('common.guest_access')
+                        : t('common.members')}
+                    </div>
+                  </div>
+                  {isPending && mutation.variables?.action === 'accept' ? (
+                    <Loader2 className="size-3.5 animate-spin" />
+                  ) : (
+                    <Check className="size-3.5" />
+                  )}
+                  <span className="sr-only">
+                    {t('workspace-invitation.accept')}
+                  </span>
+                </CommandItem>
+                <Button
+                  aria-label={t('workspace-invitation.reject')}
+                  className="size-8 self-center"
+                  disabled={isPending}
+                  onClick={() =>
+                    mutation.mutate({ action: 'decline', invitation })
+                  }
+                  size="icon"
+                  title={t('workspace-invitation.reject')}
+                  type="button"
+                  variant="ghost"
+                >
+                  {isPending && mutation.variables?.action === 'decline' ? (
+                    <Loader2 className="size-3.5 animate-spin" />
+                  ) : (
+                    <X className="size-3.5" />
+                  )}
+                </Button>
+              </div>
+            );
+          })}
+        </CommandGroup>
+      )}
+      {query.isError && (
+        <CommandGroup>
+          <CommandItem
+            onSelect={() => query.refetch()}
+            value="retry workspace invitations"
+          >
+            {query.isFetching ? (
+              <Loader2 className="size-4 animate-spin" />
+            ) : (
+              <RefreshCw className="size-4" />
+            )}
+            {t('common.retry')}
+          </CommandItem>
+        </CommandGroup>
+      )}
+    </>
+  );
+}

package/src/components/ui/custom/workspace-select.tsx

@@ -27,7 +27,6 @@ import {
 import { cn } from '@tuturuuu/utils/format';
 import { workspaceHandleSchema } from '@tuturuuu/utils/workspace-handle';
 import { WORKSPACE_LIMIT_ERROR_CODE } from '@tuturuuu/utils/workspace-limits';
-import Image from 'next/image';
 import { usePathname, useRouter } from 'next/navigation';
 import { useLocale, useTranslations } from 'next-intl';
 import type { ReactNode } from 'react';
@@ -37,7 +36,6 @@ import { z } from 'zod';
 import { useForm } from '../../../hooks/use-form';
 import { useWorkspaceUser } from '../../../hooks/use-workspace-user';
 import { zodResolver } from '../../../resolvers';
-import { Avatar, AvatarFallback, AvatarImage } from '../avatar';
 import { Badge } from '../badge';
 import { Button } from '../button';
 import {
@@ -74,6 +72,11 @@ import {
   normalizeWorkspaceSwitchPath,
   resolveWorkspaceAvatarUrl,
 } from './workspace-select-helpers';
+import { WorkspaceIcon } from './workspace-select-icon';
+import {
+  useWorkspaceInvitations,
+  WorkspaceInvitationItems,
+} from './workspace-select-invitations';
 import { useOpenWorkspaceSelectWhenRevealed } from './workspace-select-reveal';
 
 const FormSchema = z.object({
@@ -84,59 +87,6 @@ const JoinWorkspaceByHandleFormSchema = z.object({
   handle: workspaceHandleSchema,
 });
 
-function WorkspaceIcon({
-  name,
-  avatarUrl,
-  className,
-  fallbackLogoUrl = TUTURUUU_LOGO_URL,
-}: {
-  name?: string | null;
-  avatarUrl?: string | null;
-  className?: string;
-  fallbackLogoUrl?: string;
-}) {
-  const resolvedAvatarUrl = resolveWorkspaceAvatarUrl(avatarUrl);
-  const shouldSkipFallbackOptimization = /^https?:\/\//u.test(fallbackLogoUrl);
-
-  return (
-    <Avatar
-      className={cn(
-        'h-5 max-h-5 min-h-5 w-5 min-w-5 max-w-5 flex-none overflow-hidden',
-        resolvedAvatarUrl ? 'rounded-xs' : 'rounded-sm',
-        className
-      )}
-    >
-      <AvatarImage
-        src={
-          resolvedAvatarUrl ||
-          (name ? `https://avatar.vercel.sh/${name}.png` : undefined)
-        }
-        alt={name || 'Workspace'}
-        className={cn(
-          'h-full w-full object-cover',
-          resolvedAvatarUrl ? 'rounded-xs' : 'rounded-sm'
-        )}
-      />
-      <AvatarFallback
-        className={cn(
-          'h-full w-full text-xs',
-          resolvedAvatarUrl ? 'rounded-xs' : 'rounded-sm'
-        )}
-      >
-        <Image
-          alt=""
-          aria-hidden="true"
-          className="h-full w-full object-cover"
-          height={20}
-          src={fallbackLogoUrl}
-          unoptimized={shouldSkipFallbackOptimization}
-          width={20}
-        />
-      </AvatarFallback>
-    </Avatar>
-  );
-}
-
 export function WorkspaceSelect({
   wsId,
   hideLeading,
@@ -152,6 +102,7 @@ export function WorkspaceSelect({
   triggerClassName,
   popoverModal = false,
   platformWorkspaceSetupUrl,
+  cacheScope,
 }: {
   wsId: string;
   hideLeading?: boolean;
@@ -172,6 +123,8 @@ export function WorkspaceSelect({
   popoverModal?: boolean;
   /** Platform origin used to prepare a newly created satellite workspace. */
   platformWorkspaceSetupUrl?: string;
+  /** Authenticated identity used to isolate user-specific picker caches. */
+  cacheScope?: string;
 }) {
   const t = useTranslations();
   const locale = useLocale();
@@ -184,7 +137,7 @@ export function WorkspaceSelect({
       ? resolveWorkspaceId(wsId)
       : undefined;
   const { data: listedWorkspaces } = useQuery({
-    queryKey: ['workspaces'],
+    queryKey: ['workspaces', ...(cacheScope ? [cacheScope] : [])],
     queryFn: fetchWorkspaces,
     enabled: !!wsId,
   });
@@ -195,7 +148,11 @@ export function WorkspaceSelect({
       )
   );
   const { data: currentWorkspaceFallback } = useQuery({
-    queryKey: ['workspace-select-current-workspace', resolvedWorkspaceId],
+    queryKey: [
+      'workspace-select-current-workspace',
+      resolvedWorkspaceId,
+      ...(cacheScope ? [cacheScope] : []),
+    ],
     queryFn: async () =>
       (await getWorkspace(resolvedWorkspaceId!)) as InternalApiWorkspaceSummary,
     enabled: Boolean(resolvedWorkspaceId && !hasListedCurrentWorkspace),
@@ -206,7 +163,6 @@ export function WorkspaceSelect({
     currentWorkspaceFallback
   );
   const { data: currentUser } = useWorkspaceUser();
-
   const defaultWorkspaceId = currentUser?.default_workspace_id || null;
 
   const form = useForm({
@@ -228,6 +184,18 @@ export function WorkspaceSelect({
 
   const [loading, setLoading] = useState(false);
   const [joiningByHandle, setJoiningByHandle] = useState(false);
+  const invitationController = useWorkspaceInvitations({
+    cacheScope,
+    enabled: Boolean(wsId),
+    onAccepted: (invitation) => {
+      setOpen(false);
+      const slug = invitation.workspace.handle || invitation.workspace.id;
+      router.push(getWorkspaceLandingPath(slug));
+      router.refresh();
+    },
+    onDeclined: () => router.refresh(),
+  });
+  const invitations = invitationController.invitations;
 
   const updateDefaultWorkspaceMutation = useMutation({
     mutationFn: (workspaceId: string) =>
@@ -257,7 +225,7 @@ export function WorkspaceSelect({
     },
   });
 
-  const getWorkspaceLandingPath = (nextSlug: string) => {
+  function getWorkspaceLandingPath(nextSlug: string) {
     if (resolveNextPathname) {
       return resolveNextPathname({
         currentPathname: pathname || `/${wsId}`,
@@ -268,7 +236,7 @@ export function WorkspaceSelect({
     return customRedirectSuffix
       ? `/${nextSlug}/${customRedirectSuffix}`
       : `/${nextSlug}`;
-  };
+  }
 
   async function onSubmit(formData: z.infer<typeof FormSchema>) {
     if (disableCreateNewWorkspace) return;
@@ -450,7 +418,8 @@ export function WorkspaceSelect({
     }
   };
 
-  const hasSelectableWorkspaces = workspaces.length > 0;
+  const hasSelectableWorkspaces =
+    workspaces.length > 0 || invitations.length > 0;
   useOpenWorkspaceSelectWhenRevealed(hasSelectableWorkspaces, setOpen);
 
   const workspace =
@@ -616,6 +585,15 @@ export function WorkspaceSelect({
                   </Badge>
                 )}
               </div>
+              {invitations.length > 0 && (
+                <Badge
+                  aria-label={`${invitations.length} ${t('workspace-invitation.list-eyebrow')}`}
+                  className="h-5 min-w-5 justify-center px-1 text-[10px]"
+                  variant="destructive"
+                >
+                  {invitations.length > 99 ? '99+' : invitations.length}
+                </Badge>
+              )}
               {hideLeading || (
                 <ChevronDown className="ml-1 h-4 w-4 shrink-0 opacity-50" />
               )}
@@ -626,6 +604,10 @@ export function WorkspaceSelect({
               <CommandInput autoFocus placeholder="Search workspace..." />
               <CommandEmpty>No workspace found.</CommandEmpty>
               <CommandList className="max-h-64">
+                <WorkspaceInvitationItems
+                  controller={invitationController}
+                  fallbackLogoUrl={fallbackLogoUrl}
+                />
                 {groups.map((group) => (
                   <CommandGroup key={group.label} heading={group.label}>
                     {group.teams.map(

package/src/hooks/use-notifications.ts

@@ -75,6 +75,7 @@ interface NotificationsPage {
 }
 
 interface UseNotificationsOptions {
+  cacheScope?: string;
   wsId?: string;
   limit?: number;
   offset?: number;
@@ -210,6 +211,7 @@ export function dedupeNotifications(
  * @param wsId - If provided, filters to specific workspace. If omitted, fetches all notifications across all workspaces.
  */
 export function useNotifications({
+  cacheScope,
   wsId,
   limit = 20,
   offset = 0,
@@ -226,6 +228,7 @@ export function useNotifications({
       unreadOnly,
       readOnly,
       type,
+      ...(cacheScope ? [cacheScope] : []),
     ],
     queryFn: async () => {
       const params = new URLSearchParams({
@@ -263,12 +266,14 @@ export function useNotifications({
  * Hook to fetch notifications with infinite scroll support
  */
 export function useInfiniteNotifications({
+  cacheScope,
   wsId,
   unreadOnly = false,
   readOnly = false,
   pageSize = 20,
   enabled = true,
 }: {
+  cacheScope?: string;
   wsId?: string;
   unreadOnly?: boolean;
   readOnly?: boolean;
@@ -282,6 +287,7 @@ export function useInfiniteNotifications({
       wsId || 'all',
       unreadOnly,
       readOnly,
+      ...(cacheScope ? [cacheScope] : []),
     ],
     queryFn: async ({ pageParam = 0 }) => {
       const params = new URLSearchParams({
@@ -317,9 +323,17 @@ export function useInfiniteNotifications({
  * Hook to get unread notification count.
  * If wsId is provided, scopes to that workspace. Otherwise returns total unread count.
  */
-export function useUnreadCount(wsId?: string, options?: { enabled?: boolean }) {
+export function useUnreadCount(
+  wsId?: string,
+  options?: { cacheScope?: string; enabled?: boolean }
+) {
   return useQuery({
-    queryKey: ['notifications', 'unread-count', wsId || 'all'],
+    queryKey: [
+      'notifications',
+      'unread-count',
+      wsId || 'all',
+      ...(options?.cacheScope ? [options.cacheScope] : []),
+    ],
     queryFn: async () => {
       const params = wsId ? `?wsId=${wsId}` : '';
       const response = await fetch(