@tuturuuu/ui 0.4.0 → 0.5.0

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

@@ -0,0 +1,126 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import '@testing-library/jest-dom/vitest';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { QuickSettingsPopover } from '../../tu-do/shared/task-edit-dialog/components/quick-settings-popover';
+import { TaskSettings } from './task-settings';
+
+const {
+  mockSetSoundEffectsEnabled,
+  mockUpdateUserConfigMutate,
+  mockConfigState,
+} = vi.hoisted(() => ({
+  mockSetSoundEffectsEnabled: vi.fn(),
+  mockUpdateUserConfigMutate: vi.fn(),
+  mockConfigState: {
+    soundEffectsEnabled: true,
+    soundEffectsVolume: '35',
+  },
+}));
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock('@tuturuuu/ui/hooks/use-user-config', () => ({
+  useUserBooleanConfig: (configId: string, defaultValue = false) => {
+    if (configId === 'TASK_SOUND_EFFECTS_ENABLED') {
+      return {
+        isLoading: false,
+        isPending: false,
+        setValue: mockSetSoundEffectsEnabled,
+        toggle: vi.fn(),
+        value: mockConfigState.soundEffectsEnabled,
+      };
+    }
+
+    return {
+      isLoading: false,
+      isPending: false,
+      setValue: vi.fn(),
+      toggle: vi.fn(),
+      value: defaultValue,
+    };
+  },
+  useUserConfig: (configId: string, defaultValue = '') => ({
+    data:
+      configId === 'TASK_SOUND_EFFECTS_VOLUME'
+        ? mockConfigState.soundEffectsVolume
+        : defaultValue,
+    isLoading: false,
+  }),
+  useUpdateUserConfig: () => ({
+    isPending: false,
+    mutate: mockUpdateUserConfigMutate,
+  }),
+}));
+
+function renderWithQueryClient(children: ReactNode) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      mutations: { retry: false },
+      queries: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}
+
+describe('task sound settings controls', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockConfigState.soundEffectsEnabled = true;
+    mockConfigState.soundEffectsVolume = '35';
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(() =>
+        Promise.resolve({
+          json: () =>
+            Promise.resolve({
+              fade_completed_tasks: false,
+              task_auto_assign_to_self: false,
+            }),
+          ok: true,
+        })
+      )
+    );
+  });
+
+  it('renders task settings sound controls and persists the switch value', async () => {
+    renderWithQueryClient(<TaskSettings />);
+
+    expect(await screen.findByText('sound_effects')).toBeInTheDocument();
+    expect(screen.getByText('sound_effects_volume')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('switch', { name: 'sound_effects' }));
+
+    expect(mockSetSoundEffectsEnabled).toHaveBeenCalledWith(false);
+  });
+
+  it('renders the quick settings sound switch and persists changes', async () => {
+    renderWithQueryClient(<QuickSettingsPopover />);
+
+    const trigger = screen.getByRole('button', { name: 'Quick Settings' });
+
+    await waitFor(() => {
+      expect(trigger).not.toBeDisabled();
+    });
+
+    fireEvent.click(trigger);
+
+    await waitFor(() => {
+      expect(screen.getByText('sound_effects')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByRole('switch', { name: 'sound_effects' }));
+
+    expect(mockSetSoundEffectsEnabled).toHaveBeenCalledWith(false);
+  });
+});

package/src/components/ui/finance/transactions/infinite-transactions-list.tsx

@@ -73,6 +73,7 @@ import {
 import { PeriodBreakdownPanel } from './period-charts';
 import { TransactionCard } from './transaction-card';
 import { TransactionStatistics } from './transaction-statistics';
+import { mergeLinkedTransferTransactions } from './transfer-merge';
 
 interface InfiniteTransactionsListProps {
   wsId: string;
@@ -446,6 +447,10 @@ export function InfiniteTransactionsList({
   const allTransactions = usePeriods
     ? []
     : dailyData?.pages.flatMap((page) => page.data) || [];
+  const visibleTransactions = useMemo(
+    () => mergeLinkedTransferTransactions(allTransactions),
+    [allTransactions]
+  );
 
   // All periods for period-based views
   const allPeriods: TransactionPeriod[] = usePeriods
@@ -485,26 +490,32 @@ export function InfiniteTransactionsList({
   const groupedTransactions = useMemo(() => {
     // For period-based views, convert periods to grouped transactions format
     if (usePeriods) {
-      return allPeriods.map((period) => ({
-        date: period.periodStart,
-        label: generatePeriodLabel(period.periodStart, viewMode),
-        transactions: period.transactions || [],
-        // Store period stats for display
-        periodStats: {
-          totalIncome: period.totalIncome,
-          totalExpense: period.totalExpense,
-          netTotal: period.netTotal,
-          transactionCount: period.transactionCount,
-          hasRedactedAmounts: period.hasRedactedAmounts,
-        },
-      }));
+      return allPeriods.map((period) => {
+        const transactions = mergeLinkedTransferTransactions(
+          period.transactions || []
+        );
+
+        return {
+          date: period.periodStart,
+          label: generatePeriodLabel(period.periodStart, viewMode),
+          transactions,
+          // Store period stats for display
+          periodStats: {
+            totalIncome: period.totalIncome,
+            totalExpense: period.totalExpense,
+            netTotal: period.netTotal,
+            transactionCount: transactions.length,
+            hasRedactedAmounts: period.hasRedactedAmounts,
+          },
+        };
+      });
     }
 
     // For daily view, group transactions by date in the user's timezone
     const groups: GroupedTransactions[] = [];
     const now = dayjs().tz(resolvedTimezone);
 
-    allTransactions.forEach((transaction) => {
+    visibleTransactions.forEach((transaction) => {
       // Parse transaction date in the user's timezone
       const transactionDate = dayjs(transaction.taken_at).tz(resolvedTimezone);
       const dateKey = transactionDate.format('YYYY-MM-DD');
@@ -543,7 +554,7 @@ export function InfiniteTransactionsList({
 
     return groups;
   }, [
-    allTransactions,
+    visibleTransactions,
     allPeriods,
     usePeriods,
     viewMode,
@@ -604,7 +615,7 @@ export function InfiniteTransactionsList({
   // Check if there's no data (either no transactions for daily or no periods for other views)
   const hasNoData = usePeriods
     ? allPeriods.length === 0
-    : allTransactions.length === 0;
+    : visibleTransactions.length === 0;
 
   if (hasNoData) {
     return (
@@ -627,7 +638,7 @@ export function InfiniteTransactionsList({
       {/* Statistics Summary - Only show when filters are active (daily view only uses transactions for stats) */}
       {hasActiveFilter && (stats || isStatsLoading) && !usePeriods && (
         <TransactionStatistics
-          transactions={allTransactions}
+          transactions={visibleTransactions}
           stats={stats}
           isLoading={isStatsLoading}
           currency={currency}
@@ -1023,7 +1034,7 @@ export function InfiniteTransactionsList({
         {!hasNextPage &&
           (usePeriods
             ? allPeriods.length > 5
-            : allTransactions.length > 10) && (
+            : visibleTransactions.length > 10) && (
             <div className="rounded-xl border border-dashed bg-muted/20 p-6 text-center">
               <p className="text-muted-foreground text-sm">
                 {t('user-data-table.common.end_of_list')}

package/src/components/ui/finance/transactions/transaction-card.tsx

@@ -83,35 +83,8 @@ export function TransactionCard({
   const [isHovered, setIsHovered] = useState(false);
   const { isConfidential: areNumbersHidden } =
     useFinanceConfidentialVisibility();
-  const effectiveCurrency = transaction.wallet_currency || currency;
-  const isExpense = (transaction.amount || 0) < 0;
   const isTransfer = !!transaction.transfer;
 
-  // Currency conversion for foreign-currency transactions
-  const isForeignCurrency =
-    effectiveCurrency.toUpperCase() !== currency.toUpperCase();
-  const { data: exchangeRateData } = useExchangeRates();
-  const convertedAmount = useMemo(() => {
-    if (
-      !isForeignCurrency ||
-      transaction.amount == null ||
-      !exchangeRateData?.data
-    )
-      return null;
-    return convertCurrency(
-      transaction.amount,
-      effectiveCurrency,
-      currency,
-      exchangeRateData.data
-    );
-  }, [
-    isForeignCurrency,
-    transaction.amount,
-    effectiveCurrency,
-    currency,
-    exchangeRateData?.data,
-  ]);
-
   // Check if transaction is confidential
   const isConfidential =
     transaction.is_amount_confidential ||
@@ -154,6 +127,65 @@ export function TransactionCard({
     return wallets.find((w) => w.id === transaction.transfer?.linked_wallet_id);
   }, [transaction.transfer?.linked_wallet_id, wallets]);
 
+  const transferDisplay = transaction.transfer
+    ? transaction.transfer.is_origin
+      ? {
+          amount: transaction.amount,
+          amountCurrency: transaction.wallet_currency,
+          destinationIcon: linkedWallet?.icon,
+          destinationImageSrc: linkedWallet?.image_src,
+          destinationWalletId: transaction.transfer.linked_wallet_id,
+          destinationWalletName: transaction.transfer.linked_wallet_name,
+          originIcon: wallet?.icon,
+          originImageSrc: wallet?.image_src,
+          originWalletId: transaction.wallet_id,
+          originWalletName: transaction.wallet,
+          secondaryAmount: transaction.transfer.linked_amount,
+          secondaryCurrency: transaction.transfer.linked_wallet_currency,
+        }
+      : {
+          amount: transaction.transfer.linked_amount ?? transaction.amount,
+          amountCurrency:
+            transaction.transfer.linked_wallet_currency ||
+            transaction.wallet_currency,
+          destinationIcon: wallet?.icon,
+          destinationImageSrc: wallet?.image_src,
+          destinationWalletId: transaction.wallet_id,
+          destinationWalletName: transaction.wallet,
+          originIcon: linkedWallet?.icon,
+          originImageSrc: linkedWallet?.image_src,
+          originWalletId: transaction.transfer.linked_wallet_id,
+          originWalletName: transaction.transfer.linked_wallet_name,
+          secondaryAmount: transaction.amount,
+          secondaryCurrency: transaction.wallet_currency,
+        }
+    : null;
+  const displayAmount = transferDisplay?.amount ?? transaction.amount;
+  const effectiveCurrency =
+    transferDisplay?.amountCurrency || transaction.wallet_currency || currency;
+  const isExpense = (displayAmount || 0) < 0;
+
+  // Currency conversion for foreign-currency transactions
+  const isForeignCurrency =
+    effectiveCurrency.toUpperCase() !== currency.toUpperCase();
+  const { data: exchangeRateData } = useExchangeRates();
+  const convertedAmount = useMemo(() => {
+    if (!isForeignCurrency || displayAmount == null || !exchangeRateData?.data)
+      return null;
+    return convertCurrency(
+      displayAmount,
+      effectiveCurrency,
+      currency,
+      exchangeRateData.data
+    );
+  }, [
+    isForeignCurrency,
+    displayAmount,
+    effectiveCurrency,
+    currency,
+    exchangeRateData?.data,
+  ]);
+
   // Determine if we should use custom styling
   const hasCustomStyling = Boolean(customColorStyles);
 
@@ -331,37 +363,37 @@ export function TransactionCard({
                   {transaction.category}
                 </Badge>
               ) : null}
-              {transaction.wallet && (
+              {(transaction.wallet || transferDisplay) && (
                 <div className="flex items-center gap-1">
-                  {isTransfer && transaction.transfer ? (
+                  {isTransfer && transferDisplay ? (
                     <div className="flex items-center rounded-full border border-dynamic-blue/20 bg-dynamic-blue/5 py-0.5 pr-1 pl-1">
                       <Link
-                        href={`/${wsId}${financeHref(`/wallets/${transaction.wallet_id}`)}`}
+                        href={`/${wsId}${financeHref(`/wallets/${transferDisplay.originWalletId}`)}`}
                         onClick={(e) => e.stopPropagation()}
                       >
                         <span className="flex items-center gap-1 rounded-full px-1.5 py-0.5 font-medium text-[11px] text-muted-foreground transition-colors hover:bg-dynamic-blue/10 hover:text-foreground sm:text-xs">
                           <WalletIconDisplay
-                            icon={wallet?.icon}
-                            imageSrc={wallet?.image_src}
+                            icon={transferDisplay.originIcon}
+                            imageSrc={transferDisplay.originImageSrc}
                             size="sm"
                             className="h-3 w-3"
                           />
-                          {transaction.wallet}
+                          {transferDisplay.originWalletName}
                         </span>
                       </Link>
                       <ArrowRight className="mx-0.5 h-3 w-3 shrink-0 text-dynamic-blue" />
                       <Link
-                        href={`/${wsId}${financeHref(`/wallets/${transaction.transfer.linked_wallet_id}`)}`}
+                        href={`/${wsId}${financeHref(`/wallets/${transferDisplay.destinationWalletId}`)}`}
                         onClick={(e) => e.stopPropagation()}
                       >
                         <span className="flex items-center gap-1 rounded-full px-1.5 py-0.5 font-medium text-[11px] text-dynamic-blue transition-colors hover:bg-dynamic-blue/10 sm:text-xs">
                           <WalletIconDisplay
-                            icon={linkedWallet?.icon}
-                            imageSrc={linkedWallet?.image_src}
+                            icon={transferDisplay.destinationIcon}
+                            imageSrc={transferDisplay.destinationImageSrc}
                             size="sm"
                             className="h-3 w-3"
                           />
-                          {transaction.transfer.linked_wallet_name}
+                          {transferDisplay.destinationWalletName}
                         </span>
                       </Link>
                     </div>
@@ -401,7 +433,7 @@ export function TransactionCard({
             <div className="flex shrink-0 items-center gap-1 sm:gap-2">
               <div className="flex flex-col items-end">
                 <ConfidentialAmount
-                  amount={transaction.amount ?? null}
+                  amount={displayAmount ?? null}
                   isConfidential={transaction.is_amount_confidential || false}
                   currency={effectiveCurrency}
                   className={cn(
@@ -426,16 +458,16 @@ export function TransactionCard({
                   }
                 />
                 {isTransfer &&
-                  transaction.transfer?.linked_amount != null &&
-                  transaction.transfer?.linked_wallet_currency &&
-                  transaction.transfer.linked_wallet_currency.toUpperCase() !==
+                  transferDisplay?.secondaryAmount != null &&
+                  transferDisplay.secondaryCurrency &&
+                  transferDisplay.secondaryCurrency.toUpperCase() !==
                     effectiveCurrency.toUpperCase() && (
                     <span className="text-[10px] text-dynamic-blue tabular-nums sm:text-xs">
                       {areNumbersHidden
                         ? FINANCE_HIDDEN_AMOUNT
                         : formatCurrency(
-                            Math.abs(transaction.transfer.linked_amount),
-                            transaction.transfer.linked_wallet_currency,
+                            Math.abs(transferDisplay.secondaryAmount),
+                            transferDisplay.secondaryCurrency,
                             undefined,
                             { signDisplay: 'always' }
                           )}

package/src/components/ui/finance/transactions/transfer-merge.test.ts

@@ -0,0 +1,90 @@
+import type { Transaction } from '@tuturuuu/types/primitives/Transaction';
+import { describe, expect, it } from 'vitest';
+import { mergeLinkedTransferTransactions } from './transfer-merge';
+
+function transaction(
+  id: string,
+  amount: number,
+  transfer?: Transaction['transfer']
+): Transaction {
+  return {
+    amount,
+    id,
+    taken_at: '2026-06-11T00:00:00.000Z',
+    wallet_id: `wallet-${id}`,
+    wallet: `Wallet ${id}`,
+    transfer,
+  };
+}
+
+const originTransfer = {
+  is_origin: true,
+  linked_amount: 100,
+  linked_transaction_id: 'destination',
+  linked_wallet_id: 'wallet-destination',
+  linked_wallet_name: 'Destination Wallet',
+} satisfies Transaction['transfer'];
+
+const destinationTransfer = {
+  is_origin: false,
+  linked_amount: -100,
+  linked_transaction_id: 'origin',
+  linked_wallet_id: 'wallet-origin',
+  linked_wallet_name: 'Origin Wallet',
+} satisfies Transaction['transfer'];
+
+describe('mergeLinkedTransferTransactions', () => {
+  it('collapses a linked origin and destination pair into one transfer row', () => {
+    const origin = transaction('origin', -100, originTransfer);
+    const destination = transaction('destination', 100, destinationTransfer);
+
+    expect(mergeLinkedTransferTransactions([origin, destination])).toEqual([
+      origin,
+    ]);
+  });
+
+  it('keeps the origin transfer when the destination leg appears first', () => {
+    const origin = transaction('origin', -100, originTransfer);
+    const destination = transaction('destination', 100, destinationTransfer);
+
+    expect(mergeLinkedTransferTransactions([destination, origin])).toEqual([
+      origin,
+    ]);
+  });
+
+  it('keeps an unmatched transfer leg visible', () => {
+    const destination = transaction('destination', 100, destinationTransfer);
+
+    expect(mergeLinkedTransferTransactions([destination])).toEqual([
+      destination,
+    ]);
+  });
+
+  it('does not merge unrelated rows with matching amounts', () => {
+    const expense = transaction('expense', -100);
+    const income = transaction('income', 100);
+
+    expect(mergeLinkedTransferTransactions([expense, income])).toEqual([
+      expense,
+      income,
+    ]);
+  });
+
+  it('keeps unrelated row order while using the first pair slot', () => {
+    const first = transaction('first', 1);
+    const second = transaction('second', 2);
+    const third = transaction('third', 3);
+    const origin = transaction('origin', -100, originTransfer);
+    const destination = transaction('destination', 100, destinationTransfer);
+
+    expect(
+      mergeLinkedTransferTransactions([
+        first,
+        destination,
+        second,
+        origin,
+        third,
+      ])
+    ).toEqual([first, origin, second, third]);
+  });
+});

package/src/components/ui/finance/transactions/transfer-merge.ts

@@ -0,0 +1,52 @@
+import type { Transaction } from '@tuturuuu/types/primitives/Transaction';
+
+function getTransferPairKey(transaction: Transaction) {
+  const transactionId = transaction.id;
+  const linkedTransactionId = transaction.transfer?.linked_transaction_id;
+
+  if (!transactionId || !linkedTransactionId) return null;
+
+  return [transactionId, linkedTransactionId].sort().join(':');
+}
+
+function preferOriginTransfer(
+  current: Transaction,
+  candidate: Transaction
+): Transaction {
+  if (candidate.transfer?.is_origin && !current.transfer?.is_origin) {
+    return candidate;
+  }
+
+  return current;
+}
+
+export function mergeLinkedTransferTransactions(
+  transactions: Transaction[]
+): Transaction[] {
+  const mergedTransactions: Transaction[] = [];
+  const pairSlotByKey = new Map<string, number>();
+
+  for (const transaction of transactions) {
+    const pairKey = getTransferPairKey(transaction);
+
+    if (!pairKey) {
+      mergedTransactions.push(transaction);
+      continue;
+    }
+
+    const existingSlot = pairSlotByKey.get(pairKey);
+
+    if (existingSlot === undefined) {
+      pairSlotByKey.set(pairKey, mergedTransactions.length);
+      mergedTransactions.push(transaction);
+      continue;
+    }
+
+    mergedTransactions[existingSlot] = preferOriginTransfer(
+      mergedTransactions[existingSlot]!,
+      transaction
+    );
+  }
+
+  return mergedTransactions;
+}