@tuturuuu/ui 0.8.0 → 0.10.0

package/src/components/ui/custom/nav-link.test.tsx

@@ -0,0 +1,165 @@
+import '@testing-library/jest-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { ComponentProps } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { NavLink } from './nav-link';
+
+const navigationState = vi.hoisted(() => ({
+  pathname: '/personal/tasks',
+}));
+
+vi.mock('next/navigation', () => ({
+  usePathname: () => navigationState.pathname,
+}));
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock('@tuturuuu/internal-api', () => ({
+  getWorkspaceConfigIdList: vi.fn(),
+}));
+
+function renderNavLink(
+  link: ComponentProps<typeof NavLink>['link'],
+  props: Partial<
+    Pick<ComponentProps<typeof NavLink>, 'onClick' | 'onSubMenuClick'>
+  > = {}
+) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <NavLink
+        wsId="personal"
+        link={link}
+        isCollapsed={false}
+        onClick={props.onClick ?? vi.fn()}
+        onSubMenuClick={props.onSubMenuClick ?? vi.fn()}
+      />
+    </QueryClientProvider>
+  );
+}
+
+describe('NavLink', () => {
+  beforeEach(() => {
+    navigationState.pathname = '/personal/tasks';
+    vi.restoreAllMocks();
+  });
+
+  it('matches wildcard aliases even when the primary route is exact', () => {
+    navigationState.pathname = '/personal/tasks/boards/board-1';
+
+    renderNavLink({
+      aliases: ['/personal/tasks/boards/*'],
+      href: '/personal/tasks',
+      matchExact: true,
+      title: 'Tasks',
+    });
+
+    expect(screen.getByRole('link', { name: 'Tasks' })).toHaveClass(
+      'bg-accent',
+      'text-accent-foreground'
+    );
+  });
+
+  it('keeps exact primary routes from matching unrelated subroutes', () => {
+    navigationState.pathname = '/personal/tasks/progress';
+
+    renderNavLink({
+      aliases: ['/personal/tasks/boards/*'],
+      href: '/personal/tasks',
+      matchExact: true,
+      title: 'Tasks',
+    });
+
+    expect(screen.getByRole('link', { name: 'Tasks' })).not.toHaveClass(
+      'bg-accent'
+    );
+  });
+
+  it('does not mark cross-origin links active just because the path matches', () => {
+    navigationState.pathname = '/personal';
+
+    renderNavLink({
+      href: 'https://mail.tuturuuu.com/personal',
+      title: 'Mail',
+    });
+
+    expect(screen.getByRole('link', { name: 'Mail' })).not.toHaveClass(
+      'bg-accent'
+    );
+  });
+
+  it('navigates through the parent link instead of opening a single-child submenu', () => {
+    const onClick = vi.fn();
+    const onSubMenuClick = vi.fn();
+
+    renderNavLink(
+      {
+        children: [{ href: '/personal/tasks/boards', title: 'Boards' }],
+        href: '/personal/tasks',
+        title: 'Tasks',
+      },
+      { onClick, onSubMenuClick }
+    );
+
+    const link = screen.getByRole('link', { name: 'Tasks' });
+    link.addEventListener('click', (event) => event.preventDefault());
+    fireEvent.click(link);
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onSubMenuClick).not.toHaveBeenCalled();
+  });
+
+  it('dispatches the settings dialog open intent without navigating', () => {
+    const onClick = vi.fn();
+    const dispatchEvent = vi.spyOn(window, 'dispatchEvent');
+
+    renderNavLink(
+      {
+        openSettingsDialog: true,
+        title: 'Settings',
+      },
+      { onClick }
+    );
+
+    fireEvent.click(screen.getByText('Settings'));
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(dispatchEvent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'tuturuuu:settings-dialog-open-intent',
+      })
+    );
+  });
+
+  it('passes the requested tab when opening settings from navigation', () => {
+    const dispatchEvent = vi.spyOn(window, 'dispatchEvent');
+
+    renderNavLink({
+      openSettingsDialog: { tab: 'workspace_billing' },
+      title: 'Billing',
+    });
+
+    fireEvent.click(screen.getByText('Billing'));
+
+    const event = dispatchEvent.mock.calls.find(
+      ([candidate]) =>
+        candidate instanceof CustomEvent &&
+        candidate.type === 'tuturuuu:settings-dialog-open-intent'
+    )?.[0];
+
+    expect(event).toBeInstanceOf(CustomEvent);
+    expect((event as CustomEvent).detail).toEqual({
+      settingsTab: 'workspace_billing',
+    });
+  });
+});

package/src/components/ui/custom/nav-link.tsx

@@ -38,20 +38,51 @@ function matchesPathPrefix(targetPath: string, pathPrefix: string) {
   return targetPath === pathPrefix || targetPath.startsWith(`${pathPrefix}/`);
 }
 
-function getComparablePath(target?: string) {
+function isAbsoluteHttpUrl(target: string) {
+  return /^https?:\/\//iu.test(target);
+}
+
+function getComparablePath(
+  target?: string,
+  options: { external?: boolean } = {}
+) {
   if (!target) return null;
+  if (options.external) return null;
 
   try {
     const base =
       typeof window === 'undefined'
         ? 'https://tuturuuu.local'
         : window.location.origin;
-    return new URL(target, base).pathname;
+    const url = isAbsoluteHttpUrl(target)
+      ? new URL(target)
+      : new URL(target, base);
+
+    if (isAbsoluteHttpUrl(target) && url.origin !== base) return null;
+
+    return url.pathname;
   } catch {
     return target.split(/[?#]/u)[0] || target;
   }
 }
 
+function matchesNavigationTarget(
+  pathname: string,
+  target: string,
+  matchExact = false
+) {
+  const isWildcard = target.endsWith('/*');
+  const normalizedTarget = isWildcard
+    ? target.slice(0, -2).replace(/\/+$/u, '') || '/'
+    : target;
+
+  if (isWildcard) return matchesPathPrefix(pathname, normalizedTarget);
+
+  return matchExact
+    ? pathname === normalizedTarget
+    : matchesPathPrefix(pathname, normalizedTarget);
+}
+
 interface NavLinkProps {
   wsId: string;
   link: NavLinkType;
@@ -60,6 +91,9 @@ interface NavLinkProps {
   onClick: () => void;
 }
 
+const SETTINGS_DIALOG_OPEN_INTENT_EVENT =
+  'tuturuuu:settings-dialog-open-intent';
+
 export function NavLink({
   wsId,
   link,
@@ -69,8 +103,19 @@ export function NavLink({
 }: NavLinkProps) {
   const t = useTranslations();
   const pathname = usePathname();
-  const { title, icon, href, children, newTab, onClick: onLinkClick } = link;
-  const hasChildren = children && children.length > 0;
+  const {
+    title,
+    icon,
+    href,
+    children,
+    newTab,
+    onClick: onLinkClick,
+    openSettingsDialog,
+  } = link;
+  const childLinks = children?.filter((child): child is NavLinkType =>
+    Boolean(child)
+  );
+  const hasSubMenu = (childLinks?.length ?? 0) > 1;
   const [showUpgradeDialog, setShowUpgradeDialog] = useState(false);
 
   // Recursive function to check if any nested child matches the pathname
@@ -78,10 +123,12 @@ export function NavLink({
     return (
       navLinks?.some((child) => {
         const childTargets = [child?.href, ...(child?.aliases ?? [])]
-          .map(getComparablePath)
+          .map((target) =>
+            getComparablePath(target, { external: child?.external })
+          )
           .filter((target): target is string => Boolean(target));
         const childMatches = childTargets.some((target) =>
-          child?.matchExact ? pathname === target : pathname.startsWith(target)
+          matchesNavigationTarget(pathname, target, child?.matchExact)
         );
 
         if (childMatches) return true;
@@ -96,11 +143,11 @@ export function NavLink({
   };
 
   const activeTargets = [href, ...(link.aliases ?? [])]
-    .map(getComparablePath)
+    .map((target) => getComparablePath(target, { external: link.external }))
     .filter((target): target is string => Boolean(target));
   const isActive =
     activeTargets.some((target) =>
-      link.matchExact ? pathname === target : pathname.startsWith(target)
+      matchesNavigationTarget(pathname, target, link.matchExact)
     ) ||
     (children && hasActiveChild(children));
 
@@ -190,7 +237,7 @@ export function NavLink({
             </Tooltip>
           )}
 
-          {(hasChildren || archivedItems.length > 0) &&
+          {(hasSubMenu || archivedItems.length > 0) &&
             !preferenceArchiveAction &&
             !preferenceQuickAction &&
             !isDisabled && (
@@ -316,9 +363,20 @@ export function NavLink({
       }
       if (onLinkClick) {
         onLinkClick();
-      } else if (hasChildren) {
+      } else if (openSettingsDialog) {
+        event.preventDefault();
+        const detail =
+          typeof openSettingsDialog === 'object'
+            ? { settingsTab: openSettingsDialog.tab }
+            : undefined;
+
+        window.dispatchEvent(
+          new CustomEvent(SETTINGS_DIALOG_OPEN_INTENT_EVENT, { detail })
+        );
+        onClick();
+      } else if (hasSubMenu) {
         event.preventDefault();
-        onSubMenuClick(children, title);
+        onSubMenuClick(children ?? [], title);
       } else if (href) {
         if (shouldResolveQueryParamsFromConfig && !effectiveHref) {
           event.preventDefault();

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

@@ -30,6 +30,7 @@ export interface NavLink {
   tempDisabled?: boolean;
   isBack?: boolean;
   onClick?: () => void;
+  openSettingsDialog?: boolean | { tab?: string };
   children?: (NavLink | null)[];
   aliases?: string[];
   requiredWorkspaceTier?: {

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,
+  };
+}