@tuturuuu/ui 0.7.0 → 0.9.0

package/src/components/ui/calendar-app/components/use-calendar-connections-manager.ts

@@ -3,8 +3,11 @@ import {
   type CalendarSourceOption,
   getGoogleCalendarAuthUrl,
   getWorkspaceCalendarDefaultSource,
+  getWorkspaceCalendarSyncPreferences,
+  updateCalendarConnection as updateCalendarConnectionRequest,
   updateWorkspaceCalendarDefaultSource,
-} from '@tuturuuu/internal-api';
+  updateWorkspaceCalendarSyncPreferences,
+} from '@tuturuuu/internal-api/calendar';
 import { createClient } from '@tuturuuu/supabase/next/client';
 import { useRouter } from 'next/navigation';
 import { useTranslations } from 'next-intl';
@@ -184,6 +187,12 @@ export function useCalendarConnectionsManager(wsId: string) {
     staleTime: 30_000,
   });
 
+  const { data: syncPreferencesData } = useQuery({
+    queryKey: ['calendar-sync-preferences', wsId],
+    queryFn: () => getWorkspaceCalendarSyncPreferences(wsId),
+    staleTime: 30_000,
+  });
+
   const defaultSourceMutation = useMutation({
     mutationFn: async (sourceId: string) => {
       const option = defaultSourceData?.options.find(
@@ -209,6 +218,46 @@ export function useCalendarConnectionsManager(wsId: string) {
     },
   });
 
+  const syncPreferencesMutation = useMutation({
+    mutationFn: (
+      payload: Parameters<typeof updateWorkspaceCalendarSyncPreferences>[1]
+    ) => updateWorkspaceCalendarSyncPreferences(wsId, payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['calendar-sync-preferences', wsId],
+      });
+      toast.success(
+        t('calendar_sync_settings_updated') || 'Calendar sync settings updated'
+      );
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'Failed to update calendar sync settings');
+    },
+  });
+
+  const updateConnectionSyncSettingsMutation = useMutation({
+    mutationFn: (
+      payload: Parameters<typeof updateCalendarConnectionRequest>[0]
+    ) => updateCalendarConnectionRequest(payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['calendar-connections', wsId],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['provider-calendar-list', wsId],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['calendar-sync-preferences', wsId],
+      });
+      toast.success(
+        t('calendar_sync_settings_updated') || 'Calendar sync settings updated'
+      );
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'Failed to update calendar sync settings');
+    },
+  });
+
   // Fetch current user's email
   const { data: userEmail } = useQuery({
     queryKey: ['current-user-email'],
@@ -621,7 +670,13 @@ export function useCalendarConnectionsManager(wsId: string) {
         const existingConnection = calendarConnections.find(
           (conn) =>
             conn.calendar_id === apiCal.id && conn.auth_token_id === account.id
-        );
+        ) as
+          | ((typeof calendarConnections)[number] & {
+              sync_delete_enabled?: boolean | null;
+              sync_inbound_enabled?: boolean | null;
+              sync_outbound_enabled?: boolean | null;
+            })
+          | undefined;
 
         return {
           id: existingConnection?.id || apiCal.id,
@@ -634,6 +689,10 @@ export function useCalendarConnectionsManager(wsId: string) {
           connectionExists: !!existingConnection,
           accountId: account.id,
           accessRole: apiCal.accessRole,
+          syncDeleteEnabled: existingConnection?.sync_delete_enabled ?? true,
+          syncInboundEnabled: existingConnection?.sync_inbound_enabled ?? true,
+          syncOutboundEnabled:
+            existingConnection?.sync_outbound_enabled ?? false,
         };
       });
 
@@ -652,6 +711,9 @@ export function useCalendarConnectionsManager(wsId: string) {
         connectionExists: boolean;
         accountId: string;
         accessRole: string;
+        syncDeleteEnabled: boolean;
+        syncInboundEnabled: boolean;
+        syncOutboundEnabled: boolean;
       }>
     >
   );
@@ -688,6 +750,8 @@ export function useCalendarConnectionsManager(wsId: string) {
     showCreateCalendarDialog,
     syncHealth,
     syncMutation,
+    syncPreferencesData,
+    syncPreferencesMutation,
     syncStatusStyles,
     syncToTuturuuu,
     systemCalendars,
@@ -696,6 +760,7 @@ export function useCalendarConnectionsManager(wsId: string) {
     togglingTuturuuuIds,
     toggleAccountExpanded,
     toggleWorkspaceCalendarMutation,
+    updateConnectionSyncSettingsMutation,
     tuturuuuEnabledCount,
     userEmail,
     workspaceCalendars,

package/src/components/ui/calendar.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ChevronLeft, ChevronRight } from '@tuturuuu/icons';
+import { ChevronLeft, ChevronRight } from '@tuturuuu/icons/lucide-static';
 import { cn } from '@tuturuuu/utils/format';
 import { format } from 'date-fns';
 import dayjs from 'dayjs';

package/src/components/ui/carousel.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ArrowLeft, ArrowRight } from '@tuturuuu/icons';
+import { ArrowLeft, ArrowRight } from '@tuturuuu/icons/lucide-static';
 import { cn } from '@tuturuuu/utils/format';
 import useEmblaCarousel, {
   type UseEmblaCarouselType,

package/src/components/ui/chat/chat-agent-details-external-thread-panel.test.tsx

@@ -18,7 +18,7 @@ vi.mock('next-intl', () => ({
     values?.count === undefined ? key : `${key}:${values.count}`,
 }));
 
-vi.mock('@tuturuuu/internal-api/infrastructure', () => ({
+vi.mock('@tuturuuu/internal-api/infrastructure/ai', () => ({
   draftAiAgentExternalResponse: (...args: unknown[]) =>
     mocks.draftAiAgentExternalResponse(...args),
   listAiAgentExternalThreads: (...args: unknown[]) =>

package/src/components/ui/chat/chat-agent-details-external-thread-panel.tsx

@@ -13,7 +13,7 @@ import {
   listAiAgentExternalThreads,
   sendAiAgentExternalResponse,
   syncAiAgentExternalThread,
-} from '@tuturuuu/internal-api/infrastructure';
+} from '@tuturuuu/internal-api/infrastructure/ai';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import { Button } from '../button';

package/src/components/ui/chat/chat-agent-details-operations-panel.test.tsx

@@ -16,7 +16,7 @@ vi.mock('next-intl', () => ({
   useTranslations: () => (key: string) => key,
 }));
 
-vi.mock('@tuturuuu/internal-api/infrastructure', () => ({
+vi.mock('@tuturuuu/internal-api/infrastructure/ai', () => ({
   abortAiAgentZaloPersonalQrLogin: (
     ...args: Parameters<typeof mocks.abortAiAgentZaloPersonalQrLogin>
   ) => mocks.abortAiAgentZaloPersonalQrLogin(...args),

package/src/components/ui/chat/chat-agent-details-operations-panel.tsx

@@ -14,7 +14,7 @@ import {
 import type {
   AiAgentChannelConfig,
   AiAgentTestResponse,
-} from '@tuturuuu/internal-api/infrastructure';
+} from '@tuturuuu/internal-api/infrastructure/ai';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import { Button } from '../button';

package/src/components/ui/chat/chat-agent-details-setup-panel.tsx

@@ -14,7 +14,7 @@ import type {
   AiAgentChannelConfig,
   AiAgentDefinition,
   SaveAiAgentPayload,
-} from '@tuturuuu/internal-api/infrastructure';
+} from '@tuturuuu/internal-api/infrastructure/ai';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import { Badge } from '../badge';

package/src/components/ui/chat/chat-agent-details-sidebar.test.tsx

@@ -20,7 +20,7 @@ vi.mock('next-intl', () => ({
   useTranslations: () => (key: string) => key,
 }));
 
-vi.mock('@tuturuuu/internal-api/infrastructure', () => ({
+vi.mock('@tuturuuu/internal-api/infrastructure/ai', () => ({
   abortAiAgentZaloPersonalQrLogin: vi.fn(),
   deployAiAgentChannel: vi.fn(),
   getAiAgentZaloPersonalQrLoginStatus: vi.fn(),

package/src/components/ui/chat/chat-agent-details-sidebar.tsx

@@ -6,7 +6,7 @@ import type { ChatConversation } from '@tuturuuu/internal-api';
 import type {
   AiAgentTestResponse,
   SaveAiAgentPayload,
-} from '@tuturuuu/internal-api/infrastructure';
+} from '@tuturuuu/internal-api/infrastructure/ai';
 import {
   deployAiAgentChannel,
   listAiAgents,
@@ -14,7 +14,7 @@ import {
   rotateAiAgentChannelSecret,
   saveAiAgent,
   testAiAgentChannel,
-} from '@tuturuuu/internal-api/infrastructure';
+} from '@tuturuuu/internal-api/infrastructure/ai';
 import { useTranslations } from 'next-intl';
 import { useMemo, useState } from 'react';
 import { Badge } from '../badge';

package/src/components/ui/chat/chat-agent-details-utils.test.ts

@@ -1,5 +1,5 @@
 import type { ChatConversation } from '@tuturuuu/internal-api';
-import type { AiAgentDefinition } from '@tuturuuu/internal-api/infrastructure';
+import type { AiAgentDefinition } from '@tuturuuu/internal-api/infrastructure/ai';
 import { ROOT_WORKSPACE_ID } from '@tuturuuu/utils/constants';
 import { describe, expect, it } from 'vitest';
 import {

package/src/components/ui/chat/chat-agent-details-utils.tsx

@@ -6,7 +6,7 @@ import type {
   AiAgentChannelConfig,
   AiAgentDefinition,
   SaveAiAgentPayload,
-} from '@tuturuuu/internal-api/infrastructure';
+} from '@tuturuuu/internal-api/infrastructure/ai';
 import { cn } from '@tuturuuu/utils/format';
 import { useTranslations } from 'next-intl';
 import type { ReactNode } from 'react';

package/src/components/ui/chat/chat-agent-details-zalo-personal-panel.tsx

@@ -19,14 +19,14 @@ import type {
   AiAgentZaloPersonalPhoneSyncResult,
   AiAgentZaloPersonalQrLoginSession,
   AiAgentZaloPersonalQrLoginStatus,
-} from '@tuturuuu/internal-api/infrastructure';
+} from '@tuturuuu/internal-api/infrastructure/ai';
 import {
   abortAiAgentZaloPersonalQrLogin,
   getAiAgentZaloPersonalQrLoginStatus,
   getAiAgentZaloPersonalStatus,
   runAiAgentZaloPersonalAction,
   startAiAgentZaloPersonalQrLogin,
-} from '@tuturuuu/internal-api/infrastructure';
+} from '@tuturuuu/internal-api/infrastructure/ai';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import type { ReactNode } from 'react';

package/src/components/ui/checkbox.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { CheckIcon, MinusIcon } from '@tuturuuu/icons';
+import { CheckIcon, MinusIcon } from '@tuturuuu/icons/lucide-static';
 import { cn } from '@tuturuuu/utils/format';
 import type * as React from 'react';
 

package/src/components/ui/color-picker.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { TextIcon } from '@tuturuuu/icons';
+import { TextIcon } from '@tuturuuu/icons/lucide-static';
 import { forwardRef, useMemo, useState } from 'react';
 import { HexColorPicker } from 'react-colorful';
 import { useDomResolvedTheme } from '../../hooks/use-dom-resolved-theme';

package/src/components/ui/command.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { SearchIcon } from '@tuturuuu/icons';
+import { SearchIcon } from '@tuturuuu/icons/lucide-static';
 import { cn } from '@tuturuuu/utils/format';
 import { Command as CommandPrimitive } from 'cmdk';
 import type * as React from 'react';

package/src/components/ui/context-menu.tsx

@@ -1,7 +1,11 @@
 'use client';
 
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
-import { CheckIcon, ChevronRightIcon, CircleIcon } from '@tuturuuu/icons';
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  CircleIcon,
+} from '@tuturuuu/icons/lucide-static';
 import { cn } from '@tuturuuu/utils/format';
 import type * as React from 'react';
 

package/src/components/ui/currency-input.test.tsx

@@ -0,0 +1,43 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { CurrencyInput } from './currency-input';
+
+describe('CurrencyInput', () => {
+  it('keeps locale decimal separators while editing', () => {
+    const onChange = vi.fn();
+
+    render(
+      <CurrencyInput
+        aria-label="Amount"
+        hideHelpers
+        locale="vi-VN"
+        maximumFractionDigits={2}
+        onChange={onChange}
+        value={undefined}
+      />
+    );
+
+    const input = screen.getByLabelText('Amount') as HTMLInputElement;
+
+    fireEvent.focus(input);
+    fireEvent.change(input, {
+      target: {
+        selectionStart: 3,
+        value: '1,2',
+      },
+    });
+
+    expect(input).toHaveValue('1,2');
+    expect(onChange).toHaveBeenLastCalledWith(1.2);
+
+    fireEvent.change(input, {
+      target: {
+        selectionStart: input.value.length + 1,
+        value: `${input.value}3`,
+      },
+    });
+
+    expect(input).toHaveValue('1,23');
+    expect(onChange).toHaveBeenLastCalledWith(1.23);
+  });
+});

package/src/components/ui/currency-input.tsx

@@ -197,7 +197,7 @@ export const CurrencyInput = forwardRef<HTMLInputElement, CurrencyInputProps>(
         // Build final formatted string
         let formatted = formattedInteger;
         if (hasDecimal) {
-          formatted += `.${decimalPart}`;
+          formatted += `${localeSeparators.decimal}${decimalPart}`;
         }
 
         // Calculate new cursor position

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

@@ -92,10 +92,13 @@ describe('SettingsDialogShell keyboard navigation', () => {
     renderShell();
 
     const dialog = screen.getByRole('dialog');
+    const className = dialog.getAttribute('class') ?? '';
 
     expect(dialog).toHaveClass('h-dvh');
     expect(dialog).toHaveClass('w-screen');
+    expect(dialog).toHaveClass('bg-background');
     expect(dialog).toHaveClass('rounded-none');
+    expect(className).not.toMatch(/animate-in|fade-in|zoom-in|slide-in/);
     expect(
       screen.getAllByRole('button', { name: 'settings.back_to_app' }).length
     ).toBeGreaterThan(0);

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

@@ -1,3 +1,5 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
 import type { InternalApiWorkspaceSummary } from '@tuturuuu/types';
 import { describe, expect, it } from 'vitest';
 import { mergeWorkspaceSelectWorkspaces } from '../workspace-select-helpers';
@@ -36,4 +38,21 @@ describe('mergeWorkspaceSelectWorkspaces', () => {
       workspace,
     ]);
   });
+
+  it('keeps workspace fallback images outside Radix AvatarImage context', () => {
+    const workspaceSelectSource = readFileSync(
+      join(process.cwd(), 'src/components/ui/custom/workspace-select.tsx'),
+      'utf8'
+    );
+    const workspaceIconSource = workspaceSelectSource.slice(
+      workspaceSelectSource.indexOf('function WorkspaceIcon'),
+      workspaceSelectSource.indexOf('export function WorkspaceSelect')
+    );
+
+    expect(workspaceIconSource).toContain('<AvatarFallback');
+    expect(workspaceIconSource).toContain('<Image');
+    expect(workspaceIconSource).not.toMatch(
+      /<AvatarFallback[\s\S]*<AvatarImage/u
+    );
+  });
 });

package/src/components/ui/custom/combobox.test.tsx

@@ -138,4 +138,199 @@ describe('Combobox', () => {
 
     expect(onSelect).toHaveBeenCalledTimes(1);
   });
+
+  it('can hide the selected trigger icon while keeping option icons visible', () => {
+    render(
+      <Combobox
+        options={[
+          {
+            label: 'Alpha',
+            value: 'alpha',
+            icon: <span data-testid="alpha-option-icon">A</span>,
+          },
+          { label: 'Beta', value: 'beta' },
+        ]}
+        placeholder="Pick item"
+        selected="alpha"
+        showSelectedIcon={false}
+      />
+    );
+
+    expect(screen.queryByTestId('alpha-option-icon')).not.toBeInTheDocument();
+
+    openCombobox();
+
+    expect(screen.getByTestId('alpha-option-icon')).toBeInTheDocument();
+  });
+
+  it('can use a stable trigger icon while preserving option row icons', () => {
+    render(
+      <Combobox
+        ariaLabel="View picker"
+        hideTriggerLabel
+        options={[
+          {
+            label: 'Kanban',
+            value: 'kanban',
+            icon: <span data-testid="kanban-option-icon">K</span>,
+          },
+        ]}
+        placeholder="Pick view"
+        selected="kanban"
+        showChevron={false}
+        triggerIcon={<span data-testid="stable-view-icon">V</span>}
+        triggerMode="compact"
+      />
+    );
+
+    expect(screen.getByTestId('stable-view-icon')).toBeInTheDocument();
+    expect(screen.queryByTestId('kanban-option-icon')).not.toBeInTheDocument();
+
+    openCombobox();
+
+    expect(screen.getByTestId('kanban-option-icon')).toBeInTheDocument();
+  });
+
+  it('supports compact accessible icon-only triggers with wider popover content', () => {
+    render(
+      <Combobox
+        ariaLabel="Compact picker"
+        contentWidth="md"
+        hideTriggerLabel
+        label={<span>Alpha compact</span>}
+        options={[
+          {
+            label: 'Alpha',
+            value: 'alpha',
+            icon: <span data-testid="alpha-compact-icon">A</span>,
+          },
+        ]}
+        placeholder="Pick item"
+        selected="alpha"
+        showChevron={false}
+        triggerMode="compact"
+      />
+    );
+
+    const trigger = screen.getByRole('combobox', { name: 'Compact picker' });
+    expect(trigger).toHaveClass('aspect-square', 'px-0');
+    expect(screen.queryByText('Alpha compact')).not.toBeInTheDocument();
+    expect(screen.getByTestId('alpha-compact-icon')).toBeInTheDocument();
+
+    fireEvent.click(trigger);
+
+    expect(document.querySelector('[data-slot="popover-content"]')).toHaveClass(
+      'w-80'
+    );
+  });
+
+  it('shows trigger tooltips instantly for compact controls', async () => {
+    render(
+      <Combobox
+        ariaLabel="Compact picker"
+        hideTriggerLabel
+        options={options}
+        placeholder="Pick item"
+        selected="alpha"
+        showChevron={false}
+        triggerMode="compact"
+        triggerTooltip="Current: Alpha"
+      />
+    );
+
+    const trigger = screen.getByRole('combobox', { name: 'Compact picker' });
+    fireEvent.focus(trigger);
+
+    await waitFor(() => {
+      expect(trigger).toHaveAttribute('data-state', 'instant-open');
+    });
+    expect(screen.getAllByText('Current: Alpha').length).toBeGreaterThan(0);
+  });
+
+  it('can keep compact trigger icons monochrome while option rows keep semantic colors', () => {
+    render(
+      <Combobox
+        ariaLabel="Priority picker"
+        colorizeTriggerIcon={false}
+        hideTriggerLabel
+        options={[
+          {
+            color: '#f97316',
+            icon: <span data-testid="priority-icon">P</span>,
+            label: 'High priority',
+            value: 'high',
+          },
+        ]}
+        placeholder="Pick item"
+        selected="high"
+        showChevron={false}
+        triggerMode="compact"
+      />
+    );
+
+    const triggerIcon = screen.getByTestId('priority-icon');
+    expect(triggerIcon).not.toHaveAttribute('style');
+
+    openCombobox();
+
+    const [, optionIcon] = screen.getAllByTestId('priority-icon');
+    expect(optionIcon).toHaveStyle({ color: '#f97316' });
+  });
+
+  it('reports popover open changes when the trigger opens and a single option closes it', async () => {
+    const onChange = vi.fn();
+    const onOpenChange = vi.fn();
+
+    render(
+      <Combobox
+        onChange={onChange}
+        onOpenChange={onOpenChange}
+        options={options}
+        placeholder="Pick item"
+        selected=""
+      />
+    );
+
+    openCombobox();
+
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+
+    fireEvent.click(screen.getByText('Beta'));
+
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalledWith('beta');
+      expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+  });
+
+  it('renders grouped options and non-clipped descriptions', () => {
+    render(
+      <Combobox
+        options={[
+          {
+            description: 'Detailed board view with enough room to wrap.',
+            group: 'Views',
+            label: 'Kanban board',
+            value: 'kanban',
+          },
+          {
+            description: 'Sort by due date from earliest to latest.',
+            group: 'Sorting',
+            label: 'Soonest first',
+            value: 'due-date-asc',
+          },
+        ]}
+        placeholder="Pick item"
+        selected="kanban"
+      />
+    );
+
+    openCombobox();
+
+    expect(screen.getByText('Views')).toBeInTheDocument();
+    expect(screen.getByText('Sorting')).toBeInTheDocument();
+    expect(
+      screen.getByText('Detailed board view with enough room to wrap.')
+    ).toHaveClass('whitespace-normal', 'break-words');
+  });
 });