@tuturuuu/ui 0.1.0 → 0.3.1

package/src/components/ui/chat/chat-sidebar-panel.test.tsx

@@ -0,0 +1,110 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { ChatConversation } from '@tuturuuu/internal-api';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ChatSidebarPanel } from './chat-sidebar-panel';
+
+const mocks = vi.hoisted(() => ({
+  chatSidebarProps: null as Record<string, unknown> | null,
+  fetchNextPage: vi.fn(),
+  useChatMessageSearch: vi.fn(),
+  useInfiniteChatConversations: vi.fn(),
+}));
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock('next/navigation', () => ({
+  usePathname: () => '/personal',
+  useSearchParams: () => new URLSearchParams('scope=personal'),
+}));
+
+vi.mock('./chat-sidebar', () => ({
+  ChatSidebar: (props: Record<string, unknown>) => {
+    mocks.chatSidebarProps = props;
+    return (
+      <button
+        onClick={() =>
+          (props.onLoadMoreConversations as (() => void) | undefined)?.()
+        }
+        type="button"
+      >
+        load more
+      </button>
+    );
+  },
+}));
+
+vi.mock('./create-conversation-dialog', () => ({
+  CreateConversationDialog: () => null,
+}));
+
+vi.mock('./hooks', () => ({
+  flattenChatConversationPages: (
+    data?: { pages?: { conversations?: ChatConversation[] }[] } | null
+  ) => data?.pages?.flatMap((page) => page.conversations ?? []) ?? [],
+  useChatMessageSearch: (...args: unknown[]) =>
+    mocks.useChatMessageSearch(...args),
+  useInfiniteChatConversations: (...args: unknown[]) =>
+    mocks.useInfiniteChatConversations(...args),
+}));
+
+const conversation: ChatConversation = {
+  aiEnabled: false,
+  archivedAt: null,
+  createdAt: '2026-06-02T00:00:00.000Z',
+  createdBy: 'user-1',
+  description: null,
+  id: 'conversation-1',
+  latestMessage: null,
+  memberCount: 2,
+  members: [],
+  metadata: {},
+  title: 'Planning',
+  type: 'group',
+  unreadCount: 0,
+  updatedAt: '2026-06-02T00:00:00.000Z',
+  wsId: 'personal',
+};
+
+describe('ChatSidebarPanel', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.chatSidebarProps = null;
+    mocks.useChatMessageSearch.mockReturnValue({ data: [] });
+    mocks.useInfiniteChatConversations.mockReturnValue({
+      data: {
+        pages: [{ conversations: [conversation], nextOffset: 40 }],
+      },
+      fetchNextPage: mocks.fetchNextPage,
+      hasNextPage: true,
+      isFetchingNextPage: false,
+      isLoading: false,
+    });
+  });
+
+  it('uses the infinite conversations query and forwards load-more controls', () => {
+    render(
+      <ChatSidebarPanel
+        currentUserId="user-1"
+        isCollapsed={false}
+        wsId="personal"
+      />
+    );
+
+    expect(mocks.useInfiniteChatConversations).toHaveBeenCalledWith({
+      archived: 'active',
+      wsId: 'personal',
+    });
+    expect(mocks.chatSidebarProps).toMatchObject({
+      conversations: [conversation],
+      hasMoreConversations: true,
+      isFetchingMoreConversations: false,
+      isLoading: false,
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'load more' }));
+
+    expect(mocks.fetchNextPage).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/ui/chat/chat-sidebar-panel.tsx

@@ -3,7 +3,11 @@ import { usePathname, useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { ChatSidebar } from './chat-sidebar';
 import { CreateConversationDialog } from './create-conversation-dialog';
-import { useChatConversations, useChatMessageSearch } from './hooks';
+import {
+  flattenChatConversationPages,
+  useChatMessageSearch,
+  useInfiniteChatConversations,
+} from './hooks';
 import {
   CHAT_CONVERSATION_TYPE_FILTERS,
   type ChatConversationArchiveFilter,
@@ -62,7 +66,10 @@ export function ChatSidebarPanel({
   const setCreateOpen = onCreateOpenChange ?? setInternalCreateOpen;
   const archiveFilter = controlledArchiveFilter ?? internalArchiveFilter;
   const selectedTypes = controlledSelectedTypes ?? internalSelectedTypes;
-  const conversationsQuery = useChatConversations(wsId, archiveFilter);
+  const conversationsQuery = useInfiniteChatConversations({
+    archived: archiveFilter,
+    wsId,
+  });
   const searchQuery = useChatMessageSearch({
     query: searchValue,
     wsId,
@@ -70,7 +77,7 @@ export function ChatSidebarPanel({
   const conversationScope = normalizeChatConversationScope(
     searchParams.get('scope') ?? defaultConversationScope
   );
-  const conversations = conversationsQuery.data ?? [];
+  const conversations = flattenChatConversationPages(conversationsQuery.data);
   const scopeConversations = filterChatConversationsByScope(
     conversations,
     conversationScope
@@ -158,7 +165,10 @@ export function ChatSidebarPanel({
         conversations={scopedConversations}
         currentUserId={currentUserId}
         embedded
+        hasMoreConversations={conversationsQuery.hasNextPage}
+        isFetchingMoreConversations={conversationsQuery.isFetchingNextPage}
         isLoading={conversationsQuery.isLoading}
+        onLoadMoreConversations={() => conversationsQuery.fetchNextPage()}
         onSearchChange={setSearchValue}
         onSelectConversation={selectConversation}
         searchResults={scopedSearchResults}

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

@@ -88,11 +88,34 @@ describe('SettingsDialogShell keyboard navigation', () => {
     }));
   });
 
+  it('renders the fullscreen settings sheet chrome', () => {
+    renderShell();
+
+    const dialog = screen.getByRole('dialog');
+
+    expect(dialog).toHaveClass('h-dvh');
+    expect(dialog).toHaveClass('w-screen');
+    expect(dialog).toHaveClass('rounded-none');
+    expect(
+      screen.getAllByRole('button', { name: 'settings.back_to_app' }).length
+    ).toBeGreaterThan(0);
+  });
+
+  it('keeps settings groups expanded by default', () => {
+    renderShell();
+
+    expect(screen.getAllByText('Profile').length).toBeGreaterThan(0);
+    expect(screen.getByText('Appearance')).toBeVisible();
+    expect(screen.getByText('Forms')).toBeVisible();
+  });
+
   it('focuses settings search with slash and modifier search shortcuts', () => {
     renderShell();
 
     const dialog = screen.getByRole('dialog');
-    const searchInput = screen.getByPlaceholderText('search.search');
+    const searchInput = screen.getByPlaceholderText(
+      'settings.search_settings_placeholder'
+    );
 
     fireEvent.keyDown(dialog, { key: '/' });
     expect(searchInput).toHaveFocus();

package/src/components/ui/custom/__tests__/tuturuuu-logo.test.ts

@@ -1,10 +1,19 @@
 import { describe, expect, it } from 'vitest';
-import { TUTURUUU_LOGO_URL } from '../tuturuuu-logo';
+import {
+  TUTURUUU_LOCAL_LOGO_URL,
+  TUTURUUU_LOGO_URL,
+  TUTURUUU_REMOTE_LOGO_URL,
+} from '../tuturuuu-logo';
 
 describe('Tuturuuu logo asset URL', () => {
-  it('uses the canonical hosted logo instead of a per-app relative asset', () => {
-    expect(TUTURUUU_LOGO_URL).toBe(
+  it('keeps the canonical hosted logo as the shared default', () => {
+    expect(TUTURUUU_REMOTE_LOGO_URL).toBe(
       'https://tuturuuu.com/media/logos/transparent.png'
     );
+    expect(TUTURUUU_LOGO_URL).toBe(TUTURUUU_REMOTE_LOGO_URL);
+  });
+
+  it('exports the same-origin public logo path for apps that ship the asset', () => {
+    expect(TUTURUUU_LOCAL_LOGO_URL).toBe('/media/logos/transparent.png');
   });
 });

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

@@ -0,0 +1,39 @@
+import type { InternalApiWorkspaceSummary } from '@tuturuuu/types';
+import { describe, expect, it } from 'vitest';
+import { mergeWorkspaceSelectWorkspaces } from '../workspace-select-helpers';
+
+describe('mergeWorkspaceSelectWorkspaces', () => {
+  it('uses the current workspace fallback when the workspace list is unavailable', () => {
+    const fallback: InternalApiWorkspaceSummary = {
+      access_type: 'guest',
+      avatar_url: null,
+      guest_board_count: 1,
+      guest_highest_permission: 'edit',
+      guest_landing_path: '/tasks/boards/board-1',
+      guest_products: ['tasks'],
+      id: 'guest-workspace',
+      logo_url: null,
+      name: 'Shared workspace',
+      personal: false,
+    };
+
+    expect(mergeWorkspaceSelectWorkspaces(undefined, fallback)).toEqual([
+      fallback,
+    ]);
+  });
+
+  it('does not duplicate the current workspace when the list already includes it', () => {
+    const workspace: InternalApiWorkspaceSummary = {
+      access_type: 'member',
+      avatar_url: null,
+      id: 'workspace-1',
+      logo_url: null,
+      name: 'Workspace',
+      personal: false,
+    };
+
+    expect(mergeWorkspaceSelectWorkspaces([workspace], workspace)).toEqual([
+      workspace,
+    ]);
+  });
+});

package/src/components/ui/custom/common-footer.tsx

@@ -3,7 +3,15 @@ import Link from 'next/link';
 import { Separator } from '../separator';
 import { TuturuuLogo } from './tuturuuu-logo';
 
-export function CommonFooter({ t, devMode }: { t: any; devMode: boolean }) {
+export function CommonFooter({
+  t,
+  devMode,
+  logoSrc,
+}: {
+  t: any;
+  devMode: boolean;
+  logoSrc?: string;
+}) {
   const TUTURUUU_URL = devMode
     ? getLocalInternalAppUrl('platform', 'http://localhost:7803')
     : 'https://tuturuuu.com';
@@ -35,6 +43,7 @@ export function CommonFooter({ t, devMode }: { t: any; devMode: boolean }) {
               width={64}
               height={64}
               alt="logo"
+              src={logoSrc}
               className="h-12 w-12"
             />
             <div className="font-semibold text-4xl">Tuturuuu</div>
@@ -166,6 +175,12 @@ export function CommonFooter({ t, devMode }: { t: any; devMode: boolean }) {
             >
               {t('common.branding')}
             </Link>
+            <Link
+              href={`${TUTURUUU_URL}/ui`}
+              className="text-foreground/80 text-sm hover:text-foreground hover:underline md:w-fit"
+            >
+              {t('common.ui')}
+            </Link>
           </div>
 
           <div className="grid gap-1 md:items-start">

package/src/components/ui/custom/production-indicator.tsx

@@ -1,4 +1,4 @@
-import { DatabaseZap } from '@tuturuuu/icons';
+import { DatabaseZap } from '@tuturuuu/icons/lucide';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
 
 export const IS_PRODUCTION_DB =

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

@@ -34,7 +34,7 @@ export default function SidebarSettings({ useSidebar }: SidebarSettingsProps) {
     value: expandSettingsAccordions,
     setValue: setExpandSettingsAccordions,
     isLoading: isLoadingExpandAccordions,
-  } = useUserBooleanConfig('EXPAND_SETTINGS_ACCORDIONS', false);
+  } = useUserBooleanConfig('EXPAND_SETTINGS_ACCORDIONS', true);
 
   return (
     <div className="space-y-8">

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

@@ -20,6 +20,7 @@ import { toast } from '@tuturuuu/ui/sonner';
 import { Switch } from '@tuturuuu/ui/switch';
 import { useTranslations } from 'next-intl';
 import { useEffect } from 'react';
+import { TASKS_SHOW_REVIEW_DUE_DATES_CONFIG_ID } from '../../tu-do/shared/task-due-date-visibility';
 
 interface TaskSettingsData {
   task_auto_assign_to_self: boolean;
@@ -67,6 +68,12 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
     isLoading: openDefaultBoardLoading,
     isPending: openDefaultBoardPending,
   } = useUserBooleanConfig('TASKS_OPEN_DEFAULT_BOARD', true);
+  const {
+    value: showReviewDueDates,
+    setValue: setShowReviewDueDates,
+    isLoading: showReviewDueDatesLoading,
+    isPending: showReviewDueDatesPending,
+  } = useUserBooleanConfig(TASKS_SHOW_REVIEW_DUE_DATES_CONFIG_ID, false);
 
   const { data: submitShortcut, isLoading: submitShortcutLoading } =
     useUserConfig('TASK_SUBMIT_SHORTCUT', 'enter');
@@ -202,6 +209,17 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
           />
         </SettingItemTab>
         <Separator />
+        <SettingItemTab
+          title={t('show_review_due_dates')}
+          description={t('show_review_due_dates_description')}
+        >
+          <Switch
+            checked={showReviewDueDates}
+            onCheckedChange={setShowReviewDueDates}
+            disabled={showReviewDueDatesLoading || showReviewDueDatesPending}
+          />
+        </SettingItemTab>
+        <Separator />
         <SettingItemTab
           title={t('submit_shortcut')}
           description={t('submit_shortcut_description')}

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { ChevronDown, ChevronRight, Search } from '@tuturuuu/icons';
+import { ArrowLeft, ChevronDown, ChevronRight, Search } from '@tuturuuu/icons';
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -24,6 +24,7 @@ import {
   CommandList,
 } from '@tuturuuu/ui/command';
 import {
+  DialogClose,
   DialogContent,
   DialogDescription,
   DialogTitle,
@@ -52,7 +53,6 @@ import {
   SidebarProvider,
 } from '@tuturuuu/ui/sidebar';
 import { cn } from '@tuturuuu/utils/format';
-import { usePlatform } from '@tuturuuu/utils/hooks/use-platform';
 import { removeAccents } from '@tuturuuu/utils/text-helper';
 import { useTranslations } from 'next-intl';
 import type { ComponentType, KeyboardEvent, ReactNode } from 'react';
@@ -81,11 +81,11 @@ export interface SettingsDialogShellProps {
   onActiveTabChange: (tab: string) => void;
   /**
    * Group labels that should be expanded by default.
-   * All other groups will be collapsed.
-   * If not provided, only the first group expands by default.
+   * Used when expandAllAccordions is false.
+   * If not provided in that mode, only the first group expands.
    */
   primaryGroupLabels?: string[];
-  /** Override to expand all accordions (user preference) */
+  /** Override to expand all accordions (user preference). Defaults to expanded. */
   expandAllAccordions?: boolean;
   /** Enable dialog-scoped keyboard shortcuts for search and tab navigation */
   keyboardNavigation?: boolean;
@@ -111,21 +111,19 @@ function isEditableShortcutTarget(target: EventTarget | null) {
  *
  * Each app provides its own `navItems` (ordered by priority) and
  * renders tab-specific content via `children`. The `primaryGroupLabels`
- * prop controls which groups expand by default — enabling apps to
- * highlight their domain (e.g., tasks-first in Tasks, calendar-first
- * in a future calendar app).
+ * prop controls which groups expand when `expandAllAccordions` is false,
+ * enabling apps to highlight their domain while preserving a compact mode.
  */
 export function SettingsDialogShell({
   navItems,
   activeTab,
   onActiveTabChange,
   primaryGroupLabels,
-  expandAllAccordions = false,
+  expandAllAccordions = true,
   keyboardNavigation = false,
   children,
 }: SettingsDialogShellProps) {
   const t = useTranslations();
-  const { isMac, modKey } = usePlatform();
   const isMobile = useIsMobile();
   const desktopSearchInputRef = useRef<HTMLInputElement>(null);
   const mobileSearchInputRef = useRef<HTMLInputElement>(null);
@@ -275,8 +273,9 @@ export function SettingsDialogShell({
 
   return (
     <DialogContent
-      className="flex h-[90vh] flex-col overflow-hidden p-0 md:max-h-200 md:max-w-225 lg:max-h-250 lg:max-w-250 xl:max-w-300"
+      className="top-0 left-0 flex h-dvh max-h-dvh w-screen max-w-none translate-x-0 translate-y-0 flex-col gap-0 overflow-hidden rounded-none border-0 p-0 shadow-none sm:max-w-none"
       onKeyDown={handleKeyboardNavigation}
+      showCloseButton={false}
     >
       <DialogTitle className="sr-only">{t('common.settings')}</DialogTitle>
       <DialogDescription className="sr-only">
@@ -285,24 +284,29 @@ export function SettingsDialogShell({
       <SidebarProvider className="flex h-full min-h-0 items-start">
         <Sidebar
           collapsible="none"
-          className="hidden h-full w-64 flex-col border-r bg-muted/30 md:flex"
+          className="hidden h-full w-72 flex-col border-r bg-muted/30 md:flex"
         >
-          <SidebarHeader className="z-10 p-4 pb-0">
-            <div className="relative mb-2">
+          <SidebarHeader className="z-10 gap-3 p-4 pb-0">
+            <DialogClose asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                className="h-9 justify-start px-2 text-muted-foreground"
+              >
+                <ArrowLeft className="h-4 w-4" />
+                {t('settings.back_to_app')}
+              </Button>
+            </DialogClose>
+            <div className="relative">
               <Search className="absolute top-2.5 left-2 h-4 w-4 text-muted-foreground" />
               <SidebarInput
                 ref={desktopSearchInputRef}
-                placeholder={t('search.search')}
+                placeholder={t('settings.search_settings_placeholder')}
                 className="bg-background pl-8"
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
               />
             </div>
-            <div className="flex items-center justify-between px-1">
-              <span className="text-[10px] text-muted-foreground uppercase tracking-wider">
-                Detected OS: {isMac ? 'macOS' : 'Windows/Linux'} ({modKey})
-              </span>
-            </div>
           </SidebarHeader>
           <SidebarContent className="overflow-y-auto p-4">
             {filteredNavItems.map((group, index) => (
@@ -358,7 +362,18 @@ export function SettingsDialogShell({
           </SidebarContent>
         </Sidebar>
         <main className="flex h-full flex-1 flex-col overflow-hidden bg-background">
-          <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4 pr-12 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-6 md:pr-6">
+          <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-6">
+            <DialogClose asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="shrink-0 text-muted-foreground md:hidden"
+              >
+                <ArrowLeft className="h-4 w-4" />
+                <span className="sr-only">{t('settings.back_to_app')}</span>
+              </Button>
+            </DialogClose>
             <div className="flex flex-1 items-center gap-2 md:flex-initial">
               {isMobile && (
                 <Drawer open={mobileNavOpen} onOpenChange={setMobileNavOpen}>
@@ -390,7 +405,7 @@ export function SettingsDialogShell({
                     <Command className="rounded-none border-0">
                       <CommandInput
                         ref={mobileSearchInputRef}
-                        placeholder={t('search.search')}
+                        placeholder={t('settings.search_settings_placeholder')}
                       />
                       <CommandList className="max-h-[50vh]">
                         <CommandEmpty>
@@ -458,7 +473,7 @@ export function SettingsDialogShell({
             </div>
           </header>
           <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-6">
-            <div className="mx-auto w-full max-w-3xl space-y-6">
+            <div className="mx-auto w-full max-w-4xl space-y-6">
               <div className="space-y-1">
                 <h2 className="font-semibold text-lg tracking-tight">
                   {activeItem?.label}

package/src/components/ui/custom/sidebar-context-compile-graph.test.ts

@@ -0,0 +1,60 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+function readSidebarSource(fileName: string) {
+  const candidates = [
+    join(process.cwd(), 'src/components/ui/custom', fileName),
+    join(process.cwd(), 'packages/ui/src/components/ui/custom', fileName),
+  ];
+  const sourcePath = candidates.find((candidate) => existsSync(candidate));
+
+  if (!sourcePath) {
+    throw new Error(`Unable to resolve ${fileName} from ${process.cwd()}`);
+  }
+
+  return readFileSync(sourcePath, 'utf8');
+}
+
+const sidebarContextSource = readSidebarSource('sidebar-context.tsx');
+const sidebarRemoteBehaviorBridgeSource = readSidebarSource(
+  'sidebar-remote-behavior-bridge.tsx'
+);
+
+function staticImportPattern(modulePath: string) {
+  const escapedModulePath = modulePath.replace(
+    /[.*+?^${}()|[\]\\]/gu,
+    String.raw`\$&`
+  );
+
+  return new RegExp(
+    String.raw`^\s*import\s+(?!type\b)[\s\S]*?\sfrom\s+['"]${escapedModulePath}['"];`,
+    'mu'
+  );
+}
+
+function dynamicImportPattern(modulePath: string) {
+  const escapedModulePath = modulePath.replace(
+    /[.*+?^${}()|[\]\\]/gu,
+    String.raw`\$&`
+  );
+
+  return new RegExp(
+    String.raw`import\s*\(\s*['"]${escapedModulePath}['"]\s*\)`,
+    'mu'
+  );
+}
+
+describe('sidebar context compile graph', () => {
+  it('loads remote user-config sync after hydration', () => {
+    expect(sidebarContextSource).not.toMatch(
+      staticImportPattern('@tuturuuu/ui/hooks/use-user-config')
+    );
+    expect(sidebarContextSource).toMatch(
+      dynamicImportPattern('./sidebar-remote-behavior-bridge')
+    );
+    expect(sidebarRemoteBehaviorBridgeSource).toMatch(
+      staticImportPattern('@tuturuuu/ui/hooks/use-user-config')
+    );
+  });
+});