opacacms 0.1.0

package/src/admin/ui/admin-client.tsx

@@ -0,0 +1,283 @@
+import { useStore } from '@nanostores/react';
+import { Loader2 } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import type { SerializableCollection, SerializableConfig } from '../../types';
+import { api, configureAPI } from '../api-client';
+import { configureAuth } from '../auth-client';
+import { $router } from '../router';
+import {
+  $isAuthPending,
+  $session,
+  login,
+  logout,
+  syncSession,
+} from '../stores/auth';
+import { $config, $needsInit, setConfig, setNeedsInit } from '../stores/config';
+import { $toasts, clearToast, notify } from '../stores/ui';
+import { AdminLayout } from './admin-layout';
+import { type BreadcrumbItem, Breadcrumbs } from './components/ui/breadcrumbs';
+import { ToastContainer } from './components/toast';
+import { CollectionListView } from './views/collection-list-view';
+// Generic Views
+import { DashboardView } from './views/dashboard-view';
+import { DocumentEditView } from './views/document-edit-view';
+import { GlobalEditView } from './views/global-edit-view';
+import { InitView } from './views/init-view';
+import { LoginView } from './views/login-view';
+import { MediaRegistryView } from './views/media-registry-view';
+import { SettingsView } from './views/settings-view';
+
+export interface AdminClientProps {
+  config: SerializableConfig | null;
+  serverUrl: string;
+  initialNeedsInit?: boolean;
+}
+
+export function AdminClient({
+  config: initialConfig,
+  serverUrl,
+  initialNeedsInit,
+}: AdminClientProps) {
+  const [isInitializing, setIsInitializing] = useState(true);
+
+  // Sync initial props to stores and configure clients
+  useEffect(() => {
+    if (!serverUrl || !serverUrl.startsWith('http')) return;
+
+    configureAPI(serverUrl);
+    configureAuth(serverUrl);
+    syncSession();
+
+    const init = async () => {
+      try {
+        // 1. Check setup status first (Independent check)
+        try {
+          if (initialNeedsInit !== undefined) {
+            setNeedsInit(initialNeedsInit);
+          } else {
+            const setup = await api
+              .get('api/__admin/setup')
+              .json<{ initialized: boolean }>();
+            console.log('[OpacaCMS] Setup status:', setup.initialized);
+            setNeedsInit(!setup.initialized);
+          }
+        } catch (setupErr) {
+          console.warn('[OpacaCMS] Failed to check setup status:', setupErr);
+        }
+
+        // 2. Fetch metadata
+        try {
+          if (initialConfig) {
+            setConfig(initialConfig);
+          } else {
+            const metadata = await api
+              .get('api/__admin/metadata')
+              .json<SerializableConfig>();
+            setConfig(metadata);
+          }
+        } catch (metaErr) {
+          console.warn(
+            '[OpacaCMS] Metadata fetch failed (expected if not logged in):',
+            metaErr,
+          );
+        }
+      } catch (err) {
+        console.error('[OpacaCMS] Unexpected initialization error:', err);
+      } finally {
+        setIsInitializing(false);
+      }
+    };
+
+    init();
+  }, [initialConfig, initialNeedsInit, serverUrl]);
+
+  const config = useStore($config);
+  const needsInit = useStore($needsInit);
+  const toasts = useStore($toasts);
+  const page = useStore($router);
+  const session = useStore($session);
+  const isPending = useStore($isAuthPending);
+
+  const handleLogin = async (data: Record<string, string>) => {
+    await login(data);
+  };
+
+  const handleLogout = async () => {
+    await logout();
+  };
+
+  const onDocumentBack = useCallback((slug: string) => {
+    $router.open(`/admin/collections/${slug}`);
+  }, []);
+
+  if (!serverUrl || !serverUrl.startsWith('http')) {
+    return (
+      <div className="opaca-admin">
+        <div className="opaca-loading-screen">
+          <div
+            style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}
+          >
+            <Loader2 size={24} className="opaca-spin" />
+            <span style={{ fontWeight: 500 }}>
+              Waiting for server configuration...
+            </span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (needsInit) {
+    return (
+      <div className="opaca-admin">
+        <InitView
+          onSuccess={() => {
+            setNeedsInit(false);
+            notify('Welcome! System initialized successfully');
+          }}
+        />
+      </div>
+    );
+  }
+
+  if (!isPending && !session) {
+    return (
+      <div className="opaca-admin">
+        <LoginView onLogin={handleLogin} />
+      </div>
+    );
+  }
+
+  if (isInitializing || isPending || !config) {
+    return (
+      <div className="opaca-admin">
+        <div className="opaca-loading-screen">
+          <div
+            style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}
+          >
+            <svg
+              className="opaca-spin"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>Loading</title>
+              <path
+                d="M12 2V6M12 18V22M6 12H2M22 12H18M18.36 5.64L15.53 8.47M8.47 15.53L5.64 18.36M18.36 18.36L15.53 15.53M8.47 8.47L5.64 5.64"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+              />
+            </svg>
+            <span style={{ fontWeight: 500 }}>Loading OpacaCMS...</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Build breadcrumbs based on route
+  const breadcrumbs: BreadcrumbItem[] = [];
+  if (page) {
+    if (page.route === 'collections') {
+      breadcrumbs.push({ label: 'Collections' });
+      const slug = page.params.slug;
+      const col = config.collections.find((c) => c.slug === slug);
+      breadcrumbs.push({
+        label: col?.label || slug.charAt(0).toUpperCase() + slug.slice(1),
+      });
+    } else if (page.route === 'document') {
+      breadcrumbs.push({ label: 'Collections' });
+      const slug = page.params.slug;
+      const col = config.collections.find((c) => c.slug === slug);
+      breadcrumbs.push({
+        label: col?.label || slug.charAt(0).toUpperCase() + slug.slice(1),
+        href: `/admin/collections/${slug}`,
+      });
+      breadcrumbs.push({
+        label: page.params.id === 'create' ? 'Create' : 'Edit',
+      });
+    } else if (page.route === 'globals') {
+      breadcrumbs.push({ label: 'Globals' });
+      const slug = page.params.slug;
+      breadcrumbs.push({ label: slug.charAt(0).toUpperCase() + slug.slice(1) });
+    } else if (page.route === 'settings') {
+      breadcrumbs.push({ label: 'Settings' });
+    }
+  }
+
+  const renderView = () => {
+    if (!page || page.route === 'dashboard') {
+      return <DashboardView config={config} user={session?.user} />;
+    }
+
+    if (page.route === 'collections') {
+      const slug = page.params.slug;
+      const collection = config.collections.find(
+        (c: SerializableCollection) => c.slug === slug,
+      );
+      if (!collection) return <div>Not Found</div>;
+
+      // `_opaca_assets` is always treated as the media registry view, regardless of apiPath
+      if (collection.slug === '_opaca_assets') {
+        return <MediaRegistryView collection={collection} config={config} />;
+      }
+
+      return <CollectionListView collection={collection} />;
+    }
+
+    if (page.route === 'document') {
+      const { slug, id } = page.params;
+      const collection = config.collections.find(
+        (c: SerializableCollection) => c.slug === slug,
+      );
+      if (!collection) return <div>Not Found</div>;
+      return (
+        <DocumentEditView
+          collection={collection}
+          id={id}
+          onBack={() => onDocumentBack(slug)}
+        />
+      );
+    }
+
+    if (page.route === 'globals') {
+      const slug = page.params.slug;
+      const globalConfig = config.globals?.find((g) => g.slug === slug);
+      if (!globalConfig) return <div>Not Found</div>;
+      return (
+        <GlobalEditView
+          global={globalConfig}
+          onBack={() => $router.open('/admin')}
+        />
+      );
+    }
+
+    if (page.route === 'settings') {
+      return <SettingsView config={config} />;
+    }
+
+    return <div>404</div>;
+  };
+
+  return (
+    <>
+      <AdminLayout config={config} user={session?.user} onLogout={handleLogout}>
+        <div
+          style={{
+            maxWidth: '70vw',
+            margin: '0 auto',
+            width: '100%',
+            paddingBottom: '4rem',
+          }}
+        >
+          {breadcrumbs.length > 0 && <Breadcrumbs items={breadcrumbs} />}
+          {renderView()}
+        </div>
+      </AdminLayout>
+      <ToastContainer toasts={toasts} onClear={clearToast} />
+    </>
+  );
+}

package/src/admin/ui/admin-layout.tsx

@@ -0,0 +1,276 @@
+import { useStore } from "@nanostores/react";
+import * as LucideIcons from "lucide-react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Database,
+  Globe,
+  Image,
+  LayoutDashboard,
+  LogOut,
+  Settings,
+} from "lucide-react";
+import type React from "react";
+import type { SerializableConfig } from "../../types";
+import { $router } from "../router";
+import { $isSidebarCollapsed, toggleSidebar } from "../stores/ui";
+import { Link } from "./components/link";
+import { Accordion, ScrollArea, Separator } from "./components/ui";
+import "./styles/index.scss";
+
+export interface AdminLayoutProps {
+  children: React.ReactNode;
+  config: SerializableConfig;
+  user?: {
+    name: string;
+    email: string;
+    image?: string | null;
+  } | null;
+  onLogout?: () => void;
+}
+
+export function AdminLayout({ children, config, user, onLogout }: AdminLayoutProps) {
+  const isCollapsed = useStore($isSidebarCollapsed);
+  const page = useStore($router);
+  const currentPath = page?.path || "/admin";
+
+  return (
+    <div className="opaca-admin">
+      <aside className={`opaca-sidebar ${isCollapsed ? "collapsed" : ""}`}>
+        <button
+          type="button"
+          className="opaca-sidebar-toggle"
+          onClick={toggleSidebar}
+          title={isCollapsed ? "Expand Sidebar" : "Collapse Sidebar"}
+        >
+          {isCollapsed ? <ChevronRight size={14} /> : <ChevronLeft size={14} />}
+        </button>
+
+        <div className="opaca-sidebar-inner">
+          <div className="opaca-logo" title={config.appName || "OpacaCMS"}>
+            {isCollapsed ? (
+              <div className="opaca-logo-mini">
+                {(config.appName || "OpacaCMS").charAt(0).toUpperCase()}
+              </div>
+            ) : (
+              config.appName || "OpacaCMS"
+            )}
+          </div>
+
+          <nav className="opaca-nav">
+            <Link
+              href="/admin"
+              className={`opaca-nav-item ${currentPath === "/admin" ? "active" : ""}`}
+              title="Dashboard"
+            >
+              <LayoutDashboard size={16} />
+              <span className="opaca-nav-label">Dashboard</span>
+            </Link>
+
+            {(() => {
+              const allCollections = config.collections
+                .filter((col) => !col.hidden)
+                .sort((a, b) => (a.admin === b.admin ? 0 : a.admin ? -1 : 1));
+
+              const userCollections = allCollections.filter((col) => !col.slug.startsWith("_"));
+              const systemCollections = allCollections.filter((col) => col.slug.startsWith("_"));
+
+              const renderCollection = (col: any) => {
+                const href = `/admin/collections/${col.slug}`;
+                const colLabel =
+                  col.label ||
+                  col.slug
+                    .replace(/^_+/, "")
+                    .replace(/_/g, " ")
+                    .replace(/\b\w/g, (c: string) => c.toUpperCase());
+                const isMedia = col.slug === "_opaca_assets";
+                const IconComponent =
+                  col.icon && col.icon in LucideIcons
+                    ? (LucideIcons as any)[col.icon]
+                    : isMedia
+                      ? Image
+                      : Database;
+
+                return (
+                  <Link
+                    key={col.slug}
+                    href={href}
+                    className={`opaca-nav-item ${currentPath.includes(href) ? "active" : ""}`}
+                    title={colLabel}
+                  >
+                    <IconComponent size={16} />
+                    <span className="opaca-nav-label">{colLabel}</span>
+                    {col.admin && !isCollapsed && (
+                      <div
+                        style={{
+                          width: "4px",
+                          height: "4px",
+                          borderRadius: "50%",
+                          backgroundColor: "var(--opaca-accent)",
+                          marginLeft: "auto",
+                          opacity: 0.8,
+                        }}
+                        title="Universal Collection"
+                      />
+                    )}
+                  </Link>
+                );
+              };
+
+              return (
+                <ScrollArea className="opaca-nav-scroll" style={{ flex: 1 }}>
+                  {userCollections.length > 0 && (
+                    <Accordion title="Collections" isCollapsed={isCollapsed}>
+                      {userCollections.map(renderCollection)}
+                    </Accordion>
+                  )}
+
+                  {userCollections.length > 0 && systemCollections.length > 0 && (
+                    <div style={{ margin: "0.75rem 0.75rem" }}>
+                      <Separator />
+                    </div>
+                  )}
+
+                  {systemCollections.length > 0 && (
+                    <Accordion title="System Collections" isCollapsed={isCollapsed}>
+                      {systemCollections.map(renderCollection)}
+                    </Accordion>
+                  )}
+
+                  {config.globals && config.globals.length > 0 && (
+                    <Accordion title="Globals" isCollapsed={isCollapsed}>
+                      {config.globals.map((g) => {
+                        const href = `/admin/globals/${g.slug}`;
+                        const label = g.label || g.slug.charAt(0).toUpperCase() + g.slug.slice(1);
+                        const IconComponent =
+                          g.icon && g.icon in LucideIcons ? (LucideIcons as any)[g.icon] : Globe;
+                        return (
+                          <Link
+                            key={g.slug}
+                            href={href}
+                            className={`opaca-nav-item ${currentPath === href ? "active" : ""}`}
+                            title={label}
+                          >
+                            <IconComponent size={16} />
+                            <span className="opaca-nav-label">{label}</span>
+                          </Link>
+                        );
+                      })}
+                    </Accordion>
+                  )}
+                </ScrollArea>
+              );
+            })()}
+          </nav>
+
+          <div className="opaca-nav-footer">
+            {user && (
+              <div
+                className="opaca-user-profile"
+                style={{
+                  padding: "0.75rem",
+                  borderBottom: "1px solid var(--opaca-border)",
+                  marginBottom: "0.5rem",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "0.75rem",
+                  justifyContent: isCollapsed ? "center" : "flex-start",
+                }}
+                title={`${user.name} (${user.email})`}
+              >
+                {user.image ? (
+                  <img
+                    src={user.image}
+                    alt={user.name}
+                    style={{
+                      width: "32px",
+                      height: "32px",
+                      borderRadius: "50%",
+                      objectFit: "cover",
+                    }}
+                  />
+                ) : (
+                  <div
+                    style={{
+                      width: "32px",
+                      height: "32px",
+                      minWidth: "32px",
+                      borderRadius: "50%",
+                      background: "var(--opaca-accent)",
+                      color: "white",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontSize: "0.75rem",
+                      fontWeight: "600",
+                    }}
+                  >
+                    {user.name.charAt(0).toUpperCase()}
+                  </div>
+                )}
+                {!isCollapsed && (
+                  <div style={{ overflow: "hidden" }}>
+                    <div
+                      style={{
+                        fontSize: "0.8125rem",
+                        fontWeight: "500",
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                      }}
+                    >
+                      {user.name}
+                    </div>
+                    <div
+                      style={{
+                        fontSize: "0.6875rem",
+                        color: "var(--opaca-text-dim)",
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                      }}
+                    >
+                      {user.email}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+
+            <Link
+              href="/admin/settings"
+              className={`opaca-nav-item ${currentPath === "/admin/settings" ? "active" : ""}`}
+              title="Settings"
+            >
+              <Settings size={16} />
+              <span className="opaca-nav-label">Settings</span>
+            </Link>
+            <button
+              type="button"
+              onClick={onLogout}
+              className="opaca-nav-item"
+              title="Logout"
+              style={{
+                width: "100%",
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                textAlign: "left",
+                fontFamily: "inherit",
+                fontSize: "inherit",
+                color: "var(--opaca-error)",
+              }}
+            >
+              <LogOut size={16} />
+              <span className="opaca-nav-label">Logout</span>
+            </button>
+          </div>
+        </div>
+      </aside>
+
+      <main className="opaca-content">
+        <div className="opaca-content-inner">{children}</div>
+      </main>
+    </div>
+  );
+}

package/src/admin/ui/components/ColumnVisibilityToggle.tsx

@@ -0,0 +1,141 @@
+import { useStore } from "@nanostores/react";
+import { Check, ChevronDown, Settings2 } from "lucide-react";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+import { $columnVisibility, toggleColumnVisibility } from "../../stores/column-visibility";
+
+interface ColumnVisibilityToggleProps {
+  slug: string;
+  fields: { name?: string; label?: string }[];
+}
+
+export const ColumnVisibilityToggle: React.FC<ColumnVisibilityToggleProps> = ({ slug, fields }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const visibility = useStore($columnVisibility);
+
+  const visibleColumns = visibility[slug] || [];
+  const selectableFields = fields.filter((f) => f.name);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  return (
+    <div className="opaca-column-toggle" ref={dropdownRef} style={{ position: "relative" }}>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="opaca-btn opaca-btn-outline"
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "0.5rem",
+          padding: "0.5rem 0.75rem",
+          fontSize: "0.875rem",
+        }}
+      >
+        <Settings2 size={16} />
+        Columns
+        <ChevronDown
+          size={14}
+          style={{
+            opacity: 0.5,
+            transform: isOpen ? "rotate(180deg)" : "none",
+            transition: "transform 0.2s",
+          }}
+        />
+      </button>
+
+      {isOpen && (
+        <div
+          className="opaca-card shadow-lg"
+          style={{
+            position: "absolute",
+            top: "calc(100% + 0.5rem)",
+            right: 0,
+            zIndex: 100,
+            minWidth: "200px",
+            padding: "0.5rem",
+            maxHeight: "300px",
+            overflowY: "auto",
+            border: "1px solid var(--opaca-border)",
+            backgroundColor: "var(--opaca-card-bg)",
+            borderRadius: "var(--opaca-radius)",
+          }}
+        >
+          <div
+            style={{
+              padding: "0.5rem",
+              fontSize: "0.75rem",
+              fontWeight: 600,
+              color: "var(--opaca-text-dim)",
+              borderBottom: "1px solid var(--opaca-border)",
+              marginBottom: "0.25rem",
+            }}
+          >
+            Toggle Columns
+          </div>
+          {selectableFields.map((field) => {
+            const isVisible = visibleColumns.includes(field.name!);
+            return (
+              <button
+                key={field.name}
+                type="button"
+                onClick={() => toggleColumnVisibility(slug, field.name!)}
+                style={{
+                  width: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "0.75rem",
+                  padding: "0.5rem 0.75rem",
+                  fontSize: "0.875rem",
+                  textAlign: "left",
+                  background: "none",
+                  border: "none",
+                  color: isVisible ? "var(--opaca-text)" : "var(--opaca-text-dim)",
+                  cursor: "pointer",
+                  borderRadius: "calc(var(--opaca-radius) - 4px)",
+                  transition: "background 0.2s",
+                }}
+                className="hover-bg"
+              >
+                <div
+                  style={{
+                    width: "16px",
+                    height: "16px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    border: isVisible
+                      ? "1px solid var(--opaca-primary)"
+                      : "1px solid var(--opaca-border)",
+                    backgroundColor: isVisible ? "var(--opaca-primary)" : "transparent",
+                    borderRadius: "4px",
+                    color: "white",
+                  }}
+                >
+                  {isVisible && <Check size={12} strokeWidth={3} />}
+                </div>
+                <span style={{ flex: 1 }}>{field.label || field.name}</span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      <style>{`
+        .hover-bg:hover {
+          background-color: var(--opaca-panel-bg) !important;
+        }
+      `}</style>
+    </div>
+  );
+};