refactor: eslint/prettier ➡️ biome

components/comments/comment-actions.tsx

@@ -1,8 +1,14 @@
 "use client";
 
+import {
+  EditIcon,
+  EllipsisIcon,
+  Loader2Icon,
+  ReplyIcon,
+  Trash2Icon,
+} from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
-import { ReplyIcon, EditIcon, Trash2Icon, EllipsisIcon, Loader2Icon } from "lucide-react";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -17,12 +23,12 @@ import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { EditCommentForm, ReplyForm } from "./comment-form";
 import { useSession } from "@/lib/auth-client";
-import { deleteComment, type CommentWithUser } from "@/lib/server/comments";
+import { type CommentWithUser, deleteComment } from "@/lib/server/comments";
+import { EditCommentForm, ReplyForm } from "./comment-form";
 
 type ActionMode =
   | { type: "idle" }
@@ -69,7 +75,13 @@ const CommentActions = ({ comment }: { comment: CommentWithUser }) => {
           <Button
             variant="outline"
             size="sm"
-            onClick={() => setMode(mode.type === "replying" ? { type: "idle" } : { type: "replying" })}
+            onClick={() =>
+              setMode(
+                mode.type === "replying"
+                  ? { type: "idle" }
+                  : { type: "replying" },
+              )
+            }
           >
             <ReplyIcon />
             Reply
@@ -93,7 +105,11 @@ const CommentActions = ({ comment }: { comment: CommentWithUser }) => {
                   disabled={isDeleting}
                   variant="destructive"
                 >
-                  {isDeleting ? <Loader2Icon className="animate-spin" /> : <Trash2Icon />}
+                  {isDeleting ? (
+                    <Loader2Icon className="animate-spin" />
+                  ) : (
+                    <Trash2Icon />
+                  )}
                   Delete
                 </DropdownMenuItem>
               </DropdownMenuContent>
@@ -113,11 +129,16 @@ const CommentActions = ({ comment }: { comment: CommentWithUser }) => {
         </div>
       )}
 
-      <AlertDialog open={mode.type === "confirming-delete"} onOpenChange={(open) => !open && setMode({ type: "idle" })}>
+      <AlertDialog
+        open={mode.type === "confirming-delete"}
+        onOpenChange={(open) => !open && setMode({ type: "idle" })}
+      >
         <AlertDialogContent size="sm">
           <AlertDialogHeader>
             <AlertDialogTitle>Delete comment?</AlertDialogTitle>
-            <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+            <AlertDialogDescription>
+              This action cannot be undone.
+            </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>Cancel</AlertDialogCancel>

components/comments/comment-avatar.tsx

@@ -8,24 +8,22 @@ type CommentAvatarProps = {
   className?: string;
 };
 
-const CommentAvatar = ({ name, image, className }: CommentAvatarProps) => {
-  return (
-    <Avatar className={cn("size-10", className)}>
-      {image && (
-        <AvatarImage
-          {...getImageProps({
-            src: image,
-            alt: `@${name}'s avatar`,
-            width: 40,
-            height: 40,
-          }).props}
-          width={undefined}
-          height={undefined}
-        />
-      )}
-      <AvatarFallback>{name.charAt(0).toUpperCase()}</AvatarFallback>
-    </Avatar>
-  );
-};
+const CommentAvatar = ({ name, image, className }: CommentAvatarProps) => (
+  <Avatar className={cn("size-10", className)}>
+    {image && (
+      <AvatarImage
+        {...getImageProps({
+          src: image,
+          alt: `@${name}'s avatar`,
+          width: 40,
+          height: 40,
+        }).props}
+        width={undefined}
+        height={undefined}
+      />
+    )}
+    <AvatarFallback>{name.charAt(0).toUpperCase()}</AvatarFallback>
+  </Avatar>
+);
 
 export { CommentAvatar };

components/comments/comment-form.tsx

@@ -1,15 +1,19 @@
 "use client";
 
+import { InfoIcon, Loader2Icon } from "lucide-react";
 import { createContext, useContext, useState, useTransition } from "react";
 import { toast } from "sonner";
-import { InfoIcon, Loader2Icon } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { MarkdownIcon } from "@/components/icons";
-import { CommentAvatar } from "./comment-avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Textarea } from "@/components/ui/textarea";
 import { useSession } from "@/lib/auth-client";
 import { createComment, updateComment } from "@/lib/server/comments";
+import { CommentAvatar } from "./comment-avatar";
 
 // Context for lifting form state to parent components
 type CommentFormContextValue = {
@@ -33,7 +37,9 @@ const CommentFormProvider = ({
   const [isPending, startTransition] = useTransition();
 
   return (
-    <CommentFormContext.Provider value={{ content, setContent, isPending, startTransition }}>
+    <CommentFormContext.Provider
+      value={{ content, setContent, isPending, startTransition }}
+    >
       {children}
     </CommentFormContext.Provider>
   );
@@ -130,14 +136,14 @@ const SubmitButton = ({
 
 // Markdown help popover (only shown for new comments)
 const MarkdownHelp = () => (
-  <p className="text-muted-foreground text-[0.8rem] leading-relaxed">
+  <p className="text-[0.8rem] text-muted-foreground leading-relaxed">
     <MarkdownIcon className="mr-1.5 inline-block size-4 align-text-top" />
     <span className="max-md:hidden">Basic&nbsp;</span>
     <Popover>
       <PopoverTrigger asChild>
         <button
           type="button"
-          className="text-primary decoration-primary/40 cursor-pointer font-semibold no-underline decoration-2 underline-offset-4 hover:underline"
+          className="cursor-pointer font-semibold text-primary no-underline decoration-2 decoration-primary/40 underline-offset-4 hover:underline"
         >
           <span>Markdown</span>
           <span className="max-md:hidden">&nbsp;syntax</span>
@@ -149,7 +155,7 @@ const MarkdownHelp = () => (
           Examples:
         </p>
 
-        <ul className="[&>li::marker]:text-muted-foreground my-2 list-inside list-disc pl-1 text-sm [&>li]:my-1.5 [&>li]:pl-1 [&>li]:text-nowrap [&>li::marker]:font-normal">
+        <ul className="my-2 list-inside list-disc pl-1 text-sm [&>li::marker]:font-normal [&>li::marker]:text-muted-foreground [&>li]:my-1.5 [&>li]:text-nowrap [&>li]:pl-1">
           <li>
             <span className="font-bold">**bold**</span>
           </li>
@@ -158,13 +164,20 @@ const MarkdownHelp = () => (
           </li>
           <li>
             [
-            <a href="https://jarv.is" target="_blank" rel="noopener" className="hover:no-underline">
+            <a
+              href="https://jarv.is"
+              target="_blank"
+              rel="noopener"
+              className="hover:no-underline"
+            >
               links
             </a>
             ](https://jarv.is)
           </li>
           <li>
-            <span className="bg-muted rounded-sm px-[0.3rem] py-[0.2rem] font-mono text-sm font-medium">`code`</span>
+            <span className="rounded-sm bg-muted px-[0.3rem] py-[0.2rem] font-medium font-mono text-sm">
+              `code`
+            </span>
           </li>
           <li>
             ~~<span className="line-through">strikethrough</span>~~
@@ -190,7 +203,8 @@ const MarkdownHelp = () => (
 
 // New comment form - for creating top-level comments
 const NewCommentForm = ({ slug }: { slug: string }) => {
-  const { content, setContent, isPending, startTransition } = useCommentFormState();
+  const { content, setContent, isPending, startTransition } =
+    useCommentFormState();
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -229,7 +243,11 @@ const NewCommentForm = ({ slug }: { slug: string }) => {
           <div className="flex justify-between gap-4">
             <MarkdownHelp />
 
-            <SubmitButton isPending={isPending} disabled={!content.trim()} pendingLabel="Posting...">
+            <SubmitButton
+              isPending={isPending}
+              disabled={!content.trim()}
+              pendingLabel="Posting..."
+            >
               Comment
             </SubmitButton>
           </div>
@@ -251,7 +269,8 @@ const ReplyForm = ({
   onCancel: () => void;
   onSuccess?: () => void;
 }) => {
-  const { content, setContent, isPending, startTransition } = useCommentFormState();
+  const { content, setContent, isPending, startTransition } =
+    useCommentFormState();
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -289,11 +308,20 @@ const ReplyForm = ({
           />
 
           <div className="flex justify-end gap-2">
-            <Button type="button" variant="outline" onClick={onCancel} disabled={isPending}>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={onCancel}
+              disabled={isPending}
+            >
               Cancel
             </Button>
 
-            <SubmitButton isPending={isPending} disabled={!content.trim()} pendingLabel="Posting...">
+            <SubmitButton
+              isPending={isPending}
+              disabled={!content.trim()}
+              pendingLabel="Posting..."
+            >
               Reply
             </SubmitButton>
           </div>
@@ -317,7 +345,8 @@ const EditCommentForm = ({
   onCancel: () => void;
   onSuccess?: () => void;
 }) => {
-  const { content, setContent, isPending, startTransition } = useCommentFormState(initialContent);
+  const { content, setContent, isPending, startTransition } =
+    useCommentFormState(initialContent);
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -340,7 +369,12 @@ const EditCommentForm = ({
   };
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-4" data-intent="edit" data-slug={slug}>
+    <form
+      onSubmit={handleSubmit}
+      className="space-y-4"
+      data-intent="edit"
+      data-slug={slug}
+    >
       <div className="min-w-0 flex-1 space-y-4">
         <CommentTextarea
           content={content}
@@ -351,11 +385,20 @@ const EditCommentForm = ({
         />
 
         <div className="flex justify-end gap-2">
-          <Button type="button" variant="outline" onClick={onCancel} disabled={isPending}>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={onCancel}
+            disabled={isPending}
+          >
             Cancel
           </Button>
 
-          <SubmitButton isPending={isPending} disabled={!content.trim()} pendingLabel="Updating...">
+          <SubmitButton
+            isPending={isPending}
+            disabled={!content.trim()}
+            pendingLabel="Updating..."
+          >
             Edit
           </SubmitButton>
         </div>
@@ -364,4 +407,10 @@ const EditCommentForm = ({
   );
 };
 
-export { NewCommentForm, ReplyForm, EditCommentForm, CommentFormProvider, useCommentForm };
+export {
+  NewCommentForm,
+  ReplyForm,
+  EditCommentForm,
+  CommentFormProvider,
+  useCommentForm,
+};

components/comments/comment-single.tsx

@@ -1,12 +1,12 @@
 import Link from "next/link";
 import Markdown from "react-markdown";
 import { RelativeTime } from "@/components/relative-time";
-import { CommentAvatar } from "./comment-avatar";
-import { CommentActions } from "./comment-actions";
-import { remarkGfm, remarkSmartypants } from "@/lib/remark";
 import { rehypeExternalLinks } from "@/lib/rehype";
-import { cn } from "@/lib/utils";
+import { remarkGfm, remarkSmartypants } from "@/lib/remark";
 import type { CommentWithUser } from "@/lib/server/comments";
+import { cn } from "@/lib/utils";
+import { CommentActions } from "./comment-actions";
+import { CommentAvatar } from "./comment-avatar";
 
 const CommentSingle = ({ comment }: { comment: CommentWithUser }) => {
   const divId = `comment-${comment.id.substring(0, 8)}`;
@@ -15,7 +15,11 @@ const CommentSingle = ({ comment }: { comment: CommentWithUser }) => {
     <div className="group scroll-mt-4" id={divId}>
       <div className="flex gap-4">
         <div className="shrink-0">
-          <CommentAvatar name={comment.user.name} image={comment.user.image} className="size-8 md:size-10" />
+          <CommentAvatar
+            name={comment.user.name}
+            image={comment.user.image}
+            className="size-8 md:size-10"
+          />
         </div>
 
         <div className="min-w-0 flex-1">
@@ -28,7 +32,10 @@ const CommentSingle = ({ comment }: { comment: CommentWithUser }) => {
             >
               @{comment.user.name}
             </a>
-            <Link href={`#${divId}`} className="text-muted-foreground text-xs leading-none hover:no-underline">
+            <Link
+              href={`#${divId}`}
+              className="text-muted-foreground text-xs leading-none hover:no-underline"
+            >
               <RelativeTime date={comment.createdAt} />
             </Link>
           </div>
@@ -37,15 +44,29 @@ const CommentSingle = ({ comment }: { comment: CommentWithUser }) => {
             className={cn(
               "isolate max-w-none text-[0.875rem] leading-relaxed",
               "[&_p]:my-5 [&_p]:first:mt-0 [&_p]:last:mb-0",
-              "[&_a]:text-primary [&_a]:decoration-primary/40 [&_a]:no-underline [&_a]:decoration-2 [&_a]:underline-offset-4 [&_a]:hover:underline",
-              "[&_code]:bg-muted [&_code]:rounded-sm [&_code]:px-[0.3rem] [&_code]:py-[0.2rem] [&_code]:font-medium",
-              "group-has-data-[intent=edit]:hidden" // hides the rendered comment when its own edit form is active
+              "[&_a]:text-primary [&_a]:no-underline [&_a]:decoration-2 [&_a]:decoration-primary/40 [&_a]:underline-offset-4 [&_a]:hover:underline",
+              "[&_code]:rounded-sm [&_code]:bg-muted [&_code]:px-[0.3rem] [&_code]:py-[0.2rem] [&_code]:font-medium",
+              "group-has-data-[intent=edit]:hidden", // hides the rendered comment when its own edit form is active
             )}
           >
             <Markdown
               remarkPlugins={[remarkGfm, remarkSmartypants]}
-              rehypePlugins={[[rehypeExternalLinks, { target: "_blank", rel: "noopener noreferrer nofollow" }]]}
-              allowedElements={["p", "a", "em", "strong", "code", "pre", "blockquote", "del"]}
+              rehypePlugins={[
+                [
+                  rehypeExternalLinks,
+                  { target: "_blank", rel: "noopener noreferrer nofollow" },
+                ],
+              ]}
+              allowedElements={[
+                "p",
+                "a",
+                "em",
+                "strong",
+                "code",
+                "pre",
+                "blockquote",
+                "del",
+              ]}
             >
               {comment.content}
             </Markdown>

components/comments/comment-thread.tsx

@@ -1,6 +1,6 @@
-import { CommentSingle } from "./comment-single";
-import { cn } from "@/lib/utils";
 import type { CommentWithUser } from "@/lib/server/comments";
+import { cn } from "@/lib/utils";
+import { CommentSingle } from "./comment-single";
 
 /** Maximum nesting depth for comment threads (0-indexed, so 2 = 3 levels deep) */
 const MAX_NESTING_LEVEL = 2;
@@ -15,26 +15,29 @@ const CommentThread = ({
   replies: CommentWithUser[];
   allComments: Record<string, CommentWithUser[]>;
   level?: number;
-}) => {
-  return (
-    <>
-      <CommentSingle comment={comment} />
+}) => (
+  <>
+    <CommentSingle comment={comment} />
 
-      {replies.length > 0 && (
-        <div className={cn("mt-6 space-y-6", level < MAX_NESTING_LEVEL && "ml-6 border-l-2 pl-6")}>
-          {replies.map((reply) => (
-            <CommentThread
-              key={reply.id}
-              comment={reply}
-              replies={allComments[reply.id] || []}
-              allComments={allComments}
-              level={level + 1}
-            />
-          ))}
-        </div>
-      )}
-    </>
-  );
-};
+    {replies.length > 0 && (
+      <div
+        className={cn(
+          "mt-6 space-y-6",
+          level < MAX_NESTING_LEVEL && "ml-6 border-l-2 pl-6",
+        )}
+      >
+        {replies.map((reply) => (
+          <CommentThread
+            key={reply.id}
+            comment={reply}
+            replies={allComments[reply.id] || []}
+            allComments={allComments}
+            level={level + 1}
+          />
+        ))}
+      </div>
+    )}
+  </>
+);
 
 export { CommentThread };

components/comments/comments-skeleton.tsx

@@ -1,26 +1,24 @@
 import { Skeleton } from "@/components/ui/skeleton";
 
-const CommentsSkeleton = () => {
-  return (
-    <>
-      <Skeleton className="h-32 w-full" />
+const CommentsSkeleton = () => (
+  <>
+    <Skeleton className="h-32 w-full" />
 
-      <div className="flex gap-4">
-        <Skeleton className="size-8 rounded-full md:size-10" />
-        <div className="flex-1 space-y-2">
-          <div className="flex items-center gap-2">
-            <Skeleton className="h-4 w-24" />
-            <Skeleton className="h-3 w-16" />
-          </div>
-          <Skeleton className="h-20 w-full" />
-          <div className="flex gap-2">
-            <Skeleton className="h-8 w-16" />
-            <Skeleton className="h-8 w-8" />
-          </div>
+    <div className="flex gap-4">
+      <Skeleton className="size-8 rounded-full md:size-10" />
+      <div className="flex-1 space-y-2">
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-3 w-16" />
+        </div>
+        <Skeleton className="h-20 w-full" />
+        <div className="flex gap-2">
+          <Skeleton className="h-8 w-16" />
+          <Skeleton className="h-8 w-8" />
         </div>
       </div>
-    </>
-  );
-};
+    </div>
+  </>
+);
 
 export { CommentsSkeleton };

components/comments/comments.tsx

@@ -1,9 +1,9 @@
 import { headers } from "next/headers";
+import { auth } from "@/lib/auth";
+import { type CommentWithUser, getComments } from "@/lib/server/comments";
 import { NewCommentForm } from "./comment-form";
 import { CommentThread } from "./comment-thread";
 import { SignIn } from "./sign-in";
-import { auth } from "@/lib/auth";
-import { getComments, type CommentWithUser } from "@/lib/server/comments";
 
 const Comments = async ({ slug }: { slug: string }) => {
   const session = await auth.api.getSession({
@@ -21,18 +21,20 @@ const Comments = async ({ slug }: { slug: string }) => {
       acc[parentId].push(comment);
       return acc;
     },
-    {} as Record<string, CommentWithUser[]>
+    {} as Record<string, CommentWithUser[]>,
   );
 
-  const rootComments = commentsByParentId["root"] || [];
+  const rootComments = commentsByParentId.root || [];
 
   return (
     <>
       {session ? (
         <NewCommentForm slug={slug} />
       ) : (
-        <div className="bg-muted/40 flex flex-col items-center justify-center gap-y-4 rounded-lg p-6">
-          <p className="text-center font-medium">Join the discussion by signing in:</p>
+        <div className="flex flex-col items-center justify-center gap-y-4 rounded-lg bg-muted/40 p-6">
+          <p className="text-center font-medium">
+            Join the discussion by signing in:
+          </p>
           <SignIn callbackPath={`/${slug}#comments`} />
         </div>
       )}
@@ -49,7 +51,7 @@ const Comments = async ({ slug }: { slug: string }) => {
           ))}
         </div>
       ) : (
-        <div className="text-foreground/80 py-8 text-center text-lg font-medium tracking-tight">
+        <div className="py-8 text-center font-medium text-foreground/80 text-lg tracking-tight">
           Be the first to comment!
         </div>
       )}

components/comments/sign-in.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { env } from "@/lib/env";
+import { Loader2Icon } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
-import { Loader2Icon } from "lucide-react";
-import { Button } from "@/components/ui/button";
 import { GitHubIcon } from "@/components/icons";
+import { Button } from "@/components/ui/button";
 import { signIn } from "@/lib/auth-client";
+import { env } from "@/lib/env";
 
 const SignIn = ({ callbackPath }: { callbackPath?: string }) => {
   const [isLoading, setIsLoading] = useState(false);
@@ -27,7 +27,12 @@ const SignIn = ({ callbackPath }: { callbackPath?: string }) => {
   };
 
   return (
-    <Button onClick={handleSignIn} disabled={isLoading} size="lg" variant="outline">
+    <Button
+      onClick={handleSignIn}
+      disabled={isLoading}
+      size="lg"
+      variant="outline"
+    >
       {isLoading ? <Loader2Icon className="animate-spin" /> : <GitHubIcon />}
       Sign in with GitHub
     </Button>