@kyro-cms/admin 0.9.0 → 0.9.2

package/src/components/PluginsManager.tsx

@@ -1,9 +1,7 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
   Blocks,
   Settings,
-  ToggleRight,
-  ToggleLeft,
   CheckCircle2,
   Clock,
   RefreshCw,
@@ -11,6 +9,7 @@ import {
   Search,
   Plus,
   X,
+  AlertTriangle,
 } from "./ui/icons";
 import { Modal, ModalContent, ModalActions } from "./ui/Modal";
 import { PageHeader } from "./ui/PageHeader";
@@ -22,71 +21,118 @@ interface Plugin {
   description: string;
   version: string;
   enabled: boolean;
-  author: string;
-  updatedAt: string;
-  icon: string;
-  status: "active" | "error" | "update_available";
+  status: "active" | "disabled" | "error" | "update_available";
 }
 
-const mockPlugins: Plugin[] = [
-  {
-    id: "seo-optimizer",
-    name: "SEO Optimizer Pro",
-    description:
-      "Advanced meta tags, sitemaps, and rich snippets for all collections.",
-    version: "2.1.4",
-    enabled: true,
-    author: "Kyro Team",
-    updatedAt: "2024-05-10T14:30:00Z",
-    icon: "search",
-    status: "active",
-  },
-  {
-    id: "analytics-dashboard",
-    name: "Analytics Integration",
-    description:
-      "Connect to Google Analytics, Plausible, or Mixpanel for traffic insights.",
-    version: "1.0.2",
-    enabled: true,
-    author: "Kyro Team",
-    updatedAt: "2024-04-20T09:15:00Z",
-    icon: "activity",
-    status: "update_available",
-  },
-  {
-    id: "aws-s3-adapter",
-    name: "AWS S3 Storage",
-    description: "Cloud storage adapter for Media Library with S3 integration.",
-    version: "3.0.0",
-    enabled: false,
-    author: "AWS",
-    updatedAt: "2024-01-15T11:00:00Z",
-    icon: "database",
-    status: "active",
-  },
-  {
-    id: "ai-writer",
-    name: "AI Content Writer",
-    description:
-      "Generate blog posts and product descriptions with AI assistance.",
-    version: "1.2.0",
-    enabled: true,
-    author: "Kyro Team",
-    updatedAt: "2024-05-01T10:00:00Z",
-    icon: "sparkles",
-    status: "active",
-  },
-];
+interface ToggleError {
+  error: string;
+  requiresAction?: boolean;
+  activeProvider?: string;
+}
 
 export function PluginsManager() {
-  const [plugins, setPlugins] = useState<Plugin[]>(mockPlugins);
+  const [plugins, setPlugins] = useState<Plugin[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [toggleLoading, setToggleLoading] = useState<string | null>(null);
   const [searchQuery, setSearchQuery] = useState("");
   const [showConfigModal, setShowConfigModal] = useState<string | null>(null);
+  const [confirmDisable, setConfirmDisable] = useState<{
+    id: string;
+    name: string;
+    activeProvider: string;
+  } | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
-  const togglePlugin = (id: string) => {
-    setPlugins((prev) =>
-      prev.map((p) => (p.id === id ? { ...p, enabled: !p.enabled } : p)),
-    );
+  const fetchPlugins = async () => {
+    try {
+      setLoading(true);
+      const res = await fetch("/api/plugins");
+      if (res.ok) {
+        const data = await res.json();
+        setPlugins(data);
+      }
+    } catch (e) {
+      console.error("Failed to fetch plugins:", e);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchPlugins();
+  }, []);
+
+  const togglePlugin = async (id: string) => {
+    setError(null);
+    setToggleLoading(id);
+
+    try {
+      const res = await fetch(`/api/plugins/${encodeURIComponent(id)}/toggle`, {
+        method: "PUT",
+      });
+
+      if (res.status === 409) {
+        const errData: ToggleError = await res.json();
+        const plugin = plugins.find((p) => p.id === id);
+        if (errData.requiresAction && plugin) {
+          setConfirmDisable({
+            id,
+            name: plugin.name,
+            activeProvider: errData.activeProvider || "unknown",
+          });
+        } else {
+          setError(errData.error);
+        }
+        return;
+      }
+
+      if (!res.ok) {
+        const errData = await res.json().catch(() => ({ error: "Toggle failed" }));
+        setError(errData.error);
+        return;
+      }
+
+      const result = await res.json();
+      setPlugins((prev) =>
+        prev.map((p) =>
+          p.id === id ? { ...p, enabled: result.enabled } : p,
+        ),
+      );
+    } catch (e: any) {
+      setError(e.message || "Network error");
+    } finally {
+      setToggleLoading(null);
+    }
+  };
+
+  const handleForceDisable = async () => {
+    if (!confirmDisable) return;
+    setError(null);
+
+    try {
+      const res = await fetch(
+        `/api/plugins/${encodeURIComponent(confirmDisable.id)}/toggle?force=1`,
+        { method: "PUT" },
+      );
+
+      if (res.ok) {
+        const result = await res.json();
+        setPlugins((prev) =>
+          prev.map((p) =>
+            p.id === confirmDisable.id
+              ? { ...p, enabled: result.enabled }
+              : p,
+          ),
+        );
+      } else {
+        const errData = await res.json().catch(() => ({ error: "Toggle failed" }));
+        setError(errData.error);
+      }
+    } catch (e: any) {
+      setError(e.message || "Network error");
+    } finally {
+      setConfirmDisable(null);
+    }
   };
 
   const filteredPlugins = plugins.filter(
@@ -100,6 +146,21 @@ export function PluginsManager() {
     (p) => p.status === "update_available",
   ).length;
 
+  if (loading) {
+    return (
+      <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 pb-32">
+        <PageHeader
+          title="Plugins"
+          description="Extend Kyro CMS with modular features and integrations."
+          icon={Blocks}
+        />
+        <div className="flex items-center justify-center p-12">
+          <RefreshCw className="w-6 h-6 animate-spin text-[var(--kyro-text-secondary)] opacity-40" />
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 pb-32">
       <PageHeader
@@ -115,6 +176,20 @@ export function PluginsManager() {
         ]}
       />
 
+      {error && (
+        <div className="p-4 rounded-2xl bg-red-500/10 border border-red-500/20 flex items-center gap-3">
+          <AlertTriangle className="w-4 h-4 text-red-500 shrink-0" />
+          <p className="text-xs text-red-500">{error}</p>
+          <button
+            type="button"
+            onClick={() => setError(null)}
+            className="ml-auto p-1 hover:bg-red-500/20 rounded-lg transition-colors"
+          >
+            <X className="w-3 h-3 text-red-500" />
+          </button>
+        </div>
+      )}
+
       <div className="flex flex-col gap-8 surface-tile p-8">
         {/* Stats Summary */}
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
@@ -155,14 +230,14 @@ export function PluginsManager() {
               <Search className="w-4 h-4 absolute left-3.5 top-1/2 -translate-y-1/2 text-[var(--kyro-text-secondary)] opacity-40" />
               <input
                 type="text"
-                placeholder="Search ecosystem..."
+                placeholder="Search plugins..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 className="w-full pl-10 pr-4 py-3 bg-[var(--kyro-bg-secondary)] border border-[var(--kyro-border)] rounded-xl text-xs focus:outline-none focus:border-[var(--kyro-primary)]/50 transition-all"
               />
             </div>
           </div>
-          
+
           <div className="flex items-center gap-2 px-1">
             <div className="w-0.5 h-3 bg-[var(--kyro-primary)] rounded-full" />
             <h2 className="text-[10px] font-bold tracking-[0.2em] opacity-40 uppercase">Installed Extensions</h2>
@@ -199,7 +274,7 @@ export function PluginsManager() {
                   </div>
 
                   <p className="text-xs text-[var(--kyro-text-secondary)] opacity-70 leading-relaxed min-h-[32px] line-clamp-2">
-                    {plugin.description}
+                    {plugin.description || "No description available."}
                   </p>
 
                   <div className="flex items-center justify-between pt-3 border-t border-[var(--kyro-border)]/50">
@@ -222,12 +297,19 @@ export function PluginsManager() {
                       <button
                         type="button"
                         onClick={() => togglePlugin(plugin.id)}
+                        disabled={toggleLoading === plugin.id}
                         className={`p-2 border rounded-lg transition-all shadow-sm ${plugin.enabled
                           ? "bg-red-500/5 border-red-500/10 text-red-500/40 hover:text-red-500 hover:border-red-500/30"
                           : "bg-green-500/5 border-green-500/10 text-green-500/40 hover:text-green-500 hover:border-green-500/30"
-                          }`}
+                          } disabled:opacity-30 disabled:cursor-not-allowed`}
                       >
-                        {plugin.enabled ? <X className="w-3.5 h-3.5" /> : <Plus className="w-3.5 h-3.5" />}
+                        {toggleLoading === plugin.id ? (
+                          <RefreshCw className="w-3.5 h-3.5 animate-spin" />
+                        ) : plugin.enabled ? (
+                          <X className="w-3.5 h-3.5" />
+                        ) : (
+                          <Plus className="w-3.5 h-3.5" />
+                        )}
                       </button>
                     </div>
                   </div>
@@ -244,11 +326,56 @@ export function PluginsManager() {
         </div>
       </div>
 
-      {/* Modal */}
+      {/* Confirmation Modal for Disabling Active Storage Plugin */}
+      <Modal
+        open={!!confirmDisable}
+        onClose={() => setConfirmDisable(null)}
+        title="Disable Storage Plugin?"
+        size="md"
+      >
+        <ModalContent>
+          <div className="p-6 text-center space-y-4">
+            <div className="w-16 h-16 mx-auto bg-amber-500/10 rounded-2xl flex items-center justify-center border border-amber-500/20">
+              <AlertTriangle className="w-8 h-8 text-amber-500" />
+            </div>
+            <div>
+              <h4 className="text-lg font-bold mb-2">Storage Plugin In Use</h4>
+              <p className="text-sm text-[var(--kyro-text-secondary)] opacity-70 leading-relaxed">
+                "{confirmDisable?.name}" is currently the active storage provider.
+                Disabling it will switch storage to <strong>Local</strong>.
+              </p>
+              <p className="text-xs text-[var(--kyro-text-secondary)] opacity-50 mt-2">
+                Existing media URLs will remain accessible, but new uploads will
+                use Local storage. You can re-enable the plugin at any time.
+              </p>
+            </div>
+          </div>
+        </ModalContent>
+        <ModalActions>
+          <div className="flex gap-3 w-full">
+            <button
+              type="button"
+              onClick={() => setConfirmDisable(null)}
+              className="kyro-btn kyro-btn-primary flex-1 py-3 rounded-xl font-bold text-sm"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={handleForceDisable}
+              className="kyro-btn flex-1 py-3 rounded-xl font-bold text-sm bg-amber-500 hover:bg-amber-600 text-white transition-all"
+            >
+              Switch to Local & Disable
+            </button>
+          </div>
+        </ModalActions>
+      </Modal>
+
+      {/* Config Modal */}
       <Modal
         open={!!showConfigModal}
         onClose={() => setShowConfigModal(null)}
-        title="Plugin Architecture"
+        title="Plugin Configuration"
         size="lg"
       >
         <ModalContent>
@@ -266,9 +393,9 @@ export function PluginsManager() {
           <button
             type="button"
             onClick={() => setShowConfigModal(null)}
-            className="w-full py-3 rounded-xl font-bold text-sm bg-[var(--kyro-primary)] text-white hover:opacity-90 transition-all shadow-lg shadow-[var(--kyro-primary)]/20"
+            className="kyro-btn kyro-btn-primary w-full py-3 rounded-xl font-bold text-sm hover:opacity-90 transition-all shadow-lg shadow-[var(--kyro-primary)]/20"
           >
-            Save Configuration
+            Close
           </button>
         </ModalActions>
       </Modal>

package/src/components/RestPlayground.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback, useRef } from "react";
-import { useUIStore } from "../lib/stores";
+import { useUIStore, toast } from "../lib/stores";
 import { apiPath } from "../lib/paths";
+import { Modal } from "./ui/Modal";
 
 interface EnvVariable {
   key: string;
@@ -82,7 +83,7 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
   const [newFolderName, setNewFolderName] = useState("");
   const [saveToFolderId, setSaveToFolderId] = useState("");
   const [saveRequestName, setSaveRequestName] = useState("");
-  const { confirm, alert } = useUIStore();
+  const { confirm } = useUIStore();
 
   // Load from localStorage
   useEffect(() => {
@@ -325,9 +326,9 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
           setEnvVars((prev) => [...prev, ...data.envVars]);
         }
 
-        alert({ title: "Import Successful", message: "Your playground data has been imported." });
-      } catch (error) {
-        alert({ title: "Import Failed", message: "Invalid JSON file structure." });
+        toast.success("Your playground data has been imported.");
+      } catch (err) {
+        toast.error("Invalid JSON file structure.");
       }
     };
     reader.readAsText(file);
@@ -731,59 +732,65 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
       </div>
 
       {/* Modals */}
-      {showFolderModal && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[100] p-4">
-          <div className="surface-tile w-full max-w-md p-6 rounded-2xl shadow-2xl border border-[var(--kyro-border)]">
-            <h2 className="text-xl font-bold mb-4">Create Folder</h2>
+      <Modal
+        open={showFolderModal}
+        onClose={() => setShowFolderModal(false)}
+        title="Create Folder"
+        size="md"
+        footer={
+          <>
+            <button type="button" onClick={() => setShowFolderModal(false)} className="kyro-btn kyro-btn-md kyro-btn-ghost">Cancel</button>
+            <button type="button" onClick={createFolder} className="kyro-btn kyro-btn-md bg-pink-500 border-pink-500 text-white hover:bg-pink-600 hover:border-pink-600">Create</button>
+          </>
+        }
+      >
+        <div className="py-2">
+          <input
+            type="text"
+            value={newFolderName}
+            onChange={(e) => setNewFolderName(e.target.value)}
+            placeholder="Folder name..."
+            className="w-full bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg px-4 py-2"
+          />
+        </div>
+      </Modal>
+
+      <Modal
+        open={showSaveModal}
+        onClose={() => setShowSaveModal(false)}
+        title="Save Request"
+        size="md"
+        footer={
+          <>
+            <button type="button" onClick={() => setShowSaveModal(false)} className="kyro-btn kyro-btn-md kyro-btn-ghost">Cancel</button>
+            <button type="button" onClick={saveRequest} className="kyro-btn kyro-btn-md bg-pink-500 border-pink-500 text-white hover:bg-pink-600 hover:border-pink-600 disabled:opacity-50 disabled:cursor-not-allowed" disabled={!saveRequestName || !saveToFolderId}>Save</button>
+          </>
+        }
+      >
+        <div className="space-y-4 py-2">
+          <div>
+            <label className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-muted)] block mb-1">Request Name</label>
             <input
               type="text"
-              value={newFolderName}
-              onChange={(e) => setNewFolderName(e.target.value)}
-              placeholder="Folder name..."
-              className="w-full bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg px-4 py-2 mb-6"
+              value={saveRequestName}
+              onChange={(e) => setSaveRequestName(e.target.value)}
+              placeholder="e.g. List Posts..."
+              className="w-full bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg px-4 py-2"
             />
-            <div className="p-4 border-t border-[var(--kyro-border)] flex justify-end gap-2 bg-[var(--kyro-surface-accent)]">
-              <button type="button" onClick={() => setShowFolderModal(false)} className="kyro-btn kyro-btn-md kyro-btn-ghost">Cancel</button>
-              <button type="button" onClick={createFolder} className="kyro-btn kyro-btn-md kyro-btn-primary bg-pink-500 border-pink-500 text-white hover:bg-pink-600 hover:border-pink-600">Create</button>
-            </div>
           </div>
-        </div>
-      )}
-
-      {showSaveModal && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[100] p-4">
-          <div className="surface-tile w-full max-w-md p-6 rounded-2xl shadow-2xl border border-[var(--kyro-border)]">
-            <h2 className="text-xl font-bold mb-4">Save Request</h2>
-            <div className="space-y-4">
-              <div>
-                <label className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-muted)] block mb-1">Request Name</label>
-                <input
-                  type="text"
-                  value={saveRequestName}
-                  onChange={(e) => setSaveRequestName(e.target.value)}
-                  placeholder="e.g. List Posts..."
-                  className="w-full bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg px-4 py-2"
-                />
-              </div>
-              <div>
-                <label className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-muted)] block mb-1">Folder</label>
-                <select
-                  value={saveToFolderId}
-                  onChange={(e) => setSaveToFolderId(e.target.value)}
-                  className="w-full bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg px-4 py-2"
-                >
-                  <option value="">Select Folder...</option>
-                  {folders.map(f => <option key={f.id} value={f.id}>{f.name}</option>)}
-                </select>
-              </div>
-            </div>
-            <div className="p-4 border-t border-[var(--kyro-border)] flex justify-end gap-2 bg-[var(--kyro-surface-accent)]">
-              <button type="button" onClick={() => setShowSaveModal(false)} className="kyro-btn kyro-btn-md kyro-btn-ghost">Cancel</button>
-              <button type="button" onClick={saveRequest} className="kyro-btn kyro-btn-md kyro-btn-primary bg-pink-500 border-pink-500 text-white hover:bg-pink-600 hover:border-pink-600 disabled:opacity-50 disabled:cursor-not-allowed" disabled={!saveRequestName || !saveToFolderId}>Save</button>
-            </div>
+          <div>
+            <label className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-muted)] block mb-1">Folder</label>
+            <select
+              value={saveToFolderId}
+              onChange={(e) => setSaveToFolderId(e.target.value)}
+              className="w-full bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg px-4 py-2"
+            >
+              <option value="">Select Folder...</option>
+              {folders.map(f => <option key={f.id} value={f.id}>{f.name}</option>)}
+            </select>
           </div>
         </div>
-      )}
+      </Modal>
     </div>
   );
 }

package/src/components/SessionsManager.tsx

@@ -151,7 +151,7 @@ export function SessionsManager() {
                 >
                   <div className="flex items-start justify-between gap-4 relative z-10">
                     <div className="flex items-center gap-3">
-                      <div className={`p-2.5 rounded-xl transition-colors shadow-sm ${s.currentSession ? "bg-[var(--kyro-primary)] text-white" : "bg-[var(--kyro-surface)] text-[var(--kyro-text-secondary)] border border-[var(--kyro-border)]"}`}>
+                      <div className={`kyro-btn-primary p-2.5 rounded-xl transition-colors shadow-sm ${s.currentSession ? "" : "bg-[var(--kyro-surface)] text-[var(--kyro-text-secondary)] border border-[var(--kyro-border)]"}`}>
                         {s.deviceInfo?.platform?.toLowerCase().includes("android") || s.deviceInfo?.platform?.toLowerCase().includes("ios") 
                           ? <Smartphone className="w-4 h-4" /> 
                           : <Laptop className="w-4 h-4" />}

package/src/components/SettingsPage.tsx

@@ -0,0 +1,22 @@
+import { AutoForm } from "./AutoForm";
+import { toast } from "../lib/stores";
+
+interface SettingsPageProps {
+  config: any;
+  globalSlug?: string;
+  data?: Record<string, unknown>;
+  layout?: "split" | "single";
+}
+
+export function SettingsPage(props: SettingsPageProps) {
+  return (
+    <AutoForm
+      {...props}
+      onActionSuccess={(msg: string) => {
+        toast.success(msg);
+        setTimeout(() => window.location.reload(), 800);
+      }}
+      onActionError={(msg: string) => toast.error(msg)}
+    />
+  );
+}

package/src/components/Sidebar.astro

@@ -3,25 +3,7 @@ import "../styles/main.css";
 import { nonAuthCollections } from "../lib/config";
 import { adminPath } from "../lib/paths";
 import { getSiteSettings } from "../lib/globals";
-import {
-  Home,
-  Database,
-  Settings,
-  Users,
-  Shield,
-  FileText,
-  Clock,
-  Blocks,
-  Key,
-  Webhook,
-  Grid,
-  User,
-  LogOut,
-  Sun,
-  Moon,
-  Menu,
-  Dot,
-} from "./ui/icons";
+import * as Icons from "lucide-react";
 import { UserMenu } from "./UserMenu";
 
 interface NavItem {
@@ -49,7 +31,7 @@ const collectionItems: NavItem[] = nonAuthCollections
   .map((col) => ({
     href: `${adminPath}/${col.slug}`,
     label: col.label || col.slug,
-    icon: "collection",
+    icon: col.admin?.icon || "collection",
   }));
 
 const navSections: { label: string; items: NavItem[] }[] = [
@@ -82,24 +64,13 @@ const navSections: { label: string; items: NavItem[] }[] = [
   },
 ];
 
-const icons: Record<string, any> = {
-  home: Home,
-  media: Grid,
-  collection: Dot,
-  menu: Menu,
-  settings: Settings,
-  users: Users,
-  shield: Shield,
-  audit: FileText,
-  plugins: Blocks,
-  keys: Key,
-  webhooks: Webhook,
-  marketplace: Grid,
-  user: User,
-  logout: LogOut,
-  sessions: Clock,
-  sun: Sun,
-  moon: Moon,
+const iconAliases: Record<string, string> = {
+  collection: "Dot",
+  media: "Grid",
+  home: "Home",
+  users: "Users",
+  plugins: "Blocks",
+  settings: "Settings",
 };
 
 function isActive(item: NavItem): boolean {
@@ -177,7 +148,8 @@ function isActive(item: NavItem): boolean {
                   }`}
                 >
                   {(() => {
-                    const Icon = icons[item.icon] || Database;
+                    const iconName = iconAliases[item.icon] || item.icon;
+                    const Icon = (Icons as any)[iconName] || Icons.Dot;
                     return <Icon className="w-4 h-4" strokeWidth={2.5} />;
                   })()}
                   <span>{item.label}</span>
@@ -245,14 +217,14 @@ function isActive(item: NavItem): boolean {
           class="p-2 rounded-lg transition-all active:scale-95"
           title="Light Mode"
         >
-          <Sun className="w-4 h-4" strokeWidth={2.5} />
+          <Icons.Sun className="w-4 h-4" strokeWidth={2.5} />
         </button>
         <button
           id="theme-dark-btn"
           class="p-2 rounded-lg transition-all active:scale-95"
           title="Dark Mode"
         >
-          <Moon className="w-4 h-4" strokeWidth={2.5} />
+          <Icons.Moon className="w-4 h-4" strokeWidth={2.5} />
         </button>
       </div>