Refactor Site Builder Integration and Update Component Structure

- Removed the separate `igny8_sites` service from Docker Compose, integrating its functionality into the main app. - Updated the Site Builder components to enhance user experience, including improved loading states and error handling. - Refactored routing and navigation in the Site Builder Wizard and Preview components for better clarity and usability. - Adjusted test files to reflect changes in import paths and ensure compatibility with the new structure.
2025-11-18 10:52:24 +00:00
parent 3ea519483d
commit 5d97ab6e49
8 changed files with 325 additions and 133 deletions
--- a/SITE_BUILDER_INTEGRATION_PLAN.md
+++ b/SITE_BUILDER_INTEGRATION_PLAN.md
@@ -125,21 +125,21 @@ Integrate the Site Builder wizard directly into the main frontend app (`frontend
 1. Copy `siteDefinitionStore.ts` from `sites/src/builder/state/`
 2. Use for preview functionality (if needed)

-### Phase 7: Update Routing & Navigation ⏳
+### Phase 7: Update Routing & Navigation ✅
 **Location**: `frontend/src/App.tsx`

 **Tasks**:
 1. Ensure `/sites/builder` route points to new `Wizard.tsx`
 2. Update navigation to show wizard in Sites section

-### Phase 8: Fix Test File ⏳
+### Phase 8: Fix Test File ✅
 **Location**: `frontend/src/__tests__/sites/BulkGeneration.test.tsx`

 **Tasks**:
 1. Update import path from `site-builder/src/api/builder.api` to `services/siteBuilder.api`
 2. Update mock path accordingly

-### Phase 9: Testing ⏳
+### Phase 9: Testing ⏳ *(blocked by vitest not installed in dev env)*
 **Tasks**:
 1. Test wizard flow:
   - Site selection
--- a/backend/celerybeat-schedule
+++ b/backend/celerybeat-schedule
--- a/docker-compose.app.yml
+++ b/docker-compose.app.yml
@@ -101,28 +101,6 @@ services:
      - "com.docker.compose.project=igny8-app"
      - "com.docker.compose.service=igny8_marketing_dev"

-  igny8_sites:
-    # Sites container: Public site renderer + Site Builder (merged)
-    # Build separately: docker build -t igny8-sites-dev:latest -f Dockerfile.dev .
-    image: igny8-sites-dev:latest
-    container_name: igny8_sites
-    restart: always
-    ports:
-      - "0.0.0.0:8024:5176"  # Sites renderer + Builder dev server port
-    environment:
-      VITE_API_URL: "https://api.igny8.com/api"
-      SITES_DATA_PATH: "/sites"
-    volumes:
-      - /data/app/igny8/sites:/app:rw
-      - /data/app/sites-data:/sites:ro
-      - /data/app/igny8/frontend:/frontend:ro
-    depends_on:
-      igny8_backend:
-        condition: service_healthy
-    networks: [igny8_net]
-    labels:
-      - "com.docker.compose.project=igny8-app"
-      - "com.docker.compose.service=igny8_sites"

  igny8_celery_worker:
    image: igny8-backend:latest
--- a/frontend/src/tests/sites/BulkGeneration.test.tsx
+++ b/frontend/src/tests/sites/BulkGeneration.test.tsx
@@ -4,10 +4,10 @@
 */
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { builderApi } from '../../../site-builder/src/api/builder.api';
+import { builderApi } from '../../../services/siteBuilder.api';

 // Mock API
-vi.mock('../../../site-builder/src/api/builder.api');
+vi.mock('../../../services/siteBuilder.api');

 describe('Bulk Generation', () => {
  beforeEach(() => {
--- a/frontend/src/pages/Sites/Builder/Blueprints.tsx
+++ b/frontend/src/pages/Sites/Builder/Blueprints.tsx
@@ -1,102 +1,144 @@
-/**
- * Site Builder Blueprints
- * Moved from site-builder container to main app
- * TODO: Migrate full implementation from site-builder/src/pages/dashboard/
- */
-import React, { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import PageMeta from '../../../components/common/PageMeta';
-import { Card } from '../../../components/ui/card';
-import Button from '../../../components/ui/button/Button';
-import { useToast } from '../../../components/ui/toast/ToastContainer';
-import { fetchAPI } from '../../../services/api';
-import { FileText, Plus } from 'lucide-react';
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import PageMeta from "../../../components/common/PageMeta";
+import { Card } from "../../../components/ui/card";
+import Button from "../../../components/ui/button/Button";
+import { useToast } from "../../../components/ui/toast/ToastContainer";
+import { FileText, Loader2, Plus } from "lucide-react";
+import { useSiteStore } from "../../../store/siteStore";
+import { useBuilderStore } from "../../../store/builderStore";
+import { siteBuilderApi } from "../../../services/siteBuilder.api";
+import type { SiteBlueprint } from "../../../types/siteBuilder";

 export default function SiteBuilderBlueprints() {
  const navigate = useNavigate();
  const toast = useToast();
-  const [blueprints, setBlueprints] = useState<any[]>([]);
-  const [loading, setLoading] = useState(true);
+  const { activeSite } = useSiteStore();
+  const { loadBlueprint, isLoadingBlueprint, activeBlueprint } =
+    useBuilderStore();
+  const [blueprints, setBlueprints] = useState<SiteBlueprint[]>([]);
+  const [loading, setLoading] = useState(false);

  useEffect(() => {
-    loadBlueprints();
-  }, []);
+    if (activeSite?.id) {
+      loadBlueprints(activeSite.id);
+    } else {
+      setBlueprints([]);
+    }
+  }, [activeSite?.id]);

-  const loadBlueprints = async () => {
+  const loadBlueprints = async (siteId: number) => {
    try {
      setLoading(true);
-      const data = await fetchAPI('/v1/site-builder/blueprints/');
-      if (data?.results) {
-        setBlueprints(data.results);
-      } else if (Array.isArray(data)) {
-        setBlueprints(data);
-      }
+      const results = await siteBuilderApi.listBlueprints(siteId);
+      setBlueprints(results);
    } catch (error: any) {
-      toast.error(`Failed to load blueprints: ${error.message}`);
+      toast.error(error?.message || "Failed to load blueprints");
    } finally {
      setLoading(false);
    }
  };

+  const handleOpenPreview = async (blueprintId: number) => {
+    try {
+      await loadBlueprint(blueprintId);
+      toast.success("Loaded blueprint preview");
+      navigate("/sites/builder/preview");
+    } catch (error: any) {
+      toast.error(error?.message || "Unable to open blueprint");
+    }
+  };
+
  return (
-    <div className="p-6">
+    <div className="space-y-6 p-6">
      <PageMeta title="Blueprints - IGNY8" />
-      <div className="mb-6 flex justify-between items-center">
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
        <div>
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+          <p className="text-xs uppercase tracking-wider text-gray-500 dark:text-white/50">
+            Sites / Blueprints
+          </p>
+          <h1 className="text-3xl font-semibold text-gray-900 dark:text-white">
            Blueprints
          </h1>
-          <p className="text-gray-600 dark:text-gray-400 mt-1">
-            View and manage all site blueprints
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            Review and preview structures generated for your active site.
          </p>
        </div>
-        <Button onClick={() => navigate('/sites/builder')} variant="primary">
-          <Plus className="w-4 h-4 mr-2" />
-          Create Blueprint
+        <Button
+          onClick={() => navigate("/sites/builder")}
+          variant="solid"
+          tone="brand"
+          startIcon={<Plus className="h-4 w-4" />}
+        >
+          Create blueprint
        </Button>
      </div>

-      {loading ? (
-        <div className="flex items-center justify-center h-64">
-          <div className="text-gray-500">Loading blueprints...</div>
+      {!activeSite ? (
+        <Card className="p-8 text-center">
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            Select a site using the header switcher to view its blueprints.
+          </p>
+        </Card>
+      ) : loading ? (
+        <div className="flex h-64 items-center justify-center text-gray-500 dark:text-gray-400">
+          <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+          Loading blueprints…
        </div>
      ) : blueprints.length === 0 ? (
        <Card className="p-12 text-center">
-          <FileText className="w-16 h-16 mx-auto mb-4 text-gray-400" />
-          <p className="text-gray-600 dark:text-gray-400 mb-4">
-            No blueprints created yet
+          <FileText className="mx-auto mb-4 h-16 w-16 text-gray-400" />
+          <p className="mb-4 text-gray-600 dark:text-gray-400">
+            No blueprints created yet for {activeSite.name}.
          </p>
-          <Button onClick={() => navigate('/sites/builder')} variant="primary">
-            Create Your First Blueprint
+          <Button onClick={() => navigate("/sites/builder")} variant="solid" tone="brand">
+            Launch Site Builder
          </Button>
        </Card>
      ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
          {blueprints.map((blueprint) => (
-            <Card key={blueprint.id} className="p-4 hover:shadow-lg transition-shadow">
-              <div className="space-y-3">
-                <div>
-                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-                    {blueprint.name}
-                  </h3>
-                  {blueprint.description && (
-                    <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
-                      {blueprint.description}
-                    </p>
+            <Card key={blueprint.id} className="space-y-4 p-5">
+              <div>
+                <p className="text-xs uppercase tracking-wider text-gray-500 dark:text-white/50">
+                  Blueprint #{blueprint.id}
+                </p>
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                  {blueprint.name}
+                </h3>
+                {blueprint.description && (
+                  <p className="text-sm text-gray-500 dark:text-gray-400">
+                    {blueprint.description}
+                  </p>
+                )}
+              </div>
+              <div className="flex items-center justify-between rounded-2xl bg-gray-50 px-4 py-3 text-sm font-semibold text-gray-700 dark:bg-white/[0.04] dark:text-white/80">
+                <span>Status</span>
+                <span className="capitalize">{blueprint.status}</span>
+              </div>
+              <div className="flex flex-col gap-2">
+                <Button
+                  variant="outline"
+                  tone="brand"
+                  disabled={isLoadingBlueprint}
+                  onClick={() => handleOpenPreview(blueprint.id)}
+                >
+                  {isLoadingBlueprint && activeBlueprint?.id === blueprint.id ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Loading…
+                    </>
+                  ) : (
+                    "Open preview"
                  )}
-                </div>
-                <div className="flex items-center justify-between pt-3 border-t border-gray-200 dark:border-gray-700">
-                  <div className="text-xs text-gray-600 dark:text-gray-400">
-                    Status: {blueprint.status}
-                  </div>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => navigate(`/sites/${blueprint.site}/editor`)}
-                  >
-                    View
-                  </Button>
-                </div>
+                </Button>
+                <Button
+                  variant="ghost"
+                  tone="neutral"
+                  onClick={() => navigate(`/sites/${blueprint.site}/editor`)}
+                >
+                  Open in editor
+                </Button>
              </div>
            </Card>
          ))}
--- a/frontend/src/pages/Sites/Builder/Preview.tsx
+++ b/frontend/src/pages/Sites/Builder/Preview.tsx
@@ -1,43 +1,162 @@
-/**
- * Site Builder Preview
- * Moved from site-builder container to main app
- * TODO: Migrate full implementation from site-builder/src/pages/preview/
- */
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import PageMeta from '../../../components/common/PageMeta';
-import { Card } from '../../../components/ui/card';
-import Button from '../../../components/ui/button/Button';
-import { Eye } from 'lucide-react';
+import { useMemo } from "react";
+import { useNavigate } from "react-router-dom";
+import PageMeta from "../../../components/common/PageMeta";
+import {
+  Card,
+  CardDescription,
+  CardTitle,
+} from "../../../components/ui/card";
+import Button from "../../../components/ui/button/Button";
+import Alert from "../../../components/ui/alert/Alert";
+import { useBuilderStore } from "../../../store/builderStore";
+import { useSiteDefinitionStore } from "../../../store/siteDefinitionStore";
+import { Eye } from "lucide-react";

 export default function SiteBuilderPreview() {
  const navigate = useNavigate();
+  const { activeBlueprint, pages } = useBuilderStore();
+  const { structure, selectedSlug, selectPage } = useSiteDefinitionStore();
+
+  const selectedPageDefinition = useMemo(() => {
+    return structure?.pages?.find((page) => page.slug === selectedSlug);
+  }, [structure, selectedSlug]);
+
+  if (!activeBlueprint) {
+    return (
+      <div className="space-y-6 p-6">
+        <PageMeta title="Site Preview - IGNY8" />
+        <Card className="p-12 text-center">
+          <Eye className="mx-auto mb-4 h-16 w-16 text-gray-400" />
+          <p className="text-gray-600 dark:text-gray-400">
+            Run the Site Builder wizard or open a blueprint to preview it.
+          </p>
+          <Button
+            className="mt-6"
+            variant="solid"
+            tone="brand"
+            onClick={() => navigate("/sites/builder")}
+          >
+            Back to wizard
+          </Button>
+        </Card>
+      </div>
+    );
+  }

  return (
-    <div className="p-6">
+    <div className="space-y-6 p-6">
      <PageMeta title="Site Preview - IGNY8" />
-      <div className="mb-6">
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
-          Site Preview
-        </h1>
-        <p className="text-gray-600 dark:text-gray-400 mt-1">
-          Preview your site during building
-        </p>
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div>
+          <p className="text-xs uppercase tracking-wider text-gray-500 dark:text-white/50">
+            Sites / Preview
+          </p>
+          <h1 className="text-3xl font-semibold text-gray-900 dark:text-white">
+            {activeBlueprint.name}
+          </h1>
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            Inspect the generated structure before publishing or deploying.
+          </p>
+        </div>
+        <Button variant="outline" onClick={() => navigate("/sites/builder")}>
+          Back to wizard
+        </Button>
      </div>

-      <Card className="p-12 text-center">
-        <Eye className="w-16 h-16 mx-auto mb-4 text-gray-400" />
-        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-          Site Preview
-        </h2>
-        <p className="text-gray-600 dark:text-gray-400 mb-6">
-          The Site Builder preview is being integrated into the main app.
-          Full implementation coming soon.
-        </p>
-        <Button onClick={() => navigate('/sites/builder')} variant="outline">
-          Back to Builder
-        </Button>
-      </Card>
+      <Alert
+        variant="info"
+        title="Preview snapshot"
+        message="This preview uses the latest blueprint data. Re-run the wizard to generate a new version."
+      />
+
+      <div className="grid gap-6 lg:grid-cols-[280px,1fr]">
+        <Card variant="panel" padding="lg">
+          <CardTitle>Pages</CardTitle>
+          <CardDescription>Choose a page to inspect its blocks.</CardDescription>
+          <div className="mt-4 space-y-2">
+            {pages.length === 0 && (
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                No pages yet. Run the wizard to generate structure.
+              </p>
+            )}
+            {pages.map((page) => (
+              <button
+                key={page.id}
+                type="button"
+                onClick={() => selectPage(page.slug)}
+                className={`w-full rounded-2xl border px-4 py-3 text-left ${
+                  selectedSlug === page.slug
+                    ? "border-brand-300 bg-brand-50 text-brand-700 dark:border-brand-500/40 dark:bg-brand-500/10 dark:text-brand-50"
+                    : "border-gray-200 bg-white text-gray-700 hover:border-brand-100 hover:bg-brand-50/60 dark:border-white/10 dark:bg-white/[0.02] dark:text-white/80"
+                }`}
+              >
+                <div className="text-sm font-semibold">{page.title}</div>
+                <div className="text-xs capitalize text-gray-500 dark:text-gray-400">
+                  {page.status}
+                </div>
+              </button>
+            ))}
+          </div>
+        </Card>
+
+        <Card variant="surface" padding="lg">
+          {selectedPageDefinition ? (
+            <div className="space-y-4">
+              <div>
+                <p className="text-xs uppercase tracking-wider text-gray-500 dark:text-white/50">
+                  Page
+                </p>
+                <h2 className="text-2xl font-semibold text-gray-900 dark:text-white">
+                  {selectedPageDefinition.title}
+                </h2>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  {selectedPageDefinition.objective ||
+                    "No objective provided"}
+                </p>
+              </div>
+              <div className="space-y-3">
+                {selectedPageDefinition.blocks?.map((block, index) => (
+                  <div
+                    key={`${block.type}-${index}`}
+                    className="rounded-2xl border border-gray-100 bg-gray-50/80 p-4 dark:border-white/10 dark:bg-white/[0.03]"
+                  >
+                    <p className="text-xs uppercase tracking-wider text-gray-500 dark:text-white/40">
+                      Block {index + 1}
+                    </p>
+                    <p className="text-lg font-semibold text-gray-900 dark:text-white">
+                      {block.type.replace(/_/g, " ")}
+                    </p>
+                    {Array.isArray(block.content) ? (
+                      <ul className="mt-2 list-disc space-y-1 pl-4 text-sm text-gray-600 dark:text-gray-300">
+                        {block.content.map((line, idx) => (
+                          <li key={idx}>{line}</li>
+                        ))}
+                      </ul>
+                    ) : block.content ? (
+                      <pre className="mt-2 rounded-lg bg-white/70 p-3 text-xs text-gray-600 dark:bg-white/[0.05] dark:text-gray-300">
+                        {JSON.stringify(block.content, null, 2)}
+                      </pre>
+                    ) : (
+                      <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+                        No content provided
+                      </p>
+                    )}
+                  </div>
+                ))}
+                {!selectedPageDefinition.blocks?.length && (
+                  <p className="text-sm text-gray-500 dark:text-gray-400">
+                    This page has no block definitions yet.
+                  </p>
+                )}
+              </div>
+            </div>
+          ) : (
+            <div className="text-center text-gray-500 dark:text-gray-400">
+              Select a page to see its details.
+            </div>
+          )}
+        </Card>
+      </div>
    </div>
  );
 }
--- a/frontend/src/pages/Sites/Builder/Wizard.tsx
+++ b/frontend/src/pages/Sites/Builder/Wizard.tsx
@@ -214,15 +214,30 @@ export default function SiteBuilderWizard() {
                  <span>Pages generated</span>
                  <span>{pages.length}</span>
                </div>
-                <Button
-                  variant="outline"
-                  tone="brand"
-                  fullWidth
-                  startIcon={<RefreshCw size={16} />}
-                  onClick={() => refreshPages(activeBlueprint.id)}
-                >
-                  Sync pages
-                </Button>
+                <div className="flex flex-col gap-3 sm:flex-row">
+                  <Button
+                    variant="outline"
+                    tone="brand"
+                    fullWidth
+                    startIcon={<RefreshCw size={16} />}
+                    onClick={() => refreshPages(activeBlueprint.id)}
+                  >
+                    Sync pages
+                  </Button>
+                  <Button
+                    variant="soft"
+                    tone="brand"
+                    fullWidth
+                    disabled={isGenerating}
+                    onClick={() =>
+                      loadBlueprint(activeBlueprint.id).then(() =>
+                        navigate("/sites/builder/preview"),
+                      )
+                    }
+                  >
+                    Open preview
+                  </Button>
+                </div>
              </div>
            ) : (
              <div className="mt-4 rounded-2xl border border-dashed border-gray-200 bg-gray-50/60 p-6 text-center text-sm text-gray-500 dark:border-white/10 dark:bg-white/[0.03] dark:text-white/60">
--- a/frontend/src/store/builderStore.ts
+++ b/frontend/src/store/builderStore.ts
@@ -40,6 +40,7 @@ interface BuilderState {
  currentStep: number;
  isSubmitting: boolean;
  isGenerating: boolean;
+  isLoadingBlueprint: boolean;
  error?: string;
  activeBlueprint?: SiteBlueprint;
  pages: PageBlueprint[];
@@ -67,6 +68,7 @@ interface BuilderState {
  togglePageSelection: (pageId: number) => void;
  selectAllPages: () => void;
  clearPageSelection: () => void;
+  loadBlueprint: (blueprintId: number) => Promise<void>;
  generateAllPages: (blueprintId: number, force?: boolean) => Promise<void>;
 }

@@ -75,6 +77,7 @@ export const useBuilderStore = create<BuilderState>((set, get) => ({
  currentStep: 0,
  isSubmitting: false,
  isGenerating: false,
+  isLoadingBlueprint: false,
  pages: [],
  selectedPageIds: [],

@@ -221,6 +224,41 @@ export const useBuilderStore = create<BuilderState>((set, get) => ({

  clearPageSelection: () => set({ selectedPageIds: [] }),

+  loadBlueprint: async (blueprintId: number) => {
+    set({ isLoadingBlueprint: true, error: undefined });
+    try {
+      const [blueprint, pages] = await Promise.all([
+        siteBuilderApi.getBlueprint(blueprintId),
+        siteBuilderApi.listPages(blueprintId),
+      ]);
+      set({
+        activeBlueprint: blueprint,
+        pages,
+        selectedPageIds: [],
+      });
+      if (blueprint.structure_json) {
+        useSiteDefinitionStore.getState().setStructure(blueprint.structure_json);
+      } else {
+        useSiteDefinitionStore.getState().setStructure({
+          site: undefined,
+          pages: pages.map((page) => ({
+            slug: page.slug,
+            title: page.title,
+            type: page.type,
+            blocks: page.blocks_json,
+          })),
+        });
+      }
+      useSiteDefinitionStore.getState().setPages(pages);
+    } catch (error: any) {
+      set({
+        error: error?.message || "Unable to load blueprint",
+      });
+    } finally {
+      set({ isLoadingBlueprint: false });
+    }
+  },
+
  generateAllPages: async (blueprintId: number, force = false) => {
    const { selectedPageIds } = get();
    set({ isGenerating: true, error: undefined, generationProgress: undefined });