@rimelight/cms 0.0.2 → 0.0.3

package/src/admin/pages/pages-edit.astro

@@ -0,0 +1,595 @@
+---
+import ParentLayout from "virtual:rimelight-cms/parent-layout";
+import RLAButton from "@rimelight/ui/components/button/RLAButton.astro";
+import RLABadge from "@rimelight/ui/components/badge/RLABadge.astro";
+import RLAIcon from "@rimelight/ui/components/icon/RLAIcon.astro";
+import RLADropdownMenu from "@rimelight/ui/components/dropdown-menu/RLADropdownMenu.astro";
+import RLAModal from "@rimelight/ui/components/modal/RLAModal.astro";
+import { db } from "virtual:rimelight-cms/db";
+import { pages, pageDrafts } from "../../schema";
+import { eq } from "drizzle-orm";
+import { getRelativeLocaleUrl } from "@rimelight/i18n";
+import { RimelightEditorLayout, RimelightPropertiesPanel, RimelightPreview } from "../../client/components";
+import "../../client/styles/cms-editor.css";
+
+export const prerender = false;
+
+const currentLocale = Astro.currentLocale ?? "en";
+const id = Astro.params.id;
+
+let page: any = null;
+let draft: any = null;
+
+if (db && id) {
+  try {
+    const pageResult = await db.select().from(pages).where(eq(pages.id, id as any)).limit(1);
+    page = pageResult[0] || null;
+    if (page) {
+      const draftResult = await db.select().from(pageDrafts).where(eq(pageDrafts.pageId, id as any)).limit(1);
+      draft = draftResult[0] || null;
+    }
+  } catch (err) {
+    console.warn("Failed to load page for edit:", err);
+  }
+}
+
+if (!page) {
+  return Astro.redirect(getRelativeLocaleUrl(currentLocale, "/cms/pages"));
+}
+
+let rawContent: any = draft?.content || page.content || {};
+if (typeof rawContent === "string") {
+  try {
+    rawContent = JSON.parse(rawContent);
+  } catch {
+    rawContent = {};
+  }
+}
+if (rawContent && rawContent.content) {
+  rawContent = rawContent.content;
+}
+
+const extractedBlocks = Array.isArray(rawContent?.blocks)
+  ? rawContent.blocks
+  : Array.isArray(rawContent)
+  ? rawContent
+  : [];
+
+const titleVal =
+  typeof page.title === "object" && page.title !== null
+    ? (page.title as Record<string, string>)[currentLocale] || (page.title as Record<string, string>).en || ""
+    : String(page.title || "");
+
+const descVal =
+  typeof page.description === "object" && page.description !== null
+    ? (page.description as Record<string, string>)[currentLocale] || (page.description as Record<string, string>).en || ""
+    : String(page.description || "");
+
+const pageType = (page as any).type || "blog";
+const initialProperties = rawContent?.properties || {};
+const heroImage = initialProperties?.heroImage || (page as any).banner?.src || "";
+const viewUrl = page.type === "blog" ? getRelativeLocaleUrl(currentLocale, `/blog/${page.slug}`) : getRelativeLocaleUrl(currentLocale, `/${page.slug}`);
+const isPublished = !!page.publishedVersionId;
+---
+
+<ParentLayout title={`Edit: ${titleVal || 'Untitled Page'}`} description="CMS Page Editor">
+  <div class="flex flex-col h-screen overflow-hidden bg-background text-foreground select-none">
+    <!-- Top Header Bar -->
+    <header class="h-12 w-full bg-elevated/70 flex items-center justify-between px-4 border-b border-default shrink-0 z-30">
+      <div class="flex items-center gap-2.5">
+        <RLAButton
+          href={getRelativeLocaleUrl(currentLocale, "/cms/pages")}
+          variant="ghost"
+          color="neutral"
+          size="xs"
+          leadingIcon="i-lucide-arrow-left"
+          class="!px-2"
+        >
+          Pages
+        </RLAButton>
+
+        <span class="w-px h-4 bg-default" />
+
+        <div class="flex items-center gap-1.5 text-xs text-muted font-medium whitespace-nowrap overflow-hidden max-w-[200px] sm:max-w-xs">
+          <span>Editing:</span>
+          <span id="header-page-title" class="font-semibold text-highlighted truncate">{titleVal || "Untitled Page"}</span>
+        </div>
+
+        <span class="w-px h-4 bg-default" />
+
+        <div class="flex items-center gap-1">
+          <RLAButton id="undo-btn" size="xs" square variant="ghost" color="neutral" leadingIcon="i-lucide-rotate-ccw" aria-label="Undo" />
+          <RLAButton id="redo-btn" size="xs" square variant="ghost" color="neutral" leadingIcon="i-lucide-rotate-cw" aria-label="Redo" />
+        </div>
+
+        <RLABadge id="save-status-indicator" variant="soft" color="emerald" size="xs">
+          ● Saved
+        </RLABadge>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <RLAButton
+          href={viewUrl}
+          target="_blank"
+          variant="ghost"
+          color="neutral"
+          size="xs"
+          leadingIcon="i-lucide-external-link"
+        >
+          <span class="hidden sm:inline">View Page</span>
+        </RLAButton>
+
+        <RLAButton
+          id="preview-btn"
+          variant="ghost"
+          color="neutral"
+          size="xs"
+          leadingIcon="i-lucide-eye"
+        >
+          <span class="hidden sm:inline">Preview</span>
+        </RLAButton>
+
+        <span class="w-px h-4 bg-default hidden sm:block" />
+
+        <RLAButton
+          id="publish-btn"
+          variant="outline"
+          color="neutral"
+          size="xs"
+          leadingIcon="i-lucide-globe"
+        >
+          {isPublished ? "Unpublish" : "Publish"}
+        </RLAButton>
+
+        <RLAButton
+          id="save-btn"
+          variant="solid"
+          color="primary"
+          size="xs"
+          leadingIcon="i-lucide-save"
+        >
+          Save
+        </RLAButton>
+
+        <RLADropdownMenu
+          size="xs"
+          content={{ align: "end" }}
+          items={[
+            {
+              id: "open-review-diffs-item",
+              label: "Review & Diffs...",
+              icon: "i-lucide-git-compare",
+              href: getRelativeLocaleUrl(currentLocale, `/cms/pages/${id}/review`)
+            },
+            {
+              id: "open-guest-preview-item",
+              label: "Live Guest Preview...",
+              icon: "i-lucide-share-2",
+              href: getRelativeLocaleUrl(currentLocale, `/cms/pages/${id}/preview`)
+            },
+            {
+              id: "open-delete-dialog-item",
+              label: "Delete Page...",
+              icon: "i-lucide-trash-2",
+              color: "error"
+            }
+          ]}
+        />
+      </div>
+    </header>
+
+    <!-- Main Workspace Split Container -->
+    <div id="split-container" class="flex w-full min-h-0 flex-1 overflow-hidden relative select-text">
+      <!-- Editor Pane (Left Column) -->
+      <div id="editor-pane" class="relative overflow-y-auto p-6 flex-1 w-full min-w-0">
+        <div class="max-w-7xl mx-auto flex flex-col py-2 w-full gap-6">
+          <!-- Banner Container -->
+          <div class="w-full relative group/banner aspect-[5/1] rounded-xl overflow-hidden bg-elevated/40 border border-default flex items-center justify-center">
+            <img
+              id="banner-img"
+              src={heroImage}
+              alt="Banner"
+              class={`absolute inset-0 size-full object-cover transition-opacity ${heroImage ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
+            />
+            <div
+              id="banner-placeholder"
+              class={`flex flex-col items-center justify-center text-dimmed gap-1.5 opacity-50 hover:opacity-100 transition cursor-pointer ${heroImage ? 'hidden' : 'flex'}`}
+            >
+              <RLAIcon name="i-lucide-image" class="size-8" />
+              <span class="text-xs uppercase font-bold tracking-wider">Add Banner</span>
+            </div>
+            
+            <div class="absolute top-3 right-3 flex items-center gap-2 opacity-0 group-hover/banner:opacity-100 transition">
+              <RLAButton id="change-banner-btn" size="xs" variant="solid" color="neutral" leadingIcon="i-lucide-edit-2">
+                Change
+              </RLAButton>
+              <RLAButton id="remove-banner-btn" size="xs" square variant="solid" color="error" leadingIcon="i-lucide-trash" aria-label="Remove Banner" />
+            </div>
+          </div>
+
+          <!-- Banner Image URL Dialog -->
+          <dialog
+            id="banner-url-dialog"
+            class="fixed inset-0 z-50 m-auto w-full max-w-sm rounded-xl border border-default bg-default p-6 shadow-2xl backdrop:bg-black/60 backdrop:backdrop-blur-sm"
+          >
+            <h3 class="text-base font-semibold text-highlighted mb-4">Banner Image URL</h3>
+            <div class="flex flex-col gap-3">
+              <input
+                id="banner-url-input"
+                type="url"
+                placeholder="https://..."
+                class="w-full rounded-md border border-default bg-elevated px-3 py-2 text-sm text-highlighted placeholder:text-dimmed focus:outline-none focus:ring-2 focus:ring-primary/50"
+              />
+              <div class="flex justify-end gap-2 pt-1">
+                <button
+                  id="banner-dialog-remove"
+                  type="button"
+                  class="hidden px-3 py-1.5 text-xs font-medium rounded-md text-error-500 hover:bg-error-500/10 transition border border-error-500/30"
+                >Remove</button>
+                <div class="flex gap-2 ml-auto">
+                  <button
+                    id="banner-dialog-cancel"
+                    type="button"
+                    class="px-3 py-1.5 text-xs font-medium rounded-md border border-default text-highlighted hover:bg-elevated transition"
+                  >Cancel</button>
+                  <button
+                    id="banner-dialog-apply"
+                    type="button"
+                    class="px-3 py-1.5 text-xs font-semibold rounded-md bg-primary text-white hover:bg-primary/90 transition"
+                  >Apply</button>
+                </div>
+              </div>
+            </div>
+          </dialog>
+
+          <!-- Title and Description Header -->
+          <div class="border-b border-default pb-4 flex flex-col gap-2">
+            <input
+              id="page-title-input"
+              type="text"
+              value={titleVal}
+              placeholder="Page Title"
+              class="w-full text-4xl font-bold bg-transparent border-0 focus:ring-0 focus:outline-none p-0 text-highlighted"
+            />
+            <textarea
+              id="page-desc-input"
+              rows="2"
+              placeholder="Add a description..."
+              class="w-full text-lg text-dimmed bg-transparent border-0 focus:ring-0 focus:outline-none p-0 resize-none mt-1"
+            >{descVal}</textarea>
+          </div>
+
+          <!-- 24-Column Grid: Properties (8) + Content (16) -->
+          <div class="grid grid-cols-1 lg:grid-cols-24 gap-8 items-start w-full">
+            <div class="order-1 lg:order-2 lg:col-span-8 xl:col-span-7 flex flex-col gap-4">
+              <div class="sticky top-4">
+                <RimelightPropertiesPanel
+                  client:only="solid"
+                  pageType={pageType}
+                  initialProperties={initialProperties}
+                  class="w-full"
+                />
+              </div>
+            </div>
+
+            <div class="order-2 lg:order-1 lg:col-span-16 xl:col-span-17 flex flex-col gap-6 w-full min-w-0">
+              <div id="cms-editor-layout" class="w-full">
+                <RimelightEditorLayout
+                  client:only="solid"
+                  pageId={id!}
+                  initialBlocks={extractedBlocks}
+                  showInternalPreview={false}
+                />
+              </div>
+
+              <div class="flex flex-col gap-1 text-xs text-dimmed pt-4 mt-6">
+                <span class="font-bold text-highlighted">Metadata</span>
+                <span>ID: {page.id}</span>
+                {page.createdAt && <span>Created: {new Date(page.createdAt).toLocaleString(currentLocale)}</span>}
+                {page.updatedAt && <span>Updated: {new Date(page.updatedAt).toLocaleString(currentLocale)}</span>}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Resizer Handle -->
+      <div id="split-drag-handle" class="hidden cms-resize-handle" title="Drag to resize">
+        <div class="cms-resize-pill" />
+      </div>
+
+      <!-- Live Preview Column -->
+      <div id="preview-pane" class="hidden flex-col h-full overflow-y-auto border-l border-default shrink-0">
+        <div id="preview-content-container" class="w-full h-full">
+          <RimelightPreview
+            client:only="solid"
+            blocks={extractedBlocks}
+            title={titleVal}
+            description={descVal}
+            banner={heroImage}
+            category={initialProperties?.category}
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Delete Confirmation Modal -->
+  <RLAModal
+    id="delete-page-modal"
+    size="sm"
+    title="Delete Page"
+    description={`Are you sure you want to delete "${titleVal || 'Untitled Page'}"? This action cannot be undone.`}
+  >
+    <div slot="footer" class="flex justify-end gap-2">
+      <RLAButton
+        id="cancel-delete-page-btn"
+        variant="outline"
+        color="neutral"
+        size="sm"
+        data-dialog-close="delete-page-modal"
+      >
+        Cancel
+      </RLAButton>
+      <RLAButton id="confirm-delete-page-btn" variant="solid" color="error" size="sm">
+        Delete Page
+      </RLAButton>
+    </div>
+  </RLAModal>
+
+  <script is:inline id="initial-properties-data" type="application/json" set:html={JSON.stringify(initialProperties)} />
+  <script is:inline id="initial-page-data" type="application/json" set:html={JSON.stringify({ id: page.id, slug: page.slug, title: titleVal, description: descVal, banner: heroImage, isPublished, pageType })} />
+
+  <script>
+    import { initSplitPane } from "../../client/utils/splitpane";
+
+    const initialData = JSON.parse(document.getElementById('initial-page-data')?.textContent || '{}');
+    const initialProps = JSON.parse(document.getElementById('initial-properties-data')?.textContent || '{}');
+    (window as any).cmsPageProperties = initialProps;
+
+    const titleInput = document.getElementById('page-title-input') as HTMLInputElement | null;
+    const descInput = document.getElementById('page-desc-input') as HTMLTextAreaElement | null;
+    const headerTitle = document.getElementById('header-page-title');
+    const bannerImg = document.getElementById('banner-img') as HTMLImageElement | null;
+    const bannerPlaceholder = document.getElementById('banner-placeholder');
+
+    const splitContainer = document.getElementById('split-container');
+    const editorPane = document.getElementById('editor-pane');
+    const previewPane = document.getElementById('preview-pane');
+    const dragHandle = document.getElementById('split-drag-handle');
+    const previewBtn = document.getElementById('preview-btn');
+
+    let isPreviewOpen = false;
+    let cleanupSplitPane: (() => void) | null = null;
+
+    const broadcastMeta = () => {
+      document.dispatchEvent(new CustomEvent('page-meta-change', {
+        detail: {
+          title: titleInput?.value || '',
+          description: descInput?.value || '',
+          banner: (window as any).cmsPageProperties?.heroImage || '',
+          category: (window as any).cmsPageProperties?.category || ''
+        }
+      }));
+    };
+
+    const togglePreview = (forcedState?: boolean) => {
+      isPreviewOpen = typeof forcedState === 'boolean' ? forcedState : !isPreviewOpen;
+      
+      if (isPreviewOpen) {
+        editorPane?.style.setProperty('flex', '0 0 50%');
+        editorPane?.style.setProperty('width', '50%');
+        previewPane?.style.setProperty('flex', '0 0 50%');
+        previewPane?.style.setProperty('width', '50%');
+        previewPane?.classList.remove('hidden');
+        previewPane?.classList.add('flex');
+        dragHandle?.classList.remove('hidden');
+        dragHandle?.classList.add('flex');
+
+        if (splitContainer && editorPane && previewPane && dragHandle) {
+          cleanupSplitPane = initSplitPane(splitContainer, editorPane, previewPane, dragHandle);
+        }
+        broadcastMeta();
+      } else {
+        if (cleanupSplitPane) {
+          cleanupSplitPane();
+          cleanupSplitPane = null;
+        }
+        editorPane?.style.setProperty('flex', '1 1 100%');
+        editorPane?.style.setProperty('width', '100%');
+        previewPane?.classList.add('hidden');
+        previewPane?.classList.remove('flex');
+        dragHandle?.classList.add('hidden');
+        dragHandle?.classList.remove('flex');
+      }
+    };
+
+    previewBtn?.addEventListener('click', () => togglePreview());
+
+    titleInput?.addEventListener('input', () => {
+      if (headerTitle && titleInput) {
+        headerTitle.textContent = titleInput.value || 'Untitled Page';
+      }
+      broadcastMeta();
+    });
+
+    descInput?.addEventListener('input', () => {
+      broadcastMeta();
+    });
+
+    const setBanner = (url: string) => {
+      (window as any).cmsPageProperties = { ...(window as any).cmsPageProperties, heroImage: url };
+      if (bannerImg) {
+        bannerImg.src = url;
+        bannerImg.classList.toggle('opacity-100', !!url);
+        bannerImg.classList.toggle('opacity-0', !url);
+        bannerImg.classList.toggle('pointer-events-none', !url);
+      }
+      if (bannerPlaceholder) {
+        bannerPlaceholder.classList.toggle('hidden', !!url);
+        bannerPlaceholder.classList.toggle('flex', !url);
+      }
+      broadcastMeta();
+    };
+
+    const bannerDialog = document.getElementById('banner-url-dialog') as HTMLDialogElement | null;
+    const bannerUrlInput = document.getElementById('banner-url-input') as HTMLInputElement | null;
+    const bannerDialogRemove = document.getElementById('banner-dialog-remove');
+    const bannerDialogCancel = document.getElementById('banner-dialog-cancel');
+    const bannerDialogApply = document.getElementById('banner-dialog-apply');
+
+    const openBannerDialog = (current = '') => {
+      if (!bannerDialog || !bannerUrlInput) return;
+      bannerUrlInput.value = current;
+      if (bannerDialogRemove) bannerDialogRemove.classList.toggle('hidden', !current);
+      bannerDialog.showModal();
+      setTimeout(() => bannerUrlInput.focus(), 50);
+    };
+
+    bannerDialogCancel?.addEventListener('click', () => bannerDialog?.close());
+    bannerDialogApply?.addEventListener('click', () => {
+      const url = bannerUrlInput?.value?.trim() || '';
+      setBanner(url);
+      bannerDialog?.close();
+    });
+    bannerDialogRemove?.addEventListener('click', () => {
+      setBanner('');
+      bannerDialog?.close();
+    });
+    bannerUrlInput?.addEventListener('keydown', (e: KeyboardEvent) => {
+      if (e.key === 'Enter') { e.preventDefault(); bannerDialogApply?.click(); }
+      if (e.key === 'Escape') { bannerDialog?.close(); }
+    });
+    bannerDialog?.addEventListener('click', (e: MouseEvent) => {
+      if (e.target === bannerDialog) bannerDialog.close();
+    });
+
+    document.getElementById('banner-placeholder')?.addEventListener('click', () => openBannerDialog(''));
+    document.getElementById('change-banner-btn')?.addEventListener('click', () => {
+      openBannerDialog((window as any).cmsPageProperties?.heroImage || '');
+    });
+    document.getElementById('remove-banner-btn')?.addEventListener('click', () => setBanner(''));
+
+    const getLayout = () => (window as any).cmsEditorLayout || (document.getElementById('cms-editor-layout') as any);
+
+    document.getElementById('undo-btn')?.addEventListener('click', () => getLayout()?.undo?.());
+    document.getElementById('redo-btn')?.addEventListener('click', () => getLayout()?.redo?.());
+
+    document.addEventListener('properties-change', (e: Event) => {
+      if (e instanceof CustomEvent && e.detail?.properties) {
+        (window as any).cmsPageProperties = e.detail.properties;
+      }
+    });
+
+    const savePage = async () => {
+      const saveBtn = document.getElementById('save-btn') as HTMLButtonElement | null;
+      const layout = getLayout();
+      if (!layout) return;
+
+      const pageId = initialData.id;
+      const blocks = layout.getBlocks ? await layout.getBlocks() : [];
+      const properties = (window as any).cmsPageProperties || {};
+      const title = titleInput?.value || initialData.title || '';
+      const description = descInput?.value || initialData.description || '';
+      const content = { blocks, properties };
+
+      try {
+        if (saveBtn) saveBtn.disabled = true;
+        const res = await fetch(`/api/cms/pages/${pageId}`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            title: { en: title },
+            description: { en: description },
+            content
+          })
+        });
+        if (res.ok) {
+          const indicator = document.getElementById('save-status-indicator');
+          if (indicator) indicator.textContent = '● Saved';
+        } else {
+          alert('Failed to save page');
+        }
+      } catch {
+        alert('Network error saving page');
+      } finally {
+        if (saveBtn) saveBtn.disabled = false;
+      }
+    };
+
+    document.getElementById('save-btn')?.addEventListener('click', savePage);
+
+    document.getElementById('publish-btn')?.addEventListener('click', async () => {
+      const publishBtn = document.getElementById('publish-btn') as HTMLButtonElement | null;
+      const layout = getLayout();
+      if (!layout) { alert('Editor not loaded'); return; }
+
+      const pageId = initialData.id;
+      const blocks = layout.getBlocks ? await layout.getBlocks() : [];
+      const properties = (window as any).cmsPageProperties || {};
+      const title = titleInput?.value || initialData.title || '';
+      const description = descInput?.value || initialData.description || '';
+      const content = { blocks, properties };
+
+      try {
+        if (publishBtn) publishBtn.disabled = true;
+        await fetch(`/api/cms/pages/${pageId}`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            title: { en: title },
+            description: { en: description },
+            content
+          })
+        });
+
+        const isUnpublish = publishBtn?.textContent?.trim() === 'Unpublish';
+        const endpoint = isUnpublish ? `/api/cms/pages/${pageId}/unpublish` : `/api/cms/pages/${pageId}/publish`;
+        const res = await fetch(endpoint, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ content, changeSummary: isUnpublish ? 'Unpublished from editor' : 'Published from editor' })
+        });
+
+        if (res.ok) {
+          alert(isUnpublish ? 'Page unpublished!' : 'Page published successfully!');
+          window.location.reload();
+        } else {
+          const errorData = (await res.json().catch(() => ({}))) as { error?: string };
+          alert(`Failed: ${errorData.error || 'Unknown error'}`);
+        }
+      } catch {
+        alert('Network error');
+      } finally {
+        if (publishBtn) publishBtn.disabled = false;
+      }
+    });
+
+    const deleteModalDialog = document.querySelector('#delete-page-modal dialog') as HTMLDialogElement | null;
+    const confirmDeletePageBtn = document.getElementById('confirm-delete-page-btn');
+
+    document.addEventListener('click', (e) => {
+      const target = e.target as HTMLElement | null;
+      const deleteItem = target?.closest('[data-item-id="open-delete-dialog-item"]');
+      if (deleteItem && deleteModalDialog) {
+        deleteModalDialog.showModal();
+      }
+    });
+
+    confirmDeletePageBtn?.addEventListener('click', async () => {
+      try {
+        if (confirmDeletePageBtn) (confirmDeletePageBtn as HTMLButtonElement).disabled = true;
+        const res = await fetch(`/api/cms/pages/${initialData.id}`, { method: 'DELETE' });
+        if (res.ok) {
+          window.location.href = '/cms/pages';
+        } else {
+          alert('Failed to delete page');
+          if (confirmDeletePageBtn) (confirmDeletePageBtn as HTMLButtonElement).disabled = false;
+        }
+      } catch {
+        alert('Network error deleting page');
+        if (confirmDeletePageBtn) (confirmDeletePageBtn as HTMLButtonElement).disabled = false;
+      }
+    });
+  </script>
+</ParentLayout>