@kyro-cms/admin 0.9.4 → 0.9.6

package/src/components/ListView.tsx

@@ -359,8 +359,8 @@ export function ListView({
       {/* Toolbar */}
       <div className="surface-tile p-4 flex flex-col lg:flex-row gap-4 items-start lg:items-center">
         {/* Search */}
-        <div className="relative flex-1 max-w-md">
-          <Search className="w-4 h-4" />
+        <div className="relative flex-1 w-full lg:max-w-md">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-muted)]" />
           <input
             type="text"
             placeholder="Search..."
@@ -582,7 +582,7 @@ export function ListView({
           <div className="overflow-x-auto">
             <table className="w-full text-left">
               <thead>
-                <tr className="text-[var(--kyro-text-secondary)] font-bold text-[10px]  tracking-[0.3em] border-b border-[var(--kyro-border)]">
+                <tr className="text-[var(--kyro-text-secondary)] font-bold text-[10px]  tracking-[0.3em] border-b border-[var(--kyro-border)] whitespace-nowrap">
                   <th className="px-4 py-4 w-10">
                     <input
                       type="checkbox"

package/src/components/LoginPage.tsx

@@ -1,13 +1,8 @@
 import { useState, useEffect } from "react";
 import { apiGet, apiPost } from "../lib/api";
 import { ThemeProvider, type ThemeMode } from "./ThemeProvider";
-import { Toast, ToastProvider } from "./ui/Toast";
-
-interface LocalToast {
-  id: string;
-  type: "success" | "error" | "info" | "warning";
-  message: string;
-}
+import { Toaster } from "./ui/Toaster";
+import { useToastStore } from "../lib/stores";
 
 interface LoginPageProps {
   onAuth: (token: string, user: Record<string, unknown>) => void;
@@ -22,8 +17,8 @@ export function LoginPage({ onAuth, theme = "light" }: LoginPageProps) {
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
   const [loading, setLoading] = useState(false);
-  const [toasts, setToasts] = useState<LocalToast[]>([]);
   const [isFirstUser, setIsFirstUser] = useState(false);
+  const addToast = useToastStore((state) => state.addToast);
 
   useEffect(() => {
     checkIfFirstUser();
@@ -38,14 +33,6 @@ export function LoginPage({ onAuth, theme = "light" }: LoginPageProps) {
     }
   };
 
-  const addToast = (type: LocalToast["type"], message: string) => {
-    const id = Math.random().toString(36).substring(7);
-    setToasts((prev) => [...prev, { id, type, message }]);
-    setTimeout(() => {
-      setToasts((prev) => prev.filter((t) => t.id !== id));
-    }, 5000);
-  };
-
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
@@ -79,7 +66,6 @@ export function LoginPage({ onAuth, theme = "light" }: LoginPageProps) {
 
   return (
     <ThemeProvider defaultMode={theme}>
-      <ToastProvider>
         <div className="kyro-login-page">
           <div className="kyro-login-container">
             <div className="kyro-login-header">
@@ -190,19 +176,8 @@ export function LoginPage({ onAuth, theme = "light" }: LoginPageProps) {
               </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))
-              }
-            />
-          ))}
+          <Toaster />
         </div>
-      </ToastProvider>
-    </ThemeProvider>
+      </ThemeProvider>
   );
 }

package/src/components/MediaGallery.tsx

@@ -1,4 +1,4 @@
-import { Search, Check, Server } from "./ui/icons";
+import { Search, Check, Server, Filter } from "./ui/icons";
 import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { createPortal } from "react-dom";
 import { Spinner } from "./ui/Spinner";
@@ -146,6 +146,7 @@ export function MediaGallery({
     {},
   );
   const [showNewFolderModal, setShowNewFolderModal] = useState(false);
+  const [showMobileFilters, setShowMobileFilters] = useState(false);
   const [storageConfigured, setStorageConfigured] = useState<boolean | null>(null);
   const [storageChecked, setStorageChecked] = useState(false);
   const [showStorageConfigModal, setShowStorageConfigModal] = useState(false);
@@ -318,6 +319,7 @@ export function MediaGallery({
       await apiPost("/api/media/folders", { name });
       loadFolders();
       setShowNewFolderModal(false);
+      toast.success(`Folder "${name}" created`);
     } catch (error) {
       console.error("Failed to create folder:", error);
       toast.error("Failed to create folder");
@@ -336,6 +338,7 @@ export function MediaGallery({
           if (currentFolder === folder) setCurrentFolder("");
           loadFolders();
           loadMedia();
+          toast.success(`Folder "${folder}" deleted`);
         } catch (error) {
           console.error("Failed to delete folder:", error);
           toast.error("Failed to delete folder");
@@ -351,8 +354,10 @@ export function MediaGallery({
       if (panelItem?.id === id) {
         setPanelItem(result.doc);
       }
+      toast.success("Metadata updated");
     } catch (error) {
       console.error("Failed to update metadata:", error);
+      toast.error("Failed to update metadata");
     }
   };
 
@@ -410,6 +415,7 @@ export function MediaGallery({
           await apiUpload("/api/media", formData);
           loadMedia();
           setShowCrop(false);
+          toast.success("Cropped image saved");
         }
       }
     } catch (err) {
@@ -440,7 +446,7 @@ export function MediaGallery({
       })}
     >
       {/* Top Bar */}
-      <div className={`flex flex-col lg:flex-row lg:items-center justify-between gap-6 border-b border-[var(--kyro-border)] backdrop-blur-md sticky top-0 z-40 ${pickerMode ? "p-2" : "p-6 rounded-xl surface-tile"}`}>
+      <div className={`flex flex-col lg:flex-row lg:items-center justify-between gap-6 border-b border-[var(--kyro-border)] backdrop-blur-md sticky top-0 ${pickerMode ? "p-2" : "p-6 rounded-xl surface-tile"}`}>
         {!pickerMode && (
           <div className="flex items-center gap-4">
             <div>
@@ -458,7 +464,7 @@ export function MediaGallery({
 
         <div className={`flex items-center gap-3 flex-wrap lg:flex-nowrap ${pickerMode ? "w-full" : ""}`}>
           <div className="relative group flex-1 min-w-[200px]">
-            <Search className="w-4 h-4" />
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-muted)]" />
             <input
               type="text"
               placeholder="Search assets..."
@@ -470,18 +476,27 @@ export function MediaGallery({
 
           {!pickerMode && (
             <>
-              <div className="flex bg-[var(--kyro-surface-accent)] p-1 rounded-xl border border-[var(--kyro-border)]">
-                <button
-                  onClick={() => setView("grid")}
-                  className={`p-2 rounded-lg transition-all ${view === "grid" ? "bg-[var(--kyro-surface)] shadow-sm text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`}
-                >
-                  <Grid className="w-4 h-4" />
-                </button>
+              <div className="flex items-center gap-2">
+                <div className="flex bg-[var(--kyro-surface-accent)] p-1 rounded-xl border border-[var(--kyro-border)]">
+                  <button
+                    onClick={() => setView("grid")}
+                    className={`p-2 rounded-lg transition-all ${view === "grid" ? "bg-[var(--kyro-surface)] shadow-sm text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`}
+                  >
+                    <Grid className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => setView("list")}
+                    className={`p-2 rounded-lg transition-all ${view === "list" ? "bg-[var(--kyro-surface)] shadow-sm text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`}
+                  >
+                    <FileIcon className="w-4 h-4" />
+                  </button>
+                </div>
+
                 <button
-                  onClick={() => setView("list")}
-                  className={`p-2 rounded-lg transition-all ${view === "list" ? "bg-[var(--kyro-surface)] shadow-sm text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`}
+                  onClick={() => setShowMobileFilters(true)}
+                  className="md:hidden p-2 rounded-xl bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors"
                 >
-                  <FileIcon className="w-4 h-4" />
+                  <Filter className="w-4 h-4" />
                 </button>
               </div>
 
@@ -584,9 +599,9 @@ export function MediaGallery({
 
         {/* Main Content Area */}
         <div className="flex-1 flex flex-col min-h-0 bg-[var(--kyro-bg)]">
-          <div className={`flex-1 overflow-y-auto custom-scrollbar ${pickerMode ? "px-2 py-4" : "py-8 px-4"}`}>
+          <div className={`flex-1 overflow-y-auto custom-scrollbar ${pickerMode ? "px-2 py-4" : "py-4 px-2 md:py-8 md:px-4"}`}>
             {loading ? (
-              <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+              <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
                 <Shimmer variant="media-card" count={12} />
               </div>
             ) : items.length === 0 ? (
@@ -861,6 +876,96 @@ export function MediaGallery({
         </div>
       )}
 
+      {/* Mobile Filters Bottom Sheet */}
+      {showMobileFilters && !pickerMode && (
+        <div className="fixed inset-0 z-[70] md:hidden">
+          <div
+            className="fixed inset-0 bg-black/50 backdrop-blur-sm"
+            onClick={() => setShowMobileFilters(false)}
+          />
+          <div className="fixed bottom-0 left-0 right-0 bg-[var(--kyro-surface)] rounded-t-3xl shadow-2xl max-h-[70vh] overflow-y-auto animate-in slide-in-from-bottom-12 duration-300">
+            <div className="sticky top-0 bg-[var(--kyro-surface)] z-10 flex items-center justify-between p-6 pb-4 border-b border-[var(--kyro-border)]">
+              <h3 className="text-sm font-bold tracking-tight text-[var(--kyro-text-primary)]">
+                Filters
+              </h3>
+              <button
+                onClick={() => setShowMobileFilters(false)}
+                className="p-2 rounded-xl hover:bg-[var(--kyro-surface-accent)] transition-colors text-[var(--kyro-text-muted)]"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+
+            <div className="p-6 space-y-8">
+              {/* Quick Filters */}
+              <div>
+                <span className="text-[10px] font-bold tracking-[0.2em] text-[var(--kyro-text-secondary)] opacity-40 block mb-4">
+                  Quick Filters
+                </span>
+                <div className="flex flex-wrap gap-2">
+                  {(["all", "image", "video", "audio", "document", "archive"] as const).map((t) => (
+                    <button
+                      key={t}
+                      onClick={() => { setFilter(t); setShowMobileFilters(false); }}
+                      className={`px-4 py-2 rounded-xl text-[11px] font-bold capitalize transition-all border ${filter === t ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] border-transparent" : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] border-[var(--kyro-border)] hover:border-[var(--kyro-text-muted)]"}`}
+                    >
+                      {t}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Folders */}
+              <div>
+                <div className="flex items-center justify-between mb-4">
+                  <span className="text-[10px] font-bold tracking-[0.2em] text-[var(--kyro-text-secondary)] opacity-40">
+                    Folders
+                  </span>
+                  <button
+                    onClick={() => { setShowNewFolderModal(true); setShowMobileFilters(false); }}
+                    className="p-1.5 hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-colors text-[var(--kyro-text-primary)]"
+                  >
+                    <FolderPlus className="w-4 h-4" />
+                  </button>
+                </div>
+                <nav className="space-y-1">
+                  <button
+                    onClick={() => { setCurrentFolder(""); setShowMobileFilters(false); }}
+                    className={`w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-xs font-bold transition-all ${currentFolder === "" ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] shadow-md" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)]"}`}
+                  >
+                    <FolderInput className="w-4 h-4 opacity-70" />
+                    All Assets
+                  </button>
+                  {folders.map((folder) => (
+                    <div key={folder} className="group relative">
+                      <button
+                        onClick={() => { setCurrentFolder(folder); setShowMobileFilters(false); }}
+                        className={`w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-xs font-bold transition-all ${currentFolder === folder ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] shadow-md" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)]"}`}
+                      >
+                        <div className="w-4 h-4 flex items-center justify-center opacity-70">
+                          <Folder fill={currentFolder === folder ? "currentColor" : "none"} />
+                        </div>
+                        {folder}
+                      </button>
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleDeleteFolder(folder);
+                          setShowMobileFilters(false);
+                        }}
+                        className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-red-500 opacity-0 group-hover:opacity-100 transition-all hover:bg-red-50 rounded-lg"
+                      >
+                        <Trash2 className="w-3.5 h-3.5" />
+                      </button>
+                    </div>
+                  ))}
+                </nav>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Asset Panel */}
       <SlidePanel
         open={!!panelItem}
@@ -1178,6 +1283,8 @@ export function MediaGallery({
                     setShowStorageConfigModal(false);
                     setStorageConfigured(true);
                     window.location.reload();
+                  }).catch(() => {
+                    toast.error("Failed to configure storage");
                   });
                 }}
                 className="flex-1 px-4 py-3 border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] rounded-xl font-bold hover:bg-[var(--kyro-surface-accent)] transition-colors"