opacacms 0.1.0

package/src/admin/ui/components/media/AssetManagerModal.tsx

@@ -0,0 +1,334 @@
+import { useStore } from '@nanostores/react';
+import {
+  ChevronRight,
+  File,
+  FileText,
+  FolderPlus,
+  Image as ImageIcon,
+  Loader2,
+  Upload,
+  X,
+} from 'lucide-react';
+import React, { useMemo, useRef, useState } from 'react';
+import { api, getCurrentBaseURL } from '../../../api-client';
+import { $config } from '../../../stores/config';
+import {
+  $assets,
+  $mediaCurrentFolder,
+  $mediaSelectedBucket,
+  $mediaViewMode,
+  type AssetDoc,
+  setMediaBucket,
+  setMediaFolder,
+} from '../../../stores/media';
+import '../../styles/asset-manager.scss';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from '../ui';
+
+interface AssetManagerProps {
+  onSelect: (asset: {
+    assetId: string;
+    url: string;
+    filename: string;
+    mimeType: string;
+    filesize: number;
+  }) => void;
+  onClose: () => void;
+  allowedmime_types?: string[];
+  maxFileSize?: number;
+  bucket?: string;
+}
+
+export const AssetManagerModal: React.FC<AssetManagerProps> = ({
+  onSelect,
+  onClose,
+  allowedmime_types,
+  maxFileSize,
+  bucket = 'default',
+}) => {
+  const { data, loading: isLoading } = useStore($assets);
+  const selectedBucket = useStore($mediaSelectedBucket);
+  const currentFolder = useStore($mediaCurrentFolder);
+  const viewMode = useStore($mediaViewMode);
+  const config = useStore($config);
+
+  const [isUploading, setIsUploading] = useState<boolean>(false);
+  const [isDragActive, setIsDragActive] = useState<boolean>(false);
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const buckets = useMemo(() => {
+    return Object.keys(config?.storages || {});
+  }, [config?.storages]);
+
+  const assets = data?.docs || [];
+  const folders = data?.folders || [];
+
+  const handleUpload = async (file: File) => {
+    // ... same logic but use selectedBucket and currentFolder
+    if (allowedmime_types && !allowedmime_types.includes(file.type)) {
+      alert(`Invalid file type. Allowed: ${allowedmime_types.join(', ')}`);
+      return;
+    }
+    if (maxFileSize && file.size > maxFileSize) {
+      alert(`File too large. Max size: ${maxFileSize / 1024 / 1024}MB`);
+      return;
+    }
+
+    setIsUploading(true);
+
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+      const bucketToUse = selectedBucket === 'all' ? 'default' : selectedBucket;
+      const resp = await api
+        .post(
+          `api/__system/assets/upload?bucket=${bucketToUse}&folder=${currentFolder}`,
+          {
+            body: formData,
+            onDownloadProgress: (_progress: unknown) => {
+              // Ky uses onDownloadProgress, but xhr.upload.onprogress is for upload.
+            },
+          },
+        )
+        .json<AssetDoc>();
+
+      setIsUploading(false);
+      $assets.revalidate(); // Refresh the list
+      // Auto select the new file
+      onSelect({
+        assetId: resp.id,
+        url: resp.url || `${getCurrentBaseURL()}/api/assets/${resp.id}/view`,
+        filename: resp.filename,
+        mimeType: resp.mimeType || resp.mime_type || '',
+        filesize: resp.filesize,
+      });
+    } catch (err: unknown) {
+      alert(
+        `Upload failed: ${err instanceof Error ? err.message : 'Unknown error'}`,
+      );
+      setIsUploading(false);
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragActive(false);
+    if (
+      e.dataTransfer.files &&
+      e.dataTransfer.files.length > 0 &&
+      e.dataTransfer.files[0]
+    ) {
+      handleUpload(e.dataTransfer.files[0]);
+    }
+  };
+
+  const getFileIcon = (mime: string) => {
+    if (!mime) return <File size={40} className="text-gray-400" />;
+    if (mime.startsWith('image/'))
+      return <ImageIcon size={40} className="text-blue-400" />;
+    if (mime.startsWith('video/'))
+      return <FileText size={40} className="text-purple-400" />;
+    if (mime.includes('pdf'))
+      return <FileText size={40} className="text-red-400" />;
+    return <File size={40} className="text-gray-400" />;
+  };
+
+  return (
+    <div className="asset-manager-overlay">
+      <div className="asset-manager-container">
+        {/* Header */}
+        <div className="asset-manager-header">
+          <div>
+            <h2>Media Library</h2>
+            <div className="asset-manager-breadcrumbs">
+              <button type="button" onClick={() => setMediaFolder('')}>
+                Home
+              </button>
+              {currentFolder
+                .split('/')
+                .filter(Boolean)
+                .map((part: string, i: number, arr: string[]) => (
+                  <React.Fragment key={part || i}>
+                    <ChevronRight size={14} className="breadcrumb-separator" />
+                    <button
+                      type="button"
+                      onClick={() =>
+                        setMediaFolder(arr.slice(0, i + 1).join('/'))
+                      }
+                    >
+                      {part}
+                    </button>
+                  </React.Fragment>
+                ))}
+            </div>
+          </div>
+          <div className="header-actions">
+            <Select
+              value={selectedBucket}
+              onValueChange={(val: string) => setMediaBucket(val)}
+            >
+              <SelectTrigger className="bucket-selector">
+                <SelectValue placeholder="Bucket" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Buckets</SelectItem>
+                <SelectSeparator />
+                <SelectLabel>Storage</SelectLabel>
+                {buckets.map((b) => (
+                  <SelectItem key={b} value={b}>
+                    {b.toUpperCase()}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <button type="button" onClick={onClose} className="close-button">
+              <X size={20} />
+            </button>
+          </div>
+        </div>
+
+        {/* Upload Zone */}
+        <button
+          type="button"
+          onDragOver={(e) => {
+            e.preventDefault();
+            setIsDragActive(true);
+          }}
+          onDragLeave={() => setIsDragActive(false)}
+          onDrop={handleDrop}
+          onClick={() => !isUploading && fileInputRef.current?.click()}
+          aria-label="Upload file"
+          className={`asset-manager-upload-zone ${isDragActive ? 'is-drag-active' : ''} ${isUploading ? 'uploading' : ''}`}
+        >
+          <input
+            type="file"
+            ref={fileInputRef}
+            style={{ display: 'none' }}
+            accept={allowedmime_types?.join(',')}
+            onChange={(e) => {
+              if (
+                e.target.files &&
+                e.target.files.length > 0 &&
+                e.target.files[0]
+              ) {
+                handleUpload(e.target.files[0]);
+              }
+            }}
+          />
+          {isUploading ? (
+            <div className="uploading-status">
+              <Loader2 className="opaca-spin" size={24} />
+              <span className="status-text">Uploading...</span>
+            </div>
+          ) : (
+            <>
+              <Upload size={24} className="upload-icon" />
+              <p className="upload-prompt">
+                Drag & drop a file here, or <span>click to browse</span>.
+              </p>
+            </>
+          )}
+        </button>
+
+        {/* Grid */}
+        <div className="asset-manager-grid-container">
+          {isLoading ? (
+            <div className="loading-assets">
+              <Loader2 className="opaca-spin" size={32} />
+              <p>Loading assets...</p>
+            </div>
+          ) : assets.length === 0 && folders.length === 0 ? (
+            <div className="no-assets">
+              <ImageIcon size={48} className="empty-icon" />
+              <p>No assets found here.</p>
+            </div>
+          ) : (
+            <div className={`asset-manager-grid mode-${viewMode}`}>
+              {/* Folders */}
+              {folders.map((folder: any) => (
+                <button
+                  type="button"
+                  key={`folder-${folder.name}`}
+                  className="asset-manager-card folder-card"
+                  onClick={() =>
+                    setMediaFolder(
+                      currentFolder
+                        ? `${currentFolder}/${folder.name}`
+                        : folder.name,
+                    )
+                  }
+                >
+                  <div className="asset-thumb">
+                    <FolderPlus size={40} className="folder-icon" />
+                  </div>
+                  <div className="asset-info">
+                    <span className="filename">{folder.name}</span>
+                    <span className="file-meta">Folder</span>
+                  </div>
+                </button>
+              ))}
+
+              {/* Assets */}
+              {assets.map((asset: AssetDoc) => (
+                <button
+                  type="button"
+                  key={asset.id}
+                  className="asset-manager-card asset-card"
+                  onClick={() => {
+                    const baseUrl = getCurrentBaseURL();
+                    onSelect({
+                      assetId: asset.id,
+                      url: `${baseUrl}/api/assets/${asset.id}/view`,
+                      filename: asset.filename,
+                      mimeType: asset.mimeType || asset.mime_type || '',
+                      filesize: asset.filesize,
+                    });
+                  }}
+                >
+                  <div className="asset-thumb">
+                    {(() => {
+                      const mime = asset.mimeType || asset.mime_type;
+                      return mime?.startsWith('image/') ? (
+                        <img
+                          src={`${getCurrentBaseURL()}/api/assets/${asset.id}/view`}
+                          alt={asset.filename}
+                        />
+                      ) : (
+                        getFileIcon(mime || '')
+                      );
+                    })()}
+                  </div>
+
+                  <div className="asset-info">
+                    <span className="filename" title={asset.filename}>
+                      {asset.filename}
+                    </span>
+                    <span className="file-meta">
+                      {(asset.mimeType || asset.mime_type || '')
+                        .split('/')[1]
+                        ?.toUpperCase() || 'FILE'}{' '}
+                      • {((asset.filesize || 0) / 1024).toFixed(1)} KB
+                    </span>
+                  </div>
+
+                  <div className="selection-overlay">
+                    <div className="select-badge">Select</div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,72 @@
+import { CheckCircle, Info, X, XCircle } from "lucide-react";
+import { useEffect, useState } from "react";
+import type { ToastItem, ToastType } from "../../stores/ui";
+
+interface ToastProps extends ToastItem {
+  onClear: (id: string) => void;
+}
+
+export function Toast({ id, message, type, onClear }: ToastProps) {
+  const [isExiting, setIsExiting] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsExiting(true);
+      setTimeout(() => onClear(id), 200);
+    }, 4000);
+    return () => clearTimeout(timer);
+  }, [id, onClear]);
+
+  const Icon = type === "success" ? CheckCircle : type === "error" ? XCircle : Info;
+  const iconColor =
+    type === "success"
+      ? "var(--opaca-success)"
+      : type === "error"
+        ? "var(--opaca-error)"
+        : "var(--opaca-accent)";
+
+  return (
+    <div className={`opaca-toast opaca-toast-${type} ${isExiting ? "exit" : ""}`}>
+      <Icon size={18} style={{ color: iconColor }} />
+      <span className="opaca-toast-message">{message}</span>
+      <button
+        type="button"
+        onClick={() => {
+          setIsExiting(true);
+          setTimeout(() => onClear(id), 200);
+        }}
+        style={{
+          background: "none",
+          border: "none",
+          padding: "4px",
+          marginLeft: "auto",
+          cursor: "pointer",
+          color: "var(--opaca-text-dim)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <X size={14} />
+      </button>
+    </div>
+  );
+}
+
+export function ToastContainer({
+  toasts,
+  onClear,
+}: {
+  toasts: ToastItem[];
+  onClear: (id: string) => void;
+}) {
+  if (toasts.length === 0) return null;
+
+  return (
+    <div className="opaca-toast-container">
+      {toasts.map((toast) => (
+        <Toast key={toast.id} {...toast} onClear={onClear} />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { cn } from "./utils";
+import "../../styles/accordion.scss";
+
+interface AccordionProps {
+  title: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  className?: string;
+  isCollapsed?: boolean;
+}
+
+export const Accordion = ({
+  title,
+  children,
+  defaultOpen = true,
+  className,
+  isCollapsed = false,
+}: AccordionProps) => {
+  const [isOpen, setIsOpen] = React.useState(defaultOpen);
+
+  return (
+    <div className={cn("opaca-sidebar-accordion", className)}>
+      <button
+        type="button"
+        className="opaca-sidebar-accordion-trigger"
+        onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
+        style={{
+          opacity: isCollapsed ? 0 : 1,
+          pointerEvents: isCollapsed ? "none" : "auto",
+        }}
+        title={title}
+      >
+        <span className="opaca-sidebar-accordion-title">{title}</span>
+        <svg
+          className="opaca-sidebar-accordion-icon"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+        >
+          <title>Toggle accordion</title>
+          <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+      </button>
+      <div className="opaca-sidebar-accordion-content" data-state={isOpen ? "open" : "closed"}>
+        <div className="opaca-sidebar-accordion-content-inner">{children}</div>
+      </div>
+    </div>
+  );
+};

package/src/admin/ui/components/ui/alert-dialog.tsx

@@ -0,0 +1,98 @@
+import { Children, cloneElement, isValidElement, type ReactNode, useState } from "react";
+import { Button } from "./button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog";
+
+export interface AlertDialogProps {
+  children?: ReactNode;
+  trigger?: ReactNode;
+  title: string;
+  description: string;
+  onConfirm: () => void;
+  confirmText?: string;
+  cancelText?: string;
+  variant?: "default" | "destructive";
+}
+
+export function AlertDialog({
+  children,
+  trigger,
+  title,
+  description,
+  onConfirm,
+  confirmText = "Continue",
+  cancelText = "Cancel",
+  variant = "default",
+}: AlertDialogProps) {
+  const [open, setOpen] = useState(false);
+
+  const handleConfirm = () => {
+    onConfirm();
+    setOpen(false);
+  };
+
+  const triggerElement = trigger || children;
+
+  const renderTrigger = () => {
+    if (Children.count(triggerElement) === 1 && isValidElement(triggerElement)) {
+      const element = triggerElement as React.ReactElement<{
+        onClick?: (e: React.MouseEvent) => void;
+      }>;
+      return cloneElement(element, {
+        onClick: (e: React.MouseEvent) => {
+          const originalOnClick = element.props.onClick;
+          if (originalOnClick) originalOnClick(e);
+          setOpen(true);
+        },
+      });
+    }
+
+    return (
+      <span
+        role="button"
+        tabIndex={0}
+        onClick={() => setOpen(true)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setOpen(true);
+          }
+        }}
+        style={{
+          display: "inline-block",
+          cursor: "pointer",
+        }}
+      >
+        {triggerElement}
+      </span>
+    );
+  };
+
+  return (
+    <>
+      {renderTrigger()}
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="opaca-dialog-max-w">
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+            <DialogDescription>{description}</DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setOpen(false)}>
+              {cancelText}
+            </Button>
+            <Button variant={variant} onClick={handleConfirm}>
+              {confirmText}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

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

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { cn } from "./utils";
+
+export interface BlocksProps extends React.HTMLAttributes<HTMLDivElement> {
+  label?: string;
+}
+
+export const Blocks = React.forwardRef<HTMLDivElement, BlocksProps>(
+  ({ className, label, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn("opaca-ui-blocks", className)} {...props}>
+        {label && (
+          <div
+            style={{
+              marginBottom: "1.25rem",
+              fontSize: "0.75rem",
+              fontWeight: 500,
+              color: "var(--opaca-text-muted)",
+              textTransform: "uppercase",
+              letterSpacing: "0.03em",
+            }}
+          >
+            {label}
+          </div>
+        )}
+        <div style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>{children}</div>
+      </div>
+    );
+  },
+);
+
+Blocks.displayName = "Blocks";

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

@@ -0,0 +1,59 @@
+import { ChevronRight, Home } from 'lucide-react';
+import React from 'react';
+import { Link } from '../link';
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+export function Breadcrumbs({ items }: { items: BreadcrumbItem[] }) {
+  return (
+    <nav
+      aria-label="Breadcrumb"
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5rem',
+        marginBottom: '1.5rem',
+        fontSize: '0.8125rem',
+        color: 'var(--opaca-text-dim)',
+      }}
+    >
+      <Link
+        href="/admin"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          color: 'inherit',
+          textDecoration: 'none',
+          transition: 'color var(--opaca-transition)',
+        }}
+      >
+        <Home size={14} />
+      </Link>
+
+      {items.map((item, index) => (
+        <React.Fragment key={item.label || index}>
+          <ChevronRight size={12} style={{ opacity: 0.5 }} />
+          {item.href ? (
+            <Link
+              href={item.href}
+              style={{
+                color: 'inherit',
+                textDecoration: 'none',
+                transition: 'color var(--opaca-transition)',
+              }}
+            >
+              {item.label}
+            </Link>
+          ) : (
+            <span style={{ color: 'var(--opaca-text)', fontWeight: '500' }}>
+              {item.label}
+            </span>
+          )}
+        </React.Fragment>
+      ))}
+    </nav>
+  );
+}

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { cn } from "./utils";
+import "../../styles/button.scss";
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+  size?: "default" | "sm" | "lg" | "icon";
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = "default", size = "default", ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          "opaca-ui-btn",
+          `opaca-ui-btn-${variant}`,
+          `opaca-ui-btn-size-${size}`,
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";