@morphika/webframe 0.1.0

package/components/builder/ReadOnlyFrame.tsx

@@ -0,0 +1,417 @@
+"use client";
+
+/**
+ * ReadOnlyFrame — renders the page content as a read-only mirror.
+ *
+ * Used for inactive device frames (Tablet, Phone) in the multi-device preview.
+ * Reads rows directly from the Zustand store so it stays in sync in real-time.
+ * No dnd-kit, no selection, no toolbars — pure visual rendering.
+ *
+ * Accepts a `viewport` prop so blocks resolve their responsive overrides
+ * for the correct device size.
+ *
+ * Performance: Each row is memoized individually so that editing a block in
+ * row N only re-renders that single ReadOnlyRow — not the entire frame.
+ *
+ * Session 76: Updated to handle first-class PageSections alongside Rows.
+ */
+
+import { memo, useMemo, useState, useEffect } from "react";
+import { useBuilderStore } from "../../lib/builder/store";
+import { DEFAULT_GRID_WIDTH } from "../../lib/builder/constants";
+import type { DeviceViewport } from "../../lib/builder/types";
+import type { ContentItem, PageSection, PageSectionV2, CustomSectionInstance, ParallaxGroup, ParallaxSlideV2 } from "../../lib/sanity/types";
+import { isPageSection, isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../lib/sanity/types";
+import { DEVICE_HEIGHTS } from "../../lib/builder/types";
+import { getEffectiveColumnsV2, getSectionV2SettingValue, getRowSettingValue } from "./settings-panel/responsive-helpers";
+import BlockLivePreview from "./BlockLivePreview";
+import { getRowLayoutStyles, getColumnVerticalAlign } from "../../lib/builder/layout-styles";
+
+// Shared list of layout keys that support responsive overrides (V1 + V2)
+const OVERRIDABLE_KEYS = [
+  "spacing_top", "spacing_right", "spacing_bottom", "spacing_left",
+  "offset_top", "offset_right", "offset_bottom", "offset_left",
+  "background_color", "background_opacity",
+  "border_color", "border_width", "border_style", "border_sides", "border_radius",
+] as const;
+
+// ============================================
+// Memoized per-section renderer — renders PageSection block directly
+// ============================================
+
+interface ReadOnlySectionProps {
+  section: PageSection;
+  viewport: DeviceViewport;
+}
+
+const ReadOnlySection = memo(function ReadOnlySection({ section, viewport }: ReadOnlySectionProps) {
+  const block = section.block?.[0];
+  if (!block) return null;
+
+  const base = section.settings || {};
+  // Merge responsive overrides for V1 PageSection (same approach as V2)
+  const resolvedSettings = useMemo(() => {
+    const merged: Record<string, unknown> = { ...base };
+    for (const key of OVERRIDABLE_KEYS) {
+      merged[key] = getRowSettingValue(section, viewport, key, (base as Record<string, unknown>)[key]);
+    }
+    return merged;
+  }, [section, viewport, base]);
+  const layoutStyles = getRowLayoutStyles(resolvedSettings as Record<string, unknown>);
+
+  const sectionStyle: React.CSSProperties = {
+    ...layoutStyles,
+    contentVisibility: "auto",
+    containIntrinsicSize: "auto 200px",
+  };
+
+  return (
+    <div style={sectionStyle}>
+      <BlockLivePreview block={block} viewport={viewport} />
+    </div>
+  );
+});
+
+// ============================================
+// Memoized per-section V2 renderer — renders PageSectionV2 grid
+// BUG-V2-005 fix: V2 sections were not rendered in inactive device frames.
+// ============================================
+
+interface ReadOnlySectionV2Props {
+  section: PageSectionV2;
+  viewport: DeviceViewport;
+}
+
+const ReadOnlySectionV2 = memo(function ReadOnlySectionV2({ section, viewport }: ReadOnlySectionV2Props) {
+  const base = section.settings || {} as PageSectionV2["settings"];
+  // Merge responsive overrides for layout properties at this viewport
+  const resolvedSettings = useMemo(() => {
+    const merged: Record<string, unknown> = { ...base };
+    for (const key of OVERRIDABLE_KEYS) {
+      merged[key] = getSectionV2SettingValue(section, viewport, key, (base as unknown as Record<string, unknown>)[key]);
+    }
+    return merged;
+  }, [section, viewport, base]);
+  const layoutStyles = getRowLayoutStyles(resolvedSettings as Record<string, unknown>);
+
+  const gridColumns = base.grid_columns || 12;
+  const colGap = getSectionV2SettingValue(section, viewport, "col_gap", 20);
+  const rowGap = getSectionV2SettingValue(section, viewport, "row_gap", 20);
+  const effectiveCols = getEffectiveColumnsV2(section, viewport);
+
+  return (
+    <div style={{ ...layoutStyles, contentVisibility: "auto", containIntrinsicSize: "auto 200px" }}>
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
+          columnGap: `${colGap}px`,
+          rowGap: `${rowGap}px`,
+        }}
+      >
+        {section.columns.map((col) => {
+          const eff = effectiveCols.find((ec) => ec._key === col._key);
+          const gridColumn = eff?.grid_column ?? col.grid_column;
+          const gridRow = eff?.grid_row ?? col.grid_row;
+          const span = eff?.span ?? col.span;
+          const colJustify = getColumnVerticalAlign(col.blocks || []);
+
+          return (
+            <div
+              key={col._key}
+              style={{
+                gridColumn: `${gridColumn} / span ${span}`,
+                gridRow,
+                display: "flex",
+                flexDirection: "column",
+                ...(colJustify ? { justifyContent: colJustify } : {}),
+                height: "100%",
+                minWidth: 0,
+                overflow: "hidden",
+              }}
+            >
+              {(col.blocks || []).map((block) => (
+                <div key={block._key} style={{ width: "100%", minWidth: 0 }}>
+                  <BlockLivePreview block={block} viewport={viewport} />
+                </div>
+              ))}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+});
+
+// ============================================
+// Read-only parallax slide — renders a single slide's V2 grid content
+// ============================================
+
+interface ReadOnlyParallaxSlideProps {
+  slide: ParallaxSlideV2;
+  viewport: DeviceViewport;
+  deviceHeight: number;
+}
+
+const ReadOnlyParallaxSlide = memo(function ReadOnlyParallaxSlide({
+  slide,
+  viewport,
+  deviceHeight,
+}: ReadOnlyParallaxSlideProps) {
+  const base = slide.section_settings || {} as ParallaxSlideV2["section_settings"];
+  const gridColumns = base.grid_columns || 12;
+  const colGap = base.col_gap ?? 20;
+  const rowGap = base.row_gap ?? 20;
+
+  return (
+    <div
+      className="relative"
+      style={{
+        minHeight: deviceHeight,
+        overflow: "hidden",
+      }}
+    >
+      {/* Background preview — image */}
+      {slide.background_type === "image" && slide.background_image && (
+        <div
+          className="absolute inset-0 bg-cover bg-center pointer-events-none"
+          style={{
+            backgroundImage: `url(/api/assets/${slide.background_image})`,
+            backgroundPosition: slide.background_position || "center center",
+            opacity: 0.15,
+          }}
+        />
+      )}
+      {/* Background preview — video (poster frame via <video> element) */}
+      {slide.background_type === "video" && slide.background_video && (
+        <video
+          src={`/api/assets/${slide.background_video}`}
+          muted
+          playsInline
+          autoPlay
+          loop
+          className="absolute inset-0 w-full h-full object-cover pointer-events-none"
+          style={{ opacity: 0.15 }}
+        />
+      )}
+      {/* Overlay — only when a background is set */}
+      {(slide.background_overlay_opacity ?? 0) > 0 && (slide.background_image || slide.background_video) && (
+        <div
+          className="absolute inset-0 pointer-events-none"
+          style={{
+            backgroundColor: slide.background_overlay_color || "#000000",
+            opacity: (slide.background_overlay_opacity ?? 0) / 100 * 0.3,
+          }}
+        />
+      )}
+      {/* V2 grid content — stretches to fill slide height (matches ParallaxGroupCanvas) */}
+      <div
+        className="relative"
+        style={{
+          minHeight: deviceHeight,
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
+            gridTemplateRows: "1fr",
+            columnGap: `${colGap}px`,
+            rowGap: `${rowGap}px`,
+            flex: 1,
+            minHeight: 0,
+          }}
+        >
+          {slide.columns.map((col) => {
+            const colJustify = getColumnVerticalAlign(col.blocks || []);
+            return (
+              <div
+                key={col._key}
+                style={{
+                  gridColumn: `${col.grid_column} / span ${col.span}`,
+                  gridRow: col.grid_row,
+                  display: "flex",
+                  flexDirection: "column",
+                  ...(colJustify ? { justifyContent: colJustify } : {}),
+                  height: "100%",
+                  minWidth: 0,
+                  overflow: "hidden",
+                }}
+              >
+                {(col.blocks || []).map((block) => (
+                  <div key={block._key} style={{ width: "100%", minWidth: 0 }}>
+                    <BlockLivePreview block={block} viewport={viewport} />
+                  </div>
+                ))}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+// ============================================
+// Read-only parallax group — renders all slides stacked
+// ============================================
+
+interface ReadOnlyParallaxGroupProps {
+  group: ParallaxGroup;
+  viewport: DeviceViewport;
+}
+
+const ReadOnlyParallaxGroup = memo(function ReadOnlyParallaxGroup({
+  group,
+  viewport,
+}: ReadOnlyParallaxGroupProps) {
+  const deviceHeight = DEVICE_HEIGHTS[viewport];
+
+  return (
+    <div
+      style={{
+        borderRadius: 8,
+        border: "1px solid rgba(139, 92, 246, 0.15)",
+        overflow: "hidden",
+      }}
+    >
+      {/* Compact header */}
+      <div
+        style={{
+          background: "linear-gradient(135deg, #f3f0ff 0%, #ede5ff 100%)",
+          padding: "4px 8px",
+          borderBottom: "1px solid rgba(139, 92, 246, 0.1)",
+        }}
+      >
+        <span style={{ fontSize: 8, fontWeight: 600, color: "#8b5cf6" }}>
+          ▽ Parallax · {group.slides.length} slides
+        </span>
+      </div>
+      {/* Slides */}
+      {group.slides.map((slide, i) => (
+        <div
+          key={slide._key}
+          style={{
+            borderTop: i > 0 ? "1px solid rgba(139, 92, 246, 0.08)" : undefined,
+          }}
+        >
+          <ReadOnlyParallaxSlide
+            slide={slide}
+            viewport={viewport}
+            deviceHeight={deviceHeight}
+          />
+        </div>
+      ))}
+    </div>
+  );
+});
+
+// ============================================
+// Read-only custom section instance — fetches and renders linked section data
+// ============================================
+
+interface ReadOnlyCustomSectionProps {
+  instance: CustomSectionInstance;
+  viewport: DeviceViewport;
+}
+
+const ReadOnlyCustomSection = memo(function ReadOnlyCustomSection({
+  instance,
+  viewport,
+}: ReadOnlyCustomSectionProps) {
+  const cacheSettings = useBuilderStore((s) => s.cacheCustomSectionSettings);
+  const [sectionData, setSectionData] = useState<PageSectionV2 | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetch(`/api/custom-sections/${instance.custom_section_id}`)
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data) => {
+        if (!cancelled && data?.section) {
+          setSectionData(data.section);
+          // Cache base settings so SortableRow can merge with per-instance overrides
+          if (data.section.settings) {
+            cacheSettings(instance.custom_section_id, data.section.settings);
+          }
+        }
+      })
+      .catch(() => {});
+    return () => { cancelled = true; };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [instance.custom_section_id]);
+
+  if (!sectionData) {
+    return (
+      <div style={{ padding: "16px 0", textAlign: "center" }}>
+        <span style={{ fontSize: 9, color: "#bbb" }}>Loading section...</span>
+      </div>
+    );
+  }
+
+  // Merge per-instance overrides on top of base section settings
+  const mergedSection = instance.settings_overrides
+    ? { ...sectionData, settings: { ...sectionData.settings, ...instance.settings_overrides } }
+    : sectionData;
+
+  // Also merge responsive overrides for correct viewport-specific rendering
+  const withResponsive = instance.responsive_overrides
+    ? { ...mergedSection, responsive: { ...mergedSection.responsive, ...instance.responsive_overrides } }
+    : mergedSection;
+
+  return <ReadOnlySectionV2 section={withResponsive} viewport={viewport} />;
+});
+
+// ============================================
+// ReadOnlyFrame — orchestrator
+// ============================================
+
+interface ReadOnlyFrameProps {
+  /** The device viewport this frame represents */
+  viewport: DeviceViewport;
+}
+
+export default function ReadOnlyFrame({ viewport }: ReadOnlyFrameProps) {
+  const rows = useBuilderStore((s) => s.rows);
+
+  if (rows.length === 0) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <p className="text-[10px] text-neutral-300">No content</p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {rows.map((item) =>
+        isParallaxGroup(item) ? (
+          <ReadOnlyParallaxGroup
+            key={item._key}
+            group={item as ParallaxGroup}
+            viewport={viewport}
+          />
+        ) : isCustomSectionInstance(item) ? (
+          <ReadOnlyCustomSection
+            key={item._key}
+            instance={item as CustomSectionInstance}
+            viewport={viewport}
+          />
+        ) : isPageSectionV2(item) ? (
+          <ReadOnlySectionV2
+            key={item._key}
+            section={item as PageSectionV2}
+            viewport={viewport}
+          />
+        ) : isPageSection(item) ? (
+          <ReadOnlySection
+            key={item._key}
+            section={item as PageSection}
+            viewport={viewport}
+          />
+        ) : null
+      )}
+    </div>
+  );
+}

package/components/builder/SectionEditorBar.tsx

@@ -0,0 +1,288 @@
+"use client";
+
+import { useState, useCallback, useRef, useEffect } from "react";
+import { useBuilderStore } from "../../lib/builder/store";
+import { getCsrfToken } from "../../lib/csrf-client";
+import { ADMIN_ACCENT } from "../../lib/builder/constants";
+
+// ============================================
+// SectionEditorBar — Top bar for custom section editor mode
+// ============================================
+// Shows when editorMode === "customSection". Displays breadcrumbs,
+// an editable section name, Cancel, Save & Exit, and Delete buttons.
+// All text in English. Consistent with builder admin accent (ADMIN_ACCENT).
+
+interface SectionEditorBarProps {
+  /** Called after save completes — receives the created/updated section info */
+  onSaveComplete?: (result: { id: string; slug: string; title: string }) => void;
+}
+
+export default function SectionEditorBar({ onSaveComplete }: SectionEditorBarProps) {
+  const customSectionSlug = useBuilderStore((s) => s.customSectionSlug);
+  const customSectionTitle = useBuilderStore((s) => s.customSectionTitle);
+  const isSaving = useBuilderStore((s) => s.isSaving);
+  const saveError = useBuilderStore((s) => s.saveError);
+  const isDirty = useBuilderStore((s) => s.isDirty);
+  const exitSectionEditor = useBuilderStore((s) => s.exitSectionEditor);
+  const saveSectionEditor = useBuilderStore((s) => s.saveSectionEditor);
+  const pageTitle = useBuilderStore((s) => s.pageTitle);
+  const pageType = useBuilderStore((s) => s.pageType);
+
+  const isEditing = !!customSectionSlug;
+  const [name, setName] = useState(customSectionTitle || "");
+  const [showCancelDialog, setShowCancelDialog] = useState(false);
+  const [showSaveDialog, setShowSaveDialog] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  // Track whether the name was changed from its original value
+  const nameChanged = name.trim() !== (customSectionTitle || "").trim();
+
+  // Focus input on mount if creating new
+  useEffect(() => {
+    if (!isEditing && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isEditing]);
+
+  const handleCancel = useCallback(() => {
+    // m2 fix: only show warning dialog if there are actual unsaved changes (Session 110)
+    if (isDirty || nameChanged) {
+      setShowCancelDialog(true);
+    } else {
+      // No changes — exit immediately
+      exitSectionEditor();
+    }
+  }, [isDirty, nameChanged, exitSectionEditor]);
+
+  const confirmCancel = useCallback(() => {
+    setShowCancelDialog(false);
+    exitSectionEditor();
+  }, [exitSectionEditor]);
+
+  const handleSave = useCallback(() => {
+    if (!name.trim()) {
+      inputRef.current?.focus();
+      return;
+    }
+    if (isEditing) {
+      // Show warning dialog when editing existing section
+      setShowSaveDialog(true);
+    } else {
+      // Creating new — save directly
+      performSave();
+    }
+  }, [name, isEditing]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const performSave = useCallback(async () => {
+    setShowSaveDialog(false);
+    const result = await saveSectionEditor(name.trim());
+    if (result && onSaveComplete) {
+      onSaveComplete(result);
+    }
+  }, [name, saveSectionEditor, onSaveComplete]);
+
+  const handleDelete = useCallback(async () => {
+    if (!customSectionSlug) return;
+    setIsDeleting(true);
+    setDeleteError(null);
+
+    try {
+      const csrfToken = getCsrfToken();
+      const res = await fetch(`/api/admin/custom-sections/${customSectionSlug}`, {
+        method: "DELETE",
+        headers: {
+          ...(csrfToken ? { "X-CSRF-Token": csrfToken } : {}),
+        },
+      });
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({ error: "Delete failed" }));
+        throw new Error(data.error || `Delete failed (${res.status})`);
+      }
+
+      setShowDeleteDialog(false);
+      // Exit editor without marking page dirty
+      exitSectionEditor();
+    } catch (err) {
+      setDeleteError(err instanceof Error ? err.message : "Delete failed");
+    } finally {
+      setIsDeleting(false);
+    }
+  }, [customSectionSlug, exitSectionEditor]);
+
+  // Breadcrumb label for parent context
+  const parentLabel = pageType === "project" ? "Projects" : "Pages";
+  const parentListUrl = pageType === "project" ? "/admin/projects" : "/admin/pages";
+
+  return (
+    <>
+      <div
+        className="flex items-center justify-between px-4 py-2 border-b border-[#2a2a2a]"
+        style={{ backgroundColor: "#1a1a1a" }}
+      >
+        {/* Left: breadcrumbs + section name input */}
+        <div className="flex items-center gap-3">
+          {/* Breadcrumbs */}
+          <div className="flex items-center gap-1.5 text-xs mr-1">
+            <a
+              href={parentListUrl}
+              className="text-[#666] hover:text-[#aaa] transition-colors cursor-pointer"
+            >
+              {parentLabel}
+            </a>
+            <span className="text-[#444]">/</span>
+            <button
+              onClick={handleCancel}
+              className="text-[#666] hover:text-[#aaa] transition-colors cursor-pointer truncate max-w-[140px]"
+              title={`Back to ${pageTitle || "page"}`}
+            >
+              {pageTitle || "Page"}
+            </button>
+            <span className="text-[#444]">/</span>
+            <span className="text-[#999] font-medium">
+              {isEditing ? "Edit Section" : "New Section"}
+            </span>
+          </div>
+
+          <div className="w-px h-4 bg-[#3a3a3a]" />
+
+          <input
+            ref={inputRef}
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="Section name..."
+            className="bg-[#2a2a2a] text-white text-sm px-3 py-1.5 rounded border border-[#3a3a3a] focus:border-[#076bff] focus:outline-none w-64 transition-colors"
+          />
+        </div>
+
+        {/* Right: actions */}
+        <div className="flex items-center gap-2">
+          {saveError && (
+            <span className="text-xs text-red-400 mr-2">{saveError}</span>
+          )}
+          {/* Delete button — only for existing sections */}
+          {isEditing && (
+            <button
+              onClick={() => setShowDeleteDialog(true)}
+              disabled={isSaving}
+              className="px-3 py-1.5 text-sm text-red-400 hover:text-red-300 rounded border border-[#3a3a3a] hover:border-red-500/50 transition-colors disabled:opacity-50"
+            >
+              Delete
+            </button>
+          )}
+          <button
+            onClick={handleCancel}
+            disabled={isSaving}
+            className="px-3 py-1.5 text-sm text-[#aaa] hover:text-white rounded border border-[#3a3a3a] hover:border-[#555] transition-colors disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSave}
+            disabled={isSaving || !name.trim()}
+            className="px-4 py-1.5 text-sm text-white rounded font-medium transition-colors disabled:opacity-50"
+            style={{
+              backgroundColor: isSaving ? "#555" : ADMIN_ACCENT,
+            }}
+          >
+            {isSaving ? "Saving..." : "Save & Exit"}
+          </button>
+        </div>
+      </div>
+
+      {/* Cancel confirmation dialog */}
+      {showCancelDialog && (
+        <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60">
+          <div className="bg-[#1a1a1a] rounded-lg border border-[#3a3a3a] p-6 max-w-sm shadow-xl">
+            <h3 className="text-white text-sm font-medium mb-2">
+              Unsaved changes
+            </h3>
+            <p className="text-[#888] text-xs mb-4">
+              If you leave now, your changes will be lost.
+            </p>
+            <div className="flex justify-end gap-2">
+              <button
+                onClick={() => setShowCancelDialog(false)}
+                className="px-3 py-1.5 text-sm text-[#aaa] hover:text-white rounded border border-[#3a3a3a] hover:border-[#555] transition-colors"
+              >
+                Keep editing
+              </button>
+              <button
+                onClick={confirmCancel}
+                className="px-3 py-1.5 text-sm text-white bg-red-600 hover:bg-red-500 rounded transition-colors"
+              >
+                Discard & exit
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Save warning dialog (editing existing) */}
+      {showSaveDialog && (
+        <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60">
+          <div className="bg-[#1a1a1a] rounded-lg border border-[#3a3a3a] p-6 max-w-sm shadow-xl">
+            <h3 className="text-white text-sm font-medium mb-2">
+              Save changes
+            </h3>
+            <p className="text-[#888] text-xs mb-4">
+              Changes will apply to all pages using this section.
+            </p>
+            <div className="flex justify-end gap-2">
+              <button
+                onClick={() => setShowSaveDialog(false)}
+                className="px-3 py-1.5 text-sm text-[#aaa] hover:text-white rounded border border-[#3a3a3a] hover:border-[#555] transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={performSave}
+                className="px-3 py-1.5 text-sm text-white rounded font-medium transition-colors"
+                style={{ backgroundColor: ADMIN_ACCENT }}
+              >
+                Save
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Delete confirmation dialog */}
+      {showDeleteDialog && (
+        <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60">
+          <div className="bg-[#1a1a1a] rounded-lg border border-[#3a3a3a] p-6 max-w-sm shadow-xl">
+            <h3 className="text-white text-sm font-medium mb-2">
+              Delete section
+            </h3>
+            <p className="text-[#888] text-xs mb-4">
+              This will permanently delete &ldquo;{customSectionTitle || name}&rdquo;.
+              If any pages reference this section, deletion will be blocked.
+            </p>
+            {deleteError && (
+              <p className="text-xs text-red-400 mb-3">{deleteError}</p>
+            )}
+            <div className="flex justify-end gap-2">
+              <button
+                onClick={() => { setShowDeleteDialog(false); setDeleteError(null); }}
+                disabled={isDeleting}
+                className="px-3 py-1.5 text-sm text-[#aaa] hover:text-white rounded border border-[#3a3a3a] hover:border-[#555] transition-colors disabled:opacity-50"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleDelete}
+                disabled={isDeleting}
+                className="px-3 py-1.5 text-sm text-white bg-red-600 hover:bg-red-500 rounded transition-colors disabled:opacity-50"
+              >
+                {isDeleting ? "Deleting..." : "Delete"}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}