opacacms 0.1.12 → 0.1.13

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

@@ -1,334 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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";