@kyro-cms/admin 0.1.6 → 0.1.8

package/src/components/ActionBar.tsx

@@ -34,6 +34,28 @@ export function ActionBar({
   publishedAt,
   updatedAt,
 }: ActionBarProps) {
+  const styles = {
+    btn: {
+      padding: "0.5rem 1rem",
+      borderRadius: "0.75rem",
+      fontWeight: 600,
+      fontSize: "0.875rem",
+      transition: "all 0.2s",
+      border: "none",
+      cursor: "pointer",
+    },
+    idle: { backgroundColor: "#6b7280", color: "white" },
+    saving: {
+      backgroundColor: "#9ca3af",
+      color: "white",
+      opacity: 0.7,
+      cursor: "not-allowed",
+    },
+    saved: { backgroundColor: "#22c55e", color: "white" },
+    error: { backgroundColor: "#ef4444", color: "white" },
+    changes: { backgroundColor: "#eab308", color: "black" },
+  };
+
   const getSaveStatusText = () => {
     if (saveStatus === "saving") return "Saving...";
     if (saveStatus === "saved") return "Saved";
@@ -42,18 +64,92 @@ export function ActionBar({
     return null;
   };
 
+  const getSaveButtonClass = () => {
+    const base = "kyro-btn kyro-btn-md";
+    if (saveStatus === "saving") return `${base} opacity-50 cursor-wait`;
+    if (saveStatus === "saved")
+      return `${base} bg-green-500 hover:bg-green-600 text-white`;
+    if (saveStatus === "error")
+      return `${base} bg-red-500 hover:bg-red-600 text-white`;
+    if (hasChanges)
+      return `${base} bg-yellow-500 hover:bg-yellow-600 text-black`;
+    return `${base} bg-gray-500 hover:bg-gray-600 text-white`;
+  };
+
   const getStatusBadge = () => {
     const statusConfig = {
-      draft: { label: "Draft", class: "bg-gray-100 text-gray-600" },
-      published: { label: "Published", class: "bg-green-100 text-green-700" },
-      scheduled: { label: "Scheduled", class: "bg-blue-100 text-blue-700" },
-      archived: { label: "Archived", class: "bg-yellow-100 text-yellow-700" },
+      draft: {
+        label: "Draft",
+        class: "bg-gray-100 text-gray-600 border-gray-200",
+        icon: (
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.5"
+          >
+            <path d="M12 2v20M2 12h20" />
+          </svg>
+        ),
+      },
+      published: {
+        label: "Published",
+        class: "bg-green-100 text-green-700 border-green-200",
+        icon: (
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.5"
+          >
+            <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
+          </svg>
+        ),
+      },
+      scheduled: {
+        label: "Scheduled",
+        class: "bg-blue-100 text-blue-700 border-blue-200",
+        icon: (
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.5"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <path d="M12 6v6l4 2" />
+          </svg>
+        ),
+      },
+      archived: {
+        label: "Archived",
+        class: "bg-yellow-100 text-yellow-700 border-yellow-200",
+        icon: (
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.5"
+          >
+            <path d="M21 8v13H3V8M1 3h22v5H1zM10 12h4" />
+          </svg>
+        ),
+      },
     };
     const config = statusConfig[status];
     return (
       <span
-        className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${config.class}`}
+        className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold border ${config.class}`}
       >
+        {config.icon}
         {config.label}
       </span>
     );
@@ -80,46 +176,87 @@ export function ActionBar({
             </span>
           )}
         </div>
-        <div className="text-xs text-gray-400 space-y-0.5">
-          {updatedAt && <div>Updated: {formatDate(updatedAt)}</div>}
+        <div className="text-xs space-y-0.5">
+          {updatedAt && (
+            <div className="text-gray-400">
+              Updated: {formatDate(updatedAt)}
+            </div>
+          )}
           {publishedAt && status === "published" && (
-            <div>Published: {formatDate(publishedAt)}</div>
+            <div className="text-[var(--kyro-primary)] font-medium">
+              Published: {formatDate(publishedAt)}
+            </div>
           )}
         </div>
       </div>
 
       <div className="flex items-center gap-2">
         {status === "draft" && onPublish && (
-          <button
+          <button type="button"
             onClick={onPublish}
             disabled={saveStatus === "saving"}
-            className="kyro-btn kyro-btn-primary kyro-btn-md"
+            className="bg-[var(--kyro-primary)] hover:opacity-90 text-white kyro-btn-md flex items-center gap-2"
           >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.5"
+            >
+              <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
+            </svg>
             Publish
           </button>
         )}
         {status === "published" && onUnpublish && (
-          <button
+          <button type="button"
             onClick={onUnpublish}
             disabled={saveStatus === "saving"}
-            className="kyro-btn kyro-btn-secondary kyro-btn-md"
+            className="kyro-btn kyro-btn-warning kyro-btn-md flex items-center gap-2"
           >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.5"
+            >
+              <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8M3 3v5h5" />
+            </svg>
             Unpublish
           </button>
         )}
-        <button
+        <button type="button"
           onClick={onSave}
           disabled={
             saveStatus === "saving" || (!hasChanges && saveStatus !== "error")
           }
-          className="kyro-btn kyro-btn-secondary kyro-btn-md"
+          style={{
+            ...styles.btn,
+            ...(saveStatus === "saving"
+              ? styles.saving
+              : saveStatus === "saved"
+                ? styles.saved
+                : saveStatus === "error"
+                  ? styles.error
+                  : hasChanges
+                    ? styles.changes
+                    : styles.idle),
+          }}
         >
-          {saveStatus === "saving" ? "Saving..." : "Save"}
+          {saveStatus === "saving"
+            ? "Saving..."
+            : saveStatus === "saved"
+              ? "Saved"
+              : "Save"}
         </button>
 
         <Dropdown
           trigger={
-            <button className="kyro-btn kyro-btn-ghost kyro-btn-md p-2">
+            <button type="button" className="kyro-btn kyro-btn-ghost kyro-btn-md p-2">
               <svg
                 width="16"
                 height="16"

package/src/components/Admin.tsx

@@ -1,15 +1,32 @@
 import { useState, useEffect } from "react";
-import type { CollectionConfig, GlobalConfig } from "@kyro-cms/core";
-import { Sidebar } from "./layout/Sidebar";
+import type { CollectionConfig, GlobalConfig } from "@kyro-cms/core/client";
 import { ListView } from "./ListView";
 import { DetailView } from "./DetailView";
 import { CreateView } from "./CreateView";
 import { LoginPage } from "./LoginPage";
+import { Dashboard } from "./Dashboard";
+import { UserManagement } from "./UserManagement";
+import { BrandingHub } from "./BrandingHub";
+import { DeveloperCenter } from "./DeveloperCenter";
+import { WebhookManager } from "./WebhookManager";
+import { MediaGallery } from "./MediaGallery";
+import { CommandPalette } from "./ui/CommandPalette";
 import { Toast, ToastProvider } from "./ui/Toast";
 import { ThemeProvider, type ThemeMode } from "./ThemeProvider";
 import "../styles/main.css";
 
-type View = "list" | "detail" | "create" | "settings";
+type View =
+  | "list"
+  | "detail"
+  | "create"
+  | "settings"
+  | "users"
+  | "roles"
+  | "audit"
+  | "media"
+  | "branding"
+  | "developer"
+  | "webhooks";
 
 export interface KyroAdminConfig {
   collections?: CollectionConfig[] | Record<string, CollectionConfig>;
@@ -82,10 +99,22 @@ export function Admin({ config, theme = "light", onThemeChange }: AdminProps) {
   const [currentView, setCurrentView] = useState<View>("list");
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [toasts, setToasts] = useState<ToastMessage[]>([]);
+  const [showCommandPalette, setShowCommandPalette] = useState(false);
 
   const collections = normalizeCollections(config.collections);
   const globals = normalizeGlobals(config.globals);
 
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setShowCommandPalette((prev) => !prev);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
   useEffect(() => {
     const token = localStorage.getItem("kyro_token");
     const userStr = localStorage.getItem("kyro_user");
@@ -102,10 +131,7 @@ export function Admin({ config, theme = "light", onThemeChange }: AdminProps) {
   }, []);
 
   useEffect(() => {
-    const collectionKeys = Object.keys(collections);
-    if (collectionKeys.length > 0 && !activeCollection) {
-      setActiveCollection(collectionKeys[0]);
-    }
+    // No longer auto-selecting the first collection to allow Dashboard as home
   }, [authenticated]);
 
   const handleAuth = (token: string, user: AuthUser) => {
@@ -133,7 +159,37 @@ export function Admin({ config, theme = "light", onThemeChange }: AdminProps) {
     }, 5000);
   };
 
+  const removeToast = (id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  };
+
   const handleCollectionChange = (collectionName: string) => {
+    if (!collectionName) {
+      setActiveCollection(null);
+      setActiveGlobal(null);
+      setCurrentView("list");
+      setSelectedId(null);
+      return;
+    }
+
+    // Check if it's a special governance or developer view
+    if (
+      [
+        "users",
+        "roles",
+        "audit",
+        "media",
+        "branding",
+        "developer",
+        "webhooks",
+      ].includes(collectionName)
+    ) {
+      setActiveCollection(null);
+      setActiveGlobal(null);
+      setCurrentView(collectionName as any);
+      return;
+    }
+
     setActiveCollection(collectionName);
     setActiveGlobal(null);
     setCurrentView("list");
@@ -178,13 +234,54 @@ export function Admin({ config, theme = "light", onThemeChange }: AdminProps) {
           config={{} as any}
           global={global}
           onBack={() => setCurrentView("list")}
-          onSave={() => handleActionComplete("update")}
+          onSave={() => addToast("success", "Configuration saved successfully")}
           onError={handleError}
           mode="global"
         />
       );
     }
 
+    if (!activeCollection && !activeGlobal) {
+      if (currentView === "users") return <UserManagement />;
+      if (currentView === "roles")
+        return (
+          <div className="p-6">
+            <h2 className="text-xl font-bold">Roles Management</h2>
+            <p className="text-gray-500 mt-2">
+              Configure user roles and permissions.
+            </p>
+          </div>
+        );
+      if (currentView === "audit")
+        return (
+          <div className="p-6">
+            <h2 className="text-xl font-bold">Audit Logs</h2>
+            <p className="text-gray-500 mt-2">
+              View system activity and changes.
+            </p>
+          </div>
+        );
+      if (currentView === "media") return <MediaGallery />;
+      if (currentView === "branding") return <BrandingHub />;
+      if (currentView === "developer")
+        return <DeveloperCenter collections={collections} />;
+      if (currentView === "webhooks") return <WebhookManager />;
+
+      return (
+        <Dashboard
+          collections={collections}
+          onNavigate={(view, collection) => {
+            if (collection) {
+              setActiveCollection(collection);
+              setActiveGlobal(null);
+            }
+            setCurrentView(view as any);
+          }}
+          user={currentUser}
+        />
+      );
+    }
+
     if (!activeCollection) return null;
 
     const collection = collections[activeCollection];
@@ -231,33 +328,45 @@ export function Admin({ config, theme = "light", onThemeChange }: AdminProps) {
 
   return (
     <ThemeProvider defaultMode={theme}>
-      <ToastProvider>
+      <ToastProvider
+        toasts={toasts}
+        addToast={addToast}
+        removeToast={removeToast}
+      >
         <div className="kyro-admin">
-          <Sidebar
-            collections={collections}
-            globals={globals}
-            activeCollection={activeCollection}
-            activeGlobal={activeGlobal}
-            onCollectionClick={handleCollectionChange}
-            onGlobalClick={handleGlobalChange}
-            user={currentUser}
-            onLogout={handleLogout}
-          />
           <div className="kyro-main">
             <div className="kyro-content">{renderContent()}</div>
           </div>
-          {toasts.map((toast) => (
-            <Toast
-              key={toast.id}
-              type={toast.type}
-              message={toast.message}
-              onClose={() =>
-                setToasts((prev) => prev.filter((t) => t.id !== toast.id))
+          <CommandPalette
+            isOpen={showCommandPalette}
+            onClose={() => setShowCommandPalette(false)}
+            collections={collections}
+            globals={globals}
+            onNavigate={(view, collection, id) => {
+              if (view === "list" && collection) {
+                handleCollectionChange(collection);
+              } else if (view === "settings" && collection) {
+                handleGlobalChange(collection);
+              } else if (view === "media") {
+                setActiveCollection(null);
+                setActiveGlobal(null);
+                setCurrentView("list"); // This might need a separate 'media' view state if implemented
+              } else if (view === "create" && collection) {
+                setActiveCollection(collection);
+                setCurrentView("create");
               }
-            />
-          ))}
+            }}
+          />
         </div>
       </ToastProvider>
+      {toasts.map((toast) => (
+        <Toast
+          key={toast.id}
+          type={toast.type}
+          message={toast.message}
+          onClose={() => removeToast(toast.id)}
+        />
+      ))}
     </ThemeProvider>
   );
 }