added zustand and global dialog component

.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 }}."

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,

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"
+}

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"
   },

src/app/(PAGES)/artikel/[slug]/page.tsx

@@ -1,69 +1,34 @@
-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 { Edit, MoreVertical } from "lucide-react";
-import { appRoutes } from "@/config";
+import CommentSection from "@/components/comment/comment-section";
-import { hasPermission, Role } from "@/lib/validation/permissions";
+import { SocketProvider } from "@/components/socket-context";
-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";
 
 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="">
+    <SocketProvider>
-      {/* <div className="flex w-full items-center justify-between">
+      <div className="w-full max-w-reader px-12">
-        <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">
+          <div className="flex w-full items-center">
             <Badge
               className="size-max"
               variant={article.published ? "outline" : "destructive"}
@@ -71,6 +36,7 @@ async function Page({ params }: { params: Promise<{ slug: string }> }) {
               {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>
+    </SocketProvider>
   );
 }
 

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,6 +13,8 @@ async function Layout({ children }: { children: React.ReactNode }) {
 
   return (
     <HydrateClient>
+      <SessionProvider session={session}>
+        <GlobalDialog />
         <SidebarProvider>
           <AppSidebar user={session?.user} />
           <div className="h-screen w-full bg-background">
@@ -18,6 +22,7 @@ async function Layout({ children }: { children: React.ReactNode }) {
             <main className="space-y-4 p-4">{children}</main>
           </div>
         </SidebarProvider>
+      </SessionProvider>
     </HydrateClient>
   );
 }

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";

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";

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;

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;

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;

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;

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;

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;

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;

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),
           },

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>
+          {!hideNodeSelector && (
+            <>
               <NodeSelector open={openNode} onOpenChange={setOpenNode} />
               <Separator orientation="vertical" />
+            </>
+          )}
           <LinkSelector open={openLink} onOpenChange={setOpenLink} />
           <Separator orientation="vertical" />
           <TextButtons />

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>

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
   {

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;
+}

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);

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;

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,
+  };
+};

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 };
+};

src/components/ui/alert-dialog.tsx

@@ -1,16 +1,16 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button"
+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,
-}
+};

src/components/ui/alert.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
+import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority"
+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 };

src/components/ui/avatar.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+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 };

src/components/ui/badge.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
+import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority"
+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 };

src/components/ui/breadcrumb.tsx

@@ -1,16 +1,16 @@
-import * as React from "react"
+import * as React from "react";
-import { Slot } from "@radix-ui/react-slot"
+import { Slot } from "@radix-ui/react-slot";
-import { ChevronRight, MoreHorizontal } from "lucide-react"
+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} />)
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
-Breadcrumb.displayName = "Breadcrumb"
+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,
-}
+};

src/components/ui/button.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
+import * as React from "react";
-import { Slot } from "@radix-ui/react-slot"
+import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority"
+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 };

src/components/ui/checkbox.tsx

@@ -1,10 +1,10 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react"
+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 };

src/components/ui/command.tsx

@@ -1,12 +1,12 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import { type DialogProps } from "@radix-ui/react-dialog"
+import { type DialogProps } from "@radix-ui/react-dialog";
-import { Command as CommandPrimitive } from "cmdk"
+import { Command as CommandPrimitive } from "cmdk";
-import { Search } from "lucide-react"
+import { Search } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { Dialog, DialogContent } from "@/components/ui/dialog"
+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",
+      "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
+      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,
-}
+};

src/components/ui/dialog.tsx

@@ -1,18 +1,18 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog"
+import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react"
+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>,
@@ -22,12 +22,12 @@ const DialogOverlay = React.forwardRef<
     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
+      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,
-}
+};

src/components/ui/dropdown-menu.tsx

@@ -1,27 +1,27 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronRight, Circle } from "lucide-react"
+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,
-}
+};

src/components/ui/form.tsx

@@ -1,8 +1,8 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label"
+import * as LabelPrimitive from "@radix-ui/react-label";
-import { Slot } from "@radix-ui/react-slot"
+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 { cn } from "@/lib/utils";
-import { Label } from "@/components/ui/label"
+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 fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext)
+  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext()
+  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 { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message ?? "") : children
+  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,
-}
+};

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 };

src/components/ui/label.tsx

@@ -1,14 +1,14 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label"
+import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva, type VariantProps } from "class-variance-authority"
+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 };

src/components/ui/popover.tsx

@@ -1,15 +1,15 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+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 };

src/components/ui/select.tsx

@@ -1,16 +1,16 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select"
+import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
+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",
+      "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
+      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,
-}
+};

src/components/ui/separator.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+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 };

src/components/ui/sheet.tsx

@@ -1,19 +1,19 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as SheetPrimitive from "@radix-ui/react-dialog"
+import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "class-variance-authority";
-import { X } from "lucide-react"
+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>,
@@ -22,13 +22,13 @@ const SheetOverlay = React.forwardRef<
   <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
+      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,
-}
+};

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 };

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,
-}
+};

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 };

src/components/ui/tooltip.tsx

@@ -1,15 +1,15 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+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 };

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

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 };
+}

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;
+};

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,
+      },
+    }));
+  },
+}));

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;
+}

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",
+  });
+}

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);
+};

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 };
+  }
+}

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(),

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(),
+});

src/lib/validation/zod/index.ts

@@ -0,0 +1,3 @@
+import { z } from "zod";
+
+export const editorContentSchema = z.any(); // TODO: define editor content schema

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);
-}

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 {
-import { authorRouter } from "./routers/author";
+  articleRouter,
-import { appRouter as globalRouter } from "./routers/app";
+  categoryRouter,
-// import { authRouter } from "./routers/auth";
+  usersRouter,
-/**
+  authorRouter,
- * This is the primary router for your server.
+  appRouter as globalRouter,
- *
+  commentRouter,
- * All routers added in /api/routers should be manually added here.
+} 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

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

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;
+    }),
+});

src/server/api/routers/index.ts

@@ -1,9 +1,18 @@
-// import { passwordSchema, userSchema } from "@/lib/validation/zod/user";
+import { articleRouter } from "./article";
-// import { createTRPCRouter, publicProcedure } from "../trpc";
+import { usersRouter } from "./users";
-// import { z } from "zod";
+import { authorRouter } from "./author";
-// import { eq } from "drizzle-orm";
+import { appRouter } from "./app";
-// import { users } from "@/server/db/schema";
+import { commentRouter } from "./comment";
-// import argon from "argon2";
+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);
+// }

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

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>;
+};

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(),

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),
+}));

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],
+    }),
+  }),
+);

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">;

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();

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";

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);
+    });
+  });
+};

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();

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: [