feat: revamp UI with desktop rail, settings split, and settle-up flow

packages/api/src/app.ts

@@ -9,6 +9,7 @@ import { groupRoutes } from './routes/groups.js';
 import { memberRoutes } from './routes/members.js';
 import { expenseRoutes } from './routes/expenses.js';
 import { balanceRoutes } from './routes/balances.js';
+import { settleRoutes } from './routes/settle.js';
 import { authRoutes } from './routes/auth.js';
 import { userRoutes } from './routes/user.js';
 
@@ -62,6 +63,7 @@ export async function buildApp() {
   await fastify.register(memberRoutes);
   await fastify.register(expenseRoutes);
   await fastify.register(balanceRoutes);
+  await fastify.register(settleRoutes);
 
   fastify.get('/health', async () => ({ status: 'ok' }));
 

packages/api/src/routes/groups.ts

@@ -186,6 +186,28 @@ export async function groupRoutes(fastify: FastifyInstance) {
     },
   );
 
+  fastify.delete(
+    '/api/v1/groups/:id',
+    {
+      schema: {
+        params: {
+          type: 'object',
+          required: ['id'],
+          properties: { id: { type: 'string' } },
+        },
+        tags: ['groups'],
+        summary: 'Delete a group and all its data (owner only)',
+      },
+      preHandler: [requireSession, requireGroupMember, requireOwner],
+    },
+    async (request, reply) => {
+      const { id } = request.params as { id: string };
+      // CASCADE on foreign keys cleans up members, expenses, splits, activity logs
+      await db.delete(groups).where(eq(groups.id, id));
+      return reply.status(204).send();
+    },
+  );
+
   fastify.get(
     '/api/v1/groups/:id/activity',
     {

packages/api/src/routes/members.ts

@@ -217,4 +217,37 @@ export async function memberRoutes(fastify: FastifyInstance) {
       return reply.status(204).send();
     },
   );
+
+  fastify.post(
+    '/api/v1/groups/:id/leave',
+    {
+      schema: {
+        params: {
+          type: 'object',
+          required: ['id'],
+          properties: { id: { type: 'string' } },
+        },
+        tags: ['members'],
+        summary: 'Leave a group (non-owner members only)',
+      },
+      preHandler: [requireSession, requireGroupMember],
+    },
+    async (request, reply) => {
+      const { id } = request.params as { id: string };
+      const member = request.member!;
+
+      if (member.role === 'owner') {
+        return reply.status(403).send({ error: 'Group owner cannot leave. Delete the group instead.' });
+      }
+
+      await db.update(members).set({ leftAt: new Date() }).where(eq(members.id, member.id));
+
+      await db.insert(activityLog).values({
+        groupId: id,
+        message: `${member.displayName} left the group`,
+      });
+
+      return reply.status(204).send();
+    },
+  );
 }

packages/api/src/routes/settle.ts

@@ -0,0 +1,86 @@
+import { FastifyInstance } from 'fastify';
+import { randomUUID } from 'crypto';
+import { db, members, expenses, expenseSplits, groups, activityLog } from '../db/index.js';
+import { eq, and, isNull } from 'drizzle-orm';
+import { requireSession, requireGroupMember } from '../plugins/session.js';
+import { groupExpiresAt } from '../lib/time.js';
+
+export async function settleRoutes(fastify: FastifyInstance) {
+  fastify.post(
+    '/api/v1/groups/:id/settle',
+    {
+      schema: {
+        params: {
+          type: 'object',
+          required: ['id'],
+          properties: { id: { type: 'string' } },
+        },
+        body: {
+          type: 'object',
+          required: ['from', 'to', 'amountCents'],
+          properties: {
+            from: { type: 'string' },
+            to: { type: 'string' },
+            amountCents: { type: 'integer', minimum: 1 },
+          },
+        },
+        tags: ['balances'],
+        summary: 'Record a settlement payment between two members',
+      },
+      preHandler: [requireSession, requireGroupMember],
+    },
+    async (request, reply) => {
+      const { id } = request.params as { id: string };
+      const { from, to, amountCents } = request.body as {
+        from: string;
+        to: string;
+        amountCents: number;
+      };
+
+      const [group] = await db.select().from(groups).where(eq(groups.id, id));
+      if (!group) return reply.status(404).send({ error: 'Group not found' });
+      if (group.expiresAt < new Date()) {
+        return reply.status(410).send({ error: 'Group has expired' });
+      }
+
+      const memberRows = await db
+        .select({ id: members.id, displayName: members.displayName })
+        .from(members)
+        .where(and(eq(members.groupId, id), isNull(members.leftAt)));
+
+      const memberMap = new Map(memberRows.map((m) => [m.id, m.displayName]));
+      if (!memberMap.has(from) || !memberMap.has(to)) {
+        return reply.status(400).send({ error: 'Invalid member IDs' });
+      }
+
+      // Record the settlement as an exact-split expense so the ledger stays
+      // consistent: paidBy=from credits `from`, split on `to` debits `to`.
+      const amount = String(amountCents / 100);
+      const expenseId = randomUUID();
+
+      await db.insert(expenses).values({
+        id: expenseId,
+        groupId: id,
+        paidBy: from,
+        amount,
+        description: '💸 Settlement',
+        splitType: 'exact',
+      });
+
+      await db.insert(expenseSplits).values({
+        expenseId,
+        memberId: to,
+        amount,
+      });
+
+      await db.insert(activityLog).values({
+        groupId: id,
+        message: `${memberMap.get(from)} settled $${(amountCents / 100).toFixed(2)} with ${memberMap.get(to)}`,
+      });
+
+      await db.update(groups).set({ expiresAt: groupExpiresAt() }).where(eq(groups.id, id));
+
+      return reply.status(204).send();
+    },
+  );
+}

packages/web/src/App.tsx

@@ -9,6 +9,8 @@ import CreateGroupPage from './pages/CreateGroupPage.js';
 import JoinPage from './pages/JoinPage.js';
 import DashboardPage from './pages/DashboardPage.js';
 import SettingsPage from './pages/SettingsPage.js';
+import GroupSettingsPage from './pages/GroupSettingsPage.js';
+import AccountPage from './pages/AccountPage.js';
 
 export default function App() {
   return (
@@ -21,6 +23,8 @@ export default function App() {
             <Route path="/g/:inviteCode" element={<JoinPage />} />
             <Route path="/groups/:id" element={<DashboardPage />} />
             <Route path="/groups/:id/settings" element={<SettingsPage />} />
+            <Route path="/groups/:id/settings/group" element={<GroupSettingsPage />} />
+            <Route path="/groups/:id/settings/account" element={<AccountPage />} />
             <Route path="/create" element={<CreateGroupPage />} />
           </Routes>
         </BrowserRouter>