feat: doc comments

apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx

@@ -24,6 +24,8 @@ import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 import { Stepper } from '@documenso/ui/primitives/stepper';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { Comments } from '~/components/forms/comments';
+
 export type EditDocumentFormProps = {
   className?: string;
   user: User;
@@ -179,60 +181,70 @@ export const EditDocumentForm = ({
   const currentDocumentFlow = documentFlow[step];
 
   return (
-    <div className={cn('grid w-full grid-cols-12 gap-8', className)}>
-      <Card
-        className="relative col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
-        gradient
-      >
-        <CardContent className="p-2">
-          <LazyPDFViewer key={documentData.id} documentData={documentData} />
+    <div>
+      <div className={cn('grid w-full grid-cols-12 gap-8', className)}>
+        <Card
+          className="relative col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
+          gradient
+        >
+          <CardContent className="p-2">
+            <LazyPDFViewer key={documentData.id} documentData={documentData} />
+          </CardContent>
+        </Card>
+
+        <div className="col-span-12 lg:col-span-6 xl:col-span-5">
+          <DocumentFlowFormContainer
+            className="lg:h-[calc(100vh-6rem)]"
+            onSubmit={(e) => e.preventDefault()}
+          >
+            <Stepper
+              currentStep={currentDocumentFlow.stepIndex}
+              setCurrentStep={(step) => setStep(EditDocumentSteps[step - 1])}
+            >
+              <AddTitleFormPartial
+                key={recipients.length}
+                documentFlow={documentFlow.title}
+                recipients={recipients}
+                fields={fields}
+                document={document}
+                onSubmit={onAddTitleFormSubmit}
+              />
+
+              <AddSignersFormPartial
+                key={recipients.length}
+                documentFlow={documentFlow.signers}
+                document={document}
+                recipients={recipients}
+                fields={fields}
+                onSubmit={onAddSignersFormSubmit}
+              />
+              <AddFieldsFormPartial
+                key={fields.length}
+                documentFlow={documentFlow.fields}
+                recipients={recipients}
+                fields={fields}
+                onSubmit={onAddFieldsFormSubmit}
+              />
+              <AddSubjectFormPartial
+                key={recipients.length}
+                documentFlow={documentFlow.subject}
+                document={document}
+                recipients={recipients}
+                fields={fields}
+                onSubmit={onAddSubjectFormSubmit}
+              />
+            </Stepper>
+          </DocumentFlowFormContainer>
+        </div>
+      </div>
+      <Card className="my-8" gradient={true} degrees={200}>
+        <CardContent className="mt-8 flex flex-col">
+          <h2 className="text-foreground text-2xl font-semibold">Comments</h2>
+          <hr className="border-border mb-4 mt-4" />
+          <Comments />
+          <hr className="border-border -mt-4 mb-4" />
         </CardContent>
       </Card>
-
-      <div className="col-span-12 lg:col-span-6 xl:col-span-5">
-        <DocumentFlowFormContainer
-          className="lg:h-[calc(100vh-6rem)]"
-          onSubmit={(e) => e.preventDefault()}
-        >
-          <Stepper
-            currentStep={currentDocumentFlow.stepIndex}
-            setCurrentStep={(step) => setStep(EditDocumentSteps[step - 1])}
-          >
-            <AddTitleFormPartial
-              key={recipients.length}
-              documentFlow={documentFlow.title}
-              recipients={recipients}
-              fields={fields}
-              document={document}
-              onSubmit={onAddTitleFormSubmit}
-            />
-
-            <AddSignersFormPartial
-              key={recipients.length}
-              documentFlow={documentFlow.signers}
-              document={document}
-              recipients={recipients}
-              fields={fields}
-              onSubmit={onAddSignersFormSubmit}
-            />
-            <AddFieldsFormPartial
-              key={fields.length}
-              documentFlow={documentFlow.fields}
-              recipients={recipients}
-              fields={fields}
-              onSubmit={onAddFieldsFormSubmit}
-            />
-            <AddSubjectFormPartial
-              key={recipients.length}
-              documentFlow={documentFlow.subject}
-              document={document}
-              recipients={recipients}
-              fields={fields}
-              onSubmit={onAddSubjectFormSubmit}
-            />
-          </Stepper>
-        </DocumentFlowFormContainer>
-      </div>
     </div>
   );
 };

apps/web/src/components/comments/comment-card.tsx

@@ -0,0 +1,29 @@
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+export type CommentCardProps = {
+  comment: any;
+  className?: string;
+};
+
+export const CommentCard = ({ comment, className }: CommentCardProps) => {
+  return (
+    <div className={cn('mb-8', className)} key={comment.id}>
+      <p className="font-semibold">{comment.User.name}</p>
+      <p className="text-sm">
+        <LocaleDate
+          date={comment.createdAt}
+          format={{
+            month: 'long',
+            day: 'numeric',
+            year: 'numeric',
+          }}
+        />
+      </p>
+      <p className="mb-2 mt-2 text-base">{comment.comment}</p>
+      <Button>Reply</Button>
+    </div>
+  );
+};

apps/web/src/components/forms/comments.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { CornerDownRight } from 'lucide-react';
+
+import { trpc } from '@documenso/trpc/react';
+
+import { CommentCard } from '~/components/comments/comment-card';
+
+export const Comments = () => {
+  const { data: comments } = trpc.comment.getComments.useQuery();
+
+  console.log(comments);
+  return (
+    <div>
+      {comments?.map((comment) => (
+        <div key={comment.id}>
+          <CommentCard comment={comment} className="mb-8" />
+          {comment.replies && comment.replies.length > 0 ? (
+            <div>
+              {comment.replies.map((reply) => (
+                <div className="ml-6 flex" key={reply.id}>
+                  <CornerDownRight className="flex shrink-0" />
+                  <CommentCard comment={reply} className="ml-6" />
+                </div>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      ))}
+    </div>
+  );
+};

apps/web/src/components/forms/profile.tsx

@@ -124,6 +124,7 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
                     className="h-44 w-full"
                     containerClassName="rounded-lg border bg-background"
                     defaultValue={user.signature ?? undefined}
+                    
                     onChange={(v) => onChange(v ?? '')}
                   />
                 </FormControl>