new nested comments section ui; implimented socket io

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,16 +48,19 @@
     "@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",
     "next-auth": "5.0.0-beta.25",
+    "next-safe-action": "^7.10.4",
     "next-themes": "^0.4.4",
     "novel": "^1.0.2",
     "postgres": "^3.4.4",
@@ -64,6 +69,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",
@@ -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

@@ -11,12 +11,13 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Edit, MoreVertical } from "lucide-react";
 import CommentSection from "@/components/comment/comment-section";
+import { SocketProvider } from "@/components/socket-context";
 
 async function Page({ params }: { params: Promise<{ slug: string }> }) {
   const { slug } = await params;
   const article = await api.article.get({
     slug: slug,
-    with: { category: true, comments: { with: { author: true } } },
+    with: { category: true },
   });
   if (!article) return notFound();
   const session = await auth();
@@ -24,7 +25,8 @@ async function Page({ params }: { params: Promise<{ slug: string }> }) {
     ? hasPermission(session.user.role, Role.EDITOR)
     : false;
   return (
-    <div className="max-w-reader w-full px-12">
+    <SocketProvider>
+      <div className="w-full max-w-reader px-12">
         {isEditor && (
           <div className="flex w-full items-center">
             <Badge
@@ -54,9 +56,12 @@ async function Page({ params }: { params: Promise<{ slug: string }> }) {
               {article.content && <RenderContent content={article.content} />}
             </div>
           </div>
-        <CommentSection articleId={article.id} comments={article.comments} />
+          <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,6 @@
 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 +12,7 @@ async function Layout({ children }: { children: React.ReactNode }) {
 
   return (
     <HydrateClient>
+      <SessionProvider session={session}>
         <SidebarProvider>
           <AppSidebar user={session?.user} />
           <div className="h-screen w-full bg-background">
@@ -18,6 +20,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

@@ -19,16 +19,35 @@ import { createComment } from "@/server/actions/comment";
 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.");
+    },
+    onError: () => {
+      setLoading(false);
+      toast.error("Etwas ist schief gelaufen.");
+    },
+  });
+  const { socket } = useSocket();
   const form = useForm<z.infer<typeof commentSchema>>({
     resolver: zodResolver(commentSchema),
     defaultValues: {
@@ -38,19 +57,23 @@ function CommentForm({
   });
   const editorRef = React.useRef<EditorInstance | null>(null);
   const editor = editorRef.current;
+
   async function onSubmit(values: z.infer<typeof commentSchema>) {
-    const { success } = await createComment(
+    setLoading(true);
-      {
+    mutate({ comment: { ...values, parentId: parentComment?.id }, articleId });
-        ...values,
+
-        parentId: parentComment?.id?.length ? parentComment.id : undefined,
-      },
-      articleId,
-    );
-    if (!success) toast.error("Etwas ist schief gelaufen.");
-    else toast.success("Dein Kommentar wurde hinzugefügt.");
     form.reset();
     editor?.commands?.clearContent();
     removeReplyComment();
+    // setTimeout(() => {
+    //   const el = commentRefs.current.get(res?.data?.data!);
+    //   console.log("el", el);
+    //   el?.scrollIntoView({
+    //     behavior: "smooth",
+    //     block: "start",
+    //   });
+    //   el?.classList.add("animate-fade-in");
+    // }, 500);
   }
 
   React.useEffect(() => {

src/components/comment/comment-list.tsx

@@ -2,26 +2,32 @@ 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";
 
 function CommentList({
   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>
+    <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

@@ -1,21 +1,30 @@
 "use client";
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import CommentForm from "@/components/comment/comment-form";
 import CommentList from "@/components/comment/comment-list";
 import { Comment, CommentNode } from "@/server/db/schema";
 import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
+import { useComments } from "@/lib/hooks/use-comments-hook";
+
+import { SocketProvider, useSocket } from "../socket-context";
+import { JOIN_ROOM_EVENT } from "@/server/socket/event-const";
+
+function CommentSection({ articleId }: { articleId: string }) {
+  const { comments } = useComments(articleId);
+  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]);
 
-function CommentSection({
-  articleId,
-  comments,
-}: {
-  articleId: string;
-  comments?: Array<Comment>;
-}) {
-  const [replyComment, setReplyComment] = React.useState<
-    CommentNode | undefined
-  >();
   return (
     <div className="space-y-4">
       <div className="sticky top-0 z-50 bg-background pt-4">
@@ -23,6 +32,7 @@ function CommentSection({
           articleId={articleId}
           parentComment={replyComment}
           removeReplyComment={() => setReplyComment(undefined)}
+          commentRefs={commentRefs}
         />
       </div>
 
@@ -37,7 +47,11 @@ function CommentSection({
       </div>
 
       {comments && (
-        <CommentList comments={comments} setReplyComment={setReplyComment} />
+        <CommentList
+          comments={comments}
+          commentRefs={commentRefs}
+          setReplyComment={setReplyComment}
+        />
       )}
     </div>
   );

src/components/comment/comment.tsx

@@ -1,39 +1,75 @@
 import React from "react";
 import { CommentNode } from "@/server/db/schema";
 import Avatar from "../avatar";
-import { formatCommentDate } from "@/lib/utils/comments";
+import { formatCommentDate } from "@/lib/utils/format";
-import { ArrowDown, ArrowUp, ThumbsDown, ThumbsUp } from "lucide-react";
 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";
 
-const Comment = ({
+const Comment = React.memo(
-  comment,
+  (props: {
-  setReplyComment,
-}: {
     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;
+
     return (
-    <div className="">
+      // <div className="">
-      <div className="relative flex items-start gap-2 hover:bg-muted">
+
-        <div className="absolute left-4 top-4 h-full w-4 border-l" />
+      //   </div>
+      //   <div className="comment-replies" style={{ marginLeft: "20px" }}>
+      //     {comment.children.map((child) => (
+      //       <Comment
+      //         key={child.id}
+      //         comment={child}
+      //         setReplyComment={setReplyComment}
+      //         setRef={(el) => setRef(el)} // Ensure this is stable
+      //         session={session}
+      //         level={level + 1}
+      //       />
+      //     ))}
+      //   </div>
+      // </div>
+
+      <div
+        className={cn(
+          level > 0 && "ml-4 border-l",
+          comment.children.length && "border-l",
+        )}
+      >
+        <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>
+          <div className="w-full">
-          <div className="flex items-center gap-2">
+            <div className="flex w-full items-center gap-2">
               <h5 className="text-lg font-medium capitalize">
-              {comment.author?.name}
+                {comment.author?.name} {level}
               </h5>
-            <span className="text-xs text-muted-foreground">
+              {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 items-center gap-2 pb-6">
+            <div className="flex w-full items-center gap-2 pb-6">
               <CommentVoteButton vote commentId={comment.id} />
               <CommentVoteButton vote={false} commentId={comment.id} />
               <Button
@@ -43,20 +79,45 @@ const Comment = ({
               >
                 Antworten
               </Button>
+              <div className="ml-auto">
+                {isAuthor && <CommentDeleteButton commentId={comment.id} />}
               </div>
             </div>
           </div>
-      <div className="comment-replies" style={{ marginLeft: "20px" }}>
+        </div>
+        {comment.children && comment.children.length > 0 && (
+          <div className="pl-4">
             {comment.children.map((child) => (
               <Comment
                 key={child.id}
+                {...props}
                 comment={child}
-            setReplyComment={setReplyComment}
+                level={level + 1}
               />
             ))}
           </div>
+        )}
       </div>
-  );
+      // <div className={`flex ${level > 0 ? "ml-4" : ""} w-full`}>
-};
+      //   <div
+      //     className={`${comment.children?.length || level > 0 ? "border-l" : ""} w-full pl-2`}
+      //   >
 
+      //     {comment.children && comment.children.length > 0 && (
+      //       <div className="pl-4">
+      //         {comment.children.map((child) => (
+      //           <Comment
+      //             key={child.id}
+      //             {...props}
+      //             comment={child}
+      //             level={level + 1}
+      //           />
+      //         ))}
+      //       </div>
+      //     )}
+      //   </div>
+      // </div>
+    );
+  },
+);
 export default Comment;

src/components/editor/comment-editor.tsx

@@ -22,7 +22,6 @@ const extentions = [
     codeBlock: false,
     horizontalRule: false,
     listItem: false,
-
     heading: {
       levels: [4, 5],
     },
@@ -65,6 +64,7 @@ const CommentEditor = ({
   return (
     <EditorRoot>
       <EditorContent
+        immediatelyRender={false}
         slotAfter={slotAfter}
         extensions={extentions}
         editorProps={{

src/components/editor/index.tsx

@@ -23,12 +23,13 @@ const Editor = ({
   return (
     <EditorRoot>
       <EditorContent
+        immediatelyRender={false}
         className="editor"
         slotBefore={!readOnly && <MenuBar />}
         extensions={defaultExtensions}
         editorProps={{
           attributes: {
-            class: "min-h-screen w-full",
+            class: !readOnly ? "min-h-screen " : "",
           },
           handleDOMEvents: {
             keydown: (_view, event) => handleCommandNavigation(event),

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/button.tsx

@@ -25,6 +25,7 @@ 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: {

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/utils/comments.ts

@@ -34,13 +34,3 @@ export function buildCommentTree(comments: Comment[]): Array<CommentNode> {
   });
   return rootComments;
 }
-
-export const formatCommentDate = (date: Date) => {
-  const options: Intl.DateTimeFormatOptions = {
-    year: "numeric",
-    month: "short",
-    day: "numeric",
-  };
-
-  return new Intl.DateTimeFormat("de-DE", options).format(date);
-};

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/server/actions/comment.ts

@@ -5,25 +5,30 @@ import { commentSchema } from "@/lib/validation/zod/comment";
 import { api } from "@/trpc/server";
 import { revalidatePath } from "next/cache";
 import { z } from "zod";
+import { actionClient } from ".";
 
-export async function createComment(
+export const createComment = actionClient
-  comment: z.infer<typeof commentSchema>,
+  .schema(
-  articleId: string,
+    z.object({
-) {
+      comment: commentSchema,
+      articleId: z.string(),
+    }),
+  )
+  .action(async ({ parsedInput: { comment, articleId } }) => {
     const commentId = await api.comment.create({
       comment,
       articleId,
     });
     if (!commentId)
       return {
-      success: false,
+        failure: "Incorrect credentials",
-      message: "Error creating comment",
       };
     revalidatePath(appRoutes.article(articleId));
     return {
+      data: commentId,
       success: true,
     };
-}
+  });
 
 export async function deleteComment(commentId: string) {
   const articleId = (

src/server/actions/index.ts

@@ -0,0 +1,3 @@
+import { createSafeActionClient } from "next-safe-action";
+
+export const actionClient = createSafeActionClient();

src/server/api/routers/comment.ts

@@ -1,10 +1,35 @@
-import { and, eq } from "drizzle-orm";
+import { and, desc, eq } from "drizzle-orm";
 import { createTRPCRouter, protectedProcedure, publicProcedure } from "../trpc";
-import { articles, comments } from "@/server/db/schema";
+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({
@@ -20,10 +45,17 @@ export const commentRouter = createTRPCRouter({
           authorId: ctx.session.user.id,
           articleId: input.articleId,
         })
-        .returning({
+        .returning();
-          id: comments.id,
+      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?.id;
+      return { ...comment, author };
     }),
   delete: protectedProcedure
     .input(
@@ -44,6 +76,7 @@ export const commentRouter = createTRPCRouter({
           id: comments.id,
           articleId: comments.articleId,
         });
+
       return comment;
     }),
 });

src/server/db/schema/article.ts

@@ -3,9 +3,9 @@ import { createId, createTable } from "./schema-utils";
 import { JSONContent } from "novel";
 import { relations, sql } from "drizzle-orm";
 import { categories, Category } from "./category";
-import { User } from "next-auth";
 import { users } from "./auth";
 import { Comment, comments } from "./comments";
+import { PublicUser } from ".";
 
 export const articles = createTable(
   "article",
@@ -47,7 +47,7 @@ export const articleRelations = relations(articles, ({ one, many }) => ({
 }));
 
 export type Article = typeof articles.$inferSelect & {
-  author?: User;
+  author?: PublicUser;
   category?: Category;
   comments?: Array<Comment>;
 };

src/server/db/schema/comments.ts

@@ -11,7 +11,7 @@ import { JSONContent } from "novel";
 import { relations, sql } from "drizzle-orm";
 import { createId, createTable } from "./schema-utils";
 import { users } from "./auth";
-import { User } from "next-auth";
+import { PublicUser } from ".";
 
 export const comments = createTable(
   "comment",
@@ -56,7 +56,7 @@ export const commentsRelations = relations(comments, ({ many, one }) => ({
 
 export type Comment = typeof comments.$inferSelect & {
   article?: Article;
-  author?: User;
+  author?: PublicUser;
 };
 
 export type CommentNode = Comment & {

src/server/db/schema/index.ts

@@ -1,4 +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/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

@@ -70,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: [