modern-cms 1.0.0

package/template/apps/web/app/admin/(protected)/layout.tsx

@@ -0,0 +1,5 @@
+import { AdminShell } from "@/components/admin/AdminShell";
+
+export default function ProtectedAdminLayout({ children }: { children: React.ReactNode }) {
+  return <AdminShell>{children}</AdminShell>;
+}

package/template/apps/web/app/admin/(protected)/media/page.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Upload, Trash2, Copy, Search, Check } from "lucide-react";
+import type { MediaAsset } from "@pgcms/shared";
+import { api } from "@/lib/api";
+
+type AssetWithMeta = MediaAsset & { filename?: string; alt?: string | null };
+
+export default function MediaLibraryPage() {
+  const [assets, setAssets] = useState<AssetWithMeta[] | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const [search, setSearch] = useState("");
+  const [altDrafts, setAltDrafts] = useState<Record<string, string>>({});
+  const [altSavedId, setAltSavedId] = useState<string | null>(null);
+  const fileInput = useRef<HTMLInputElement>(null);
+
+  function refresh(query = search) {
+    api
+      .get<AssetWithMeta[]>(`/api/media${query.trim() ? `?search=${encodeURIComponent(query.trim())}` : ""}`)
+      .then(setAssets);
+  }
+
+  // Debounced server-side search across filename, alt text, and storage key.
+  useEffect(() => {
+    const t = setTimeout(() => refresh(search), 250);
+    return () => clearTimeout(t);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [search]);
+
+  async function handleUpload(files: FileList | null) {
+    if (!files) return;
+    setUploading(true);
+    try {
+      for (const file of Array.from(files)) {
+        const formData = new FormData();
+        formData.append("file", file);
+        await api.post<MediaAsset>("/api/media", formData);
+      }
+      refresh();
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  async function remove(id: string) {
+    if (!confirm("Delete this media asset?")) return;
+    await api.delete(`/api/media/${id}`);
+    refresh();
+  }
+
+  async function saveAlt(asset: AssetWithMeta) {
+    const draft = altDrafts[asset.id];
+    if (draft === undefined || draft === (asset.alt ?? "")) return;
+    await api.put(`/api/media/${asset.id}`, { alt: draft });
+    setAltSavedId(asset.id);
+    setTimeout(() => setAltSavedId((cur) => (cur === asset.id ? null : cur)), 1500);
+    refresh();
+  }
+
+  function copyUrl(url: string) {
+    navigator.clipboard.writeText(url);
+  }
+
+  return (
+    <div className="p-8 max-w-5xl">
+      <div className="flex items-center justify-between mb-6 gap-4">
+        <h1 className="text-2xl font-semibold shrink-0">Media Library</h1>
+        <div className="relative flex-1 max-w-sm">
+          <Search size={15} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400" />
+          <input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search by filename or alt text…"
+            className="w-full border rounded-md pl-8 pr-3 py-2 text-sm"
+          />
+        </div>
+        <input
+          ref={fileInput}
+          type="file"
+          multiple
+          accept="image/*,video/*"
+          className="hidden"
+          onChange={(e) => handleUpload(e.target.files)}
+        />
+        <button
+          onClick={() => fileInput.current?.click()}
+          disabled={uploading}
+          className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 disabled:opacity-50 shrink-0"
+        >
+          <Upload size={16} /> {uploading ? "Uploading..." : "Upload"}
+        </button>
+      </div>
+
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+        {assets?.length === 0 && (
+          <div className="col-span-full text-sm text-slate-400 py-10 text-center">
+            {search ? "Nothing matches that search." : "No media uploaded yet."}
+          </div>
+        )}
+        {assets?.map((asset) => (
+          <div key={asset.id} className="border rounded-lg overflow-hidden bg-white flex flex-col">
+            <div className="aspect-square bg-slate-50 group relative">
+              {asset.mimeType.startsWith("image/") ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img src={asset.url} alt={asset.alt ?? ""} className="w-full h-full object-cover" />
+              ) : (
+                <video src={asset.url} className="w-full h-full object-cover" muted />
+              )}
+              <div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors flex items-center justify-center gap-2 opacity-0 group-hover:opacity-100">
+                <button onClick={() => copyUrl(asset.url)} className="bg-white rounded-full p-2" title="Copy URL">
+                  <Copy size={14} />
+                </button>
+                <button onClick={() => remove(asset.id)} className="bg-white rounded-full p-2 text-red-600" title="Delete">
+                  <Trash2 size={14} />
+                </button>
+              </div>
+            </div>
+            <div className="p-2 space-y-1">
+              {asset.filename && <div className="text-[11px] text-slate-400 truncate" title={asset.filename}>{asset.filename}</div>}
+              <div className="flex items-center gap-1">
+                <input
+                  value={altDrafts[asset.id] ?? asset.alt ?? ""}
+                  onChange={(e) => setAltDrafts((prev) => ({ ...prev, [asset.id]: e.target.value }))}
+                  onBlur={() => saveAlt(asset)}
+                  onKeyDown={(e) => e.key === "Enter" && (e.target as HTMLInputElement).blur()}
+                  placeholder="Alt text…"
+                  className="w-full border rounded px-1.5 py-1 text-xs"
+                />
+                {altSavedId === asset.id && <Check size={13} className="text-green-600 shrink-0" />}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/template/apps/web/app/admin/(protected)/page.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Plus, Trash2, ExternalLink, Pencil, Copy, Download, LayoutTemplate } from "lucide-react";
+import type { Page, PageTemplate } from "@pgcms/shared";
+import { api, ApiError } from "@/lib/api";
+
+export default function PagesDashboard() {
+  const router = useRouter();
+  const [pages, setPages] = useState<Page[] | null>(null);
+  const [templates, setTemplates] = useState<PageTemplate[]>([]);
+  const [creating, setCreating] = useState(false);
+  const [title, setTitle] = useState("");
+  const [slug, setSlug] = useState("");
+  const [templateId, setTemplateId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  function refresh() {
+    api.get<Page[]>("/api/pages").then(setPages);
+  }
+
+  useEffect(refresh, []);
+  useEffect(() => {
+    api.get<PageTemplate[]>("/api/templates").then(setTemplates).catch(() => setTemplates([]));
+  }, []);
+
+  async function createPage() {
+    setError(null);
+    try {
+      const page = await api.post<Page>("/api/pages", { title, slug, ...(templateId ? { templateId } : {}) });
+      setCreating(false);
+      setTitle("");
+      setSlug("");
+      setTemplateId(null);
+      router.push(`/admin/pages/${page.id}`);
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : "Failed to create page");
+    }
+  }
+
+  async function deletePage(id: string) {
+    if (!confirm("Delete this page? This cannot be undone.")) return;
+    await api.delete(`/api/pages/${id}`);
+    refresh();
+  }
+
+  async function duplicatePage(id: string) {
+    const page = await api.post<Page>(`/api/pages/${id}/duplicate`, {});
+    refresh();
+    router.push(`/admin/pages/${page.id}`);
+  }
+
+  async function exportPage(id: string, slug: string) {
+    const res = await fetch(`/api/pages/${id}/export`, { credentials: "include" });
+    const blob = await res.blob();
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${slug || "home"}.page.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  return (
+    <div className="p-8 max-w-4xl">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-semibold">Pages</h1>
+        <button
+          onClick={() => setCreating(true)}
+          className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700"
+        >
+          <Plus size={16} /> New page
+        </button>
+      </div>
+
+      {creating && (
+        <div className="mb-6 bg-white border rounded-lg p-4 space-y-4">
+          {error && <div className="text-sm text-red-600">{error}</div>}
+          <div className="flex gap-3">
+            <input
+              placeholder="Title"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              className="flex-1 border rounded-md px-3 py-2 text-sm"
+            />
+            <input
+              placeholder="slug (e.g. about, leave empty for home)"
+              value={slug}
+              onChange={(e) => setSlug(e.target.value.toLowerCase())}
+              className="flex-1 border rounded-md px-3 py-2 text-sm"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-xs font-medium text-slate-600">Start from</label>
+            <div className="flex gap-3 overflow-x-auto pb-1">
+              <button
+                onClick={() => setTemplateId(null)}
+                className={`shrink-0 w-28 h-20 rounded-md border-2 flex flex-col items-center justify-center gap-1 text-xs font-medium ${
+                  templateId === null ? "border-blue-500 bg-blue-50 text-blue-700" : "border-dashed text-slate-500 hover:border-slate-400"
+                }`}
+              >
+                <LayoutTemplate size={18} />
+                Blank page
+              </button>
+              {templates.map((t) => (
+                <button
+                  key={t.id}
+                  onClick={() => setTemplateId(t.id)}
+                  className={`shrink-0 w-28 h-20 rounded-md border-2 flex flex-col items-center justify-center gap-1 text-xs font-medium overflow-hidden ${
+                    templateId === t.id ? "border-blue-500 bg-blue-50 text-blue-700" : "border-slate-200 text-slate-600 hover:border-slate-400"
+                  }`}
+                >
+                  {t.thumbnail ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img src={t.thumbnail} alt={t.name} className="w-full h-full object-cover" />
+                  ) : (
+                    <>
+                      <LayoutTemplate size={18} />
+                      <span className="px-1 text-center truncate w-full">{t.name}</span>
+                    </>
+                  )}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex gap-2">
+            <button
+              onClick={createPage}
+              disabled={!title}
+              className="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium disabled:opacity-50"
+            >
+              Create
+            </button>
+            <button onClick={() => setCreating(false)} className="px-4 py-2 text-sm text-slate-600">
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
+      <div className="bg-white border rounded-lg divide-y">
+        {pages?.length === 0 && <div className="p-6 text-sm text-slate-500">No pages yet.</div>}
+        {pages?.map((page) => (
+          <div key={page.id} className="flex items-center justify-between px-4 py-3">
+            <div>
+              <div className="font-medium">{page.title}</div>
+              <div className="text-xs text-slate-500">
+                /{page.slug}{" "}
+                <span
+                  className={
+                    page.status === "PUBLISHED" ? "text-green-600 font-medium" : "text-amber-600 font-medium"
+                  }
+                >
+                  {page.status}
+                </span>
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              {page.status === "PUBLISHED" && (
+                <a href={`/${page.slug}`} target="_blank" rel="noreferrer" className="text-slate-400 hover:text-slate-600">
+                  <ExternalLink size={16} />
+                </a>
+              )}
+              <button onClick={() => exportPage(page.id, page.slug)} title="Export as JSON" className="text-slate-400 hover:text-slate-600">
+                <Download size={16} />
+              </button>
+              <button onClick={() => duplicatePage(page.id)} title="Duplicate" className="text-slate-400 hover:text-slate-600">
+                <Copy size={16} />
+              </button>
+              <Link href={`/admin/pages/${page.id}`} className="text-slate-400 hover:text-slate-600">
+                <Pencil size={16} />
+              </Link>
+              <button onClick={() => deletePage(page.id)} className="text-slate-400 hover:text-red-600">
+                <Trash2 size={16} />
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}