added zustand and global dialog component

Dockerfile

@@ -0,0 +1,15 @@
+FROM node:18-alpine
+
+RUN npm install -g pnpm
+
+WORKDIR /app
+
+COPY package.json pnpm-lock.yaml ./
+
+RUN pnpm install --frozen-lockfile
+
+COPY . .
+
+RUN pnpm build
+
+CMD ["pnpm", "start"]

deploy.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+set -e
+
+if [ -z "$1" ]; then
+  echo "Usage: $0 <project_path>"
+  exit 1
+fi
+
+PROJECT_PATH=$1
+
+echo "Deploying project..."
+cd "$PROJECT_PATH" || { echo "Directory not found: $PROJECT_PATH"; exit 1; }
+git pull origin production
+docker compose up -d --no-deps --build nextapp
+echo "Deployment finished!"

docker-compose.yml

@@ -0,0 +1,43 @@
+services:
+  nextapp:
+    build: .
+    deploy:
+      update_config:
+        parallelism: 1
+        delay: 5s
+        order: start-first
+    container_name: logipedia
+    restart: always
+    expose:
+      - "3000"
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.logipedia.rule=Host(`logipedia.shortman.me`)"
+      - "traefik.http.routers.logipedia.entrypoints=websecure"
+      - "traefik.http.routers.logipedia.tls.certresolver=myresolver"
+    networks:
+      - logipedia_network
+      - webproxy
+  db:
+    image: postgres:latest
+    container_name: logipedia-db
+    restart: always
+    shm_size: 128mb
+    env_file:
+      - .env
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+    ports:
+      - "5432:5432"
+    networks:
+      - logipedia_network
+
+volumes:
+  pgdata:
+    driver: local
+
+networks:
+  logipedia_network:
+    driver: bridge
+  webproxy:
+    external: true

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,

next.config.js

@@ -6,6 +6,9 @@ import "./src/env.js";
 
 /** @type {import("next").NextConfig} */
 const config = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
   experimental: {
     serverActions: {
       bodySizeLimit: "2mb",

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

@@ -1,22 +1,24 @@
 {
-  "name": "wiki-antifa",
+  "name": "logipedia",
   "version": "0.1.0",
   "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,11 +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",
@@ -63,12 +68,17 @@
     "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",
     "tailwindcss-animate": "^1.0.7",
+    "tiptap-extension-resize-image": "^1.2.1",
     "use-debounce": "^10.0.4",
-    "zod": "^3.24.2"
+    "winston": "^3.17.0",
+    "zod": "^3.24.2",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@types/eslint": "^8.56.10",
@@ -77,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"
   },

public/placeholder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>

seed-data/index.ts

@@ -1,8 +1,9 @@
 import "dotenv/config";
+import { env } from "@/env";
 import { db } from "../src/server/db";
 import { articles, categories, users } from "../src/server/db/schema";
 
-async function seed() {
+async function developmentSeed() {
   const usersData = Array.from({ length: 100 }).map((_, i) => ({
     name: `User ${i + 1}`,
     email: `user${i + 1}@example.com`,
@@ -37,9 +38,29 @@ async function seed() {
   console.log("Seeded " + a.length + " articles");
 }
 
+async function productionSeed() {
+  const user = await db.query.users.findFirst();
+  if (user) {
+    console.log("Skipped seeding, user already exists");
+    return;
+  }
+  const initialUser = {
+    name: "Admin",
+    email: "payblot@gmail.com",
+    role: 7,
+  };
+  await db.insert(users).values(initialUser);
+  console.log("Seeded user");
+}
+
 async function init() {
   try {
-    await seed();
+    if (env.NODE_ENV === "development") await developmentSeed();
+    else if (env.NODE_ENV === "production") await productionSeed();
+    else
+      console.log(
+        "Skipped seeding, NODE_ENV is not set to development or production",
+      );
   } catch (error) {
     console.error(error);
   } finally {

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

@@ -1,62 +1,67 @@
-import RenderArticle from "@/components/article/render-article";
-import BreadNavigator from "@/components/bread-navigator";
-import { Button } from "@/components/ui/button";
-import { appRoutes } from "@/config";
-import { hasPermission, Role } from "@/lib/validation/permissions";
+import React from "react";
+import { notFound } from "next/navigation";
 import { auth } from "@/server/auth";
 import { api } from "@/trpc/server";
-import { Edit, Edit2Icon, Edit3, MoreVertical, Trash } from "lucide-react";
+import { hasPermission, Role } from "@/lib/validation/permissions";
+import { appRoutes } from "@/config";
+
 import Link from "next/link";
-import { notFound } from "next/navigation";
-import React from "react";
+import RenderContent from "@/components/editor/render-content";
+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 });
+  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="space-y-2">
-      <div className="flex w-full items-center justify-between">
-        <div className="w-full">
-          <BreadNavigator
-            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>
+    <SocketProvider>
+      <div className="w-full max-w-reader px-12">
         {isEditor && (
-          <div className="flex w-full justify-end space-x-2">
-            <Button asChild variant={"outline"}>
-              <Link href={appRoutes.editArticle(article.slug)}>
-                <Edit className="size-4" />
-                <span>Bearbeiten</span>
-              </Link>
-            </Button>
-            <Button size={"icon"} variant={"outline"}>
-              <MoreVertical className="size-4" />
-            </Button>
+          <div className="flex w-full items-center">
+            <Badge
+              className="size-max"
+              variant={article.published ? "outline" : "destructive"}
+            >
+              {article.published ? "Veröffentlicht" : "Draft"}
+            </Badge>
+
+            <div className="flex w-full justify-end gap-2">
+              <Button asChild variant={"outline"}>
+                <Link href={appRoutes.editArticle(article.slug)}>
+                  <Edit className="size-4" />
+                  <span>Bearbeiten</span>
+                </Link>
+              </Button>
+              <Button size={"icon"} variant={"outline"}>
+                <MoreVertical className="size-4" />
+              </Button>
+            </div>
           </div>
         )}
-      </div>
-      <h1 className="text-4xl font-bold">{article.title}</h1>
+        <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>
 
-      {article?.content?.length ? (
-        <RenderArticle content={article.content} />
-      ) : null}
-    </div>
+        <div className="flex h-64 items-center justify-center">empty</div>
+      </div>
+    </SocketProvider>
   );
 }
 

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

@@ -24,6 +24,7 @@ async function Page({ params }: CategoryPageProps) {
       articles: true,
     },
   });
+  console.log(category);
 
   if (!category) return notFound();
 

src/app/(PAGES)/layout.tsx

@@ -1,5 +1,7 @@
+import GlobalDialog from "@/components/global-dialog";
 import { AppSidebar } from "@/components/layout/app-sidebar";
 import Navbar from "@/components/layout/navbar";
+import { SessionProvider } from "@/components/session-provider";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import { auth } from "@/server/auth";
 import { api, HydrateClient } from "@/trpc/server";
@@ -11,13 +13,16 @@ async function Layout({ children }: { children: React.ReactNode }) {
 
   return (
     <HydrateClient>
-      <SidebarProvider>
-        <AppSidebar user={session?.user} />
-        <div className="h-screen w-full bg-background">
-          <Navbar />
-          <main className="space-y-4 p-4">{children}</main>
-        </div>
-      </SidebarProvider>
+      <SessionProvider session={session}>
+        <GlobalDialog />
+        <SidebarProvider>
+          <AppSidebar user={session?.user} />
+          <div className="h-screen w-full bg-background">
+            <Navbar />
+            <main className="space-y-4 p-4">{children}</main>
+          </div>
+        </SidebarProvider>
+      </SessionProvider>
     </HydrateClient>
   );
 }

src/app/(PAGES)/me/_components/user-form.tsx

@@ -14,21 +14,22 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { z } from "zod";
-import { userProfileSchema } from "@/lib/validation/zod/user";
+import { userSchema } from "@/lib/validation/zod/user";
 import { User } from "next-auth";
 import { updateUserProfile } from "@/server/actions/user";
 import { toast } from "sonner";
 
 function UserForm({ server_user, cb }: { server_user: User; cb?: () => void }) {
-  const form = useForm<z.infer<typeof userProfileSchema>>({
-    resolver: zodResolver(userProfileSchema),
+  const form = useForm<z.infer<typeof userSchema>>({
+    resolver: zodResolver(userSchema),
     defaultValues: {
+      email: server_user.email ?? "",
       name: server_user?.name ?? "",
     },
   });
 
   // 2. Define a submit handler.
-  async function onSubmit(values: z.infer<typeof userProfileSchema>) {
+  async function onSubmit(values: z.infer<typeof userSchema>) {
     // Do something with the form values.
     // ✅ This will be type-safe and validated.
     const { success } = await updateUserProfile(values);

src/app/(PAGES)/page.tsx

@@ -10,12 +10,12 @@ import { Button } from "@/components/ui/button";
 import Link from "next/link";
 
 export default async function Home() {
-  const categories = await api.category.getAll({ limit: 6 });
-  const articles = await api.article.getAll({ limit: 6 });
+  const categories = await api.category.getMany({ limit: 6 });
+  const articles = await api.article.getMany({ limit: 6 });
   return (
     <>
       <Alert>
-        <div className="flex gap-2">
+        <div className="flex flex-col gap-2 sm:flex-row">
           <Icons.logo className="size-8" />
           <div>
             <AlertTitle className="font-bold">
@@ -25,7 +25,7 @@ export default async function Home() {
               Lorem ipsum, dolor sit amet consectetur adipisicing elit.
             </AlertDescription>
           </div>
-          <Button asChild className="ml-auto">
+          <Button asChild className="sm:ml-auto">
             <Link href={appRoutes.about}>
               Erfahre mehr über {appConfig.name}
             </Link>

src/app/api/url-preview/route.ts

@@ -1,8 +1,7 @@
 import * as cheerio from "cheerio";
-import { NextApiRequest } from "next";
 import { NextResponse } from "next/server";
 
-export async function GET(req: NextApiRequest) {
+export async function GET(req: Request) {
   if (req.method !== "GET") {
     return NextResponse.json({ error: "Method not allowed" });
   }

src/app/layout.tsx

@@ -6,10 +6,11 @@ import { type Metadata } from "next";
 import { TRPCReactProvider } from "@/trpc/react";
 import { Toaster } from "@/components/ui/sonner";
 import { ThemeProvider } from "@/components/theme-provider";
+import { appConfig } from "@/config";
 
 export const metadata: Metadata = {
-  title: "Create T3 App",
-  description: "Generated by create-t3-app",
+  title: appConfig.name,
+  description: appConfig.description,
   icons: [{ rel: "icon", url: "/favicon.ico" }],
 };
 

src/components/article/article-card.tsx

@@ -13,14 +13,17 @@ import {
 } from "@/components/ui/card";
 import Avatar from "../avatar";
 import { Icons } from "../icons";
+import { Badge } from "../ui/badge";
 
 function ArticleCard({
   title,
   slug,
   author,
+  published,
   createdAt,
-}: Pick<Article, "title" | "slug" | "createdAt" | "author">) {
+}: Pick<Article, "title" | "slug" | "createdAt" | "author" | "published">) {
   const authorName = author?.name ?? `${appConfig.name} Team`;
+
   return (
     <Link href={appRoutes.article(slug)}>
       <Card className="group flex h-full flex-col justify-between">
@@ -37,11 +40,21 @@ function ArticleCard({
             )}
             <span className="text-sm text-muted-foreground">{authorName}</span>
           </div>
-          <p className="text-sm text-muted-foreground">
-            {createdAt.toLocaleDateString("de-DE", {
-              dateStyle: "long",
-            })}
-          </p>
+          <div className="flex items-center space-x-2">
+            {typeof published === "boolean" && (
+              <Badge
+                className="size-max px-2 py-px text-xs"
+                variant={published ? "outline" : "destructive"}
+              >
+                {published ? "Veröffentlicht" : "Draft"}
+              </Badge>
+            )}
+            <p className="text-sm text-muted-foreground">
+              {createdAt.toLocaleDateString("de-DE", {
+                dateStyle: "long",
+              })}
+            </p>
+          </div>
         </CardFooter>
       </Card>
     </Link>

src/components/article/article-filter-bar.tsx

@@ -85,6 +85,7 @@ function ArticleFilterBar({
 
           <CategorySelect
             className="w-full"
+            initialValue={filter.category}
             onSelect={(category) => {
               onFilterChange({
                 category: category?.length ? category : undefined,

src/components/article/article-form.tsx

@@ -25,7 +25,9 @@ import CategorySelect from "@/components/category/category-select";
 import { CheckCircle, XCircle } from "lucide-react";
 import PublishArticleAlertDialog from "./publish-article-alert-dialog";
 import { Label } from "@/components/ui/label";
-import Editor from "../editor";
+import dynamic from "next/dynamic";
+import { appRoutes } from "@/config";
+const Editor = dynamic(() => import("../editor"), { ssr: false });
 
 export default ({ server_article }: { server_article: Article }) => {
   const [loading, setLoading] = React.useState(false);
@@ -66,7 +68,7 @@ export default ({ server_article }: { server_article: Article }) => {
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmit)}
-        className="flex w-full flex-col-reverse gap-4 space-y-4 xl:flex-row"
+        className="flex w-full flex-col-reverse gap-4 xl:flex-row"
       >
         <div className="flex w-full max-w-3xl flex-col gap-2">
           <FormField
@@ -77,7 +79,7 @@ export default ({ server_article }: { server_article: Article }) => {
                 <FormControl>
                   <TextareaAutosize
                     cols={1}
-                    className="h-max w-full resize-none text-4xl font-bold focus-visible:outline-none"
+                    className="h-max w-full resize-none bg-transparent text-4xl font-bold focus-visible:outline-none"
                     value={field.value}
                     onChange={(e) => {
                       field.onChange(e);
@@ -110,13 +112,8 @@ export default ({ server_article }: { server_article: Article }) => {
           />
         </div>
 
-        <div
-          className={cn(
-            "top-4 h-max w-full max-w-xl xl:sticky xl:max-w-md",
-            // loading && "border-t-blue-600",
-          )}
-        >
-          <div className="relative w-full space-y-4 overflow-hidden rounded-md border-t-2 bg-muted p-4">
+        <div className={"top-4 h-max w-full max-w-xl xl:sticky xl:max-w-md"}>
+          <div className="relative w-full space-y-4 overflow-hidden rounded-md border bg-background p-4">
             <div
               className={cn(
                 "saving absolute left-0 right-0 top-0 h-0.5 rounded-full bg-primary",
@@ -151,11 +148,11 @@ export default ({ server_article }: { server_article: Article }) => {
                 </span>
               </div>
               <Link
-                href={"/editoren-hilfe"}
+                href={appRoutes.article(server_article.slug)}
                 target="_blank"
                 className="size-max scale-90 p-0 text-xs text-muted-foreground"
               >
-                <span>? Hilfe</span>
+                <span>Ansehen</span>
               </Link>
             </div>
             <FormField
@@ -187,6 +184,7 @@ export default ({ server_article }: { server_article: Article }) => {
                 <FormItem className="w-full">
                   <FormControl>
                     <CategorySelect
+                      className="w-full"
                       initialValue={field.value}
                       onSelect={(categoryId) => {
                         field.onChange(categoryId);

src/components/article/grid/infinite-article-grid.tsx

@@ -4,9 +4,10 @@ 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";
 
 function InfiniteArticlesGrid() {
   const [filter, setFilter] = React.useState<ArticleFilter | undefined>(
@@ -19,6 +20,9 @@ function InfiniteArticlesGrid() {
       },
       {
         getNextPageParam: (lastPage) => lastPage.nextCursor,
+        // staleTime: 60 * 4 * 1000, // 4 minutes stale time
+        refetchOnMount: false, // Prevents unnecessary refetching
+        refetchOnWindowFocus: false, // Avoids refetch when switching tabs
       },
     );
   // Calculate all visible items across all loaded pages
@@ -43,7 +47,7 @@ function InfiniteArticlesGrid() {
         {data?.pages?.length
           ? allItems.map((article, idx) => (
               <li key={`article-${idx}`}>
-                <ArticleCard {...article} />
+                <ArticleCard {...(article as Article)} />
               </li>
             ))
           : null}

src/components/article/render-article.tsx

@@ -1,7 +0,0 @@
-import React from "react";
-
-function RenderArticle({ content }: { content: string }) {
-  return "render article: in work"; //<Editor readOnly editorProviderProps={{ content: content }} />;
-}
-
-export default RenderArticle;

src/components/category/category-select.tsx

@@ -5,18 +5,32 @@ import { Combobox, ComboboxProps } from "../combobox";
 import { Icons } from "../icons";
 
 function CategorySelect(props: Partial<ComboboxProps>) {
-  const { data: categories } = api.category.getAll.useQuery();
+  const { data: categories } = api.category.getMany.useQuery();
+  const initialValue = categories?.find(
+    (c) => c.id === props?.initialValue,
+  )?.slug;
+
   return (
     <Combobox
       {...(props as ComboboxProps)}
+      initialValue={initialValue}
       messageUi={{
         select: "Kategorie auswählen...",
         selectIcon: Icons.category,
         placeholder: "Kategorie suchen...",
         empty: "Keine Kategorien gefunden",
       }}
+      onSelect={(value) => {
+        const id = categories?.find((c) => {
+          return c.slug === value;
+        })?.id!;
+        props?.onSelect?.(id);
+      }}
       data={
-        categories?.map(({ name, id }) => ({ label: name!, value: id! })) ?? []
+        categories?.map(({ name, slug }) => ({
+          label: name,
+          value: slug,
+        })) ?? []
       }
     />
   );

src/components/category/grid/category-grid.tsx

@@ -9,8 +9,8 @@ export const CATEGORY_GRID_CLASS =
 function CategoryGrid({ categories }: { categories: Category[] }) {
   return (
     <menu className={CATEGORY_GRID_CLASS}>
-      {categories.map((category) => (
-        <li key={category.id}>
+      {categories.map((category, idx) => (
+        <li key={idx}>
           <CategoryCard {...category} />
         </li>
       ))}

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";
@@ -18,6 +18,9 @@ export default function InfiniteCategoryGrid() {
       },
       {
         getNextPageParam: (lastPage) => lastPage.nextCursor,
+        staleTime: 60 * 4 * 1000, // 4 minutes stale time
+        refetchOnMount: false, // Prevents unnecessary refetching
+        refetchOnWindowFocus: false, // Avoids refetch when switching tabs
       },
     );
   // Calculate all visible items across all loaded pages

src/components/color-picker/color-picker-popover.tsx

@@ -1,20 +0,0 @@
-"use client";
-
-import ColorPicker, { type ColorPickerProps } from ".";
-import { Button } from "../ui/button";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
-
-export default function ColorPickerPopover(props: ColorPickerProps) {
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button style={{ backgroundColor: props.initialColor }} className="">
-          color
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent>
-        <ColorPicker {...props} />
-      </PopoverContent>
-    </Popover>
-  );
-}

src/components/color-picker/color-picker.css

@@ -1,16 +0,0 @@
-.color-picker .react-colorful {
-  width: 100%;
-  height: 240px;
-}
-.color-picker .react-colorful__saturation {
-  border-radius: 4px 4px 0 0;
-}
-.color-picker .react-colorful__hue {
-  height: 40px;
-  border-radius: 0 0 4px 4px;
-}
-.color-picker .react-colorful__hue-pointer {
-  width: 12px;
-  height: inherit;
-  border-radius: 0;
-}

src/components/color-picker/index.tsx

@@ -1,103 +0,0 @@
-"use client";
-import "./color-picker.css";
-
-import React from "react";
-import { useState, useEffect } from "react";
-import { HexColorPicker } from "react-colorful";
-import { Input } from "../ui/input";
-import { debounce } from "@/lib/utils";
-
-const STORAGE_KEY = "savedColors";
-const MAX_COLORS = 12;
-const SELECT_DEBOUNCE = 500;
-
-export type ColorPickerProps = {
-  onInput?: (color: string) => void;
-  initialColor?: string;
-};
-
-function ColorPicker({ onInput, initialColor }: ColorPickerProps) {
-  const [mounted, setMounted] = useState(false);
-  const [customColors, setCustomColors] = useState<string[]>([]);
-  const [color, setColor] = useState(initialColor ?? "#ff0000");
-
-  // Load colors from localStorage on mount
-  useEffect(() => {
-    if (initialColor?.length) setColor(initialColor);
-    const storageColors = localStorage.getItem(STORAGE_KEY);
-    const storedColors = storageColors ? JSON.parse(storageColors) : [];
-    if (storedColors.length) {
-      setCustomColors(storedColors);
-      if (!initialColor?.length) setColor(storedColors[0]);
-      setMounted(true);
-    }
-  }, []);
-
-  const persistColor = (newColor: string) => {
-    if (newColor.length < 2) return;
-    if (customColors[0] === newColor) return; // Prevent duplicate consecutive colors
-
-    const updatedColors = [
-      newColor,
-      ...customColors.filter((c) => c !== newColor),
-    ].slice(0, MAX_COLORS);
-    console.log(updatedColors);
-
-    setCustomColors(updatedColors);
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(updatedColors));
-  };
-
-  const selectColor = (newColor: string) => {
-    persistColor(newColor);
-    onInput?.(newColor);
-  };
-
-  const selectColorDebounced = debounce((newColor: string) => {
-    selectColor(newColor);
-  }, SELECT_DEBOUNCE);
-
-  const handleColorChange = (newColor: string, skipDebounce = false) => {
-    setColor(newColor);
-    if (skipDebounce)
-      selectColor(newColor); // Delayed save
-    else selectColorDebounced(newColor);
-  };
-
-  return (
-    <div className="color-picker flex flex-col items-center gap-4">
-      {/* React Colorful Picker */}
-      <HexColorPicker
-        color={color}
-        onChange={handleColorChange}
-        className="w-full"
-      />
-
-      {/* Default Input (Native Color Picker) */}
-      <div className="flex w-full gap-2">
-        <div
-          className="size-8 rounded-md border"
-          style={{ backgroundColor: color }}
-        />
-        <Input
-          className="h-8"
-          value={color}
-          onInput={(e) => handleColorChange(e.currentTarget.value)}
-        />
-      </div>
-
-      {/* Display Recent Colors */}
-      <div className="flex flex-wrap gap-2">
-        {customColors.map((col) => (
-          <button
-            key={col}
-            className="size-8 rounded border"
-            style={{ backgroundColor: col }}
-            onClick={() => handleColorChange(col, true)}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export default ColorPicker;

src/components/combobox.tsx

@@ -50,6 +50,7 @@ export function Combobox({
   const [open, setOpen] = React.useState(false);
   const [value, setValue] = React.useState(initialValue ?? "");
   const selectedItem = data.find((item) => item.value === initialValue)!;
+
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>

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/data-table/index.tsx

@@ -36,7 +36,6 @@ export function DataTable<TData, TValue>({
   columns,
   data,
 }: DataTableProps<TData, TValue>) {
-  "use no memo";
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageSize: 25,
     pageIndex: 0,
@@ -67,7 +66,6 @@ export function DataTable<TData, TValue>({
   });
   return (
     <div className="space-y-4">
-      {JSON.stringify(sorting)}
       <div className="flex items-center">
         <Input
           placeholder="Email suchen..."

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/extentions/index.tsx

@@ -18,15 +18,15 @@ import {
   Youtube,
 } from "novel";
 import LinkPreview from "./link-preview";
-import { Heading } from "@tiptap/extension-heading";
 import { cx } from "class-variance-authority";
 import { slashCommand } from "./slash-commands";
+import ImageResize from "tiptap-extension-resize-image";
 
 const placeholder = Placeholder;
 const tiptapLink = TiptapLink.configure({
   HTMLAttributes: {
     class: cx(
-      "text-muted-foreground underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer",
+      "underline text-foreground underline-offset-[3px] hover:text-primary transition-colors cursor-pointer",
     ),
   },
 });
@@ -46,28 +46,30 @@ const tiptapImage = TiptapImage.extend({
   },
 });
 
+const resizeImage = ImageResize.configure({
+  HTMLAttributes: {
+    class: cx("rounded-lg border border-muted"),
+  },
+});
+
 const updatedImage = UpdatedImage.configure({
   HTMLAttributes: {
     class: cx("rounded-lg border border-muted"),
   },
 });
 
-const taskList = TaskList.configure({
-  HTMLAttributes: {
-    class: cx("not-prose pl-2 "),
-  },
-});
+const taskList = TaskList.configure({});
 
 const taskItem = TaskItem.configure({
   HTMLAttributes: {
-    class: cx("flex gap-2 items-start my-4"),
+    class: cx("flex gap-2 items-start "),
   },
   nested: true,
 });
 
 const horizontalRule = HorizontalRule.configure({
   HTMLAttributes: {
-    class: cx("mt-4 mb-6 border-t border-muted-foreground"),
+    class: cx("mt-4 mb-6 border border-border"),
   },
 });
 
@@ -79,6 +81,21 @@ const starterKit = StarterKit.configure({
   heading: {
     levels: [2, 3, 4, 5, 6],
   },
+  bulletList: {
+    HTMLAttributes: {
+      class: cx("list-disc ml-4 px-2 "),
+    },
+  },
+  orderedList: {
+    HTMLAttributes: {
+      class: cx("list-decimal ml-4 px-2 "),
+    },
+  },
+  blockquote: {
+    HTMLAttributes: {
+      class: cx("m-4 border-l-4 border-border pl-4"),
+    },
+  },
   gapcursor: false,
   horizontalRule: false,
 });
@@ -108,6 +125,7 @@ export const defaultExtensions = [
   tiptapLink,
   tiptapImage,
   updatedImage,
+  resizeImage,
   taskList,
   taskItem,
   horizontalRule,

src/components/editor/extentions/link-preview/link-preview-component.tsx

@@ -28,7 +28,7 @@ const InputLink = ({ onSubmit }: { onSubmit: (link: string) => void }) => {
     inputRef.current?.focus();
   }, []);
   return (
-    <form onSubmit={handleSubmit} className="flex gap-2 " autoFocus>
+    <form onSubmit={handleSubmit} className="flex gap-2" autoFocus>
       <Input
         ref={inputRef}
         autoFocus
@@ -36,7 +36,7 @@ const InputLink = ({ onSubmit }: { onSubmit: (link: string) => void }) => {
         placeholder="Enter a link"
         value={link}
         onChange={(e) => setLink(e.target.value)}
-        className="flex-1 focus-visible:ring-transparent border-0"
+        className="flex-1 border-0 focus-visible:ring-transparent"
       />
       <Button
         type="submit"
@@ -63,26 +63,28 @@ const Preview = ({
 
   return (
     <a href={href} target="_blank">
-      <div className=" flex gap-4 flex-col-reverse md:flex-row">
-        <div className="w-full space-y-2">
-          <h2
-            className="text-xl"
-            style={{
-              margin: 0,
-              fontSize: "1.5rem",
-            }}
-          >
-            {title}
-          </h2>
-          <p className="text-sm mt-2">{description}</p>
-          <span className="text-xs text-muted-foreground ">{href}</span>
+      <div className="flex flex-col-reverse gap-4 md:flex-row">
+        <div className="flex w-full flex-col justify-between">
+          <div className="w-full space-y-2">
+            <h2
+              className="text-xl"
+              style={{
+                margin: 0,
+                fontSize: "1.5rem",
+              }}
+            >
+              {title}
+            </h2>
+            <p className="mt-2 text-sm">{description}</p>
+          </div>
+          <span className="text-xs text-muted-foreground">{href}</span>
         </div>
 
         {image?.length ? (
           <img
             src={image}
             alt={title}
-            className="w-full max-w-40 rounded-md object-cover  "
+            className="w-full max-w-40 rounded-md object-cover"
           />
         ) : (
           <div className="size-20 rounded-md bg-muted" />
@@ -98,13 +100,13 @@ export const LinkPreviewComponent: React.FC<NodeViewProps> = ({
   extension,
 }) => {
   const [preview, setPreview] = React.useState<LinkPreviewData | undefined>(
-    (node.attrs?.href?.length && (node.attrs as LinkPreviewData)) ?? undefined
+    (node.attrs?.href?.length && (node.attrs as LinkPreviewData)) ?? undefined,
   );
 
   const [loading, setLoading] = React.useState(false);
 
   return (
-    <NodeViewWrapper as="div" className="p-4 rounded-md bg-background border ">
+    <NodeViewWrapper as="div" className="rounded-md border bg-background p-4">
       {loading ? (
         <Skeleton className="h-8 w-full rounded" />
       ) : preview ? (

src/components/editor/extentions/slash-commands/index.tsx

@@ -14,6 +14,7 @@ import {
 
 import { Command, renderItems, createSuggestionItems } from "novel";
 import { selectionItems } from "../../selector/selection-items";
+import { uploadFile } from "@/server/actions/image";
 
 // const items = selectionItems.filter((item) => !item.inline);
 // const defaultSuggestionItems = items.map((item) => (
@@ -148,10 +149,19 @@ export const suggestionItems = createSuggestionItems([
       input.type = "file";
       input.accept = "image/*";
       input.onchange = async () => {
-        if (input.files?.length) {
+        if (input.files?.[0]) {
           const file = input.files[0];
           const pos = editor.view.state.selection.from;
-          //   uploadFn(file, editor.view, pos);
+          const formData = new FormData();
+          formData.append("file", file);
+          const url = await uploadFile(formData);
+          console.log("URL", url);
+          if (!url) return;
+          editor
+            .chain()
+            .focus()
+            .setImage({ src: url, alt: file.name, title: file.name })
+            .run();
         }
       };
       input.click();

src/components/editor/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import "./styles.css";
+import "./styles/editor.css";
 import {
   EditorContent,
   EditorRoot,
@@ -14,23 +14,31 @@ import { MenuBar } from "./menu/menu-bar";
 const Editor = ({
   onContentChange,
   initialContent,
+  readOnly,
 }: {
   initialContent: JSONContent | null;
-  onContentChange: (content: JSONContent) => void;
+  onContentChange?: (content: JSONContent) => void;
+  readOnly?: boolean;
 }) => {
   return (
     <EditorRoot>
       <EditorContent
-        slotBefore={<MenuBar />}
+        immediatelyRender={false}
+        className="editor"
+        slotBefore={!readOnly && <MenuBar />}
         extensions={defaultExtensions}
         editorProps={{
+          attributes: {
+            class: !readOnly ? "min-h-screen " : "",
+          },
           handleDOMEvents: {
             keydown: (_view, event) => handleCommandNavigation(event),
           },
         }}
+        editable={!readOnly}
         initialContent={initialContent ?? { type: "doc" }}
         onUpdate={({ editor }) => {
-          onContentChange(editor.getJSON());
+          onContentChange?.(editor.getJSON());
         }}
       >
         <SlashCommandComponent />

src/components/editor/menu/bubble-menu.tsx

@@ -7,7 +7,11 @@ import { LinkSelector } from "../selector/link-selector";
 import { TextButtons } from "../selector/text-buttont";
 import { ColorSelector } from "../selector/color-selector";
 
-const BubbleMenu = () => {
+const BubbleMenu = ({
+  hideNodeSelector = false,
+}: {
+  hideNodeSelector?: boolean;
+}) => {
   const { editor } = useEditor();
   const [openNode, setOpenNode] = useState(false);
   const [openColor, setOpenColor] = useState(false);
@@ -27,8 +31,12 @@ const BubbleMenu = () => {
     >
       {!open && (
         <Fragment>
-          <NodeSelector open={openNode} onOpenChange={setOpenNode} />
-          <Separator orientation="vertical" />
+          {!hideNodeSelector && (
+            <>
+              <NodeSelector open={openNode} onOpenChange={setOpenNode} />
+              <Separator orientation="vertical" />
+            </>
+          )}
           <LinkSelector open={openLink} onOpenChange={setOpenLink} />
           <Separator orientation="vertical" />
           <TextButtons />

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/render-content.tsx

@@ -0,0 +1,11 @@
+"use client";
+import dynamic from "next/dynamic";
+import { JSONContent } from "novel";
+import React from "react";
+const Editor = dynamic(() => import("."), { ssr: false });
+
+function RenderContent({ content }: { content: JSONContent }) {
+  return <Editor readOnly initialContent={content} />;
+}
+
+export default RenderContent;

src/components/editor/selector/color-selector.tsx

@@ -15,80 +15,43 @@ export interface BubbleColorMenuItem {
 const TEXT_COLORS: BubbleColorMenuItem[] = [
   {
     name: "Default",
-    color: "var(--novel-black)",
+    color: "var(--foreground)",
   },
   {
     name: "Purple",
-    color: "#9333EA",
+    color: "var(--color-purple-600)",
   },
   {
     name: "Red",
-    color: "#E00000",
+    color: "var(--color-red-600)",
   },
   {
     name: "Yellow",
-    color: "#EAB308",
+    color: "var(--color-yellow-600)",
   },
   {
     name: "Blue",
-    color: "#2563EB",
+    color: "var(--color-blue-600)",
   },
   {
     name: "Green",
-    color: "#008A00",
+    color: "var(--color-emerald-600)",
   },
   {
     name: "Orange",
-    color: "#FFA500",
+    color: "var(--color-orange-600)",
   },
   {
     name: "Pink",
-    color: "#BA4081",
+    color: "var(--color-pink-600)",
   },
   {
     name: "Gray",
-    color: "#A8A29E",
+    color: "var(--color-gray-600)",
   },
 ];
 
-const HIGHLIGHT_COLORS: BubbleColorMenuItem[] = [
-  {
-    name: "Default",
-    color: "var(--novel-highlight-default)",
-  },
-  {
-    name: "Purple",
-    color: "var(--novel-highlight-purple)",
-  },
-  {
-    name: "Red",
-    color: "var(--novel-highlight-red)",
-  },
-  {
-    name: "Yellow",
-    color: "var(--novel-highlight-yellow)",
-  },
-  {
-    name: "Blue",
-    color: "var(--novel-highlight-blue)",
-  },
-  {
-    name: "Green",
-    color: "var(--novel-highlight-green)",
-  },
-  {
-    name: "Orange",
-    color: "var(--novel-highlight-orange)",
-  },
-  {
-    name: "Pink",
-    color: "var(--novel-highlight-pink)",
-  },
-  {
-    name: "Gray",
-    color: "var(--novel-highlight-gray)",
-  },
-];
+const HIGHLIGHT_COLORS: BubbleColorMenuItem[] = TEXT_COLORS;
 
 interface ColorSelectorProps {
   open: boolean;
@@ -100,11 +63,11 @@ export const ColorSelector = ({ open, onOpenChange }: ColorSelectorProps) => {
 
   if (!editor) return null;
   const activeColorItem = TEXT_COLORS.find(({ color }) =>
-    editor.isActive("textStyle", { color })
+    editor.isActive("textStyle", { color }),
   );
 
   const activeHighlightItem = HIGHLIGHT_COLORS.find(({ color }) =>
-    editor.isActive("highlight", { color })
+    editor.isActive("highlight", { color }),
   );
 
   return (
@@ -126,7 +89,7 @@ export const ColorSelector = ({ open, onOpenChange }: ColorSelectorProps) => {
 
       <PopoverContent
         sideOffset={5}
-        className="my-1 flex max-h-80 w-48 flex-col overflow-hidden overflow-y-auto rounded border p-1 shadow-xl "
+        className="my-1 flex max-h-80 w-48 flex-col overflow-hidden overflow-y-auto rounded border p-1 shadow-xl"
         align="start"
       >
         <div className="flex flex-col">

src/components/editor/selector/selection-items.tsx

@@ -9,12 +9,11 @@ import {
   Heading3,
   Heading4,
   ListOrdered,
-  TextIcon,
-  TextQuote,
   SeparatorHorizontalIcon,
   Heading5,
   Heading6,
   QuoteIcon,
+  TypeIcon,
 } from "lucide-react";
 import { EditorInstance } from "novel";
 
@@ -27,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"),
@@ -60,11 +59,15 @@ export const selectionItems: SelectorItem[] = [
     inline: true,
     canRun: (editor) => !editor.can().chain().focus().toggleStrike().run(),
   },
+];
+
+export const selectionItems: SelectorItem[] = [
+  ...inlineSelectorItems,
 
   // blocks
   {
     name: "Text",
-    icon: TextIcon,
+    icon: TypeIcon,
     command: (editor) => editor.chain().focus().clearNodes().run(),
     isActive: (editor) => editor.isActive("paragraph"), //node?.type?.name === "paragraph",
   },

src/components/editor/selector/text-buttont.tsx

@@ -8,9 +8,6 @@ const items = selectionItems.filter((item) => item.inline);
 export const TextButtons = () => {
   const { editor } = useEditor();
   if (!editor) return null;
-  editor.on("selectionUpdate", () => {
-    editor.view.dispatch(editor.state.tr);
-  });
 
   return (
     <div className="flex">

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,34 +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;
-}
-
-.tiptap ul,
-.tiptap ol {
-  margin-left: 1rem;
-  padding: 0.25rem;
-}
-
-.tiptap ul {
-  list-style-type: disc;
-}
-
-.tiptap ol {
-  list-style-type: decimal;
-}
-
 /* Heading styles */
 .tiptap h1,
 .tiptap h2,
@@ -65,72 +41,18 @@
   font-size: 1.125rem; /* Equivalent to text-lg */
 }
 
-.tiptap blockquote {
-  @apply m-4 border-l-4 border-border pl-4;
-  /* border-left: 1rem solid var(--primary);
-  padding-left: 1rem; */
-}
-
-.tiptap hr {
-  margin: 0.25rem 0;
-}
+/* .tiptap blockquote {
+  @apply ;
+} */
 
 ::selection {
   background-color: #5abbf7;
-
-  border-radius: 0.375rem;
 }
 
 .menu-bar button {
   transition-duration: 0s;
 }
 
-.menu-bar .is-active {
-  border-color: var(--primary-color);
-}
-
-/* Task List */
-ul[data-type="taskList"] li > label input[type="checkbox"] {
-  -webkit-appearance: none;
-  appearance: none;
-
-  margin: 0;
-  cursor: pointer;
-  width: 1.2em;
-  height: 1.2em;
-  position: relative;
-  top: 5px;
-  border: 2px solid var(--border);
-  margin-right: 0.3rem;
-  display: grid;
-  border-radius: 0.25rem;
-  place-content: center;
-}
-/* ul[data-type="taskList"] li > label input[type="checkbox"]:hover {
-  background-color: #000;
-}
-ul[data-type="taskList"] li > label input[type="checkbox"]:active {
-  background-color: #000;
-} */
-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 {
-  color: var(--muted-foreground);
-  text-decoration: line-through;
-  text-decoration-thickness: 2px;
-}
-
 .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 AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-const AlertDialog = AlertDialogPrimitive.Root
+const AlertDialog = AlertDialogPrimitive.Root;
 
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
-const AlertDialogPortal = AlertDialogPrimitive.Portal
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
 const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
@@ -19,13 +19,13 @@ const AlertDialogOverlay = React.forwardRef<
   <AlertDialogPrimitive.Overlay
     className={cn(
       "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
     ref={ref}
   />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
@@ -37,13 +37,13 @@ const AlertDialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
+        className,
       )}
       {...props}
     />
   </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
 const AlertDialogHeader = ({
   className,
@@ -52,12 +52,12 @@ const AlertDialogHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-2 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
 
 const AlertDialogFooter = ({
   className,
@@ -66,12 +66,12 @@ const AlertDialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
 
 const AlertDialogTitle = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Title>,
@@ -82,8 +82,8 @@ const AlertDialogTitle = React.forwardRef<
     className={cn("text-lg font-semibold", className)}
     {...props}
   />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 
 const AlertDialogDescription = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Description>,
@@ -94,9 +94,9 @@ const AlertDialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
+));
 AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
+  AlertDialogPrimitive.Description.displayName;
 
 const AlertDialogAction = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Action>,
@@ -107,8 +107,8 @@ const AlertDialogAction = React.forwardRef<
     className={cn(buttonVariants(), className)}
     {...props}
   />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
 const AlertDialogCancel = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
@@ -119,12 +119,12 @@ const AlertDialogCancel = React.forwardRef<
     className={cn(
       buttonVariants({ variant: "outline" }),
       "mt-2 sm:mt-0",
-      className
+      className,
     )}
     {...props}
   />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
   AlertDialog,
@@ -138,4 +138,4 @@ export {
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
-}
+};

src/components/ui/alert.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
   "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
@@ -16,8 +16,8 @@ const alertVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 const Alert = React.forwardRef<
   HTMLDivElement,
@@ -29,8 +29,8 @@ const Alert = React.forwardRef<
     className={cn(alertVariants({ variant }), className)}
     {...props}
   />
-))
-Alert.displayName = "Alert"
+));
+Alert.displayName = "Alert";
 
 const AlertTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -41,8 +41,8 @@ const AlertTitle = React.forwardRef<
     className={cn("mb-1 font-medium leading-none tracking-tight", className)}
     {...props}
   />
-))
-AlertTitle.displayName = "AlertTitle"
+));
+AlertTitle.displayName = "AlertTitle";
 
 const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -53,7 +53,7 @@ const AlertDescription = React.forwardRef<
     className={cn("text-sm [&_p]:leading-relaxed", className)}
     {...props}
   />
-))
-AlertDescription.displayName = "AlertDescription"
+));
+AlertDescription.displayName = "AlertDescription";
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertTitle, AlertDescription };

src/components/ui/avatar.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -13,12 +13,12 @@ const Avatar = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
+      className,
     )}
     {...props}
   />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
 
 const AvatarImage = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
@@ -29,8 +29,8 @@ const AvatarImage = React.forwardRef<
     className={cn("aspect-square h-full w-full", className)}
     {...props}
   />
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
@@ -40,11 +40,11 @@ const AvatarFallback = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className
+      className,
     )}
     {...props}
   />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarImage, AvatarFallback };

src/components/ui/badge.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -20,8 +20,8 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -30,7 +30,7 @@ export interface BadgeProps
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (
     <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

src/components/ui/breadcrumb.tsx

@@ -1,16 +1,16 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Breadcrumb = React.forwardRef<
   HTMLElement,
   React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode
+    separator?: React.ReactNode;
   }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
-Breadcrumb.displayName = "Breadcrumb"
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
 
 const BreadcrumbList = React.forwardRef<
   HTMLOListElement,
@@ -20,12 +20,12 @@ const BreadcrumbList = React.forwardRef<
     ref={ref}
     className={cn(
       "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      className
+      className,
     )}
     {...props}
   />
-))
-BreadcrumbList.displayName = "BreadcrumbList"
+));
+BreadcrumbList.displayName = "BreadcrumbList";
 
 const BreadcrumbItem = React.forwardRef<
   HTMLLIElement,
@@ -36,16 +36,16 @@ const BreadcrumbItem = React.forwardRef<
     className={cn("inline-flex items-center gap-1.5", className)}
     {...props}
   />
-))
-BreadcrumbItem.displayName = "BreadcrumbItem"
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";
 
 const BreadcrumbLink = React.forwardRef<
   HTMLAnchorElement,
   React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean
+    asChild?: boolean;
   }
 >(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
+  const Comp = asChild ? Slot : "a";
 
   return (
     <Comp
@@ -53,9 +53,9 @@ const BreadcrumbLink = React.forwardRef<
       className={cn("transition-colors hover:text-foreground", className)}
       {...props}
     />
-  )
-})
-BreadcrumbLink.displayName = "BreadcrumbLink"
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
 
 const BreadcrumbPage = React.forwardRef<
   HTMLSpanElement,
@@ -69,8 +69,8 @@ const BreadcrumbPage = React.forwardRef<
     className={cn("font-normal text-foreground", className)}
     {...props}
   />
-))
-BreadcrumbPage.displayName = "BreadcrumbPage"
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";
 
 const BreadcrumbSeparator = ({
   children,
@@ -80,13 +80,13 @@ const BreadcrumbSeparator = ({
   <li
     role="presentation"
     aria-hidden="true"
-    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+    className={cn("[&>svg]:h-3.5 [&>svg]:w-3.5", className)}
     {...props}
   >
     {children ?? <ChevronRight />}
   </li>
-)
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
 
 const BreadcrumbEllipsis = ({
   className,
@@ -101,8 +101,8 @@ const BreadcrumbEllipsis = ({
     <MoreHorizontal className="h-4 w-4" />
     <span className="sr-only">More</span>
   </span>
-)
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
 
 export {
   Breadcrumb,
@@ -112,4 +112,4 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   BreadcrumbEllipsis,
-}
+};

src/components/ui/button.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@@ -25,33 +25,34 @@ const buttonVariants = cva(
         sm: "h-8 rounded-md px-3 text-xs",
         lg: "h-10 rounded-md px-8",
         icon: "h-9 w-9",
+        tiny: "size-max p-1",
       },
     },
     defaultVariants: {
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Button.displayName = "Button"
+    );
+  },
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

src/components/ui/checkbox.tsx

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

src/components/ui/command.tsx

@@ -1,12 +1,12 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
 
-import { cn } from "@/lib/utils"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -16,12 +16,12 @@ const Command = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
+      className,
     )}
     {...props}
   />
-))
-Command.displayName = CommandPrimitive.displayName
+));
+Command.displayName = CommandPrimitive.displayName;
 
 const CommandDialog = ({ children, ...props }: DialogProps) => {
   return (
@@ -32,8 +32,8 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
         </Command>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
 const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
@@ -45,14 +45,14 @@ const CommandInput = React.forwardRef<
       ref={ref}
       className={cn(
         "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     />
   </div>
-))
+));
 
-CommandInput.displayName = CommandPrimitive.Input.displayName
+CommandInput.displayName = CommandPrimitive.Input.displayName;
 
 const CommandList = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.List>,
@@ -63,9 +63,9 @@ const CommandList = React.forwardRef<
     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
     {...props}
   />
-))
+));
 
-CommandList.displayName = CommandPrimitive.List.displayName
+CommandList.displayName = CommandPrimitive.List.displayName;
 
 const CommandEmpty = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Empty>,
@@ -76,9 +76,9 @@ const CommandEmpty = React.forwardRef<
     className="py-6 text-center text-sm"
     {...props}
   />
-))
+));
 
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 
 const CommandGroup = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Group>,
@@ -88,13 +88,13 @@ const CommandGroup = React.forwardRef<
     ref={ref}
     className={cn(
       "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
+      className,
     )}
     {...props}
   />
-))
+));
 
-CommandGroup.displayName = CommandPrimitive.Group.displayName
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
 const CommandSeparator = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Separator>,
@@ -105,8 +105,8 @@ const CommandSeparator = React.forwardRef<
     className={cn("-mx-1 h-px bg-border", className)}
     {...props}
   />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
 const CommandItem = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Item>,
@@ -115,14 +115,14 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      className
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className,
     )}
     {...props}
   />
-))
+));
 
-CommandItem.displayName = CommandPrimitive.Item.displayName
+CommandItem.displayName = CommandPrimitive.Item.displayName;
 
 const CommandShortcut = ({
   className,
@@ -132,13 +132,13 @@ const CommandShortcut = ({
     <span
       className={cn(
         "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
+        className,
       )}
       {...props}
     />
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
 
 export {
   Command,
@@ -150,4 +150,4 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
-}
+};

src/components/ui/dialog.tsx

@@ -1,18 +1,18 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
 
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
 
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -21,13 +21,13 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
     )}
     {...props}
   />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -39,7 +39,7 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
+        className,
       )}
       {...props}
     >
@@ -50,8 +50,8 @@ const DialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
   className,
@@ -60,12 +60,12 @@ const DialogHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
-)
-DialogHeader.displayName = "DialogHeader"
+);
+DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({
   className,
@@ -74,12 +74,12 @@ const DialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -89,12 +89,12 @@ const DialogTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -105,8 +105,8 @@ const DialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
@@ -119,4 +119,4 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
-}
+};

src/components/ui/dropdown-menu.tsx

@@ -1,27 +1,27 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
@@ -29,16 +29,16 @@ const DropdownMenuSubTrigger = React.forwardRef<
     className={cn(
       "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   >
     {children}
     <ChevronRight className="ml-auto" />
   </DropdownMenuPrimitive.SubTrigger>
-))
+));
 DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+  DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -48,13 +48,13 @@ const DropdownMenuSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      className,
     )}
     {...props}
   />
-))
+));
 DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+  DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -67,18 +67,18 @@ const DropdownMenuContent = React.forwardRef<
       className={cn(
         "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        className,
       )}
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
@@ -86,12 +86,12 @@ const DropdownMenuItem = React.forwardRef<
     className={cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -101,7 +101,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     checked={checked}
     {...props}
@@ -113,9 +113,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-))
+));
 DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+  DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -125,7 +125,7 @@ const DropdownMenuRadioItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -136,13 +136,13 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
@@ -150,12 +150,12 @@ const DropdownMenuLabel = React.forwardRef<
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -166,8 +166,8 @@ const DropdownMenuSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({
   className,
@@ -178,9 +178,9 @@ const DropdownMenuShortcut = ({
       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
       {...props}
     />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 export {
   DropdownMenu,
@@ -198,4 +198,4 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
-}
+};

src/components/ui/form.tsx

@@ -1,8 +1,8 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
 import {
   Controller,
   FormProvider,
@@ -10,27 +10,27 @@ import {
   type ControllerProps,
   type FieldPath,
   type FieldValues,
-} from "react-hook-form"
+} from "react-hook-form";
 
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
 
-const Form = FormProvider
+const Form = FormProvider;
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName
-}
+  name: TName;
+};
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
+  {} as FormFieldContextValue,
+);
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
   ...props
 }: ControllerProps<TFieldValues, TName>) => {
@@ -38,21 +38,21 @@ const FormField = <
     <FormFieldContext.Provider value={{ name: props.name }}>
       <Controller {...props} />
     </FormFieldContext.Provider>
-  )
-}
+  );
+};
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState, formState } = useFormContext()
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
 
-  const fieldState = getFieldState(fieldContext.name, formState)
+  const fieldState = getFieldState(fieldContext.name, formState);
 
   if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
+    throw new Error("useFormField should be used within <FormField>");
   }
 
-  const { id } = itemContext
+  const { id } = itemContext;
 
   return {
     id,
@@ -61,36 +61,36 @@ const useFormField = () => {
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
-  }
-}
+  };
+};
 
 type FormItemContextValue = {
-  id: string
-}
+  id: string;
+};
 
 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
+  {} as FormItemContextValue,
+);
 
 const FormItem = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const id = React.useId()
+  const id = React.useId();
 
   return (
     <FormItemContext.Provider value={{ id }}>
       <div ref={ref} className={cn("space-y-2", className)} {...props} />
     </FormItemContext.Provider>
-  )
-})
-FormItem.displayName = "FormItem"
+  );
+});
+FormItem.displayName = "FormItem";
 
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
+  const { error, formItemId } = useFormField();
 
   return (
     <Label
@@ -99,15 +99,16 @@ const FormLabel = React.forwardRef<
       htmlFor={formItemId}
       {...props}
     />
-  )
-})
-FormLabel.displayName = "FormLabel"
+  );
+});
+FormLabel.displayName = "FormLabel";
 
 const FormControl = React.forwardRef<
   React.ElementRef<typeof Slot>,
   React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
 
   return (
     <Slot
@@ -121,15 +122,15 @@ const FormControl = React.forwardRef<
       aria-invalid={!!error}
       {...props}
     />
-  )
-})
-FormControl.displayName = "FormControl"
+  );
+});
+FormControl.displayName = "FormControl";
 
 const FormDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
+  const { formDescriptionId } = useFormField();
 
   return (
     <p
@@ -138,19 +139,19 @@ const FormDescription = React.forwardRef<
       className={cn("text-[0.8rem] text-muted-foreground", className)}
       {...props}
     />
-  )
-})
-FormDescription.displayName = "FormDescription"
+  );
+});
+FormDescription.displayName = "FormDescription";
 
 const FormMessage = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message ?? "") : children
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : children;
 
   if (!body) {
-    return null
+    return null;
   }
 
   return (
@@ -162,9 +163,9 @@ const FormMessage = React.forwardRef<
     >
       {body}
     </p>
-  )
-})
-FormMessage.displayName = "FormMessage"
+  );
+});
+FormMessage.displayName = "FormMessage";
 
 export {
   useFormField,
@@ -175,4 +176,4 @@ export {
   FormDescription,
   FormMessage,
   FormField,
-}
+};

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 LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
@@ -20,7 +20,7 @@ const Label = React.forwardRef<
     className={cn(labelVariants(), className)}
     {...props}
   />
-))
-Label.displayName = LabelPrimitive.Root.displayName
+));
+Label.displayName = LabelPrimitive.Root.displayName;
 
-export { Label }
+export { Label };

src/components/ui/popover.tsx

@@ -1,15 +1,15 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Popover = PopoverPrimitive.Root
+const Popover = PopoverPrimitive.Root;
 
-const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverTrigger = PopoverPrimitive.Trigger;
 
-const PopoverAnchor = PopoverPrimitive.Anchor
+const PopoverAnchor = PopoverPrimitive.Anchor;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
@@ -22,12 +22,12 @@ const PopoverContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        className,
       )}
       {...props}
     />
   </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

src/components/ui/select.tsx

@@ -1,16 +1,16 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;
 
-const SelectGroup = SelectPrimitive.Group
+const SelectGroup = SelectPrimitive.Group;
 
-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
@@ -19,8 +19,8 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1",
+      className,
     )}
     {...props}
   >
@@ -29,8 +29,8 @@ const SelectTrigger = React.forwardRef<
       <ChevronDown className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
@@ -40,14 +40,14 @@ const SelectScrollUpButton = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default items-center justify-center py-1",
-      className
+      className,
     )}
     {...props}
   >
     <ChevronUp className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@@ -57,15 +57,15 @@ const SelectScrollDownButton = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default items-center justify-center py-1",
-      className
+      className,
     )}
     {...props}
   >
     <ChevronDown className="h-4 w-4" />
   </SelectPrimitive.ScrollDownButton>
-))
+));
 SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
+  SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
@@ -78,7 +78,7 @@ const SelectContent = React.forwardRef<
         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
+        className,
       )}
       position={position}
       {...props}
@@ -88,7 +88,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           "p-1",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
         )}
       >
         {children}
@@ -96,8 +96,8 @@ const SelectContent = React.forwardRef<
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
@@ -108,8 +108,8 @@ const SelectLabel = React.forwardRef<
     className={cn("px-2 py-1.5 text-sm font-semibold", className)}
     {...props}
   />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
@@ -119,7 +119,7 @@ const SelectItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -130,8 +130,8 @@ const SelectItem = React.forwardRef<
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
@@ -142,8 +142,8 @@ const SelectSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
   Select,
@@ -156,4 +156,4 @@ export {
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
-}
+};

src/components/ui/separator.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
@@ -11,7 +11,7 @@ const Separator = React.forwardRef<
 >(
   (
     { className, orientation = "horizontal", decorative = true, ...props },
-    ref
+    ref,
   ) => (
     <SeparatorPrimitive.Root
       ref={ref}
@@ -20,12 +20,12 @@ const Separator = React.forwardRef<
       className={cn(
         "shrink-0 bg-border",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
+        className,
       )}
       {...props}
     />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
 
-export { Separator }
+export { Separator };

src/components/ui/sheet.tsx

@@ -1,19 +1,19 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Sheet = SheetPrimitive.Root
+const Sheet = SheetPrimitive.Root;
 
-const SheetTrigger = SheetPrimitive.Trigger
+const SheetTrigger = SheetPrimitive.Trigger;
 
-const SheetClose = SheetPrimitive.Close
+const SheetClose = SheetPrimitive.Close;
 
-const SheetPortal = SheetPrimitive.Portal
+const SheetPortal = SheetPrimitive.Portal;
 
 const SheetOverlay = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Overlay>,
@@ -21,14 +21,14 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
     )}
     {...props}
     ref={ref}
   />
-))
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
@@ -46,8 +46,8 @@ const sheetVariants = cva(
     defaultVariants: {
       side: "right",
     },
-  }
-)
+  },
+);
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
@@ -71,8 +71,8 @@ const SheetContent = React.forwardRef<
       {children}
     </SheetPrimitive.Content>
   </SheetPortal>
-))
-SheetContent.displayName = SheetPrimitive.Content.displayName
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 const SheetHeader = ({
   className,
@@ -81,12 +81,12 @@ const SheetHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-2 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
-)
-SheetHeader.displayName = "SheetHeader"
+);
+SheetHeader.displayName = "SheetHeader";
 
 const SheetFooter = ({
   className,
@@ -95,12 +95,12 @@ const SheetFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
-)
-SheetFooter.displayName = "SheetFooter"
+);
+SheetFooter.displayName = "SheetFooter";
 
 const SheetTitle = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Title>,
@@ -111,8 +111,8 @@ const SheetTitle = React.forwardRef<
     className={cn("text-lg font-semibold text-foreground", className)}
     {...props}
   />
-))
-SheetTitle.displayName = SheetPrimitive.Title.displayName
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 const SheetDescription = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Description>,
@@ -123,8 +123,8 @@ const SheetDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-SheetDescription.displayName = SheetPrimitive.Description.displayName
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {
   Sheet,
@@ -137,4 +137,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-}
+};

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 TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const TooltipProvider = TooltipPrimitive.Provider
+const TooltipProvider = TooltipPrimitive.Provider;
 
-const Tooltip = TooltipPrimitive.Root
+const Tooltip = TooltipPrimitive.Root;
 
-const TooltipTrigger = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -21,12 +21,12 @@ const TooltipContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        className,
       )}
       {...props}
     />
   </TooltipPrimitive.Portal>
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

src/config/app.config.ts

@@ -1,5 +1,6 @@
 export type AppConfig = {
   name: string;
+  description: string;
   socials: {
     discord: string;
   };
@@ -7,6 +8,7 @@ export type AppConfig = {
 
 export const appConfig: AppConfig = {
   name: "Logipedia",
+  description: "Logipedia ist Wissen",
 
   socials: {
     discord: "https://discord.com",

src/config/app.routes.ts

@@ -22,6 +22,7 @@ export type AppRoutes = {
 
   // Auth routes
   signin: string;
+  signup: string;
   signout: string;
   profile: string;
 };
@@ -43,6 +44,7 @@ export const appRoutes: AppRoutes = {
 
   // auth
   signin: "/api/auth/signin",
+  signup: "/api/auth/signin",
   signout: "/api/auth/signout",
   profile: "/me",
 };

src/env.js

@@ -13,10 +13,14 @@ export const env = createEnv({
         : z.string().optional(),
     AUTH_DISCORD_ID: z.string(),
     AUTH_DISCORD_SECRET: z.string(),
+    AUTH_GOOGLE_ID: z.string(),
+    AUTH_GOOGLE_SECRET: z.string(),
     DATABASE_URL: z.string().url(),
     NODE_ENV: z
       .enum(["development", "test", "production"])
       .default("development"),
+    SOCKET_IO_PORT: z.number().default(4000),
+    SOCKET_IO_CORS_ORIGIN: z.string().optional(),
   },
 
   /**
@@ -36,8 +40,12 @@ export const env = createEnv({
     AUTH_SECRET: process.env.AUTH_SECRET,
     AUTH_DISCORD_ID: process.env.AUTH_DISCORD_ID,
     AUTH_DISCORD_SECRET: process.env.AUTH_DISCORD_SECRET,
+    AUTH_GOOGLE_ID: process.env.AUTH_GOOGLE_ID,
+    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/logger.ts

@@ -0,0 +1,27 @@
+import winston from "winston";
+const customLevels = {
+  levels: {
+    error: 0,
+    warn: 1,
+    info: 2,
+    sql: 3,
+    debug: 4,
+  },
+  colors: {
+    error: "red",
+    warn: "yellow",
+    info: "green",
+    sql: "magenta",
+    debug: "blue",
+  },
+};
+winston.addColors(customLevels.colors);
+
+export const logger = winston.createLogger({
+  levels: customLevels.levels,
+  format: winston.format.json(),
+  transports: [
+    new winston.transports.File({ filename: "db_queries.log", level: "sql" }),
+    new winston.transports.File({ filename: "errors.log", level: "error" }),
+  ],
+});

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/lib/validation/zod/user.ts

@@ -1,7 +1,28 @@
 import { z } from "zod";
 
-export const userProfileSchema = z.object({
+export const userSchema = z.object({
   name: z.string().min(1),
-  //   image: z.string().optional(),
-  //   email: z.string().email(),
+  email: z.string().email(),
+  image: z.string().optional(),
 });
+
+export const passwordSchema = z.string().min(8, {
+  message: "Passwort muss mindestens 8 Zeichen lang sein",
+});
+
+export const loginSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(1),
+});
+
+export const registerSchema = z
+  .object({
+    name: z.string().min(1),
+    email: z.string().email(),
+    password: passwordSchema,
+    confirmPassword: z.string(),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "Passwörter stimmen nicht überein",
+    path: ["confirmPassword"],
+  });

src/server/actions/article.ts

@@ -28,6 +28,8 @@ export async function updateArticle(
     article: { ...article, content: JSON.parse(article.content) },
     articleId,
   });
+  revalidatePath("/");
+
   //   if (!result[0]?.id?.length) return false;
   // return revalidatePath(`/artikel/${result[0]?.slug}/edit`);
 }
@@ -35,5 +37,7 @@ export async function deleteArticle(articleId: string) {
   const result = await api.article.delete({
     articleId,
   });
+  revalidatePath("/");
+
   // if (!result[0]?.id?.length) return false;
 }

src/server/actions/image.ts

@@ -1,17 +1,30 @@
 "use server";
 import fs from "node:fs/promises";
 import { revalidatePath } from "next/cache";
+import { auth } from "../auth";
+import { hasPermission, Role } from "@/lib/validation/permissions";
 
 export async function uploadFile(formData: FormData) {
+  const session = await auth();
+
+  if (!session || !hasPermission(session.user.role, Role.EDITOR)) return false;
+  console.log("Starting upload");
+
   const file = formData.get("file") as File;
   const arrayBuffer = await file.arrayBuffer();
   const buffer = new Uint8Array(arrayBuffer);
   const filename = `upload-${Date.now()}-${file.name}.png`;
+  console.log("Filename", filename);
+
   try {
     await fs.writeFile(`./public/uploads/${filename}`, buffer);
+    console.log("File uploaded successfully");
+
     revalidatePath("/");
+
     return `/uploads/${filename}`;
   } catch (e) {
+    console.error("Error uploading file:", e);
     return false;
   }
 }

src/server/actions/user.ts

@@ -1,13 +1,11 @@
 "use server";
 
-import { userProfileSchema } from "@/lib/validation/zod/user";
+import { userSchema } from "@/lib/validation/zod/user";
 import { api } from "@/trpc/server";
 import { revalidatePath } from "next/cache";
 import { z } from "zod";
 
-export async function updateUserProfile(
-  profile: z.infer<typeof userProfileSchema>,
-) {
+export async function updateUserProfile(profile: z.infer<typeof userSchema>) {
   const [result] = await api.users.updateProfile({ profile });
   if (!result?.id) return { success: false };
   revalidatePath("/me");

src/server/api/root.ts

@@ -1,17 +1,17 @@
-import { articleRouter } from "./routers/article";
-import { categoryRouter } from "@/server/api/routers/category";
 import { createCallerFactory, createTRPCRouter } from "@/server/api/trpc";
-import { usersRouter } from "./routers/users";
-import { authorRouter } from "./routers/author";
-import { appRouter as globalRouter } from "./routers/app";
-/**
- * This is the primary router for your server.
- *
- * All routers added in /api/routers should be manually added here.
- */
+import {
+  articleRouter,
+  categoryRouter,
+  usersRouter,
+  authorRouter,
+  appRouter as globalRouter,
+  commentRouter,
+} from "./routers";
+
 export const appRouter = createTRPCRouter({
   article: articleRouter,
   category: categoryRouter,
+  comment: commentRouter,
   users: usersRouter,
   author: authorRouter,
   app: globalRouter,

src/server/api/routers/app.ts

@@ -1,29 +1,8 @@
-import { z } from "zod";
+import { desc, eq } from "drizzle-orm";
 import { createTRPCRouter, publicProcedure } from "../trpc";
-import { desc, ilike, like } from "drizzle-orm";
-import {
-  articles as articlesTable,
-  categories as categoriesTable,
-  lower,
-} from "@/server/db/schema";
+import { articles as articlesTable } from "@/server/db/schema";
 
 export const appRouter = createTRPCRouter({
-  searchContent: publicProcedure
-    .input(
-      z.object({
-        query: z.string().optional(),
-      }),
-    )
-    .query(async ({ ctx, input }) => {
-      const articles = await ctx.db.query.articles.findMany({
-        where: ilike(articlesTable.title, "%" + input.query + "%"),
-      });
-      const categories = await ctx.db.query.categories.findMany({
-        where: like(categoriesTable.name, "%" + input.query + "%"),
-      });
-      return { articles, categories };
-    }),
-
   getSidebarMain: publicProcedure.query(async ({ ctx }) => {
     const categories = await ctx.db.query.categories.findMany({
       limit: 3,
@@ -34,6 +13,8 @@ export const appRouter = createTRPCRouter({
     });
     const articles = await ctx.db.query.articles.findMany({
       limit: 3,
+      where: eq(articlesTable.published, true),
+      orderBy: desc(articlesTable.createdAt),
       columns: {
         slug: true,
         title: true,

src/server/api/routers/article.ts

@@ -69,12 +69,15 @@ 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 }) => {
-      return await ctx.db.query.articles.findFirst({
-        where: eq(articles.slug, input.slug),
-        with: { category: true },
-      });
+      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: input?.with,
+      })) as Article;
     }),
   getByCursor: publicProcedure
     .input(
@@ -112,26 +115,24 @@ export const articleRouter = createTRPCRouter({
         sortConfig,
         cursorObj,
       );
+      const user = ctx?.session?.user;
+      const isEditor = user ? hasPermission(user.role, Role.EDITOR) : false;
+      const publishedArg = !isEditor ? eq(articles.published, true) : undefined;
 
       const items = await ctx.db.query.articles.findMany({
-        where: and(
-          cursorArg,
-          categoryArg,
-          queryFilterArg,
-          eq(articles.published, true),
-        ),
+        where: and(cursorArg, categoryArg, queryFilterArg, publishedArg),
         limit: limit + 1,
         orderBy,
         columns: {
           title: true,
           slug: true,
           createdAt: true,
+          published: isEditor ? true : false,
         },
       });
 
       let nextCursor: string | undefined = undefined;
       if (items.length > limit) {
-        console.log("Configure next cursor");
         const cursorItem = items.pop();
         // Create a cursor object with the relevant fields for sorting
         const cursorData: ArticleCursor = {
@@ -150,7 +151,7 @@ export const articleRouter = createTRPCRouter({
         nextCursor,
       };
     }),
-  getAll: publicProcedure
+  getMany: publicProcedure
     .input(
       z
         .object({
@@ -160,11 +161,17 @@ export const articleRouter = createTRPCRouter({
         .optional(),
     )
     .query(async ({ ctx, input }) => {
-      return (await ctx.db.query.articles.findMany({
-        where: input?.categoryId
+      const limit = input?.limit ?? 50;
+      const where = and(
+        input?.categoryId
           ? eq(articles.categoryId, input.categoryId)
           : undefined,
-        limit: input?.limit,
+        eq(articles.published, true),
+      );
+
+      return (await ctx.db.query.articles.findMany({
+        where,
+        limit: limit,
         columns: {
           title: true,
           slug: true,

src/server/api/routers/author.ts

@@ -1,4 +1,4 @@
-import { createTRPCRouter, protectedProcedure, publicProcedure } from "../trpc";
+import { createTRPCRouter, publicProcedure } from "../trpc";
 
 export const authorRouter = createTRPCRouter({
   getCount: publicProcedure.query(async ({ ctx }) => {