feat: cache delete + empty snapshot + route page

src/widgets/SightTabs/RightWidgetTab/SightFramePreview.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
 import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer";
 import { ReactMarkdownComponent } from "../../ReactMarkdown";
 import { ThreeViewErrorBoundary } from "../../MediaViewer/ThreeViewErrorBoundary";
@@ -34,6 +34,8 @@ interface SightFramePreviewProps {
   articles: Article[];
   onArticleSelect: (index: number) => void;
   previewFontSize?: number;
+  selectedSection: number;
+  onSectionChange: (section: number) => void;
 }
 
 // Matches SightFrame.jsx renderCurrentMedia — same structure, same CSS classes
@@ -153,11 +155,10 @@ export function SightFramePreview({
   articles,
   onArticleSelect,
   previewFontSize,
+  selectedSection,
+  onSectionChange,
 }: SightFramePreviewProps) {
   const token = localStorage.getItem("token") ?? "";
-
-  // -1 = intro (section 0 in SightFrame)
-  const [selectedSection, setSelectedSection] = useState<number>(-1);
   const [threeViewResetKey, setThreeViewResetKey] = useState(0);
   const threeViewControlRef = useRef<ThreeViewHandle | null>(null);
 
@@ -175,6 +176,17 @@ export function SightFramePreview({
   // Replicates processedSightName from SightFrame.jsx
   const processedSightName = useMemo(() => {
     if (!sightName) return sightName;
+
+    // Handle \n line breaks
+    if (sightName.includes("\n")) {
+      return sightName.split("\n").map((line, i) => (
+        <React.Fragment key={i}>
+          {i > 0 && <br />}
+          {line}
+        </React.Fragment>
+      ));
+    }
+
     const namePattern =
       /([А-Яа-яA-Za-z0-9]\. [А-Яа-яA-Za-z0-9]\. [А-Яа-яA-Za-z0-9]+)/g;
     const parts = sightName.split(namePattern);
@@ -199,10 +211,9 @@ export function SightFramePreview({
   // Replicates titleLineHeight from SightFrame.jsx
   const titleLineHeight = useMemo(() => {
     if (!sightName) return "120%";
-    const textLength = sightName.length;
     const calculatedLineHeight = Math.max(
       100,
-      Math.min(120, 120 - (textLength / 10) * 1)
+      Math.min(120, 120 - (sightName.length / 10) * 1)
     );
     return `${calculatedLineHeight}%`;
   }, [sightName]);
@@ -272,7 +283,7 @@ export function SightFramePreview({
           <button
             className="sfp-back-btn"
             type="button"
-            onClick={() => setSelectedSection(-1)}
+            onClick={() => onSectionChange(-1)}
           >
             <svg
               width="20"
@@ -320,7 +331,7 @@ export function SightFramePreview({
             type="button"
             className={`sfp-sight-frame-menu-point${selectedSection === index ? " active" : ""}`}
             onClick={() => {
-              setSelectedSection(index);
+              onSectionChange(index);
               onArticleSelect(index);
             }}
           >