feat: media library with image picker for article forms, browse/upload from folder

src/app/admin/articles/[id]/page.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { deleteArticle, updateArticle } from "@/actions/admin-articles";
-import { RichText } from "@/components/admin/rich-text";
+import { ArticleForm } from "@/components/admin/article-form";
 import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
@@ -14,7 +14,7 @@ export default async function EditArticle({
   const { id } = await params;
   const article = await prisma.websiteArticles.findUnique({
     where: { id: BigInt(id) },
-    select: { id: true, slug: true, title: true, shortStory: true, fullStory: true, image: true, createdAt: true, updatedAt: true },
+    select: { id: true, slug: true, title: true, shortStory: true, fullStory: true, image: true },
   }).catch(() => null);
   if (!article) notFound();
 
@@ -24,14 +24,19 @@ export default async function EditArticle({
         <Link href="/admin/articles">← Articles</Link>
       </p>
       <h1>Edit article</h1>
-      <form action={updateArticle} className="card" style={{ display: "grid", gap: "0.6rem" }}>
-        <input type="hidden" name="id" value={String(article.id)} />
-        <input name="title" defaultValue={article.title} required />
-        <input name="image" defaultValue={article.image} placeholder="Image URL" />
-        <textarea name="shortStory" defaultValue={article.shortStory} rows={2} />
-        <RichText name="fullStory" defaultValue={article.fullStory} rows={10} />
-        <button type="submit">Save</button>
-      </form>
+      <ArticleForm
+        action={async (fd) => {
+          "use server";
+          fd.set("id", String(article.id));
+          await updateArticle(fd);
+        }}
+        defaultValues={{
+          title: article.title,
+          image: article.image,
+          shortStory: article.shortStory,
+          fullStory: article.fullStory,
+        }}
+      />
       <form action={deleteArticle} style={{ marginTop: "1rem" }}>
         <input type="hidden" name="id" value={String(article.id)} />
         <button type="submit" className="btn btn-primary">Delete article</button>

src/app/admin/articles/new/page.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { createArticle } from "@/actions/admin-articles";
-import { RichText } from "@/components/admin/rich-text";
+import { ArticleForm } from "@/components/admin/article-form";
 
 export default function NewArticle() {
   return (
@@ -9,13 +9,7 @@ export default function NewArticle() {
         <Link href="/admin/articles">← Articles</Link>
       </p>
       <h1>New article</h1>
-      <form action={createArticle} className="card" style={{ display: "grid", gap: "0.6rem" }}>
-        <input name="title" placeholder="Title" required />
-        <input name="image" placeholder="Image URL" />
-        <textarea name="shortStory" placeholder="Short story (summary)" rows={2} />
-        <RichText name="fullStory" placeholder="Full story" rows={10} />
-        <button type="submit">Create</button>
-      </form>
+      <ArticleForm action={createArticle} />
     </main>
   );
 }

src/app/admin/layout.tsx

@@ -71,7 +71,8 @@ const NAV_GROUPS: { label: string; items: { href: string; label: string }[] }[]
       { href: "/admin/housekeeping", label: "Housekeeping" },
       { href: "/admin/rooms", label: "Rooms" },
       { href: "/admin/email-templates", label: "Email" },
-      { href: "/admin/theme", label: "Theme" },
+          { href: "/admin/theme", label: "Theme" },
+          { href: "/admin/media", label: "Media" },
       { href: "/admin/settings", label: "Settings" },
     ],
   },

src/app/admin/media/page.tsx

@@ -0,0 +1,17 @@
+import Link from "next/link";
+import { AdminMediaGrid } from "@/components/admin/media-grid";
+
+export default function AdminMediaPage() {
+  return (
+    <main>
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+        <h1>Media Library</h1>
+        <Link href="/admin/articles" className="muted" style={{ fontSize: "0.88rem" }}>← Articles</Link>
+      </div>
+      <p className="muted" style={{ marginTop: "-0.4rem" }}>
+        Upload and manage images for articles and other content.
+      </p>
+      <AdminMediaGrid />
+    </main>
+  );
+}