@actuate-media/cms-admin 0.49.0 → 0.49.1

package/src/components/MediaPickerModal.tsx

@@ -1,9 +1,11 @@
 'use client'
 
-import { useState, useRef } from 'react'
+import { useId, useState, useRef } from 'react'
+import * as Dialog from '@radix-ui/react-dialog'
 import { X, Upload, Search, ImageIcon, Loader2 } from 'lucide-react'
 import { toast } from 'sonner'
 import { cmsApi } from '../lib/api.js'
+import { adminPortalContainer } from '../lib/portal-container.js'
 import { useApiData } from '../lib/useApiData.js'
 
 interface MediaItem {
@@ -60,6 +62,7 @@ export function MediaPickerModal({
   const [search, setSearch] = useState('')
   const [uploading, setUploading] = useState(false)
   const fileInputRef = useRef<HTMLInputElement>(null)
+  const searchId = useId()
 
   const { data, loading, refetch } = useApiData<{ data: { items: MediaItem[] } }>(
     open ? `/media?pageSize=50${search ? `&search=${encodeURIComponent(search)}` : ''}` : null,
@@ -119,132 +122,153 @@ export function MediaPickerModal({
     onClose()
   }
 
-  if (!open) return null
-
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="fixed inset-0 bg-black/40" onClick={onClose} />
-      <div className="relative mx-4 flex max-h-[80vh] w-full max-w-2xl flex-col rounded-xl bg-white shadow-2xl">
-        <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3">
-          <h2 className="text-lg font-semibold text-gray-900">Insert Image</h2>
-          <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>
-
-        {!libraryOnly && (
-          <div className="flex border-b border-gray-200">
-            <button
-              onClick={() => setTab('library')}
-              className={`flex-1 px-4 py-2.5 text-sm font-medium transition-colors ${
-                tab === 'library'
-                  ? 'border-b-2 border-blue-600 text-blue-600'
-                  : 'text-gray-500 hover:text-gray-700'
-              }`}
-            >
-              Media Library
-            </button>
-            <button
-              onClick={() => setTab('upload')}
-              className={`flex-1 px-4 py-2.5 text-sm font-medium transition-colors ${
-                tab === 'upload'
-                  ? 'border-b-2 border-blue-600 text-blue-600'
-                  : 'text-gray-500 hover:text-gray-700'
-              }`}
-            >
-              Upload New
-            </button>
+    <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
+          aria-describedby={undefined}
+          className="bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-50 mx-4 flex max-h-[80vh] w-[calc(100%-2rem)] max-w-2xl -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl border shadow-2xl focus:outline-none"
+        >
+          <div className="border-border flex items-center justify-between border-b px-4 py-3">
+            <Dialog.Title className="text-foreground text-lg font-medium">
+              Insert Image
+            </Dialog.Title>
+            <Dialog.Close asChild>
+              <button
+                type="button"
+                aria-label="Close media picker"
+                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>
-        )}
 
-        <div className="flex-1 overflow-y-auto p-4">
-          {libraryOnly || tab === 'library' ? (
-            <>
-              <div className="relative mb-4">
-                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
-                <input
-                  type="text"
-                  value={search}
-                  onChange={(e) => setSearch(e.target.value)}
-                  placeholder="Search images..."
-                  className="w-full rounded-lg border border-gray-300 py-2 pr-3 pl-9 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                />
-              </div>
+          {!libraryOnly && (
+            <div className="border-border flex border-b" role="tablist" aria-label="Image source">
+              <button
+                type="button"
+                role="tab"
+                aria-selected={tab === 'library'}
+                onClick={() => setTab('library')}
+                className={`flex-1 px-4 py-2.5 text-sm font-medium transition-colors ${
+                  tab === 'library'
+                    ? 'border-primary text-primary border-b-2'
+                    : 'text-muted-foreground hover:text-foreground'
+                }`}
+              >
+                Media Library
+              </button>
+              <button
+                type="button"
+                role="tab"
+                aria-selected={tab === 'upload'}
+                onClick={() => setTab('upload')}
+                className={`flex-1 px-4 py-2.5 text-sm font-medium transition-colors ${
+                  tab === 'upload'
+                    ? 'border-primary text-primary border-b-2'
+                    : 'text-muted-foreground hover:text-foreground'
+                }`}
+              >
+                Upload New
+              </button>
+            </div>
+          )}
 
-              {loading ? (
-                <div className="flex items-center justify-center py-12">
-                  <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
+          <div className="flex-1 overflow-y-auto p-4">
+            {libraryOnly || tab === 'library' ? (
+              <>
+                <div className="relative mb-4">
+                  <Search
+                    className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
+                    aria-hidden
+                  />
+                  <input
+                    id={searchId}
+                    type="text"
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                    placeholder="Search images..."
+                    aria-label="Search images"
+                    className="border-input bg-background text-foreground focus:ring-ring w-full rounded-lg border py-2 pr-3 pl-9 text-sm focus:ring-2 focus:outline-none"
+                  />
                 </div>
-              ) : imageItems.length === 0 ? (
-                <div className="py-12 text-center text-sm text-gray-500">
-                  No images found. Try uploading one.
-                </div>
-              ) : (
-                <div className="grid grid-cols-3 gap-3 sm:grid-cols-4">
-                  {imageItems.map((item: MediaItem) => {
-                    const src = item.url || item.storageKey
-                    return (
-                      <button
-                        key={item.id}
-                        onClick={() => handleSelectItem(item)}
-                        title={item.filename}
-                        className="group relative aspect-square overflow-hidden rounded-lg border-2 border-gray-200 bg-gray-100 transition-colors hover:border-blue-500"
-                      >
-                        {src ? (
-                          <img
-                            src={src}
-                            alt={item.filename}
-                            loading="lazy"
-                            className="h-full w-full object-contain"
-                          />
-                        ) : (
-                          <div className="flex h-full w-full items-center justify-center">
-                            <ImageIcon className="h-8 w-8 text-gray-300" />
+
+                {loading ? (
+                  <div className="flex items-center justify-center py-12">
+                    <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" aria-hidden />
+                  </div>
+                ) : imageItems.length === 0 ? (
+                  <div className="text-muted-foreground py-12 text-center text-sm">
+                    No images found. Try uploading one.
+                  </div>
+                ) : (
+                  <div className="grid grid-cols-3 gap-3 sm:grid-cols-4">
+                    {imageItems.map((item: MediaItem) => {
+                      const src = item.url || item.storageKey
+                      return (
+                        <button
+                          key={item.id}
+                          type="button"
+                          onClick={() => handleSelectItem(item)}
+                          title={item.filename}
+                          className="group border-border bg-muted hover:border-primary relative aspect-square overflow-hidden rounded-lg border-2 transition-colors"
+                        >
+                          {src ? (
+                            <img
+                              src={src}
+                              alt={item.filename}
+                              loading="lazy"
+                              className="h-full w-full object-contain"
+                            />
+                          ) : (
+                            <div className="flex h-full w-full items-center justify-center">
+                              <ImageIcon className="text-muted-foreground h-8 w-8" aria-hidden />
+                            </div>
+                          )}
+                          <div className="absolute inset-x-0 bottom-0 bg-black/60 p-1.5 opacity-0 transition-opacity group-hover:opacity-100">
+                            <p className="truncate text-xs text-white">{item.filename}</p>
                           </div>
-                        )}
-                        <div className="absolute inset-x-0 bottom-0 bg-black/60 p-1.5 opacity-0 transition-opacity group-hover:opacity-100">
-                          <p className="truncate text-xs text-white">{item.filename}</p>
-                        </div>
-                      </button>
-                    )
-                  })}
+                        </button>
+                      )
+                    })}
+                  </div>
+                )}
+              </>
+            ) : (
+              <div className="flex flex-col items-center justify-center py-12">
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept={accept ?? 'image/*'}
+                  className="hidden"
+                  onChange={(e) => handleUpload(e.target.files)}
+                />
+                <div className="bg-primary/10 mb-4 flex h-16 w-16 items-center justify-center rounded-full">
+                  {uploading ? (
+                    <Loader2 className="text-primary h-8 w-8 animate-spin" aria-hidden />
+                  ) : (
+                    <Upload className="text-primary h-8 w-8" aria-hidden />
+                  )}
                 </div>
-              )}
-            </>
-          ) : (
-            <div className="flex flex-col items-center justify-center py-12">
-              <input
-                ref={fileInputRef}
-                type="file"
-                accept={accept ?? 'image/*'}
-                className="hidden"
-                onChange={(e) => handleUpload(e.target.files)}
-              />
-              <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-50">
-                {uploading ? (
-                  <Loader2 className="h-8 w-8 animate-spin text-blue-600" />
-                ) : (
-                  <Upload className="h-8 w-8 text-blue-600" />
+                <p className="text-muted-foreground mb-4 text-sm">
+                  {uploading ? 'Uploading...' : 'Select an image file to upload'}
+                </p>
+                {!uploading && (
+                  <button
+                    type="button"
+                    onClick={() => fileInputRef.current?.click()}
+                    className="bg-primary text-primary-foreground rounded-lg px-4 py-2 text-sm transition-opacity hover:opacity-90"
+                  >
+                    Choose File
+                  </button>
                 )}
               </div>
-              <p className="mb-4 text-sm text-gray-600">
-                {uploading ? 'Uploading...' : 'Select an image file to upload'}
-              </p>
-              {!uploading && (
-                <button
-                  onClick={() => fileInputRef.current?.click()}
-                  className="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
-                >
-                  Choose File
-                </button>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
+            )}
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
   )
 }

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>
   )
 }