@kyro-cms/admin 0.1.6 → 0.1.7

package/src/components/DetailView.tsx

@@ -8,6 +8,7 @@ import { AutoForm } from "./AutoForm";
 import { ActionBar, type DocumentStatus, type SaveStatus } from "./ActionBar";
 import { ConfirmModal } from "./ui/Modal";
 import { Spinner } from "./ui/Spinner";
+import { useToast } from "./ui/Toast";
 
 interface DetailViewProps {
   config: KyroConfig;
@@ -36,6 +37,7 @@ export function DetailView({
   autosave = true,
   autosaveDelay = 2000,
 }: DetailViewProps) {
+  const { addToast } = useToast();
   const [data, setData] = useState<Record<string, unknown>>({});
   const [originalData, setOriginalData] = useState<Record<string, unknown>>({});
   const [loading, setLoading] = useState(true);
@@ -47,6 +49,7 @@ export function DetailView({
   const [createdAt, setCreatedAt] = useState<string | null>(null);
   const [updatedAt, setUpdatedAt] = useState<string | null>(null);
   const [publishedAt, setPublishedAt] = useState<string | null>(null);
+  const [justSaved, setJustSaved] = useState(false);
 
   const autosaveTimerRef = useRef<NodeJS.Timeout | null>(null);
   const hasChangesRef = useRef(false);
@@ -57,6 +60,19 @@ export function DetailView({
 
   const hasChanges = JSON.stringify(data) !== JSON.stringify(originalData);
 
+  // Auto-set status to draft when there are changes from a published state
+  useEffect(() => {
+    if (hasChanges && status === "published") {
+      setStatus("draft");
+    }
+  }, [hasChanges, status]);
+
+  useEffect(() => {
+    if (hasChanges && saveStatus === "saved") {
+      setSaveStatus("idle");
+    }
+  }, [hasChanges, saveStatus]);
+
   useEffect(() => {
     if (mode === "global") {
       loadGlobal();
@@ -150,6 +166,14 @@ export function DetailView({
         setSaveStatus("saved");
         setUpdatedAt(new Date().toISOString());
 
+        // Show green border for 3 seconds after any save
+        setJustSaved(true);
+        setTimeout(() => setJustSaved(false), 3000);
+
+        if (!isAutosave) {
+          addToast("success", "Saved successfully");
+        }
+
         setTimeout(() => {
           setSaveStatus("idle");
         }, 2000);
@@ -157,6 +181,7 @@ export function DetailView({
         setSaveStatus("error");
         if (!isAutosave) {
           onError("Failed to save changes");
+          addToast("error", "Failed to save changes");
         }
       } finally {
         setSaving(false);
@@ -174,8 +199,10 @@ export function DetailView({
       if (!response.ok) throw new Error("Failed to publish");
       setStatus("published");
       setPublishedAt(new Date().toISOString());
+      addToast("success", "Published successfully");
     } catch {
       onError("Failed to publish");
+      addToast("error", "Failed to publish");
     } finally {
       setSaving(false);
     }
@@ -235,30 +262,45 @@ export function DetailView({
     );
   }
 
+  const isSingleLayout =
+    mode === "global" || collection?.admin?.layout === "single";
+
   return (
     <div className="kyro-detail">
-      <ActionBar
-        status={status}
-        saveStatus={saveStatus}
-        hasChanges={hasChanges}
-        onSave={() => handleSave(false)}
-        onPublish={mode === "collection" ? handlePublish : undefined}
-        onUnpublish={status === "published" ? handleUnpublish : undefined}
-        onDuplicate={mode === "collection" ? handleDuplicate : undefined}
-        onViewHistory={() => {}}
-        onPreview={() =>
-          window.open(`/preview/${slug}/${documentId}`, "_blank")
-        }
-        onDelete={
-          mode === "collection" ? () => setShowDeleteConfirm(true) : undefined
-        }
-        publishedAt={publishedAt}
-        updatedAt={updatedAt}
-      />
+      {!isSingleLayout && (
+        <ActionBar
+          status={status}
+          saveStatus={saveStatus}
+          hasChanges={hasChanges}
+          onSave={() => handleSave(false)}
+          onPublish={handlePublish}
+          onUnpublish={status === "published" ? handleUnpublish : undefined}
+          onDuplicate={handleDuplicate}
+          onViewHistory={() => {}}
+          onPreview={() =>
+            window.open(`/preview/${slug}/${documentId}`, "_blank")
+          }
+          onDelete={() => setShowDeleteConfirm(true)}
+          publishedAt={publishedAt}
+          updatedAt={updatedAt}
+        />
+      )}
 
-      <div className="kyro-detail-body">
-        <div className="kyro-card">
-          <div className="kyro-card-content">
+      <div
+        className={
+          isSingleLayout
+            ? "w-full pb-32 pt-8"
+            : "w-full mx-auto grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-8 pb-32"
+        }
+      >
+        <div className="space-y-8 min-w-0">
+          <div className="surface-tile p-8">
+            <div className="flex items-center justify-between mb-8 px-1">
+              <h2 className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40">
+                Core Configuration
+              </h2>
+              <div className="h-px flex-1 bg-[var(--kyro-border)] ml-6 opacity-30" />
+            </div>
             <AutoForm
               config={
                 collection
@@ -267,51 +309,151 @@ export function DetailView({
               }
               data={data}
               onChange={setData}
+              layout={isSingleLayout ? "single" : "split"}
+              onActionSuccess={(message) => addToast("success", message)}
+              onActionError={(message) => addToast("error", message)}
+              documentStatus={status}
+              justSaved={justSaved}
             />
+            {isSingleLayout && (
+              <div className="mt-8 pt-8 border-t border-[var(--kyro-border)] flex justify-end gap-3">
+                {mode === "collection" && documentId && (
+                  <button
+                    type="button"
+                    onClick={() => setShowDeleteConfirm(true)}
+                    className="px-6 py-3 text-red-500 rounded-2xl font-black text-sm hover:bg-red-500/10 active:scale-95 transition-all text-left"
+                  >
+                    Delete
+                  </button>
+                )}
+                <button
+                  type="button"
+                  onClick={() => handleSave(false)}
+                  disabled={saving}
+                  className="px-8 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-2xl font-black text-sm shadow-xl hover:shadow-[var(--kyro-primary)] active:scale-95 transition-all flex items-center gap-2"
+                >
+                  {saving ? (
+                    <svg
+                      className="w-4 h-4 animate-spin"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                    >
+                      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+                    </svg>
+                  ) : (
+                    <svg
+                      className="w-4 h-4"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                    >
+                      <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
+                      <polyline points="17 21 17 13 7 13 7 21" />
+                      <polyline points="7 3 7 8 15 8" />
+                    </svg>
+                  )}
+                  {saving
+                    ? "Saving..."
+                    : mode === "global"
+                      ? "Save Configuration"
+                      : "Save Document"}
+                </button>
+              </div>
+            )}
           </div>
         </div>
 
-        <div className="kyro-meta-card">
-          <div className="kyro-card">
-            <div className="kyro-card-header">
-              <h3 className="kyro-card-title">Info</h3>
+        {!isSingleLayout && (
+          <div className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-500">
+            <div className="surface-tile p-8">
+              <h3 className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40 mb-6">
+                Metadata
+              </h3>
+              <div className="space-y-6">
+                <div className="flex flex-col gap-2">
+                  <span className="text-[10px] font-black uppercase tracking-widest opacity-40">
+                    Dynamic Status
+                  </span>
+                  <div>
+                    <span
+                      className={`inline-flex items-center px-3 py-1 rounded-full text-[9px] font-black uppercase tracking-widest ${status === "published" ? "bg-green-500/10 text-green-500" : "bg-amber-500/10 text-amber-500"}`}
+                    >
+                      {status || "draft"}
+                    </span>
+                  </div>
+                </div>
+                <div className="flex flex-col gap-2">
+                  <span className="text-[10px] font-black uppercase tracking-widest opacity-40">
+                    Date Created
+                  </span>
+                  <span className="text-sm font-bold text-[var(--kyro-text-secondary)]">
+                    {createdAt
+                      ? new Date(createdAt).toLocaleString("en-US", {
+                          dateStyle: "medium",
+                          timeStyle: "short",
+                        })
+                      : "N/A"}
+                  </span>
+                </div>
+                <div className="flex flex-col gap-2">
+                  <span className="text-[10px] font-black uppercase tracking-widest opacity-40">
+                    Last Modified
+                  </span>
+                  <span className="text-sm font-bold text-[var(--kyro-text-secondary)]">
+                    {updatedAt
+                      ? new Date(updatedAt).toLocaleString("en-US", {
+                          dateStyle: "medium",
+                          timeStyle: "short",
+                        })
+                      : "Just now"}
+                  </span>
+                </div>
+                {publishedAt && (
+                  <div className="flex flex-col gap-2">
+                    <span className="text-[10px] font-black uppercase tracking-widest opacity-40">
+                      Public At
+                    </span>
+                    <span className="text-sm font-bold text-[var(--kyro-text-secondary)]">
+                      {new Date(publishedAt).toLocaleString("en-US", {
+                        dateStyle: "medium",
+                        timeStyle: "short",
+                      })}
+                    </span>
+                  </div>
+                )}
+              </div>
             </div>
-            <div className="kyro-card-content">
-              <div className="kyro-meta-item">
-                <span className="kyro-meta-label">Status</span>
-                <span
-                  className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${
-                    status === "published"
-                      ? "bg-green-100 text-green-700"
-                      : "bg-gray-100 text-gray-600"
-                  }`}
+
+            <div className="surface-tile p-8 bg-[var(--kyro-bg-secondary)]">
+              <h3 className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40 mb-4">
+                Quick Links
+              </h3>
+              <div className="space-y-3">
+                <button
+                  type="button"
+                  className="w-full text-left px-4 py-2 rounded-xl text-xs font-bold hover:bg-[var(--kyro-bg-secondary)] transition-colors"
                 >
-                  {status === "published" ? "Published" : "Draft"}
-                </span>
-              </div>
-              <div className="kyro-meta-item">
-                <span className="kyro-meta-label">Created</span>
-                <span className="kyro-meta-value">
-                  {createdAt ? new Date(createdAt).toLocaleString() : "N/A"}
-                </span>
-              </div>
-              <div className="kyro-meta-item">
-                <span className="kyro-meta-label">Updated</span>
-                <span className="kyro-meta-value">
-                  {updatedAt ? new Date(updatedAt).toLocaleString() : "N/A"}
-                </span>
+                  Duplicate Document
+                </button>
+                <button
+                  type="button"
+                  className="w-full text-left px-4 py-2 rounded-xl text-xs font-bold hover:bg-[var(--kyro-bg-secondary)] transition-colors"
+                >
+                  View Public Page
+                </button>
+                <button
+                  type="button"
+                  className="w-full text-left px-4 py-2 rounded-xl text-xs font-bold text-red-500 hover:bg-red-500/10 transition-colors"
+                >
+                  Delete Entry
+                </button>
               </div>
-              {publishedAt && (
-                <div className="kyro-meta-item">
-                  <span className="kyro-meta-label">Published</span>
-                  <span className="kyro-meta-value">
-                    {new Date(publishedAt).toLocaleString()}
-                  </span>
-                </div>
-              )}
             </div>
           </div>
-        </div>
+        )}
       </div>
 
       <ConfirmModal