@actuate-media/cms-admin 0.48.0 → 0.49.1

package/src/components/SchedulePublishDialog.tsx

@@ -1,9 +1,11 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useId, useState } from 'react'
+import * as Dialog from '@radix-ui/react-dialog'
 import { Calendar, Clock, Loader2, X } from 'lucide-react'
 import { toast } from 'sonner'
 import { cmsApi } from '../lib/api.js'
+import { adminPortalContainer } from '../lib/portal-container.js'
 
 export interface SchedulePublishDialogProps {
   collectionSlug: string
@@ -56,6 +58,8 @@ export function SchedulePublishDialog({
   const [includeUnpublish, setIncludeUnpublish] = useState(false)
   const [saving, setSaving] = useState(false)
   const [cancelling, setCancelling] = useState(false)
+  const publishAtId = useId()
+  const unpublishAtId = useId()
 
   const hasExistingSchedule = Boolean(scheduledAt || scheduledUnpublishAt)
 
@@ -133,109 +137,130 @@ export function SchedulePublishDialog({
     onClose()
   }
 
-  if (!open) return null
-
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      <div className="fixed inset-0 bg-black/40" onClick={onClose} />
-      <div className="relative w-full max-w-md rounded-lg bg-white shadow-xl">
-        <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3">
-          <div className="flex items-center gap-2">
-            <Calendar className="h-5 w-5 text-gray-600" />
-            <h2 className="text-lg font-semibold text-gray-900">Schedule publishing</h2>
-          </div>
-          <button
-            onClick={onClose}
-            className="rounded-lg p-1.5 transition-colors hover:bg-gray-100"
-          >
-            <X className="h-5 w-5 text-gray-500" />
-          </button>
-        </div>
-
-        <div className="space-y-4 px-4 py-4">
-          <div className="space-y-1.5">
-            <label className="text-sm font-medium text-gray-700">Publish at</label>
-            <div className="relative">
-              <Clock className="pointer-events-none absolute top-2.5 left-2.5 h-4 w-4 text-gray-400" />
-              <input
-                type="datetime-local"
-                value={publishAt}
-                onChange={(e) => setPublishAt(e.target.value)}
-                min={toLocalDateTimeInput(new Date(Date.now() + 60 * 1000))}
-                className="w-full rounded-md border border-gray-300 bg-white py-2 pr-3 pl-9 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
-              />
+    <Dialog.Root open={open} onOpenChange={(next) => !next && onClose()}>
+      <Dialog.Portal container={adminPortalContainer()}>
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/40" />
+        <Dialog.Content className="bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl focus:outline-none">
+          <div className="border-border flex items-center justify-between border-b px-4 py-3">
+            <div className="flex items-center gap-2">
+              <Calendar className="text-muted-foreground h-5 w-5" aria-hidden />
+              <Dialog.Title className="text-foreground text-lg font-medium">
+                Schedule publishing
+              </Dialog.Title>
             </div>
-            <p className="text-xs text-gray-500">
-              The document will move from DRAFT to PUBLISHED at this time (your local timezone).
-            </p>
+            <Dialog.Close asChild>
+              <button
+                type="button"
+                aria-label="Close dialog"
+                className="text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring rounded-lg p-1.5 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+              >
+                <X className="h-5 w-5" aria-hidden />
+              </button>
+            </Dialog.Close>
           </div>
 
-          <label className="flex items-center gap-2 text-sm text-gray-700">
-            <input
-              type="checkbox"
-              checked={includeUnpublish}
-              onChange={(e) => setIncludeUnpublish(e.target.checked)}
-              className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-            />
-            Also schedule an unpublish
-          </label>
-
-          {includeUnpublish && (
+          <div className="space-y-4 px-4 py-4">
             <div className="space-y-1.5">
-              <label className="text-sm font-medium text-gray-700">Unpublish at</label>
+              <label htmlFor={publishAtId} className="text-foreground text-sm font-medium">
+                Publish at
+              </label>
               <div className="relative">
-                <Clock className="pointer-events-none absolute top-2.5 left-2.5 h-4 w-4 text-gray-400" />
+                <Clock
+                  className="text-muted-foreground pointer-events-none absolute top-2.5 left-2.5 h-4 w-4"
+                  aria-hidden
+                />
                 <input
+                  id={publishAtId}
                   type="datetime-local"
-                  value={unpublishAt}
-                  onChange={(e) => setUnpublishAt(e.target.value)}
-                  min={publishAt || toLocalDateTimeInput(new Date(Date.now() + 60 * 1000))}
-                  className="w-full rounded-md border border-gray-300 bg-white py-2 pr-3 pl-9 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                  value={publishAt}
+                  onChange={(e) => setPublishAt(e.target.value)}
+                  min={toLocalDateTimeInput(new Date(Date.now() + 60 * 1000))}
+                  className="border-input bg-background text-foreground focus:border-ring focus:ring-ring w-full rounded-md border py-2 pr-3 pl-9 text-sm focus:ring-1 focus:outline-none"
                 />
               </div>
+              <p className="text-muted-foreground text-xs">
+                The document will move from DRAFT to PUBLISHED at this time (your local timezone).
+              </p>
+            </div>
+
+            <label className="text-foreground flex items-center gap-2 text-sm">
+              <input
+                type="checkbox"
+                checked={includeUnpublish}
+                onChange={(e) => setIncludeUnpublish(e.target.checked)}
+                className="border-input text-primary focus:ring-ring h-4 w-4 rounded"
+              />
+              Also schedule an unpublish
+            </label>
+
+            {includeUnpublish && (
+              <div className="space-y-1.5">
+                <label htmlFor={unpublishAtId} className="text-foreground text-sm font-medium">
+                  Unpublish at
+                </label>
+                <div className="relative">
+                  <Clock
+                    className="text-muted-foreground pointer-events-none absolute top-2.5 left-2.5 h-4 w-4"
+                    aria-hidden
+                  />
+                  <input
+                    id={unpublishAtId}
+                    type="datetime-local"
+                    value={unpublishAt}
+                    onChange={(e) => setUnpublishAt(e.target.value)}
+                    min={publishAt || toLocalDateTimeInput(new Date(Date.now() + 60 * 1000))}
+                    className="border-input bg-background text-foreground focus:border-ring focus:ring-ring w-full rounded-md border py-2 pr-3 pl-9 text-sm focus:ring-1 focus:outline-none"
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className="border-border flex items-center justify-between gap-2 border-t px-4 py-3">
+            {hasExistingSchedule ? (
+              <button
+                type="button"
+                onClick={handleCancelSchedule}
+                disabled={cancelling || saving}
+                className="text-destructive hover:bg-destructive/10 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium disabled:opacity-50"
+              >
+                {cancelling ? (
+                  <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
+                ) : (
+                  <X className="h-4 w-4" aria-hidden />
+                )}
+                Cancel schedule
+              </button>
+            ) : (
+              <span />
+            )}
+            <div className="flex items-center gap-2">
+              <Dialog.Close asChild>
+                <button
+                  type="button"
+                  className="text-foreground hover:bg-accent rounded-md px-3 py-1.5 text-sm"
+                >
+                  Close
+                </button>
+              </Dialog.Close>
+              <button
+                type="button"
+                onClick={handleSave}
+                disabled={saving || cancelling}
+                className="bg-primary text-primary-foreground inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium hover:opacity-90 disabled:opacity-50"
+              >
+                {saving ? (
+                  <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
+                ) : (
+                  <Calendar className="h-4 w-4" aria-hidden />
+                )}
+                {hasExistingSchedule ? 'Reschedule' : 'Schedule'}
+              </button>
             </div>
-          )}
-        </div>
-
-        <div className="flex items-center justify-between gap-2 border-t border-gray-200 px-4 py-3">
-          {hasExistingSchedule ? (
-            <button
-              onClick={handleCancelSchedule}
-              disabled={cancelling || saving}
-              className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium text-red-700 hover:bg-red-50 disabled:opacity-50"
-            >
-              {cancelling ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <X className="h-4 w-4" />
-              )}
-              Cancel schedule
-            </button>
-          ) : (
-            <span />
-          )}
-          <div className="flex items-center gap-2">
-            <button
-              onClick={onClose}
-              className="rounded-md px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100"
-            >
-              Close
-            </button>
-            <button
-              onClick={handleSave}
-              disabled={saving || cancelling}
-              className="inline-flex items-center gap-1.5 rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
-            >
-              {saving ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <Calendar className="h-4 w-4" />
-              )}
-              {hasExistingSchedule ? 'Reschedule' : 'Schedule'}
-            </button>
           </div>
-        </div>
-      </div>
-    </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
   )
 }

package/src/components/SharePreviewLinkDialog.tsx

@@ -1,9 +1,11 @@
 'use client'
 
-import { useState } from 'react'
+import { useId, useState } from 'react'
+import * as Dialog from '@radix-ui/react-dialog'
 import { Check, Copy, Link2, Loader2, Share2, X } from 'lucide-react'
 import { toast } from 'sonner'
 import { cmsApi } from '../lib/api.js'
+import { adminPortalContainer } from '../lib/portal-container.js'
 
 export interface SharePreviewLinkDialogProps {
   collectionSlug: string
@@ -75,6 +77,7 @@ export function SharePreviewLinkDialog({
   const [expiresAt, setExpiresAt] = useState<string>('')
   const [generating, setGenerating] = useState(false)
   const [copied, setCopied] = useState(false)
+  const previewUrlId = useId()
 
   async function generate() {
     setGenerating(true)
@@ -121,107 +124,126 @@ export function SharePreviewLinkDialog({
     }
   }
 
-  if (!open) return null
-
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      <div className="fixed inset-0 bg-black/40" onClick={onClose} />
-      <div className="relative w-full max-w-lg rounded-lg bg-white shadow-xl">
-        <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3">
-          <div className="flex items-center gap-2">
-            <Share2 className="h-5 w-5 text-gray-600" />
-            <h2 className="text-lg font-semibold text-gray-900">Share preview link</h2>
+    <Dialog.Root open={open} onOpenChange={(next) => !next && onClose()}>
+      <Dialog.Portal container={adminPortalContainer()}>
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/40" />
+        <Dialog.Content className="bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl focus:outline-none">
+          <div className="border-border flex items-center justify-between border-b px-4 py-3">
+            <div className="flex items-center gap-2">
+              <Share2 className="text-muted-foreground h-5 w-5" aria-hidden />
+              <Dialog.Title className="text-foreground text-lg font-medium">
+                Share preview link
+              </Dialog.Title>
+            </div>
+            <Dialog.Close asChild>
+              <button
+                type="button"
+                aria-label="Close dialog"
+                className="text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring rounded-lg p-1.5 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+              >
+                <X className="h-5 w-5" aria-hidden />
+              </button>
+            </Dialog.Close>
           </div>
-          <button
-            onClick={onClose}
-            className="rounded-lg p-1.5 transition-colors hover:bg-gray-100"
-          >
-            <X className="h-5 w-5 text-gray-500" />
-          </button>
-        </div>
 
-        <div className="space-y-4 px-4 py-4">
-          <p className="text-sm text-gray-600">
-            Generate a signed URL that lets anyone with the link view the current draft of this
-            document — even if it's never been published.
-          </p>
+          <div className="space-y-4 px-4 py-4">
+            <Dialog.Description className="text-muted-foreground text-sm">
+              Generate a signed URL that lets anyone with the link view the current draft of this
+              document — even if it's never been published.
+            </Dialog.Description>
 
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-gray-700">Link lifetime</label>
-            <div className="grid grid-cols-2 gap-2">
-              {TTL_CHOICES.map((choice) => {
-                const selected = ttl === choice.seconds
-                return (
+            <div className="space-y-2">
+              <span className="text-foreground text-sm font-medium">Link lifetime</span>
+              <div className="grid grid-cols-2 gap-2">
+                {TTL_CHOICES.map((choice) => {
+                  const selected = ttl === choice.seconds
+                  return (
+                    <button
+                      key={choice.seconds}
+                      type="button"
+                      aria-pressed={selected}
+                      onClick={() => setTtl(choice.seconds)}
+                      className={`rounded-md border px-3 py-2 text-left text-sm transition-colors ${
+                        selected
+                          ? 'border-primary bg-primary/10 text-foreground'
+                          : 'border-border hover:border-input hover:bg-accent'
+                      }`}
+                    >
+                      <div className="font-medium">{choice.label}</div>
+                      <div className="text-muted-foreground text-xs">{choice.hint}</div>
+                    </button>
+                  )
+                })}
+              </div>
+              <p className="text-muted-foreground text-xs">
+                Preview tokens can't be revoked individually — pick the shortest TTL that fits.
+              </p>
+            </div>
+
+            {previewUrl ? (
+              <div className="border-border bg-muted space-y-2 rounded-lg border p-3">
+                <label
+                  htmlFor={previewUrlId}
+                  className="text-muted-foreground text-xs font-medium tracking-wide uppercase"
+                >
+                  Preview URL
+                </label>
+                <div className="flex items-stretch gap-2">
+                  <input
+                    id={previewUrlId}
+                    readOnly
+                    value={previewUrl}
+                    onFocus={(e) => e.currentTarget.select()}
+                    className="border-input bg-background text-foreground flex-1 rounded-md border px-2 py-1.5 font-mono text-xs"
+                  />
                   <button
-                    key={choice.seconds}
-                    onClick={() => setTtl(choice.seconds)}
-                    className={`rounded-md border px-3 py-2 text-left text-sm transition-colors ${
-                      selected
-                        ? 'border-blue-500 bg-blue-50 text-blue-900'
-                        : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'
-                    }`}
+                    type="button"
+                    onClick={copyToClipboard}
+                    className="bg-primary text-primary-foreground inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium hover:opacity-90"
                   >
-                    <div className="font-medium">{choice.label}</div>
-                    <div className="text-xs text-gray-500">{choice.hint}</div>
+                    {copied ? (
+                      <Check className="h-3.5 w-3.5" aria-hidden />
+                    ) : (
+                      <Copy className="h-3.5 w-3.5" aria-hidden />
+                    )}
+                    {copied ? 'Copied' : 'Copy'}
                   </button>
-                )
-              })}
-            </div>
-            <p className="text-xs text-gray-500">
-              Preview tokens can't be revoked individually — pick the shortest TTL that fits.
-            </p>
+                </div>
+                {expiresAt && (
+                  <p className="text-muted-foreground text-xs">
+                    Expires {new Date(expiresAt).toLocaleString()}
+                  </p>
+                )}
+              </div>
+            ) : null}
           </div>
 
-          {previewUrl ? (
-            <div className="space-y-2 rounded-lg border border-gray-200 bg-gray-50 p-3">
-              <label className="text-xs font-medium tracking-wide text-gray-500 uppercase">
-                Preview URL
-              </label>
-              <div className="flex items-stretch gap-2">
-                <input
-                  readOnly
-                  value={previewUrl}
-                  onFocus={(e) => e.currentTarget.select()}
-                  className="flex-1 rounded-md border border-gray-300 bg-white px-2 py-1.5 font-mono text-xs"
-                />
-                <button
-                  onClick={copyToClipboard}
-                  className="inline-flex items-center gap-1.5 rounded-md bg-gray-900 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-700"
-                >
-                  {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
-                  {copied ? 'Copied' : 'Copy'}
-                </button>
-              </div>
-              {expiresAt && (
-                <p className="text-xs text-gray-500">
-                  Expires {new Date(expiresAt).toLocaleString()}
-                </p>
+          <div className="border-border flex items-center justify-end gap-2 border-t px-4 py-3">
+            <Dialog.Close asChild>
+              <button
+                type="button"
+                className="text-foreground hover:bg-accent rounded-md px-3 py-1.5 text-sm"
+              >
+                Close
+              </button>
+            </Dialog.Close>
+            <button
+              type="button"
+              onClick={generate}
+              disabled={generating}
+              className="bg-primary text-primary-foreground inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium hover:opacity-90 disabled:opacity-50"
+            >
+              {generating ? (
+                <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
+              ) : (
+                <Link2 className="h-4 w-4" aria-hidden />
               )}
-            </div>
-          ) : null}
-        </div>
-
-        <div className="flex items-center justify-end gap-2 border-t border-gray-200 px-4 py-3">
-          <button
-            onClick={onClose}
-            className="rounded-md px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100"
-          >
-            Close
-          </button>
-          <button
-            onClick={generate}
-            disabled={generating}
-            className="inline-flex items-center gap-1.5 rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
-          >
-            {generating ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <Link2 className="h-4 w-4" />
-            )}
-            {previewUrl ? 'Generate new link' : 'Generate link'}
-          </button>
-        </div>
-      </div>
-    </div>
+              {previewUrl ? 'Generate new link' : 'Generate link'}
+            </button>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
   )
 }