feat: add scrollable menu with fade hints and home button transition

src/client/src/components/ListOfSights/SightFrame.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useMemo } from "react";
+import React, { useState, useEffect, useRef, useMemo, useLayoutEffect, useCallback } from "react";
 import axios from "axios";
 import { observer } from "mobx-react-lite";
 import { useGeolocationStore } from "../../stores";
@@ -46,6 +46,44 @@ const SightFrame = observer(({ media, sight_id, sight_name }) => {
   const idleTimerRef = useRef(null);
 
   const textWrapperRef = useRef(null);
+  const menuRef = useRef(null);
+  const [menuNeedsScroll, setMenuNeedsScroll] = useState(false);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  const updateScrollState = useCallback(() => {
+    const menu = menuRef.current;
+    if (!menu) return;
+    setCanScrollLeft(menu.scrollLeft > 2);
+    setCanScrollRight(menu.scrollLeft + menu.clientWidth < menu.scrollWidth - 2);
+  }, []);
+
+  useEffect(() => {
+    const menu = menuRef.current;
+    if (!menu || !menuNeedsScroll) {
+      setCanScrollLeft(false);
+      setCanScrollRight(false);
+      return;
+    }
+    updateScrollState();
+    menu.addEventListener('scroll', updateScrollState);
+    return () => menu.removeEventListener('scroll', updateScrollState);
+  }, [menuNeedsScroll, updateScrollState]);
+
+  useLayoutEffect(() => {
+    const menu = menuRef.current;
+    if (!menu) return;
+    const children = Array.from(menu.querySelectorAll('.sight-frame-menu-point'));
+    if (children.length < 2) {
+      setMenuNeedsScroll(false);
+      return;
+    }
+    const style = getComputedStyle(menu);
+    const availableWidth = menu.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+    const totalChildrenWidth = children.reduce((sum, el) => sum + el.offsetWidth, 0);
+    const evenGap = (availableWidth - totalChildrenWidth) / (children.length + 1);
+    setMenuNeedsScroll(evenGap < 10);
+  }, [articleSections, selectedSection]);
 
   // Автозакрытие fullscreen 3D при бездействии (60 сек)
   useEffect(() => {
@@ -674,34 +712,43 @@ const SightFrame = observer(({ media, sight_id, sight_name }) => {
           </>
         )}
       </div>
-      <div className="sight-frame-menu" style={selectedSection !== 0 ? { paddingLeft: '50px' } : undefined}>
+      <div className="sight-frame-menu-wrapper">
-        {selectedSection !== 0 && (
+        <div className="sight-frame-menu-fade left" style={{ opacity: canScrollLeft ? 1 : 0 }} />
-          <div
+        <div className="sight-frame-menu-fade right" style={{ opacity: canScrollRight ? 1 : 0 }} />
-            style={{
+      <div
-              position: "absolute",
+        className="sight-frame-menu"
-              left: "10px",
+        ref={menuRef}
-              marginTop: "-4.5px",
+        style={menuNeedsScroll ? { justifyContent: 'space-between' } : undefined}
-              zIndex: 1,
+      >
-              paddingLeft: "15px",
+        <div
-              paddingRight: "7.5px",
+          style={{
-              paddingTop: "4.5px",
+            position: "absolute",
-              paddingBottom: "4.5px",
+            left: "10px",
-              cursor: "pointer",
+            marginTop: "-4.5px",
-            }}
+            zIndex: 1,
-            onPointerUp={() => {
+            paddingLeft: "15px",
-              setSelectedSection(0);
+            paddingRight: "7.5px",
-              setIsFullscreen3D(false);
+            paddingTop: "4.5px",
-            }}
+            paddingBottom: "4.5px",
-          >
+            cursor: "pointer",
-            <img
+            opacity: selectedSection !== 0 ? 1 : 0,
-              src={subtractHomeIcon}
+            transform: selectedSection !== 0 ? "scale(1)" : "scale(0.5)",
-              alt=""
+            transition: "opacity 0.3s ease, transform 0.3s ease",
-              width="24"
+            pointerEvents: selectedSection !== 0 ? "auto" : "none",
-              height="21"
+          }}
-              style={{ display: "block" }}
+          onPointerUp={() => {
-            />
+            setSelectedSection(0);
-          </div>
+            setIsFullscreen3D(false);
-        )}
+          }}
+        >
+          <img
+            src={subtractHomeIcon}
+            alt=""
+            width="24"
+            height="21"
+            style={{ display: "block" }}
+          />
+        </div>
         {contentError ? (
           <p className="error-message">{contentError}</p>
         ) : (
@@ -725,6 +772,7 @@ const SightFrame = observer(({ media, sight_id, sight_name }) => {
           ))
         )}
       </div>
+      </div>
     </div>
   );
 });

src/client/src/styles/ListOfSights.css

@@ -362,9 +362,37 @@
   margin-bottom: 0;
 }
 
+.sight-frame-menu-wrapper {
+  position: relative;
+  width: 100%;
+  flex-shrink: 0;
+}
+
+.sight-frame-menu-fade {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 120px;
+  z-index: 3;
+  pointer-events: none;
+  transition: opacity 0.4s ease;
+}
+
+.sight-frame-menu-fade.left {
+  left: 0;
+  background: linear-gradient(to right, rgba(var(--carrier-right-menu-rgb, 179, 165, 152), 0.95), transparent);
+  border-radius: 0 0 0 10px;
+}
+
+.sight-frame-menu-fade.right {
+  right: 0;
+  background: linear-gradient(to left, rgba(var(--carrier-right-menu-rgb, 179, 165, 152), 0.95), transparent);
+  border-radius: 0 0 10px 0;
+}
+
 .sight-frame-menu {
   position: relative;
-  padding: 7px;
+  padding: 7px 60px;
   width: 100%;
   display: flex;
   align-items: center;
@@ -382,6 +410,17 @@
   backdrop-filter: blur(10px);
   box-sizing: border-box;
   flex-shrink: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.sight-frame-menu::-webkit-scrollbar {
+  display: none;
+}
+
+.sight-frame-menu {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
 
 .sight-frame-menu-point {
@@ -393,6 +432,7 @@
   font-weight: 400;
   padding: 8px 12px;
   white-space: nowrap;
+  flex-shrink: 0;
   transition:
     background-color 0.1s ease,
     color 0.1s ease;

src/pages/Article/ArticleCreatePage/index.tsx

@@ -1,12 +1,17 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { ArrowLeft } from "lucide-react";
 import { LanguageSwitcher } from "@widgets";
-import { articlesStore } from "@shared";
+import { articlesStore, selectedCityStore } from "@shared";
 
 const ArticleCreatePage: React.FC = () => {
   const navigate = useNavigate();
 
+  useEffect(() => {
+    selectedCityStore.setIsLocked(true);
+    return () => selectedCityStore.setIsLocked(false);
+  }, []);
+
   const { articleData } = articlesStore;
 
   return (

src/pages/Article/ArticleEditPage/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { ArrowLeft } from "lucide-react";
 import { LanguageSwitcher } from "@widgets";
-import { articlesStore, languageStore } from "@shared";
+import { articlesStore, languageStore, selectedCityStore } from "@shared";
 import { observer } from "mobx-react-lite";
 
 const ArticleEditPage: React.FC = observer(() => {
@@ -11,6 +11,11 @@ const ArticleEditPage: React.FC = observer(() => {
 
   const { articleData, getArticle } = articlesStore;
 
+  useEffect(() => {
+    selectedCityStore.setIsLocked(true);
+    return () => selectedCityStore.setIsLocked(false);
+  }, []);
+
   useEffect(() => {
     // Устанавливаем русский язык при загрузке страницы
     languageStore.setLanguage("ru");

src/pages/Carrier/CarrierCreatePage/index.tsx

@@ -20,6 +20,7 @@ import {
   languageStore,
   isMediaIdEmpty,
   useSelectedCity,
+  selectedCityStore,
   SelectMediaDialog,
   UploadMediaDialog,
   PreviewMediaDialog,
@@ -93,6 +94,11 @@ export const CarrierCreatePage = observer(() => {
     "thumbnail" | "watermark_lu" | "watermark_rd" | "image" | null
   >(null);
 
+  useEffect(() => {
+    selectedCityStore.setIsLocked(true);
+    return () => selectedCityStore.setIsLocked(false);
+  }, []);
+
   useEffect(() => {
     const fetchCities = async () => {
       if (!authStore.me) {

src/pages/Carrier/CarrierEditPage/index.tsx

@@ -21,6 +21,7 @@ import {
   languageStore,
   isMediaIdEmpty,
   LoadingSpinner,
+  selectedCityStore,
 } from "@shared";
 import { useState, useEffect } from "react";
 import { ImageUploadCard, LanguageSwitcher, DeleteModal } from "@widgets";
@@ -103,6 +104,11 @@ export const CarrierEditPage = observer(() => {
     "thumbnail" | "watermark_lu" | "watermark_rd" | "image" | null
   >(null);
 
+  useEffect(() => {
+    selectedCityStore.setIsLocked(true);
+    return () => selectedCityStore.setIsLocked(false);
+  }, []);
+
   useEffect(() => {
     (async () => {
       if (!id) {

src/pages/City/CityListPage/index.tsx

@@ -1,6 +1,6 @@
 import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
 import { ruRU } from "@mui/x-data-grid/locales";
-import { authStore, languageStore, cityStore, countryStore, selectedCityStore, SearchInput } from "@shared";
+import { authStore, languageStore, cityStore, countryStore, SearchInput } from "@shared";
 import { useEffect, useState, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { Pencil, Trash2, Minus } from "lucide-react";
@@ -59,21 +59,16 @@ export const CityListPage = observer(() => {
   }, [cities, countryStore.countries, language, isLoading]);
 
   const filteredRows = useMemo(() => {
-    const { selectedCityId } = selectedCityStore;
-    if (!selectedCityId) return [];
-    
     const query = searchQuery.trim().toLowerCase();
-    const result = rows.filter((row) => row.id === selectedCityId);
+    if (!query) return rows;
-
+    return rows.filter((row) => {
-    if (!query) return result;
-    return result.filter((row) => {
       const cityName = (row.name ?? "").toLowerCase();
       const countryName = (
         countryStore.countries[language]?.data?.find((c) => c.code === row.country)?.name ?? ""
       ).toLowerCase();
       return cityName.includes(query) || countryName.includes(query);
     });
-  }, [rows, searchQuery, countryStore.countries, language, selectedCityStore.selectedCityId]);
+  }, [rows, searchQuery, countryStore.countries, language]);
 
   const columns: GridColDef[] = [
     {
@@ -148,7 +143,6 @@ export const CityListPage = observer(() => {
             <CreateButton
               label="Создать город"
               path="/city/create"
-              disabled={!selectedCityStore.selectedCityId}
             />
           )}
         </div>
@@ -214,8 +208,6 @@ export const CityListPage = observer(() => {
               <Box sx={{ mt: 5, textAlign: "center", color: "text.secondary" }}>
                 {isLoading ? (
                   <CircularProgress size={20} />
-                ) : !selectedCityStore.selectedCityId ? (
-                  "Выберите город"
                 ) : (
                   "Нет городов"
                 )}

src/pages/Country/CountryListPage/index.tsx

@@ -1,6 +1,6 @@
 import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
 import { ruRU } from "@mui/x-data-grid/locales";
-import { authStore, countryStore, languageStore, selectedCityStore, SearchInput } from "@shared";
+import { authStore, countryStore, languageStore, SearchInput } from "@shared";
 import { useEffect, useState, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { Trash2, Minus } from "lucide-react";
@@ -74,20 +74,15 @@ export const CountryListPage = observer(() => {
   ];
 
   const rows = useMemo(() => {
-    const { selectedCity } = selectedCityStore;
-    if (!selectedCity) {
-      return [];
-    }
     const query = searchQuery.trim().toLowerCase();
     return (countries[language]?.data ?? [])
-      .filter((country) => country.code === selectedCity.country_code)
       .filter((country) => !query || (country.name ?? "").toLowerCase().includes(query))
       .map((country) => ({
         id: country.code,
         code: country.code,
         name: country.name,
       }));
-  }, [countries[language]?.data, searchQuery, selectedCityStore.selectedCity]);
+  }, [countries[language]?.data, searchQuery]);
 
   return (
     <>
@@ -100,7 +95,6 @@ export const CountryListPage = observer(() => {
             <CreateButton
               label="Добавить страну"
               path="/country/add"
-              disabled={!selectedCityStore.selectedCityId}
             />
           )}
         </div>
@@ -161,8 +155,6 @@ export const CountryListPage = observer(() => {
               <Box sx={{ mt: 5, textAlign: "center", color: "text.secondary" }}>
                 {isLoading ? (
                   <CircularProgress size={20} />
-                ) : !selectedCityStore.selectedCityId ? (
-                  "Выберите город"
                 ) : (
                   "Нет стран"
                 )}

src/pages/CreateSightPage/index.tsx

@@ -37,16 +37,6 @@ export const CreateSightPage = observer(() => {
     return () => selectedCityStore.setIsLocked(false);
   }, []);
 
-  useEffect(() => {
-    const { selectedCityId, selectedCity } = selectedCityStore;
-    if (selectedCityId && selectedCity && !createSightStore.sight.city_id) {
-      runInAction(() => {
-        createSightStore.sight.city_id = selectedCityId;
-        createSightStore.sight.city = selectedCity.name;
-      });
-    }
-  }, []);
-
   const handleChange = (_: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
   };
@@ -73,6 +63,14 @@ export const CreateSightPage = observer(() => {
         await authStore.fetchMeCities().catch(() => undefined);
       }
       await getArticles(languageStore.language);
+
+      const { selectedCityId, selectedCity } = selectedCityStore;
+      if (selectedCityId && selectedCity && !createSightStore.sight.city_id) {
+        runInAction(() => {
+          createSightStore.sight.city_id = selectedCityId;
+          createSightStore.sight.city = selectedCity.name;
+        });
+      }
     };
     fetchData();
   }, []);

src/pages/Media/MediaCreatePage/index.tsx

@@ -10,7 +10,7 @@ import {
 import { mediaStore, MEDIA_TYPE_LABELS, selectedCityStore } from "@shared";
 import { observer } from "mobx-react-lite";
 import { ArrowLeft, Loader2, Save } from "lucide-react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 
@@ -20,6 +20,11 @@ export const MediaCreatePage = observer(() => {
   const [type, setType] = useState("");
   const [isLoading, setIsLoading] = useState(false);
 
+  useEffect(() => {
+    selectedCityStore.setIsLocked(true);
+    return () => selectedCityStore.setIsLocked(false);
+  }, []);
+
   const handleCreate = async () => {
     try {
       setIsLoading(true);

src/pages/Media/MediaEditPage/index.tsx

@@ -22,6 +22,7 @@ import {
   MEDIA_TYPE_LABELS,
   languageStore,
   LoadingSpinner,
+  selectedCityStore,
 } from "@shared";
 import { MediaViewer } from "@widgets";
 
@@ -42,6 +43,11 @@ export const MediaEditPage = observer(() => {
   const [mediaType, setMediaType] = useState(media?.media_type ?? 1);
   const [availableMediaTypes, setAvailableMediaTypes] = useState<number[]>([]);
 
+  useEffect(() => {
+    selectedCityStore.setIsLocked(true);
+    return () => selectedCityStore.setIsLocked(false);
+  }, []);
+
   useEffect(() => {
     if (id) {
       mediaStore.getOneMedia(id);

src/pages/Route/RouteListPage/index.tsx

@@ -254,7 +254,6 @@ export const RouteListPage = observer(() => {
             <CreateButton
               label="Создать маршрут"
               path="/route/create"
-              disabled={!selectedCityStore.selectedCityId}
             />
           )}
         </div>

src/pages/Sight/SightListPage/index.tsx

@@ -165,7 +165,6 @@ export const SightListPage = observer(() => {
             <CreateButton
               label="Создать достопримечательность"
               path="/sight/create"
-              disabled={!selectedCityStore.selectedCityId}
             />
           )}
         </div>

src/pages/Snapshot/SnapshotCreatePage/index.tsx

@@ -6,10 +6,10 @@ import {
   DialogContent,
   DialogActions,
 } from "@mui/material";
-import { snapshotStore, authStore, routeStore } from "@shared";
+import { snapshotStore, authStore, routeStore, selectedCityStore } from "@shared";
 import { observer } from "mobx-react-lite";
 import { ArrowLeft, Loader2, Save } from "lucide-react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import { runInAction } from "mobx";
@@ -17,6 +17,12 @@ import { runInAction } from "mobx";
 export const SnapshotCreatePage = observer(() => {
   const { createSnapshot, getSnapshotStatus, getStorageInfo, snapshotStatus } = snapshotStore;
   const navigate = useNavigate();
+
+  useEffect(() => {
+    selectedCityStore.setIsLocked(true);
+    return () => selectedCityStore.setIsLocked(false);
+  }, []);
+
   const [name, setName] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [duplicateWarningOpen, setDuplicateWarningOpen] = useState(false);

src/pages/Station/StationListPage/index.tsx

@@ -209,7 +209,6 @@ export const StationListPage = observer(() => {
             <CreateButton
               label="Создать остановку"
               path="/station/create"
-              disabled={!selectedCityStore.selectedCityId}
             />
           )}
         </div>

src/pages/User/UserCreatePage/index.tsx

@@ -25,6 +25,7 @@ import {
   SelectMediaDialog,
   UploadMediaDialog,
   PreviewMediaDialog,
+  selectedCityStore,
 } from "@shared";
 import { useState, useEffect } from "react";
 import { ImageUploadCard } from "@widgets";
@@ -79,6 +80,11 @@ export const UserCreatePage = observer(() => {
     createUserData.roles ?? ["articles_ro", "articles_rw", "media_ro", "media_rw"]
   );
 
+  useEffect(() => {
+    selectedCityStore.setIsLocked(true);
+    return () => selectedCityStore.setIsLocked(false);
+  }, []);
+
   useEffect(() => {
     mediaStore.getMedia();
   }, []);

src/pages/User/UserEditPage/index.tsx

@@ -30,6 +30,7 @@ import {
   authStore,
   cityStore,
   MultiSelect,
+  selectedCityStore,
   type User,
   type UserCity,
 } from "@shared";
@@ -92,6 +93,11 @@ export const UserEditPage = observer(() => {
     "thumbnail" | "watermark_lu" | "watermark_rd" | "image" | null
   >(null);
 
+  useEffect(() => {
+    selectedCityStore.setIsLocked(true);
+    return () => selectedCityStore.setIsLocked(false);
+  }, []);
+
   useEffect(() => {
     languageStore.setLanguage("ru");
   }, []);

src/pages/Vehicle/VehicleCreatePage/index.tsx

@@ -32,6 +32,11 @@ export const VehicleCreatePage = observer(() => {
   const [isLoading, setIsLoading] = useState(false);
   const { language } = languageStore;
 
+  useEffect(() => {
+    selectedCityStore.setIsLocked(true);
+    return () => selectedCityStore.setIsLocked(false);
+  }, []);
+
   useEffect(() => {
     carrierStore.getCarriers(language);
     cityStore.getCities("ru");

src/pages/Vehicle/VehicleEditPage/index.tsx

@@ -40,6 +40,11 @@ export const VehicleEditPage = observer(() => {
   const [isLoading, setIsLoading] = useState(false);
   const [isLoadingData, setIsLoadingData] = useState(true);
 
+  useEffect(() => {
+    selectedCityStore.setIsLocked(true);
+    return () => selectedCityStore.setIsLocked(false);
+  }, []);
+
   useEffect(() => {
     // Устанавливаем русский язык при загрузке страницы
     languageStore.setLanguage("ru");

src/pages/Vehicle/VehicleListPage/index.tsx

@@ -170,7 +170,6 @@ export const VehicleListPage = observer(() => {
           <CreateButton
             label="Создать транспортное средство"
             path="/vehicle/create"
-            disabled={!selectedCityId}
           />
         </div>
 

src/shared/store/SnapshotStore/index.ts

@@ -60,12 +60,6 @@ class SnapshotStore {
       articlesStore.articleData = null;
       articlesStore.articleMedia = null;
 
-      countryStore.countries = {
-        ru: { data: [], loaded: false },
-        en: { data: [], loaded: false },
-        zh: { data: [], loaded: false },
-      };
-
       carrierStore.carriers = {
         ru: { data: [], loaded: false },
         en: { data: [], loaded: false },