@kyro-cms/admin 0.1.8 → 0.2.0

package/src/components/MediaGallery.tsx

@@ -28,6 +28,14 @@ import ReactCrop, {
   convertToPixelCrop,
 } from "react-image-crop";
 import "react-image-crop/dist/ReactCrop.css";
+import {
+  apiGet,
+  apiPost,
+  apiDelete,
+  apiPatch,
+  withCacheBust,
+  apiUpload,
+} from "@kyro-cms/utils/lib/api";
 
 interface MediaItem {
   id: string;
@@ -176,10 +184,7 @@ export function MediaGallery() {
 
   const loadFolders = useCallback(async () => {
     try {
-      const resp = await fetch("/api/media/folders", {
-        credentials: "include",
-      });
-      const data = await resp.json();
+      const data = await apiGet("/api/media/folders");
       setAvailableFolders((data.folders || []).sort());
     } catch (e) {
       console.error("loadFolders error:", e);
@@ -199,11 +204,11 @@ export function MediaGallery() {
           ? `&folder=${encodeURIComponent(currentFolder)}`
           : "";
 
-        const response = await fetch(
-          `/api/media?limit=30&page=${currentPage}&sortBy=${sortBy}&sortDir=${sortDir}${typeParam}${searchParam}${folderParam}&t=${Date.now()}`,
+        const result = await apiGet(
+          withCacheBust(
+            `/api/media?limit=30&page=${currentPage}&sortBy=${sortBy}&sortDir=${sortDir}${typeParam}${searchParam}${folderParam}`,
+          ),
         );
-        if (!response.ok) throw new Error("Failed to load media");
-        const result = await response.json();
 
         if (reset) {
           setItems(result.docs || []);
@@ -230,8 +235,7 @@ export function MediaGallery() {
 
   useEffect(() => {
     // Check if storage settings are configured
-    fetch("/api/storage-status")
-      .then((res) => res.json())
+    apiGet("/api/storage-status")
       .then((status) => {
         // If not configured, show modal to configure
         if (!status.configured) {
@@ -293,15 +297,7 @@ export function MediaGallery() {
         formData.append("file", file);
         if (uploadFolder) formData.append("folder", uploadFolder);
 
-        const response = await fetch("/api/upload", {
-          method: "POST",
-          body: formData,
-          signal: ac.signal,
-          credentials: "include",
-        });
-        if (!response.ok) continue;
-
-        const result = await response.json();
+        const result = await apiUpload("/api/upload", formData);
         const newItem: MediaItem = {
           ...result,
           type: getFileType(result.mimeType || file.type) as MediaItem["type"],
@@ -332,7 +328,7 @@ export function MediaGallery() {
     if (!ids?.length) return;
     try {
       for (const id of ids) {
-        await fetch(`/api/media/${id}`, { method: "DELETE" });
+        await apiDelete(`/api/media/${id}`);
       }
       loadMedia(true);
       setSelectedItems(new Set());
@@ -397,11 +393,7 @@ export function MediaGallery() {
       setLoading(true);
       const ids = Array.from(selectedItems);
       for (const id of ids) {
-        await fetch(`/api/media/${id}`, {
-          method: "PATCH",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ folder: targetFolder }),
-        });
+        await apiPatch(`/api/media/${id}`, { folder: targetFolder });
       }
       setSelectedItems(new Set());
       loadMedia(true);
@@ -416,18 +408,14 @@ export function MediaGallery() {
   const createFolder = async (name: string) => {
     if (!name) return;
     try {
-      const resp = await fetch("/api/media/folders", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ name, parentPath: currentFolder || "" }),
-        credentials: "include",
+      await apiPost("/api/media/folders", {
+        name,
+        parentPath: currentFolder || "",
       });
-      if (resp.ok) {
-        const newPath = currentFolder ? `${currentFolder}/${name}` : name;
-        setCurrentFolder(newPath);
-        setUploadFolder(newPath);
-        loadFolders();
-      }
+      const newPath = currentFolder ? `${currentFolder}/${name}` : name;
+      setCurrentFolder(newPath);
+      setUploadFolder(newPath);
+      loadFolders();
     } catch (e) {
       console.error("Failed to create folder:", e);
     }
@@ -442,27 +430,19 @@ export function MediaGallery() {
   const deleteFolder = async () => {
     if (!folderToDelete) return;
     try {
-      const resp = await fetch(
+      const result = await apiDelete(
         `/api/media/folders?path=${encodeURIComponent(folderToDelete)}`,
-        {
-          method: "DELETE",
-          credentials: "include",
-        },
       );
-      console.log("[deleteFolder] Response status:", resp.status);
-      const result = await resp.json();
       console.log("[deleteFolder] Response:", result);
-      if (resp.ok) {
-        // Clear items first, then reload
-        setItems([]);
-        if (currentFolder === folderToDelete) {
-          setCurrentFolder("");
-        }
-        loadFolders();
-        // Force fresh load by resetting page
-        setPage(1);
-        loadMedia(true);
+      // Clear items first, then reload
+      setItems([]);
+      if (currentFolder === folderToDelete) {
+        setCurrentFolder("");
       }
+      loadFolders();
+      // Force fresh load by resetting page
+      setPage(1);
+      loadMedia(true);
     } catch (e) {
       console.error("Failed to delete folder:", e);
     }
@@ -473,15 +453,12 @@ export function MediaGallery() {
   const savePanelMetadata = async () => {
     if (!panelItem) return;
     try {
-      const resp = await fetch(`/api/media/${panelItem.id}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ title: panelName, alt: panelAlt }),
+      await apiPatch(`/api/media/${panelItem.id}`, {
+        title: panelName,
+        alt: panelAlt,
       });
-      if (resp.ok) {
-        setPanelItem(null);
-        loadMedia(true);
-      }
+      setPanelItem(null);
+      loadMedia(true);
     } catch (e) {
       console.error("Failed to save metadata:", e);
     }
@@ -531,11 +508,7 @@ export function MediaGallery() {
 
         setUploading(true);
         try {
-          const res = await fetch("/api/upload", {
-            method: "POST",
-            body: formData,
-            credentials: "include",
-          });
+          const res = await apiUpload("/api/upload", formData);
           if (res.ok) {
             setShowCrop(false);
             setPanelItem(null);
@@ -561,7 +534,8 @@ export function MediaGallery() {
     type: FilterType;
     label: string;
   }) => (
-    <button type="button"
+    <button
+      type="button"
       onClick={() => setFilter(type)}
       className={`px-4 py-2 text-sm font-bold rounded-lg transition-colors ${
         filter === type
@@ -589,14 +563,16 @@ export function MediaGallery() {
             </div>
 
             <div className="flex items-center gap-4 px-4">
-              <button type="button"
+              <button
+                type="button"
                 onClick={handleBulkDelete}
                 className="p-3 bg-[var(--kyro-danger-bg)] text-[var(--kyro-danger)] hover:bg-[var(--kyro-danger)] hover:text-white rounded-full transition-all"
                 title="Delete Selected"
               >
                 <Trash2 className="w-5 h-5" />
               </button>
-              <button type="button"
+              <button
+                type="button"
                 className="p-3 bg-white/10 text-white hover:bg-white/20 rounded-full transition-all"
                 title="Download Collection"
               >
@@ -604,7 +580,8 @@ export function MediaGallery() {
               </button>
             </div>
 
-            <button type="button"
+            <button
+              type="button"
               onClick={() => setSelectedItems(new Set())}
               className="p-2 hover:bg-white/10 rounded-full transition-all"
             >
@@ -625,7 +602,8 @@ export function MediaGallery() {
             </p>
           </div>
           <div className="flex items-center gap-3">
-            <button type="button"
+            <button
+              type="button"
               onClick={() => setViewMode("grid")}
               className={`p-2 rounded-lg ${viewMode === "grid" ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"}`}
             >
@@ -643,7 +621,8 @@ export function MediaGallery() {
                 />
               </svg>
             </button>
-            <button type="button"
+            <button
+              type="button"
               onClick={() => setViewMode("list")}
               className={`p-2 rounded-lg ${viewMode === "list" ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"}`}
             >
@@ -665,7 +644,8 @@ export function MediaGallery() {
         </div>
 
         <div className="flex flex-col sm:flex-row gap-4 mb-4 items-start sm:items-center w-full">
-          <button type="button"
+          <button
+            type="button"
             onClick={() => fileInputRef.current?.click()}
             disabled={uploading}
             className="flex items-center gap-2 px-3 py-1.5 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-full font-bold text-xs hover:opacity-90 transition-colors"
@@ -691,7 +671,8 @@ export function MediaGallery() {
           </button>
           {availableFolders.length > 0 && (
             <div className="flex bg-[var(--kyro-surface-accent)] rounded-full p-1 gap-1 overflow-x-auto items-center">
-              <button type="button"
+              <button
+                type="button"
                 onClick={() => setCurrentFolder("")}
                 className={`flex-shrink-0 px-3 py-1 rounded-full text-xs font-bold transition-colors ${!currentFolder ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] shadow-sm" : "text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface)]"}`}
               >
@@ -699,13 +680,15 @@ export function MediaGallery() {
               </button>
               {availableFolders.map((folder) => (
                 <div key={folder} className="flex items-center group">
-                  <button type="button"
+                  <button
+                    type="button"
                     onClick={() => setCurrentFolder(folder)}
                     className={`flex-shrink-0 px-3 py-1 rounded-full text-xs font-bold transition-colors ${currentFolder === folder ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] shadow-sm" : "text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface)]"}`}
                   >
                     {folder}
                   </button>
-                  <button type="button"
+                  <button
+                    type="button"
                     onClick={() => confirmDeleteFolder(folder)}
                     className="flex-shrink-0 p-1 rounded-full text-[var(--kyro-text-muted)] hover:text-[var(--kyro-danger)] opacity-0 group-hover:opacity-100 transition-opacity ml-1"
                     title="Delete folder"
@@ -728,7 +711,8 @@ export function MediaGallery() {
               ))}
             </div>
           )}
-          <button type="button"
+          <button
+            type="button"
             onClick={() => setShowNewFolderModal(true)}
             className="flex items-center gap-2 px-3 py-1.5 border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] rounded-full font-bold text-xs hover:bg-[var(--kyro-surface-accent)] transition-colors"
           >
@@ -865,7 +849,8 @@ export function MediaGallery() {
               <span className="text-[10px] font-black uppercase tracking-widest opacity-40 mr-2">
                 {selectedItems.size} Selected
               </span>
-              <button type="button"
+              <button
+                type="button"
                 onClick={() => setSelectedItems(new Set())}
                 className="text-[10px] font-black uppercase tracking-widest text-[var(--kyro-danger)] hover:underline"
               >
@@ -950,7 +935,8 @@ export function MediaGallery() {
                     </div>
                   )}
                 </div>
-                <button type="button"
+                <button
+                  type="button"
                   onClick={(e) => {
                     e.stopPropagation();
                     toggleSelect(item.id);
@@ -973,7 +959,8 @@ export function MediaGallery() {
                     </svg>
                   )}
                 </button>
-                <button type="button"
+                <button
+                  type="button"
                   onClick={(e) => {
                     e.stopPropagation();
                     openMetadataPanel(item);
@@ -995,7 +982,8 @@ export function MediaGallery() {
                     />
                   </svg>
                 </button>
-                <button type="button"
+                <button
+                  type="button"
                   onClick={(e) => {
                     e.stopPropagation();
                     handleDelete(item.id);
@@ -1031,7 +1019,8 @@ export function MediaGallery() {
         ) : (
           <div className="space-y-2">
             <div className="flex items-center gap-4 px-4 py-2 text-xs font-bold text-[var(--kyro-text-muted)] uppercase">
-              <button type="button"
+              <button
+                type="button"
                 onClick={selectAll}
                 className="w-6 h-6 rounded border border-[var(--kyro-border)] flex items-center justify-center hover:bg-[var(--kyro-surface-accent)]"
               >
@@ -1067,7 +1056,8 @@ export function MediaGallery() {
                 }}
                 className={`flex items-center gap-4 px-4 py-3 rounded-lg transition-colors cursor-pointer ${selectedItems.has(item.id) ? "bg-[var(--kyro-surface-accent)]" : "hover:bg-[var(--kyro-surface-accent)]"}`}
               >
-                <button type="button"
+                <button
+                  type="button"
                   onClick={() => toggleSelect(item.id)}
                   className={`w-6 h-6 rounded border flex items-center justify-center transition-colors ${selectedItems.has(item.id) ? "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)]" : "border-[var(--kyro-border)] hover:border-[var(--kyro-border-active)]"}`}
                 >
@@ -1132,7 +1122,8 @@ export function MediaGallery() {
                 <span className="w-32 text-sm text-[var(--kyro-text-muted)]">
                   {formatDate(item.createdAt)}
                 </span>
-                <button type="button"
+                <button
+                  type="button"
                   onClick={(e) => {
                     e.stopPropagation();
                     openMetadataPanel(item);
@@ -1154,7 +1145,8 @@ export function MediaGallery() {
                     />
                   </svg>
                 </button>
-                <button type="button"
+                <button
+                  type="button"
                   onClick={() => handleDelete(item.id)}
                   className="w-10 h-10 rounded-lg hover:bg-[var(--kyro-danger-bg)] text-[var(--kyro-text-muted)] hover:text-[var(--kyro-danger)] flex items-center justify-center transition-colors"
                 >
@@ -1194,7 +1186,8 @@ export function MediaGallery() {
             className="fixed inset-0 z-[9999] bg-black/95 flex items-center justify-center p-8 animate-in fade-in duration-200"
             onClick={() => setLightboxItem(null)}
           >
-            <button type="button"
+            <button
+              type="button"
               onClick={() => setLightboxItem(null)}
               className="absolute top-4 right-4 w-12 h-12 rounded-full bg-white/10 text-white flex items-center justify-center hover:bg-white/20 transition-colors"
             >
@@ -1235,7 +1228,8 @@ export function MediaGallery() {
               >
                 Open in new tab
               </a>
-              <button type="button"
+              <button
+                type="button"
                 onClick={(e) => {
                   e.stopPropagation();
                   navigator.clipboard.writeText(
@@ -1264,7 +1258,8 @@ export function MediaGallery() {
               <h2 className="text-lg font-bold text-[var(--kyro-text-primary)]">
                 Media Details
               </h2>
-              <button type="button"
+              <button
+                type="button"
                 onClick={() => setPanelItem(null)}
                 className="p-2 rounded-lg hover:bg-[var(--kyro-surface-accent)]"
               >
@@ -1355,7 +1350,8 @@ export function MediaGallery() {
                     value={getAbsoluteUrl(panelItem.url)}
                     className="flex-1 px-3 py-2 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-lg text-xs text-[var(--kyro-text-muted)] focus:outline-none truncate"
                   />
-                  <button type="button"
+                  <button
+                    type="button"
                     onClick={() => {
                       navigator.clipboard.writeText(
                         getAbsoluteUrl(panelItem.url),
@@ -1389,7 +1385,8 @@ export function MediaGallery() {
                 </p>
               </div>
               {panelItem.type === "image" && (
-                <button type="button"
+                <button
+                  type="button"
                   onClick={() => setShowCrop(true)}
                   className="flex items-center gap-2 px-3 py-1.5 bg-[var(--kyro-surface-accent)] text-[var(--kyro-primary)] rounded-lg font-bold text-xs hover:opacity-80 transition-colors mt-2 w-full"
                 >
@@ -1409,13 +1406,15 @@ export function MediaGallery() {
               >
                 <Download className="w-5 h-5 text-[var(--kyro-text-secondary)]" />
               </a>
-              <button type="button"
+              <button
+                type="button"
                 onClick={savePanelMetadata}
                 className="flex-1 py-2 px-4 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-lg font-bold text-sm hover:opacity-90"
               >
                 Save
               </button>
-              <button type="button"
+              <button
+                type="button"
                 onClick={() => setPanelItem(null)}
                 className="py-2 px-4 border border-[var(--kyro-border)] rounded-lg font-bold text-sm text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
               >
@@ -1433,13 +1432,15 @@ export function MediaGallery() {
             <div className="flex w-full justify-between items-center mb-4 text-white">
               <h3 className="text-xl font-bold">Crop Image</h3>
               <div className="flex gap-3">
-                <button type="button"
+                <button
+                  type="button"
                   onClick={() => setShowCrop(false)}
                   className="px-4 py-2 border border-white/20 text-white/80 hover:bg-white/10 rounded-lg font-bold text-sm transition-colors"
                 >
                   Cancel
                 </button>
-                <button type="button"
+                <button
+                  type="button"
                   disabled={uploading}
                   onClick={onCropComplete}
                   className="px-4 py-2 bg-[var(--kyro-sidebar-active)] hover:opacity-90 text-[var(--kyro-sidebar-text-active)] rounded-lg font-bold text-sm transition-colors"
@@ -1513,19 +1514,16 @@ export function MediaGallery() {
                   >
                     Configure Storage
                   </a>
-                  <button type="button"
+                  <button
+                    type="button"
                     onClick={() => {
                       // Set default storage config programmatically
-                      fetch("/api/globals/storage-settings", {
-                        method: "PATCH",
-                        headers: { "Content-Type": "application/json" },
-                        body: JSON.stringify({
-                          provider: "local",
-                          local: {
-                            uploadDir: "./public/uploads",
-                            baseUrl: "/uploads",
-                          },
-                        }),
+                      apiPatch("/api/globals/storage-settings", {
+                        provider: "local",
+                        local: {
+                          uploadDir: "./public/uploads",
+                          baseUrl: "/uploads",
+                        },
                       }).then(() => {
                         setShowStorageConfigModal(false);
                         setStorageConfigured(true);

package/src/components/UserManagement.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import { apiGet, apiPatch } from "@kyro-cms/utils/lib/api";
 import {
   Users,
   UserPlus,
@@ -34,8 +35,7 @@ export function UserManagement() {
   const loadUsers = async () => {
     try {
       setLoading(true);
-      const response = await fetch("/api/auth/users");
-      const result = await response.json();
+      const result = await apiGet("/api/auth/users");
       setUsers(result.docs || []);
     } catch (error) {
       console.error("Failed to load users:", error);
@@ -46,16 +46,10 @@ export function UserManagement() {
 
   const handleToggleLock = async (user: User) => {
     try {
-      const response = await fetch(`/api/auth/${user.id}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ locked: !user.locked }),
-      });
-      if (response.ok) {
-        setUsers((prev) =>
-          prev.map((u) => (u.id === user.id ? { ...u, locked: !u.locked } : u)),
-        );
-      }
+      await apiPatch(`/api/auth/${user.id}`, { locked: !user.locked });
+      setUsers((prev) =>
+        prev.map((u) => (u.id === user.id ? { ...u, locked: !u.locked } : u)),
+      );
     } catch (error) {
       console.error("Failed to toggle user lock:", error);
     }
@@ -80,7 +74,10 @@ export function UserManagement() {
           </p>
         </div>
         <div className="flex items-center gap-3">
-          <button type="button" className="flex items-center gap-2 px-6 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-2xl font-black text-sm shadow-xl active:scale-95 transition-all">
+          <button
+            type="button"
+            className="flex items-center gap-2 px-6 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-2xl font-black text-sm shadow-xl active:scale-95 transition-all"
+          >
             <UserPlus className="w-4 h-4" />
             Invite Member
           </button>
@@ -100,13 +97,22 @@ export function UserManagement() {
           />
         </div>
         <div className="flex items-center gap-3 bg-[var(--kyro-bg-secondary)] p-1 rounded-2xl border border-[var(--kyro-border)]">
-          <button type="button" className="px-4 py-2 text-[10px] font-black uppercase tracking-widest bg-[var(--kyro-surface)] shadow-sm rounded-xl border border-[var(--kyro-border)]">
+          <button
+            type="button"
+            className="px-4 py-2 text-[10px] font-black uppercase tracking-widest bg-[var(--kyro-surface)] shadow-sm rounded-xl border border-[var(--kyro-border)]"
+          >
             All Users
           </button>
-          <button type="button" className="px-4 py-2 text-[10px] font-black uppercase tracking-widest opacity-40 hover:opacity-100 transition-all">
+          <button
+            type="button"
+            className="px-4 py-2 text-[10px] font-black uppercase tracking-widest opacity-40 hover:opacity-100 transition-all"
+          >
             Admins
           </button>
-          <button type="button" className="px-4 py-2 text-[10px] font-black uppercase tracking-widest opacity-40 hover:opacity-100 transition-all">
+          <button
+            type="button"
+            className="px-4 py-2 text-[10px] font-black uppercase tracking-widest opacity-40 hover:opacity-100 transition-all"
+          >
             Restricted
           </button>
         </div>
@@ -177,7 +183,8 @@ export function UserManagement() {
               </div>
 
               <div className="flex items-center gap-3">
-                <button type="button"
+                <button
+                  type="button"
                   onClick={() => handleToggleLock(user)}
                   className={`flex-1 py-2.5 rounded-xl font-black text-[10px] uppercase tracking-widest transition-all flex items-center justify-center gap-2 ${user.locked ? "bg-green-500/10 text-green-500 hover:bg-green-500/20" : "bg-red-500/10 text-red-500 hover:bg-red-500/20"}`}
                 >
@@ -188,7 +195,10 @@ export function UserManagement() {
                   )}
                   {user.locked ? "Unlock Account" : "Lock Account"}
                 </button>
-                <button type="button" className="p-2.5 bg-[var(--kyro-bg-secondary)] rounded-xl border border-[var(--kyro-border)] hover:bg-[var(--kyro-surface)] transition-all">
+                <button
+                  type="button"
+                  className="p-2.5 bg-[var(--kyro-bg-secondary)] rounded-xl border border-[var(--kyro-border)] hover:bg-[var(--kyro-surface)] transition-all"
+                >
                   <MoreVertical className="w-4 h-4 opacity-40" />
                 </button>
               </div>