@tuturuuu/ui 0.9.0 → 0.10.0

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

@@ -1,6 +1,13 @@
 'use client';
 
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  TASK_NAVIGATION_GOALS_CONFIG_ID,
+  TASK_NAVIGATION_IMPORT_CONFIG_ID,
+  TASK_NAVIGATION_LEADERBOARDS_CONFIG_ID,
+  TASK_NAVIGATION_PROGRESS_CONFIG_ID,
+  TASK_NAVIGATION_STATS_CONFIG_ID,
+} from '@tuturuuu/internal-api/users';
 import type { Workspace } from '@tuturuuu/types';
 import { SettingItemTab } from '@tuturuuu/ui/custom/settings-item-tab';
 import {
@@ -85,6 +92,36 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
     isLoading: showReviewDueDatesLoading,
     isPending: showReviewDueDatesPending,
   } = useUserBooleanConfig(TASKS_SHOW_REVIEW_DUE_DATES_CONFIG_ID, false);
+  const {
+    value: showTaskProgressNavigation,
+    setValue: setShowTaskProgressNavigation,
+    isLoading: showTaskProgressNavigationLoading,
+    isPending: showTaskProgressNavigationPending,
+  } = useUserBooleanConfig(TASK_NAVIGATION_PROGRESS_CONFIG_ID, false);
+  const {
+    value: showTaskGoalsNavigation,
+    setValue: setShowTaskGoalsNavigation,
+    isLoading: showTaskGoalsNavigationLoading,
+    isPending: showTaskGoalsNavigationPending,
+  } = useUserBooleanConfig(TASK_NAVIGATION_GOALS_CONFIG_ID, false);
+  const {
+    value: showTaskStatsNavigation,
+    setValue: setShowTaskStatsNavigation,
+    isLoading: showTaskStatsNavigationLoading,
+    isPending: showTaskStatsNavigationPending,
+  } = useUserBooleanConfig(TASK_NAVIGATION_STATS_CONFIG_ID, false);
+  const {
+    value: showTaskLeaderboardsNavigation,
+    setValue: setShowTaskLeaderboardsNavigation,
+    isLoading: showTaskLeaderboardsNavigationLoading,
+    isPending: showTaskLeaderboardsNavigationPending,
+  } = useUserBooleanConfig(TASK_NAVIGATION_LEADERBOARDS_CONFIG_ID, false);
+  const {
+    value: showTaskImportNavigation,
+    setValue: setShowTaskImportNavigation,
+    isLoading: showTaskImportNavigationLoading,
+    isPending: showTaskImportNavigationPending,
+  } = useUserBooleanConfig(TASK_NAVIGATION_IMPORT_CONFIG_ID, false);
   const {
     value: soundEffectsEnabled,
     setValue: setSoundEffectsEnabled,
@@ -346,6 +383,73 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
           />
         </SettingItemTab>
         <Separator />
+        <SettingItemTab
+          title={t('navigation_progress')}
+          description={t('navigation_progress_description')}
+        >
+          <Switch
+            checked={showTaskProgressNavigation}
+            onCheckedChange={setShowTaskProgressNavigation}
+            disabled={
+              showTaskProgressNavigationLoading ||
+              showTaskProgressNavigationPending
+            }
+          />
+        </SettingItemTab>
+        <Separator />
+        <SettingItemTab
+          title={t('navigation_goals')}
+          description={t('navigation_goals_description')}
+        >
+          <Switch
+            checked={showTaskGoalsNavigation}
+            onCheckedChange={setShowTaskGoalsNavigation}
+            disabled={
+              showTaskGoalsNavigationLoading || showTaskGoalsNavigationPending
+            }
+          />
+        </SettingItemTab>
+        <Separator />
+        <SettingItemTab
+          title={t('navigation_stats')}
+          description={t('navigation_stats_description')}
+        >
+          <Switch
+            checked={showTaskStatsNavigation}
+            onCheckedChange={setShowTaskStatsNavigation}
+            disabled={
+              showTaskStatsNavigationLoading || showTaskStatsNavigationPending
+            }
+          />
+        </SettingItemTab>
+        <Separator />
+        <SettingItemTab
+          title={t('navigation_leaderboards')}
+          description={t('navigation_leaderboards_description')}
+        >
+          <Switch
+            checked={showTaskLeaderboardsNavigation}
+            onCheckedChange={setShowTaskLeaderboardsNavigation}
+            disabled={
+              showTaskLeaderboardsNavigationLoading ||
+              showTaskLeaderboardsNavigationPending
+            }
+          />
+        </SettingItemTab>
+        <Separator />
+        <SettingItemTab
+          title={t('navigation_import')}
+          description={t('navigation_import_description')}
+        >
+          <Switch
+            checked={showTaskImportNavigation}
+            onCheckedChange={setShowTaskImportNavigation}
+            disabled={
+              showTaskImportNavigationLoading || showTaskImportNavigationPending
+            }
+          />
+        </SettingItemTab>
+        <Separator />
         <SettingItemTab
           title={t('submit_shortcut')}
           description={t('submit_shortcut_description')}

package/src/components/ui/custom/settings-dialog-search-loader.d.ts

@@ -0,0 +1,5 @@
+import type { createSettingsSearchEngine } from './settings-dialog-search';
+
+export function loadSettingsSearchEngine(): Promise<{
+  createSettingsSearchEngine: typeof createSettingsSearchEngine;
+}>;

package/src/components/ui/custom/settings-dialog-search-loader.js

@@ -0,0 +1,3 @@
+export function loadSettingsSearchEngine() {
+  return import('./settings-dialog-search');
+}

package/src/components/ui/custom/settings-dialog-search.ts

@@ -0,0 +1,75 @@
+import { removeAccents } from '@tuturuuu/utils/text-helper';
+import type {
+  SettingsNavGroup,
+  SettingsNavItem,
+} from './settings-dialog-shell';
+
+type IndexedSettingsNavItem = {
+  groupLabel: string;
+  item: SettingsNavItem;
+  normalizedSearchText: string;
+};
+
+function normalizeSearchText(value: string) {
+  return removeAccents(value.toLowerCase());
+}
+
+function getItemSearchText(groupLabel: string, item: SettingsNavItem) {
+  return [
+    groupLabel,
+    item.name,
+    item.label,
+    item.description,
+    ...(item.keywords ?? []),
+    ...(item.aliases ?? []),
+    ...(item.searchLabels ?? []),
+  ]
+    .filter(Boolean)
+    .join(' ');
+}
+
+export function createSettingsSearchEngine(navItems: SettingsNavGroup[]) {
+  const indexedItems: IndexedSettingsNavItem[] = navItems.flatMap((group) =>
+    group.items.map((item) => ({
+      groupLabel: group.label,
+      item,
+      normalizedSearchText: normalizeSearchText(
+        getItemSearchText(group.label, item)
+      ),
+    }))
+  );
+
+  const allItems = indexedItems.map(({ item }) => item);
+
+  function search(query: string) {
+    const normalizedQuery = normalizeSearchText(query.trim());
+    if (!normalizedQuery) return navItems;
+
+    const matchesByName = new Set(
+      indexedItems
+        .filter(({ normalizedSearchText }) =>
+          normalizedSearchText.includes(normalizedQuery)
+        )
+        .map(({ item }) => item.name)
+    );
+
+    return navItems
+      .map((group) => ({
+        ...group,
+        items: group.items.filter((item) => matchesByName.has(item.name)),
+      }))
+      .filter((group) => group.items.length > 0);
+  }
+
+  function getEnabledItems(query = '') {
+    return search(query)
+      .flatMap((group) => group.items)
+      .filter((item) => !item.disabled);
+  }
+
+  return {
+    allItems,
+    getEnabledItems,
+    search,
+  };
+}

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

@@ -53,10 +53,11 @@ import {
   SidebarProvider,
 } from '@tuturuuu/ui/sidebar';
 import { cn } from '@tuturuuu/utils/format';
-import { removeAccents } from '@tuturuuu/utils/text-helper';
 import { useTranslations } from 'next-intl';
 import type { ComponentType, KeyboardEvent, ReactNode } from 'react';
 import { useCallback, useMemo, useRef, useState } from 'react';
+import type { createSettingsSearchEngine } from './settings-dialog-search';
+import { loadSettingsSearchEngine } from './settings-dialog-search-loader';
 
 export interface SettingsNavItem {
   name: string;
@@ -65,6 +66,8 @@ export interface SettingsNavItem {
   description?: string;
   disabled?: boolean;
   keywords?: string[];
+  aliases?: string[];
+  searchLabels?: string[];
 }
 
 export interface SettingsNavGroup {
@@ -93,6 +96,9 @@ export interface SettingsDialogShellProps {
   children: ReactNode;
 }
 
+type SettingsSearchEngine = ReturnType<typeof createSettingsSearchEngine>;
+type SettingsSearchEngineFactory = typeof createSettingsSearchEngine;
+
 function isEditableShortcutTarget(target: EventTarget | null) {
   if (!(target instanceof HTMLElement)) return false;
 
@@ -127,12 +133,20 @@ export function SettingsDialogShell({
   const isMobile = useIsMobile();
   const desktopSearchInputRef = useRef<HTMLInputElement>(null);
   const mobileSearchInputRef = useRef<HTMLInputElement>(null);
+  const searchEngineLoadRef = useRef<Promise<void> | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
+  const [searchEngineFactory, setSearchEngineFactory] =
+    useState<SettingsSearchEngineFactory | null>(null);
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
 
+  const searchEngine = useMemo<SettingsSearchEngine | null>(
+    () => searchEngineFactory?.(navItems) ?? null,
+    [navItems, searchEngineFactory]
+  );
+
   const allNavItems = useMemo(
-    () => navItems.flatMap((group) => group.items),
-    [navItems]
+    () => searchEngine?.allItems ?? navItems.flatMap((group) => group.items),
+    [navItems, searchEngine]
   );
 
   const activeGroup = navItems.find((group) =>
@@ -144,26 +158,39 @@ export function SettingsDialogShell({
     allNavItems.find((item) => !item.disabled) ||
     allNavItems[0];
 
-  const filteredNavItems = navItems
-    .map((group) => {
-      const normalizedQuery = removeAccents(searchQuery.toLowerCase());
-      const filteredItems = group.items.filter(
-        (item) =>
-          removeAccents(item.label.toLowerCase()).includes(normalizedQuery) ||
-          (item.description &&
-            removeAccents(item.description.toLowerCase()).includes(
-              normalizedQuery
-            )) ||
-          item.keywords?.some((keyword) =>
-            removeAccents(keyword.toLowerCase()).includes(normalizedQuery)
-          )
-      );
-      return { ...group, items: filteredItems };
-    })
-    .filter((group) => group.items.length > 0);
+  const ensureSearchEngine = useCallback(() => {
+    if (searchEngineFactory || searchEngineLoadRef.current) return;
+
+    searchEngineLoadRef.current = loadSettingsSearchEngine()
+      .then((module) => {
+        setSearchEngineFactory(() => module.createSettingsSearchEngine);
+      })
+      .finally(() => {
+        searchEngineLoadRef.current = null;
+      });
+  }, [searchEngineFactory]);
 
-  const filteredEnabledItems = filteredNavItems.flatMap((group) =>
-    group.items.filter((item) => !item.disabled)
+  const filteredNavItems = useMemo(
+    () =>
+      searchQuery ? (searchEngine?.search(searchQuery) ?? navItems) : navItems,
+    [navItems, searchEngine, searchQuery]
+  );
+
+  const filteredEnabledItems = useMemo(
+    () =>
+      searchEngine?.getEnabledItems(searchQuery) ??
+      filteredNavItems.flatMap((group) =>
+        group.items.filter((item) => !item.disabled)
+      ),
+    [filteredNavItems, searchEngine, searchQuery]
+  );
+
+  const updateSearchQuery = useCallback(
+    (value: string) => {
+      if (value) ensureSearchEngine();
+      setSearchQuery(value);
+    },
+    [ensureSearchEngine]
   );
 
   const isGroupExpandedByDefault = (groupLabel: string, index: number) => {
@@ -175,14 +202,16 @@ export function SettingsDialogShell({
   const focusSearch = useCallback(() => {
     if (isMobile) {
       setMobileNavOpen(true);
+      ensureSearchEngine();
       requestAnimationFrame(() => {
         mobileSearchInputRef.current?.focus();
       });
       return;
     }
 
+    ensureSearchEngine();
     desktopSearchInputRef.current?.focus();
-  }, [isMobile]);
+  }, [ensureSearchEngine, isMobile]);
 
   const changeActiveItem = useCallback(
     (targetIndex: number) => {
@@ -305,7 +334,8 @@ export function SettingsDialogShell({
                 placeholder={t('settings.search_settings_placeholder')}
                 className="bg-background pl-8"
                 value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
+                onChange={(e) => updateSearchQuery(e.target.value)}
+                onFocus={ensureSearchEngine}
               />
             </div>
           </SidebarHeader>
@@ -403,22 +433,28 @@ export function SettingsDialogShell({
                         {t('search.search')}
                       </DrawerDescription>
                     </DrawerHeader>
-                    <Command className="rounded-none border-0">
+                    <Command
+                      className="rounded-none border-0"
+                      shouldFilter={false}
+                    >
                       <CommandInput
                         ref={mobileSearchInputRef}
+                        value={searchQuery}
+                        onFocus={ensureSearchEngine}
+                        onValueChange={updateSearchQuery}
                         placeholder={t('settings.search_settings_placeholder')}
                       />
                       <CommandList className="max-h-[50vh]">
                         <CommandEmpty>
                           {t('common.no_results_found')}
                         </CommandEmpty>
-                        {navItems.map((group) => (
+                        {filteredNavItems.map((group) => (
                           <CommandGroup key={group.label} heading={group.label}>
                             {group.items.map((item) => (
                               <CommandItem
                                 disabled={item.disabled}
                                 key={item.name}
-                                value={`${group.label} ${item.label} ${item.keywords?.join(' ') || ''}`}
+                                value={`${group.label} ${item.label} ${item.description || ''} ${item.keywords?.join(' ') || ''} ${item.aliases?.join(' ') || ''} ${item.searchLabels?.join(' ') || ''}`}
                                 onSelect={() => {
                                   if (item.disabled) return;
                                   onActiveTabChange(item.name);

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

@@ -18,3 +18,26 @@ export function mergeWorkspaceSelectWorkspaces(
 
   return [...workspaceList, currentWorkspaceFallback];
 }
+
+export function normalizeWorkspaceSwitchPath(
+  pathname: string,
+  nextSlug: string
+) {
+  const taskBoardsPath = `/${nextSlug}/tasks/boards`;
+
+  if (
+    pathname === taskBoardsPath ||
+    pathname.startsWith(`${taskBoardsPath}/`)
+  ) {
+    return `/${nextSlug}/tasks`;
+  }
+
+  const uuidRegex =
+    /\/([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}|[0-9a-fA-F]{32})$/;
+
+  if (uuidRegex.test(pathname) && pathname !== `/${nextSlug}`) {
+    return pathname.replace(uuidRegex, '');
+  }
+
+  return pathname;
+}

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

@@ -66,7 +66,10 @@ import {
 import { Input } from '../input';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 import { TUTURUUU_LOGO_URL } from './tuturuuu-logo';
-import { mergeWorkspaceSelectWorkspaces } from './workspace-select-helpers';
+import {
+  mergeWorkspaceSelectWorkspaces,
+  normalizeWorkspaceSwitchPath,
+} from './workspace-select-helpers';
 
 const FormSchema = z.object({
   name: z.string().min(1).max(100),
@@ -438,22 +441,20 @@ export function WorkspaceSelect({
     const selectedTeam = groups
       .flatMap((group) => group.teams)
       .find((team) => team.value === nextSlug);
-    let newPathname =
-      selectedTeam?.accessType === 'guest' && selectedTeam.guestLandingPath
-        ? `/${nextSlug}${selectedTeam.guestLandingPath}`
-        : pathname
-          ? (resolveNextPathname?.({
-              currentPathname: pathname,
-              nextSlug,
-            }) ?? pathname.replace(/^\/[^/]+/, `/${nextSlug}`))
-          : undefined;
+    const usesGuestLandingPath =
+      selectedTeam?.accessType === 'guest' && selectedTeam.guestLandingPath;
+    let newPathname = usesGuestLandingPath
+      ? `/${nextSlug}${selectedTeam.guestLandingPath}`
+      : pathname
+        ? (resolveNextPathname?.({
+            currentPathname: pathname,
+            nextSlug,
+          }) ?? pathname.replace(/^\/[^/]+/, `/${nextSlug}`))
+        : undefined;
+    if (newPathname && !usesGuestLandingPath) {
+      newPathname = normalizeWorkspaceSwitchPath(newPathname, nextSlug);
+    }
     if (newPathname) {
-      // Regex to match a UUID at the end of the string, with or without dashes
-      const uuidRegex =
-        /\/([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}|[0-9a-fA-F]{32})$/;
-      // Remove the UUID if present, and the current path is not /:wsId
-      if (uuidRegex.test(newPathname) && newPathname !== `/${nextSlug}`)
-        newPathname = newPathname.replace(uuidRegex, '');
       router.push(newPathname);
     }
   };

package/src/components/ui/tu-do/boards/__tests__/board-share-dialog.test.tsx

@@ -195,6 +195,22 @@ describe('BoardShareDialog', () => {
     expect(screen.getByText('pm@example.com')).toBeInTheDocument();
   });
 
+  it('does not crash when viewable members payload is missing members', async () => {
+    listWorkspaceTaskBoardViewableMembersMock.mockResolvedValue({});
+
+    renderBoardShareDialog();
+
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: /ws-task-boards.share.workspace_members.title/,
+      })
+    );
+
+    expect(
+      await screen.findByText('ws-task-boards.share.workspace_members.empty')
+    ).toBeInTheDocument();
+  });
+
   it('keeps direct board guests first-class for invite, update, and remove', async () => {
     listWorkspaceTaskBoardSharesMock.mockResolvedValue({
       shares: [

package/src/components/ui/tu-do/boards/__tests__/task-board-form.test.tsx

@@ -104,6 +104,18 @@ describe('TaskBoardForm', () => {
     });
   });
 
+  it('uses the surface background for the board name input', () => {
+    render(
+      <QueryClientProvider client={queryClient}>
+        <TaskBoardForm wsId="ws-1" onFinish={vi.fn()} />
+      </QueryClientProvider>
+    );
+
+    expect(screen.getByLabelText('ws-task-boards.name')).toHaveClass(
+      'bg-background'
+    );
+  });
+
   it('shows the localized duplicate-name message when the API rejects a duplicate board name', async () => {
     mutateAsync.mockRejectedValueOnce({
       code: 'TASK_BOARD_NAME_EXISTS',