opacacms 0.1.0

package/src/admin/ui/views/dashboard-view.tsx

@@ -0,0 +1,263 @@
+import { Activity, ArrowUpRight, Database } from "lucide-react";
+import type { SerializableConfig } from "../../../types";
+import { Link } from "../components/link";
+
+export interface DashboardViewProps {
+  config: SerializableConfig;
+  user?: {
+    name: string;
+    email: string;
+    image?: string | null;
+  } | null;
+}
+
+export function DashboardView({ config, user }: DashboardViewProps) {
+  const userCollections = config.collections.filter((c) => !c.slug.startsWith("_"));
+
+  return (
+    <div>
+      <div
+        className="opaca-header"
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: "2rem",
+        }}
+      >
+        <div>
+          <h1 className="opaca-title" style={{ marginBottom: "0.25rem" }}>
+            {config.appName || "OpacaCMS"}
+          </h1>
+          <p className="opaca-subtitle">Overview of your content management system</p>
+        </div>
+
+        {user && (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "0.75rem",
+              padding: "0.625rem 1rem",
+              background: "rgba(255, 255, 255, 0.03)",
+              borderRadius: "12px",
+              border: "1px solid rgba(255, 255, 255, 0.08)",
+              backdropFilter: "blur(10px)",
+              boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
+            }}
+          >
+            <div
+              style={{
+                width: "36px",
+                height: "36px",
+                borderRadius: "10px",
+                background: "linear-gradient(135deg, var(--opaca-accent) 0%, #a78bfa 100%)",
+                color: "white",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: "0.875rem",
+                fontWeight: "600",
+                boxShadow: "0 2px 8px rgba(124, 58, 237, 0.3)",
+              }}
+            >
+              {user.name.charAt(0).toUpperCase()}
+            </div>
+            <div style={{ lineHeight: "1.3" }}>
+              <div
+                style={{
+                  fontSize: "0.875rem",
+                  fontWeight: "600",
+                  color: "var(--opaca-text)",
+                }}
+              >
+                {user.name}
+              </div>
+              <div style={{ fontSize: "0.75rem", color: "var(--opaca-text-dim)" }}>
+                {user.email}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="opaca-grid" style={{ marginBottom: "2.5rem" }}>
+        <div className="opaca-card">
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "0.75rem",
+              marginBottom: "0.75rem",
+            }}
+          >
+            <div
+              style={{
+                padding: "0.5rem",
+                background: "var(--opaca-primary-glow)",
+                color: "var(--opaca-accent)",
+                borderRadius: "var(--opaca-radius)",
+              }}
+            >
+              <Database size={18} />
+            </div>
+            <div>
+              <div
+                style={{
+                  fontSize: "1.25rem",
+                  fontWeight: "600",
+                  lineHeight: "1.2",
+                }}
+              >
+                {userCollections.length}
+              </div>
+              <div
+                style={{
+                  fontSize: "0.6875rem",
+                  color: "var(--opaca-text-dim)",
+                  textTransform: "uppercase",
+                  letterSpacing: "0.05em",
+                }}
+              >
+                Collections
+              </div>
+            </div>
+          </div>
+          <p style={{ fontSize: "0.75rem", color: "var(--opaca-text-muted)" }}>
+            Schema defined by Drizzle and synced automatically.
+          </p>
+        </div>
+
+        <div className="opaca-card">
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "0.75rem",
+              marginBottom: "0.75rem",
+            }}
+          >
+            <div
+              style={{
+                padding: "0.5rem",
+                background: "rgba(52, 211, 153, 0.1)",
+                color: "var(--opaca-success)",
+                borderRadius: "var(--opaca-radius)",
+              }}
+            >
+              <Activity size={18} />
+            </div>
+            <div>
+              <div
+                style={{
+                  fontSize: "1.25rem",
+                  fontWeight: "600",
+                  lineHeight: "1.2",
+                }}
+              >
+                Online
+              </div>
+              <div
+                style={{
+                  fontSize: "0.6875rem",
+                  color: "var(--opaca-text-dim)",
+                  textTransform: "uppercase",
+                  letterSpacing: "0.05em",
+                }}
+              >
+                API Status
+              </div>
+            </div>
+          </div>
+          <p style={{ fontSize: "0.75rem", color: "var(--opaca-text-muted)" }}>
+            Hono-powered API on {config.serverURL || "localhost"}.
+          </p>
+        </div>
+      </div>
+
+      <div
+        style={{
+          fontSize: "0.6875rem",
+          fontWeight: "500",
+          color: "var(--opaca-text-dim)",
+          textTransform: "uppercase",
+          letterSpacing: "0.05em",
+          marginBottom: "0.75rem",
+        }}
+      >
+        Collections
+      </div>
+      <div className="opaca-grid">
+        {userCollections
+          .filter((c) => !c.hidden)
+          .sort((a, b) => (a.admin === b.admin ? 0 : a.admin ? -1 : 1))
+          .map((col: any) => {
+            // Format label: prioritize col.label, otherwise strip leading underscores and capitalize each word
+            const colLabel =
+              col.label ||
+              col.slug
+                .replace(/^_+/, "")
+                .replace(/_/g, " ")
+                .replace(/\b\w/g, (c: string) => c.toUpperCase());
+            return (
+              <Link
+                key={col.slug}
+                href={`/admin/collections/${col.slug}`}
+                className="opaca-card"
+                style={{
+                  textDecoration: "none",
+                  color: "inherit",
+                  cursor: "pointer",
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    marginBottom: "0.25rem",
+                  }}
+                >
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "0.5rem",
+                    }}
+                  >
+                    <span style={{ fontWeight: "500", fontSize: "0.875rem" }}>{colLabel}</span>
+                    {col.admin && (
+                      <div
+                        style={{
+                          width: "5px",
+                          height: "5px",
+                          borderRadius: "50%",
+                          backgroundColor: "var(--opaca-accent)",
+                          opacity: 0.8,
+                          boxShadow: "0 0 5px var(--opaca-accent)",
+                        }}
+                        title={
+                          col.slug === "_opaca_assets"
+                            ? "System Assets Registry"
+                            : "Universal Collection"
+                        }
+                      />
+                    )}
+                  </div>
+                  <ArrowUpRight size={14} color="var(--opaca-text-dim)" />
+                </div>
+                <div
+                  style={{
+                    fontSize: "0.75rem",
+                    color: "var(--opaca-text-muted)",
+                  }}
+                >
+                  {col.fields.length} fields
+                </div>
+              </Link>
+            );
+          })}
+      </div>
+    </div>
+  );
+}

package/src/admin/ui/views/document-edit-view.tsx

@@ -0,0 +1,384 @@
+import { useStore } from "@nanostores/react";
+import { useForm } from "@tanstack/react-form";
+import { AlertCircle, ArrowLeft, Globe, Loader2, Save, Trash2 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import type { SerializableCollection } from "../../../types";
+import { api } from "../../api-client";
+import { $config } from "../../stores/config";
+import { createFetcherStore, createMutatorStore } from "../../stores/query";
+import { notify } from "../../stores/ui";
+import { FieldRenderer } from "../components/fields";
+import { AlertDialog } from "../components/ui/alert-dialog";
+
+export interface DocumentEditViewProps {
+  collection: SerializableCollection;
+  id: string;
+  onBack: () => void;
+}
+
+// Data Fetcher
+const fetchDocument = async (path: string, id: string, locale?: string) => {
+  if (id === "create") return {};
+  const headers: Record<string, string> = {};
+  if (locale) headers["x-opaca-locale"] = locale;
+
+  const data = await api.get(`api/${path}/${id}`, { headers }).json<any>();
+  return data;
+};
+
+// Data Mutator
+const saveDocument = async (path: string, id: string, payload: any, locale?: string) => {
+  const payloadToSave = { ...payload };
+  for (const key in payloadToSave) {
+    if (payloadToSave[key] === "") payloadToSave[key] = null;
+  }
+
+  const headers: Record<string, string> = {};
+  if (locale) headers["x-opaca-locale"] = locale;
+
+  if (id && id !== "create") {
+    return api.patch(`api/${path}/${id}`, { json: payloadToSave, headers }).json();
+  }
+  return api.post(`api/${path}`, { json: payloadToSave, headers }).json();
+};
+
+export function DocumentEditView({ collection, id, onBack }: DocumentEditViewProps) {
+  const path = collection.apiPath || collection.slug;
+  const docPath = path;
+
+  const config = useStore($config);
+  const [currentLocale, setCurrentLocale] = useState(config?.i18n?.defaultLocale || "en");
+
+  const documentFetcher = useMemo(
+    () =>
+      createFetcherStore<any>([path, id, currentLocale], {
+        fetcher: () => fetchDocument(path, id, currentLocale),
+      }),
+    [path, id, currentLocale],
+  );
+
+  const documentMutator = useMemo(
+    () =>
+      createMutatorStore<any, any>(async ({ data }) => {
+        const payload = data;
+        return saveDocument(path, id, payload, currentLocale);
+      }),
+    [path, id, currentLocale],
+  );
+
+  const docState = useStore(documentFetcher);
+  const mutateState = useStore(documentMutator);
+  const loading = docState.loading;
+  const saving = mutateState.loading;
+  const error = docState.error || mutateState.error;
+
+  const hasDrafts = !!collection.versions?.drafts;
+
+  const form = useForm({
+    defaultValues: docState.data || {},
+    onSubmit: async ({ value }) => {
+      try {
+        await documentMutator.mutate(value);
+        notify(`Document ${id === "create" ? "created" : "updated"} successfully`, "success");
+        onBack();
+      } catch (err: any) {
+        let errorMsg = "Failed to save document";
+        if (err.response) {
+          try {
+            const errorData = await err.response.json();
+            errorMsg = errorData.message || errorMsg;
+
+            if (errorData.errors) {
+              Object.keys(errorData.errors).forEach((field) => {
+                if (field === "_errors") return;
+                form.setErrorMap({
+                  onChange: errorData.errors[field]._errors.join(", "),
+                } as any);
+              });
+            }
+          } catch (e) {}
+        }
+        notify(errorMsg, "error");
+      }
+    },
+  });
+
+  useEffect(() => {
+    if (docState.data && !docState.loading) {
+      form.reset(docState.data);
+    }
+  }, [docState.data, docState.loading, form, currentLocale]);
+
+  const handleSubmit = async (e?: React.FormEvent, status: "published" | "draft" = "published") => {
+    if (e) e.preventDefault();
+    e?.stopPropagation();
+
+    // Set status in form values before submitting
+    if (hasDrafts) {
+      form.setFieldValue("_status" as never, status as never);
+    }
+
+    await form.handleSubmit();
+  };
+
+  const handleBack = () => {
+    if (!form.state.isDirty) {
+      onBack();
+    }
+  };
+
+  if (loading) {
+    return (
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "0.75rem",
+          marginTop: "2rem",
+          padding: "0 2.5rem",
+        }}
+      >
+        <Loader2 size={18} className="opaca-spin" />
+        <span className="opaca-subtitle">Loading document...</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="opaca-admin-form">
+      <div className="opaca-header">
+        <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+          {form.state.isDirty ? (
+            <AlertDialog
+              title="Unsaved Changes"
+              description="You have unsaved changes. Are you sure you want to discard them and leave?"
+              onConfirm={onBack}
+              variant="destructive"
+            >
+              <button
+                type="button"
+                className="opaca-btn opaca-btn-outline"
+                style={{ padding: "0.5rem" }}
+                title="Go Back"
+              >
+                <ArrowLeft size={18} />
+              </button>
+            </AlertDialog>
+          ) : (
+            <button
+              type="button"
+              onClick={handleBack}
+              className="opaca-btn opaca-btn-outline"
+              style={{ padding: "0.5rem" }}
+              title="Go Back"
+            >
+              <ArrowLeft size={18} />
+            </button>
+          )}
+          <div>
+            <h1 className="opaca-title">
+              {id === "create"
+                ? `Create ${collection.label || collection.slug}`
+                : `Edit ${collection.label || collection.slug}`}
+            </h1>
+            <p className="opaca-subtitle">
+              {id === "create" ? "Add a new entry to the collection." : `ID: ${id}`}
+            </p>
+          </div>
+        </div>
+
+        <div style={{ display: "flex", gap: "0.75rem" }}>
+          {/* Locale Switcher */}
+          {config?.i18n && config.i18n.locales.length > 1 && (
+            <div className="opaca-locale-switcher">
+              {config.i18n.locales.map((loc) => (
+                <button
+                  key={loc}
+                  type="button"
+                  className={`opaca-locale-btn ${currentLocale === loc ? "active" : ""}`}
+                  onClick={() => {
+                    if (form.state.isDirty) {
+                      if (confirm("Unsaved changes will be lost. Continue?")) {
+                        setCurrentLocale(loc);
+                      }
+                    } else {
+                      setCurrentLocale(loc);
+                    }
+                  }}
+                >
+                  {loc.toUpperCase()}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {id !== "create" && (
+            <AlertDialog
+              title="Delete Document"
+              description="Are you sure you want to delete this document? This action cannot be undone."
+              onConfirm={async () => {
+                try {
+                  await api.delete(`api/${docPath}/${id}`);
+                  notify("Document deleted successfully", "success");
+                  onBack();
+                } catch (err: unknown) {
+                  console.error(err);
+                  notify("Failed to delete document", "error");
+                }
+              }}
+              variant="destructive"
+              confirmText="Delete"
+            >
+              <button
+                type="button"
+                className="opaca-btn opaca-btn-outline"
+                style={{
+                  color: "var(--opaca-error)",
+                  borderColor: "var(--opaca-error)",
+                }}
+                title="Delete Document"
+              >
+                <Trash2 size={18} />
+                Delete
+              </button>
+            </AlertDialog>
+          )}
+          <form.Subscribe selector={(state) => [state.isDirty]}>
+            {([isDirty]) => (
+              <div style={{ display: "flex", gap: "0.75rem" }}>
+                {hasDrafts && (
+                  <button
+                    type="button"
+                    onClick={(e) => handleSubmit(e, "draft")}
+                    disabled={saving}
+                    className="opaca-btn opaca-btn-outline"
+                    title="Save as Draft"
+                  >
+                    {saving ? <Loader2 size={18} className="opaca-spin" /> : <Save size={18} />}
+                    Save Draft
+                  </button>
+                )}
+                <button
+                  type="button"
+                  onClick={(e) => handleSubmit(e, "published")}
+                  disabled={saving}
+                  className="opaca-btn opaca-btn-primary"
+                  style={{ position: "relative" }}
+                  title={hasDrafts ? "Publish" : "Save Changes"}
+                >
+                  {saving ? <Loader2 size={18} className="opaca-spin" /> : <Save size={18} />}
+                  {id === "create"
+                    ? hasDrafts
+                      ? "Publish"
+                      : "Create"
+                    : hasDrafts
+                      ? "Publish"
+                      : "Save"}
+                  {isDirty && !saving && (
+                    <span
+                      style={{
+                        position: "absolute",
+                        top: "-4px",
+                        right: "-4px",
+                        width: "10px",
+                        height: "10px",
+                        borderRadius: "50%",
+                        background: "var(--opaca-warning)",
+                        border: "2px solid var(--opaca-card-bg)",
+                        boxShadow: "0 1px 2px rgba(0,0,0,0.2)",
+                      }}
+                      title="Unsaved changes"
+                    />
+                  )}
+                </button>
+              </div>
+            )}
+          </form.Subscribe>
+        </div>
+      </div>
+
+      {error && (
+        <div
+          style={{
+            padding: "1rem",
+            backgroundColor: "rgba(239, 68, 68, 0.1)",
+            border: "1px solid var(--opaca-error)",
+            color: "var(--opaca-error)",
+            borderRadius: "var(--opaca-radius)",
+            marginBottom: "2rem",
+            display: "flex",
+            alignItems: "center",
+            gap: "0.75rem",
+            fontSize: "0.875rem",
+          }}
+        >
+          <AlertCircle size={18} />
+          {error}
+        </div>
+      )}
+
+      <div className="opaca-card" style={{ padding: "2.5rem" }}>
+        <form id="opaca-doc-form" onSubmit={(e) => handleSubmit(e)}>
+          <div style={{ display: "grid", gap: "2rem" }}>
+            {collection.fields.map((field, index) => {
+              const fieldName = field.name;
+              const access = fieldName
+                ? docState.data?._access?.[fieldName]
+                : {
+                    hidden: false,
+                    readOnly: false,
+                    disabled: false,
+                  };
+
+              if (access?.hidden) return null;
+
+              const isReadOnly = access?.readOnly;
+              const isDisabled = access?.disabled || isReadOnly;
+
+              // Layout fields without a name
+              if (!fieldName) {
+                return (
+                  <form.Subscribe
+                    // biome-ignore lint/suspicious/noArrayIndexKey: ignore, layout field sometimes don't have names
+                    key={index}
+                    selector={(state) => state.values}
+                  >
+                    {(values) => (
+                      <FieldRenderer
+                        field={field}
+                        value={undefined}
+                        disabled={isDisabled}
+                        readOnly={isReadOnly}
+                        onChange={(_name, val) => {
+                          if (typeof _name === "string") {
+                            form.setFieldValue(_name as never, val as never);
+                          }
+                        }}
+                        parentData={values}
+                      />
+                    )}
+                  </form.Subscribe>
+                );
+              }
+
+              return (
+                <form.Field key={fieldName} name={fieldName}>
+                  {(fieldApi) => (
+                    <FieldRenderer
+                      field={field}
+                      value={fieldApi.state.value}
+                      disabled={isDisabled}
+                      readOnly={isReadOnly}
+                      onChange={(val) => fieldApi.handleChange(val)}
+                      parentData={form.state.values}
+                    />
+                  )}
+                </form.Field>
+              );
+            })}
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}