Merge remote-tracking branch 'origin/main'

Author: weblate

src/components/Expense/ExpenseList.tsx

@@ -12,6 +12,8 @@ import type { ExpenseRouter } from '~/server/api/routers/expense';
 import { useTranslationWithUtils } from '~/hooks/useTranslationWithUtils';
 import { api } from '~/utils/api';
 import { useRouter } from 'next/router';
+import { Separator } from '../ui/separator';
+import { cn } from '~/lib/utils';
 
 type ExpensesOutput =
   | inferRouterOutputs<ExpenseRouter>['getGroupExpenses']
@@ -35,25 +37,54 @@ export const ExpenseList: React.FC<{
     return <NoExpenses />;
   }
 
+  const { i18n } = useTranslationWithUtils();
+
+  let lastDate: Date | null = null;
+
   return (
-    <>
+    <div className="flex flex-col gap-3">
       {expenses.map((e) => {
+        const currentDate = e.expenseDate;
+        let isFirstOfMonth = false;
+
+        if (
+          lastDate === null ||
+          currentDate.getMonth() !== lastDate.getMonth() ||
+          currentDate.getFullYear() !== lastDate.getFullYear()
+        ) {
+          isFirstOfMonth = true;
+        }
+
+        lastDate = currentDate;
+
         const isSettlement = e.splitType === SplitType.SETTLEMENT;
         const isCurrencyConversion = e.splitType === SplitType.CURRENCY_CONVERSION;
 
         return (
-          <Link
-            href={`/${isGroup ? 'groups' : 'balances'}/${contactId}/expenses/${e.id}`}
-            key={e.id}
-            className="flex items-center justify-between py-2"
-          >
-            {isSettlement && <Settlement e={e} userId={userId} />}
-            {isCurrencyConversion && <CurrencyConversion e={e} userId={userId} />}
-            {!isSettlement && !isCurrencyConversion && <Expense e={e} userId={userId} />}
-          </Link>
+          <React.Fragment key={e.id}>
+            {isFirstOfMonth && (
+              <div className="flex flex-row gap-3 pt-2">
+                <div className="text-xs font-medium text-gray-700 uppercase">
+                  {new Intl.DateTimeFormat(i18n.language, {
+                    month: 'long',
+                    year: 'numeric',
+                  }).format(currentDate)}
+                </div>
+                <Separator className="flex-1 bg-gray-800" />
+              </div>
+            )}
+            <Link
+              href={`/${isGroup ? 'groups' : 'balances'}/${contactId}/expenses/${e.id}`}
+              className={cn('flex items-center justify-between', isFirstOfMonth ? 'pb-2' : 'py-2')}
+            >
+              {isSettlement && <Settlement e={e} userId={userId} />}
+              {isCurrencyConversion && <CurrencyConversion e={e} userId={userId} />}
+              {!isSettlement && !isCurrencyConversion && <Expense e={e} userId={userId} />}
+            </Link>
+          </React.Fragment>
         );
       })}
-    </>
+    </div>
   );
 };
 

src/pages/balances/[friendId].tsx

@@ -134,15 +134,13 @@ const FriendPage: NextPageWithUser = ({ user }) => {
                 disabled={!expenses.data || 0 === expenses.data.length}
               />
             </div>
-            <Separator />
-            <div className="mx-4 mt-4 flex flex-col gap-3">
-              <ExpenseList
-                expenses={expenses.data}
-                contactId={_friendId}
-                isLoading={expenses.isPending}
-                userId={user.id}
-              />
-            </div>
+            <Separator className="mt-4" />
+            <ExpenseList
+              expenses={expenses.data}
+              contactId={_friendId}
+              isLoading={expenses.isPending}
+              userId={user.id}
+            />
           </div>
         )}
       </MainLayout>