Clarify split equally 321 (#324)

* Add dynamic split description for expense splits

Introduces a utility to generate context-aware split descriptions in AddExpense, updating UI to show more informative labels based on split type, payer, and participant count. Localization keys for new descriptions were added to all supported languages.

* Update splitDescriptions.ts

* We already have the paid and for keys in the common namespace, please do not duplicate them.

* Please move this function to string utils

* Include this function in the useTranslationWithUtils hook, so that passing t is not required.

* fixed sizing because it was cutting off the number on tablet sizes

* Simplify useTranslationWithUtils hook using useMemo

* Simplify useTranslationWithUtils properly

* Fix usages of toUIDate

* Remove redundant split_equally_count key

---------

Co-authored-by: Wiktor Krokosz <38408316+krokosik@users.noreply.github.com>
Co-authored-by: krokosik <krokosik@pm.me>

Author: vin-ni

src/components/AddExpense/AddExpensePage.tsx

@@ -10,7 +10,6 @@ import { useAddExpenseStore } from '~/store/addStore';
 import { api } from '~/utils/api';
 import { toSafeBigInt } from '~/utils/numbers';
 
-import { toUIDate } from '~/utils/strings';
 import { Button } from '../ui/button';
 import { Calendar } from '../ui/calendar';
 import { Input } from '../ui/input';
@@ -22,13 +21,14 @@ import { SplitTypeSection } from './SplitTypeSection';
 import { UploadFile } from './UploadFile';
 import { UserInput } from './UserInput';
 import { toast } from 'sonner';
+import { useTranslationWithUtils } from '~/hooks/useTranslationWithUtils';
 
 export const AddOrEditExpensePage: React.FC<{
   isStorageConfigured: boolean;
   enableSendingInvites: boolean;
   expenseId?: string;
 }> = ({ isStorageConfigured, enableSendingInvites, expenseId }) => {
-  const { t } = useTranslation('expense_details');
+  const { t, toUIDate } = useTranslationWithUtils(['expense_details']);
   const showFriends = useAddExpenseStore((s) => s.showFriends);
   const amount = useAddExpenseStore((s) => s.amount);
   const isNegative = useAddExpenseStore((s) => s.isNegative);

src/components/AddExpense/SplitTypeSection.tsx

@@ -10,27 +10,28 @@ import {
   Plus,
   X,
 } from 'lucide-react';
-import { type TFunction, useTranslation } from 'next-i18next';
 import { type ChangeEvent, useCallback, useMemo } from 'react';
+import { useTranslationWithUtils } from '~/hooks/useTranslationWithUtils';
 
 import { type AddExpenseState, type Participant, useAddExpenseStore } from '~/store/addStore';
 import { removeTrailingZeros, toSafeBigInt, toUIString } from '~/utils/numbers';
 
+import { type TFunction, useTranslation } from 'next-i18next';
 import { EntityAvatar } from '../ui/avatar';
 import { AppDrawer, DrawerClose } from '../ui/drawer';
 import { Input } from '../ui/input';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
-import { useTranslationWithUtils } from '~/hooks/useTranslationWithUtils';
 
 export const SplitTypeSection: React.FC = () => {
-  const { t, displayName } = useTranslationWithUtils(['expense_details']);
+  const { t, displayName, generateSplitDescription } = useTranslationWithUtils(['expense_details']);
   const isNegative = useAddExpenseStore((s) => s.isNegative);
   const paidBy = useAddExpenseStore((s) => s.paidBy);
   const participants = useAddExpenseStore((s) => s.participants);
   const currentUser = useAddExpenseStore((s) => s.currentUser);
   const canSplitScreenClosed = useAddExpenseStore((s) => s.canSplitScreenClosed);
   const splitType = useAddExpenseStore((s) => s.splitType);
   const splitScreenOpen = useAddExpenseStore((s) => s.splitScreenOpen);
+  const splitShares = useAddExpenseStore((s) => s.splitShares);
 
   const { setPaidBy, setSplitScreenOpen } = useAddExpenseStore((s) => s.actions);
 
@@ -68,10 +69,8 @@ export const SplitTypeSection: React.FC = () => {
       <p>{t('ui.and', { ns: 'common' })} </p>
       <AppDrawer
         trigger={
-          <div className="max-w-32 overflow-hidden px-1.5 text-[16.5px] text-nowrap text-ellipsis text-cyan-500 lg:max-w-48">
-            {splitType === SplitType.EQUAL
-              ? t('ui.add_expense_details.split_type_section.split_equally')
-              : t('ui.add_expense_details.split_type_section.split_unequally')}
+          <div className="max-w-40 overflow-hidden px-1.5 text-[16.5px] text-nowrap text-ellipsis text-cyan-500 md:max-w-48 lg:max-w-56">
+            {generateSplitDescription(splitType, participants, splitShares, paidBy, currentUser)}
           </div>
         }
         title={t(

src/components/Expense/ExpenseDetails.tsx

@@ -4,7 +4,6 @@ import { type User as NextUser } from 'next-auth';
 
 import { toUIString } from '~/utils/numbers';
 
-import { toUIDate } from '~/utils/strings';
 import { EntityAvatar } from '../ui/avatar';
 import { Separator } from '../ui/separator';
 import { Receipt } from './Receipt';
@@ -25,7 +24,7 @@ interface ExpenseDetailsProps {
 }
 
 const ExpenseDetails: FC<ExpenseDetailsProps> = ({ user, expense, storagePublicUrl }) => {
-  const { displayName, t } = useTranslationWithUtils(['expense_details']);
+  const { displayName, toUIDate, t } = useTranslationWithUtils(['expense_details']);
   return (
     <>
       <div className="mb-4 flex items-start justify-between gap-2">

src/components/Expense/ExpenseList.tsx

@@ -6,7 +6,6 @@ import React from 'react';
 import { CategoryIcon } from '~/components/ui/categoryIcons';
 import type { ExpenseRouter } from '~/server/api/routers/expense';
 import { toUIString } from '~/utils/numbers';
-import { toUIDate } from '~/utils/strings';
 import { useTranslationWithUtils } from '~/hooks/useTranslationWithUtils';
 
 export const ExpenseList: React.FC<{
@@ -18,7 +17,7 @@ export const ExpenseList: React.FC<{
   isGroup?: boolean;
   isLoading?: boolean;
 }> = ({ userId, isGroup = false, expenses = [], contactId, isLoading }) => {
-  const { displayName, t } = useTranslationWithUtils(['expense_details']);
+  const { displayName, toUIDate, t } = useTranslationWithUtils(['expense_details']);
 
   return (
     <>

src/hooks/useTranslationWithUtils.ts

@@ -1,11 +1,19 @@
-import { type User } from '@prisma/client';
 import { useTranslation } from 'next-i18next';
-import { useCallback } from 'react';
-import { displayName as dn } from '~/utils/strings';
+import { useCallback, useMemo } from 'react';
+import {
+  type ParametersExceptTranslation,
+  displayName as dn,
+  generateSplitDescription as gsd,
+  toUIDate as tUD,
+} from '~/utils/strings';
 
 export const useTranslationWithUtils = (
   namespaces?: string[],
-): ReturnType<typeof useTranslation> & { displayName: typeof displayName } => {
+): ReturnType<typeof useTranslation> & {
+  displayName: typeof displayName;
+  generateSplitDescription: typeof generateSplitDescription;
+  toUIDate: typeof toUIDate;
+} => {
   if (!namespaces || namespaces.length === 0) {
     namespaces = ['common'];
   } else if (!namespaces.includes('common')) {
@@ -14,14 +22,23 @@ export const useTranslationWithUtils = (
   const translation = useTranslation(namespaces);
 
   const displayName = useCallback(
-    (user?: Pick<User, 'name' | 'email' | 'id'> | null, currentUserId?: number): string =>
-      dn(user, currentUserId, translation.t),
+    (...args: ParametersExceptTranslation<typeof dn>): string => dn(translation.t, ...args),
+    [translation.t],
+  );
+
+  const generateSplitDescription = useCallback(
+    (...args: ParametersExceptTranslation<typeof gsd>): string => gsd(translation.t, ...args),
+    [translation.t],
+  );
+
+  const toUIDate = useCallback(
+    (...args: ParametersExceptTranslation<typeof tUD>): string => tUD(translation.t, ...args),
     [translation.t],
   );
 
   // @ts-ignore
-  return {
-    ...translation,
-    displayName,
-  };
+  return useMemo(
+    () => ({ ...translation, displayName, generateSplitDescription, toUIDate }),
+    [translation, displayName, generateSplitDescription, toUIDate],
+  );
 };

src/pages/activity.tsx

@@ -7,7 +7,6 @@ import { EntityAvatar } from '~/components/ui/avatar';
 import { type NextPageWithUser } from '~/types';
 import { api } from '~/utils/api';
 import { BigMath, toUIString } from '~/utils/numbers';
-import { toUIDate } from '~/utils/strings';
 import { type TFunction } from 'next-i18next';
 import { useTranslationWithUtils } from '~/hooks/useTranslationWithUtils';
 import { withI18nStaticProps } from '~/utils/i18n/server';
@@ -46,7 +45,7 @@ function getPaymentString(
 }
 
 const ActivityPage: NextPageWithUser = ({ user }) => {
-  const { displayName, t } = useTranslationWithUtils();
+  const { displayName, t, toUIDate } = useTranslationWithUtils();
   const expensesQuery = api.expense.getAllExpenses.useQuery();
 
   return (

src/pages/groups/[groupId].tsx

@@ -39,12 +39,11 @@ import { type NextPageWithUser } from '~/types';
 import { api } from '~/utils/api';
 import { customServerSideTranslations } from '~/utils/i18n/server';
 import { toUIString } from '~/utils/numbers';
-import { toUIDate } from '~/utils/strings';
 
 const BalancePage: NextPageWithUser<{
   enableSendingInvites: boolean;
 }> = ({ user, enableSendingInvites }) => {
-  const { displayName, t } = useTranslationWithUtils(['groups_details']);
+  const { displayName, toUIDate, t } = useTranslationWithUtils(['groups_details']);
   const router = useRouter();
   const groupId = parseInt(router.query.groupId as string);
 

src/utils/strings.ts

@@ -1,17 +1,71 @@
-import { type User } from '@prisma/client';
+import { SplitType, type User } from '@prisma/client';
 import { format, isToday } from 'date-fns';
 import { type TFunction } from 'next-i18next';
+import { type AddExpenseState, type Participant } from '~/store/addStore';
+
+export type ParametersExceptTranslation<F> = F extends (t: TFunction, ...rest: infer R) => any
+  ? R
+  : never;
 
 export const displayName = (
+  t?: TFunction,
   user?: Pick<User, 'name' | 'email' | 'id'> | null,
   currentUserId?: number,
-  t?: TFunction,
 ): string => {
   if (currentUserId === user?.id) {
     return t ? t('ui.actors.you', { ns: 'common' }) : 'You';
   }
   return user?.name ?? user?.email ?? '';
 };
 
-export const toUIDate = (date: Date, { useToday = false, year = false } = {}): string =>
-  useToday && isToday(date) ? 'Today' : format(date, year ? 'dd MMM yyyy' : 'MMM dd');
+export const toUIDate = (
+  t: TFunction,
+  date: Date,
+  { useToday = false, year = false } = {},
+): string =>
+  useToday && isToday(date) ? t('ui.today') : format(date, year ? 'dd MMM yyyy' : 'MMM dd');
+
+export function generateSplitDescription(
+  t: TFunction,
+  splitType: SplitType,
+  participants: Participant[],
+  splitShares: AddExpenseState['splitShares'],
+  paidBy: Participant | undefined,
+  currentUser: Participant | undefined,
+): string {
+  // Only enhance the description for EQUAL split type
+  if (splitType !== SplitType.EQUAL) {
+    return t('ui.add_expense_details.split_type_section.split_unequally');
+  }
+
+  if (!paidBy || !currentUser) {
+    return t('ui.add_expense_details.split_type_section.split_equally');
+  }
+
+  // Get participants who are actually selected for the split (have non-zero shares)
+  // If split shares are not initialized yet (undefined), include all participants
+  const selectedParticipants = participants.filter((p) => {
+    const share = splitShares[p.id]?.[SplitType.EQUAL];
+    return share === undefined || share !== 0n;
+  });
+
+  // If no one is selected, fall back to default
+  if (selectedParticipants.length === 0) {
+    return t('ui.add_expense_details.split_type_section.split_equally');
+  }
+
+  // Case 1: Paying for exactly one person
+  if (selectedParticipants.length === 1) {
+    const beneficiary = selectedParticipants[0];
+    const beneficiaryName = beneficiary?.name?.split(' ')[0] || beneficiary?.email || 'someone';
+    return `${t('common:ui.expense.user.paid')} ${t('common:ui.expense.for')} ${beneficiaryName}`;
+  }
+
+  // Case 2: Splitting with multiple people
+  if (selectedParticipants.length > 1) {
+    return `t('ui.add_expense_details.split_type_section.split_equally') (${selectedParticipants.length})`;
+  }
+
+  // Fallback to default for all other cases
+  return t('ui.add_expense_details.split_type_section.split_equally');
+}