opacacms 0.1.1 → 0.1.2

package/src/admin/stores/column-visibility.ts

@@ -1,67 +0,0 @@
-import { persistentAtom } from "@nanostores/persistent";
-
-/**
- * Stores column visibility preferences per collection.
- * Key: collection slug
- * Value: JSON string of string[] containing visible field names
- */
-export const $columnVisibility = persistentAtom<Record<string, string[]>>(
-  "opaca-column-visibility",
-  {},
-  {
-    encode: JSON.stringify,
-    decode: JSON.parse,
-  },
-);
-
-/**
- * Toggle visibility of a column in a collection
- */
-export function toggleColumnVisibility(slug: string, fieldName: string) {
-  const current = $columnVisibility.get();
-  const visibleColumns = current[slug] || [];
-
-  const nextVisibleColumns = visibleColumns.includes(fieldName)
-    ? visibleColumns.filter((col) => col !== fieldName)
-    : [...visibleColumns, fieldName];
-
-  $columnVisibility.set({
-    ...current,
-    [slug]: nextVisibleColumns,
-  });
-}
-
-/**
- * Set visible columns for a collection
- */
-export function setVisibleColumns(slug: string, columns: string[]) {
-  const current = $columnVisibility.get();
-  $columnVisibility.set({
-    ...current,
-    [slug]: columns,
-  });
-}
-
-/**
- * Initialize column visibility for a collection if not already set.
- * Uses defaultColumns from config or all available named fields.
- */
-export function initColumnVisibility(
-  slug: string,
-  fields: { name?: string }[],
-  defaultColumns?: string[],
-) {
-  const current = $columnVisibility.get();
-  if (current[slug]) return; // Already initialized
-
-  // If defaultColumns is provided, use it. Otherwise use all named fields.
-  const initialColumns =
-    defaultColumns && defaultColumns.length > 0
-      ? defaultColumns
-      : fields.filter((f) => f.name).map((f) => f.name!);
-
-  $columnVisibility.set({
-    ...current,
-    [slug]: initialColumns,
-  });
-}

package/src/admin/stores/config.ts

@@ -1,15 +0,0 @@
-import { atom } from "nanostores";
-import type { SerializableConfig } from "../../types";
-
-export const $config = atom<SerializableConfig | null>(null);
-export const $needsInit = atom<boolean>(false);
-export const $isFetchingConfig = atom<boolean>(false);
-export const $hasMetadataError = atom<boolean>(false);
-
-export function setConfig(config: SerializableConfig | null) {
-  $config.set(config);
-}
-
-export function setNeedsInit(needs: boolean) {
-  $needsInit.set(needs);
-}

package/src/admin/stores/media.ts

@@ -1,95 +0,0 @@
-import { persistentAtom } from "@nanostores/persistent";
-import { atom, computed } from "nanostores";
-import { api } from "../api-client";
-import { createFetcherStore } from "./query";
-
-export interface AssetDoc {
-  id: string;
-  key: string;
-  filename: string;
-  originalFilename: string;
-  original_filename?: string;
-  mimeType: string;
-  mime_type?: string;
-  filesize: number;
-  bucket: string;
-  folder: string | null;
-  altText: string | null;
-  alt_text?: string | null;
-  caption: string | null;
-  createdAt: string;
-  updatedAt: string;
-  created_at?: string;
-  updated_at?: string;
-  url?: string;
-  thumbnailUrl?: string;
-}
-
-export interface AssetRegistryData {
-  docs: AssetDoc[];
-  folders: { name: string; buckets: string[] }[];
-  totalDocs: number;
-  limit: number;
-  page: number;
-  totalPages: number;
-}
-
-// Persistent Preferences
-export const $mediaViewMode = persistentAtom<"grid" | "list">("opaca-media-view-mode", "grid");
-export const $mediaSelectedBucket = persistentAtom<string>("opaca-media-selected-bucket", "all");
-export const $bucketColors = persistentAtom<Record<string, string>>(
-  "opaca-bucket-colors",
-  {},
-  {
-    encode: JSON.stringify,
-    decode: JSON.parse,
-  },
-);
-
-// Ephemeral UI State
-export const $mediaCurrentFolder = atom<string>("");
-export const $mediaSearch = atom<string>("");
-export const $mediaPage = atom<number>(1);
-
-// Reactive fetcher based on state
-export const $assets = createFetcherStore<AssetRegistryData>(
-  ["api/__system/assets", $mediaSelectedBucket, $mediaCurrentFolder, $mediaSearch, $mediaPage],
-  {
-    fetcher: (base, bucket, folder, search, page) => {
-      const params = new URLSearchParams({
-        bucket: String(bucket),
-        folder: String(folder),
-        search: String(search),
-        page: String(page),
-        limit: "20",
-      });
-      return api.get(`${base}?${params.toString()}`).json();
-    },
-  },
-);
-
-// Actions
-export const setMediaBucket = (bucket: string) => {
-  $mediaSelectedBucket.set(bucket);
-  $mediaCurrentFolder.set(""); // Reset folder when bucket changes to avoid cross-bucket path issues
-  $mediaPage.set(1); // Reset page on filter change
-};
-
-export const setMediaFolder = (folder: string) => {
-  $mediaCurrentFolder.set(folder);
-  $mediaPage.set(1);
-};
-
-export const setMediaSearch = (search: string) => {
-  $mediaSearch.set(search);
-  $mediaPage.set(1);
-};
-
-export const setMediaPage = (page: number) => {
-  $mediaPage.set(page);
-};
-
-export const setBucketColor = (bucket: string, color: string) => {
-  const current = $bucketColors.get();
-  $bucketColors.set({ ...current, [bucket]: color });
-};

package/src/admin/stores/query.ts

@@ -1,13 +0,0 @@
-import { nanoquery } from "@nanostores/query";
-import { api } from "../api-client";
-
-export const [
-  createFetcherStore,
-  createMutatorStore,
-  { invalidateKeys, revalidateKeys, mutateCache },
-] = nanoquery({
-  fetcher: (...keys) => {
-    const url = keys.join("");
-    return api.get(url).json();
-  },
-});

package/src/admin/stores/ui.ts

@@ -1,29 +0,0 @@
-import { persistentAtom } from "@nanostores/persistent";
-import { atom } from "nanostores";
-
-export interface ToastItem {
-  id: string;
-  message: string;
-  type: "success" | "error" | "info";
-}
-
-export type ToastType = ToastItem["type"];
-
-export const $toasts = atom<ToastItem[]>([]);
-export const $isSidebarCollapsed = persistentAtom<boolean>("opaca-sidebar-collapsed", false, {
-  encode: JSON.stringify,
-  decode: JSON.parse,
-});
-
-export function toggleSidebar() {
-  $isSidebarCollapsed.set(!$isSidebarCollapsed.get());
-}
-
-export function notify(message: string, type: ToastItem["type"] = "success") {
-  const id = Math.random().toString(36).substring(2, 9);
-  $toasts.set([...$toasts.get(), { id, message, type }]);
-}
-
-export function clearToast(id: string) {
-  $toasts.set($toasts.get().filter((t) => t.id !== id));
-}

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

@@ -1,283 +0,0 @@
-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} />
-    </>
-  );
-}