feat: Store default splitting options on the server

This commit refactors the "default splitting options" feature to be stored on the server-side instead of in the client's localStorage. This provides a more consistent user experience, as the setting will now persist across different devices and browsers for all members of a group.

The following changes were made:
- The Group model in prisma.schema.prisma has been updated with a new defaultSplittingOptions JSON field.
- A database migration has been added to apply this schema change.
- The ExpenseForm component in expense-form.tsx has been updated to:
  - Fetch the default splitting options from the group object, which is populated from the database.
  - Use a new tRPC mutation, updateDefaultSplittingOptions, to persist the user's chosen default options back to the server.
  - All logic related to localStorage for this feature has been removed.

Fixes #327

Author: Uli-Z

prisma/migrations/20250619_add_default_split_options/migration.sql

@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "Group" ADD COLUMN IF NOT EXISTS "defaultSplittingOptions" JSONB;
+

prisma/schema.prisma

@@ -17,6 +17,7 @@ model Group {
   information  String?       @db.Text
   currency     String        @default("$")
   currencyCode String?
+  defaultSplittingOptions Json?
   participants Participant[]
   expenses     Expense[]
   activities   Activity[]

src/app/groups/[groupId]/expenses/expense-form.tsx

@@ -51,6 +51,7 @@ import {
   formatCurrency,
   getCurrencyFromGroup,
 } from '@/lib/utils'
+import { trpc } from '@/trpc/client'
 import { AppRouterOutput } from '@/trpc/routers/_app'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { RecurrenceRule } from '@prisma/client'
@@ -85,69 +86,31 @@ const getDefaultSplittingOptions = (
     })),
   }
 
-  if (typeof localStorage === 'undefined') return defaultValue
-  const defaultSplitMode = localStorage.getItem(
-    `${group.id}-defaultSplittingOptions`,
-  )
-  if (defaultSplitMode === null) return defaultValue
-  const parsedDefaultSplitMode = JSON.parse(
-    defaultSplitMode,
-  ) as SplittingOptions
+  const dbOptions = group.defaultSplittingOptions as SplittingOptions | null
+  if (!dbOptions) {
+    return defaultValue
+  }
 
-  if (parsedDefaultSplitMode.paidFor === null) {
-    parsedDefaultSplitMode.paidFor = defaultValue.paidFor
+  if (dbOptions.paidFor === null) {
+    dbOptions.paidFor = defaultValue.paidFor
   }
 
-  // if there is a participant in the default options that does not exist anymore,
-  // remove the stale default splitting options
-  for (const parsedPaidFor of parsedDefaultSplitMode.paidFor) {
-    if (
-      !group.participants.some(({ id }) => id === parsedPaidFor.participant)
-    ) {
-      localStorage.removeItem(`${group.id}-defaultSplittingOptions`)
+  for (const paidFor of dbOptions.paidFor) {
+    if (!group.participants.some(({ id }) => id === paidFor.participant)) {
       return defaultValue
     }
   }
 
   return {
-    splitMode: parsedDefaultSplitMode.splitMode,
-    paidFor: parsedDefaultSplitMode.paidFor.map((paidFor) => ({
-      participant: paidFor.participant,
-      shares: (paidFor.shares / 100).toString() as any, // Convert to string for consistent schema handling
+    splitMode: dbOptions.splitMode,
+    paidFor: dbOptions.paidFor.map((p) => ({
+      participant: p.participant,
+      shares: String(p.shares / 100) as unknown as number,
     })),
   }
 }
 
-async function persistDefaultSplittingOptions(
-  groupId: string,
-  expenseFormValues: ExpenseFormValues,
-) {
-  if (localStorage && expenseFormValues.saveDefaultSplittingOptions) {
-    const computePaidFor = (): SplittingOptions['paidFor'] => {
-      if (expenseFormValues.splitMode === 'EVENLY') {
-        return expenseFormValues.paidFor.map(({ participant }) => ({
-          participant,
-          shares: 100,
-        }))
-      } else if (expenseFormValues.splitMode === 'BY_AMOUNT') {
-        return null
-      } else {
-        return expenseFormValues.paidFor
-      }
-    }
-
-    const splittingOptions = {
-      splitMode: expenseFormValues.splitMode,
-      paidFor: computePaidFor(),
-    } satisfies SplittingOptions
-
-    localStorage.setItem(
-      `${groupId}-defaultSplittingOptions`,
-      JSON.stringify(splittingOptions),
-    )
-  }
-}
-
+// removed localStorage persistence in favor of server-side persistence
 export function ExpenseForm({
   group,
   categories,
@@ -270,10 +233,35 @@ export function ExpenseForm({
   })
   const [isCategoryLoading, setCategoryLoading] = useState(false)
   const activeUserId = useActiveUser(group.id)
+  const { mutateAsync: updateDefaultSplittingOptions } =
+    trpc.groups.updateDefaultSplittingOptions.useMutation()
+  const utils = trpc.useUtils()
 
   const submit = async (values: ExpenseFormValues) => {
-    await persistDefaultSplittingOptions(group.id, values)
+    if (values.saveDefaultSplittingOptions) {
+      const computePaidFor = (): SplittingOptions['paidFor'] => {
+        if (values.splitMode === 'EVENLY') {
+          return values.paidFor.map(({ participant }) => ({
+            participant,
+            shares: '100' as unknown as number,
+          }))
+        } else if (values.splitMode === 'BY_AMOUNT') {
+          return null
+        }
+        return values.paidFor
+      }
+
+      const splittingOptions = {
+        splitMode: values.splitMode,
+        paidFor: computePaidFor(),
+      } satisfies SplittingOptions
 
+      await updateDefaultSplittingOptions({
+        groupId: group.id,
+        defaultSplittingOptions: splittingOptions,
+      })
+      await utils.groups.invalidate()
+    }
     // Store monetary amounts in minor units (cents)
     values.amount = amountAsMinorUnits(values.amount, groupCurrency)
     values.paidFor = values.paidFor.map(({ participant, shares }) => ({

src/trpc/routers/groups/index.ts

@@ -8,6 +8,7 @@ import { groupStatsRouter } from '@/trpc/routers/groups/stats'
 import { updateGroupProcedure } from '@/trpc/routers/groups/update.procedure'
 import { getGroupDetailsProcedure } from './getDetails.procedure'
 import { listGroupsProcedure } from './list.procedure'
+import { updateDefaultSplittingOptionsProcedure } from './updateDefaultSplittingOptions.procedure'
 
 export const groupsRouter = createTRPCRouter({
   expenses: groupExpensesRouter,
@@ -20,4 +21,5 @@ export const groupsRouter = createTRPCRouter({
   list: listGroupsProcedure,
   create: createGroupProcedure,
   update: updateGroupProcedure,
+  updateDefaultSplittingOptions: updateDefaultSplittingOptionsProcedure,
 })

src/trpc/routers/groups/updateDefaultSplittingOptions.procedure.ts

@@ -0,0 +1,30 @@
+import { prisma } from '@/lib/prisma'
+import { baseProcedure } from '@/trpc/init'
+import { SplitMode } from '@prisma/client'
+import { z } from 'zod'
+
+export const updateDefaultSplittingOptionsProcedure = baseProcedure
+  .input(
+    z.object({
+      groupId: z.string().min(1),
+      defaultSplittingOptions: z.object({
+        splitMode: z.enum(
+          Object.values(SplitMode) as [SplitMode, ...SplitMode[]],
+        ),
+        paidFor: z
+          .array(
+            z.object({
+              participant: z.string(),
+              shares: z.number(),
+            }),
+          )
+          .nullable(),
+      }),
+    }),
+  )
+  .mutation(async ({ input: { groupId, defaultSplittingOptions } }) => {
+    await prisma.group.update({
+      where: { id: groupId },
+      data: { defaultSplittingOptions },
+    })
+  })