Improve vaul

package-lock.json

@@ -12,6 +12,7 @@
         "@hookform/resolvers": "^3.3.2",
         "@prisma/client": "5.6.0",
         "@radix-ui/react-checkbox": "^1.0.4",
+        "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-hover-card": "^1.0.7",
         "@radix-ui/react-icons": "^1.3.0",
@@ -24,7 +25,7 @@
         "clsx": "^2.0.0",
         "lucide-react": "^0.290.0",
         "nanoid": "^5.0.4",
-        "next": "^14.0.4",
+        "next": "14.0.1",
         "next-plausible": "^3.12.0",
         "next-themes": "^0.2.1",
         "next13-progressbar": "^1.1.1",
@@ -35,6 +36,7 @@
         "tailwind-merge": "^1.14.0",
         "tailwindcss-animate": "^1.0.7",
         "uuid": "^9.0.1",
+        "vaul": "^0.7.9",
         "zod": "^3.22.4"
       },
       "devDependencies": {
@@ -279,9 +281,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "14.0.4",
+      "version": "14.0.1",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.0.1.tgz",
-      "integrity": "sha512-irQnbMLbUNQpP1wcE5NstJtbuA/69kRfzBrpAD7Gsn8zm/CY6YQYc3HQBz8QPxwISG26tIm5afvvVbu508oBeQ=="
+      "integrity": "sha512-Ms8ZswqY65/YfcjrlcIwMPD7Rg/dVjdLapMcSHG26W6O67EJDF435ShW4H4LXi1xKO1oRc97tLXUpx8jpLe86A=="
     },
     "node_modules/@next/eslint-plugin-next": {
       "version": "14.0.4",
@@ -313,9 +315,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.0.4",
+      "version": "14.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.1.tgz",
-      "integrity": "sha512-mF05E/5uPthWzyYDyptcwHptucf/jj09i2SXBPwNzbgBNc+XnwzrL0U6BmPjQeOL+FiB+iG1gwBeq7mlDjSRPg==",
+      "integrity": "sha512-JyxnGCS4qT67hdOKQ0CkgFTp+PXub5W1wsGvIq98TNbF3YEIN7iDekYhYsZzc8Ov0pWEsghQt+tANdidITCLaw==",
       "cpu": [
         "arm64"
       ],
@@ -328,9 +330,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.0.4",
+      "version": "14.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.1.tgz",
-      "integrity": "sha512-IZQ3C7Bx0k2rYtrZZxKKiusMTM9WWcK5ajyhOZkYYTCc8xytmwSzR1skU7qLgVT/EY9xtXDG0WhY6fyujnI3rw==",
+      "integrity": "sha512-625Z7bb5AyIzswF9hvfZWa+HTwFZw+Jn3lOBNZB87lUS0iuCYDHqk3ujuHCkiyPtSC0xFBtYDLcrZ11mF/ap3w==",
       "cpu": [
         "x64"
       ],
@@ -343,9 +345,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.0.4",
+      "version": "14.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.1.tgz",
-      "integrity": "sha512-VwwZKrBQo/MGb1VOrxJ6LrKvbpo7UbROuyMRvQKTFKhNaXjUmKTu7wxVkIuCARAfiI8JpaWAnKR+D6tzpCcM4w==",
+      "integrity": "sha512-iVpn3KG3DprFXzVHM09kvb//4CNNXBQ9NB/pTm8LO+vnnnaObnzFdS5KM+w1okwa32xH0g8EvZIhoB3fI3mS1g==",
       "cpu": [
         "arm64"
       ],
@@ -358,9 +360,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.0.4",
+      "version": "14.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.1.tgz",
-      "integrity": "sha512-8QftwPEW37XxXoAwsn+nXlodKWHfpMaSvt81W43Wh8dv0gkheD+30ezWMcFGHLI71KiWmHK5PSQbTQGUiidvLQ==",
+      "integrity": "sha512-mVsGyMxTLWZXyD5sen6kGOTYVOO67lZjLApIj/JsTEEohDDt1im2nkspzfV5MvhfS7diDw6Rp/xvAQaWZTv1Ww==",
       "cpu": [
         "arm64"
       ],
@@ -373,9 +375,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.0.4",
+      "version": "14.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.1.tgz",
-      "integrity": "sha512-/s/Pme3VKfZAfISlYVq2hzFS8AcAIOTnoKupc/j4WlvF6GQ0VouS2Q2KEgPuO1eMBwakWPB1aYFIA4VNVh667A==",
+      "integrity": "sha512-wMqf90uDWN001NqCM/auRl3+qVVeKfjJdT9XW+RMIOf+rhUzadmYJu++tp2y+hUbb6GTRhT+VjQzcgg/QTD9NQ==",
       "cpu": [
         "x64"
       ],
@@ -388,9 +390,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.0.4",
+      "version": "14.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.1.tgz",
-      "integrity": "sha512-m8z/6Fyal4L9Bnlxde5g2Mfa1Z7dasMQyhEhskDATpqr+Y0mjOBZcXQ7G5U+vgL22cI4T7MfvgtrM2jdopqWaw==",
+      "integrity": "sha512-ol1X1e24w4j4QwdeNjfX0f+Nza25n+ymY0T2frTyalVczUmzkVD7QGgPTZMHfR1aLrO69hBs0G3QBYaj22J5GQ==",
       "cpu": [
         "x64"
       ],
@@ -403,9 +405,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.0.4",
+      "version": "14.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.1.tgz",
-      "integrity": "sha512-7Wv4PRiWIAWbm5XrGz3D8HUkCVDMMz9igffZG4NB1p4u1KoItwx9qjATHz88kwCEal/HXmbShucaslXCQXUM5w==",
+      "integrity": "sha512-WEmTEeWs6yRUEnUlahTgvZteh5RJc4sEjCQIodJlZZ5/VJwVP8p2L7l6VhzQhT4h7KvLx/Ed4UViBdne6zpIsw==",
       "cpu": [
         "arm64"
       ],
@@ -418,9 +420,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.0.4",
+      "version": "14.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.1.tgz",
-      "integrity": "sha512-zLeNEAPULsl0phfGb4kdzF/cAVIfaC7hY+kt0/d+y9mzcZHsMS3hAS829WbJ31DkSlVKQeHEjZHIdhN+Pg7Gyg==",
+      "integrity": "sha512-oFpHphN4ygAgZUKjzga7SoH2VGbEJXZa/KL8bHCAwCjDWle6R1SpiGOdUdA8EJ9YsG1TYWpzY6FTbUA+iAJeww==",
       "cpu": [
         "ia32"
       ],
@@ -433,9 +435,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.0.4",
+      "version": "14.0.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.1.tgz",
-      "integrity": "sha512-yEh2+R8qDlDCjxVpzOTEpBLQTEFAcP2A8fUFLaWNap9GitYKkKv1//y2S6XY6zsR4rCOPRpU7plYDR+az2n30A==",
+      "integrity": "sha512-FFp3nOJ/5qSpeWT0BZQ+YE1pSMk4IMpkME/1DwKBwhg4mJLB9L+6EXuJi4JEwaJdl5iN+UUlmUD3IsR1kx5fAg==",
       "cpu": [
         "x64"
       ],
@@ -688,6 +690,42 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
+      "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
@@ -4198,15 +4236,14 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "14.0.4",
+      "version": "14.0.1",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.0.1.tgz",
-      "integrity": "sha512-qbwypnM7327SadwFtxXnQdGiKpkuhaRLE2uq62/nRul9cj9KhQ5LhHmlziTNqUidZotw/Q1I9OjirBROdUJNgA==",
+      "integrity": "sha512-s4YaLpE4b0gmb3ggtmpmV+wt+lPRuGtANzojMQ2+gmBpgX9w5fTbjsy6dXByBuENsdCX5pukZH/GxdFgO62+pA==",
       "dependencies": {
-        "@next/env": "14.0.4",
+        "@next/env": "14.0.1",
         "@swc/helpers": "0.5.2",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001406",
-        "graceful-fs": "^4.2.11",
         "postcss": "8.4.31",
         "styled-jsx": "5.1.1",
         "watchpack": "2.4.0"
@@ -4218,15 +4255,15 @@
         "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.0.4",
+        "@next/swc-darwin-arm64": "14.0.1",
-        "@next/swc-darwin-x64": "14.0.4",
+        "@next/swc-darwin-x64": "14.0.1",
-        "@next/swc-linux-arm64-gnu": "14.0.4",
+        "@next/swc-linux-arm64-gnu": "14.0.1",
-        "@next/swc-linux-arm64-musl": "14.0.4",
+        "@next/swc-linux-arm64-musl": "14.0.1",
-        "@next/swc-linux-x64-gnu": "14.0.4",
+        "@next/swc-linux-x64-gnu": "14.0.1",
-        "@next/swc-linux-x64-musl": "14.0.4",
+        "@next/swc-linux-x64-musl": "14.0.1",
-        "@next/swc-win32-arm64-msvc": "14.0.4",
+        "@next/swc-win32-arm64-msvc": "14.0.1",
-        "@next/swc-win32-ia32-msvc": "14.0.4",
+        "@next/swc-win32-ia32-msvc": "14.0.1",
-        "@next/swc-win32-x64-msvc": "14.0.4"
+        "@next/swc-win32-x64-msvc": "14.0.1"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
@@ -6000,6 +6037,18 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/vaul": {
+      "version": "0.7.9",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-0.7.9.tgz",
+      "integrity": "sha512-RrcnGOHOq/cEU3YpyyZrnjh0H79xMpF3IrHZs9ichvHlpKjLDc4Vwjn4VkuGzeUGrmQ3wamfm/cpdKWpvBIgQw==",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.0.4"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "@hookform/resolvers": "^3.3.2",
     "@prisma/client": "5.6.0",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-icons": "^1.3.0",
@@ -25,7 +26,7 @@
     "clsx": "^2.0.0",
     "lucide-react": "^0.290.0",
     "nanoid": "^5.0.4",
-    "next": "^14.0.4",
+    "next": "14.0.1",
     "next-plausible": "^3.12.0",
     "next-themes": "^0.2.1",
     "next13-progressbar": "^1.1.1",
@@ -36,6 +37,7 @@
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",
     "uuid": "^9.0.1",
+    "vaul": "^0.7.9",
     "zod": "^3.22.4"
   },
   "devDependencies": {

src/app/groups/[groupId]/@modal/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}

src/app/groups/[groupId]/@modal/expense-modal.tsx

@@ -0,0 +1,83 @@
+'use client'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { useRouter } from 'next/navigation'
+import { ReactNode, useEffect, useState } from 'react'
+import { Drawer } from 'vaul'
+
+type Props = {
+  children: ReactNode
+  title: ReactNode
+}
+
+export function ExpenseModal(props: Props) {
+  const size = useTailwindBreakpoint()
+  if (size === 'xs') {
+    return <ExpenseVaul {...props} />
+  } else {
+    return <ExpenseDialog {...props} />
+  }
+}
+
+export function ExpenseDialog({ children, title }: Props) {
+  const router = useRouter()
+
+  return (
+    <Dialog open onOpenChange={() => router.back()}>
+      <DialogContent className="w-full max-w-screen-sm">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        {children}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export function ExpenseVaul({ children, title }: Props) {
+  const router = useRouter()
+  return (
+    <Drawer.Root open onClose={() => router.back()}>
+      <Drawer.Portal>
+        <Drawer.Title>{title}</Drawer.Title>
+        <Drawer.Overlay className="fixed inset-0 bg-background/80 backdrop-blur-sm" />
+        <Drawer.Content className="bg-background border flex flex-col rounded-t-[10px] max-h-[90dvh] mt-24 fixed bottom-0 left-0 right-0 z-50">
+          <div className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-gray-300 dark:bg-gray-700 mt-4"></div>
+          <div className="text-xl font-bold p-4">{title}</div>
+          <div className="flex-1 overflow-y-auto p-4 pt-0">{children}</div>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  )
+}
+
+export function useTailwindBreakpoint() {
+  const [size, setSize] = useState<'xs' | 'sm' | 'md' | 'lg'>('xs')
+
+  useEffect(() => {
+    const handleBreakpointChange = () => {
+      if (window.innerWidth >= 1200) {
+        setSize('lg')
+      } else if (window.innerWidth >= 768) {
+        setSize('md')
+      } else if (window.innerWidth >= 640) {
+        setSize('sm')
+      } else {
+        setSize('xs')
+      }
+    }
+
+    window.addEventListener('resize', handleBreakpointChange)
+    handleBreakpointChange()
+
+    return () => {
+      window.removeEventListener('resize', handleBreakpointChange)
+    }
+  }, [])
+
+  return size
+}

src/app/groups/[groupId]/@modal/expenses/[expenseId]/edit/page.tsx

@@ -0,0 +1,26 @@
+import { ExpenseModal } from '@/app/groups/[groupId]/@modal/expense-modal'
+import { ExpenseForm } from '@/components/expense-form'
+import { getExpense, getGroup } from '@/lib/api'
+import { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+export const metadata: Metadata = {
+  title: 'Edit expense',
+}
+
+export default async function EditExpensePage({
+  params: { groupId, expenseId },
+}: {
+  params: { groupId: string; expenseId: string }
+}) {
+  const group = await getGroup(groupId)
+  if (!group) notFound()
+  const expense = await getExpense(groupId, expenseId)
+  if (!expense) notFound()
+
+  return (
+    <ExpenseModal title="Edit expense">
+      <ExpenseForm group={group} expense={expense} />
+    </ExpenseModal>
+  )
+}

src/app/groups/[groupId]/@modal/expenses/create/page.tsx

@@ -0,0 +1,24 @@
+import { ExpenseModal } from '@/app/groups/[groupId]/@modal/expense-modal'
+import { ExpenseForm } from '@/components/expense-form'
+import { getGroup } from '@/lib/api'
+import { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+export const metadata: Metadata = {
+  title: 'Create expense',
+}
+
+export default async function ExpensePage({
+  params: { groupId },
+}: {
+  params: { groupId: string }
+}) {
+  const group = await getGroup(groupId)
+  if (!group) notFound()
+
+  return (
+    <ExpenseModal title="Create expense">
+      <ExpenseForm group={group} />
+    </ExpenseModal>
+  )
+}

src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx

@@ -1,42 +0,0 @@
-import { ExpenseForm } from '@/components/expense-form'
-import { deleteExpense, getExpense, getGroup, updateExpense } from '@/lib/api'
-import { expenseFormSchema } from '@/lib/schemas'
-import { Metadata } from 'next'
-import { notFound, redirect } from 'next/navigation'
-
-export const metadata: Metadata = {
-  title: 'Edit expense',
-}
-
-export default async function EditExpensePage({
-  params: { groupId, expenseId },
-}: {
-  params: { groupId: string; expenseId: string }
-}) {
-  const group = await getGroup(groupId)
-  if (!group) notFound()
-  const expense = await getExpense(groupId, expenseId)
-  if (!expense) notFound()
-
-  async function updateExpenseAction(values: unknown) {
-    'use server'
-    const expenseFormValues = expenseFormSchema.parse(values)
-    await updateExpense(groupId, expenseId, expenseFormValues)
-    redirect(`/groups/${groupId}`)
-  }
-
-  async function deleteExpenseAction() {
-    'use server'
-    await deleteExpense(expenseId)
-    redirect(`/groups/${groupId}`)
-  }
-
-  return (
-    <ExpenseForm
-      group={group}
-      expense={expense}
-      onSubmit={updateExpenseAction}
-      onDelete={deleteExpenseAction}
-    />
-  )
-}

src/app/groups/[groupId]/expenses/actions.ts

@@ -0,0 +1,28 @@
+'use server'
+import { createExpense, deleteExpense, updateExpense } from '@/lib/api'
+import { expenseFormSchema } from '@/lib/schemas'
+import { revalidatePath } from 'next/cache'
+
+export async function createExpenseAction(groupId: string, values: unknown) {
+  'use server'
+  const expenseFormValues = expenseFormSchema.parse(values)
+  await createExpense(expenseFormValues, groupId)
+  revalidatePath(`/groups/${groupId}`, 'layout')
+}
+
+export async function updateExpenseAction(
+  groupId: string,
+  expenseId: string,
+  values: unknown,
+) {
+  'use server'
+  const expenseFormValues = expenseFormSchema.parse(values)
+  await updateExpense(groupId, expenseId, expenseFormValues)
+  revalidatePath(`/groups/${groupId}`, 'layout')
+}
+
+export async function deleteExpenseAction(groupId: string, expenseId: string) {
+  'use server'
+  await deleteExpense(expenseId)
+  revalidatePath(`/groups/${groupId}`, 'layout')
+}

src/app/groups/[groupId]/expenses/create/page.tsx

@@ -1,27 +0,0 @@
-import { ExpenseForm } from '@/components/expense-form'
-import { createExpense, getGroup } from '@/lib/api'
-import { expenseFormSchema } from '@/lib/schemas'
-import { Metadata } from 'next'
-import { notFound, redirect } from 'next/navigation'
-
-export const metadata: Metadata = {
-  title: 'Create expense',
-}
-
-export default async function ExpensePage({
-  params: { groupId },
-}: {
-  params: { groupId: string }
-}) {
-  const group = await getGroup(groupId)
-  if (!group) notFound()
-
-  async function createExpenseAction(values: unknown) {
-    'use server'
-    const expenseFormValues = expenseFormSchema.parse(values)
-    await createExpense(expenseFormValues, groupId)
-    redirect(`/groups/${groupId}`)
-  }
-
-  return <ExpenseForm group={group} onSubmit={createExpenseAction} />
-}

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

@@ -33,7 +33,9 @@ export function ExpenseList({
           expense.isReimbursement && 'italic',
         )}
         onClick={() => {
-          router.push(`/groups/${groupId}/expenses/${expense.id}/edit`)
+          router.push(`/groups/${groupId}/expenses/${expense.id}/edit`, {
+            scroll: false,
+          })
         }}
       >
         <div>
@@ -66,7 +68,10 @@ export function ExpenseList({
             {currency} {(expense.amount / 100).toFixed(2)}
           </div>
           <Button size="icon" variant="link" className="-my-2" asChild>
-            <Link href={`/groups/${groupId}/expenses/${expense.id}/edit`}>
+            <Link
+              href={`/groups/${groupId}/expenses/${expense.id}/edit`}
+              scroll={false}
+            >
               <ChevronRight className="w-4 h-4" />
             </Link>
           </Button>

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

@@ -0,0 +1,19 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { ReactNode } from 'react'
+
+export function ExpensePage({
+  children,
+  title,
+}: {
+  children: ReactNode
+  title: ReactNode
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+    </Card>
+  )
+}

src/app/groups/[groupId]/expenses/layout.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react'
+
+export default function GroupExpensesLayout({
+  children,
+}: {
+  children: ReactNode
+}) {
+  return <>{children}</>
+}

src/app/groups/[groupId]/expenses/page.tsx

@@ -35,7 +35,7 @@ export default async function GroupExpensesPage({
         </CardHeader>
         <CardHeader>
           <Button asChild size="icon">
-            <Link href={`/groups/${groupId}/expenses/create`}>
+            <Link href={`/groups/${groupId}/expenses/create`} scroll={false}>
               <Plus />
             </Link>
           </Button>

src/app/groups/[groupId]/layout.tsx

@@ -5,12 +5,13 @@ import { getGroup } from '@/lib/api'
 import { Metadata } from 'next'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren, ReactNode } from 'react'
 
 type Props = {
   params: {
     groupId: string
   }
+  modal: ReactNode
 }
 
 export async function generateMetadata({
@@ -28,6 +29,7 @@ export async function generateMetadata({
 
 export default async function GroupLayout({
   children,
+  modal,
   params: { groupId },
 }: PropsWithChildren<Props>) {
   const group = await getGroup(groupId)
@@ -47,6 +49,7 @@ export default async function GroupLayout({
       </div>
 
       {children}
+      {modal}
 
       <SaveGroupLocally group={{ id: group.id, name: group.name }} />
     </>

src/app/groups/[groupId]/not-found.tsx

@@ -0,0 +1,5 @@
+'use client'
+
+export default function NotFound() {
+  return null
+}

src/app/groups/[groupId]/reimbursement-list.tsx

@@ -37,6 +37,7 @@ export function ReimbursementList({
             <Button variant="link" asChild className="-mx-4 -my-3">
               <Link
                 href={`/groups/${groupId}/expenses/create?reimbursement=yes&from=${reimbursement.from}&to=${reimbursement.to}&amount=${reimbursement.amount}`}
+                scroll={false}
               >
                 Mark as paid
               </Link>

src/components/expense-form.tsx

@@ -1,14 +1,12 @@
 'use client'
+import {
+  createExpenseAction,
+  deleteExpenseAction,
+  updateExpenseAction,
+} from '@/app/groups/[groupId]/expenses/actions'
 import { AsyncButton } from '@/components/async-button'
 import { SubmitButton } from '@/components/submit-button'
 import { Button } from '@/components/ui/button'
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
 import { Checkbox } from '@/components/ui/checkbox'
 import {
   Form,
@@ -30,17 +28,15 @@ import {
 import { getExpense, getGroup } from '@/lib/api'
 import { ExpenseFormValues, expenseFormSchema } from '@/lib/schemas'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useSearchParams } from 'next/navigation'
+import { useRouter, useSearchParams } from 'next/navigation'
 import { useForm } from 'react-hook-form'
 
 export type Props = {
   group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
   expense?: NonNullable<Awaited<ReturnType<typeof getExpense>>>
-  onSubmit: (values: ExpenseFormValues) => Promise<void>
-  onDelete?: () => Promise<void>
 }
 
-export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
+export function ExpenseForm({ group, expense }: Props) {
   const isCreate = expense === undefined
   const searchParams = useSearchParams()
   const form = useForm<ExpenseFormValues>({
@@ -65,204 +61,210 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
         }
       : { title: '', amount: 0, paidFor: [], isReimbursement: false },
   })
+  const router = useRouter()
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit((values) => onSubmit(values))}>
+      <form
-        <Card>
+        onSubmit={form.handleSubmit(async (values) => {
-          <CardHeader>
+          if (expense) {
-            <CardTitle>
+            await updateExpenseAction(group.id, expense.id, values)
-              {isCreate ? <>Create expense</> : <>Edit expense</>}
+          } else {
-            </CardTitle>
+            await createExpenseAction(group.id, values)
-          </CardHeader>
+          }
-          <CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+          router.back()
-            <FormField
+        })}
-              control={form.control}
+      >
-              name="title"
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
-              render={({ field }) => (
+          <FormField
-                <FormItem className="order-1">
+            control={form.control}
-                  <FormLabel>Expense title</FormLabel>
+            name="title"
+            render={({ field }) => (
+              <FormItem className="order-1">
+                <FormLabel>Expense title</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="Monday evening restaurant"
+                    className="text-base"
+                    {...field}
+                  />
+                </FormControl>
+                <FormDescription>
+                  Enter a description for the expense.
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="paidBy"
+            render={({ field }) => (
+              <FormItem className="order-3 sm:order-2">
+                <FormLabel>Paid by</FormLabel>
+                <Select
+                  onValueChange={field.onChange}
+                  defaultValue={field.value}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a participant" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {group.participants.map(({ id, name }) => (
+                      <SelectItem key={id} value={id}>
+                        {name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormDescription>
+                  Select the participant who paid the expense.
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="amount"
+            render={({ field }) => (
+              <FormItem className="order-2 sm:order-3">
+                <FormLabel>Amount</FormLabel>
+                <div className="flex items-baseline gap-2">
+                  <span>{group.currency}</span>
                   <FormControl>
                     <Input
-                      placeholder="Monday evening restaurant"
+                      className="text-base max-w-[120px]"
-                      className="text-base"
+                      type="number"
+                      inputMode="decimal"
+                      step={0.01}
+                      placeholder="0.00"
                       {...field}
                     />
                   </FormControl>
-                  <FormDescription>
+                </div>
-                    Enter a description for the expense.
+                <FormMessage />
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
 
-            <FormField
+                <FormField
-              control={form.control}
+                  control={form.control}
-              name="paidBy"
+                  name="isReimbursement"
-              render={({ field }) => (
+                  render={({ field }) => (
-                <FormItem className="order-3 sm:order-2">
+                    <FormItem className="flex flex-row gap-2 items-center space-y-0 pt-2">
-                  <FormLabel>Paid by</FormLabel>
+                      <FormControl>
-                  <Select
+                        <Checkbox
-                    onValueChange={field.onChange}
+                          checked={field.value}
-                    defaultValue={field.value}
+                          onCheckedChange={field.onChange}
-                  >
+                        />
-                    <SelectTrigger>
+                      </FormControl>
-                      <SelectValue placeholder="Select a participant" />
+                      <div>
-                    </SelectTrigger>
+                        <FormLabel>This is a reimbursement</FormLabel>
-                    <SelectContent>
+                      </div>
-                      {group.participants.map(({ id, name }) => (
+                    </FormItem>
-                        <SelectItem key={id} value={id}>
+                  )}
-                          {name}
+                />
-                        </SelectItem>
+              </FormItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <FormDescription>
-                    Select the participant who paid the expense.
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="amount"
-              render={({ field }) => (
-                <FormItem className="order-2 sm:order-3">
-                  <FormLabel>Amount</FormLabel>
-                  <div className="flex items-baseline gap-2">
-                    <span>{group.currency}</span>
-                    <FormControl>
-                      <Input
-                        className="text-base max-w-[120px]"
-                        type="number"
-                        inputMode="decimal"
-                        step={0.01}
-                        placeholder="0.00"
-                        {...field}
-                      />
-                    </FormControl>
-                  </div>
-                  <FormMessage />
-
-                  <FormField
-                    control={form.control}
-                    name="isReimbursement"
-                    render={({ field }) => (
-                      <FormItem className="flex flex-row gap-2 items-center space-y-0 pt-2">
-                        <FormControl>
-                          <Checkbox
-                            checked={field.value}
-                            onCheckedChange={field.onChange}
-                          />
-                        </FormControl>
-                        <div>
-                          <FormLabel>This is a reimbursement</FormLabel>
-                        </div>
-                      </FormItem>
-                    )}
-                  />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="paidFor"
-              render={() => (
-                <FormItem className="order-5">
-                  <div className="mb-4">
-                    <FormLabel>
-                      Paid for
-                      <Button
-                        variant="link"
-                        type="button"
-                        className="-m-2"
-                        onClick={() => {
-                          const paidFor = form.getValues().paidFor
-                          const allSelected =
-                            paidFor.length === group.participants.length
-                          const newPairFor = allSelected
-                            ? []
-                            : group.participants.map((p) => p.id)
-                          form.setValue('paidFor', newPairFor, {
-                            shouldDirty: true,
-                            shouldTouch: true,
-                            shouldValidate: true,
-                          })
-                        }}
-                      >
-                        {form.getValues().paidFor.length ===
-                        group.participants.length ? (
-                          <>Select none</>
-                        ) : (
-                          <>Select all</>
-                        )}
-                      </Button>
-                    </FormLabel>
-                    <FormDescription>
-                      Select who the expense was paid for.
-                    </FormDescription>
-                  </div>
-                  {group.participants.map(({ id, name }) => (
-                    <FormField
-                      key={id}
-                      control={form.control}
-                      name="paidFor"
-                      render={({ field }) => {
-                        return (
-                          <FormItem
-                            key={id}
-                            className="flex flex-row items-start space-x-3 space-y-0"
-                          >
-                            <FormControl>
-                              <Checkbox
-                                checked={field.value?.includes(id)}
-                                onCheckedChange={(checked) => {
-                                  return checked
-                                    ? field.onChange([...field.value, id])
-                                    : field.onChange(
-                                        field.value?.filter(
-                                          (value) => value !== id,
-                                        ),
-                                      )
-                                }}
-                              />
-                            </FormControl>
-                            <FormLabel className="text-sm font-normal">
-                              {name}
-                            </FormLabel>
-                          </FormItem>
-                        )
-                      }}
-                    />
-                  ))}
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-          </CardContent>
-
-          <CardFooter className="gap-2">
-            <SubmitButton
-              loadingContent={isCreate ? <>Creating…</> : <>Saving…</>}
-            >
-              {isCreate ? <>Create</> : <>Save</>}
-            </SubmitButton>
-            {!isCreate && onDelete && (
-              <AsyncButton
-                type="button"
-                variant="destructive"
-                loadingContent="Deleting…"
-                action={onDelete}
-              >
-                Delete
-              </AsyncButton>
             )}
-          </CardFooter>
+          />
-        </Card>
+
+          <FormField
+            control={form.control}
+            name="paidFor"
+            render={() => (
+              <FormItem className="order-5">
+                <div className="mb-4">
+                  <FormLabel>
+                    Paid for
+                    <Button
+                      variant="link"
+                      type="button"
+                      className="-m-2"
+                      onClick={() => {
+                        const paidFor = form.getValues().paidFor
+                        const allSelected =
+                          paidFor.length === group.participants.length
+                        const newPairFor = allSelected
+                          ? []
+                          : group.participants.map((p) => p.id)
+                        form.setValue('paidFor', newPairFor, {
+                          shouldDirty: true,
+                          shouldTouch: true,
+                          shouldValidate: true,
+                        })
+                      }}
+                    >
+                      {form.getValues().paidFor.length ===
+                      group.participants.length ? (
+                        <>Select none</>
+                      ) : (
+                        <>Select all</>
+                      )}
+                    </Button>
+                  </FormLabel>
+                  <FormDescription>
+                    Select who the expense was paid for.
+                  </FormDescription>
+                </div>
+                {group.participants.map(({ id, name }) => (
+                  <FormField
+                    key={id}
+                    control={form.control}
+                    name="paidFor"
+                    render={({ field }) => {
+                      return (
+                        <FormItem
+                          key={id}
+                          className="flex flex-row items-start space-x-3 space-y-0"
+                        >
+                          <FormControl>
+                            <Checkbox
+                              checked={field.value?.includes(id)}
+                              onCheckedChange={(checked) => {
+                                return checked
+                                  ? field.onChange([...field.value, id])
+                                  : field.onChange(
+                                      field.value?.filter(
+                                        (value) => value !== id,
+                                      ),
+                                    )
+                              }}
+                            />
+                          </FormControl>
+                          <FormLabel className="text-sm font-normal">
+                            {name}
+                          </FormLabel>
+                        </FormItem>
+                      )
+                    }}
+                  />
+                ))}
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+
+        <div className="mt-6 flex gap-2">
+          <SubmitButton
+            loadingContent={isCreate ? <>Creating…</> : <>Saving…</>}
+          >
+            {isCreate ? <>Create</> : <>Save</>}
+          </SubmitButton>
+          {!isCreate && (
+            <AsyncButton
+              type="button"
+              variant="destructive"
+              loadingContent="Deleting…"
+              action={async () => {
+                await deleteExpenseAction(group.id, expense.id)
+                router.back()
+              }}
+            >
+              Delete
+            </AsyncButton>
+          )}
+        </div>
       </form>
     </Form>
   )

src/components/ui/dialog.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}