added zustand and global dialog component

added deleted comment indicator
new nested comments section ui; implimented socket io
2025-03-23 13:16:59 +01:00 · 2025-03-22 17:48:05 +01:00 · 2025-03-22 14:13:45 +01:00 · 2025-03-22 09:20:12 +01:00 · 2025-03-18 21:49:35 +01:00 · 2025-03-18 21:43:41 +01:00
76 changed files with 2696 additions and 691 deletions
--- a/.gitea/workflows/demo.yml
+++ b/.gitea/workflows/demo.yml
@ -1,11 +0,0 @@
-name: Gitea Actions Demo
-run-name: ${{ gitea.actor }} is testing out Gitea Actions 🚀
-on: [push]
-
-jobs:
-  Explore-Gitea-Actions:
-    runs-on: linux
-    steps:
-      - run: echo "🎉 The job was automatically triggered by a ${{ gitea.event_name }} event."
-      - run: ssh
-      - run: echo "🍏 This job's status is ${{ gitea.job_status }}."
--- a/drizzle.config.ts
+++ b/drizzle.config.ts
@ -3,7 +3,7 @@ import { type Config } from "drizzle-kit";
 import { env } from "@/env";

 export default {
-  schema: "./src/server/db/schema.ts",
+  schema: "./src/server/db/schema/index.ts",
  dialect: "postgresql",
  dbCredentials: {
    url: env.DATABASE_URL,
--- a/nodemon.json
+++ b/nodemon.json
@ -0,0 +1,6 @@
+{
+  "watch": ["src/server/socket"],
+  "ext": "ts,json",
+  "ignore": ["src/**/*.spec.ts"],
+  "exec": "pnpm tsx ./src/server/socket/server.ts"
+}
--- a/package.json
+++ b/package.json
@ -4,19 +4,21 @@
  "private": true,
  "type": "module",
  "scripts": {
+    "dev:socket": "pnpm nodemon ./src/server/socket/server.ts",
+    "dev": "concurrently \"pnpm next dev --turbo\" \"pnpm dev:socket\"",
    "build": "next build",
+    "start": "next start",
+    "start:socket": "node ./dist/src/server/socket/server.js",
    "check": "next lint && tsc --noEmit",
    "db:generate": "drizzle-kit generate",
    "db:migrate": "drizzle-kit migrate",
    "db:push": "drizzle-kit push",
    "db:studio": "drizzle-kit studio",
-    "dev": "next dev --turbo",
    "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
    "format:write": "prettier --write \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
    "lint": "next lint",
    "lint:fix": "next lint --fix",
    "preview": "next build && next start",
-    "start": "next start",
    "typecheck": "tsc --noEmit"
  },
  "dependencies": {
@ -46,12 +48,14 @@
    "@trpc/client": "^11.0.0-rc.446",
    "@trpc/react-query": "^11.0.0-rc.446",
    "@trpc/server": "^11.0.0-rc.446",
+    "@types/express": "^5.0.1",
    "argon2": "^0.41.1",
    "cheerio": "^1.0.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.0",
    "drizzle-orm": "^0.33.0",
+    "express": "^4.21.2",
    "geist": "^1.3.0",
    "lucide-react": "^0.477.0",
    "next": "^15.0.1",
@ -64,6 +68,8 @@
    "react-hook-form": "^7.54.2",
    "react-textarea-autosize": "^8.5.7",
    "server-only": "^0.0.1",
+    "socket.io": "^4.8.1",
+    "socket.io-client": "^4.8.1",
    "sonner": "^2.0.1",
    "superjson": "^2.2.1",
    "tailwind-merge": "^3.0.2",
@ -71,7 +77,8 @@
    "tiptap-extension-resize-image": "^1.2.1",
    "use-debounce": "^10.0.4",
    "winston": "^3.17.0",
-    "zod": "^3.24.2"
+    "zod": "^3.24.2",
+    "zustand": "^5.0.3"
  },
  "devDependencies": {
    "@types/eslint": "^8.56.10",
@ -80,16 +87,17 @@
    "@types/react-dom": "^18.3.0",
    "@typescript-eslint/eslint-plugin": "^8.1.0",
    "@typescript-eslint/parser": "^8.1.0",
+    "concurrently": "^9.1.2",
    "dotenv": "^16.4.7",
    "drizzle-kit": "^0.24.0",
    "eslint": "^8.57.0",
    "eslint-config-next": "^15.0.1",
    "eslint-plugin-drizzle": "^0.2.3",
+    "nodemon": "^3.1.9",
    "postcss": "^8.4.39",
    "prettier": "^3.3.2",
    "prettier-plugin-tailwindcss": "^0.6.5",
    "tailwindcss": "^3.4.3",
-    "ts-node": "^10.9.2",
    "tsx": "^4.19.3",
    "typescript": "^5.5.3"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/app/(PAGES)/artikel/[slug]/page.tsx
+++ b/src/app/(PAGES)/artikel/[slug]/page.tsx
@ -1,76 +1,42 @@
-import BreadNavigator from "@/components/bread-navigator";
+import React from "react";
+import { notFound } from "next/navigation";
+import { auth } from "@/server/auth";
+import { api } from "@/trpc/server";
+import { hasPermission, Role } from "@/lib/validation/permissions";
+import { appRoutes } from "@/config";
+
+import Link from "next/link";
 import RenderContent from "@/components/editor/render-content";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
-import { appRoutes } from "@/config";
-import { hasPermission, Role } from "@/lib/validation/permissions";
-import { auth } from "@/server/auth";
-import { api } from "@/trpc/server";
-import { Edit, Edit2Icon, Edit3, MoreVertical, Trash } from "lucide-react";
-import Link from "next/link";
-import { notFound } from "next/navigation";
-import React from "react";
+import { Edit, MoreVertical } from "lucide-react";
+import CommentSection from "@/components/comment/comment-section";
+import { SocketProvider } from "@/components/socket-context";

 async function Page({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
-  const article = await api.article.get({ slug: slug });
+  const article = await api.article.get({
+    slug: slug,
+    with: { category: true },
+  });
  if (!article) return notFound();
  const session = await auth();
  const isEditor = session?.user
    ? hasPermission(session.user.role, Role.EDITOR)
    : false;
  return (
-    <div className="">
-      {/* <div className="flex w-full items-center justify-between">
-        <div className="flex w-full items-center gap-4">
-          <BreadNavigator
-            className="w-full"
-            links={[
-              ...(article?.category
-                ? [
-                    {
-                      label: article.category.name!,
-                      href: appRoutes.category(article.category.slug),
-                    },
-                  ]
-                : []),
-              { label: "Artikel", href: appRoutes.allArticles },
-              { label: article.title!, href: appRoutes.article(article.slug) },
-            ]}
-          />
-        </div>
-      </div> */}
-      <div className="flex w-full flex-col gap-4 xl:flex-row">
-        <div className="w-full space-y-4">
-          <h1 className="text-4xl font-bold">{article.title}</h1>
-          <div className="w-full">
-            {article.content && <RenderContent content={article.content} />}
-          </div>
-        </div>
-        <Separator
-          orientation="vertical"
-          className="sticky top-0 hidden h-screen -translate-y-4 xl:block"
-        />
-        <div
-          className={
-            "top-4 h-max w-full max-w-xl space-y-4 xl:sticky xl:max-w-sm"
-          }
-        >
-          <div className="relative min-h-96 w-full space-y-4 overflow-hidden rounded-md border bg-background p-4">
-            <p className="text-center text-muted-foreground">
-              Kommentare bald verfügbar
-            </p>
-          </div>
-          {isEditor && (
-            <div className="flex w-full items-center justify-end space-x-2">
-              <Badge
-                className="size-max"
-                variant={article.published ? "outline" : "destructive"}
-              >
-                {article.published ? "Veröffentlicht" : "Draft"}
-              </Badge>
+    <SocketProvider>
+      <div className="w-full max-w-reader px-12">
+        {isEditor && (
+          <div className="flex w-full items-center">
+            <Badge
+              className="size-max"
+              variant={article.published ? "outline" : "destructive"}
+            >
+              {article.published ? "Veröffentlicht" : "Draft"}
+            </Badge>

+            <div className="flex w-full justify-end gap-2">
              <Button asChild variant={"outline"}>
                <Link href={appRoutes.editArticle(article.slug)}>
                  <Edit className="size-4" />
@ -81,10 +47,21 @@ async function Page({ params }: { params: Promise<{ slug: string }> }) {
                <MoreVertical className="size-4" />
              </Button>
            </div>
-          )}
+          </div>
+        )}
+        <div className="flex w-full flex-col gap-4">
+          <div className="w-full space-y-4">
+            <h1 className="text-4xl font-bold">{article.title}</h1>
+            <div className="w-full">
+              {article.content && <RenderContent content={article.content} />}
+            </div>
+          </div>
+          <CommentSection articleId={article.id} />
        </div>
+
+        <div className="flex h-64 items-center justify-center">empty</div>
      </div>
-    </div>
+    </SocketProvider>
  );
 }

--- a/src/app/(PAGES)/layout.tsx
+++ b/src/app/(PAGES)/layout.tsx
@ -1,5 +1,7 @@
+import GlobalDialog from "@/components/global-dialog";
 import { AppSidebar } from "@/components/layout/app-sidebar";
 import Navbar from "@/components/layout/navbar";
+import { SessionProvider } from "@/components/session-provider";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import { auth } from "@/server/auth";
 import { api, HydrateClient } from "@/trpc/server";
@ -11,13 +13,16 @@ async function Layout({ children }: { children: React.ReactNode }) {

  return (
    <HydrateClient>
-      <SidebarProvider>
-        <AppSidebar user={session?.user} />
-        <div className="h-screen w-full bg-background">
-          <Navbar />
-          <main className="space-y-4 p-4">{children}</main>
-        </div>
-      </SidebarProvider>
+      <SessionProvider session={session}>
+        <GlobalDialog />
+        <SidebarProvider>
+          <AppSidebar user={session?.user} />
+          <div className="h-screen w-full bg-background">
+            <Navbar />
+            <main className="space-y-4 p-4">{children}</main>
+          </div>
+        </SidebarProvider>
+      </SessionProvider>
    </HydrateClient>
  );
 }
--- a/src/components/article/grid/infinite-article-grid.tsx
+++ b/src/components/article/grid/infinite-article-grid.tsx
@ -4,7 +4,7 @@ import { api } from "@/trpc/react";
 import React from "react";
 import { ARTICLE_GRID_CLASS } from "./article-grid";
 import ArticleCard from "../article-card";
-import { useInfiniteItemsObserver } from "@/lib/hooks/infinite-items-observer-hook";
+import { useInfiniteItemsObserver } from "@/lib/hooks/use-infinite-observer-hook";
 import { Skeleton } from "@/components/ui/skeleton";
 import ArticleFilterBar, { ArticleFilter } from "../article-filter-bar";
 import { Article } from "@/server/db/schema";
--- a/src/components/category/grid/infinite-category-grid.tsx
+++ b/src/components/category/grid/infinite-category-grid.tsx
@ -4,7 +4,7 @@ import { api } from "@/trpc/react";
 import React from "react";

 import CategoryCard from "../category-card";
-import { useInfiniteItemsObserver } from "@/lib/hooks/infinite-items-observer-hook";
+import { useInfiniteItemsObserver } from "@/lib/hooks/use-infinite-observer-hook";
 import { Skeleton } from "@/components/ui/skeleton";
 import { CATEGORY_GRID_CLASS } from "./category-grid";
 import CategoryFilterBar, { CategoryFilter } from "../category-filter-bar";
--- a/src/components/comment/comment-delete-button.tsx
+++ b/src/components/comment/comment-delete-button.tsx
@ -0,0 +1,40 @@
+import React from "react";
+import { Button } from "../ui/button";
+import { Trash } from "lucide-react";
+import { api } from "@/trpc/react";
+import { toast } from "sonner";
+import { DELETE_COMMENT_EVENT } from "@/server/socket/event-const";
+import { useSocket } from "../socket-context";
+
+function CommentDeleteButton({ commentId }: { commentId: string }) {
+  const { socket } = useSocket();
+  const [loading, setLoading] = React.useState(false);
+  const { mutate } = api.comment.delete.useMutation({
+    onSuccess: (comment) => {
+      setLoading(false);
+      socket?.emit(DELETE_COMMENT_EVENT, comment?.id, comment?.articleId);
+
+      toast.success("Kommentar gelöscht.");
+    },
+    onError: () => {
+      setLoading(false);
+      toast.error("Etwas ist schief gelaufen.");
+    },
+  });
+  const handleClick = () => {
+    setLoading(true);
+    mutate({ commentId });
+  };
+  return (
+    <Button
+      disabled={loading}
+      onClick={handleClick}
+      size={"tiny"}
+      className="bg-destructive/20 text-destructive hover:bg-destructive hover:text-destructive-foreground"
+    >
+      <Trash className="size-4" />
+    </Button>
+  );
+}
+
+export default CommentDeleteButton;
--- a/src/components/comment/comment-form.tsx
+++ b/src/components/comment/comment-form.tsx
@ -0,0 +1,132 @@
+"use client";
+import React from "react";
+import { Comment } from "@/server/db/schema";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/components/ui/form";
+import { commentSchema } from "@/lib/validation/zod/comment";
+import CommentEditor from "../editor/comment-editor";
+import { toast } from "sonner";
+import { EditorInstance } from "novel";
+import { XIcon } from "lucide-react";
+import { useSocket } from "../socket-context";
+import { ADD_COMMENT_EVENT } from "@/server/socket/event-const";
+import { api } from "@/trpc/react";
+
+function CommentForm({
+  articleId,
+  parentComment,
+  removeReplyComment,
+  commentRefs,
+}: {
+  articleId: string;
+  parentComment?: Comment;
+  commentRefs: React.MutableRefObject<Map<string, HTMLDivElement | null>>;
+  removeReplyComment: () => void;
+}) {
+  const [loading, setLoading] = React.useState(false);
+  const { mutate } = api.comment.create.useMutation({
+    onSuccess: (comment) => {
+      setLoading(false);
+      socket?.emit(ADD_COMMENT_EVENT, comment);
+      toast.success("Kommentar hinzugefügt.");
+      setTimeout(() => {
+        const el = commentRefs.current.get(comment?.id!);
+        el?.scrollIntoView({
+          behavior: "smooth",
+          block: "start",
+        });
+        el?.classList.add("animate-fade-in");
+      }, 500);
+    },
+    onError: () => {
+      setLoading(false);
+      toast.error("Etwas ist schief gelaufen.");
+    },
+  });
+  const { socket } = useSocket();
+  const form = useForm<z.infer<typeof commentSchema>>({
+    resolver: zodResolver(commentSchema),
+    defaultValues: {
+      parentId: parentComment?.id ?? "",
+      content: undefined,
+    },
+  });
+  const editorRef = React.useRef<EditorInstance | null>(null);
+  const editor = editorRef.current;
+
+  async function onSubmit(values: z.infer<typeof commentSchema>) {
+    setLoading(true);
+    mutate({ comment: { ...values, parentId: parentComment?.id }, articleId });
+
+    form.reset();
+    editor?.commands?.clearContent();
+    removeReplyComment();
+  }
+
+  React.useEffect(() => {
+    if (parentComment) editor?.commands?.focus();
+  }, [parentComment]);
+
+  return (
+    <>
+      {parentComment && (
+        <div className="flex items-center gap-1">
+          <Button
+            className="size-max p-1"
+            variant={"ghost"}
+            onClick={removeReplyComment}
+          >
+            <XIcon className="size-4" />
+          </Button>
+          <p>answer comment</p>
+        </div>
+      )}
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="rounded-md bg-muted p-4"
+        >
+          <FormField
+            control={form.control}
+            name="content"
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <CommentEditor
+                    setEditor={(editor) => {
+                      editorRef.current = editor;
+                    }}
+                    initialContent={field.value}
+                    onContentChange={field.onChange}
+                  >
+                    <Button
+                      type="submit"
+                      className="ml-auto h-max py-1"
+                      size="sm"
+                      disabled={loading || !form.formState.isDirty}
+                    >
+                      Absenden
+                    </Button>
+                  </CommentEditor>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </form>
+      </Form>
+    </>
+  );
+}
+
+export default CommentForm;
--- a/src/components/comment/comment-list.tsx
+++ b/src/components/comment/comment-list.tsx
@ -0,0 +1,33 @@
+import { CommentNode, Comment as CommentType } from "@/server/db/schema";
+import React from "react";
+import { buildCommentTree } from "@/lib/utils/comments";
+import Comment from "./comment";
+import { useSession } from "../session-provider";
+
+export const CommentList = React.memo(function ({
+  comments,
+  setReplyComment,
+  commentRefs,
+}: {
+  comments: Array<CommentType>;
+  setReplyComment: (comment: CommentNode) => void;
+  commentRefs: React.MutableRefObject<Map<string, HTMLDivElement | null>>;
+}) {
+  const { session } = useSession();
+  const commentTree = buildCommentTree(comments);
+
+  return (
+    <ul className="flex flex-col gap-4">
+      {commentTree.map((comment) => (
+        <Comment
+          key={comment.id}
+          session={session}
+          comment={comment}
+          setReplyComment={setReplyComment}
+          setRef={(el) => commentRefs.current.set(comment.id, el)}
+        />
+      ))}
+    </ul>
+  );
+});
+export default CommentList;
--- a/src/components/comment/comment-section.tsx
+++ b/src/components/comment/comment-section.tsx
@ -0,0 +1,76 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import CommentForm from "@/components/comment/comment-form";
+import CommentList from "@/components/comment/comment-list";
+import { CommentNode } from "@/server/db/schema";
+import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
+import { useComments } from "@/lib/hooks/use-comments-hook";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { useSocket } from "../socket-context";
+import { JOIN_ROOM_EVENT } from "@/server/socket/event-const";
+import { useSession } from "../session-provider";
+import { LogIn } from "lucide-react";
+
+function CommentSection({ articleId }: { articleId: string }) {
+  const { comments } = useComments(articleId);
+  const { session } = useSession();
+  const [replyComment, setReplyComment] = useState<CommentNode | undefined>();
+  const commentRefs = useRef<Map<string, HTMLDivElement | null>>(new Map());
+  const { socket } = useSocket();
+  useEffect(() => {
+    if (!socket) return;
+    console.log("RERUN COMMENT SECTION");
+
+    socket.emit(JOIN_ROOM_EVENT, articleId);
+    return () => {
+      socket.disconnect();
+    };
+  }, [socket]);
+
+  return (
+    <div className="space-y-4">
+      <div className="sticky top-0 z-50 bg-background pt-4">
+        {session ? (
+          <CommentForm
+            articleId={articleId}
+            parentComment={replyComment}
+            removeReplyComment={() => setReplyComment(undefined)}
+            commentRefs={commentRefs}
+          />
+        ) : (
+          <Alert className="flex items-center">
+            <LogIn className="size-4" />
+            <AlertTitle>
+              Melde dich an um einen Kommentar zu schreiben
+            </AlertTitle>
+
+            <Button size={"sm"} className="ml-auto">
+              Jetzt Anmelden
+            </Button>
+          </Alert>
+        )}
+      </div>
+
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex items-center gap-2">
+          <h4 className="text-lg font-medium">Kommentare </h4>
+          <Badge>{comments?.length}</Badge>
+        </div>
+        <Button size={"sm"} variant={"outline"}>
+          <span>Sort</span>
+        </Button>
+      </div>
+
+      {comments && (
+        <CommentList
+          comments={comments}
+          commentRefs={commentRefs}
+          setReplyComment={setReplyComment}
+        />
+      )}
+    </div>
+  );
+}
+
+export default CommentSection;
--- a/src/components/comment/comment-vote-button.tsx
+++ b/src/components/comment/comment-vote-button.tsx
@ -0,0 +1,23 @@
+import React from "react";
+import { Button } from "../ui/button";
+import { ThumbsDown, ThumbsUp } from "lucide-react";
+
+function CommentVoteButton({
+  vote,
+  commentId,
+}: {
+  vote: boolean;
+  commentId: string;
+}) {
+  return (
+    <Button className="size-max p-1" variant={"ghost"}>
+      {vote ? (
+        <ThumbsUp className="size-4" />
+      ) : (
+        <ThumbsDown className="size-4" />
+      )}
+    </Button>
+  );
+}
+
+export default CommentVoteButton;
--- a/src/components/comment/comment.tsx
+++ b/src/components/comment/comment.tsx
@ -0,0 +1,102 @@
+import React from "react";
+import { CommentNode } from "@/server/db/schema";
+import Avatar from "../avatar";
+import { formatCommentDate } from "@/lib/utils/format";
+import { Button } from "../ui/button";
+import CommentEditor from "../editor/comment-editor";
+import CommentVoteButton from "./comment-vote-button";
+import { Session } from "next-auth";
+import { Badge } from "../ui/badge";
+import CommentDeleteButton from "./comment-delete-button";
+import { cn } from "@/lib/utils";
+import { useGlobalDialogStore } from "@/lib/store/use-global-dialog";
+
+const Comment = React.memo(
+  (props: {
+    comment: CommentNode;
+    setReplyComment: (comment: CommentNode) => void;
+    setRef: (el: HTMLDivElement | null) => void;
+    session: Session | null;
+    level?: number;
+  }) => {
+    const { comment, setReplyComment, setRef, session, level = 0 } = props;
+    const isAuthor = session?.user?.id === comment?.author?.id;
+    const openGlobalDialog = useGlobalDialogStore((state) => state.openDialog);
+    const handleReplyClick = () => {
+      if (!session)
+        openGlobalDialog({
+          title: "Du bist nicht angemeldet",
+          message:
+            "Um auf einen Kommentar zu antworten, musst du dich anmelden.",
+          action: "/api/auth/signin",
+          actionText: "Jetzt Anmelden",
+        });
+      else setReplyComment(comment);
+    };
+    return (
+      <div
+        className={cn(
+          level > 0 && "ml-4 border-l",
+          comment?.children?.length && "border-l",
+          comment?.missingParent && "border-l",
+        )}
+      >
+        {comment.missingParent && (
+          <div className="p-4 pt-0 text-sm italic text-muted-foreground">
+            Antwort auf: Kommentar wurde gelöscht
+          </div>
+        )}
+        <div
+          className="flex items-start gap-2 pl-2 hover:bg-muted"
+          ref={setRef}
+        >
+          <Avatar
+            src={comment.author?.image}
+            fb={comment.author?.name}
+            className="size-8"
+          />
+          <div className="w-full">
+            <div className="flex w-full items-center gap-2">
+              <h5 className="text-lg font-medium capitalize">
+                {comment.author?.name}
+              </h5>
+              {isAuthor && (
+                <Badge variant={"outline"} className="text-xs">
+                  DU
+                </Badge>
+              )}
+              <span className="ml-auto text-xs text-muted-foreground">
+                {formatCommentDate(comment.createdAt)}
+              </span>
+            </div>
+            <CommentEditor readOnly initialContent={comment.content!} />
+            <div className="flex w-full items-center gap-2 pb-6">
+              <CommentVoteButton vote commentId={comment.id} />
+              <CommentVoteButton vote={false} commentId={comment.id} />
+              <Button size={"sm"} variant={"ghost"} onClick={handleReplyClick}>
+                Antworten
+              </Button>
+              <div className="ml-auto">
+                {isAuthor && <CommentDeleteButton commentId={comment.id} />}
+              </div>
+            </div>
+          </div>
+        </div>
+        {comment?.children && comment.children.length > 0 && (
+          <div className="pl-4">
+            {comment.children.map((child, idx) => (
+              <Comment
+                key={child?.id ?? idx}
+                {...props}
+                comment={child as CommentNode}
+                level={level + 1}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+export default Comment;
--- a/src/components/editor/comment-editor.tsx
+++ b/src/components/editor/comment-editor.tsx
@ -0,0 +1,87 @@
+"use client";
+import "./styles/shared.css";
+import {
+  EditorContent,
+  EditorInstance,
+  EditorRoot,
+  JSONContent,
+  Placeholder,
+  StarterKit,
+  TiptapUnderline,
+} from "novel";
+
+import { MenuBar } from "./menu/menu-bar";
+
+const extentions = [
+  TiptapUnderline,
+  StarterKit.configure({
+    blockquote: false,
+    bulletList: false,
+    orderedList: false,
+    code: false,
+    codeBlock: false,
+    horizontalRule: false,
+    listItem: false,
+    heading: {
+      levels: [4, 5],
+    },
+  }),
+  Placeholder.configure({
+    placeholder: "Schreibe einen Kommentar …",
+    emptyNodeClass:
+      "first:before:absolute first:before:text-gray-400 first:before:float-left first:before:content-[attr(data-placeholder)] first:before:pointer-events-none",
+  }),
+];
+
+const CommentEditor = ({
+  children,
+  initialContent,
+  readOnly,
+  onContentChange,
+  setEditor,
+}: {
+  initialContent?: JSONContent;
+  onContentChange?: (content: JSONContent) => void;
+  readOnly?: boolean;
+  children?: React.ReactNode;
+  setEditor?: (editor: EditorInstance) => void;
+}) => {
+  const slotAfter = (
+    <div className="flex items-center justify-between gap-4">
+      {!readOnly && (
+        <MenuBar
+          className="w-full bg-muted p-0"
+          buttonProps={{
+            className: "size-max p-1 text-xs",
+          }}
+          onlyInline
+        />
+      )}
+      {children}
+    </div>
+  );
+
+  return (
+    <EditorRoot>
+      <EditorContent
+        immediatelyRender={false}
+        slotAfter={slotAfter}
+        extensions={extentions}
+        editorProps={{
+          attributes: {
+            class: !readOnly ? "min-h-12" : "",
+          },
+        }}
+        editable={!readOnly}
+        initialContent={initialContent}
+        onCreate={({ editor }) => {
+          setEditor?.(editor);
+        }}
+        onUpdate={({ editor }) => {
+          onContentChange?.(editor.getJSON());
+        }}
+      />
+    </EditorRoot>
+  );
+};
+export default CommentEditor;
--- a/src/components/editor/index.tsx
+++ b/src/components/editor/index.tsx
@ -1,5 +1,5 @@
 "use client";
-import "./styles.css";
+import "./styles/editor.css";
 import {
  EditorContent,
  EditorRoot,
@ -23,9 +23,14 @@ const Editor = ({
  return (
    <EditorRoot>
      <EditorContent
+        immediatelyRender={false}
+        className="editor"
        slotBefore={!readOnly && <MenuBar />}
        extensions={defaultExtensions}
        editorProps={{
+          attributes: {
+            class: !readOnly ? "min-h-screen " : "",
+          },
          handleDOMEvents: {
            keydown: (_view, event) => handleCommandNavigation(event),
          },
--- a/src/components/editor/menu/bubble-menu.tsx
+++ b/src/components/editor/menu/bubble-menu.tsx
@ -7,7 +7,11 @@ import { LinkSelector } from "../selector/link-selector";
 import { TextButtons } from "../selector/text-buttont";
 import { ColorSelector } from "../selector/color-selector";

-const BubbleMenu = () => {
+const BubbleMenu = ({
+  hideNodeSelector = false,
+}: {
+  hideNodeSelector?: boolean;
+}) => {
  const { editor } = useEditor();
  const [openNode, setOpenNode] = useState(false);
  const [openColor, setOpenColor] = useState(false);
@ -27,8 +31,12 @@ const BubbleMenu = () => {
    >
      {!open && (
        <Fragment>
-          <NodeSelector open={openNode} onOpenChange={setOpenNode} />
-          <Separator orientation="vertical" />
+          {!hideNodeSelector && (
+            <>
+              <NodeSelector open={openNode} onOpenChange={setOpenNode} />
+              <Separator orientation="vertical" />
+            </>
+          )}
          <LinkSelector open={openLink} onOpenChange={setOpenLink} />
          <Separator orientation="vertical" />
          <TextButtons />
--- a/src/components/editor/menu/menu-bar.tsx
+++ b/src/components/editor/menu/menu-bar.tsx
@ -1,26 +1,47 @@
-import { Button } from "@/components/ui/button";
+import { Button, ButtonProps } from "@/components/ui/button";
 import { useEditor } from "novel";
 import { RedoIcon, UndoIcon } from "lucide-react";
-import { selectionItems } from "../selector/selection-items";
+import {
+  inlineSelectorItems,
+  selectionItems,
+} from "../selector/selection-items";
+import { cn } from "@/lib/utils";

-export const MenuBar = () => {
+export const MenuBar = ({
+  onlyInline = false,
+  className,
+  buttonProps,
+}: {
+  onlyInline?: boolean;
+  className?: string;
+  buttonProps?: ButtonProps;
+}) => {
  const { editor } = useEditor();

  if (!editor) {
    return null;
  }
-
+  const items = onlyInline ? inlineSelectorItems : selectionItems;
  return (
-    <div className="sticky top-0 z-50 flex justify-between gap-1 bg-background py-4">
+    <div
+      className={cn(
+        "sticky top-0 z-50 flex justify-between gap-1 bg-background py-4",
+        className,
+      )}
+    >
      <div className="flex flex-wrap gap-1">
-        {selectionItems.map((item) => (
+        {items.map((item) => (
          <Button
            key={item.name}
            size={"icon"}
            variant={"outline"}
            onClick={() => item.command(editor)}
            disabled={item?.canRun ? item.canRun(editor) : false}
-            className={item.isActive(editor) ? "border-foreground/75" : ""}
+            {...buttonProps}
+            className={cn(
+              item.isActive(editor) && "border-foreground/75",
+              buttonProps?.className,
+            )}
          >
            <item.icon />
          </Button>
@ -32,6 +53,7 @@ export const MenuBar = () => {
          size={"icon"}
          onClick={() => editor.chain().focus().undo().run()}
          disabled={!editor.can().chain().focus().undo().run()}
+          {...buttonProps}
        >
          <UndoIcon className="size-4" />
        </Button>
@ -40,6 +62,7 @@ export const MenuBar = () => {
          size={"icon"}
          onClick={() => editor.chain().focus().redo().run()}
          disabled={!editor.can().chain().focus().redo().run()}
+          {...buttonProps}
        >
          <RedoIcon className="size-4" />
        </Button>
--- a/src/components/editor/selector/selection-items.tsx
+++ b/src/components/editor/selector/selection-items.tsx
@ -26,7 +26,7 @@ export type SelectorItem = {
  canRun?: (editor: EditorInstance) => boolean;
 };

-export const selectionItems: SelectorItem[] = [
+export const inlineSelectorItems: SelectorItem[] = [
  {
    name: "bold",
    isActive: (editor) => editor.isActive("bold"),
@ -59,6 +59,10 @@ export const selectionItems: SelectorItem[] = [
    inline: true,
    canRun: (editor) => !editor.can().chain().focus().toggleStrike().run(),
  },
+];
+
+export const selectionItems: SelectorItem[] = [
+  ...inlineSelectorItems,

  // blocks
  {
--- a/src/components/editor/styles/editor.css
+++ b/src/components/editor/styles/editor.css
@ -0,0 +1,49 @@
+@import url("./shared.css");
+
+.ProseMirror {
+  /* min-height: 100vh;
+  width: 100%; */
+}
+
+.tiptap ul li p,
+.tiptap ol li p {
+  margin: 0.75rem 0;
+}
+
+ul[data-type="taskList"] li > label input[type="checkbox"] {
+  @apply size-4 border border-border bg-muted;
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+  margin-bottom: 0.75rem;
+  margin-top: 0.75rem;
+  cursor: pointer;
+  position: relative;
+  transform: translateY(0.17rem);
+  display: grid;
+  border-radius: 0.25rem;
+  place-content: center;
+}
+
+ul[data-type="taskList"] li > label input[type="checkbox"]::before {
+  content: "";
+  width: 0.65em;
+  height: 0.65em;
+  transform: scale(0);
+  transition: 120ms transform ease-in-out;
+  box-shadow: inset 1em 1em;
+  transform-origin: center;
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+}
+ul[data-type="taskList"] li > label input[type="checkbox"]:checked::before {
+  transform: scale(1);
+}
+ul[data-type="taskList"] li[data-checked="true"] > div > p {
+  @apply text-foreground/75;
+  text-decoration: line-through;
+  text-decoration-thickness: 2px;
+}
+
+img {
+  @apply rounded-md;
+}
--- a/src/components/editor/styles/shared.css
+++ b/src/components/editor/styles/shared.css
@ -3,54 +3,10 @@
  margin-top: 0;
 }

-.ProseMirror {
-  min-height: 100vh;
-  width: 100%;
-}
-
 .ProseMirror:focus {
  outline: none;
 }

-.tiptap ul li p,
-.tiptap ol li p {
-  margin: 0.75rem 0;
-}
-
-ul[data-type="taskList"] li > label input[type="checkbox"] {
-  @apply size-4 border border-border bg-muted;
-  -webkit-appearance: none;
-  appearance: none;
-  margin: 0;
-  margin-bottom: 0.75rem;
-  margin-top: 0.75rem;
-  cursor: pointer;
-  position: relative;
-  transform: translateY(0.17rem);
-  display: grid;
-  border-radius: 0.25rem;
-  place-content: center;
-}
-
-ul[data-type="taskList"] li > label input[type="checkbox"]::before {
-  content: "";
-  width: 0.65em;
-  height: 0.65em;
-  transform: scale(0);
-  transition: 120ms transform ease-in-out;
-  box-shadow: inset 1em 1em;
-  transform-origin: center;
-  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
-}
-ul[data-type="taskList"] li > label input[type="checkbox"]:checked::before {
-  transform: scale(1);
-}
-ul[data-type="taskList"] li[data-checked="true"] > div > p {
-  @apply text-foreground/75;
-  text-decoration: line-through;
-  text-decoration-thickness: 2px;
-}
-
 /* Heading styles */
 .tiptap h1,
 .tiptap h2,
@ -97,10 +53,6 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
  transition-duration: 0s;
 }

-img {
-  @apply rounded-md;
-}
-
 .ProseMirror:not(.dragging) .ProseMirror-selectednode {
  outline: none !important;
  background-color: var(--novel-highlight-blue);
--- a/src/components/global-dialog.tsx
+++ b/src/components/global-dialog.tsx
@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useGlobalDialogStore } from "@/lib/store/use-global-dialog";
+import { Button } from "./ui/button";
+import Link from "next/link";
+
+function GlobalDialog() {
+  const dialog = useGlobalDialogStore((state) => state.globalDialog);
+  const closeDialog = useGlobalDialogStore((state) => state.closeDialog);
+  const actionText = <span>{dialog.actionText}</span>;
+  const actionContent =
+    typeof dialog.action === "string" ? (
+      <Link href={dialog.action!} className="link link-primary">
+        {actionText}
+      </Link>
+    ) : (
+      actionText
+    );
+  return (
+    <Dialog open={dialog.open} onOpenChange={closeDialog}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{dialog.title}</DialogTitle>
+          <DialogDescription>{dialog.message}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant={"outline"} onClick={closeDialog}>
+            Abbrechen
+          </Button>
+          <Button
+            className="btn btn-primary"
+            asChild={typeof dialog.action === "string"}
+          >
+            {actionContent}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default GlobalDialog;
--- a/src/components/session-provider.tsx
+++ b/src/components/session-provider.tsx
@ -0,0 +1,25 @@
+"use client";
+import {
+  SessionProvider as NextAuthProvider,
+  useSession as useNextAuthSession,
+} from "next-auth/react";
+import { Session } from "next-auth";
+
+export function SessionProvider({
+  children,
+  session,
+}: {
+  children: React.ReactNode;
+  session: Session | null;
+}) {
+  return <NextAuthProvider session={session}>{children}</NextAuthProvider>;
+}
+
+export const useSession = () => {
+  const session = useNextAuthSession();
+  return {
+    session: session.data,
+    status: session.status,
+    update: session.update,
+  };
+};
--- a/src/components/socket-context.tsx
+++ b/src/components/socket-context.tsx
@ -0,0 +1,41 @@
+"use client";
+import { getSocket } from "@/lib/hooks/use-socket";
+import React from "react";
+import { Socket } from "socket.io-client";
+
+type SocketContextValues = {
+  socket?: Socket;
+};
+
+export const SocketContext = React.createContext<
+  SocketContextValues | undefined
+>(undefined);
+
+export const SocketProvider = ({ children }: { children: React.ReactNode }) => {
+  const [socket, setSocket] = React.useState<Socket | undefined>();
+
+  React.useEffect(() => {
+    // Initialize the socket when the provider mounts
+    const newSocket = getSocket();
+    setSocket(newSocket);
+    console.log("Socket connected");
+
+    // Cleanup function to disconnect the socket when the provider unmounts
+    return () => {
+      newSocket.disconnect();
+      console.log("Socket disconnected");
+    };
+  }, []);
+
+  return (
+    <SocketContext.Provider value={{ socket }}>
+      {children}
+    </SocketContext.Provider>
+  );
+};
+
+export const useSocket = () => {
+  const context = React.useContext(SocketContext);
+
+  return { socket: context?.socket };
+};
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@ -1,16 +1,16 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";

-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";

-const AlertDialog = AlertDialogPrimitive.Root
+const AlertDialog = AlertDialogPrimitive.Root;

-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;

-const AlertDialogPortal = AlertDialogPrimitive.Portal
+const AlertDialogPortal = AlertDialogPrimitive.Portal;

 const AlertDialogOverlay = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
@ -19,13 +19,13 @@ const AlertDialogOverlay = React.forwardRef<
  <AlertDialogPrimitive.Overlay
    className={cn(
      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
    )}
    {...props}
    ref={ref}
  />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;

 const AlertDialogContent = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Content>,
@ -37,13 +37,13 @@ const AlertDialogContent = React.forwardRef<
      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
+        className,
      )}
      {...props}
    />
  </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;

 const AlertDialogHeader = ({
  className,
@ -52,12 +52,12 @@ const AlertDialogHeader = ({
  <div
    className={cn(
      "flex flex-col space-y-2 text-center sm:text-left",
-      className
+      className,
    )}
    {...props}
  />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";

 const AlertDialogFooter = ({
  className,
@ -66,12 +66,12 @@ const AlertDialogFooter = ({
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
    )}
    {...props}
  />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";

 const AlertDialogTitle = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Title>,
@ -82,8 +82,8 @@ const AlertDialogTitle = React.forwardRef<
    className={cn("text-lg font-semibold", className)}
    {...props}
  />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;

 const AlertDialogDescription = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Description>,
@ -94,9 +94,9 @@ const AlertDialogDescription = React.forwardRef<
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
-))
+));
 AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
+  AlertDialogPrimitive.Description.displayName;

 const AlertDialogAction = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Action>,
@ -107,8 +107,8 @@ const AlertDialogAction = React.forwardRef<
    className={cn(buttonVariants(), className)}
    {...props}
  />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;

 const AlertDialogCancel = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
@ -119,12 +119,12 @@ const AlertDialogCancel = React.forwardRef<
    className={cn(
      buttonVariants({ variant: "outline" }),
      "mt-2 sm:mt-0",
-      className
+      className,
    )}
    {...props}
  />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;

 export {
  AlertDialog,
@ -138,4 +138,4 @@ export {
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
-}
+};
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const alertVariants = cva(
  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
@ -16,8 +16,8 @@ const alertVariants = cva(
    defaultVariants: {
      variant: "default",
    },
-  }
-)
+  },
+);

 const Alert = React.forwardRef<
  HTMLDivElement,
@ -29,8 +29,8 @@ const Alert = React.forwardRef<
    className={cn(alertVariants({ variant }), className)}
    {...props}
  />
-))
-Alert.displayName = "Alert"
+));
+Alert.displayName = "Alert";

 const AlertTitle = React.forwardRef<
  HTMLParagraphElement,
@ -41,8 +41,8 @@ const AlertTitle = React.forwardRef<
    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
    {...props}
  />
-))
-AlertTitle.displayName = "AlertTitle"
+));
+AlertTitle.displayName = "AlertTitle";

 const AlertDescription = React.forwardRef<
  HTMLParagraphElement,
@ -53,7 +53,7 @@ const AlertDescription = React.forwardRef<
    className={cn("text-sm [&_p]:leading-relaxed", className)}
    {...props}
  />
-))
-AlertDescription.displayName = "AlertDescription"
+));
+AlertDescription.displayName = "AlertDescription";

-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertTitle, AlertDescription };
--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@ -1,9 +1,9 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
@ -13,12 +13,12 @@ const Avatar = React.forwardRef<
    ref={ref}
    className={cn(
      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
+      className,
    )}
    {...props}
  />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;

 const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
@ -29,8 +29,8 @@ const AvatarImage = React.forwardRef<
    className={cn("aspect-square h-full w-full", className)}
    {...props}
  />
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;

 const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
@ -40,11 +40,11 @@ const AvatarFallback = React.forwardRef<
    ref={ref}
    className={cn(
      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className
+      className,
    )}
    {...props}
  />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;

-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarImage, AvatarFallback };
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const badgeVariants = cva(
  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@ -20,8 +20,8 @@ const badgeVariants = cva(
    defaultVariants: {
      variant: "default",
    },
-  }
-)
+  },
+);

 export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
@ -30,7 +30,7 @@ export interface BadgeProps
 function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+  );
 }

-export { Badge, badgeVariants }
+export { Badge, badgeVariants };
--- a/src/components/ui/breadcrumb.tsx
+++ b/src/components/ui/breadcrumb.tsx
@ -1,16 +1,16 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const Breadcrumb = React.forwardRef<
  HTMLElement,
  React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode
+    separator?: React.ReactNode;
  }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
-Breadcrumb.displayName = "Breadcrumb"
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";

 const BreadcrumbList = React.forwardRef<
  HTMLOListElement,
@ -20,12 +20,12 @@ const BreadcrumbList = React.forwardRef<
    ref={ref}
    className={cn(
      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      className
+      className,
    )}
    {...props}
  />
-))
-BreadcrumbList.displayName = "BreadcrumbList"
+));
+BreadcrumbList.displayName = "BreadcrumbList";

 const BreadcrumbItem = React.forwardRef<
  HTMLLIElement,
@ -36,16 +36,16 @@ const BreadcrumbItem = React.forwardRef<
    className={cn("inline-flex items-center gap-1.5", className)}
    {...props}
  />
-))
-BreadcrumbItem.displayName = "BreadcrumbItem"
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";

 const BreadcrumbLink = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean
+    asChild?: boolean;
  }
 >(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
+  const Comp = asChild ? Slot : "a";

  return (
    <Comp
@ -53,9 +53,9 @@ const BreadcrumbLink = React.forwardRef<
      className={cn("transition-colors hover:text-foreground", className)}
      {...props}
    />
-  )
-})
-BreadcrumbLink.displayName = "BreadcrumbLink"
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";

 const BreadcrumbPage = React.forwardRef<
  HTMLSpanElement,
@ -69,8 +69,8 @@ const BreadcrumbPage = React.forwardRef<
    className={cn("font-normal text-foreground", className)}
    {...props}
  />
-))
-BreadcrumbPage.displayName = "BreadcrumbPage"
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";

 const BreadcrumbSeparator = ({
  children,
@ -80,13 +80,13 @@ const BreadcrumbSeparator = ({
  <li
    role="presentation"
    aria-hidden="true"
-    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+    className={cn("[&>svg]:h-3.5 [&>svg]:w-3.5", className)}
    {...props}
  >
    {children ?? <ChevronRight />}
  </li>
-)
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";

 const BreadcrumbEllipsis = ({
  className,
@ -101,8 +101,8 @@ const BreadcrumbEllipsis = ({
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More</span>
  </span>
-)
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";

 export {
  Breadcrumb,
@ -112,4 +112,4 @@ export {
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
-}
+};
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@ -25,33 +25,34 @@ const buttonVariants = cva(
        sm: "h-8 rounded-md px-3 text-xs",
        lg: "h-10 rounded-md px-8",
        icon: "h-9 w-9",
+        tiny: "size-max p-1",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
-  }
-)
+  },
+);

 export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }

 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
-    )
-  }
-)
-Button.displayName = "Button"
+    );
+  },
+);
+Button.displayName = "Button";

-export { Button, buttonVariants }
+export { Button, buttonVariants };
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@ -1,10 +1,10 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
@ -14,7 +14,7 @@ const Checkbox = React.forwardRef<
    ref={ref}
    className={cn(
      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
+      className,
    )}
    {...props}
  >
@ -24,7 +24,7 @@ const Checkbox = React.forwardRef<
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;

-export { Checkbox }
+export { Checkbox };
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@ -1,12 +1,12 @@
-"use client"
+"use client";

-import * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";

-import { cn } from "@/lib/utils"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent } from "@/components/ui/dialog";

 const Command = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive>,
@ -16,12 +16,12 @@ const Command = React.forwardRef<
    ref={ref}
    className={cn(
      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
+      className,
    )}
    {...props}
  />
-))
-Command.displayName = CommandPrimitive.displayName
+));
+Command.displayName = CommandPrimitive.displayName;

 const CommandDialog = ({ children, ...props }: DialogProps) => {
  return (
@ -32,8 +32,8 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
        </Command>
      </DialogContent>
    </Dialog>
-  )
-}
+  );
+};

 const CommandInput = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Input>,
@ -45,14 +45,14 @@ const CommandInput = React.forwardRef<
      ref={ref}
      className={cn(
        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
      )}
      {...props}
    />
  </div>
-))
+));

-CommandInput.displayName = CommandPrimitive.Input.displayName
+CommandInput.displayName = CommandPrimitive.Input.displayName;

 const CommandList = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.List>,
@ -63,9 +63,9 @@ const CommandList = React.forwardRef<
    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
    {...props}
  />
-))
+));

-CommandList.displayName = CommandPrimitive.List.displayName
+CommandList.displayName = CommandPrimitive.List.displayName;

 const CommandEmpty = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Empty>,
@ -76,9 +76,9 @@ const CommandEmpty = React.forwardRef<
    className="py-6 text-center text-sm"
    {...props}
  />
-))
+));

-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;

 const CommandGroup = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Group>,
@ -88,13 +88,13 @@ const CommandGroup = React.forwardRef<
    ref={ref}
    className={cn(
      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
+      className,
    )}
    {...props}
  />
-))
+));

-CommandGroup.displayName = CommandPrimitive.Group.displayName
+CommandGroup.displayName = CommandPrimitive.Group.displayName;

 const CommandSeparator = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Separator>,
@ -105,8 +105,8 @@ const CommandSeparator = React.forwardRef<
    className={cn("-mx-1 h-px bg-border", className)}
    {...props}
  />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;

 const CommandItem = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Item>,
@ -115,14 +115,14 @@ const CommandItem = React.forwardRef<
  <CommandPrimitive.Item
    ref={ref}
    className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      className
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className,
    )}
    {...props}
  />
-))
+));

-CommandItem.displayName = CommandPrimitive.Item.displayName
+CommandItem.displayName = CommandPrimitive.Item.displayName;

 const CommandShortcut = ({
  className,
@ -132,13 +132,13 @@ const CommandShortcut = ({
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
+        className,
      )}
      {...props}
    />
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";

 export {
  Command,
@ -150,4 +150,4 @@ export {
  CommandItem,
  CommandShortcut,
  CommandSeparator,
-}
+};
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@ -1,18 +1,18 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;

-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;

-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;

-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;

 const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
@ -21,13 +21,13 @@ const DialogOverlay = React.forwardRef<
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      "fixed inset-0 z-50 bg-black/80 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
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;

 const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
@ -39,7 +39,7 @@ const DialogContent = React.forwardRef<
      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
+        className,
      )}
      {...props}
    >
@ -50,8 +50,8 @@ const DialogContent = React.forwardRef<
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;

 const DialogHeader = ({
  className,
@ -60,12 +60,12 @@ const DialogHeader = ({
  <div
    className={cn(
      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
+      className,
    )}
    {...props}
  />
-)
-DialogHeader.displayName = "DialogHeader"
+);
+DialogHeader.displayName = "DialogHeader";

 const DialogFooter = ({
  className,
@ -74,12 +74,12 @@ const DialogFooter = ({
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
    )}
    {...props}
  />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = "DialogFooter";

 const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
@ -89,12 +89,12 @@ const DialogTitle = React.forwardRef<
    ref={ref}
    className={cn(
      "text-lg font-semibold leading-none tracking-tight",
-      className
+      className,
    )}
    {...props}
  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;

 const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
@ -105,8 +105,8 @@ const DialogDescription = React.forwardRef<
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;

 export {
  Dialog,
@ -119,4 +119,4 @@ export {
  DialogFooter,
  DialogTitle,
  DialogDescription,
-}
+};
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@ -1,27 +1,27 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;

-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;

-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;

-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;

-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;

-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;

 const DropdownMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
  }
 >(({ className, inset, children, ...props }, ref) => (
  <DropdownMenuPrimitive.SubTrigger
@ -29,16 +29,16 @@ const DropdownMenuSubTrigger = React.forwardRef<
    className={cn(
      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      inset && "pl-8",
-      className
+      className,
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto" />
  </DropdownMenuPrimitive.SubTrigger>
-))
+));
 DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+  DropdownMenuPrimitive.SubTrigger.displayName;

 const DropdownMenuSubContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@ -48,13 +48,13 @@ const DropdownMenuSubContent = React.forwardRef<
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      className,
    )}
    {...props}
  />
-))
+));
 DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+  DropdownMenuPrimitive.SubContent.displayName;

 const DropdownMenuContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@ -67,18 +67,18 @@ const DropdownMenuContent = React.forwardRef<
      className={cn(
        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
        "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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        className,
      )}
      {...props}
    />
  </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;

 const DropdownMenuItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
  }
 >(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Item
@ -86,12 +86,12 @@ const DropdownMenuItem = React.forwardRef<
    className={cn(
      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
      inset && "pl-8",
-      className
+      className,
    )}
    {...props}
  />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;

 const DropdownMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@ -101,7 +101,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
    )}
    checked={checked}
    {...props}
@ -113,9 +113,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
    </span>
    {children}
  </DropdownMenuPrimitive.CheckboxItem>
-))
+));
 DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+  DropdownMenuPrimitive.CheckboxItem.displayName;

 const DropdownMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@ -125,7 +125,7 @@ const DropdownMenuRadioItem = React.forwardRef<
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
    )}
    {...props}
  >
@ -136,13 +136,13 @@ const DropdownMenuRadioItem = React.forwardRef<
    </span>
    {children}
  </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;

 const DropdownMenuLabel = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
  }
 >(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Label
@ -150,12 +150,12 @@ const DropdownMenuLabel = React.forwardRef<
    className={cn(
      "px-2 py-1.5 text-sm font-semibold",
      inset && "pl-8",
-      className
+      className,
    )}
    {...props}
  />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;

 const DropdownMenuSeparator = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@ -166,8 +166,8 @@ const DropdownMenuSeparator = React.forwardRef<
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;

 const DropdownMenuShortcut = ({
  className,
@ -178,9 +178,9 @@ const DropdownMenuShortcut = ({
      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
      {...props}
    />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";

 export {
  DropdownMenu,
@ -198,4 +198,4 @@ export {
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
-}
+};
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@ -1,8 +1,8 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
 import {
  Controller,
  FormProvider,
@ -10,27 +10,27 @@ import {
  type ControllerProps,
  type FieldPath,
  type FieldValues,
-} from "react-hook-form"
+} from "react-hook-form";

-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";

-const Form = FormProvider
+const Form = FormProvider;

 type FormFieldContextValue<
  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName
-}
+  name: TName;
+};

 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
+  {} as FormFieldContextValue,
+);

 const FormField = <
  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
  ...props
 }: ControllerProps<TFieldValues, TName>) => {
@ -38,21 +38,21 @@ const FormField = <
    <FormFieldContext.Provider value={{ name: props.name }}>
      <Controller {...props} />
    </FormFieldContext.Provider>
-  )
-}
+  );
+};

 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState, formState } = useFormContext()
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();

-  const fieldState = getFieldState(fieldContext.name, formState)
+  const fieldState = getFieldState(fieldContext.name, formState);

  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
+    throw new Error("useFormField should be used within <FormField>");
  }

-  const { id } = itemContext
+  const { id } = itemContext;

  return {
    id,
@ -61,36 +61,36 @@ const useFormField = () => {
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState,
-  }
-}
+  };
+};

 type FormItemContextValue = {
-  id: string
-}
+  id: string;
+};

 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
+  {} as FormItemContextValue,
+);

 const FormItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const id = React.useId()
+  const id = React.useId();

  return (
    <FormItemContext.Provider value={{ id }}>
      <div ref={ref} className={cn("space-y-2", className)} {...props} />
    </FormItemContext.Provider>
-  )
-})
-FormItem.displayName = "FormItem"
+  );
+});
+FormItem.displayName = "FormItem";

 const FormLabel = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
+  const { error, formItemId } = useFormField();

  return (
    <Label
@ -99,15 +99,16 @@ const FormLabel = React.forwardRef<
      htmlFor={formItemId}
      {...props}
    />
-  )
-})
-FormLabel.displayName = "FormLabel"
+  );
+});
+FormLabel.displayName = "FormLabel";

 const FormControl = React.forwardRef<
  React.ElementRef<typeof Slot>,
  React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();

  return (
    <Slot
@ -121,15 +122,15 @@ const FormControl = React.forwardRef<
      aria-invalid={!!error}
      {...props}
    />
-  )
-})
-FormControl.displayName = "FormControl"
+  );
+});
+FormControl.displayName = "FormControl";

 const FormDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
+  const { formDescriptionId } = useFormField();

  return (
    <p
@ -138,19 +139,19 @@ const FormDescription = React.forwardRef<
      className={cn("text-[0.8rem] text-muted-foreground", className)}
      {...props}
    />
-  )
-})
-FormDescription.displayName = "FormDescription"
+  );
+});
+FormDescription.displayName = "FormDescription";

 const FormMessage = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message ?? "") : children
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : children;

  if (!body) {
-    return null
+    return null;
  }

  return (
@ -162,9 +163,9 @@ const FormMessage = React.forwardRef<
    >
      {body}
    </p>
-  )
-})
-FormMessage.displayName = "FormMessage"
+  );
+});
+FormMessage.displayName = "FormMessage";

 export {
  useFormField,
@ -175,4 +176,4 @@ export {
  FormDescription,
  FormMessage,
  FormField,
-}
+};
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
  ({ className, type, ...props }, ref) => {
@ -9,14 +9,14 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
        type={type}
        className={cn(
          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className
+          className,
        )}
        ref={ref}
        {...props}
      />
-    )
-  }
-)
-Input.displayName = "Input"
+    );
+  },
+);
+Input.displayName = "Input";

-export { Input }
+export { Input };
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@ -1,14 +1,14 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);

 const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
@ -20,7 +20,7 @@ const Label = React.forwardRef<
    className={cn(labelVariants(), className)}
    {...props}
  />
-))
-Label.displayName = LabelPrimitive.Root.displayName
+));
+Label.displayName = LabelPrimitive.Root.displayName;

-export { Label }
+export { Label };
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@ -1,15 +1,15 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

-const Popover = PopoverPrimitive.Root
+const Popover = PopoverPrimitive.Root;

-const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverTrigger = PopoverPrimitive.Trigger;

-const PopoverAnchor = PopoverPrimitive.Anchor
+const PopoverAnchor = PopoverPrimitive.Anchor;

 const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
@ -22,12 +22,12 @@ const PopoverContent = React.forwardRef<
      sideOffset={sideOffset}
      className={cn(
        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        className,
      )}
      {...props}
    />
  </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;

-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@ -1,16 +1,16 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;

-const SelectGroup = SelectPrimitive.Group
+const SelectGroup = SelectPrimitive.Group;

-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;

 const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
@ -19,8 +19,8 @@ const SelectTrigger = React.forwardRef<
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1",
+      className,
    )}
    {...props}
  >
@ -29,8 +29,8 @@ const SelectTrigger = React.forwardRef<
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;

 const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
@ -40,14 +40,14 @@ const SelectScrollUpButton = React.forwardRef<
    ref={ref}
    className={cn(
      "flex cursor-default items-center justify-center py-1",
-      className
+      className,
    )}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;

 const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@ -57,15 +57,15 @@ const SelectScrollDownButton = React.forwardRef<
    ref={ref}
    className={cn(
      "flex cursor-default items-center justify-center py-1",
-      className
+      className,
    )}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
-))
+));
 SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
+  SelectPrimitive.ScrollDownButton.displayName;

 const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
@ -78,7 +78,7 @@ const SelectContent = React.forwardRef<
        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        position === "popper" &&
          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
+        className,
      )}
      position={position}
      {...props}
@ -88,7 +88,7 @@ const SelectContent = React.forwardRef<
        className={cn(
          "p-1",
          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
        )}
      >
        {children}
@ -96,8 +96,8 @@ const SelectContent = React.forwardRef<
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;

 const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
@ -108,8 +108,8 @@ const SelectLabel = React.forwardRef<
    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
    {...props}
  />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;

 const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
@ -119,7 +119,7 @@ const SelectItem = React.forwardRef<
    ref={ref}
    className={cn(
      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
    )}
    {...props}
  >
@ -130,8 +130,8 @@ const SelectItem = React.forwardRef<
    </span>
    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;

 const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
@ -142,8 +142,8 @@ const SelectSeparator = React.forwardRef<
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;

 export {
  Select,
@ -156,4 +156,4 @@ export {
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
-}
+};
--- a/src/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@ -1,9 +1,9 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
@ -11,7 +11,7 @@ const Separator = React.forwardRef<
 >(
  (
    { className, orientation = "horizontal", decorative = true, ...props },
-    ref
+    ref,
  ) => (
    <SeparatorPrimitive.Root
      ref={ref}
@ -20,12 +20,12 @@ const Separator = React.forwardRef<
      className={cn(
        "shrink-0 bg-border",
        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
+        className,
      )}
      {...props}
    />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;

-export { Separator }
+export { Separator };
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@ -1,19 +1,19 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

-const Sheet = SheetPrimitive.Root
+const Sheet = SheetPrimitive.Root;

-const SheetTrigger = SheetPrimitive.Trigger
+const SheetTrigger = SheetPrimitive.Trigger;

-const SheetClose = SheetPrimitive.Close
+const SheetClose = SheetPrimitive.Close;

-const SheetPortal = SheetPrimitive.Portal
+const SheetPortal = SheetPrimitive.Portal;

 const SheetOverlay = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Overlay>,
@ -21,14 +21,14 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <SheetPrimitive.Overlay
    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
    )}
    {...props}
    ref={ref}
  />
-))
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;

 const sheetVariants = cva(
  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
@ -46,8 +46,8 @@ const sheetVariants = cva(
    defaultVariants: {
      side: "right",
    },
-  }
-)
+  },
+);

 interface SheetContentProps
  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
@ -71,8 +71,8 @@ const SheetContent = React.forwardRef<
      {children}
    </SheetPrimitive.Content>
  </SheetPortal>
-))
-SheetContent.displayName = SheetPrimitive.Content.displayName
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;

 const SheetHeader = ({
  className,
@ -81,12 +81,12 @@ const SheetHeader = ({
  <div
    className={cn(
      "flex flex-col space-y-2 text-center sm:text-left",
-      className
+      className,
    )}
    {...props}
  />
-)
-SheetHeader.displayName = "SheetHeader"
+);
+SheetHeader.displayName = "SheetHeader";

 const SheetFooter = ({
  className,
@ -95,12 +95,12 @@ const SheetFooter = ({
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
    )}
    {...props}
  />
-)
-SheetFooter.displayName = "SheetFooter"
+);
+SheetFooter.displayName = "SheetFooter";

 const SheetTitle = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Title>,
@ -111,8 +111,8 @@ const SheetTitle = React.forwardRef<
    className={cn("text-lg font-semibold text-foreground", className)}
    {...props}
  />
-))
-SheetTitle.displayName = SheetPrimitive.Title.displayName
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;

 const SheetDescription = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Description>,
@ -123,8 +123,8 @@ const SheetDescription = React.forwardRef<
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
-))
-SheetDescription.displayName = SheetPrimitive.Description.displayName
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;

 export {
  Sheet,
@ -137,4 +137,4 @@ export {
  SheetFooter,
  SheetTitle,
  SheetDescription,
-}
+};
--- a/src/components/ui/skeleton.tsx
+++ b/src/components/ui/skeleton.tsx
@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 function Skeleton({
  className,
@ -9,7 +9,7 @@ function Skeleton({
      className={cn("animate-pulse rounded-md bg-primary/10", className)}
      {...props}
    />
-  )
+  );
 }

-export { Skeleton }
+export { Skeleton };
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const Table = React.forwardRef<
  HTMLTableElement,
@ -13,16 +13,16 @@ const Table = React.forwardRef<
      {...props}
    />
  </div>
-))
-Table.displayName = "Table"
+));
+Table.displayName = "Table";

 const TableHeader = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
+));
+TableHeader.displayName = "TableHeader";

 const TableBody = React.forwardRef<
  HTMLTableSectionElement,
@ -33,8 +33,8 @@ const TableBody = React.forwardRef<
    className={cn("[&_tr:last-child]:border-0", className)}
    {...props}
  />
-))
-TableBody.displayName = "TableBody"
+));
+TableBody.displayName = "TableBody";

 const TableFooter = React.forwardRef<
  HTMLTableSectionElement,
@ -44,12 +44,12 @@ const TableFooter = React.forwardRef<
    ref={ref}
    className={cn(
      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
+      className,
    )}
    {...props}
  />
-))
-TableFooter.displayName = "TableFooter"
+));
+TableFooter.displayName = "TableFooter";

 const TableRow = React.forwardRef<
  HTMLTableRowElement,
@ -59,12 +59,12 @@ const TableRow = React.forwardRef<
    ref={ref}
    className={cn(
      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
+      className,
    )}
    {...props}
  />
-))
-TableRow.displayName = "TableRow"
+));
+TableRow.displayName = "TableRow";

 const TableHead = React.forwardRef<
  HTMLTableCellElement,
@ -74,12 +74,12 @@ const TableHead = React.forwardRef<
    ref={ref}
    className={cn(
      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
+      className,
    )}
    {...props}
  />
-))
-TableHead.displayName = "TableHead"
+));
+TableHead.displayName = "TableHead";

 const TableCell = React.forwardRef<
  HTMLTableCellElement,
@ -89,12 +89,12 @@ const TableCell = React.forwardRef<
    ref={ref}
    className={cn(
      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
+      className,
    )}
    {...props}
  />
-))
-TableCell.displayName = "TableCell"
+));
+TableCell.displayName = "TableCell";

 const TableCaption = React.forwardRef<
  HTMLTableCaptionElement,
@ -105,8 +105,8 @@ const TableCaption = React.forwardRef<
    className={cn("mt-4 text-sm text-muted-foreground", className)}
    {...props}
  />
-))
-TableCaption.displayName = "TableCaption"
+));
+TableCaption.displayName = "TableCaption";

 export {
  Table,
@ -117,4 +117,4 @@ export {
  TableRow,
  TableCell,
  TableCaption,
-}
+};
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const Textarea = React.forwardRef<
  HTMLTextAreaElement,
@ -10,13 +10,13 @@ const Textarea = React.forwardRef<
    <textarea
      className={cn(
        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
+        className,
      )}
      ref={ref}
      {...props}
    />
-  )
-})
-Textarea.displayName = "Textarea"
+  );
+});
+Textarea.displayName = "Textarea";

-export { Textarea }
+export { Textarea };
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@ -1,15 +1,15 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

-const TooltipProvider = TooltipPrimitive.Provider
+const TooltipProvider = TooltipPrimitive.Provider;

-const Tooltip = TooltipPrimitive.Root
+const Tooltip = TooltipPrimitive.Root;

-const TooltipTrigger = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger;

 const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
@ -21,12 +21,12 @@ const TooltipContent = React.forwardRef<
      sideOffset={sideOffset}
      className={cn(
        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        className,
      )}
      {...props}
    />
  </TooltipPrimitive.Portal>
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;

-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
--- a/src/env.js
+++ b/src/env.js
@ -19,6 +19,8 @@ export const env = createEnv({
    NODE_ENV: z
      .enum(["development", "test", "production"])
      .default("development"),
+    SOCKET_IO_PORT: z.number().default(4000),
+    SOCKET_IO_CORS_ORIGIN: z.string().optional(),
  },

  /**
@ -42,6 +44,8 @@ export const env = createEnv({
    AUTH_GOOGLE_SECRET: process.env.AUTH_GOOGLE_SECRET,
    DATABASE_URL: process.env.DATABASE_URL,
    NODE_ENV: process.env.NODE_ENV,
+    SOCKET_IO_CORS_ORIGIN: process.env.SOCKET_IO_CORS_ORIGIN,
+    SOCKET_IO_PORT: process.env.SOCKET_IO_PORT,
  },
  /**
   * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
--- a/src/lib/hooks/use-comments-hook.ts
+++ b/src/lib/hooks/use-comments-hook.ts
@ -0,0 +1,39 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { api } from "@/trpc/react";
+import { Comment } from "@/server/db/schema";
+import {
+  ADD_COMMENT_EVENT,
+  DELETE_COMMENT_EVENT,
+} from "@/server/socket/event-const";
+import { useSocket } from "@/components/socket-context";
+
+export function useComments(articleId: string) {
+  const [comments, setComments] = useState<Array<Comment>>([]);
+  const { data } = api.comment.list.useQuery({ articleId });
+  const { socket } = useSocket();
+
+  useEffect(() => {
+    if (!socket) return;
+    console.log("useComments");
+    socket.on(DELETE_COMMENT_EVENT, (deletedCommentId) => {
+      console.log("DELETE_COMMENT_EVENT:::client", deletedCommentId);
+      setComments((prev) => prev?.filter((c) => c.id !== deletedCommentId));
+    });
+    socket.on(ADD_COMMENT_EVENT, (newComment: Comment) => {
+      setComments((prev) => [newComment, ...prev]);
+    });
+    return () => {
+      socket.disconnect();
+    };
+  }, [socket]);
+
+  useEffect(() => {
+    if (data) {
+      setComments(data);
+    }
+  }, [data]);
+
+  return { comments };
+}
--- a/src/lib/hooks/infinite-items-observer-hook.tsx
+++ b/src/lib/hooks/infinite-items-observer-hook.tsx
--- a/src/lib/hooks/use-socket.ts
+++ b/src/lib/hooks/use-socket.ts
@ -0,0 +1,12 @@
+"use client";
+
+import io, { Socket } from "socket.io-client";
+
+let socket: Socket | null = null;
+
+export const getSocket = () => {
+  if (!socket) {
+    socket = io("http://localhost:4000");
+  }
+  return socket;
+};
--- a/src/lib/store/use-global-dialog.ts
+++ b/src/lib/store/use-global-dialog.ts
@ -0,0 +1,37 @@
+import { create } from "zustand";
+
+type GlobalDialogType = {
+  title: string;
+  message: string;
+  action: (() => void) | string;
+  actionText: string;
+};
+
+interface GlobalDialogStoreState {
+  globalDialog: {
+    open: boolean;
+  } & Partial<GlobalDialogType>;
+  openDialog: (dialog: GlobalDialogType) => void;
+  closeDialog: () => void;
+}
+
+export const useGlobalDialogStore = create<GlobalDialogStoreState>()((set) => ({
+  globalDialog: {
+    open: false,
+  },
+  openDialog(dialog: GlobalDialogType) {
+    set(() => ({
+      globalDialog: {
+        ...dialog,
+        open: true,
+      },
+    }));
+  },
+  closeDialog() {
+    set(() => ({
+      globalDialog: {
+        open: false,
+      },
+    }));
+  },
+}));
--- a/src/lib/utils/comments.ts
+++ b/src/lib/utils/comments.ts
@ -0,0 +1,40 @@
+import { Comment, CommentNode } from "@/server/db/schema";
+
+export function buildCommentTree(comments: Comment[]): Array<CommentNode> {
+  // Create a map for quick access to nodes by their id
+  const commentMap: Record<string, CommentNode> = {};
+
+  // First pass: Create CommentNode objects for each comment
+  comments.forEach((comment) => {
+    commentMap[comment.id] = {
+      ...comment,
+      children: [],
+      missingParent: false,
+    };
+  });
+
+  // Second pass: Build the tree by connecting children to parents
+  const rootComments: Array<CommentNode> = [];
+
+  comments.forEach((comment) => {
+    const node = commentMap[comment.id]!;
+
+    // If parentId is null or empty string, it's a root comment
+    if (!comment.parentId) {
+      rootComments.push(node);
+    } else {
+      const parent = commentMap[comment.parentId];
+      if (parent) {
+        // Add as a child to its parent if parent exists
+        parent.children.push(node);
+      } else {
+        // Parent doesn't exist, treat as root comment
+        //  Mark that the parent is missing
+        node.missingParent = true;
+        rootComments.push(node!);
+      }
+    }
+  });
+
+  return rootComments;
+}
--- a/src/lib/utils/dom.ts
+++ b/src/lib/utils/dom.ts
@ -0,0 +1,14 @@
+"use client";
+export function scrollToId(id: string) {
+  if (typeof window === "undefined") return;
+  console.log("Scroll to id", id, document);
+
+  const element = document.getElementById(id);
+  console.log(element);
+  if (!element) return;
+
+  element.scrollIntoView({
+    behavior: "smooth",
+    block: "start",
+  });
+}
--- a/src/lib/utils/format.ts
+++ b/src/lib/utils/format.ts
@ -0,0 +1,51 @@
+export const formatCommentDate = (date: Date | number | string): string => {
+  // Convert input to Date object if it's not already
+  const inputDate = date instanceof Date ? date : new Date(date);
+  const now = new Date();
+
+  // Get time difference in seconds
+  const diffSeconds = Math.floor((now.getTime() - inputDate.getTime()) / 1000);
+
+  // Just now - less than a minute ago
+  if (diffSeconds < 60) {
+    return "just now";
+  }
+
+  // Minutes ago - less than an hour
+  const diffMinutes = Math.floor(diffSeconds / 60);
+  if (diffMinutes < 60) {
+    return `${diffMinutes} ${diffMinutes === 1 ? "min" : "mins"} ago`;
+  }
+
+  // Hours ago - less than a day
+  const diffHours = Math.floor(diffMinutes / 60);
+  if (diffHours < 24) {
+    return `${diffHours} ${diffHours === 1 ? "hour" : "hours"} ago`;
+  }
+
+  // Days ago - less than a week
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffDays < 7) {
+    return `${diffDays} ${diffDays === 1 ? "day" : "days"} ago`;
+  }
+
+  // Weeks ago - less than a month
+  const diffWeeks = Math.floor(diffDays / 7);
+  if (diffWeeks < 4) {
+    return `${diffWeeks} ${diffWeeks === 1 ? "week" : "weeks"} ago`;
+  }
+
+  // Months ago - less than a year
+  const diffMonths = Math.floor(diffDays / 30);
+  if (diffMonths < 12) {
+    return `${diffMonths} ${diffMonths === 1 ? "month" : "months"} ago`;
+  }
+
+  // More than a year ago - show full date
+  const options: Intl.DateTimeFormatOptions = {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  };
+  return inputDate.toLocaleDateString(undefined, options);
+};
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
--- a/src/lib/utils/try-catch.ts
+++ b/src/lib/utils/try-catch.ts
@ -0,0 +1,24 @@
+// Types for the result object with discriminated union
+type Success<T> = {
+  data: T;
+  error: null;
+};
+
+type Failure<E> = {
+  data: null;
+  error: E;
+};
+
+type Result<T, E = Error> = Success<T> | Failure<E>;
+
+// Main wrapper function
+export async function tryCatch<T, E = Error>(
+  promise: Promise<T>,
+): Promise<Result<T, E>> {
+  try {
+    const data = await promise;
+    return { data, error: null };
+  } catch (error) {
+    return { data: null, error: error as E };
+  }
+}
--- a/src/lib/validation/zod/article.ts
+++ b/src/lib/validation/zod/article.ts
@ -1,9 +1,10 @@
 import { z } from "zod";
+import { editorContentSchema } from ".";

 export const articleSchema = z.object({
  title: z.string().min(1),
  slug: z.string().min(1),
-  content: z.any().optional(),
+  content: editorContentSchema.optional(),
  authorId: z.string().optional(),
  categoryId: z.string().optional(),
  published: z.boolean(),
--- a/src/lib/validation/zod/comment.ts
+++ b/src/lib/validation/zod/comment.ts
@ -0,0 +1,7 @@
+import { z } from "zod";
+import { editorContentSchema } from ".";
+
+export const commentSchema = z.object({
+  content: editorContentSchema,
+  parentId: z.string().optional(),
+});
--- a/src/lib/validation/zod/index.ts
+++ b/src/lib/validation/zod/index.ts
@ -0,0 +1,3 @@
+import { z } from "zod";
+
+export const editorContentSchema = z.any(); // TODO: define editor content schema
--- a/src/server/actions/auth.ts
+++ b/src/server/actions/auth.ts
@ -1,7 +0,0 @@
-"use server";
-
-import { signIn } from "@/server/auth";
-
-export async function loginOAuth(provider: string) {
-  return await signIn(provider);
-}
--- a/src/server/api/root.ts
+++ b/src/server/api/root.ts
@ -1,22 +1,20 @@
-import { articleRouter } from "./routers/article";
-import { categoryRouter } from "@/server/api/routers/category";
 import { createCallerFactory, createTRPCRouter } from "@/server/api/trpc";
-import { usersRouter } from "./routers/users";
-import { authorRouter } from "./routers/author";
-import { appRouter as globalRouter } from "./routers/app";
-// import { authRouter } from "./routers/auth";
-/**
- * This is the primary router for your server.
- *
- * All routers added in /api/routers should be manually added here.
- */
+import {
+  articleRouter,
+  categoryRouter,
+  usersRouter,
+  authorRouter,
+  appRouter as globalRouter,
+  commentRouter,
+} from "./routers";
+
 export const appRouter = createTRPCRouter({
  article: articleRouter,
  category: categoryRouter,
+  comment: commentRouter,
  users: usersRouter,
  author: authorRouter,
  app: globalRouter,
-  // auth: authRouter,
 });

 // export type definition of API
--- a/src/server/api/routers/article.ts
+++ b/src/server/api/routers/article.ts
@ -69,14 +69,14 @@ export const articleRouter = createTRPCRouter({
      })) as Article[];
    }),
  get: publicProcedure
-    .input(z.object({ slug: z.string() }))
+    .input(z.object({ slug: z.string(), with: z.any().optional() }))
    .query(async ({ ctx, input }) => {
      const user = ctx?.session?.user;
      const isEditor = user ? hasPermission(user.role, Role.EDITOR) : false;
      const publishedArg = !isEditor ? eq(articles.published, true) : undefined;
      return (await ctx.db.query.articles.findFirst({
        where: and(eq(articles.slug, input.slug), publishedArg),
-        with: { category: true },
+        with: input?.with,
      })) as Article;
    }),
  getByCursor: publicProcedure
--- a/src/server/api/routers/comment.ts
+++ b/src/server/api/routers/comment.ts
@ -0,0 +1,82 @@
+import { and, desc, eq } from "drizzle-orm";
+import { createTRPCRouter, protectedProcedure, publicProcedure } from "../trpc";
+import { comments, users } from "@/server/db/schema";
+import { z } from "zod";
+import { commentSchema } from "@/lib/validation/zod/comment";
+
+export const commentRouter = createTRPCRouter({
+  // queries
+  list: publicProcedure
+    .input(
+      z.object({
+        articleId: z.string(),
+      }),
+    )
+    .query(
+      async ({ ctx, input }) =>
+        await ctx.db.query.comments.findMany({
+          where: eq(comments.articleId, input.articleId),
+          orderBy: desc(comments.createdAt),
+          with: {
+            author: {
+              columns: {
+                id: true,
+                name: true,
+                image: true,
+              },
+            },
+          },
+        }),
+    ),
+
+  // mutations
+  create: protectedProcedure
+    .input(
+      z.object({
+        comment: commentSchema,
+        articleId: z.string(),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const [comment] = await ctx.db
+        .insert(comments)
+        .values({
+          ...input.comment,
+          authorId: ctx.session.user.id,
+          articleId: input.articleId,
+        })
+        .returning();
+      if (!comment) return;
+      const author = await ctx.db.query.users.findFirst({
+        where: eq(users.id, comment.authorId),
+        columns: {
+          id: true,
+          name: true,
+          image: true,
+        },
+      });
+      return { ...comment, author };
+    }),
+  delete: protectedProcedure
+    .input(
+      z.object({
+        commentId: z.string(),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const [comment] = await ctx.db
+        .delete(comments)
+        .where(
+          and(
+            eq(comments.id, input.commentId),
+            eq(comments.authorId, ctx.session.user.id),
+          ),
+        )
+        .returning({
+          id: comments.id,
+          articleId: comments.articleId,
+        });
+
+      return comment;
+    }),
+});
--- a/src/server/api/routers/index.ts
+++ b/src/server/api/routers/index.ts
@ -1,9 +1,18 @@
-// import { passwordSchema, userSchema } from "@/lib/validation/zod/user";
-// import { createTRPCRouter, publicProcedure } from "../trpc";
-// import { z } from "zod";
-// import { eq } from "drizzle-orm";
-// import { users } from "@/server/db/schema";
-// import argon from "argon2";
+import { articleRouter } from "./article";
+import { usersRouter } from "./users";
+import { authorRouter } from "./author";
+import { appRouter } from "./app";
+import { commentRouter } from "./comment";
+import { categoryRouter } from "./category";
+
+export {
+  articleRouter,
+  categoryRouter,
+  commentRouter,
+  usersRouter,
+  authorRouter,
+  appRouter,
+};

 // export const authRouter = createTRPCRouter({
 //   register: publicProcedure
@ -52,3 +61,10 @@
 //       }
 //     }),
 // });
+// "use server";
+
+// import { signIn } from "@/server/auth";
+
+// export async function loginOAuth(provider: string) {
+//   return await signIn(provider);
+// }
--- a/src/server/api/trpc.ts
+++ b/src/server/api/trpc.ts
@ -87,12 +87,12 @@ export const createTRPCRouter = t.router;
 const timingMiddleware = t.middleware(async ({ next, path }) => {
  const start = Date.now();

-  if (t._config.isDev) {
-    // artificial delay in dev
-    // const waitMs = 1000 * 5; // 5 seconds
-    const waitMs = Math.floor(Math.random() * 400) + 100;
-    await new Promise((resolve) => setTimeout(resolve, waitMs));
-  }
+  // if (t._config.isDev) {
+  //   // artificial delay in dev
+  //   // const waitMs = 1000 * 5; // 5 seconds
+  //   const waitMs = Math.floor(Math.random() * 400) + 100;
+  //   await new Promise((resolve) => setTimeout(resolve, waitMs));
+  // }

  const result = await next();

--- a/src/server/db/schema/article.ts
+++ b/src/server/db/schema/article.ts
@ -0,0 +1,53 @@
+import { boolean, index, jsonb, timestamp, varchar } from "drizzle-orm/pg-core";
+import { createId, createTable } from "./schema-utils";
+import { JSONContent } from "novel";
+import { relations, sql } from "drizzle-orm";
+import { categories, Category } from "./category";
+import { users } from "./auth";
+import { Comment, comments } from "./comments";
+import { PublicUser } from ".";
+
+export const articles = createTable(
+  "article",
+  {
+    id: varchar("id", { length: 255 })
+      .primaryKey()
+      .$defaultFn(() => createId())
+      .notNull(),
+    title: varchar("title", { length: 256 }).notNull(),
+    slug: varchar("slug", { length: 256 }).unique().notNull(),
+    authorId: varchar("author_id", { length: 255 }),
+    content: jsonb("content").$type<JSONContent>(),
+    categoryId: varchar("category_id", { length: 255 }),
+    published: boolean("published").default(false),
+    createdAt: timestamp("created_at", { withTimezone: true })
+      .default(sql`CURRENT_TIMESTAMP`)
+      .notNull(),
+    updatedAt: timestamp("updated_at", { withTimezone: true }).$onUpdate(
+      () => new Date(),
+    ),
+  },
+  (example) => ({
+    titleIndex: index("article_title_idx").on(example.title),
+    slugIndex: index("article_slug_idx").on(example.slug),
+    createdAtIndex: index("article_created_at_idx").on(example.createdAt),
+  }),
+);
+
+export const articleRelations = relations(articles, ({ one, many }) => ({
+  category: one(categories, {
+    fields: [articles.categoryId],
+    references: [categories.id],
+  }),
+  author: one(users, {
+    fields: [articles.authorId],
+    references: [users.id],
+  }),
+  comments: many(comments),
+}));
+
+export type Article = typeof articles.$inferSelect & {
+  author?: PublicUser;
+  category?: Category;
+  comments?: Array<Comment>;
+};
--- a/src/server/db/schema/auth.ts
+++ b/src/server/db/schema/auth.ts
@ -1,101 +1,21 @@
-import { createId } from "@paralleldrive/cuid2";
 import { relations, sql } from "drizzle-orm";
 import {
-  boolean,
  index,
  integer,
-  jsonb,
-  pgTableCreator,
  primaryKey,
  text,
  timestamp,
  varchar,
 } from "drizzle-orm/pg-core";
-import { User } from "next-auth";
+
+import { createId, createTable } from "./schema-utils";
 import { type AdapterAccount } from "next-auth/adapters";
-import { JSONContent } from "novel";
-
-export const createTable = pgTableCreator((name) => `logipedia_${name}`);
-
-export const articles = createTable(
-  "article",
-  {
-    id: varchar("id", { length: 255 })
-      .primaryKey()
-      .$defaultFn(() => createId())
-      .notNull(),
-    title: varchar("title", { length: 256 }).notNull(),
-    slug: varchar("slug", { length: 256 }).unique().notNull(),
-    authorId: varchar("author_id", { length: 255 }),
-    content: jsonb("content").$type<JSONContent>(),
-    categoryId: varchar("category_id", { length: 255 }),
-    published: boolean("published").default(false),
-    createdAt: timestamp("created_at", { withTimezone: true })
-      .default(sql`CURRENT_TIMESTAMP`)
-      .notNull(),
-    updatedAt: timestamp("updated_at", { withTimezone: true }).$onUpdate(
-      () => new Date(),
-    ),
-  },
-  (example) => ({
-    titleIndex: index("article_title_idx").on(example.title),
-    slugIndex: index("article_slug_idx").on(example.slug),
-    createdAtIndex: index("article_created_at_idx").on(example.createdAt),
-  }),
-);
-export type Article = typeof articles.$inferSelect & {
-  author?: User;
-  category?: Category;
-};
-export const articleRelations = relations(articles, ({ one }) => ({
-  category: one(categories, {
-    fields: [articles.categoryId],
-    references: [categories.id],
-  }),
-  author: one(users, {
-    fields: [articles.authorId],
-    references: [users.id],
-  }),
-}));
-
-export const categories = createTable(
-  "category",
-  {
-    id: varchar("id", { length: 255 })
-      .primaryKey()
-      .$defaultFn(() => createId())
-      .notNull(),
-    name: varchar("name", { length: 256 }).notNull(),
-    description: text("description"),
-    slug: varchar("slug", { length: 256 }).unique().notNull(),
-
-    image: varchar("image", { length: 255 }),
-    createdAt: timestamp("created_at", { withTimezone: true })
-      .default(sql`CURRENT_TIMESTAMP`)
-      .notNull(),
-    updatedAt: timestamp("updated_at", { withTimezone: true }).$onUpdate(
-      () => new Date(),
-    ),
-  },
-  (example) => ({
-    nameIndex: index("category_name_idx").on(example.name),
-    slugameIndex: index("category_slug_idx").on(example.slug),
-    createdAtIndex: index("category_created_at_idx").on(example.createdAt),
-  }),
-);
-export type Category = typeof categories.$inferSelect & {
-  articles?: Article[];
-};
-
-export const categoryRelations = relations(categories, ({ many }) => ({
-  articles: many(articles),
-}));

 export const users = createTable("user", {
  id: varchar("id", { length: 255 })
    .notNull()
    .primaryKey()
-    .$defaultFn(() => crypto.randomUUID()),
+    .$defaultFn(() => createId()),
  name: varchar("name", { length: 255 }),
  email: varchar("email", { length: 255 }).notNull(),
  role: integer("role").default(1).notNull(),
--- a/src/server/db/schema/category.ts
+++ b/src/server/db/schema/category.ts
@ -0,0 +1,37 @@
+import { index, text, timestamp, varchar } from "drizzle-orm/pg-core";
+import { createId, createTable } from "./schema-utils";
+import { relations, sql } from "drizzle-orm";
+import { Article, articles } from "./article";
+
+export const categories = createTable(
+  "category",
+  {
+    id: varchar("id", { length: 255 })
+      .primaryKey()
+      .$defaultFn(() => createId())
+      .notNull(),
+    name: varchar("name", { length: 256 }).notNull(),
+    description: text("description"),
+    slug: varchar("slug", { length: 256 }).unique().notNull(),
+
+    image: varchar("image", { length: 255 }),
+    createdAt: timestamp("created_at", { withTimezone: true })
+      .default(sql`CURRENT_TIMESTAMP`)
+      .notNull(),
+    updatedAt: timestamp("updated_at", { withTimezone: true }).$onUpdate(
+      () => new Date(),
+    ),
+  },
+  (example) => ({
+    nameIndex: index("category_name_idx").on(example.name),
+    slugameIndex: index("category_slug_idx").on(example.slug),
+    createdAtIndex: index("category_created_at_idx").on(example.createdAt),
+  }),
+);
+export type Category = typeof categories.$inferSelect & {
+  articles?: Article[];
+};
+
+export const categoryRelations = relations(categories, ({ many }) => ({
+  articles: many(articles),
+}));
--- a/src/server/db/schema/comments.ts
+++ b/src/server/db/schema/comments.ts
@ -0,0 +1,87 @@
+import {
+  index,
+  integer,
+  jsonb,
+  primaryKey,
+  timestamp,
+  varchar,
+} from "drizzle-orm/pg-core";
+import { Article, articles } from "./article";
+import { JSONContent } from "novel";
+import { relations, sql } from "drizzle-orm";
+import { createId, createTable } from "./schema-utils";
+import { users } from "./auth";
+import { PublicUser } from ".";
+
+export const comments = createTable(
+  "comment",
+  {
+    id: varchar("id", { length: 255 })
+      .primaryKey()
+      .$defaultFn(() => createId())
+      .notNull(),
+    articleId: varchar("article_id", { length: 255 })
+      .notNull()
+      .references(() => articles.id),
+    authorId: varchar("author_id", { length: 255 })
+      .notNull()
+      .references(() => users.id),
+    parentId: varchar("parent_id", { length: 255 }),
+    content: jsonb("content").$type<JSONContent>(),
+    createdAt: timestamp("created_at", { withTimezone: true })
+      .default(sql`CURRENT_TIMESTAMP`)
+      .notNull(),
+    updatedAt: timestamp("updated_at", { withTimezone: true }).$onUpdate(
+      () => new Date(),
+    ),
+  },
+  (example) => ({
+    articleIdIndex: index("comment_article_id_idx").on(example.articleId),
+    authorIdIndex: index("comment_author_id_idx").on(example.authorId),
+    createdAtIndex: index("comment_created_at_idx").on(example.createdAt),
+  }),
+);
+
+export const commentsRelations = relations(comments, ({ many, one }) => ({
+  article: one(articles, {
+    fields: [comments.articleId],
+    references: [articles.id],
+  }),
+  author: one(users, {
+    fields: [comments.authorId],
+    references: [users.id],
+  }),
+  // comments: many(comments),
+}));
+
+export type Comment = typeof comments.$inferSelect & {
+  article?: Article;
+  author?: PublicUser;
+};
+
+export type CommentNode = Comment & {
+  children: Array<CommentNode | DeletedNode>;
+  missingParent: boolean;
+};
+
+export const commentVotes = createTable(
+  "comment_vote",
+  {
+    vote: integer("vote").notNull().$type<1 | -1>().default(1),
+    commentId: varchar("comment_id", {
+      length: 255,
+    })
+      .references(() => comments.id)
+      .notNull(),
+    userId: varchar("user_id", {
+      length: 255,
+    })
+      .references(() => users.id)
+      .notNull(),
+  },
+  (example) => ({
+    comboundKey: primaryKey({
+      columns: [example.commentId, example.userId],
+    }),
+  }),
+);
--- a/src/server/db/schema/index.ts
+++ b/src/server/db/schema/index.ts
@ -0,0 +1,8 @@
+import { User } from "next-auth";
+
+export * from "./auth";
+export * from "./article";
+export * from "./category";
+export * from "./comments";
+
+export type PublicUser = Pick<User, "id" | "name" | "image">;
--- a/src/server/db/schema/schema-utils.ts
+++ b/src/server/db/schema/schema-utils.ts
@ -0,0 +1,7 @@
+import { createId as creatIdCuuid2 } from "@paralleldrive/cuid2";
+
+import { pgTableCreator } from "drizzle-orm/pg-core";
+
+export const createTable = pgTableCreator((name) => `logipedia_${name}`);
+
+export const createId = () => creatIdCuuid2();
--- a/src/server/socket/event-const.ts
+++ b/src/server/socket/event-const.ts
@ -0,0 +1,5 @@
+export const JOIN_ROOM_EVENT = "joinRoom";
+export const LEAVE_ROOM_EVENT = "leaveRoom";
+
+export const ADD_COMMENT_EVENT = "commentAdded";
+export const DELETE_COMMENT_EVENT = "commentDeleted";
--- a/src/server/socket/events.ts
+++ b/src/server/socket/events.ts
@ -0,0 +1,40 @@
+import { type Server as SocketIOServer } from "socket.io";
+import {
+  ADD_COMMENT_EVENT,
+  DELETE_COMMENT_EVENT,
+  JOIN_ROOM_EVENT,
+} from "./event-const";
+import { env } from "@/env";
+import { Comment } from "../db/schema";
+
+const log = (message?: any, ...optionalParams: any[]) => {
+  if (env.NODE_ENV === "development") {
+    console.log(message, ...optionalParams);
+  }
+};
+
+export const initSocketEvents = (io: SocketIOServer) => {
+  io.on("connection", (socket) => {
+    log("New client connected:", socket.id);
+
+    socket.on(JOIN_ROOM_EVENT, (articleId: string) => {
+      socket.join(articleId);
+      log(`Client ${socket.id} joined room: ${articleId}`);
+    });
+
+    // Comments
+    socket.on(DELETE_COMMENT_EVENT, (commentId: string, articleId: string) => {
+      log(`Comment deleted: ${commentId} for article: ${articleId}`);
+      io.to(articleId).emit(DELETE_COMMENT_EVENT, commentId);
+    });
+
+    socket.on(ADD_COMMENT_EVENT, (comment: Comment) => {
+      log(`Comment added: ${comment.id} for article: ${comment.articleId}`);
+      io.to(comment.articleId).emit(ADD_COMMENT_EVENT, comment);
+    });
+
+    socket.on("disconnect", () => {
+      log("Client disconnected:", socket.id);
+    });
+  });
+};
--- a/src/server/socket/server.ts
+++ b/src/server/socket/server.ts
@ -0,0 +1,37 @@
+import "dotenv/config";
+import express from "express";
+import http from "http";
+import { Server } from "socket.io";
+import { initSocketEvents } from "./events";
+import { env } from "@/env";
+
+declare global {
+  var io: Server | undefined;
+}
+
+const createSocketServer = () => {
+  const app = express();
+  const server = http.createServer(app);
+
+  const PORT = env.SOCKET_IO_PORT || 4000;
+  const origin = env.SOCKET_IO_CORS_ORIGIN || "http://localhost:" + PORT;
+
+  if (!global.io) {
+    global.io = new Server(server, {
+      cors: {
+        origin: "*",
+        methods: ["GET", "POST"],
+      },
+    });
+
+    initSocketEvents(global.io);
+
+    server.listen(PORT, () => {
+      console.log(`Socket.IO server running on port ${PORT}`);
+    });
+  }
+
+  return global.io;
+};
+
+export const ioServer = createSocketServer();
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -15,6 +15,9 @@ export default {
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
+      maxWidth: {
+        reader: "700px",
+      },
      colors: {
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
@ -67,6 +70,15 @@ export default {
          ring: "hsl(var(--sidebar-ring))",
        },
      },
+      keyframes: {
+        "fade-in": {
+          "0%": { opacity: "0" },
+          "100%": { opacity: "1" },
+        },
+      },
+      animation: {
+        "fade-in": "fade-in 0.5s ease-out",
+      },
    },
  },
  plugins: [
Author	SHA1	Message	Date
mr-shortman	0e614f544a	added zustand and global dialog component	2025-03-23 13:16:59 +01:00
mr-shortman	b2cd0fc560	added deleted comment indicator	2025-03-22 17:48:05 +01:00
shrt	4a67f1f94b	new nested comments section ui; implimented socket io	2025-03-22 14:13:45 +01:00
mr-shortman	85ef7247ea	implimentet comments ui and server side part	2025-03-22 09:20:12 +01:00
mr-shortman	d9d16d7a7e	added comment vote table Some checks failed Gitea Actions Demo / Explore-Gitea-Actions (push) Failing after 0s Details	2025-03-18 21:49:35 +01:00
mr-shortman	6a32dcced7	restructured drizzle schema; added comments schema and server side operations Some checks failed Gitea Actions Demo / Explore-Gitea-Actions (push) Failing after 0s Details	2025-03-18 21:43:41 +01:00