From 4875c4af9d787f1700544231ac4e366d6e833f92 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 13 Nov 2025 11:43:06 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20Dialog=20UX=20Improvements=20-=20Scroll?=
 =?UTF-8?q?able=20Body=20&=20Click-Proof!=20=F0=9F=8E=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## ✅ 1 & 2: Dialog Improvements

### Scrollable Body with Fixed Header/Footer
**Problem:** Long content made header/footer disappear
**Solution:**
- Changed dialog to flexbox layout
- Added DialogBody component with overflow-y-auto
- Header and footer fixed with borders
- Max height 90vh

**Structure:**
```tsx
<DialogContent> (flex flex-col max-h-[90vh])
  <DialogHeader> (px-6 pt-6 pb-4 border-b)
  <DialogBody> (flex-1 overflow-y-auto px-6 py-4)
  <DialogFooter> (px-6 py-4 border-t mt-auto)
</DialogContent>
```

### Close-Proof (No Outside Click)
**Problem:** Accidental outside clicks closed dialog
**Solution:**
- Added onPointerDownOutside preventDefault
- Added onInteractOutside preventDefault
- Must click X or Cancel to close
- No confusion or lost UI control

**Files:**
- `components/ui/dialog.tsx`
- `components/ui/rich-text-editor.tsx`

Ready for remaining improvements!
---
 admin-spa/src/components/ui/dialog.tsx        | 25 ++++-
 .../src/components/ui/rich-text-editor.tsx    | 96 ++++++++++---------
 2 files changed, 70 insertions(+), 51 deletions(-)

diff --git a/admin-spa/src/components/ui/dialog.tsx b/admin-spa/src/components/ui/dialog.tsx
index 3e3dc51..ff055de 100644
--- a/admin-spa/src/components/ui/dialog.tsx
+++ b/admin-spa/src/components/ui/dialog.tsx
@@ -35,14 +35,16 @@ const DialogContent = React.forwardRef<
     <DialogOverlay />
     <DialogPrimitive.Content
       ref={ref}
+      onPointerDownOutside={(e) => e.preventDefault()}
+      onInteractOutside={(e) => e.preventDefault()}
       className={cn(
-        "fixed left-[50%] top-[50%] z-[99999] 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",
+        "fixed left-[50%] top-[50%] z-[99999] flex flex-col w-full max-w-lg max-h-[90vh] translate-x-[-50%] translate-y-[-50%] border bg-background 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
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground z-10">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -57,7 +59,7 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
+      "flex flex-col space-y-1.5 text-center sm:text-left px-6 pt-6 pb-4 border-b",
       className
     )}
     {...props}
@@ -71,7 +73,7 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 px-6 py-4 border-t mt-auto",
       className
     )}
     {...props}
@@ -106,6 +108,20 @@ const DialogDescription = React.forwardRef<
 ))
 DialogDescription.displayName = DialogPrimitive.Description.displayName
 
+const DialogBody = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex-1 overflow-y-auto px-6 py-4",
+      className
+    )}
+    {...props}
+  />
+)
+DialogBody.displayName = "DialogBody"
+
 export {
   Dialog,
   DialogPortal,
@@ -117,4 +133,5 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
+  DialogBody,
 }
diff --git a/admin-spa/src/components/ui/rich-text-editor.tsx b/admin-spa/src/components/ui/rich-text-editor.tsx
index 7e7e655..ad7b10c 100644
--- a/admin-spa/src/components/ui/rich-text-editor.tsx
+++ b/admin-spa/src/components/ui/rich-text-editor.tsx
@@ -25,7 +25,7 @@ import { Button } from './button';
 import { Input } from './input';
 import { Label } from './label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from './dialog';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogBody } from './dialog';
 import { __ } from '@/lib/i18n';
 
 interface RichTextEditorProps {
@@ -327,53 +327,55 @@ export function RichTextEditor({
             </DialogDescription>
           </DialogHeader>
           
-          <div className="space-y-4 py-4">
-            <div className="space-y-2">
-              <Label htmlFor="btn-text">{__('Button Text')}</Label>
-              <Input
-                id="btn-text"
-                value={buttonText}
-                onChange={(e) => setButtonText(e.target.value)}
-                placeholder={__('e.g., View Order')}
-              />
+          <DialogBody>
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="btn-text">{__('Button Text')}</Label>
+                <Input
+                  id="btn-text"
+                  value={buttonText}
+                  onChange={(e) => setButtonText(e.target.value)}
+                  placeholder={__('e.g., View Order')}
+                />
+              </div>
+              
+              <div className="space-y-2">
+                <Label htmlFor="btn-href">{__('Button Link')}</Label>
+                <Input
+                  id="btn-href"
+                  value={buttonHref}
+                  onChange={(e) => setButtonHref(e.target.value)}
+                  placeholder="{order_url}"
+                />
+                {variables.length > 0 && (
+                  <div className="flex flex-wrap gap-1 mt-2">
+                    {variables.filter(v => v.includes('_url')).map((variable) => (
+                      <code
+                        key={variable}
+                        className="text-xs bg-muted px-2 py-1 rounded cursor-pointer hover:bg-muted/80"
+                        onClick={() => setButtonHref(buttonHref + `{${variable}}`)}
+                      >
+                        {`{${variable}}`}
+                      </code>
+                    ))}
+                  </div>
+                )}
+              </div>
+              
+              <div className="space-y-2">
+                <Label htmlFor="btn-style">{__('Button Style')}</Label>
+                <Select value={buttonStyle} onValueChange={(value: 'solid' | 'outline') => setButtonStyle(value)}>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="solid">{__('Solid (Primary)')}</SelectItem>
+                    <SelectItem value="outline">{__('Outline (Secondary)')}</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
             </div>
-            
-            <div className="space-y-2">
-              <Label htmlFor="btn-href">{__('Button Link')}</Label>
-              <Input
-                id="btn-href"
-                value={buttonHref}
-                onChange={(e) => setButtonHref(e.target.value)}
-                placeholder="{order_url}"
-              />
-              {variables.length > 0 && (
-                <div className="flex flex-wrap gap-1 mt-2">
-                  {variables.filter(v => v.includes('_url')).map((variable) => (
-                    <code
-                      key={variable}
-                      className="text-xs bg-muted px-2 py-1 rounded cursor-pointer hover:bg-muted/80"
-                      onClick={() => setButtonHref(buttonHref + `{${variable}}`)}
-                    >
-                      {`{${variable}}`}
-                    </code>
-                  ))}
-                </div>
-              )}
-            </div>
-            
-            <div className="space-y-2">
-              <Label htmlFor="btn-style">{__('Button Style')}</Label>
-              <Select value={buttonStyle} onValueChange={(value: 'solid' | 'outline') => setButtonStyle(value)}>
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="solid">{__('Solid (Primary)')}</SelectItem>
-                  <SelectItem value="outline">{__('Outline (Secondary)')}</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
+          </DialogBody>
           
           <DialogFooter>
             <Button variant="outline" onClick={() => setButtonDialogOpen(false)}>