@tuturuuu/ui 0.19.1 → 0.20.1

package/src/components/ui/custom/locale-preference.ts

@@ -0,0 +1,32 @@
+import {
+  getSharedAndHostOnlyCookieDeleteOptions,
+  getTuturuuuBrowserSharedCookieOptions,
+} from '@tuturuuu/utils/shared-cookie';
+import { deleteCookie, setCookie } from 'cookies-next';
+
+export const DEFAULT_LOCALE_COOKIE_NAME = 'NEXT_LOCALE';
+
+const LOCALE_COOKIE_OPTIONS = {
+  maxAge: 365 * 24 * 60 * 60,
+  path: '/',
+  sameSite: 'lax',
+} as const;
+
+export function persistLocalePreference(
+  locale: string,
+  cookieName = DEFAULT_LOCALE_COOKIE_NAME
+) {
+  setCookie(
+    cookieName,
+    locale,
+    getTuturuuuBrowserSharedCookieOptions(LOCALE_COOKIE_OPTIONS)
+  );
+}
+
+export function clearLocalePreference(cookieName = DEFAULT_LOCALE_COOKIE_NAME) {
+  for (const options of getSharedAndHostOnlyCookieDeleteOptions(
+    LOCALE_COOKIE_OPTIONS
+  )) {
+    deleteCookie(cookieName, options);
+  }
+}

package/src/components/ui/custom/settings/appearance-settings.tsx

@@ -15,6 +15,7 @@ import { useRouter } from 'next/navigation';
 import { useLocale, useTranslations } from 'next-intl';
 import { useTheme } from 'next-themes';
 import { useTransition } from 'react';
+import { persistLocalePreference } from '../locale-preference';
 import { VersionBadgeSetting } from '../version-badge';
 
 /**
@@ -33,20 +34,11 @@ export function AppearanceSettings({
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
 
-  const handleLocaleChange = async (newLocale: string) => {
-    const res = await fetch('/api/v1/infrastructure/languages', {
-      method: 'POST',
-      body: JSON.stringify({ locale: newLocale }),
-      headers: {
-        'Content-Type': 'application/json',
-      },
+  const handleLocaleChange = (newLocale: string) => {
+    persistLocalePreference(newLocale);
+    startTransition(() => {
+      router.refresh();
     });
-
-    if (res.ok) {
-      startTransition(() => {
-        router.refresh();
-      });
-    }
   };
 
   return (

package/src/components/ui/custom/settings-dialog-shell.tsx

@@ -60,8 +60,9 @@ import {
 } from '@tuturuuu/ui/sidebar';
 import { cn } from '@tuturuuu/utils/format';
 import { useTranslations } from 'next-intl';
+import { parseAsString, useQueryState } from 'nuqs';
 import type { ComponentType, KeyboardEvent, ReactNode } from 'react';
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { createSettingsSearchEngine } from './settings-dialog-search';
 import { loadSettingsSearchEngine } from './settings-dialog-search-loader';
 
@@ -99,6 +100,8 @@ export interface SettingsDialogShellProps {
   expandAllAccordions?: boolean;
   /** Enable dialog-scoped keyboard shortcuts for search and tab navigation */
   keyboardNavigation?: boolean;
+  /** Optional context control that replaces the active group breadcrumb */
+  activeGroupBreadcrumb?: ReactNode;
   /** Content to render in the main area */
   children: ReactNode;
 }
@@ -134,6 +137,7 @@ export function SettingsDialogShell({
   primaryGroupLabels,
   expandAllAccordions = true,
   keyboardNavigation = false,
+  activeGroupBreadcrumb,
   children,
 }: SettingsDialogShellProps) {
   const t = useTranslations();
@@ -145,6 +149,14 @@ export function SettingsDialogShell({
   const [searchEngineFactory, setSearchEngineFactory] =
     useState<SettingsSearchEngineFactory | null>(null);
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
+  const [persistedTab, setPersistedTab] = useQueryState(
+    'settingsTab',
+    parseAsString.withOptions({
+      history: 'replace',
+      shallow: true,
+      scroll: false,
+    })
+  );
 
   const searchEngine = useMemo<SettingsSearchEngine | null>(
     () => searchEngineFactory?.(navItems) ?? null,
@@ -165,6 +177,23 @@ export function SettingsDialogShell({
     allNavItems.find((item) => !item.disabled) ||
     allNavItems[0];
   const showContentHeader = !activeItem?.hideContentHeader;
+  const persistedItem = allNavItems.find(
+    (item) => !item.disabled && item.name === persistedTab
+  );
+
+  useEffect(() => {
+    if (persistedItem && persistedItem.name !== activeTab) {
+      onActiveTabChange(persistedItem.name);
+    }
+  }, [activeTab, onActiveTabChange, persistedItem]);
+
+  const selectActiveTab = useCallback(
+    (tab: string) => {
+      onActiveTabChange(tab);
+      void setPersistedTab(tab);
+    },
+    [onActiveTabChange, setPersistedTab]
+  );
 
   const ensureSearchEngine = useCallback(() => {
     if (searchEngineFactory || searchEngineLoadRef.current) return;
@@ -224,9 +253,9 @@ export function SettingsDialogShell({
   const changeActiveItem = useCallback(
     (targetIndex: number) => {
       const targetItem = filteredEnabledItems[targetIndex];
-      if (targetItem) onActiveTabChange(targetItem.name);
+      if (targetItem) selectActiveTab(targetItem.name);
     },
-    [filteredEnabledItems, onActiveTabChange]
+    [filteredEnabledItems, selectActiveTab]
   );
 
   const moveActiveItem = useCallback(
@@ -375,7 +404,7 @@ export function SettingsDialogShell({
                               isActive={activeTab === item.name}
                               onClick={() => {
                                 if (!item.disabled) {
-                                  onActiveTabChange(item.name);
+                                  selectActiveTab(item.name);
                                 }
                               }}
                               className={cn(
@@ -454,7 +483,7 @@ export function SettingsDialogShell({
                                 value={`${group.label} ${item.label} ${item.description || ''} ${item.keywords?.join(' ') || ''} ${item.aliases?.join(' ') || ''} ${item.searchLabels?.join(' ') || ''}`}
                                 onSelect={() => {
                                   if (item.disabled) return;
-                                  onActiveTabChange(item.name);
+                                  selectActiveTab(item.name);
                                   setMobileNavOpen(false);
                                 }}
                                 className={cn(
@@ -491,10 +520,12 @@ export function SettingsDialogShell({
                   <BreadcrumbSeparator />
                   {activeGroup && (
                     <>
-                      <BreadcrumbItem>
-                        <BreadcrumbPage className="text-muted-foreground">
-                          {activeGroup.label}
-                        </BreadcrumbPage>
+                      <BreadcrumbItem data-testid="settings-active-group-breadcrumb">
+                        {activeGroupBreadcrumb ?? (
+                          <BreadcrumbPage className="text-muted-foreground">
+                            {activeGroup.label}
+                          </BreadcrumbPage>
+                        )}
                       </BreadcrumbItem>
                       <BreadcrumbSeparator />
                     </>

package/src/components/ui/custom/structure.tsx

@@ -17,6 +17,7 @@ interface StructureProps {
   sidebarContent?: ReactNode;
   actions?: ReactNode;
   userPopover?: ReactNode;
+  sidebarUtility?: ReactNode;
   feedbackButton?: ReactNode;
   children: ReactNode;
   onMouseEnter?: () => void;
@@ -39,6 +40,7 @@ export function Structure({
   sidebarContent,
   actions,
   userPopover,
+  sidebarUtility,
   feedbackButton,
   children,
   onMouseEnter,
@@ -163,6 +165,16 @@ export function Structure({
               <div className="scrollbar-none flex flex-1 flex-col gap-y-1 overflow-y-auto overflow-x-hidden overscroll-contain">
                 {sidebarContent}
               </div>
+              {sidebarUtility && (
+                <div
+                  className={cn(
+                    'flex border-foreground/10 border-t p-2',
+                    isCollapsed ? 'justify-center' : ''
+                  )}
+                >
+                  {sidebarUtility}
+                </div>
+              )}
               {feedbackButton && (
                 <div
                   className={cn(

package/src/components/ui/custom/system-language-dropdown-item.tsx

@@ -4,6 +4,7 @@ import { Check, Monitor } from '@tuturuuu/icons';
 import { useRouter } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { DropdownMenuItem } from '../dropdown-menu';
+import { clearLocalePreference } from './locale-preference';
 
 interface Props {
   selected?: boolean;
@@ -21,12 +22,8 @@ export function SystemLanguageDropdownItem({ selected, onResetLocale }: Props) {
       return;
     }
 
-    // Default: API-based locale reset (web pattern)
-    const res = await fetch('/api/v1/infrastructure/languages', {
-      method: 'DELETE',
-    });
-
-    if (res.ok) router.refresh();
+    clearLocalePreference();
+    router.refresh();
   };
 
   return (

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

@@ -1,5 +1,8 @@
 import { describe, expect, it } from 'vitest';
-import { normalizeWorkspaceAccessRole } from './adapters';
+import {
+  createStandardWorkspaceAccessAdapter,
+  normalizeWorkspaceAccessRole,
+} from './adapters';
 
 describe('workspace access adapters', () => {
   it('normalizes role permissions into the shared access role shape', () => {
@@ -28,4 +31,10 @@ describe('workspace access adapters', () => {
       ws_id: 'ws_123',
     });
   });
+
+  it('exposes linked workspace profile updates to every standard satellite app', () => {
+    expect(
+      createStandardWorkspaceAccessAdapter().updateMemberProfile
+    ).toBeTypeOf('function');
+  });
 });

package/src/components/ui/custom/workspace-access/adapters.ts

@@ -25,6 +25,7 @@ import {
   inviteWorkspaceMember,
   listEnhancedWorkspaceMembers,
   removeWorkspaceMember,
+  updateWorkspaceMemberProfile,
 } from '@tuturuuu/internal-api/workspaces';
 import type { WorkspaceRole } from '@tuturuuu/types';
 import type {
@@ -64,12 +65,18 @@ async function inviteStandardWorkspaceMembers(
   payload: WorkspaceAccessInvitePayload
 ) {
   const results = await Promise.allSettled(
-    payload.emails.map((email) =>
-      inviteWorkspaceMember(workspaceId, {
+    payload.emails.map((email) => {
+      const invitePayload: Parameters<typeof inviteWorkspaceMember>[1] & {
+        accessPreset?: 'guest' | 'member' | 'pos_operator';
+        confirmDefaultAdminMigration?: boolean;
+      } = {
+        accessPreset: payload.accessPreset,
+        confirmDefaultAdminMigration: payload.confirmDefaultAdminMigration,
         email,
         memberType: payload.memberType,
-      })
-    )
+      };
+      return inviteWorkspaceMember(workspaceId, invitePayload);
+    })
   );
   const successCount = results.filter(
     (result) => result.status === 'fulfilled'
@@ -100,6 +107,30 @@ export function createStandardWorkspaceAccessAdapter(): WorkspaceAccessAdapter {
       normalizeWorkspaceAccessRole(
         await getWorkspaceDefaultPermissions(workspaceId, memberType)
       ),
+    hardenDefaultAdmin: async (
+      workspaceId,
+      { memberIds, permissions, roleId, roleName }
+    ) => {
+      const role = roleId
+        ? { id: roleId, message: 'existing' }
+        : await createWorkspaceRole(workspaceId, {
+            name: roleName,
+            permissions,
+          } as WorkspaceRole);
+
+      if (memberIds.length > 0) {
+        await addRoleMembers(workspaceId, role.id, memberIds);
+      }
+
+      await updateWorkspaceDefaultPermissions(workspaceId, 'MEMBER', {
+        permissions: permissions.map((permission) => ({
+          ...permission,
+          enabled: false,
+        })) as WorkspaceRole['permissions'],
+      });
+
+      return role;
+    },
     inviteMembers: inviteStandardWorkspaceMembers,
     listMembers: listEnhancedWorkspaceMembers,
     listRoles: async (workspaceId, query) => {
@@ -116,6 +147,7 @@ export function createStandardWorkspaceAccessAdapter(): WorkspaceAccessAdapter {
     },
     removeMember: removeWorkspaceMember,
     removeRoleMember,
+    updateMemberProfile: updateWorkspaceMemberProfile,
     updateDefaultRole: (workspaceId, memberType, payload) =>
       updateWorkspaceDefaultPermissions(workspaceId, memberType, {
         permissions: payload.permissions as WorkspaceRole['permissions'],

package/src/components/ui/custom/workspace-access/member-filter-utils.test.ts

@@ -5,6 +5,7 @@ import {
   getEffectiveMemberPermissionIds,
   getMemberFilterOptions,
   parseInviteEmails,
+  shouldShowProtectedMemberStatus,
 } from './member-filter-utils';
 
 function member(
@@ -172,4 +173,17 @@ describe('workspace access member filter utilities', () => {
 
     expect([...getEffectiveMemberPermissionIds(disabled)]).toEqual([]);
   });
+
+  it('only labels the actual creator as a protected member', () => {
+    expect(
+      shouldShowProtectedMemberStatus({
+        isCreator: true,
+      })
+    ).toBe(true);
+    expect(
+      shouldShowProtectedMemberStatus({
+        isCreator: false,
+      })
+    ).toBe(false);
+  });
 });

package/src/components/ui/custom/workspace-access/member-filter-utils.ts

@@ -60,6 +60,14 @@ export function getAvailableRolesForMember(
   );
 }
 
+export function shouldShowProtectedMemberStatus({
+  isCreator,
+}: {
+  isCreator: boolean;
+}) {
+  return isCreator;
+}
+
 export function sortMembers(
   members: InternalApiEnhancedWorkspaceMember[]
 ): InternalApiEnhancedWorkspaceMember[] {

package/src/components/ui/custom/workspace-access/types.ts

@@ -52,6 +52,8 @@ export type WorkspaceAccessRolePayload = {
 };
 
 export type WorkspaceAccessInvitePayload = {
+  accessPreset: 'guest' | 'member' | 'pos_operator';
+  confirmDefaultAdminMigration?: boolean;
   emails: string[];
   memberType: WorkspaceDefaultPermissionMemberType;
 };
@@ -72,6 +74,15 @@ export type WorkspaceAccessAdapter = {
     workspaceId: string,
     memberType: WorkspaceDefaultPermissionMemberType
   ) => Promise<WorkspaceAccessRole>;
+  hardenDefaultAdmin?: (
+    workspaceId: string,
+    payload: {
+      memberIds: string[];
+      permissions: WorkspaceAccessRolePermission[];
+      roleId?: string;
+      roleName: string;
+    }
+  ) => Promise<unknown>;
   inviteMembers: (
     workspaceId: string,
     payload: WorkspaceAccessInvitePayload
@@ -93,6 +104,14 @@ export type WorkspaceAccessAdapter = {
     roleId: string,
     userId: string
   ) => Promise<unknown>;
+  updateMemberProfile?: (
+    workspaceId: string,
+    payload: {
+      displayName: string | null;
+      email?: null | string;
+      userId?: null | string;
+    }
+  ) => Promise<unknown>;
   updateDefaultRole: (
     workspaceId: string,
     memberType: WorkspaceDefaultPermissionMemberType,
@@ -111,6 +130,7 @@ export type WorkspaceAccessPageProps = {
   initialContext: WorkspaceAccessContext;
   initialTab?: WorkspaceAccessTab;
   mode?: WorkspaceAccessMode;
+  showHeader?: boolean;
 };
 
 export type WorkspaceAccessRoleEditorState =

package/src/components/ui/custom/workspace-access/workspace-access-context.test.tsx

@@ -0,0 +1,111 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, screen, waitFor } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import type { WorkspaceAccessAdapter } from './types';
+import { WorkspaceAccessPage } from './workspace-access-page';
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+const WS_ID = 'ws-1';
+
+function createAdapter(
+  overrides: Partial<WorkspaceAccessAdapter> = {}
+): WorkspaceAccessAdapter {
+  return {
+    addRoleMembers: vi.fn(),
+    createRole: vi.fn(),
+    deleteRole: vi.fn(),
+    getDefaultRole: vi.fn().mockResolvedValue({
+      id: 'default',
+      name: 'default',
+      permissions: [],
+    }),
+    hardenDefaultAdmin: vi.fn(),
+    inviteMembers: vi.fn(),
+    listMembers: vi.fn().mockResolvedValue([]),
+    listRoles: vi.fn().mockResolvedValue({ count: 0, data: [] }),
+    removeMember: vi.fn(),
+    removeRoleMember: vi.fn(),
+    updateDefaultRole: vi.fn(),
+    updateMemberProfile: vi.fn(),
+    updateRole: vi.fn(),
+    ...overrides,
+  } as unknown as WorkspaceAccessAdapter;
+}
+
+function renderPage(canManageRoles: boolean, adapter: WorkspaceAccessAdapter) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+
+  const ui = (props: { canManageRoles: boolean }) => (
+    <QueryClientProvider client={queryClient}>
+      <WorkspaceAccessPage
+        adapter={adapter}
+        initialContext={{
+          canManageMembers: true,
+          canManageRoles: props.canManageRoles,
+          currentUserEmail: 'admin@example.com',
+          workspaceId: WS_ID,
+        }}
+        initialTab="people"
+      />
+    </QueryClientProvider>
+  );
+
+  const view = render(ui({ canManageRoles }) as ReactNode);
+
+  return {
+    ...view,
+    setCanManageRoles: (next: boolean) =>
+      view.rerender(ui({ canManageRoles: next }) as ReactNode),
+  };
+}
+
+// The tabs are Radix triggers (role="tab"); roles is the second of four, and its
+// label comes from the adapter's label set rather than a fixed string.
+function rolesTab() {
+  return screen.getAllByRole('tab')[1];
+}
+
+describe('WorkspaceAccessPage permission context', () => {
+  // Regression: callers resolve `manage_workspace_roles` asynchronously, so the
+  // first render says false. The context used to be seeded into a disabled query
+  // and served from there forever, which left admins with a Roles tab that never
+  // enabled — no amount of waiting helped, only a full reload.
+  it('follows the caller once the roles permission resolves', async () => {
+    const { setCanManageRoles } = renderPage(false, createAdapter());
+
+    await waitFor(() => expect(rolesTab()).toBeDefined());
+    expect(rolesTab()).toBeDisabled();
+
+    setCanManageRoles(true);
+
+    await waitFor(() => expect(rolesTab()).not.toBeDisabled());
+  });
+
+  // An adapter that fetches its own context (the external-project/CMS one) keeps
+  // reading through the query, seeded by the server-resolved context it is handed.
+  it('leaves a context-fetching adapter on its own query', async () => {
+    const getContext = vi.fn().mockResolvedValue({
+      canManageMembers: true,
+      canManageRoles: true,
+      currentUserEmail: 'admin@example.com',
+      workspaceId: WS_ID,
+    });
+
+    const { setCanManageRoles } = renderPage(
+      true,
+      createAdapter({ getContext })
+    );
+
+    await waitFor(() => expect(rolesTab()).not.toBeDisabled());
+
+    // Prop churn does not yank control away from the adapter's own context.
+    setCanManageRoles(false);
+    await waitFor(() => expect(rolesTab()).not.toBeDisabled());
+  });
+});

package/src/components/ui/custom/workspace-access/workspace-access-default-role-card.tsx

@@ -30,7 +30,10 @@ export function WorkspaceAccessDefaultRoleCard({
 }) {
   const t = useTranslations() as (key: string) => string;
   const isGuest = memberType === 'GUEST';
-  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) : 0;
   const accent = isGuest
@@ -39,8 +42,8 @@ export function WorkspaceAccessDefaultRoleCard({
   const barColor = isGuest ? 'bg-dynamic-blue' : 'bg-dynamic-green';
 
   return (
-    <div className="rounded-xl border border-border bg-background p-5">
-      <div className="flex flex-wrap items-start justify-between gap-3">
+    <div className="rounded-xl border border-border bg-background p-4 sm:p-5">
+      <div className="flex items-start justify-between gap-3">
         <div className="flex min-w-0 gap-3">
           <div
             className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border ${accent}`}
@@ -68,10 +71,12 @@ export function WorkspaceAccessDefaultRoleCard({
           <Button
             variant="outline"
             size="sm"
+            className="size-9 shrink-0 px-0 sm:w-auto sm:px-3"
             onClick={() => onEdit(memberType)}
           >
-            <Pencil className="mr-2 h-4 w-4" />
-            {t('common.edit')}
+            <Pencil className="size-4 sm:mr-2" />
+            <span className="hidden sm:inline">{t('common.edit')}</span>
+            <span className="sr-only sm:hidden">{t('common.edit')}</span>
           </Button>
         ) : null}
       </div>
@@ -109,6 +114,11 @@ export function WorkspaceAccessDefaultRoleCard({
                 role={role}
               />
             </div>
+            {isAdministrator ? (
+              <p className="text-dynamic-green text-sm">
+                {t('ws-members.admin_has_all_permissions')}
+              </p>
+            ) : null}
           </>
         )}
       </div>