update product-preview page

src/app/(lobby)/@modal/(.)preview/layout.tsx

@@ -2,7 +2,7 @@ import { AlertDialog, AlertDialogContent } from "@/components/ui/alert-dialog"
 
 export default function ModalLayout({ children }: React.PropsWithChildren) {
   return (
-    <AlertDialog defaultOpen>
+    <AlertDialog defaultOpen={true}>
       <AlertDialogContent className="max-w-3xl overflow-hidden p-0">
         {children}
       </AlertDialogContent>

src/app/(lobby)/@modal/(.)preview/product/[productId]/loading.tsx

@@ -0,0 +1,29 @@
+import { cn } from "@/lib/utils"
+import { Skeleton } from "@/components/ui/skeleton"
+import { PlaceholderImage } from "@/components/placeholder-image"
+import { DialogShell } from "@/components/shells/dialog-shell"
+
+export default function ProductModalLoading() {
+  return (
+    <DialogShell className="flex flex-col gap-2 overflow-visible sm:flex-row">
+      <Skeleton className="absolute right-10 top-4 h-4 w-4" />
+      <PlaceholderImage ratio={16 / 9} className="rounded-none" />
+      <div className="w-full space-y-6 p-6 sm:p-10">
+        <div className="space-y-2.5">
+          <Skeleton className="h-7 w-1/2" />
+          <Skeleton className="h-4 w-10" />
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-4 w-20" />
+        </div>
+        <div className="space-y-2">
+          {Array.from({ length: 4 }, (_, i) => (
+            <Skeleton
+              key={i}
+              className={cn("h-4 w-full", i === 3 && "w-1/2")}
+            />
+          ))}
+        </div>
+      </div>
+    </DialogShell>
+  )
+}

src/app/(lobby)/@modal/(.)preview/product/[productId]/not-found.tsx

@@ -1,7 +1,7 @@
 import { ErrorCard } from "@/components/cards/error-card"
 import { Shell } from "@/components/shells/shell"
 
-export default function ProductNotFound() {
+export default function ProductModalNotFound() {
   return (
     <Shell variant="centered" className="max-w-md">
       <ErrorCard

src/app/(lobby)/@modal/(.)preview/product/[productId]/page.tsx

@@ -11,7 +11,6 @@ import { cn, formatPrice } from "@/lib/utils"
 import { AlertDialogAction } from "@/components/ui/alert-dialog"
 import { AspectRatio } from "@/components/ui/aspect-ratio"
 import { buttonVariants } from "@/components/ui/button"
-import { AddToCartForm } from "@/components/forms/add-to-cart-form"
 import { PlaceholderImage } from "@/components/placeholder-image"
 import { Rating } from "@/components/rating"
 import { DialogShell } from "@/components/shells/dialog-shell"
@@ -78,7 +77,7 @@ export default async function ProductModalPage({
           <PlaceholderImage className="rounded-none" asChild />
         )}
       </AspectRatio>
-      <div className="w-full space-y-8 p-6 sm:p-10">
+      <div className="w-full space-y-6 p-6 sm:p-10">
         <div className="space-y-2">
           <h1 className="line-clamp-2 text-2xl font-bold">{product.name}</h1>
           <p className="text-base text-muted-foreground">
@@ -89,9 +88,7 @@ export default async function ProductModalPage({
             {product.inventory} in stock
           </p>
         </div>
-        <AddToCartForm productId={product.id} />
-
-        <p className="line-clamp-2 text-base text-muted-foreground">
+        <p className="line-clamp-4 text-base text-muted-foreground">
           {product.description}
         </p>
       </div>

src/app/(lobby)/product/[productId]/loading.tsx

@@ -43,9 +43,9 @@ export default function ProductLoading() {
         <Separator className="mt-4 md:hidden" />
         <div className="flex w-full flex-col gap-4 md:w-1/2">
           <div className="space-y-2">
-            <Skeleton className="h-9 w-16" />
-            <Skeleton className="h-6 w-10" />
-            <Skeleton className="h-6 w-14" />
+            <Skeleton className="h-7 w-1/2" />
+            <Skeleton className="h-4 w-10" />
+            <Skeleton className="h-4 w-14" />
           </div>
           <Separator className="my-4" />
           <Skeleton className="h-4 w-20" />
@@ -64,10 +64,10 @@ export default function ProductLoading() {
               <Skeleton className="h-4 w-4" />
             </div>
             <div className="space-y-2">
-              {Array.from({ length: 3 }).map((_, i) => (
+              {Array.from({ length: 4 }).map((_, i) => (
                 <Skeleton
                   key={i}
-                  className={cn("h-4 w-full", i === 2 && "w-1/2")}
+                  className={cn("h-4 w-full", i === 3 && "w-1/2")}
                 />
               ))}
             </div>