Add guided tours and unify left-to-right hall wall hang.

Visitors walk published tours in a 3D hall with stop notes; curators edit drafts via Tour editor. All galleries (artist, movement, tour) place the first work left of the entrance view and the last on the right. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-16 20:27:36 +03:00
parent 48bd17e985
commit 5ddc3fd7f0
31 changed files with 1890 additions and 124 deletions
@@ -9,18 +9,30 @@ import ArtistBio from '../components/ArtistBio';
 import CheckupPage from '../pages/CheckupPage';
 import TranslationsPage from '../pages/TranslationsPage';
 import InfluencesPage from '../pages/InfluencesPage';
+import ToursPage from '../pages/ToursPage';
 import CuratorLoginModal from '../components/CuratorLoginModal';
+import ToursPopup from '../components/ToursPopup';
 import CatalogSearchBar from '../components/CatalogSearchBar';
 import LocaleSwitcher from '../components/LocaleSwitcher';
 import GalleryLoadingMarker from '../components/GalleryLoadingMarker';
 import '../components/CatalogSearchBar.css';
 import '../components/CuratorLoginModal.css';
+import '../components/ToursPopup.css';
 import '../components/LocaleSwitcher.css';
 import '../pages/TranslationsPage.css';
 import '../pages/InfluencesPage.css';
+import '../pages/ToursPage.css';
 import { useAuth } from '../context/AuthContext';
 import { api, setApiLocale, type FixPaintingImageResult, type FixArtistPortraitResult } from '../api/client';
-import type { TimelineData, Artist, ArtistDetail, Painting, PaintingDetail, MovementGalleryDetail } from '../types';
+import type {
+  TimelineData,
+  Artist,
+  ArtistDetail,
+  Painting,
+  PaintingDetail,
+  MovementGalleryDetail,
+  TourGalleryDetail,
+} from '../types';
 import { createViewChangeScheduler } from '../utils/timelineView';
 import { sortArtistPaintingsChronological } from '../utils/paintingUtils';
 import { readDebugMode, readDebugShowMore, writeDebugMode, writeDebugShowMore } from '../utils/debugMode';
@@ -31,14 +43,19 @@ type View =
  | { type: 'checkup' }
  | { type: 'translations' }
  | { type: 'influences' }
+  | { type: 'tours' }
  | { type: 'gallery'; artistId: number; data: ArtistDetail }
  | { type: 'movement-gallery'; movementId: number; data: MovementGalleryDetail }
+  | { type: 'tour-gallery'; tourId: number; data: TourGalleryDetail }
  | { type: 'painting'; paintingId: number; data: PaintingDetail; returnTo: View }
  | { type: 'bio'; artistId: number; data: ArtistDetail; returnTo: View };

 type GallerySession =
  | { kind: 'artist'; artistId: number; data: ArtistDetail }
-  | { kind: 'movement'; movementId: number; data: MovementGalleryDetail };
+  | { kind: 'movement'; movementId: number; data: MovementGalleryDetail }
+  | { kind: 'tour'; tourId: number; data: TourGalleryDetail };
+
+type CuratorLoginRedirect = 'checkup' | 'translations' | 'influences' | 'tours' | null;

 function patchPaintingInMovementDetail(
  detail: MovementGalleryDetail,
@@ -51,6 +68,17 @@ function patchPaintingInMovementDetail(
  };
 }

+function patchPaintingInTourDetail(
+  detail: TourGalleryDetail,
+  paintingId: number,
+  patch: Partial<Painting>
+): TourGalleryDetail {
+  return {
+    ...detail,
+    paintings: detail.paintings.map((p) => (p.id === paintingId ? { ...p, ...patch } : p)),
+  };
+}
+
 function patchPaintingInArtistDetail(
  detail: ArtistDetail,
  paintingId: number,
@@ -72,7 +100,8 @@ function patchArtistInArtistDetail(detail: ArtistDetail, patch: Partial<Artist>)
 function patchReturnToAfterRemove(
  returnTo: View,
  freshArtist?: ArtistDetail,
-  freshMovement?: MovementGalleryDetail
+  freshMovement?: MovementGalleryDetail,
+  freshTour?: TourGalleryDetail
 ): View {
  if (returnTo.type === 'gallery' && freshArtist && returnTo.artistId === freshArtist.artist.id) {
    return { ...returnTo, data: freshArtist };
@@ -84,8 +113,14 @@ function patchReturnToAfterRemove(
  ) {
    return { ...returnTo, data: freshMovement };
  }
+  if (returnTo.type === 'tour-gallery' && freshTour && returnTo.tourId === freshTour.tour.id) {
+    return { ...returnTo, data: freshTour };
+  }
  if (returnTo.type === 'painting') {
-    return { ...returnTo, returnTo: patchReturnToAfterRemove(returnTo.returnTo, freshArtist, freshMovement) };
+    return {
+      ...returnTo,
+      returnTo: patchReturnToAfterRemove(returnTo.returnTo, freshArtist, freshMovement, freshTour),
+    };
  }
  if (returnTo.type === 'bio') {
    const data =
@@ -93,7 +128,7 @@ function patchReturnToAfterRemove(
    return {
      ...returnTo,
      data,
-      returnTo: patchReturnToAfterRemove(returnTo.returnTo, freshArtist, freshMovement),
+      returnTo: patchReturnToAfterRemove(returnTo.returnTo, freshArtist, freshMovement, freshTour),
    };
  }
  return returnTo;
@@ -131,7 +166,8 @@ export default function HomePage() {
  const [debugMode, setDebugMode] = useState(readDebugMode);
  const [debugShowMore, setDebugShowMore] = useState(readDebugShowMore);
  const [loginOpen, setLoginOpen] = useState(false);
-  const [loginRedirect, setLoginRedirect] = useState<'checkup' | 'translations' | 'influences' | null>(null);
+  const [loginRedirect, setLoginRedirect] = useState<CuratorLoginRedirect>(null);
+  const [toursPopupOpen, setToursPopupOpen] = useState(false);
  const effectiveDebugMode = debugMode && isCurator;
  const [galleryRevision, setGalleryRevision] = useState(0);
  const viewRef = useRef(view);
@@ -148,6 +184,8 @@ export default function HomePage() {
      setGallerySession({ kind: 'artist', artistId: view.artistId, data: view.data });
    } else if (view.type === 'movement-gallery') {
      setGallerySession({ kind: 'movement', movementId: view.movementId, data: view.data });
+    } else if (view.type === 'tour-gallery') {
+      setGallerySession({ kind: 'tour', tourId: view.tourId, data: view.data });
    } else if (view.type === 'timeline') {
      setGallerySession(null);
    }
@@ -225,7 +263,7 @@ export default function HomePage() {
    writeDebugShowMore(enabled);
  };

-  const openCuratorLogin = (redirect: 'checkup' | 'translations' | 'influences' | null = null) => {
+  const openCuratorLogin = (redirect: CuratorLoginRedirect = null) => {
    setLoginRedirect(redirect);
    setLoginOpen(true);
  };
@@ -239,6 +277,8 @@ export default function HomePage() {
      setView({ type: 'translations' });
    } else if (loginRedirect === 'influences') {
      setView({ type: 'influences' });
+    } else if (loginRedirect === 'tours') {
+      setView({ type: 'tours' });
    }
    setLoginRedirect(null);
  };
@@ -247,7 +287,12 @@ export default function HomePage() {
    await logout();
    writeDebugMode(false);
    setDebugMode(false);
-    if (view.type === 'checkup' || view.type === 'translations' || view.type === 'influences') {
+    if (
+      view.type === 'checkup' ||
+      view.type === 'translations' ||
+      view.type === 'influences' ||
+      view.type === 'tours'
+    ) {
      goToTimelineHome();
    }
  };
@@ -276,6 +321,14 @@ export default function HomePage() {
    setView({ type: 'influences' });
  };

+  const openToursEditor = () => {
+    if (!isCurator) {
+      openCuratorLogin('tours');
+      return;
+    }
+    setView({ type: 'tours' });
+  };
+
  const handlePaintingImageFixed = useCallback(async (paintingId: number, fixResult: FixPaintingImageResult) => {
    const data = await api.getPainting(paintingId);
    const patch: Partial<Painting> = {
@@ -308,6 +361,12 @@ export default function HomePage() {
          data: patchPaintingInMovementDetail(returnTo.data, paintingId, patch),
        };
      }
+      if (returnTo.type === 'tour-gallery') {
+        returnTo = {
+          ...returnTo,
+          data: patchPaintingInTourDetail(returnTo.data, paintingId, patch),
+        };
+      }
      return { ...current, data: updatedData, returnTo };
    });

@@ -322,6 +381,9 @@ export default function HomePage() {
      if (session?.kind === 'movement') {
        return { ...session, data: patchPaintingInMovementDetail(session.data, paintingId, patch) };
      }
+      if (session?.kind === 'tour') {
+        return { ...session, data: patchPaintingInTourDetail(session.data, paintingId, patch) };
+      }
      return session;
    });
  }, []);
@@ -353,6 +415,12 @@ export default function HomePage() {
            data: patchPaintingInMovementDetail(returnTo.data, paintingId, patch),
          };
        }
+        if (returnTo.type === 'tour-gallery') {
+          returnTo = {
+            ...returnTo,
+            data: patchPaintingInTourDetail(returnTo.data, paintingId, patch),
+          };
+        }
        return { ...current, data: updatedData, returnTo };
      });

@@ -367,6 +435,9 @@ export default function HomePage() {
        if (session?.kind === 'movement') {
          return { ...session, data: patchPaintingInMovementDetail(session.data, paintingId, patch) };
        }
+        if (session?.kind === 'tour') {
+          return { ...session, data: patchPaintingInTourDetail(session.data, paintingId, patch) };
+        }
        return session;
      });
    },
@@ -455,6 +526,32 @@ export default function HomePage() {
    setView({ type: 'movement-gallery', movementId, data });
  }, []);

+  const openTourGallery = useCallback((tourId: number, data: TourGalleryDetail) => {
+    const session: GallerySession = { kind: 'tour', tourId, data };
+    setGallerySession(session);
+    setView({ type: 'tour-gallery', tourId, data });
+  }, []);
+
+  const handleSelectPublishedTour = useCallback(
+    async (tourId: number) => {
+      setToursPopupOpen(false);
+      setGalleryEntryLoading(t('openingTourGallery'));
+      try {
+        const data = await api.getTour(tourId);
+        if (!data.paintings.length) {
+          setError(t('tourEmpty'));
+          return;
+        }
+        openTourGallery(tourId, data);
+      } catch {
+        setError(t('tourLoadFailed'));
+      } finally {
+        setGalleryEntryLoading(null);
+      }
+    },
+    [openTourGallery, t]
+  );
+
  const handleArtistClick = async (artistId: number) => {
    setGalleryEntryLoading('Opening artist gallery…');
    try {
@@ -517,25 +614,38 @@ export default function HomePage() {
      const currentView = viewRef.current;
      if (currentView.type !== 'painting' || currentView.paintingId !== paintingId) return;

-      const sorted = sortArtistPaintingsChronological(detailArtistPaintings);
+      const sorted =
+        gallerySession?.kind === 'tour' || currentView.returnTo.type === 'tour-gallery'
+          ? detailArtistPaintings
+          : sortArtistPaintingsChronological(detailArtistPaintings);
      const nextId = catalogNavigateTarget(sorted, paintingId);
      const inMovementCatalog =
        gallerySession?.kind === 'movement' || currentView.returnTo.type === 'movement-gallery';
+      const inTourCatalog =
+        gallerySession?.kind === 'tour' || currentView.returnTo.type === 'tour-gallery';

      await api.deletePainting(paintingId);

      const freshArtist = await api.getArtist(artistId);
        let freshMovement: MovementGalleryDetail | undefined;
+        let freshTour: TourGalleryDetail | undefined;
        if (gallerySession?.kind === 'movement') {
          freshMovement = await api.getMovementGallery(gallerySession.movementId);
        } else if (currentView.returnTo.type === 'movement-gallery') {
          freshMovement = await api.getMovementGallery(currentView.returnTo.movementId);
        }
+        if (gallerySession?.kind === 'tour') {
+          freshTour = await api.getTour(gallerySession.tourId);
+        } else if (currentView.returnTo.type === 'tour-gallery') {
+          freshTour = await api.getTour(currentView.returnTo.tourId);
+        }

        const freshCatalog =
-          inMovementCatalog && freshMovement
-            ? sortArtistPaintingsChronological(freshMovement.paintings)
-            : sortArtistPaintingsChronological(freshArtist.paintings);
+          inTourCatalog && freshTour
+            ? freshTour.paintings
+            : inMovementCatalog && freshMovement
+              ? sortArtistPaintingsChronological(freshMovement.paintings)
+              : sortArtistPaintingsChronological(freshArtist.paintings);

        const removedIdx = sorted.findIndex((p) => p.id === paintingId);
        const navigateId =
@@ -556,6 +666,9 @@ export default function HomePage() {
          if (session.kind === 'movement' && freshMovement) {
            return { ...session, data: freshMovement };
          }
+          if (session.kind === 'tour' && freshTour) {
+            return { ...session, data: freshTour };
+          }
          return session;
        });

@@ -570,7 +683,8 @@ export default function HomePage() {
        const patchedReturnTo = patchReturnToAfterRemove(
          currentView.returnTo,
          freshArtist,
-          freshMovement
+          freshMovement,
+          freshTour
        );
        detailReturnToRef.current = patchedReturnTo;

@@ -581,6 +695,9 @@ export default function HomePage() {
          if (current.type === 'movement-gallery' && freshMovement) {
            return { ...current, data: freshMovement };
          }
+          if (current.type === 'tour-gallery' && freshTour) {
+            return { ...current, data: freshTour };
+          }
          if (current.type !== 'painting' || current.paintingId !== paintingId) {
            return current;
          }
@@ -612,12 +729,20 @@ export default function HomePage() {
    }

    const artistId = view.data.painting.artist_id;
+    if (gallerySession?.kind === 'tour') {
+      setDetailArtistPaintings(gallerySession.data.paintings);
+      return;
+    }
    if (gallerySession?.kind === 'artist' && gallerySession.artistId === artistId) {
      setDetailArtistPaintings(gallerySession.data.paintings);
      return;
    }

    const returnTo = detailReturnToRef.current;
+    if (returnTo.type === 'tour-gallery') {
+      setDetailArtistPaintings(returnTo.data.paintings);
+      return;
+    }
    if (returnTo.type === 'movement-gallery') {
      setDetailArtistPaintings(sortArtistPaintingsChronological(returnTo.data.paintings));
      return;
@@ -637,12 +762,31 @@ export default function HomePage() {
    };
  }, [view, gallerySession]);

-  const sortedDetailArtistPaintings = useMemo(
-    () => sortArtistPaintingsChronological(detailArtistPaintings),
-    [detailArtistPaintings]
-  );
+  const sortedDetailArtistPaintings = useMemo(() => {
+    const fromTourSession = gallerySession?.kind === 'tour';
+    const fromTourReturn =
+      view.type === 'painting' && view.returnTo.type === 'tour-gallery';
+    if (fromTourSession || fromTourReturn) {
+      return detailArtistPaintings;
+    }
+    return sortArtistPaintingsChronological(detailArtistPaintings);
+  }, [detailArtistPaintings, gallerySession, view]);

-  const galleryActive = view.type === 'gallery' || view.type === 'movement-gallery';
+  const tourOverlay =
+    view.type === 'painting' && gallerySession?.kind === 'tour'
+      ? {
+          title: gallerySession.data.tour.title,
+          text: gallerySession.data.stopBodies[view.paintingId] ?? '',
+        }
+      : view.type === 'painting' && view.returnTo.type === 'tour-gallery'
+        ? {
+            title: view.returnTo.data.tour.title,
+            text: view.returnTo.data.stopBodies[view.paintingId] ?? '',
+          }
+        : null;
+
+  const galleryActive =
+    view.type === 'gallery' || view.type === 'movement-gallery' || view.type === 'tour-gallery';

  const displayGallery = useMemo((): GallerySession | null => {
    if (view.type === 'gallery') {
@@ -651,6 +795,9 @@ export default function HomePage() {
    if (view.type === 'movement-gallery') {
      return { kind: 'movement', movementId: view.movementId, data: view.data };
    }
+    if (view.type === 'tour-gallery') {
+      return { kind: 'tour', tourId: view.tourId, data: view.data };
+    }
    return gallerySession;
  }, [view, gallerySession]);

@@ -679,7 +826,7 @@ export default function HomePage() {
                })
              }
            />
-          ) : (
+          ) : displayGallery.kind === 'movement' ? (
            <VirtualGallery
              key={`movement-${displayGallery.movementId}-${galleryRevision}`}
              mode="movement"
@@ -689,6 +836,16 @@ export default function HomePage() {
              onPaintingClick={handlePaintingClick}
              onBack={goToTimelineHome}
            />
+          ) : (
+            <VirtualGallery
+              key={`tour-${displayGallery.tourId}-${galleryRevision}`}
+              mode="tour"
+              data={displayGallery.data}
+              imageRevisions={imageRevisions}
+              active={galleryActive}
+              onPaintingClick={handlePaintingClick}
+              onBack={goToTimelineHome}
+            />
          )}
        </div>
      )}
@@ -700,6 +857,8 @@ export default function HomePage() {
            data={view.data}
            artistPaintings={sortedDetailArtistPaintings}
            backLabel={view.returnTo.type === 'timeline' ? t('backToTimeline') : t('backToGallery')}
+            tourTitle={tourOverlay?.title ?? null}
+            tourText={tourOverlay ? tourOverlay.text : null}
            onBack={() => {
              if (view.returnTo.type === 'timeline') {
                goToTimelineHome();
@@ -718,10 +877,18 @@ export default function HomePage() {
                gallerySession.movementId === returnTo.movementId
              ) {
                openMovementGallery(gallerySession.movementId, gallerySession.data);
+              } else if (
+                returnTo.type === 'tour-gallery' &&
+                gallerySession?.kind === 'tour' &&
+                gallerySession.tourId === returnTo.tourId
+              ) {
+                openTourGallery(gallerySession.tourId, gallerySession.data);
              } else if (returnTo.type === 'gallery') {
                openArtistGallery(returnTo.artistId, returnTo.data);
              } else if (returnTo.type === 'movement-gallery') {
                openMovementGallery(returnTo.movementId, returnTo.data);
+              } else if (returnTo.type === 'tour-gallery') {
+                openTourGallery(returnTo.tourId, returnTo.data);
              } else {
                setView(returnTo);
              }
@@ -778,6 +945,25 @@ export default function HomePage() {
        )
      )}

+      {view.type === 'tours' && (
+        isCurator ? (
+          <ToursPage onBack={goToTimelineHome} />
+        ) : (
+          <div className="curator-login-gate">
+            <h2>{t('curatorRequiredTitle')}</h2>
+            <p>{t('curatorRequiredBody')}</p>
+            <div className="curator-login-gate-actions">
+              <button type="button" className="checkup-link-btn" onClick={() => openCuratorLogin('tours')}>
+                {t('curatorLogin')}
+              </button>
+              <button type="button" className="debug-mode-toggle" onClick={goToTimelineHome}>
+                {t('backToGalleryBtn')}
+              </button>
+            </div>
+          </div>
+        )
+      )}
+
      {view.type === 'translations' && (
        isCurator ? (
          <TranslationsPage onBack={goToTimelineHome} />
@@ -828,6 +1014,12 @@ export default function HomePage() {
        onLogin={handleCuratorLogin}
      />

+      <ToursPopup
+        open={toursPopupOpen}
+        onClose={() => setToursPopupOpen(false)}
+        onSelectTour={(tourId) => void handleSelectPublishedTour(tourId)}
+      />
+
      {view.type === 'timeline' && (
        <div className="home-page">
          <header className="site-header">
@@ -864,6 +1056,14 @@ export default function HomePage() {
                  >
                    {t('influences')}
                  </button>
+                  <button
+                    type="button"
+                    className="checkup-link-btn"
+                    onClick={openToursEditor}
+                    title="Create and edit guided tours"
+                  >
+                    {t('toursEditor')}
+                  </button>
                  <button
                    type="button"
                    className="checkup-link-btn"
@@ -899,6 +1099,14 @@ export default function HomePage() {
                  {t('curatorLogin')}
                </button>
              )}
+              <button
+                type="button"
+                className="checkup-link-btn"
+                onClick={() => setToursPopupOpen(true)}
+                title={t('tours')}
+              >
+                {t('tours')}
+              </button>
              <LocaleSwitcher onLocaleChange={handleLocaleChange} />
            </div>
            <h1>{t('title')}</h1>