@tuturuuu/ui 0.25.0 → 0.25.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.25.0",
+  "version": "0.25.2",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/components/ui/custom/__tests__/workspace-select-helpers.test.ts

@@ -115,14 +115,10 @@ describe('mergeWorkspaceSelectWorkspaces', () => {
   });
 
   it('keeps workspace fallback images outside Radix AvatarImage context', () => {
-    const workspaceSelectSource = readFileSync(
-      join(process.cwd(), 'src/components/ui/custom/workspace-select.tsx'),
+    const workspaceIconSource = readFileSync(
+      join(process.cwd(), 'src/components/ui/custom/workspace-select-icon.tsx'),
       'utf8'
     );
-    const workspaceIconSource = workspaceSelectSource.slice(
-      workspaceSelectSource.indexOf('function WorkspaceIcon'),
-      workspaceSelectSource.indexOf('export function WorkspaceSelect')
-    );
 
     expect(workspaceIconSource).toContain('<AvatarFallback');
     expect(workspaceIconSource).toContain('<Image');

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

@@ -0,0 +1,141 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import type { WorkspaceInvitationRecord } from '@tuturuuu/internal-api/workspaces';
+import { NextIntlClientProvider } from 'next-intl';
+import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import { Command, CommandInput, CommandList } from '../../command';
+import {
+  useWorkspaceInvitations,
+  WorkspaceInvitationItems,
+} from '../workspace-select-invitations';
+
+const mocks = vi.hoisted(() => ({
+  acceptWorkspaceInvite: vi.fn(),
+  declineWorkspaceInvite: vi.fn(),
+  listWorkspaceInvitations: vi.fn(),
+}));
+
+vi.mock('@tuturuuu/internal-api/workspaces', () => ({
+  acceptWorkspaceInvite: mocks.acceptWorkspaceInvite,
+  declineWorkspaceInvite: mocks.declineWorkspaceInvite,
+  listWorkspaceInvitations: mocks.listWorkspaceInvitations,
+}));
+
+const invitation: WorkspaceInvitationRecord = {
+  createdAt: null,
+  matchedEmail: 'invitee@example.com',
+  source: 'email',
+  type: 'MEMBER',
+  workspace: {
+    avatar_url: null,
+    handle: 'acme',
+    id: 'workspace-1',
+    logo_url: null,
+    name: 'Acme',
+    personal: false,
+  },
+};
+
+const messages = {
+  common: {
+    guest_access: 'Guest',
+    members: 'Member',
+    retry: 'Retry',
+  },
+  'workspace-invitation': {
+    accept: 'Accept',
+    'accept-error': 'Could not accept',
+    'accept-success': 'Accepted',
+    'decline-error': 'Could not decline',
+    'decline-success': 'Declined',
+    'direct-invite': 'Direct invitation',
+    'email-invite': 'Email invitation',
+    'list-eyebrow': 'Pending invitations',
+    reject: 'Decline',
+  },
+};
+
+function Harness({
+  onAccepted = vi.fn(),
+  onDeclined = vi.fn(),
+}: {
+  onAccepted?: (value: WorkspaceInvitationRecord) => void;
+  onDeclined?: () => void;
+}) {
+  const controller = useWorkspaceInvitations({
+    cacheScope: 'user-1',
+    enabled: true,
+    onAccepted,
+    onDeclined,
+  });
+
+  return (
+    <Command>
+      <CommandInput aria-label="Search" />
+      <CommandList>
+        <WorkspaceInvitationItems
+          controller={controller}
+          fallbackLogoUrl="/logo.svg"
+        />
+      </CommandList>
+    </Command>
+  );
+}
+
+function renderHarness(props: Parameters<typeof Harness>[0] = {}) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <Harness {...props} />
+      </NextIntlClientProvider>
+    </QueryClientProvider>
+  );
+}
+
+describe('workspace invitation picker items', () => {
+  beforeAll(() => {
+    globalThis.ResizeObserver = class ResizeObserver {
+      disconnect() {}
+      observe() {}
+      unobserve() {}
+    };
+  });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.listWorkspaceInvitations.mockResolvedValue({
+      invitations: [invitation],
+    });
+    mocks.acceptWorkspaceInvite.mockResolvedValue(undefined);
+    mocks.declineWorkspaceInvite.mockResolvedValue(undefined);
+  });
+
+  it('accepts the highlighted invitation and reports the accepted workspace', async () => {
+    const onAccepted = vi.fn();
+    renderHarness({ onAccepted });
+
+    const option = await screen.findByRole('option', { name: /Acme/ });
+    fireEvent.click(option);
+
+    await waitFor(() =>
+      expect(mocks.acceptWorkspaceInvite).toHaveBeenCalledWith('workspace-1')
+    );
+    await waitFor(() => expect(onAccepted).toHaveBeenCalledWith(invitation));
+  });
+
+  it('declines in place without activating the accept option', async () => {
+    const onDeclined = vi.fn();
+    renderHarness({ onDeclined });
+
+    fireEvent.click(await screen.findByRole('button', { name: 'Decline' }));
+
+    await waitFor(() =>
+      expect(mocks.declineWorkspaceInvite).toHaveBeenCalledWith('workspace-1')
+    );
+    expect(mocks.acceptWorkspaceInvite).not.toHaveBeenCalled();
+    await waitFor(() => expect(onDeclined).toHaveBeenCalledOnce());
+  });
+});

package/src/components/ui/custom/notification-popover-client.tsx

@@ -22,6 +22,11 @@ import {
   X,
   XCircle,
 } from '@tuturuuu/icons';
+import { updateNotificationMetadata } from '@tuturuuu/internal-api';
+import {
+  acceptWorkspaceInvite,
+  declineWorkspaceInvite,
+} from '@tuturuuu/internal-api/workspaces';
 import { Button } from '@tuturuuu/ui/button';
 import {
   dedupeNotifications,
@@ -61,6 +66,11 @@ interface NotificationPopoverClientProps {
   archiveAllText?: string;
   emptyArchiveText?: string;
   loadingMoreText?: string;
+  retryText?: string;
+  acceptText?: string;
+  declineText?: string;
+  acceptedText?: string;
+  declinedText?: string;
   /** Base URL for external redirect (e.g. 'https://tuturuuu.com'). When set, "View All" links to {webAppUrl}/{wsId}/notifications. */
   webAppUrl?: string;
 }
@@ -93,6 +103,11 @@ export default function NotificationPopoverClient({
   archiveAllText = 'Archive all',
   emptyArchiveText = 'No archived notifications yet.',
   loadingMoreText = 'Loading more...',
+  retryText = 'Retry',
+  acceptText = 'Accept',
+  declineText = 'Decline',
+  acceptedText = 'Joined',
+  declinedText = 'Declined',
   webAppUrl,
 }: NotificationPopoverClientProps) {
   const [open, setOpen] = useState(false);
@@ -111,11 +126,13 @@ export default function NotificationPopoverClient({
 
   // Accurate unread count from dedicated endpoint
   const { data: unreadCount = 0 } = useUnreadCount(wsIdForFiltering, {
+    cacheScope: userId,
     enabled: Boolean(userId),
   });
 
   // Infinite scroll for inbox (unread) and archive (read)
   const inboxQuery = useInfiniteNotifications({
+    cacheScope: userId,
     wsId: wsIdForFiltering,
     unreadOnly: true,
     pageSize: 15,
@@ -123,6 +140,7 @@ export default function NotificationPopoverClient({
   });
 
   const archiveQuery = useInfiniteNotifications({
+    cacheScope: userId,
     wsId: wsIdForFiltering,
     readOnly: true,
     pageSize: 15,
@@ -176,7 +194,9 @@ export default function NotificationPopoverClient({
         <Button
           variant="ghost"
           size="icon"
-          className="group relative hidden flex-none transition-all md:flex"
+          aria-label={notificationsText}
+          title={notificationsText}
+          className="group relative flex size-10 flex-none transition-all"
         >
           <Bell className="h-6 w-6" />
           {unreadCount > 0 && (
@@ -261,6 +281,11 @@ export default function NotificationPopoverClient({
           noNotificationsText={noNotificationsText}
           emptyArchiveText={emptyArchiveText}
           loadingMoreText={loadingMoreText}
+          retryText={retryText}
+          acceptText={acceptText}
+          declineText={declineText}
+          acceptedText={acceptedText}
+          declinedText={declinedText}
           markAsReadText={markAsReadText}
           markAsUnreadText={markAsUnreadText}
           onMarkAsRead={handleMarkAsRead}
@@ -293,6 +318,11 @@ function NotificationList({
   noNotificationsText,
   emptyArchiveText,
   loadingMoreText,
+  retryText,
+  acceptText,
+  declineText,
+  acceptedText,
+  declinedText,
   markAsReadText,
   markAsUnreadText,
   onMarkAsRead,
@@ -307,6 +337,11 @@ function NotificationList({
   noNotificationsText: string;
   emptyArchiveText: string;
   loadingMoreText: string;
+  retryText: string;
+  acceptText: string;
+  declineText: string;
+  acceptedText: string;
+  declinedText: string;
   markAsReadText: string;
   markAsUnreadText: string;
   onMarkAsRead: (id: string, isUnread: boolean) => void;
@@ -357,6 +392,21 @@ function NotificationList({
         <p className="mt-1 text-foreground/40 text-xs">
           {query.error instanceof Error ? query.error.message : 'Unknown error'}
         </p>
+        <Button
+          className="mt-3"
+          disabled={query.isFetching}
+          onClick={() => query.refetch()}
+          size="sm"
+          type="button"
+          variant="outline"
+        >
+          {query.isFetching ? (
+            <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
+          ) : (
+            <RotateCcw className="mr-1.5 h-3.5 w-3.5" />
+          )}
+          {retryText}
+        </Button>
       </div>
     );
   }
@@ -406,6 +456,10 @@ function NotificationList({
             markAsUnreadText={markAsUnreadText}
             queryClient={queryClient}
             onActionComplete={onActionComplete}
+            acceptText={acceptText}
+            declineText={declineText}
+            acceptedText={acceptedText}
+            declinedText={declinedText}
           />
         ))}
 
@@ -431,6 +485,10 @@ interface NotificationCardProps {
   markAsUnreadText: string;
   queryClient: any;
   onActionComplete?: () => void;
+  acceptText: string;
+  declineText: string;
+  acceptedText: string;
+  declinedText: string;
 }
 
 function getWorkspaceInviteWorkspaceId(notification: Notification) {
@@ -456,6 +514,10 @@ function NotificationCard({
   markAsUnreadText,
   queryClient,
   onActionComplete,
+  acceptText,
+  declineText,
+  acceptedText,
+  declinedText,
 }: NotificationCardProps) {
   const isUnread = !notification.read_at;
   const [processingAction, setProcessingAction] = useState<string | null>(null);
@@ -477,58 +539,34 @@ function NotificationCard({
             break;
           }
 
-          const url = `/api/workspaces/${targetWsId}/${
-            accept ? 'accept-invite' : 'decline-invite'
-          }`;
-
-          const res = await fetch(url, { method: 'POST' });
-
-          if (res.ok) {
-            const updateRes = await fetch(
-              `/api/v1/notifications/${notification.id}/metadata`,
-              {
-                method: 'PATCH',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                  action_taken: accept ? 'accepted' : 'declined',
-                  action_timestamp: new Date().toISOString(),
-                }),
-              }
-            );
-
-            if (updateRes.ok) {
-              await Promise.all([
-                queryClient.invalidateQueries({
-                  queryKey: ['workspaces'],
-                  refetchType: 'active',
-                }),
-                queryClient.invalidateQueries({
-                  queryKey: ['notifications'],
-                  refetchType: 'active',
-                }),
-                queryClient.refetchQueries({
-                  queryKey: ['notifications'],
-                  type: 'active',
-                }),
-              ]);
-
-              toast.success(
-                accept
-                  ? 'Workspace invite accepted'
-                  : 'Workspace invite declined'
-              );
-
-              onMarkAsRead(notification.id, true);
-              router.refresh();
-              onActionComplete?.();
-            } else {
-              toast.error('Failed to update notification');
-            }
-          } else {
-            const errorData = await res.json();
-            console.error('Failed to process invite:', errorData);
-            toast.error(errorData.error || 'Failed to process invite');
-          }
+          await (accept
+            ? acceptWorkspaceInvite(targetWsId)
+            : declineWorkspaceInvite(targetWsId));
+          await updateNotificationMetadata(notification.id, {
+            action_taken: accept ? 'accepted' : 'declined',
+            action_timestamp: new Date().toISOString(),
+          });
+
+          await Promise.all([
+            queryClient.invalidateQueries({
+              queryKey: ['workspaces'],
+              refetchType: 'active',
+            }),
+            queryClient.invalidateQueries({
+              queryKey: ['notifications'],
+              refetchType: 'active',
+            }),
+            queryClient.refetchQueries({
+              queryKey: ['notifications'],
+              type: 'active',
+            }),
+          ]);
+
+          toast.success(accept ? acceptedText : declinedText);
+
+          onMarkAsRead(notification.id, true);
+          router.refresh();
+          onActionComplete?.();
           break;
         }
         default:
@@ -597,13 +635,15 @@ function NotificationCard({
               {notification.data.action_taken === 'accepted' ? (
                 <>
                   <CheckCircle2 className="h-3 w-3 text-dynamic-green" />
-                  <span className="font-medium text-dynamic-green">Joined</span>
+                  <span className="font-medium text-dynamic-green">
+                    {acceptedText}
+                  </span>
                 </>
               ) : (
                 <>
                   <XCircle className="h-3 w-3 text-foreground/40" />
                   <span className="font-medium text-foreground/60">
-                    Declined
+                    {declinedText}
                   </span>
                 </>
               )}
@@ -627,7 +667,7 @@ function NotificationCard({
                 ) : (
                   <X className="h-3 w-3" />
                 )}
-                Decline
+                {declineText}
               </Button>
               <Button
                 size="sm"
@@ -644,7 +684,7 @@ function NotificationCard({
                 ) : (
                   <Check className="h-3 w-3" />
                 )}
-                Accept
+                {acceptText}
               </Button>
             </div>
           ) : isTaskEntityNotification ? (

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

@@ -0,0 +1,58 @@
+import { cn } from '@tuturuuu/utils/format';
+import Image from 'next/image';
+import { Avatar, AvatarFallback, AvatarImage } from '../avatar';
+import { TUTURUUU_LOGO_URL } from './tuturuuu-logo';
+import { resolveWorkspaceAvatarUrl } from './workspace-select-helpers';
+
+export 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
+        alt={name || 'Workspace'}
+        className={cn(
+          'h-full w-full object-cover',
+          resolvedAvatarUrl ? 'rounded-xs' : 'rounded-sm'
+        )}
+        src={
+          resolvedAvatarUrl ||
+          (name ? `https://avatar.vercel.sh/${name}.png` : undefined)
+        }
+      />
+      <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>
+  );
+}

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(