@tuturuuu/ui 0.4.1 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.5.0](https://github.com/tutur3u/platform/compare/ui-v0.4.1...ui-v0.5.0) (2026-06-11)
+
+
+### Features
+
+* **finance:** add wallet checkpoints ([54f9f29](https://github.com/tutur3u/platform/commit/54f9f29446ff9991e09a68abb258ce66c640b086))
+* **tasks:** add compact task create popover ([6c4b957](https://github.com/tutur3u/platform/commit/6c4b957634136a57e3ceb4ba1fc2f151c8a04314))
+* **tasks:** add task sound effects ([7c4cb06](https://github.com/tutur3u/platform/commit/7c4cb06f8f134db201f54294c3c2641ae9ae5d07))
+
+
+### Bug Fixes
+
+* **finance:** merge transfer rows and sync wallet icons ([084e1ac](https://github.com/tutur3u/platform/commit/084e1ac662a3f41c59cfc54d58fa5897293697d2))
+
 ## [0.4.1](https://github.com/tutur3u/platform/compare/ui-v0.4.0...ui-v0.4.1) (2026-06-11)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -83,13 +83,13 @@
     "@tiptap/react": "3.26.0",
     "@tiptap/starter-kit": "3.26.0",
     "@tuturuuu/ai": "0.2.1",
-    "@tuturuuu/apis": "0.2.0",
+    "@tuturuuu/apis": "0.3.0",
     "@tuturuuu/hooks": "0.0.1",
     "@tuturuuu/icons": "0.0.5",
-    "@tuturuuu/internal-api": "0.4.1",
+    "@tuturuuu/internal-api": "0.5.0",
     "@tuturuuu/supabase": "0.3.3",
     "@tuturuuu/trigger": "0.2.0",
-    "@tuturuuu/utils": "0.5.1",
+    "@tuturuuu/utils": "0.6.0",
     "@types/debug": "^4.1.13",
     "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",
@@ -148,7 +148,7 @@
     "@tanstack/react-table": "^8.21.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@tuturuuu/types": "0.6.1",
+    "@tuturuuu/types": "0.7.0",
     "@tuturuuu/typescript-config": "0.1.1",
     "@types/html2canvas": "^1.0.0",
     "@types/lodash": "^4.17.24",

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

@@ -21,6 +21,12 @@ 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';
+import {
+  clampTaskSoundEffectsVolume,
+  DEFAULT_TASK_SOUND_EFFECTS_VOLUME,
+  TASK_SOUND_EFFECTS_ENABLED_CONFIG_ID,
+  TASK_SOUND_EFFECTS_VOLUME_CONFIG_ID,
+} from '../../tu-do/shared/task-sound-effects';
 
 interface TaskSettingsData {
   task_auto_assign_to_self: boolean;
@@ -74,6 +80,18 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
     isLoading: showReviewDueDatesLoading,
     isPending: showReviewDueDatesPending,
   } = useUserBooleanConfig(TASKS_SHOW_REVIEW_DUE_DATES_CONFIG_ID, false);
+  const {
+    value: soundEffectsEnabled,
+    setValue: setSoundEffectsEnabled,
+    isLoading: soundEffectsEnabledLoading,
+    isPending: soundEffectsEnabledPending,
+  } = useUserBooleanConfig(TASK_SOUND_EFFECTS_ENABLED_CONFIG_ID, true);
+  const { data: soundEffectsVolume, isLoading: soundEffectsVolumeLoading } =
+    useUserConfig(
+      TASK_SOUND_EFFECTS_VOLUME_CONFIG_ID,
+      String(DEFAULT_TASK_SOUND_EFFECTS_VOLUME)
+    );
+  const updateSoundEffectsVolume = useUpdateUserConfig();
 
   const { data: submitShortcut, isLoading: submitShortcutLoading } =
     useUserConfig('TASK_SUBMIT_SHORTCUT', 'enter');
@@ -128,9 +146,19 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
     updateSettings.mutate({ fade_completed_tasks: checked });
   };
 
+  const handleSoundEffectsVolumeChange = (value: string) => {
+    updateSoundEffectsVolume.mutate({
+      configId: TASK_SOUND_EFFECTS_VOLUME_CONFIG_ID,
+      value: String(clampTaskSoundEffectsVolume(value)),
+    });
+  };
+
   const effectiveAutoAssignValue = isPersonalWorkspace
     ? true
     : (settings?.task_auto_assign_to_self ?? false);
+  const normalizedSoundEffectsVolume = String(
+    clampTaskSoundEffectsVolume(soundEffectsVolume)
+  );
 
   return (
     <div className="space-y-8">
@@ -163,6 +191,54 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
           />
         </SettingItemTab>
         <Separator />
+        <SettingItemTab
+          title={t('sound_effects')}
+          description={t('sound_effects_description')}
+        >
+          <Switch
+            aria-label={t('sound_effects')}
+            checked={soundEffectsEnabled}
+            onCheckedChange={setSoundEffectsEnabled}
+            disabled={soundEffectsEnabledLoading || soundEffectsEnabledPending}
+          />
+        </SettingItemTab>
+        <Separator />
+        <SettingItemTab
+          title={t('sound_effects_volume')}
+          description={t('sound_effects_volume_description')}
+        >
+          <Select
+            value={normalizedSoundEffectsVolume}
+            onValueChange={handleSoundEffectsVolumeChange}
+            disabled={
+              soundEffectsVolumeLoading ||
+              updateSoundEffectsVolume.isPending ||
+              !soundEffectsEnabled
+            }
+          >
+            <SelectTrigger
+              aria-label={t('sound_effects_volume')}
+              className="w-36"
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="15">
+                {t('sound_effects_volume_soft')}
+              </SelectItem>
+              <SelectItem value="35">
+                {t('sound_effects_volume_balanced')}
+              </SelectItem>
+              <SelectItem value="60">
+                {t('sound_effects_volume_lively')}
+              </SelectItem>
+              <SelectItem value="85">
+                {t('sound_effects_volume_bold')}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </SettingItemTab>
+        <Separator />
         <SettingItemTab
           title={t('draft_mode')}
           description={t('draft_mode_description')}

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]);
+  });
+});