From 78d21fd7ee73b7a11c83b29154c2a436f9bdc7ac Mon Sep 17 00:00:00 2001
From: LuizGarbini <garbasneto@gmail.com>
Date: Wed, 28 Jan 2026 17:27:41 -0300
Subject: [PATCH 1/2] refactor(likes): implement drawer mode for Likes
 component

- Added support for 'drawer' mode in the Likes component, allowing it to be displayed in a drawer instead of a dialog.
- Introduced a mode prop to toggle between dialog and drawer views.
- Updated the component structure to accommodate the new drawer functionality and improved loading state handling.
---
 apps/web/next-env.d.ts                  |   2 +-
 apps/web/src/components/likes/likes.tsx | 159 ++++++++++++++----------
 2 files changed, 94 insertions(+), 67 deletions(-)

diff --git a/apps/web/next-env.d.ts b/apps/web/next-env.d.ts
index a3e4680c..c4b7818f 100644
--- a/apps/web/next-env.d.ts
+++ b/apps/web/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import './.next/dev/types/routes.d.ts'
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/web/src/components/likes/likes.tsx b/apps/web/src/components/likes/likes.tsx
index 96af7108..1ce23998 100644
--- a/apps/web/src/components/likes/likes.tsx
+++ b/apps/web/src/components/likes/likes.tsx
@@ -12,6 +12,13 @@ import {
   DialogHeader,
   DialogTrigger,
 } from '@plotwist/ui/components/ui/dialog'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@plotwist/ui/components/ui/drawer'
 import { Skeleton } from '@plotwist/ui/components/ui/skeleton'
 import { DialogTitle } from '@radix-ui/react-dialog'
 import { Heart } from 'lucide-react'
@@ -23,10 +30,13 @@ import { useLanguage } from '@/context/language'
 import { cn } from '@/lib/utils'
 import { ProBadge } from '../pro-badge'
 
+type LikesMode = 'dialog' | 'drawer'
+
 type LikesProps = {
   className?: string
   likeCount: number
   entityId: string
+  mode?: LikesMode
 } & PropsWithChildren
 
 export function Likes({
@@ -34,6 +44,7 @@ export function Likes({
   likeCount,
   entityId,
   children,
+  mode,
 }: LikesProps) {
   const { dictionary, language } = useLanguage()
   const [open, setOpen] = useState(false)
@@ -43,84 +54,100 @@ export function Likes({
 
   if (likeCount === 0) return null
 
-  const Content = () => {
-    if (isLoading || !data) {
-      return (
-        <>
-          {Array.from({ length: 5 }).map(_ => (
+  const resolvedMode: LikesMode =
+    mode ??
+    (typeof window !== 'undefined' &&
+    window.matchMedia('(max-width: 768px)').matches
+      ? 'drawer'
+      : 'dialog')
+
+  const Trigger = children || (
+    <div
+      className={cn(
+        'rounded-md flex items-center bg-background border px-3 py-1 text-xs z-20 gap-1.5 cursor-pointer tabular-nums',
+        className
+      )}
+    >
+      <Heart size={12} className="fill-foreground" />
+      <NumberFlow value={likeCount} />
+    </div>
+  )
+
+  const Content = (
+    <>
+      {isLoading || !data
+        ? Array.from({ length: 5 }).map(() => (
             <div key={v4()} className="flex items-center">
               <div className="flex items-center gap-1">
                 <Skeleton className="size-10 rounded-full" />
-                <Skeleton className="w-[10ch] h-[2ex] ml-2 mr-2 " />
+                <Skeleton className="w-[10ch] h-[2ex] ml-2 mr-2" />
               </div>
-
               <Skeleton className="w-[5ch] h-[2ex] ml-auto" />
             </div>
+          ))
+        : data.likes.map(({ user, id }) => (
+            <div key={id} className="flex items-center">
+              <Link
+                href={`/${language}/${user.username}`}
+                className="flex items-center gap-1"
+              >
+                <Avatar className="size-10 border text-[10px]">
+                  {user.avatarUrl && (
+                    <AvatarImage
+                      src={user.avatarUrl}
+                      className="object-cover"
+                    />
+                  )}
+                  <AvatarFallback>
+                    {user.username[0].toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+
+                <span className="ml-2 mr-2 truncate text-sm">
+                  {user.username}
+                </span>
+              </Link>
+
+              {user.subscriptionType === 'PRO' && <ProBadge />}
+
+              <Link
+                href={`/${language}/${user.username}`}
+                className="ml-auto whitespace-nowrap pl-8 text-xs text-muted-foreground hover:underline"
+              >
+                {dictionary.review_likes.view_profile}
+              </Link>
+            </div>
           ))}
-        </>
-      )
-    }
+    </>
+  )
 
+  if (resolvedMode === 'dialog') {
     return (
-      <>
-        {data.likes.map(({ user, id }) => (
-          <div key={id} className="flex items-center">
-            <Link
-              href={`/${language}/${user.username}`}
-              className="flex items-center gap-1"
-            >
-              <Avatar className="size-10 border text-[10px]">
-                {user.avatarUrl && (
-                  <AvatarImage src={user.avatarUrl} className="object-cover" />
-                )}
-
-                <AvatarFallback>
-                  {user.username[0].toUpperCase()}
-                </AvatarFallback>
-              </Avatar>
-
-              <span className="ml-2 mr-2 truncate text-sm">
-                {user.username}
-              </span>
-            </Link>
-
-            {user.subscriptionType === 'PRO' && <ProBadge />}
-
-            <Link
-              href={`/${language}/${user.username}`}
-              className="ml-auto whitespace-nowrap pl-8 text-xs text-muted-foreground hover:underline"
-            >
-              {dictionary.review_likes.view_profile}
-            </Link>
-          </div>
-        ))}
-      </>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>{Trigger}</DialogTrigger>
+
+        <DialogContent className="flex max-h-[642px] flex-col overflow-y-auto">
+          <DialogHeader className="mb-2">
+            <DialogTitle>{dictionary.likes}</DialogTitle>
+          </DialogHeader>
+
+          {Content}
+        </DialogContent>
+      </Dialog>
     )
   }
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        {children || (
-          <div
-            className={cn(
-              'rounded-md flex items-center bg-background border px-3 py-1 text-xs z-20 gap-1.5 cursor-pointer tabular-nums',
-              className
-            )}
-          >
-            <Heart size={12} className="fill-foreground" />
-            <NumberFlow value={likeCount} />
-          </div>
-        )}
-      </DialogTrigger>
-
-      <DialogContent className="flex max-h-[642px] flex-col overflow-y-auto">
-        <DialogHeader className="mb-2">
-          <DialogTitle>{dictionary.likes}</DialogTitle>
-        </DialogHeader>
-
-        <Content />
-      </DialogContent>
-    </Dialog>
+    <Drawer open={open} onOpenChange={setOpen}>
+      <DrawerTrigger asChild>{Trigger}</DrawerTrigger>
+
+      <DrawerContent className="px-4 pb-4">
+        <DrawerHeader>
+          <DrawerTitle>{dictionary.likes}</DrawerTitle>
+        </DrawerHeader>
+
+        {Content}
+      </DrawerContent>
+    </Drawer>
   )
 }

From de61d353920b0b526b5e4995e8d26f4d7778664c Mon Sep 17 00:00:00 2001
From: LuizGarbini <garbasneto@gmail.com>
Date: Wed, 28 Jan 2026 17:35:49 -0300
Subject: [PATCH 2/2] fix(next-env): standardize import syntax in next-env.d.ts

---
 apps/web/next-env.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/next-env.d.ts b/apps/web/next-env.d.ts
index c4b7818f..a3e4680c 100644
--- a/apps/web/next-env.d.ts
+++ b/apps/web/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import './.next/dev/types/routes.d.ts'
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.