From 633593037ced6cc951864f592fa51fda62c5ab28 Mon Sep 17 00:00:00 2001
From: Chris Johnston <christopher_johnston@me.com>
Date: Fri, 31 May 2024 19:02:32 +0100
Subject: [PATCH 1/8] add expense comments feature

---
 .../migration.sql                             | 16 ++++
 prisma/schema.prisma                          | 12 +++
 .../[expenseId]/edit/comment-form.tsx         | 81 +++++++++++++++++++
 .../[expenseId]/edit/comment-item.tsx         | 30 +++++++
 .../[expenseId]/edit/comments-list.tsx        | 59 ++++++++++++++
 .../expenses/[expenseId]/edit/page.tsx        |  4 +
 src/lib/api.ts                                | 50 +++++++++++-
 src/lib/schemas.ts                            |  6 ++
 8 files changed, 257 insertions(+), 1 deletion(-)
 create mode 100644 prisma/migrations/20240531162642_add_expense_comments/migration.sql
 create mode 100644 src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-form.tsx
 create mode 100644 src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-item.tsx
 create mode 100644 src/app/groups/[groupId]/expenses/[expenseId]/edit/comments-list.tsx

diff --git a/prisma/migrations/20240531162642_add_expense_comments/migration.sql b/prisma/migrations/20240531162642_add_expense_comments/migration.sql
new file mode 100644
index 00000000..0db8cfa1
--- /dev/null
+++ b/prisma/migrations/20240531162642_add_expense_comments/migration.sql
@@ -0,0 +1,16 @@
+-- CreateTable
+CREATE TABLE "ExpenseComment" (
+    "id" TEXT NOT NULL,
+    "comment" TEXT NOT NULL,
+    "time" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "expenseId" TEXT,
+    "participantId" TEXT NOT NULL,
+
+    CONSTRAINT "ExpenseComment_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "ExpenseComment" ADD CONSTRAINT "ExpenseComment_expenseId_fkey" FOREIGN KEY ("expenseId") REFERENCES "Expense"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ExpenseComment" ADD CONSTRAINT "ExpenseComment_participantId_fkey" FOREIGN KEY ("participantId") REFERENCES "Participant"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 2989f3c9..26820b72 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -28,6 +28,7 @@ model Participant {
   groupId         String
   expensesPaidBy  Expense[]
   expensesPaidFor ExpensePaidFor[]
+  expenseComments ExpenseComment[]
 }
 
 model Category {
@@ -53,9 +54,20 @@ model Expense {
   splitMode       SplitMode         @default(EVENLY)
   createdAt       DateTime          @default(now())
   documents       ExpenseDocument[]
+  comments        ExpenseComment[]
   notes           String?
 }
 
+model ExpenseComment {
+  id            String      @id
+  comment       String
+  time          DateTime    @default(now())
+  Expense       Expense?    @relation(fields: [expenseId], references: [id])
+  expenseId     String?
+  participantId String
+  participant   Participant @relation(fields: [participantId], references: [id], onDelete: Cascade)
+}
+
 model ExpenseDocument {
   id        String   @id
   url       String
diff --git a/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-form.tsx b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-form.tsx
new file mode 100644
index 00000000..1ab1bbc7
--- /dev/null
+++ b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-form.tsx
@@ -0,0 +1,81 @@
+'use client'
+import { SubmitButton } from '@/components/submit-button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@/components/ui/form'
+import { Textarea } from '@/components/ui/textarea'
+import { getComment, getGroup } from '@/lib/api'
+import { useActiveUser } from '@/lib/hooks'
+import { CommentFormValues, commentFormSchema } from '@/lib/schemas'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Save } from 'lucide-react'
+import { useForm } from 'react-hook-form'
+
+export type Props = {
+  group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
+  comment?: NonNullable<Awaited<ReturnType<typeof getComment>>>
+  onSubmit: (values: CommentFormValues, participantId: string) => Promise<void>
+}
+
+export function CommentForm({ group, comment, onSubmit }: Props) {
+  const isCreate = comment === undefined
+  const activeUserId = useActiveUser(group.id)
+
+  const form = useForm<CommentFormValues>({
+    resolver: zodResolver(commentFormSchema),
+    defaultValues: comment
+      ? {
+          comment: comment.comment,
+        }
+      : {
+          comment: '',
+        },
+  })
+
+  const submit = async (values: CommentFormValues) => {
+    return onSubmit(values, activeUserId!)
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(submit)}>
+        <Card>
+          <CardHeader>
+            <CardTitle>Add Comment</CardTitle>
+          </CardHeader>
+          <CardContent className="grid sm:grid-cols-1 gap-6">
+            <FormField
+              control={form.control}
+              name="comment"
+              render={({ field }) => (
+                <FormItem className="sm:order-6">
+                  <FormLabel>Comment</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      className="text-base"
+                      {...field}
+                      placeholder="Enter your comment"
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <div>
+              <SubmitButton
+                loadingContent={isCreate ? <>Adding</> : <>Saving…</>}
+              >
+                <Save className="w-4 h-4 mr-2" />
+                {isCreate ? <>Add Comment</> : <>Save Comment</>}
+              </SubmitButton>
+            </div>
+          </CardContent>
+        </Card>
+      </form>
+    </Form>
+  )
+}
diff --git a/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-item.tsx b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-item.tsx
new file mode 100644
index 00000000..72182f67
--- /dev/null
+++ b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-item.tsx
@@ -0,0 +1,30 @@
+'use client'
+import { Button } from '@/components/ui/button'
+import { getComment } from '@/lib/api'
+import { formatDate } from '@/lib/utils'
+import { Trash2 } from 'lucide-react'
+
+export type Props = {
+  comment: NonNullable<Awaited<ReturnType<typeof getComment>>>
+  onDelete: (commentID: string) => Promise<void>
+}
+
+export function CommentItem({ comment, onDelete }: Props) {
+  return (
+    <div className="flex justify-between sm:mx-6 px-4 sm:rounded-lg sm:pr-2 sm:pl-4 py-4 text-sm cursor-pointer hover:bg-accent gap-1 items-stretch">
+      <div className="flex-1">
+        <div className="mb-1">{comment.comment}</div>
+        <div className="text-xs text-muted-foreground">
+          by {comment.participant.name},{' '}
+          {formatDate(comment.time, {
+            dateStyle: 'medium',
+            timeStyle: 'short',
+          })}
+        </div>
+      </div>
+      <Button variant="destructive" onClick={() => onDelete(comment.id)}>
+        <Trash2 className="w-4 h-4" />
+      </Button>
+    </div>
+  )
+}
diff --git a/src/app/groups/[groupId]/expenses/[expenseId]/edit/comments-list.tsx b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comments-list.tsx
new file mode 100644
index 00000000..c92729df
--- /dev/null
+++ b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comments-list.tsx
@@ -0,0 +1,59 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  addComment,
+  deleteComment,
+  getComments,
+  getExpense,
+  getGroup,
+} from '@/lib/api'
+import { commentFormSchema } from '@/lib/schemas'
+import { redirect } from 'next/navigation'
+import { CommentForm } from './comment-form'
+import { CommentItem } from './comment-item'
+
+type Props = {
+  group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
+  expense: NonNullable<Awaited<ReturnType<typeof getExpense>>>
+  comments: NonNullable<Awaited<ReturnType<typeof getComments>>>
+}
+
+export function CommentsList({ group, expense, comments }: Props) {
+  async function addCommentAction(values: unknown, participantId: string) {
+    'use server'
+    const commentFormValues = commentFormSchema.parse(values)
+    await addComment(expense.id, participantId, commentFormValues.comment)
+    redirect(`/groups/${group.id}/expenses/${expense.id}/edit`)
+  }
+
+  async function onDeleteAction(commentId: string) {
+    'use server'
+    await deleteComment(commentId)
+    redirect(`/groups/${group.id}/expenses/${expense.id}/edit`)
+  }
+
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <CardTitle>Comments</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {comments.length > 0 ? (
+            comments.map((comment) => (
+              <CommentItem
+                key={comment.id}
+                comment={comment}
+                onDelete={onDeleteAction}
+              />
+            ))
+          ) : (
+            <p className="px-6 text-sm py-6">
+              This expense does not contain any comments yet.{' '}
+            </p>
+          )}
+        </CardContent>
+      </Card>
+      <CommentForm group={group} onSubmit={addCommentAction} />
+    </>
+  )
+}
diff --git a/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx b/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx
index a91de1f8..1e4ea9a5 100644
--- a/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx
+++ b/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx
@@ -3,6 +3,7 @@ import { ExpenseForm } from '@/components/expense-form'
 import {
   deleteExpense,
   getCategories,
+  getComments,
   getExpense,
   updateExpense,
 } from '@/lib/api'
@@ -11,6 +12,7 @@ import { expenseFormSchema } from '@/lib/schemas'
 import { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
 import { Suspense } from 'react'
+import { CommentsList } from './comments-list'
 
 export const metadata: Metadata = {
   title: 'Edit expense',
@@ -22,6 +24,7 @@ export default async function EditExpensePage({
   params: { groupId: string; expenseId: string }
 }) {
   const categories = await getCategories()
+  const comments = await getComments(expenseId)
   const group = await cached.getGroup(groupId)
   if (!group) notFound()
   const expense = await getExpense(groupId, expenseId)
@@ -50,6 +53,7 @@ export default async function EditExpensePage({
         onDelete={deleteExpenseAction}
         runtimeFeatureFlags={await getRuntimeFeatureFlags()}
       />
+      <CommentsList group={group} expense={expense} comments={comments} />
     </Suspense>
   )
 }
diff --git a/src/lib/api.ts b/src/lib/api.ts
index a592ada4..0928aa74 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -1,6 +1,6 @@
 import { prisma } from '@/lib/prisma'
 import { ExpenseFormValues, GroupFormValues } from '@/lib/schemas'
-import { ActivityType, Expense } from '@prisma/client'
+import { ActivityType, Expense, ExpenseComment } from '@prisma/client'
 import { nanoid } from 'nanoid'
 
 export function randomId() {
@@ -212,6 +212,54 @@ export async function updateExpense(
   })
 }
 
+export async function getComments(expenseId: string) {
+  return prisma.expenseComment.findMany({
+    where: { expenseId: expenseId },
+    include: { participant: true },
+    orderBy: [{ time: 'desc' }],
+  })
+}
+
+export async function getComment(commentId: string) {
+  return prisma.expenseComment.findUnique({
+    where: { id: commentId },
+    include: { participant: true },
+  })
+}
+
+export async function addComment(
+  expenseId: string,
+  participantId: string,
+  comment: string,
+): Promise<ExpenseComment> {
+  return prisma.expenseComment.create({
+    data: {
+      id: randomId(),
+      comment: comment,
+      participantId: participantId,
+      expenseId: expenseId,
+    },
+  })
+}
+
+export async function updateComment(commentId: string, comment: string) {
+  const existingComment = await getGroup(commentId)
+  if (!existingComment) throw new Error('Invalid Comment ID')
+
+  return prisma.expenseComment.update({
+    where: { id: commentId },
+    data: {
+      comment: comment,
+    },
+  })
+}
+
+export async function deleteComment(commentId: string) {
+  await prisma.expenseComment.delete({
+    where: { id: commentId },
+  })
+}
+
 export async function updateGroup(
   groupId: string,
   groupFormValues: GroupFormValues,
diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts
index 9578b025..39ccd61d 100644
--- a/src/lib/schemas.ts
+++ b/src/lib/schemas.ts
@@ -163,6 +163,12 @@ export const expenseFormSchema = z
 
 export type ExpenseFormValues = z.infer<typeof expenseFormSchema>
 
+export const commentFormSchema = z.object({
+  comment: z.string(),
+})
+
+export type CommentFormValues = z.infer<typeof commentFormSchema>
+
 export type SplittingOptions = {
   // Used for saving default splitting options in localStorage
   splitMode: SplitMode

From 3a362d6a13280167b2acd440ec48bf868c1a90d2 Mon Sep 17 00:00:00 2001
From: Chris Johnston <christopher_johnston@me.com>
Date: Fri, 31 May 2024 19:14:35 +0100
Subject: [PATCH 2/8] fix comment form ordering

---
 .../expenses/[expenseId]/edit/comment-form.tsx      | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-form.tsx b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-form.tsx
index 1ab1bbc7..6ddded37 100644
--- a/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-form.tsx
+++ b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-form.tsx
@@ -1,13 +1,7 @@
 'use client'
 import { SubmitButton } from '@/components/submit-button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-} from '@/components/ui/form'
+import { Form, FormControl, FormField, FormItem } from '@/components/ui/form'
 import { Textarea } from '@/components/ui/textarea'
 import { getComment, getGroup } from '@/lib/api'
 import { useActiveUser } from '@/lib/hooks'
@@ -53,8 +47,7 @@ export function CommentForm({ group, comment, onSubmit }: Props) {
               control={form.control}
               name="comment"
               render={({ field }) => (
-                <FormItem className="sm:order-6">
-                  <FormLabel>Comment</FormLabel>
+                <FormItem className="sm:order-1">
                   <FormControl>
                     <Textarea
                       className="text-base"
@@ -65,7 +58,7 @@ export function CommentForm({ group, comment, onSubmit }: Props) {
                 </FormItem>
               )}
             />
-            <div>
+            <div className="sm:order-2">
               <SubmitButton
                 loadingContent={isCreate ? <>Adding</> : <>Saving…</>}
               >

From 9a79fa7b0c8a384d699412841624d27a295a58d5 Mon Sep 17 00:00:00 2001
From: Chris Johnston <christopher_johnston@me.com>
Date: Fri, 31 May 2024 22:42:14 +0100
Subject: [PATCH 3/8] fix existingComment fetch in updateComment

---
 src/lib/api.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/api.ts b/src/lib/api.ts
index 0928aa74..fe4361e1 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -243,7 +243,7 @@ export async function addComment(
 }
 
 export async function updateComment(commentId: string, comment: string) {
-  const existingComment = await getGroup(commentId)
+  const existingComment = await getComment(commentId)
   if (!existingComment) throw new Error('Invalid Comment ID')
 
   return prisma.expenseComment.update({

From 0556ab6162aff14292fd7d3770be67d69aefe775 Mon Sep 17 00:00:00 2001
From: Chris Johnston <christopher_johnston@me.com>
Date: Fri, 31 May 2024 23:00:40 +0100
Subject: [PATCH 4/8] include ability to edit comments

---
 .../[expenseId]/edit/comment-form.tsx         | 49 +++++++++-----
 .../[expenseId]/edit/comment-item.tsx         | 16 +++--
 .../[expenseId]/edit/comments-list.tsx        | 67 ++++++++++---------
 .../expenses/[expenseId]/edit/page.tsx        | 34 +++++++++-
 4 files changed, 115 insertions(+), 51 deletions(-)

diff --git a/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-form.tsx b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-form.tsx
index 6ddded37..7464d1b5 100644
--- a/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-form.tsx
+++ b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-form.tsx
@@ -1,5 +1,6 @@
 'use client'
 import { SubmitButton } from '@/components/submit-button'
+import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Form, FormControl, FormField, FormItem } from '@/components/ui/form'
 import { Textarea } from '@/components/ui/textarea'
@@ -13,10 +14,18 @@ import { useForm } from 'react-hook-form'
 export type Props = {
   group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
   comment?: NonNullable<Awaited<ReturnType<typeof getComment>>>
-  onSubmit: (values: CommentFormValues, participantId: string) => Promise<void>
+  onCreate: (values: CommentFormValues, participantId: string) => Promise<void>
+  onUpdate: (values: CommentFormValues, commentId: string) => Promise<void>
+  onCancel: () => void
 }
 
-export function CommentForm({ group, comment, onSubmit }: Props) {
+export function CommentForm({
+  group,
+  comment,
+  onCreate,
+  onUpdate,
+  onCancel,
+}: Props) {
   const isCreate = comment === undefined
   const activeUserId = useActiveUser(group.id)
 
@@ -29,10 +38,15 @@ export function CommentForm({ group, comment, onSubmit }: Props) {
       : {
           comment: '',
         },
+    values: comment ? { comment: comment.comment } : { comment: '' },
   })
 
   const submit = async (values: CommentFormValues) => {
-    return onSubmit(values, activeUserId!)
+    if (comment) {
+      return onUpdate(values, comment!.id)
+    } else {
+      return onCreate(values, activeUserId!)
+    }
   }
 
   return (
@@ -40,23 +54,25 @@ export function CommentForm({ group, comment, onSubmit }: Props) {
       <form onSubmit={form.handleSubmit(submit)}>
         <Card>
           <CardHeader>
-            <CardTitle>Add Comment</CardTitle>
+            <CardTitle>{comment ? 'Edit Comment' : 'Add Comment'}</CardTitle>
           </CardHeader>
           <CardContent className="grid sm:grid-cols-1 gap-6">
             <FormField
               control={form.control}
               name="comment"
-              render={({ field }) => (
-                <FormItem className="sm:order-1">
-                  <FormControl>
-                    <Textarea
-                      className="text-base"
-                      {...field}
-                      placeholder="Enter your comment"
-                    />
-                  </FormControl>
-                </FormItem>
-              )}
+              render={({ field }) => {
+                return (
+                  <FormItem className="sm:order-1">
+                    <FormControl>
+                      <Textarea
+                        className="text-base"
+                        {...field}
+                        placeholder="Enter your comment"
+                      />
+                    </FormControl>
+                  </FormItem>
+                )
+              }}
             />
             <div className="sm:order-2">
               <SubmitButton
@@ -65,6 +81,9 @@ export function CommentForm({ group, comment, onSubmit }: Props) {
                 <Save className="w-4 h-4 mr-2" />
                 {isCreate ? <>Add Comment</> : <>Save Comment</>}
               </SubmitButton>
+              <Button type="button" variant="ghost" onClick={onCancel}>
+                Cancel
+              </Button>
             </div>
           </CardContent>
         </Card>
diff --git a/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-item.tsx b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-item.tsx
index 72182f67..77406319 100644
--- a/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-item.tsx
+++ b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-item.tsx
@@ -6,12 +6,20 @@ import { Trash2 } from 'lucide-react'
 
 export type Props = {
   comment: NonNullable<Awaited<ReturnType<typeof getComment>>>
-  onDelete: (commentID: string) => Promise<void>
+  onDelete: (commentId: string) => Promise<void>
+  onClick: (
+    comment: NonNullable<Awaited<ReturnType<typeof getComment>>>,
+  ) => void
 }
 
-export function CommentItem({ comment, onDelete }: Props) {
+export function CommentItem({ comment, onDelete, onClick }: Props) {
   return (
-    <div className="flex justify-between sm:mx-6 px-4 sm:rounded-lg sm:pr-2 sm:pl-4 py-4 text-sm cursor-pointer hover:bg-accent gap-1 items-stretch">
+    <div
+      className="flex justify-between sm:mx-6 px-4 sm:rounded-lg sm:pr-2 sm:pl-4 py-4 text-sm cursor-pointer hover:bg-accent gap-1 items-stretch"
+      onClick={() => {
+        onClick(comment)
+      }}
+    >
       <div className="flex-1">
         <div className="mb-1">{comment.comment}</div>
         <div className="text-xs text-muted-foreground">
@@ -22,7 +30,7 @@ export function CommentItem({ comment, onDelete }: Props) {
           })}
         </div>
       </div>
-      <Button variant="destructive" onClick={() => onDelete(comment.id)}>
+      <Button variant="ghost" onClick={() => onDelete(comment.id)}>
         <Trash2 className="w-4 h-4" />
       </Button>
     </div>
diff --git a/src/app/groups/[groupId]/expenses/[expenseId]/edit/comments-list.tsx b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comments-list.tsx
index c92729df..7a01546d 100644
--- a/src/app/groups/[groupId]/expenses/[expenseId]/edit/comments-list.tsx
+++ b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comments-list.tsx
@@ -1,13 +1,8 @@
+'use client'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import {
-  addComment,
-  deleteComment,
-  getComments,
-  getExpense,
-  getGroup,
-} from '@/lib/api'
-import { commentFormSchema } from '@/lib/schemas'
-import { redirect } from 'next/navigation'
+import { getComment, getComments, getExpense, getGroup } from '@/lib/api'
+import { CommentFormValues } from '@/lib/schemas'
+import { useState } from 'react'
 import { CommentForm } from './comment-form'
 import { CommentItem } from './comment-item'
 
@@ -15,21 +10,20 @@ type Props = {
   group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
   expense: NonNullable<Awaited<ReturnType<typeof getExpense>>>
   comments: NonNullable<Awaited<ReturnType<typeof getComments>>>
+  onCreate: (values: CommentFormValues, participantId: string) => Promise<void>
+  onUpdate: (values: CommentFormValues, commentId: string) => Promise<void>
+  onDelete: (commentId: string) => Promise<void>
 }
 
-export function CommentsList({ group, expense, comments }: Props) {
-  async function addCommentAction(values: unknown, participantId: string) {
-    'use server'
-    const commentFormValues = commentFormSchema.parse(values)
-    await addComment(expense.id, participantId, commentFormValues.comment)
-    redirect(`/groups/${group.id}/expenses/${expense.id}/edit`)
-  }
-
-  async function onDeleteAction(commentId: string) {
-    'use server'
-    await deleteComment(commentId)
-    redirect(`/groups/${group.id}/expenses/${expense.id}/edit`)
-  }
+export function CommentsList({
+  group,
+  expense,
+  comments,
+  onCreate,
+  onUpdate,
+  onDelete,
+}: Props) {
+  const [selectedComment, setSelectedComment] = useState<NonNullable<Awaited<ReturnType<typeof getComment>>>>()
 
   return (
     <>
@@ -39,13 +33,20 @@ export function CommentsList({ group, expense, comments }: Props) {
         </CardHeader>
         <CardContent>
           {comments.length > 0 ? (
-            comments.map((comment) => (
-              <CommentItem
-                key={comment.id}
-                comment={comment}
-                onDelete={onDeleteAction}
-              />
-            ))
+            comments.map(
+              (
+                comment: NonNullable<Awaited<ReturnType<typeof getComment>>>,
+              ) => (
+                <CommentItem
+                  key={comment.id}
+                  comment={comment}
+                  onDelete={onDelete}
+                  onClick={(comment: NonNullable<Awaited<ReturnType<typeof getComment>>>) => {
+                    setSelectedComment(comment)
+                  }}
+                />
+              ),
+            )
           ) : (
             <p className="px-6 text-sm py-6">
               This expense does not contain any comments yet.{' '}
@@ -53,7 +54,13 @@ export function CommentsList({ group, expense, comments }: Props) {
           )}
         </CardContent>
       </Card>
-      <CommentForm group={group} onSubmit={addCommentAction} />
+      <CommentForm
+        group={group}
+        onCreate={onCreate}
+        onUpdate={onUpdate}
+        onCancel={() => setSelectedComment(undefined)}
+        comment={selectedComment}
+      />
     </>
   )
 }
diff --git a/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx b/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx
index 1e4ea9a5..31443a4a 100644
--- a/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx
+++ b/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx
@@ -1,14 +1,17 @@
 import { cached } from '@/app/cached-functions'
 import { ExpenseForm } from '@/components/expense-form'
 import {
+  addComment,
+  deleteComment,
   deleteExpense,
   getCategories,
   getComments,
   getExpense,
+  updateComment,
   updateExpense,
 } from '@/lib/api'
 import { getRuntimeFeatureFlags } from '@/lib/featureFlags'
-import { expenseFormSchema } from '@/lib/schemas'
+import { commentFormSchema, expenseFormSchema } from '@/lib/schemas'
 import { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
 import { Suspense } from 'react'
@@ -43,6 +46,26 @@ export default async function EditExpensePage({
     redirect(`/groups/${groupId}`)
   }
 
+  async function addCommentAction(values: unknown, participantId: string) {
+    'use server'
+    const commentFormValues = commentFormSchema.parse(values)
+    await addComment(expense!.id, participantId, commentFormValues.comment)
+    redirect(`/groups/${group!.id}/expenses/${expense!.id}/edit`)
+  }
+
+  async function updateCommentAction(values: unknown, commentId: string) {
+    'use server'
+    const commentFormValues = commentFormSchema.parse(values)
+    await updateComment(commentId, commentFormValues.comment)
+    redirect(`/groups/${group!.id}/expenses/${expense!.id}/edit`)
+  }
+
+  async function deleteCommentAction(commentId: string) {
+    'use server'
+    await deleteComment(commentId)
+    redirect(`/groups/${group!.id}/expenses/${expense!.id}/edit`)
+  }
+
   return (
     <Suspense>
       <ExpenseForm
@@ -53,7 +76,14 @@ export default async function EditExpensePage({
         onDelete={deleteExpenseAction}
         runtimeFeatureFlags={await getRuntimeFeatureFlags()}
       />
-      <CommentsList group={group} expense={expense} comments={comments} />
+      <CommentsList
+        group={group}
+        expense={expense}
+        comments={comments}
+        onCreate={addCommentAction}
+        onUpdate={updateCommentAction}
+        onDelete={deleteCommentAction}
+      />
     </Suspense>
   )
 }

From 06641ceae6095b728730e1f0ef604d8a99993560 Mon Sep 17 00:00:00 2001
From: Chris Johnston <christopher_johnston@me.com>
Date: Fri, 31 May 2024 23:13:33 +0100
Subject: [PATCH 5/8] only allow participant who commented to edit

---
 .../[expenseId]/edit/comment-item.tsx         | 29 +++++++++++++------
 .../[expenseId]/edit/comments-list.tsx        | 10 +++++--
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-item.tsx b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-item.tsx
index 77406319..d594925f 100644
--- a/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-item.tsx
+++ b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-item.tsx
@@ -1,25 +1,24 @@
 'use client'
 import { Button } from '@/components/ui/button'
-import { getComment } from '@/lib/api'
+import { getComment, getGroup } from '@/lib/api'
+import { useActiveUser } from '@/lib/hooks'
 import { formatDate } from '@/lib/utils'
-import { Trash2 } from 'lucide-react'
+import { Edit2, Trash2 } from 'lucide-react'
 
 export type Props = {
   comment: NonNullable<Awaited<ReturnType<typeof getComment>>>
+  group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
   onDelete: (commentId: string) => Promise<void>
   onClick: (
     comment: NonNullable<Awaited<ReturnType<typeof getComment>>>,
   ) => void
 }
 
-export function CommentItem({ comment, onDelete, onClick }: Props) {
+export function CommentItem({ comment, group, onDelete, onClick }: Props) {
+  const activeUserId = useActiveUser(group.id)
+
   return (
-    <div
-      className="flex justify-between sm:mx-6 px-4 sm:rounded-lg sm:pr-2 sm:pl-4 py-4 text-sm cursor-pointer hover:bg-accent gap-1 items-stretch"
-      onClick={() => {
-        onClick(comment)
-      }}
-    >
+    <div className="flex justify-between sm:mx-6 px-4 sm:rounded-lg sm:pr-2 sm:pl-4 py-4 text-sm cursor-pointer hover:bg-accent gap-1 items-stretch">
       <div className="flex-1">
         <div className="mb-1">{comment.comment}</div>
         <div className="text-xs text-muted-foreground">
@@ -30,6 +29,18 @@ export function CommentItem({ comment, onDelete, onClick }: Props) {
           })}
         </div>
       </div>
+      {comment.participantId == activeUserId ? (
+        <Button
+          variant="ghost"
+          onClick={() => {
+            onClick(comment)
+          }}
+        >
+          <Edit2 className="w-4 h-4" />
+        </Button>
+      ) : (
+        <></>
+      )}
       <Button variant="ghost" onClick={() => onDelete(comment.id)}>
         <Trash2 className="w-4 h-4" />
       </Button>
diff --git a/src/app/groups/[groupId]/expenses/[expenseId]/edit/comments-list.tsx b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comments-list.tsx
index 7a01546d..a7e38b16 100644
--- a/src/app/groups/[groupId]/expenses/[expenseId]/edit/comments-list.tsx
+++ b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comments-list.tsx
@@ -23,7 +23,8 @@ export function CommentsList({
   onUpdate,
   onDelete,
 }: Props) {
-  const [selectedComment, setSelectedComment] = useState<NonNullable<Awaited<ReturnType<typeof getComment>>>>()
+  const [selectedComment, setSelectedComment] =
+    useState<NonNullable<Awaited<ReturnType<typeof getComment>>>>()
 
   return (
     <>
@@ -39,9 +40,14 @@ export function CommentsList({
               ) => (
                 <CommentItem
                   key={comment.id}
+                  group={group}
                   comment={comment}
                   onDelete={onDelete}
-                  onClick={(comment: NonNullable<Awaited<ReturnType<typeof getComment>>>) => {
+                  onClick={(
+                    comment: NonNullable<
+                      Awaited<ReturnType<typeof getComment>>
+                    >,
+                  ) => {
                     setSelectedComment(comment)
                   }}
                 />

From 8fa55a621f1cdc4fe14708a87ebc439c9c7ab3b8 Mon Sep 17 00:00:00 2001
From: Chris Johnston <christopher_johnston@me.com>
Date: Thu, 8 Aug 2024 19:06:42 +0100
Subject: [PATCH 6/8] use locale in date format

---
 .../[groupId]/expenses/[expenseId]/edit/comment-item.tsx      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-item.tsx b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-item.tsx
index d594925f..0f749ead 100644
--- a/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-item.tsx
+++ b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-item.tsx
@@ -4,6 +4,7 @@ import { getComment, getGroup } from '@/lib/api'
 import { useActiveUser } from '@/lib/hooks'
 import { formatDate } from '@/lib/utils'
 import { Edit2, Trash2 } from 'lucide-react'
+import { useLocale } from 'next-intl'
 
 export type Props = {
   comment: NonNullable<Awaited<ReturnType<typeof getComment>>>
@@ -16,6 +17,7 @@ export type Props = {
 
 export function CommentItem({ comment, group, onDelete, onClick }: Props) {
   const activeUserId = useActiveUser(group.id)
+  const locale = useLocale()
 
   return (
     <div className="flex justify-between sm:mx-6 px-4 sm:rounded-lg sm:pr-2 sm:pl-4 py-4 text-sm cursor-pointer hover:bg-accent gap-1 items-stretch">
@@ -23,7 +25,7 @@ export function CommentItem({ comment, group, onDelete, onClick }: Props) {
         <div className="mb-1">{comment.comment}</div>
         <div className="text-xs text-muted-foreground">
           by {comment.participant.name},{' '}
-          {formatDate(comment.time, {
+          {formatDate(comment.time, locale, {
             dateStyle: 'medium',
             timeStyle: 'short',
           })}

From af23aaa26393b27a4169994e021c6f097e087c24 Mon Sep 17 00:00:00 2001
From: Chris Johnston <christopher_johnston@me.com>
Date: Thu, 8 Aug 2024 19:25:57 +0100
Subject: [PATCH 7/8] only allow comments if active user is selected

---
 .../expenses/[expenseId]/edit/comment-form.tsx        | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-form.tsx b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-form.tsx
index 7464d1b5..1bd64813 100644
--- a/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-form.tsx
+++ b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-form.tsx
@@ -49,7 +49,16 @@ export function CommentForm({
     }
   }
 
-  return (
+  return activeUserId == 'none' ? (
+    <Card>
+      <CardHeader>
+        <CardTitle>{comment ? 'Edit Comment' : 'Add Comment'}</CardTitle>
+      </CardHeader>
+      <CardContent className="grid sm:grid-cols-1 gap-6">
+        Select an active user to add and edit comments
+      </CardContent>
+    </Card>
+  ) : (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(submit)}>
         <Card>

From f852757351a29b284aa7ffc712f7fbebea3136c7 Mon Sep 17 00:00:00 2001
From: Chris Johnston <christopher_johnston@me.com>
Date: Fri, 9 Aug 2024 14:51:14 +0100
Subject: [PATCH 8/8] use modal for comment entry form; add i18n to comments
 list and form

---
 messages/en-US.json                           |  13 ++
 messages/fi.json                              |  13 ++
 .../[expenseId]/edit/comment-form.tsx         | 158 +++++++++++++-----
 .../[expenseId]/edit/comments-list.tsx        |  43 +++--
 4 files changed, 171 insertions(+), 56 deletions(-)

diff --git a/messages/en-US.json b/messages/en-US.json
index bce39e91..16ee3633 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -197,6 +197,19 @@
     "saving": "Saving…",
     "cancel": "Cancel"
   },
+  "ExpenseComments": {
+      "title": "Comments",
+      "noComments": "This expense does not contain any comments yet.",
+      "noActiveParticipant": "Select an active participant to add and edit comments",
+      "addComment": "Add Comment",
+      "editComment": "Edit Comment",
+      "commentPlaceholder": "Enter your comment",
+      "addCaption": "Add Comment",
+      "addingCaption": "Adding",
+      "saveCaption": "Save Comment",
+      "savingCaption": "Saving",
+      "cancel": "Cancel"
+    },
   "ExpenseDocumentsInput": {
     "TooBigToast": {
       "title": "The file is too big",
diff --git a/messages/fi.json b/messages/fi.json
index 5bf45c22..64ae9dbd 100644
--- a/messages/fi.json
+++ b/messages/fi.json
@@ -197,6 +197,19 @@
     "saving": "Tallennetaan…",
     "cancel": "Peruuta"
   },
+  "ExpenseComments": {
+    "title": "Comments",
+    "noComments": "This expense does not contain any comments yet.",
+    "noActiveParticipant": "Select an active participant to add and edit comments",
+    "addComment": "Add Comment",
+    "editComment": "Edit Comment",
+    "commentPlaceholder": "Enter your comment",
+    "addCaption": "Add Comment",
+    "addingCaption": "Adding",
+    "saveCaption": "Save Comment",
+    "savingCaption": "Tallennetaan…",
+    "cancel": "Peruuta"
+  },
   "ExpenseDocumentsInput": {
     "TooBigToast": {
       "title": "Tiedosto on liian suuri",
diff --git a/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-form.tsx b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-form.tsx
index 1bd64813..8ed0a56e 100644
--- a/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-form.tsx
+++ b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comment-form.tsx
@@ -1,22 +1,97 @@
 'use client'
 import { SubmitButton } from '@/components/submit-button'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+} from '@/components/ui/drawer'
 import { Form, FormControl, FormField, FormItem } from '@/components/ui/form'
 import { Textarea } from '@/components/ui/textarea'
 import { getComment, getGroup } from '@/lib/api'
-import { useActiveUser } from '@/lib/hooks'
+import { useActiveUser, useMediaQuery } from '@/lib/hooks'
 import { CommentFormValues, commentFormSchema } from '@/lib/schemas'
+import { cn } from '@/lib/utils'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Save } from 'lucide-react'
+import { useTranslations } from 'next-intl'
 import { useForm } from 'react-hook-form'
 
+export type ModalProps = {
+  isOpen: boolean
+  group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
+  comment?: NonNullable<Awaited<ReturnType<typeof getComment>>>
+  onCreate: (values: CommentFormValues, participantId: string) => Promise<void>
+  onUpdate: (values: CommentFormValues, commentId: string) => Promise<void>
+  onCancel: () => void
+  updateOpen: (open: boolean) => void
+}
+
 export type Props = {
   group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
   comment?: NonNullable<Awaited<ReturnType<typeof getComment>>>
   onCreate: (values: CommentFormValues, participantId: string) => Promise<void>
   onUpdate: (values: CommentFormValues, commentId: string) => Promise<void>
   onCancel: () => void
+  className?: string
+}
+
+export function CommentModal({
+  isOpen,
+  group,
+  comment,
+  onCreate,
+  onUpdate,
+  onCancel,
+  updateOpen,
+}: ModalProps) {
+  const t = useTranslations('ExpenseComments')
+  const isDesktop = useMediaQuery('(min-width: 768px)')
+  const dialogTitle = comment ? t('editComment') : t('addComment')
+
+  if (isDesktop) {
+    return (
+      <Dialog open={isOpen} onOpenChange={updateOpen}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>{dialogTitle}</DialogTitle>
+          </DialogHeader>
+          <CommentForm
+            group={group}
+            comment={comment}
+            onCreate={onCreate}
+            onUpdate={onUpdate}
+            onCancel={onCancel}
+          />
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
+  return (
+    <Drawer open={isOpen} onOpenChange={updateOpen}>
+      <DrawerContent>
+        <DrawerHeader className="text-left">
+          <DrawerTitle>{dialogTitle}</DrawerTitle>
+        </DrawerHeader>
+        <CommentForm
+          group={group}
+          comment={comment}
+          onCreate={onCreate}
+          onUpdate={onUpdate}
+          onCancel={onCancel}
+          className="px-4"
+        />
+      </DrawerContent>
+    </Drawer>
+  )
 }
 
 export function CommentForm({
@@ -25,7 +100,9 @@ export function CommentForm({
   onCreate,
   onUpdate,
   onCancel,
+  className,
 }: Props) {
+  const t = useTranslations('ExpenseComments')
   const isCreate = comment === undefined
   const activeUserId = useActiveUser(group.id)
 
@@ -50,52 +127,41 @@ export function CommentForm({
   }
 
   return activeUserId == 'none' ? (
-    <Card>
-      <CardHeader>
-        <CardTitle>{comment ? 'Edit Comment' : 'Add Comment'}</CardTitle>
-      </CardHeader>
-      <CardContent className="grid sm:grid-cols-1 gap-6">
-        Select an active user to add and edit comments
-      </CardContent>
-    </Card>
+    <div>{t('noActiveParticipant')}</div>
   ) : (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(submit)}>
-        <Card>
-          <CardHeader>
-            <CardTitle>{comment ? 'Edit Comment' : 'Add Comment'}</CardTitle>
-          </CardHeader>
-          <CardContent className="grid sm:grid-cols-1 gap-6">
-            <FormField
-              control={form.control}
-              name="comment"
-              render={({ field }) => {
-                return (
-                  <FormItem className="sm:order-1">
-                    <FormControl>
-                      <Textarea
-                        className="text-base"
-                        {...field}
-                        placeholder="Enter your comment"
-                      />
-                    </FormControl>
-                  </FormItem>
-                )
-              }}
-            />
-            <div className="sm:order-2">
-              <SubmitButton
-                loadingContent={isCreate ? <>Adding</> : <>Saving…</>}
-              >
-                <Save className="w-4 h-4 mr-2" />
-                {isCreate ? <>Add Comment</> : <>Save Comment</>}
-              </SubmitButton>
-              <Button type="button" variant="ghost" onClick={onCancel}>
-                Cancel
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
+      <form
+        className={cn('grid items-start gap-4', className)}
+        onSubmit={form.handleSubmit(submit)}
+      >
+        <FormField
+          control={form.control}
+          name="comment"
+          render={({ field }) => {
+            return (
+              <FormItem className="sm:order-1">
+                <FormControl>
+                  <Textarea
+                    className="text-base"
+                    {...field}
+                    placeholder={t('commentPlaceholder')}
+                  />
+                </FormControl>
+              </FormItem>
+            )
+          }}
+        />
+        <div className="sm:order-2">
+          <SubmitButton
+            loadingContent={isCreate ? t('addingCaption') : t('savingCaption')}
+          >
+            <Save className="w-4 h-4 mr-2" />
+            {isCreate ? t('addCaption') : t('saveCaption')}
+          </SubmitButton>
+          <Button type="button" variant="ghost" onClick={onCancel}>
+            {t('cancel')}
+          </Button>
+        </div>
       </form>
     </Form>
   )
diff --git a/src/app/groups/[groupId]/expenses/[expenseId]/edit/comments-list.tsx b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comments-list.tsx
index a7e38b16..f6f1cee0 100644
--- a/src/app/groups/[groupId]/expenses/[expenseId]/edit/comments-list.tsx
+++ b/src/app/groups/[groupId]/expenses/[expenseId]/edit/comments-list.tsx
@@ -1,9 +1,12 @@
 'use client'
+import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { getComment, getComments, getExpense, getGroup } from '@/lib/api'
 import { CommentFormValues } from '@/lib/schemas'
+import { PenBoxIcon } from 'lucide-react'
+import { useTranslations } from 'next-intl'
 import { useState } from 'react'
-import { CommentForm } from './comment-form'
+import { CommentModal } from './comment-form'
 import { CommentItem } from './comment-item'
 
 type Props = {
@@ -25,12 +28,25 @@ export function CommentsList({
 }: Props) {
   const [selectedComment, setSelectedComment] =
     useState<NonNullable<Awaited<ReturnType<typeof getComment>>>>()
+  const [commentModalOpen, setCommentModalOpen] = useState(false)
+  const t = useTranslations('ExpenseComments')
 
   return (
     <>
       <Card>
-        <CardHeader>
-          <CardTitle>Comments</CardTitle>
+        <CardHeader className="grid grid-cols-2">
+          <CardTitle className="col-span-1">{t('title')}</CardTitle>
+          <Button
+            className="col-span-1 align-right"
+            type="button"
+            variant="ghost"
+            onClick={() => {
+              setSelectedComment(undefined)
+              setCommentModalOpen(true)
+            }}
+          >
+            <PenBoxIcon></PenBoxIcon>
+          </Button>
         </CardHeader>
         <CardContent>
           {comments.length > 0 ? (
@@ -49,23 +65,30 @@ export function CommentsList({
                     >,
                   ) => {
                     setSelectedComment(comment)
+                    setCommentModalOpen(true)
                   }}
                 />
               ),
             )
           ) : (
-            <p className="px-6 text-sm py-6">
-              This expense does not contain any comments yet.{' '}
-            </p>
+            <p className="px-6 text-sm py-6">{t('noComments')}</p>
           )}
         </CardContent>
       </Card>
-      <CommentForm
+      <CommentModal
+        isOpen={commentModalOpen}
         group={group}
-        onCreate={onCreate}
-        onUpdate={onUpdate}
-        onCancel={() => setSelectedComment(undefined)}
+        onCreate={async (values, participantId) => {
+          await onCreate(values, participantId)
+          setCommentModalOpen(false)
+        }}
+        onUpdate={async (values, commentId) => {
+          await onUpdate(values, commentId)
+          setCommentModalOpen(false)
+        }}
+        onCancel={() => setCommentModalOpen(false)}
         comment={selectedComment}
+        updateOpen={(open) => setCommentModalOpen(open)}
       />
     </>
   )