@tuturuuu/ui 0.19.1 → 0.21.0

package/src/components/ui/custom/workspace-access/workspace-access-responsive.test.ts

@@ -0,0 +1,64 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+function readWorkspaceAccessSource(fileName: string) {
+  const sourcePath = [
+    join(
+      process.cwd(),
+      'packages/ui/src/components/ui/custom/workspace-access',
+      fileName
+    ),
+    join(process.cwd(), 'src/components/ui/custom/workspace-access', fileName),
+  ].find((candidate) => existsSync(candidate));
+
+  if (!sourcePath) {
+    throw new Error(`Unable to locate ${fileName}`);
+  }
+
+  return readFileSync(sourcePath, 'utf8');
+}
+
+describe('workspace access responsive layout', () => {
+  it.each([
+    'workspace-access-invite-dialog.tsx',
+    'workspace-access-role-editor-dialog.tsx',
+  ])('keeps %s within the mobile viewport with a scrollable body', (file) => {
+    const source = readWorkspaceAccessSource(file);
+
+    expect(source).toContain('max-h-[calc(100dvh-1rem)]');
+    expect(source).toContain('max-sm:bottom-0');
+    expect(source).toContain('overflow-y-auto overscroll-contain');
+    expect(source).toContain('<DialogFooter');
+  });
+
+  it('uses compact navigation and controls on small screens', () => {
+    const toolbar = readWorkspaceAccessSource(
+      'workspace-access-tabs-toolbar.tsx'
+    );
+    const memberRow = readWorkspaceAccessSource(
+      'workspace-access-member-row.tsx'
+    );
+    const peopleFilters = readWorkspaceAccessSource(
+      'workspace-access-people-filters.tsx'
+    );
+
+    expect(toolbar).toContain('grid-cols-4');
+    expect(toolbar).toContain('shrink-0 grid-cols-4');
+    expect(toolbar).not.toContain('2xl:flex-row');
+    expect(toolbar).toContain('sr-only sm:hidden');
+    expect(memberRow).toContain('size-8 shrink-0');
+    expect(memberRow).toContain('<DropdownMenuContent');
+    expect(memberRow).not.toContain('sm:grid-cols-[1fr_auto]');
+    expect(peopleFilters).toContain('className="h-full min-h-0"');
+  });
+
+  it('creates the recommended administrator role with only the admin grant', () => {
+    const page = readWorkspaceAccessSource('workspace-access-page.tsx');
+
+    expect(page).toContain("permissions: [{ enabled: true, id: 'admin' }]");
+    expect(page).not.toContain(
+      'permissions: permissionDefinitions.map((permission)'
+    );
+  });
+});

package/src/components/ui/custom/workspace-access/workspace-access-role-editor-dialog.tsx

@@ -1,12 +1,14 @@
 'use client';
 
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { ShieldCheck } from '@tuturuuu/icons';
 import type { SupabaseUser } from '@tuturuuu/supabase/next/user';
 import { Button } from '@tuturuuu/ui/button';
 import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from '@tuturuuu/ui/dialog';
@@ -131,13 +133,22 @@ export function WorkspaceAccessRoleEditorDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-3xl">
-        <DialogHeader>
-          <DialogTitle>{labels.title}</DialogTitle>
-          <DialogDescription>{labels.description}</DialogDescription>
+      <DialogContent className="flex max-h-[calc(100dvh-1rem)] w-[calc(100%-1rem)] max-w-none flex-col gap-0 overflow-hidden rounded-b-none p-0 max-sm:top-auto max-sm:bottom-0 max-sm:left-0 max-sm:translate-x-0 max-sm:translate-y-0 sm:max-h-[min(90dvh,56rem)] sm:max-w-3xl sm:rounded-lg">
+        <DialogHeader className="shrink-0 gap-0 border-b p-4 pr-12 text-left sm:p-6 sm:pr-12">
+          <div className="flex items-start gap-3">
+            <div className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-dynamic-purple/25 bg-dynamic-purple/10 text-dynamic-purple">
+              <ShieldCheck className="size-4" />
+            </div>
+            <div className="min-w-0 space-y-1">
+              <DialogTitle>{labels.title}</DialogTitle>
+              <DialogDescription className="leading-5">
+                {labels.description}
+              </DialogDescription>
+            </div>
+          </div>
         </DialogHeader>
 
-        <div className="space-y-4">
+        <div className="min-h-0 flex-1 space-y-4 overflow-y-auto overscroll-contain p-4 sm:p-6">
           {state.mode !== 'default' ? (
             <div className="grid gap-2">
               <Label htmlFor="workspace-access-role-name">
@@ -152,9 +163,9 @@ export function WorkspaceAccessRoleEditorDialog({
             </div>
           ) : null}
 
-          <div className="flex items-center justify-between rounded-lg border bg-muted/35 px-4 py-3 text-sm">
+          <div className="flex items-center justify-between rounded-lg border bg-muted/35 px-3 py-2.5 text-sm sm:px-4 sm:py-3">
             <span className="font-medium">{t('ws-roles.permissions')}</span>
-            <span className="tabular-nums">
+            <span className="rounded-full bg-background px-2 py-0.5 font-medium tabular-nums">
               {selectedCount}/{totalCount}
             </span>
           </div>
@@ -164,16 +175,17 @@ export function WorkspaceAccessRoleEditorDialog({
             onSelectedPermissionsChange={setSelectedPermissions}
             selectedPermissions={selectedPermissions}
           />
-
-          <div className="flex justify-end">
-            <Button
-              disabled={disabled || saveMutation.isPending}
-              onClick={() => saveMutation.mutate()}
-            >
-              {saveMutation.isPending ? t('common.processing') : labels.save}
-            </Button>
-          </div>
         </div>
+
+        <DialogFooter className="shrink-0 border-t bg-muted/20 p-3 sm:p-4">
+          <Button
+            className="w-full sm:w-auto"
+            disabled={disabled || saveMutation.isPending}
+            onClick={() => saveMutation.mutate()}
+          >
+            {saveMutation.isPending ? t('common.processing') : labels.save}
+          </Button>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   );

package/src/components/ui/custom/workspace-access/workspace-access-roles.tsx

@@ -49,7 +49,7 @@ export function WorkspaceAccessRoles({
 
   return (
     <div className="space-y-4">
-      <div className="flex flex-wrap items-start justify-between gap-4">
+      <div className="flex items-start justify-between gap-3">
         <div>
           <h2 className="font-semibold text-lg">{labels.accessLevelsLabel}</h2>
           <p className="text-muted-foreground text-sm">
@@ -57,9 +57,13 @@ export function WorkspaceAccessRoles({
           </p>
         </div>
         {canManageRoles ? (
-          <Button onClick={onCreateRole}>
-            <Plus className="mr-2 h-4 w-4" />
-            {t('ws-roles.create')}
+          <Button
+            onClick={onCreateRole}
+            className="size-9 shrink-0 px-0 sm:w-auto sm:px-4"
+          >
+            <Plus className="size-4 sm:mr-2" />
+            <span className="hidden sm:inline">{t('ws-roles.create')}</span>
+            <span className="sr-only sm:hidden">{t('ws-roles.create')}</span>
           </Button>
         ) : null}
       </div>
@@ -86,7 +90,10 @@ export function WorkspaceAccessRoles({
               role.members && role.members.length > 0
                 ? role.members
                 : assignedMembersForRole(role.id, members);
-            const enabled = enabledPermissionCount(role);
+            const enabled = enabledPermissionCount(role, permissionCount);
+            const isAdministrator = role.permissions.some(
+              (permission) => permission.id === 'admin' && permission.enabled
+            );
             const pct =
               permissionCount > 0
                 ? Math.round((enabled / permissionCount) * 100)
@@ -95,7 +102,7 @@ export function WorkspaceAccessRoles({
             return (
               <div
                 key={role.id}
-                className="rounded-xl border border-border bg-background p-5 transition-colors hover:border-foreground/20"
+                className="rounded-xl border border-border bg-background p-4 transition-colors hover:border-foreground/20 sm:p-5"
               >
                 <div className="flex flex-wrap items-start justify-between gap-4">
                   <div className="flex min-w-0 gap-3">
@@ -133,22 +140,34 @@ export function WorkspaceAccessRoles({
                   </div>
 
                   {canManageRoles ? (
-                    <div className="flex flex-wrap gap-2">
+                    <div className="flex shrink-0 gap-1.5 sm:gap-2">
                       <Button
                         variant="outline"
                         size="sm"
+                        className="size-8 px-0 sm:w-auto sm:px-3"
                         onClick={() => onEditRole(role)}
                       >
-                        <Pencil className="mr-2 h-4 w-4" />
-                        {t('common.edit')}
+                        <Pencil className="size-3.5 sm:mr-2" />
+                        <span className="hidden sm:inline">
+                          {t('common.edit')}
+                        </span>
+                        <span className="sr-only sm:hidden">
+                          {t('common.edit')}
+                        </span>
                       </Button>
                       <Button
                         variant="outline"
                         size="sm"
+                        className="size-8 px-0 sm:w-auto sm:px-3"
                         onClick={() => onDeleteRole(role)}
                       >
-                        <Trash2 className="mr-2 h-4 w-4" />
-                        {t('common.delete')}
+                        <Trash2 className="size-3.5 sm:mr-2" />
+                        <span className="hidden sm:inline">
+                          {t('common.delete')}
+                        </span>
+                        <span className="sr-only sm:hidden">
+                          {t('common.delete')}
+                        </span>
                       </Button>
                     </div>
                   ) : null}
@@ -161,6 +180,11 @@ export function WorkspaceAccessRoles({
                     role={role}
                   />
                 </div>
+                {isAdministrator ? (
+                  <p className="mt-2 text-dynamic-green text-sm">
+                    {t('ws-members.admin_has_all_permissions')}
+                  </p>
+                ) : null}
 
                 {assignedMembers.length > 0 ? (
                   <div className="mt-3 flex flex-wrap gap-1.5 border-border border-t pt-3">

package/src/components/ui/custom/workspace-access/workspace-access-tabs-toolbar.tsx

@@ -27,7 +27,7 @@ type Props = {
 };
 
 const TAB_TRIGGER_CLASS =
-  'rounded-none border-transparent border-b-2 bg-transparent px-1 pt-1 pb-3 text-muted-foreground shadow-none transition-colors hover:text-foreground data-[state=active]:border-dynamic-blue data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none';
+  'h-full min-w-0 w-full gap-1.5 overflow-hidden rounded-lg px-2 text-muted-foreground shadow-none transition-colors hover:text-foreground data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm sm:px-3';
 
 export function WorkspaceAccessTabsToolbar({
   activeTab,
@@ -73,8 +73,8 @@ export function WorkspaceAccessTabsToolbar({
   ];
 
   return (
-    <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
-      <TabsList className="h-auto w-full justify-start gap-5 overflow-x-auto rounded-none border-border border-b bg-transparent p-0 lg:w-auto">
+    <div className="flex flex-col gap-3">
+      <TabsList className="grid h-11 w-full shrink-0 grid-cols-4 gap-1 overflow-hidden rounded-xl border bg-muted/30 p-1">
         {tabs.map((tab) => (
           <TabsTrigger
             key={tab.value}
@@ -83,13 +83,16 @@ export function WorkspaceAccessTabsToolbar({
             className={TAB_TRIGGER_CLASS}
           >
             {tab.icon}
-            {tab.label}
+            <span className="hidden min-w-0 truncate sm:inline">
+              {tab.label}
+            </span>
+            <span className="sr-only sm:hidden">{tab.label}</span>
           </TabsTrigger>
         ))}
       </TabsList>
 
-      <div className="flex w-full shrink-0 flex-col gap-2 sm:flex-row lg:w-auto">
-        <div className="relative min-w-0 sm:min-w-[280px]">
+      <div className="flex w-full min-w-0 gap-2">
+        <div className="relative min-w-0 flex-1">
           <Search className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
           <Input
             value={search}
@@ -99,11 +102,20 @@ export function WorkspaceAccessTabsToolbar({
           />
         </div>
         {activeTab === 'people' ? (
-          <Button disabled={!canInvite} onClick={onInviteClick}>
-            <UserPlus className="mr-2 h-4 w-4" />
-            {disableInvite
-              ? t('ws-members.invite_member_disabled')
-              : t('ws-members.invite_member')}
+          <Button
+            disabled={!canInvite}
+            onClick={onInviteClick}
+            className="shrink-0 px-3 sm:px-4"
+          >
+            <UserPlus className="size-4 sm:mr-2" />
+            <span className="hidden sm:inline">
+              {disableInvite
+                ? t('ws-members.invite_member_disabled')
+                : t('ws-members.invite_member')}
+            </span>
+            <span className="sr-only sm:hidden">
+              {t('ws-members.invite_member')}
+            </span>
           </Button>
         ) : null}
       </div>

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

@@ -23,11 +23,13 @@ export function normalizeWorkspaceSwitchPath(
   pathname: string,
   nextSlug: string
 ) {
-  const taskBoardsPath = `/${nextSlug}/tasks/boards`;
+  const taskBoardPaths = [`/${nextSlug}/boards`, `/${nextSlug}/tasks/boards`];
 
   if (
-    pathname === taskBoardsPath ||
-    pathname.startsWith(`${taskBoardsPath}/`)
+    taskBoardPaths.some(
+      (taskBoardsPath) =>
+        pathname === taskBoardsPath || pathname.startsWith(`${taskBoardsPath}/`)
+    )
   ) {
     return `/${nextSlug}/tasks`;
   }

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

@@ -0,0 +1,46 @@
+'use client';
+
+import {
+  createContext,
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+  useContext,
+  useEffect,
+} from 'react';
+
+const WorkspaceSelectRevealContext = createContext<boolean | null>(null);
+
+export function WorkspaceSelectRevealProvider({
+  children,
+  revealed,
+}: {
+  children: ReactNode;
+  revealed: boolean;
+}) {
+  return (
+    <WorkspaceSelectRevealContext.Provider value={revealed}>
+      {children}
+    </WorkspaceSelectRevealContext.Provider>
+  );
+}
+
+export function useOpenWorkspaceSelectWhenRevealed(
+  hasSelectableWorkspaces: boolean,
+  setOpen: Dispatch<SetStateAction<boolean>>
+) {
+  const revealed = useContext(WorkspaceSelectRevealContext);
+
+  useEffect(() => {
+    if (revealed === null) return;
+
+    if (!revealed) {
+      setOpen(false);
+      return;
+    }
+
+    if (revealed && hasSelectableWorkspaces) {
+      setOpen(true);
+    }
+  }, [hasSelectableWorkspaces, revealed, setOpen]);
+}

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

@@ -72,6 +72,7 @@ import {
   mergeWorkspaceSelectWorkspaces,
   normalizeWorkspaceSwitchPath,
 } from './workspace-select-helpers';
+import { useOpenWorkspaceSelectWhenRevealed } from './workspace-select-reveal';
 
 const FormSchema = z.object({
   name: z.string().min(1).max(100),
@@ -156,6 +157,8 @@ export function WorkspaceSelect({
   createWorkspaceDescription,
   fallbackLogoUrl = TUTURUUU_LOGO_URL,
   resolveNextPathname,
+  triggerClassName,
+  popoverModal = false,
 }: {
   wsId: string;
   hideLeading?: boolean;
@@ -171,6 +174,9 @@ export function WorkspaceSelect({
     currentPathname: string;
     nextSlug: string;
   }) => string;
+  triggerClassName?: string;
+  /** Keep the picker interactive and scrollable when rendered inside a modal. */
+  popoverModal?: boolean;
 }) {
   const t = useTranslations();
   const router = useRouter();
@@ -444,6 +450,9 @@ export function WorkspaceSelect({
     }
   };
 
+  const hasSelectableWorkspaces = workspaces.length > 0;
+  useOpenWorkspaceSelectWhenRevealed(hasSelectableWorkspaces, setOpen);
+
   const workspace =
     wsId === PERSONAL_WORKSPACE_SLUG
       ? personalWorkspace
@@ -451,8 +460,6 @@ export function WorkspaceSelect({
         guestWorkspaces.find((ws) => ws.id === resolvedWorkspaceId));
   if (!wsId) return <div />;
 
-  const hasSelectableWorkspaces = workspaces.length > 0;
-
   async function onJoinByHandleSubmit(
     formData: z.infer<typeof JoinWorkspaceByHandleFormSchema>
   ) {
@@ -554,7 +561,7 @@ export function WorkspaceSelect({
           setShowNewWorkspaceDialog(open);
         }}
       >
-        <Popover open={open} onOpenChange={setOpen}>
+        <Popover modal={popoverModal} open={open} onOpenChange={setOpen}>
           <PopoverTrigger asChild disabled={!hasSelectableWorkspaces}>
             <Button
               size="xs"
@@ -563,7 +570,8 @@ export function WorkspaceSelect({
               aria-label="Select a workspace"
               className={cn(
                 hideLeading ? 'justify-center p-0' : 'justify-start',
-                'w-full whitespace-normal text-start'
+                'w-full whitespace-normal text-start',
+                triggerClassName
               )}
               disabled={!hasSelectableWorkspaces}
             >
@@ -616,7 +624,7 @@ export function WorkspaceSelect({
           </PopoverTrigger>
           <PopoverContent className="w-full max-w-[16rem] p-0">
             <Command>
-              <CommandInput placeholder="Search workspace..." />
+              <CommandInput autoFocus placeholder="Search workspace..." />
               <CommandEmpty>No workspace found.</CommandEmpty>
               <CommandList className="max-h-64">
                 {groups.map((group) => (

package/src/components/ui/finance/shared/charts/monthly-total-chart-client.tsx

@@ -310,7 +310,7 @@ export function MonthlyTotalChartClient({
                   return Intl.DateTimeFormat(locale, {
                     month: 'long',
                     year: 'numeric',
-                  }).format(new Date(value));
+                  }).format(new Date(String(value ?? '')));
                 } catch {
                   return value;
                 }

package/src/components/ui/finance/shared/charts/monthly-total-chart.tsx

@@ -215,7 +215,7 @@ export function MonthlyTotalChart({
                   return Intl.DateTimeFormat(locale, {
                     month: 'long',
                     year: 'numeric',
-                  }).format(new Date(value));
+                  }).format(new Date(String(value ?? '')));
                 } catch {
                   return value;
                 }

package/src/components/ui/storefront/cart-summary.tsx

@@ -3,7 +3,7 @@
 import { ArrowRight, ShoppingCart } from '@tuturuuu/icons';
 import type { InventoryStorefront } from '@tuturuuu/internal-api/inventory';
 import { cn } from '@tuturuuu/utils/format';
-import type { FormEvent } from 'react';
+import type { FormEvent, ReactNode } from 'react';
 import { Badge } from '../badge';
 import { AccentButton } from './accent-button';
 import {
@@ -25,6 +25,8 @@ type StorefrontCartSummaryVariant = 'checkout' | 'panel' | 'popover';
 export function StorefrontCartSummary({
   buyerDefaults,
   cartEntries,
+  checkoutBlocked = false,
+  checkoutFields,
   checkoutHref,
   className,
   currency,
@@ -43,6 +45,8 @@ export function StorefrontCartSummary({
 }: {
   buyerDefaults?: StorefrontBuyerDefaults;
   cartEntries: StorefrontCartEntry[];
+  checkoutBlocked?: boolean;
+  checkoutFields?: ReactNode;
   checkoutHref?: string;
   className?: string;
   currency: string;
@@ -63,7 +67,11 @@ export function StorefrontCartSummary({
   const hasCart = cartEntries.length > 0;
   const isCheckoutDisabled = storefront.checkoutMode === 'disabled';
   const submitDisabled =
-    !hasCart || isSubmitting || isCheckoutDisabled || !onCheckoutSubmit;
+    !hasCart ||
+    isSubmitting ||
+    isCheckoutDisabled ||
+    checkoutBlocked ||
+    !onCheckoutSubmit;
   const canOpenCheckout = hasCart && Boolean(checkoutHref || onCheckoutOpen);
 
   if (presentation === 'checkout') {
@@ -101,6 +109,8 @@ export function StorefrontCartSummary({
             />
           </CheckoutSection>
 
+          {checkoutFields}
+
           <AccentButton disabled={submitDisabled} radius={radius}>
             {isSubmitting ? labels.reserving : labels.reserve}
             <ArrowRight className="size-4 shrink-0" />

package/src/components/ui/storefront/storefront-surface.test.tsx

@@ -485,6 +485,27 @@ describe('StorefrontSurface', () => {
     expect(screen.getByLabelText('Email')).toBeEnabled();
   });
 
+  it('shows checkout routing guidance and blocks dispatch until it is ready', () => {
+    render(
+      <StorefrontSurface
+        cartLines={[{ listingId: listing.id, quantity: 1 }]}
+        checkoutBlocked
+        checkoutFields={<div>Choose an approved payment station</div>}
+        listings={[listing]}
+        mode="checkout"
+        onCheckoutSubmit={() => undefined}
+        storefront={{ ...storefront, checkoutMode: 'square_terminal' }}
+      />
+    );
+
+    expect(
+      screen.getByText('Choose an approved payment station')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Reserve with Polar' })
+    ).toBeDisabled();
+  });
+
   it('keeps simulated storefront chrome customer-facing', () => {
     render(
       <StorefrontSurface

package/src/components/ui/storefront/storefront-surface.tsx

@@ -50,6 +50,8 @@ export function StorefrontSurface({
   buyerDefaults,
   cartLines = [],
   cartHref,
+  checkoutBlocked = false,
+  checkoutFields,
   checkoutOpen,
   checkoutHref,
   className,
@@ -83,6 +85,8 @@ export function StorefrontSurface({
   buyerDefaults?: StorefrontBuyerDefaults;
   cartLines?: StorefrontCartLine[];
   cartHref?: string;
+  checkoutBlocked?: boolean;
+  checkoutFields?: ReactNode;
   checkoutOpen?: boolean;
   checkoutHref?: string;
   className?: string;
@@ -269,6 +273,8 @@ export function StorefrontSurface({
     <StorefrontCartSummary
       buyerDefaults={buyerDefaults}
       cartEntries={checkoutEntries}
+      checkoutBlocked={checkoutBlocked}
+      checkoutFields={checkoutFields}
       checkoutHref={checkoutHref}
       currency={currency}
       isCheckout