@tuturuuu/ui 0.18.0 → 0.19.0

package/src/components/ui/calendar-app/components/calendar-connections-unified.tsx

@@ -8,6 +8,7 @@ import {
 } from './use-calendar-connections-manager';
 
 export type { CalendarConnectionsUnifiedVariant };
+export { useCalendarConnectionsManager };
 
 export default function CalendarConnectionsUnified({
   wsId,

package/src/components/ui/calendar-app/components/calendar-sync-settings-panel.tsx

@@ -0,0 +1,155 @@
+import { Badge } from '../../badge';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../select';
+import { Switch } from '../../switch';
+import type { CalendarConnectionsManagerState } from './use-calendar-connections-manager';
+
+export function CalendarSyncSettingsPanel({
+  state,
+}: {
+  state: CalendarConnectionsManagerState;
+}) {
+  const { syncPreferencesData, syncPreferencesMutation, t } = state;
+  const externalOptions =
+    syncPreferencesData?.options.filter(
+      (option) => option.provider !== 'tuturuuu'
+    ) ?? [];
+  const unavailable = syncPreferencesData?.settingsAvailable === false;
+  const disabled =
+    !syncPreferencesData || unavailable || syncPreferencesMutation.isPending;
+
+  return (
+    <div className="space-y-3 rounded-lg border p-3">
+      <div>
+        <h4 className="font-medium text-sm">
+          {t('two_way_sync') || 'Two-way sync'}
+        </h4>
+        <p className="text-muted-foreground text-xs">
+          {t('two_way_sync_desc') ||
+            'Control how Tuturuuu imports provider changes and mirrors native events outward.'}
+        </p>
+      </div>
+
+      {unavailable && (
+        <p className="rounded-md bg-muted px-3 py-2 text-muted-foreground text-xs">
+          {t('calendar_sync_settings_unavailable') ||
+            'Sync controls will be available after the latest calendar migration is applied.'}
+        </p>
+      )}
+
+      <div className="space-y-3">
+        <SyncToggle
+          title={t('import_external_changes') || 'Import external changes'}
+          description={
+            t('import_external_changes_desc') ||
+            'Bring Google and Outlook event changes into Tuturuuu.'
+          }
+          checked={syncPreferencesData?.inboundSyncEnabled ?? true}
+          disabled={disabled}
+          onCheckedChange={(checked) =>
+            syncPreferencesMutation.mutate({ inboundSyncEnabled: checked })
+          }
+        />
+        <SyncToggle
+          title={
+            t('sync_tuturuuu_events_outward') || 'Sync Tuturuuu events outward'
+          }
+          description={
+            t('sync_tuturuuu_events_outward_desc') ||
+            'Mirror native Tuturuuu event creates and edits to a connected provider calendar.'
+          }
+          checked={syncPreferencesData?.outboundSyncEnabled ?? false}
+          disabled={disabled || externalOptions.length === 0}
+          onCheckedChange={(checked) =>
+            syncPreferencesMutation.mutate({ outboundSyncEnabled: checked })
+          }
+        />
+      </div>
+
+      <Select
+        value={syncPreferencesData?.defaultOutboundConnectionId ?? 'none'}
+        onValueChange={(value) =>
+          syncPreferencesMutation.mutate({
+            defaultOutboundConnectionId: value === 'none' ? null : value,
+          })
+        }
+        disabled={disabled || externalOptions.length === 0}
+      >
+        <SelectTrigger className="w-full">
+          <SelectValue
+            placeholder={
+              t('choose_outbound_calendar') || 'Choose outbound calendar'
+            }
+          />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="none">
+            {t('no_outbound_calendar') || 'No outbound calendar'}
+          </SelectItem>
+          {externalOptions.map((option) => (
+            <SelectItem key={option.id} value={option.connectionId}>
+              <div className="flex min-w-0 items-center gap-2">
+                <span
+                  className="h-2.5 w-2.5 shrink-0 rounded-full"
+                  style={{ backgroundColor: option.color ?? undefined }}
+                />
+                <span className="truncate">{option.label}</span>
+                <Badge variant="secondary" className="capitalize">
+                  {option.provider}
+                </Badge>
+              </div>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      <div className="flex items-center justify-between gap-3 rounded-md bg-muted/40 px-3 py-2">
+        <div className="min-w-0">
+          <p className="font-medium text-xs">
+            {t('conflict_policy') || 'Conflict policy'}
+          </p>
+          <p className="text-muted-foreground text-xs">
+            {t('latest_write_wins_desc') ||
+              'When both sides changed, the most recently written event wins.'}
+          </p>
+        </div>
+        <Badge variant="outline">
+          {t('latest_write_wins') || 'Latest write wins'}
+        </Badge>
+      </div>
+    </div>
+  );
+}
+
+function SyncToggle({
+  checked,
+  description,
+  disabled,
+  onCheckedChange,
+  title,
+}: {
+  checked: boolean;
+  description: string;
+  disabled: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  title: string;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <div className="min-w-0">
+        <p className="font-medium text-sm">{title}</p>
+        <p className="text-muted-foreground text-xs">{description}</p>
+      </div>
+      <Switch
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+        disabled={disabled}
+      />
+    </div>
+  );
+}

package/src/components/ui/calendar-app/components/merge-provider-calendars.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest';
+import { mergeProviderCalendarsByAccount } from './merge-provider-calendars';
+
+describe('mergeProviderCalendarsByAccount', () => {
+  it('keeps persisted calendars visible while provider refresh is unavailable', () => {
+    const result = mergeProviderCalendarsByAccount({
+      wsId: 'workspace-1',
+      accounts: [
+        {
+          id: 'account-1',
+          provider: 'google',
+          account_email: 'member@example.com',
+          account_name: 'Member',
+          is_active: true,
+          created_at: '2026-07-20T00:00:00Z',
+          expires_at: null,
+        },
+      ],
+      calendarConnections: [
+        {
+          id: 'connection-1',
+          ws_id: 'workspace-1',
+          calendar_id: 'provider-calendar-1',
+          calendar_name: 'Stored calendar',
+          is_enabled: true,
+          color: '#123456',
+          provider: 'google',
+          auth_token_id: 'account-1',
+          created_at: '2026-07-20T00:00:00Z',
+          updated_at: '2026-07-20T00:00:00Z',
+        },
+      ],
+      liveCalendarsByAccount: { 'account-1': [] },
+    });
+
+    expect(result['account-1']).toEqual([
+      expect.objectContaining({
+        id: 'connection-1',
+        calendar_name: 'Stored calendar',
+        is_enabled: true,
+        connectionExists: true,
+        isFromAPI: false,
+      }),
+    ]);
+  });
+});

package/src/components/ui/calendar-app/components/merge-provider-calendars.ts

@@ -0,0 +1,81 @@
+import type { CalendarConnection } from '../../../../hooks/use-calendar-sync';
+import type { ConnectedAccount, ProviderCalendar } from './calendar-types';
+
+type SyncableCalendarConnection = CalendarConnection & {
+  sync_delete_enabled?: boolean | null;
+  sync_inbound_enabled?: boolean | null;
+  sync_outbound_enabled?: boolean | null;
+};
+
+export type ManagedProviderCalendar = {
+  accessRole: string;
+  accountId: string;
+  calendar_id: string;
+  calendar_name: string;
+  color: string | null;
+  connectionExists: boolean;
+  id: string;
+  is_enabled: boolean;
+  isFromAPI: boolean;
+  syncDeleteEnabled: boolean;
+  syncInboundEnabled: boolean;
+  syncOutboundEnabled: boolean;
+  ws_id: string;
+};
+
+export function mergeProviderCalendarsByAccount({
+  accounts,
+  calendarConnections,
+  liveCalendarsByAccount,
+  wsId,
+}: {
+  accounts: ConnectedAccount[];
+  calendarConnections: CalendarConnection[];
+  liveCalendarsByAccount: Record<string, ProviderCalendar[]>;
+  wsId: string;
+}) {
+  return accounts.reduce<Record<string, ManagedProviderCalendar[]>>(
+    (result, account) => {
+      const liveCalendars = liveCalendarsByAccount[account.id] ?? [];
+      const persistedConnections = calendarConnections.filter(
+        (connection) => connection.auth_token_id === account.id
+      ) as SyncableCalendarConnection[];
+      const liveByCalendarId = new Map(
+        liveCalendars.map((calendar) => [calendar.id, calendar])
+      );
+      const calendarIds = new Set([
+        ...persistedConnections.map((connection) => connection.calendar_id),
+        ...liveCalendars.map((calendar) => calendar.id),
+      ]);
+
+      result[account.id] = [...calendarIds].map((calendarId) => {
+        const liveCalendar = liveByCalendarId.get(calendarId);
+        const connection = persistedConnections.find(
+          (candidate) => candidate.calendar_id === calendarId
+        );
+
+        return {
+          id: connection?.id ?? calendarId,
+          ws_id: wsId,
+          calendar_id: calendarId,
+          calendar_name:
+            liveCalendar?.name ?? connection?.calendar_name ?? 'Calendar',
+          is_enabled: connection?.is_enabled ?? false,
+          color:
+            connection?.color ?? liveCalendar?.backgroundColor ?? '#4285f4',
+          isFromAPI: !!liveCalendar,
+          connectionExists: !!connection,
+          accountId: account.id,
+          accessRole:
+            liveCalendar?.accessRole ?? connection?.access_role ?? 'reader',
+          syncDeleteEnabled: connection?.sync_delete_enabled ?? true,
+          syncInboundEnabled: connection?.sync_inbound_enabled ?? true,
+          syncOutboundEnabled: connection?.sync_outbound_enabled ?? false,
+        };
+      });
+
+      return result;
+    },
+    {}
+  );
+}

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

@@ -1,6 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import {
-  type CalendarSourceOption,
   getGoogleCalendarAuthUrl,
   getWorkspaceCalendarDefaultSource,
   getWorkspaceCalendarSyncPreferences,
@@ -14,67 +13,22 @@ import { useTranslations } from 'next-intl';
 import { useMemo, useState } from 'react';
 import { useCalendarSync } from '../../../../hooks/use-calendar-sync';
 import { toast } from '../../sonner';
+import {
+  type AccountsResponse,
+  getCalendarColor,
+  type ManualSyncResponse,
+  sourceInputFromOption,
+  type WorkspaceCalendarsResponse,
+} from './calendar-connections-manager-helpers';
 import type {
   AuthResponse,
   CalendarSyncHealth,
-  ConnectedAccount,
   ProviderCalendar,
 } from './calendar-types';
-
-interface AccountsResponse {
-  accounts: ConnectedAccount[];
-  grouped: {
-    google: ConnectedAccount[];
-    microsoft: ConnectedAccount[];
-  };
-  total: number;
-}
-
-interface WorkspaceCalendar {
-  id: string;
-  ws_id: string;
-  name: string;
-  description: string | null;
-  color: string | null;
-  calendar_type: 'primary' | 'tasks' | 'habits' | 'custom';
-  is_system: boolean;
-  is_enabled: boolean;
-  position: number;
-}
-
-interface WorkspaceCalendarsResponse {
-  calendars: WorkspaceCalendar[];
-  grouped: {
-    system: WorkspaceCalendar[];
-    custom: WorkspaceCalendar[];
-  };
-  total: number;
-}
-
-interface ManualSyncResponse {
-  ok: boolean;
-  alreadyRunning?: boolean;
-  code?: string;
-  error?: string;
-  retryAfterSeconds?: number | null;
-}
+import { mergeProviderCalendarsByAccount } from './merge-provider-calendars';
 
 export type CalendarConnectionsUnifiedVariant = 'compact' | 'settings';
 
-function sourceInputFromOption(option: CalendarSourceOption) {
-  if (option.provider === 'tuturuuu') {
-    return {
-      provider: 'tuturuuu' as const,
-      workspaceCalendarId: option.workspaceCalendarId,
-    };
-  }
-
-  return {
-    provider: option.provider,
-    connectionId: option.connectionId,
-  };
-}
-
 export function useCalendarConnectionsManager(wsId: string) {
   const t = useTranslations('calendar');
   const router = useRouter();
@@ -294,22 +248,6 @@ export function useCalendarConnectionsManager(wsId: string) {
   const systemCalendars = workspaceCalendarsData?.grouped?.system || [];
   const customCalendars = workspaceCalendarsData?.grouped?.custom || [];
 
-  // Calendar color mapping helper
-  const getCalendarColor = (color: string): string => {
-    const colorMap: Record<string, string> = {
-      BLUE: '#3b82f6',
-      RED: '#ef4444',
-      GREEN: '#22c55e',
-      YELLOW: '#eab308',
-      ORANGE: '#f97316',
-      PURPLE: '#a855f7',
-      PINK: '#ec4899',
-      CYAN: '#06b6d4',
-      GRAY: '#6b7280',
-    };
-    return colorMap[color.toUpperCase()] || color;
-  };
-
   // Calculate total enabled calendars count
   const tuturuuuEnabledCount = workspaceCalendars.filter(
     (c) => c.is_enabled
@@ -648,75 +586,29 @@ export function useCalendarConnectionsManager(wsId: string) {
         `/api/v1/calendar/auth/provider-calendars?wsId=${wsId}`,
         { cache: 'no-store' }
       );
-      if (!response.ok) return { calendars: [], byAccount: {} };
+      if (!response.ok)
+        return { calendars: [], byAccount: {}, accountStatuses: {} };
       return response.json() as Promise<{
         calendars: ProviderCalendar[];
         byAccount: Record<string, ProviderCalendar[]>;
+        accountStatuses: Record<
+          string,
+          { state: 'connected' | 'reconnect_required' }
+        >;
       }>;
     },
     staleTime: 30_000,
   });
 
   const calendarsByAccountFromAPI = googleCalendarsData?.byAccount || {};
+  const providerAccountStatuses = googleCalendarsData?.accountStatuses || {};
 
-  // Merge API calendars with existing connections for visibility state
-  const calendarsByAccount = accounts.reduce(
-    (acc, account) => {
-      const apiCalendars = calendarsByAccountFromAPI[account.id] || [];
-
-      // Map API calendars to connection-like objects, merging with existing connections
-      acc[account.id] = apiCalendars.map((apiCal) => {
-        // Find existing connection for this calendar
-        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,
-          ws_id: wsId,
-          calendar_id: apiCal.id,
-          calendar_name: apiCal.name,
-          is_enabled: existingConnection?.is_enabled ?? false, // Default to hidden if no connection exists
-          color: existingConnection?.color || apiCal.backgroundColor,
-          isFromAPI: true,
-          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,
-        };
-      });
-
-      return acc;
-    },
-    {} as Record<
-      string,
-      Array<{
-        id: string;
-        ws_id: string;
-        calendar_id: string;
-        calendar_name: string;
-        is_enabled: boolean;
-        color: string | null;
-        isFromAPI: boolean;
-        connectionExists: boolean;
-        accountId: string;
-        accessRole: string;
-        syncDeleteEnabled: boolean;
-        syncInboundEnabled: boolean;
-        syncOutboundEnabled: boolean;
-      }>
-    >
-  );
+  const calendarsByAccount = mergeProviderCalendarsByAccount({
+    accounts,
+    calendarConnections,
+    liveCalendarsByAccount: calendarsByAccountFromAPI,
+    wsId,
+  });
 
   // Note: Removed early return - we always show the full UI now so Tuturuuu calendars are visible
 
@@ -724,6 +616,7 @@ export function useCalendarConnectionsManager(wsId: string) {
     accounts,
     calendarConnections,
     calendarsByAccount,
+    providerAccountStatuses,
     createCalendarMutation,
     customCalendars,
     defaultSourceData,

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

@@ -284,7 +284,7 @@ describe('AgentOperationsPanel', () => {
     });
   });
 
-  it('keeps personal Zalo actions busy while a phone sync job is running', async () => {
+  it('keeps only phone-sync cancellation available while a job is running', async () => {
     mocks.getAiAgentZaloPersonalStatus.mockResolvedValue({
       phoneSyncJob: {
         completedAt: null,
@@ -338,12 +338,26 @@ describe('AgentOperationsPanel', () => {
 
     await waitFor(() => {
       expect(
-        screen.getByText('agent_zalo_personal_sync_phone').closest('button')
-      ).toBeDisabled();
+        screen
+          .getByText('agent_zalo_personal_sync_phone_cancel')
+          .closest('button')
+      ).toBeEnabled();
     });
+    expect(
+      screen.getByText('agent_zalo_personal_validate').closest('button')
+    ).toBeDisabled();
     expect(
       screen.getByText('agent_zalo_personal_sync_phone_waiting')
     ).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('agent_zalo_personal_sync_phone_cancel'));
+    await waitFor(() => {
+      expect(mocks.runAiAgentZaloPersonalAction).toHaveBeenCalledWith(
+        'agent-1',
+        'channel-1',
+        'cancel-sync-phone'
+      );
+    });
   });
 
   it('warns when personal Zalo phone transfer is approved but returns no payload', async () => {

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

@@ -188,6 +188,8 @@ const ZALO_PERSONAL_ERROR_KEYS = {
   zalo_personal_credentials_missing: 'agent_zalo_personal_credentials_missing',
   zalo_personal_feature_disabled: 'agent_zalo_personal_feature_disabled',
   zalo_personal_phone_sync_timed_out: 'agent_zalo_personal_sync_phone_failed',
+  zalo_personal_phone_sync_cancelled:
+    'agent_zalo_personal_sync_phone_cancelled',
   zalo_personal_phone_sync_no_payload:
     'agent_zalo_personal_sync_phone_no_payload',
   zalo_personal_phone_sync_waiting_for_phone:

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

@@ -65,6 +65,7 @@ const QR_STATUS_KEYS = {
 } as const satisfies Record<AiAgentZaloPersonalQrLoginStatus, string>;
 
 const ACTION_LABEL_KEYS = {
+  'cancel-sync-phone': 'agent_zalo_personal_sync_phone_cancel',
   start: 'agent_zalo_personal_start',
   stop: 'agent_zalo_personal_stop',
   'sync-history': 'agent_zalo_personal_sync_history',
@@ -73,6 +74,7 @@ const ACTION_LABEL_KEYS = {
 } as const satisfies Record<AiAgentZaloPersonalAction, string>;
 
 const ACTION_SUCCESS_KEYS = {
+  'cancel-sync-phone': 'agent_zalo_personal_sync_phone_cancelled',
   start: 'agent_zalo_personal_start_success',
   stop: 'agent_zalo_personal_stop_success',
   validate: 'agent_zalo_personal_validate_success',
@@ -381,12 +383,21 @@ export function AgentZaloPersonalPanel({
               icon={<RefreshCw className="size-4" />}
               onRun={actionMutation.mutate}
             />
-            <ActionButton
-              action="sync-phone"
-              busy={actionBusy}
-              icon={<RefreshCw className="size-4" />}
-              onRun={actionMutation.mutate}
-            />
+            {phoneSyncRunning ? (
+              <ActionButton
+                action="cancel-sync-phone"
+                busy={isPending || actionMutation.isPending}
+                icon={<X className="size-4" />}
+                onRun={actionMutation.mutate}
+              />
+            ) : (
+              <ActionButton
+                action="sync-phone"
+                busy={actionBusy}
+                icon={<RefreshCw className="size-4" />}
+                onRun={actionMutation.mutate}
+              />
+            )}
             <ActionButton
               action="stop"
               busy={actionBusy}

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

@@ -79,6 +79,10 @@ function renderShell() {
 
 describe('SettingsDialogShell keyboard navigation', () => {
   beforeEach(() => {
+    Object.defineProperty(window, 'innerWidth', {
+      configurable: true,
+      value: 1024,
+    });
     window.matchMedia = vi.fn().mockImplementation((query: string) => ({
       addEventListener: vi.fn(),
       dispatchEvent: vi.fn(),
@@ -105,6 +109,37 @@ describe('SettingsDialogShell keyboard navigation', () => {
     ).toBeGreaterThan(0);
   });
 
+  it('keeps the mobile selector first, closes with an X, and uses compact padding', () => {
+    Object.defineProperty(window, 'innerWidth', {
+      configurable: true,
+      value: 375,
+    });
+    window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+      addEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+      matches: true,
+      media: query,
+      onchange: null,
+      removeEventListener: vi.fn(),
+    }));
+
+    renderShell();
+
+    const selector = screen.getByRole('combobox');
+    const closeIcon = screen.getByTestId('settings-mobile-close-icon');
+    const closeButton = closeIcon.closest('button');
+
+    expect(closeButton).toHaveAccessibleName('common.close');
+    expect(
+      selector.compareDocumentPosition(closeButton as Node) &
+        Node.DOCUMENT_POSITION_FOLLOWING
+    ).toBeTruthy();
+    expect(closeButton?.parentElement).toHaveClass('px-2');
+    expect(
+      screen.getByTestId('active-tab').parentElement?.parentElement
+    ).toHaveClass('p-2', 'md:p-6');
+  });
+
   it('keeps settings groups expanded by default', () => {
     renderShell();
 

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

@@ -58,6 +58,23 @@ describe('mergeWorkspaceSelectWorkspaces', () => {
       /<AvatarFallback[\s\S]*<AvatarImage/u
     );
   });
+
+  it('lays out the short create and join actions in the command item grid', () => {
+    const workspaceSelectSource = readFileSync(
+      join(process.cwd(), 'src/components/ui/custom/workspace-select.tsx'),
+      'utf8'
+    );
+
+    expect(workspaceSelectSource).toContain(
+      '[&_[cmdk-group-items]]:grid-cols-2'
+    );
+    expect(workspaceSelectSource).toContain(
+      "t('common.create_workspace_action')"
+    );
+    expect(workspaceSelectSource).toContain(
+      "t('common.join_workspace_action')"
+    );
+  });
 });
 
 describe('normalizeWorkspaceSwitchPath', () => {

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

@@ -158,6 +158,7 @@ describe('NavLink', () => {
     )?.[0];
 
     expect(event).toBeInstanceOf(CustomEvent);
+    expect(event?.cancelable).toBe(true);
     expect((event as CustomEvent).detail).toEqual({
       settingsTab: 'workspace_billing',
     });

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

@@ -371,7 +371,10 @@ export function NavLink({
             : undefined;
 
         window.dispatchEvent(
-          new CustomEvent(SETTINGS_DIALOG_OPEN_INTENT_EVENT, { detail })
+          new CustomEvent(SETTINGS_DIALOG_OPEN_INTENT_EVENT, {
+            cancelable: true,
+            detail,
+          })
         );
         onClick();
       } else if (hasSubMenu) {