@kyro-cms/admin 0.1.5 → 0.1.7

package/src/components/ListView.tsx

@@ -1,6 +1,8 @@
 import { useState, useEffect } from "react";
 import type { CollectionConfig, KyroConfig } from "@kyro-cms/core";
 import { Spinner } from "./ui/Spinner";
+import { ConfirmModal } from "./ui/Modal";
+import { Search, Plus, Settings } from "lucide-react";
 
 interface ListViewProps {
   config: KyroConfig;
@@ -20,6 +22,9 @@ export function ListView({
   const [page, setPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
   const [limit] = useState(25);
+  const [deleteId, setDeleteId] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
 
   const label = collection.label || collection.slug;
 
@@ -44,18 +49,29 @@ export function ListView({
     }
   };
 
+  const filteredDocs = docs.filter((d) =>
+    Object.values(d).some((v) =>
+      String(v).toLowerCase().includes(searchQuery.toLowerCase()),
+    ),
+  );
+
   const handleDelete = async (id: string) => {
-    if (!confirm("Delete this document?")) return;
+    setDeleteId(id);
+  };
+
+  const confirmDelete = async () => {
+    if (!deleteId) return;
     try {
-      const response = await fetch(`/api/${collection.slug}/${id}`, {
+      const response = await fetch(`/api/${collection.slug}/${deleteId}`, {
         method: "DELETE",
       });
       if (response.ok) {
-        setDocs((prev) => prev.filter((d) => d.id !== id));
+        setDocs((prev) => prev.filter((d) => d.id !== deleteId));
       }
     } catch (error) {
       console.error("Failed to delete:", error);
     }
+    setDeleteId(null);
   };
 
   const columns =
@@ -63,25 +79,36 @@ export function ListView({
     Object.keys(collection.fields || {}).slice(0, 4);
 
   return (
-    <div className="kyro-list">
-      <div className="kyro-list-header">
-        <h2 className="kyro-list-title">{label}</h2>
-        <button
-          className="kyro-btn kyro-btn-primary kyro-btn-md"
-          onClick={onCreate}
-        >
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
+    <>
+      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6 mb-8 pt-4">
+        <div>
+          <h2 className="text-3xl font-black tracking-tighter text-[var(--kyro-text-primary)]">
+            {label}
+          </h2>
+          <p className="text-[11px] font-bold uppercase tracking-widest opacity-40 mt-1">
+            Manage and explore your {label.toLowerCase()} entries
+          </p>
+        </div>
+
+        <div className="flex items-center gap-4 flex-1 max-w-2xl lg:justify-end">
+          <div className="relative flex-1 max-w-md group">
+            <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-secondary)] opacity-40 group-focus-within:opacity-100 transition-opacity" />
+            <input
+              type="text"
+              placeholder={`Search ${label}...`}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full pl-11 pr-4 py-2.5 bg-[var(--kyro-bg-secondary)] border border-[var(--kyro-border)] rounded-xl focus:outline-none focus:ring-2 focus:ring-[var(--kyro-primary)] focus:border-[var(--kyro-primary)] transition-all text-sm font-medium"
+            />
+          </div>
+          <button type="button"
+            className="flex items-center gap-2 px-6 py-2.5 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-black text-xs shadow-lg active:scale-95 transition-all"
+            onClick={onCreate}
           >
-            <path d="M12 5v14M5 12h14" />
-          </svg>
-          Create {label}
-        </button>
+            <Plus className="w-4 h-4" />
+            Create New
+          </button>
+        </div>
       </div>
 
       {loading ? (
@@ -107,7 +134,7 @@ export function ListView({
             <p className="kyro-empty-text">
               Get started by creating your first one.
             </p>
-            <button
+            <button type="button"
               className="kyro-btn kyro-btn-primary kyro-btn-md"
               style={{ marginTop: 16 }}
               onClick={onCreate}
@@ -117,43 +144,99 @@ export function ListView({
           </div>
         </div>
       ) : (
-        <div className="kyro-card">
-          <table className="kyro-table">
+        <div className="surface-tile overflow-hidden animate-in fade-in slide-in-from-bottom-4 duration-500">
+          <table className="w-full border-collapse">
             <thead>
-              <tr>
-                {columns.map((col) => (
-                  <th key={col}>{col}</th>
-                ))}
-                <th style={{ width: 100 }}>Actions</th>
+              <tr className="bg-[var(--kyro-bg-secondary)] text-[10px] font-black uppercase tracking-[0.2em] opacity-40 text-left">
+                <th className="px-6 py-4 w-12">
+                  <input
+                    type="checkbox"
+                    className="accent-[var(--kyro-primary)]"
+                    onChange={(e) => {
+                      if (e.target.checked)
+                        setSelectedIds(new Set(docs.map((d) => d.id)));
+                      else setSelectedIds(new Set());
+                    }}
+                  />
+                </th>
+                <th className="px-6 py-4">Document</th>
+                {columns
+                  .filter((c) => c !== "title" && c !== "name")
+                  .map((col) => (
+                    <th key={col} className="px-6 py-4">
+                      {col}
+                    </th>
+                  ))}
+                <th key="status" className="px-6 py-4">
+                  Status
+                </th>
+                <th className="px-6 py-4 text-right">Actions</th>
               </tr>
             </thead>
-            <tbody>
-              {docs.map((doc) => (
-                <tr key={doc.id}>
-                  {columns.map((col) => (
-                    <td key={col}>{formatValue(doc[col])}</td>
-                  ))}
-                  <td>
-                    <div className="kyro-table-actions">
-                      <button
-                        className="kyro-table-action"
+            <tbody className="divide-y divide-[var(--kyro-border)]">
+              {filteredDocs.map((doc) => (
+                <tr
+                  key={doc.id}
+                  className={`group hover:bg-[var(--kyro-primary)] transition-all cursor-pointer ${selectedIds.has(doc.id) ? "bg-[var(--kyro-primary)]" : ""}`}
+                  onClick={() => onEdit(doc.id)}
+                >
+                  <td
+                    className="px-6 py-5"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={selectedIds.has(doc.id)}
+                      onChange={() => {
+                        const next = new Set(selectedIds);
+                        if (next.has(doc.id)) next.delete(doc.id);
+                        else next.add(doc.id);
+                        setSelectedIds(next);
+                      }}
+                      className="accent-[var(--kyro-primary)]"
+                    />
+                  </td>
+                  <td className="px-6 py-5">
+                    <div className="flex flex-col">
+                      <span className="font-black text-sm group-hover:text-[var(--kyro-primary)] transition-colors">
+                        {doc.title || doc.name || doc.id}
+                      </span>
+                      <span className="text-[10px] font-bold opacity-30 uppercase tracking-widest mt-1">
+                        ID: {doc.id.slice(-8)}
+                      </span>
+                    </div>
+                  </td>
+                  {columns
+                    .filter((c) => c !== "title" && c !== "name")
+                    .map((col) => (
+                      <td
+                        key={col}
+                        className="px-6 py-5 text-sm font-medium text-[var(--kyro-text-secondary)]"
+                      >
+                        {formatValue(doc[col])}
+                      </td>
+                    ))}
+                  <td className="px-6 py-5">
+                    <span
+                      className={`inline-flex items-center px-3 py-1 rounded-full text-[9px] font-black uppercase tracking-widest ${doc.status === "published" ? "bg-green-500/10 text-green-500" : "bg-amber-500/10 text-amber-500"}`}
+                    >
+                      {doc.status || "draft"}
+                    </span>
+                  </td>
+                  <td
+                    className="px-6 py-5 text-right"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <div className="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                      <button type="button"
+                        className="p-2 text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-bg-secondary)] rounded-lg transition-all"
                         onClick={() => onEdit(doc.id)}
                         title="Edit"
                       >
-                        <svg
-                          width="16"
-                          height="16"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="2"
-                        >
-                          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-                          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-                        </svg>
+                        <Settings className="w-4 h-4" />
                       </button>
-                      <button
-                        className="kyro-table-action danger"
+                      <button type="button"
+                        className="p-2 text-red-500 hover:bg-red-500/10 rounded-lg transition-all"
                         onClick={() => handleDelete(doc.id)}
                         title="Delete"
                       >
@@ -176,7 +259,62 @@ export function ListView({
           </table>
         </div>
       )}
-    </div>
+
+      {selectedIds.size > 0 && (
+        <div className="fixed bottom-12 left-1/2 -translate-x-1/2 z-[60] bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-3xl shadow-2xl p-4 flex items-center gap-8 animate-in slide-in-from-bottom-12 duration-500 ring-1 ring-white/10">
+          <div className="flex items-center gap-4 border-r border-[var(--kyro-border)] pr-8 ml-2">
+            <div className="w-10 h-10 rounded-2xl bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] flex items-center justify-center font-black">
+              {selectedIds.size}
+            </div>
+            <div>
+              <p className="text-xs font-black uppercase tracking-widest">
+                Docs Selected
+              </p>
+              <button type="button"
+                onClick={() => setSelectedIds(new Set())}
+                className="text-[10px] font-bold text-[var(--kyro-primary)] hover:underline"
+              >
+                Clear Selection
+              </button>
+            </div>
+          </div>
+          <div className="flex items-center gap-3 pr-2">
+            <button type="button" className="flex items-center gap-2 px-6 py-2.5 bg-green-500 text-white rounded-xl font-black text-[10px] uppercase tracking-widest shadow-lg hover:shadow-green-500/20 active:scale-95 transition-all">
+              Publish
+            </button>
+            <button type="button"
+              onClick={async () => {
+                if (
+                  window.confirm(
+                    `Are you sure you want to delete ${selectedIds.size} documents?`,
+                  )
+                ) {
+                  for (const id of Array.from(selectedIds)) {
+                    await fetch(`/api/${collection.slug}/${id}`, {
+                      method: "DELETE",
+                    });
+                  }
+                  loadDocs();
+                  setSelectedIds(new Set());
+                }
+              }}
+              className="flex items-center gap-2 px-6 py-2.5 bg-red-500 text-white rounded-xl font-black text-[10px] uppercase tracking-widest shadow-lg hover:shadow-red-500/20 active:scale-95 transition-all"
+            >
+              Delete
+            </button>
+          </div>
+        </div>
+      )}
+      <ConfirmModal
+        open={!!deleteId}
+        onClose={() => setDeleteId(null)}
+        onConfirm={confirmDelete}
+        title="Delete Document"
+        message="Are you sure you want to delete this document? This cannot be undone."
+        confirmLabel="Delete"
+        variant="danger"
+      />
+    </>
   );
 }