first commit

Made-with: Cursor

frontend/app/admin/events/page.tsx

@@ -0,0 +1,844 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { api } from "@/lib/api";
+import { formatDate } from "@/lib/utils";
+import { cn } from "@/lib/utils";
+import {
+  Plus,
+  Pencil,
+  Trash2,
+  X,
+  Image as ImageIcon,
+  Copy,
+  MoreHorizontal,
+  Star,
+  Eye,
+  EyeOff,
+  CheckSquare,
+  Square,
+  ChevronUp,
+  ChevronDown,
+  Link as LinkIcon,
+  Check,
+} from "lucide-react";
+import { MediaPickerModal } from "@/components/admin/MediaPickerModal";
+
+interface Meetup {
+  id: string;
+  title: string;
+  description: string;
+  date: string;
+  time: string;
+  location: string;
+  link?: string;
+  imageId?: string;
+  status: string;
+  featured: boolean;
+  visibility: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface MeetupForm {
+  title: string;
+  description: string;
+  date: string;
+  time: string;
+  location: string;
+  link: string;
+  imageId: string;
+  status: string;
+  featured: boolean;
+  visibility: string;
+}
+
+const emptyForm: MeetupForm = {
+  title: "",
+  description: "",
+  date: "",
+  time: "",
+  location: "",
+  link: "",
+  imageId: "",
+  status: "DRAFT",
+  featured: false,
+  visibility: "PUBLIC",
+};
+
+// Statuses that can be manually set by an admin
+const EDITABLE_STATUS_OPTIONS = ["DRAFT", "PUBLISHED", "CANCELLED"] as const;
+type EditableStatus = (typeof EDITABLE_STATUS_OPTIONS)[number];
+
+// Display statuses (includes computed Upcoming/Past from PUBLISHED + date)
+type DisplayStatus = "DRAFT" | "UPCOMING" | "PAST" | "CANCELLED";
+
+function getDisplayStatus(meetup: { status: string; date: string }): DisplayStatus {
+  if (meetup.status === "CANCELLED") return "CANCELLED";
+  if (meetup.status === "DRAFT") return "DRAFT";
+  // PUBLISHED (or legacy UPCOMING/PAST values) → derive from date
+  if (!meetup.date) return "DRAFT";
+  return new Date(meetup.date) > new Date() ? "UPCOMING" : "PAST";
+}
+
+const STATUS_LABELS: Record<string, string> = {
+  DRAFT: "Draft",
+  PUBLISHED: "Published",
+  UPCOMING: "Upcoming",
+  PAST: "Past",
+  CANCELLED: "Cancelled",
+};
+
+// Badge styles use the computed display status
+const DISPLAY_STATUS_STYLES: Record<DisplayStatus, string> = {
+  DRAFT: "bg-surface-container-highest text-on-surface/60",
+  UPCOMING: "bg-green-900/40 text-green-400",
+  PAST: "bg-surface-container-highest text-on-surface/40",
+  CANCELLED: "bg-red-900/30 text-red-400",
+};
+
+function useOutsideClick(ref: React.RefObject<HTMLElement | null>, callback: () => void) {
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        callback();
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [ref, callback]);
+}
+
+function MoreMenu({
+  meetup,
+  onCopyUrl,
+}: {
+  meetup: Meetup;
+  onCopyUrl: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  useOutsideClick(ref, () => setOpen(false));
+
+  const handleCopy = () => {
+    onCopyUrl();
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+      setOpen(false);
+    }, 1500);
+  };
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        onClick={() => setOpen((v) => !v)}
+        className="p-2 rounded-lg hover:bg-surface-container-high text-on-surface/60 hover:text-on-surface transition-colors"
+        title="More options"
+      >
+        <MoreHorizontal size={16} />
+      </button>
+      {open && (
+        <div className="absolute right-0 top-full mt-1 z-50 w-48 bg-surface-container-low border border-surface-container-highest rounded-xl shadow-lg overflow-hidden">
+          <button
+            onClick={handleCopy}
+            className="flex items-center gap-2 w-full px-4 py-3 text-sm text-on-surface/80 hover:bg-surface-container-high hover:text-on-surface transition-colors"
+          >
+            {copied ? <Check size={14} className="text-green-400" /> : <LinkIcon size={14} />}
+            {copied ? "Copied!" : "Copy Event URL"}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StatusDropdown({
+  meetup,
+  onChange,
+}: {
+  meetup: { status: string; date: string };
+  onChange: (v: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  useOutsideClick(ref, () => setOpen(false));
+
+  const displayStatus = getDisplayStatus(meetup);
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        onClick={() => setOpen((v) => !v)}
+        className={cn(
+          "rounded-full px-3 py-1 text-xs font-bold cursor-pointer hover:opacity-80 transition-opacity",
+          DISPLAY_STATUS_STYLES[displayStatus]
+        )}
+      >
+        {STATUS_LABELS[displayStatus]}
+      </button>
+      {open && (
+        <div className="absolute left-0 top-full mt-1 z-50 w-36 bg-surface-container-low border border-surface-container-highest rounded-xl shadow-lg overflow-hidden">
+          {EDITABLE_STATUS_OPTIONS.map((s) => (
+            <button
+              key={s}
+              onClick={() => {
+                onChange(s);
+                setOpen(false);
+              }}
+              className={cn(
+                "flex items-center gap-2 w-full px-3 py-2 text-xs font-bold transition-colors hover:bg-surface-container-high",
+                meetup.status === s ? "text-on-surface" : "text-on-surface/60"
+              )}
+            >
+              <span className={cn("w-2 h-2 rounded-full", {
+                "bg-on-surface/40": s === "DRAFT",
+                "bg-green-400": s === "PUBLISHED",
+                "bg-red-400": s === "CANCELLED",
+              })} />
+              {STATUS_LABELS[s]}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function EventsPage() {
+  const [meetups, setMeetups] = useState<Meetup[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [showForm, setShowForm] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [form, setForm] = useState<MeetupForm>(emptyForm);
+  const [saving, setSaving] = useState(false);
+  const [showMediaPicker, setShowMediaPicker] = useState(false);
+  const formRef = useRef<HTMLDivElement>(null);
+
+  // Filters
+  const [filterStatus, setFilterStatus] = useState("ALL");
+  const [filterCity, setFilterCity] = useState("ALL");
+  const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
+
+  // Bulk selection
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [bulkLoading, setBulkLoading] = useState(false);
+
+  const loadMeetups = async () => {
+    try {
+      const data = await api.getMeetups({ admin: true });
+      setMeetups(data as Meetup[]);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadMeetups();
+  }, []);
+
+  const openCreate = () => {
+    setForm(emptyForm);
+    setEditingId(null);
+    setShowForm(true);
+    setTimeout(() => formRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }), 50);
+  };
+
+  const openEdit = (meetup: Meetup) => {
+    setForm({
+      title: meetup.title,
+      description: meetup.description || "",
+      date: meetup.date?.split("T")[0] || meetup.date || "",
+      time: meetup.time || "",
+      location: meetup.location || "",
+      link: meetup.link || "",
+      imageId: meetup.imageId || "",
+      status: meetup.status || "DRAFT",
+      featured: meetup.featured || false,
+      visibility: meetup.visibility || "PUBLIC",
+    });
+    setEditingId(meetup.id);
+    setShowForm(true);
+    setTimeout(() => formRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }), 50);
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    setError("");
+    try {
+      const payload = {
+        title: form.title,
+        description: form.description,
+        date: form.date,
+        time: form.time || "00:00",
+        location: form.location,
+        link: form.link,
+        imageId: form.imageId || null,
+        status: form.status,
+        featured: form.featured,
+        visibility: form.visibility,
+      };
+
+      if (editingId) {
+        const updated = await api.updateMeetup(editingId, payload);
+        setMeetups((prev) => prev.map((m) => (m.id === editingId ? updated : m)));
+      } else {
+        const created = await api.createMeetup(payload);
+        setMeetups((prev) => [...prev, created]);
+      }
+      setShowForm(false);
+      setEditingId(null);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm("Delete this meetup?")) return;
+    setMeetups((prev) => prev.filter((m) => m.id !== id));
+    try {
+      await api.deleteMeetup(id);
+    } catch (err: any) {
+      setError(err.message);
+      await loadMeetups();
+    }
+  };
+
+  const handleDuplicate = async (id: string) => {
+    try {
+      const dup = await api.duplicateMeetup(id);
+      setMeetups((prev) => [dup, ...prev]);
+      openEdit(dup);
+    } catch (err: any) {
+      setError(err.message);
+    }
+  };
+
+  const handlePatch = async (id: string, patch: Partial<Meetup>) => {
+    setMeetups((prev) => prev.map((m) => (m.id === id ? { ...m, ...patch } : m)));
+    try {
+      await api.updateMeetup(id, patch);
+    } catch (err: any) {
+      setError(err.message);
+      await loadMeetups();
+    }
+  };
+
+  const handleCopyUrl = (meetup: Meetup) => {
+    const origin = typeof window !== "undefined" ? window.location.origin : "";
+    navigator.clipboard.writeText(`${origin}/events/${meetup.id}`);
+  };
+
+  const toggleSelect = (id: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const selectAll = () => {
+    if (selected.size === filtered.length) {
+      setSelected(new Set());
+    } else {
+      setSelected(new Set(filtered.map((m) => m.id)));
+    }
+  };
+
+  const handleBulk = async (action: "delete" | "publish" | "duplicate") => {
+    if (selected.size === 0) return;
+    if (action === "delete" && !confirm(`Delete ${selected.size} meetup(s)?`)) return;
+    setBulkLoading(true);
+    try {
+      const ids = Array.from(selected);
+      if (action === "delete") {
+        await api.bulkMeetupAction("delete", ids);
+        setMeetups((prev) => prev.filter((m) => !ids.includes(m.id)));
+      } else if (action === "publish") {
+        await api.bulkMeetupAction("publish", ids);
+        setMeetups((prev) => prev.map((m) => (ids.includes(m.id) ? { ...m, status: "PUBLISHED" } : m)));
+      } else if (action === "duplicate") {
+        const result = await api.bulkMeetupAction("duplicate", ids);
+        setMeetups((prev) => [...(result as Meetup[]), ...prev]);
+      }
+      setSelected(new Set());
+    } catch (err: any) {
+      setError(err.message);
+      await loadMeetups();
+    } finally {
+      setBulkLoading(false);
+    }
+  };
+
+  // Derived: unique cities
+  const cities = Array.from(new Set(meetups.map((m) => m.location).filter(Boolean))).sort();
+
+  // Filter tabs use computed display status
+  const FILTER_STATUS_OPTIONS: Array<{ value: string; label: string }> = [
+    { value: "ALL", label: "All" },
+    { value: "UPCOMING", label: "Upcoming" },
+    { value: "PAST", label: "Past" },
+    { value: "DRAFT", label: "Draft" },
+    { value: "CANCELLED", label: "Cancelled" },
+  ];
+
+  // Filtered + sorted
+  const filtered = meetups
+    .filter((m) => {
+      if (filterStatus !== "ALL" && getDisplayStatus(m) !== filterStatus) return false;
+      if (filterCity !== "ALL" && m.location !== filterCity) return false;
+      return true;
+    })
+    .sort((a, b) => {
+      const da = a.date || "";
+      const db = b.date || "";
+      return sortDir === "asc" ? da.localeCompare(db) : db.localeCompare(da);
+    });
+
+  const allSelected = filtered.length > 0 && selected.size === filtered.length;
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <div className="text-on-surface/50">Loading meetups...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-5">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold text-on-surface">Events</h1>
+        <button
+          onClick={openCreate}
+          className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary font-semibold text-sm hover:opacity-90 transition-opacity"
+        >
+          <Plus size={16} />
+          New Event
+        </button>
+      </div>
+
+      {error && (
+        <div className="flex items-center justify-between bg-error-container/20 text-error text-sm px-4 py-3 rounded-lg">
+          <span>{error}</span>
+          <button onClick={() => setError("")}>
+            <X size={14} />
+          </button>
+        </div>
+      )}
+
+      {/* Create / Edit Form */}
+      {showForm && (
+        <div ref={formRef} className="bg-surface-container-low rounded-xl p-6">
+          <div className="flex items-center justify-between mb-5">
+            <h2 className="text-lg font-semibold text-on-surface">
+              {editingId ? "Edit Event" : "New Event"}
+            </h2>
+            <button
+              onClick={() => setShowForm(false)}
+              className="text-on-surface/50 hover:text-on-surface"
+            >
+              <X size={20} />
+            </button>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <input
+              placeholder="Title (e.g. #54 Belgian Bitcoin Embassy Meetup)"
+              value={form.title}
+              onChange={(e) => setForm({ ...form, title: e.target.value })}
+              className="bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 w-full focus:outline-none focus:ring-1 focus:ring-primary/40 md:col-span-2"
+            />
+            <input
+              placeholder="Location"
+              value={form.location}
+              onChange={(e) => setForm({ ...form, location: e.target.value })}
+              className="bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 w-full focus:outline-none focus:ring-1 focus:ring-primary/40"
+            />
+            <input
+              type="date"
+              value={form.date}
+              onChange={(e) => setForm({ ...form, date: e.target.value })}
+              className="bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 w-full focus:outline-none focus:ring-1 focus:ring-primary/40"
+            />
+            <input
+              type="time"
+              value={form.time}
+              onChange={(e) => setForm({ ...form, time: e.target.value })}
+              className="bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 w-full focus:outline-none focus:ring-1 focus:ring-primary/40"
+            />
+            <div>
+              <label className="text-on-surface/60 text-xs mb-2 block">Status</label>
+              <select
+                value={form.status}
+                onChange={(e) => setForm({ ...form, status: e.target.value })}
+                className="bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 w-full focus:outline-none focus:ring-1 focus:ring-primary/40"
+              >
+                {EDITABLE_STATUS_OPTIONS.map((s) => (
+                  <option key={s} value={s}>
+                    {STATUS_LABELS[s]}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className="text-on-surface/60 text-xs mb-2 block">Visibility</label>
+              <select
+                value={form.visibility}
+                onChange={(e) => setForm({ ...form, visibility: e.target.value })}
+                className="bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 w-full focus:outline-none focus:ring-1 focus:ring-primary/40"
+              >
+                <option value="PUBLIC">Public</option>
+                <option value="HIDDEN">Hidden</option>
+              </select>
+            </div>
+            <div className="md:col-span-2">
+              <label className="text-on-surface/60 text-xs mb-2 block">
+                External registration link{" "}
+                <span className="text-on-surface/40">(optional)</span>
+              </label>
+              <input
+                placeholder="https://..."
+                value={form.link}
+                onChange={(e) => setForm({ ...form, link: e.target.value })}
+                className="bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 w-full focus:outline-none focus:ring-1 focus:ring-primary/40"
+              />
+            </div>
+            <textarea
+              placeholder="Description"
+              value={form.description}
+              onChange={(e) => setForm({ ...form, description: e.target.value })}
+              rows={3}
+              className="bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 w-full focus:outline-none focus:ring-1 focus:ring-primary/40 md:col-span-2"
+            />
+            <div className="md:col-span-2">
+              <label className="text-on-surface/60 text-xs mb-2 block">
+                Event image <span className="text-on-surface/40">(optional)</span>
+              </label>
+              <div className="flex items-center gap-3">
+                {form.imageId && (
+                  <div className="relative w-20 h-20 rounded-lg overflow-hidden bg-surface-container-highest shrink-0">
+                    <img
+                      src={`/media/${form.imageId}?w=200`}
+                      alt="Selected"
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                )}
+                <button
+                  type="button"
+                  onClick={() => setShowMediaPicker(true)}
+                  className="flex items-center gap-2 px-4 py-2 rounded-lg bg-surface-container-highest text-on-surface/70 hover:text-on-surface text-sm transition-colors"
+                >
+                  <ImageIcon size={16} />
+                  {form.imageId ? "Change Image" : "Select Image"}
+                </button>
+                {form.imageId && (
+                  <button
+                    type="button"
+                    onClick={() => setForm({ ...form, imageId: "" })}
+                    className="px-3 py-2 rounded-lg text-error/70 hover:text-error text-sm transition-colors"
+                  >
+                    Remove
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-4 mt-4 pt-4 border-t border-surface-container-highest">
+            <label className="flex items-center gap-2 cursor-pointer select-none">
+              <input
+                type="checkbox"
+                checked={form.featured}
+                onChange={(e) => setForm({ ...form, featured: e.target.checked })}
+                className="hidden"
+              />
+              <span
+                className={cn(
+                  "flex items-center gap-1.5 text-sm transition-colors",
+                  form.featured ? "text-primary" : "text-on-surface/50 hover:text-on-surface"
+                )}
+              >
+                <Star size={15} className={form.featured ? "fill-primary" : ""} />
+                Featured
+              </span>
+            </label>
+          </div>
+
+          <div className="flex gap-3 mt-4">
+            <button
+              onClick={handleSave}
+              disabled={saving || !form.title || !form.date}
+              className="px-6 py-2 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary font-semibold text-sm hover:opacity-90 transition-opacity disabled:opacity-50"
+            >
+              {saving ? "Saving..." : "Save"}
+            </button>
+            <button
+              onClick={() => setShowForm(false)}
+              className="px-6 py-2 rounded-lg bg-surface-container-highest text-on-surface font-semibold text-sm hover:bg-surface-container-high transition-colors"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
+      {showMediaPicker && (
+        <MediaPickerModal
+          selectedId={form.imageId || null}
+          onSelect={(id) => {
+            setForm({ ...form, imageId: id });
+            setShowMediaPicker(false);
+          }}
+          onClose={() => setShowMediaPicker(false)}
+        />
+      )}
+
+      {/* Filters */}
+      <div className="flex flex-wrap items-center gap-2">
+        {/* Status filter */}
+        <div className="flex items-center bg-surface-container-low rounded-lg overflow-hidden">
+          {FILTER_STATUS_OPTIONS.map(({ value, label }) => (
+            <button
+              key={value}
+              onClick={() => setFilterStatus(value)}
+              className={cn(
+                "px-3 py-1.5 text-xs font-semibold transition-colors",
+                filterStatus === value
+                  ? "bg-primary text-on-primary"
+                  : "text-on-surface/60 hover:text-on-surface hover:bg-surface-container-high"
+              )}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+
+        {/* City filter */}
+        {cities.length > 1 && (
+          <select
+            value={filterCity}
+            onChange={(e) => setFilterCity(e.target.value)}
+            className="bg-surface-container-low text-on-surface/70 text-xs rounded-lg px-3 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary/40"
+          >
+            <option value="ALL">All cities</option>
+            {cities.map((c) => (
+              <option key={c} value={c}>
+                {c}
+              </option>
+            ))}
+          </select>
+        )}
+
+        {/* Sort */}
+        <button
+          onClick={() => setSortDir((d) => (d === "asc" ? "desc" : "asc"))}
+          className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-on-surface/60 hover:text-on-surface bg-surface-container-low rounded-lg transition-colors"
+        >
+          {sortDir === "asc" ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
+          Date
+        </button>
+
+        <span className="ml-auto text-xs text-on-surface/40">
+          {filtered.length} event{filtered.length !== 1 ? "s" : ""}
+        </span>
+      </div>
+
+      {/* Bulk action bar */}
+      {selected.size > 0 && (
+        <div className="flex items-center gap-3 bg-surface-container-low rounded-xl px-4 py-3 border border-primary/20">
+          <span className="text-sm text-on-surface/70 font-medium">
+            {selected.size} selected
+          </span>
+          <div className="flex items-center gap-2 ml-auto">
+            <button
+              onClick={() => handleBulk("duplicate")}
+              disabled={bulkLoading}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-lg bg-surface-container-high text-on-surface/70 hover:text-on-surface transition-colors disabled:opacity-50"
+            >
+              <Copy size={12} />
+              Duplicate
+            </button>
+            <button
+              onClick={() => handleBulk("publish")}
+              disabled={bulkLoading}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-lg bg-surface-container-high text-on-surface/70 hover:text-on-surface transition-colors disabled:opacity-50"
+            >
+              Publish
+            </button>
+            <button
+              onClick={() => handleBulk("delete")}
+              disabled={bulkLoading}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-lg bg-error-container/20 text-error/70 hover:text-error transition-colors disabled:opacity-50"
+            >
+              <Trash2 size={12} />
+              Delete
+            </button>
+            <button
+              onClick={() => setSelected(new Set())}
+              className="ml-1 text-on-surface/40 hover:text-on-surface"
+            >
+              <X size={14} />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Event list */}
+      <div className="space-y-2">
+        {filtered.length === 0 ? (
+          <p className="text-on-surface/50 text-sm py-8 text-center">No events found.</p>
+        ) : (
+          <>
+            {/* Select-all row */}
+            <div className="flex items-center gap-2 px-2 pb-1">
+              <button
+                onClick={selectAll}
+                className="text-on-surface/40 hover:text-on-surface transition-colors"
+                title={allSelected ? "Deselect all" : "Select all"}
+              >
+                {allSelected ? <CheckSquare size={15} /> : <Square size={15} />}
+              </button>
+              <span className="text-xs text-on-surface/40">
+                {allSelected ? "Deselect all" : "Select all"}
+              </span>
+            </div>
+
+            {filtered.map((meetup) => (
+              <div
+                key={meetup.id}
+                className={cn(
+                  "bg-surface-container-low rounded-xl p-4 flex items-center gap-3 transition-colors",
+                  selected.has(meetup.id) && "ring-1 ring-primary/30 bg-surface-container"
+                )}
+              >
+                {/* Checkbox */}
+                <button
+                  onClick={() => toggleSelect(meetup.id)}
+                  className="shrink-0 text-on-surface/40 hover:text-on-surface transition-colors"
+                >
+                  {selected.has(meetup.id) ? (
+                    <CheckSquare size={16} className="text-primary" />
+                  ) : (
+                    <Square size={16} />
+                  )}
+                </button>
+
+                {/* Image */}
+                {meetup.imageId ? (
+                  <div className="w-14 h-14 rounded-lg overflow-hidden bg-surface-container-highest shrink-0">
+                    <img
+                      src={`/media/${meetup.imageId}?w=100`}
+                      alt=""
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                ) : (
+                  <div className="w-14 h-14 rounded-lg bg-surface-container-highest shrink-0 flex items-center justify-center">
+                    <ImageIcon size={18} className="text-on-surface/20" />
+                  </div>
+                )}
+
+                {/* Info */}
+                <div className="flex-1 min-w-0">
+                  <div className="flex flex-wrap items-center gap-2 mb-1">
+                    <h3 className="text-on-surface font-semibold truncate">{meetup.title}</h3>
+                    {meetup.featured && (
+                      <Star size={12} className="text-primary fill-primary shrink-0" />
+                    )}
+                    {meetup.visibility === "HIDDEN" && (
+                      <EyeOff size={12} className="text-on-surface/40 shrink-0" />
+                    )}
+                  </div>
+                  <div className="flex flex-wrap items-center gap-2">
+                    <StatusDropdown
+                      meetup={meetup}
+                      onChange={(v) => handlePatch(meetup.id, { status: v })}
+                    />
+                    <span className="text-on-surface/50 text-xs">
+                      {meetup.date ? formatDate(meetup.date) : "No date"}
+                      {meetup.location && ` · ${meetup.location}`}
+                    </span>
+                  </div>
+                </div>
+
+                {/* Actions */}
+                <div className="flex items-center gap-1 shrink-0">
+                  {/* Featured toggle */}
+                  <button
+                    onClick={() => handlePatch(meetup.id, { featured: !meetup.featured })}
+                    className={cn(
+                      "p-2 rounded-lg transition-colors",
+                      meetup.featured
+                        ? "text-primary hover:text-primary/70"
+                        : "text-on-surface/30 hover:text-on-surface hover:bg-surface-container-high"
+                    )}
+                    title={meetup.featured ? "Unfeature" : "Feature"}
+                  >
+                    <Star size={15} className={meetup.featured ? "fill-primary" : ""} />
+                  </button>
+
+                  {/* Visibility toggle */}
+                  <button
+                    onClick={() =>
+                      handlePatch(meetup.id, {
+                        visibility: meetup.visibility === "PUBLIC" ? "HIDDEN" : "PUBLIC",
+                      })
+                    }
+                    className={cn(
+                      "p-2 rounded-lg transition-colors",
+                      meetup.visibility === "HIDDEN"
+                        ? "text-on-surface/30 hover:text-on-surface hover:bg-surface-container-high"
+                        : "text-on-surface/60 hover:text-on-surface hover:bg-surface-container-high"
+                    )}
+                    title={meetup.visibility === "PUBLIC" ? "Hide event" : "Make public"}
+                  >
+                    {meetup.visibility === "HIDDEN" ? <EyeOff size={15} /> : <Eye size={15} />}
+                  </button>
+
+                  {/* Edit */}
+                  <button
+                    onClick={() => openEdit(meetup)}
+                    className="p-2 rounded-lg hover:bg-surface-container-high text-on-surface/60 hover:text-on-surface transition-colors"
+                    title="Edit"
+                  >
+                    <Pencil size={15} />
+                  </button>
+
+                  {/* Duplicate */}
+                  <button
+                    onClick={() => handleDuplicate(meetup.id)}
+                    className="p-2 rounded-lg hover:bg-surface-container-high text-on-surface/60 hover:text-on-surface transition-colors"
+                    title="Duplicate"
+                  >
+                    <Copy size={15} />
+                  </button>
+
+                  {/* Delete */}
+                  <button
+                    onClick={() => handleDelete(meetup.id)}
+                    className="p-2 rounded-lg hover:bg-error-container/30 text-on-surface/60 hover:text-error transition-colors"
+                    title="Delete"
+                  >
+                    <Trash2 size={15} />
+                  </button>
+
+                  {/* More menu */}
+                  <MoreMenu meetup={meetup} onCopyUrl={() => handleCopyUrl(meetup)} />
+                </div>
+              </div>
+            ))}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}