From 7e539f550b39ca29f5905359063a1243e7369e3f Mon Sep 17 00:00:00 2001
From: itoshi <kkzemeow@gmail.com>
Date: Tue, 19 May 2026 14:14:04 +0300
Subject: [PATCH] feat: hide search input when list is empty and add animated
 city selector highlight

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/pages/Article/ArticleListPage/index.tsx   |   4 +-
 src/pages/Carrier/CarrierListPage/index.tsx   |   4 +-
 src/pages/City/CityListPage/index.tsx         |   4 +-
 src/pages/Country/CountryListPage/index.tsx   |   4 +-
 src/pages/Media/MediaListPage/index.tsx       |   4 +-
 src/pages/Route/RouteListPage/index.tsx       |   4 +-
 src/pages/Sight/SightListPage/index.tsx       |   4 +-
 src/pages/Snapshot/SnapshotListPage/index.tsx |   4 +-
 src/pages/Station/StationListPage/index.tsx   |   4 +-
 src/pages/User/UserListPage/index.tsx         |   4 +-
 src/pages/Vehicle/VehicleListPage/index.tsx   |   4 +-
 src/widgets/CitySelector/index.tsx            | 117 ++++++++++++------
 12 files changed, 111 insertions(+), 50 deletions(-)

diff --git a/src/pages/Article/ArticleListPage/index.tsx b/src/pages/Article/ArticleListPage/index.tsx
index b3f3a3a..acb577a 100644
--- a/src/pages/Article/ArticleListPage/index.tsx
+++ b/src/pages/Article/ArticleListPage/index.tsx
@@ -108,7 +108,9 @@ export const ArticleListPage = observer(() => {
           </div>
         )}
 
-        <SearchInput value={searchQuery} onChange={setSearchQuery} />
+        {rows.length > 0 && (
+          <SearchInput value={searchQuery} onChange={setSearchQuery} />
+        )}
 
         <div className="w-full">
           <DataGrid
diff --git a/src/pages/Carrier/CarrierListPage/index.tsx b/src/pages/Carrier/CarrierListPage/index.tsx
index e55ef6e..66bdec5 100644
--- a/src/pages/Carrier/CarrierListPage/index.tsx
+++ b/src/pages/Carrier/CarrierListPage/index.tsx
@@ -162,7 +162,9 @@ export const CarrierListPage = observer(() => {
           </div>
         )}
 
-        <SearchInput value={searchQuery} onChange={setSearchQuery} />
+        {rows.length > 0 && (
+          <SearchInput value={searchQuery} onChange={setSearchQuery} />
+        )}
 
         <DataGrid
           rows={rows}
diff --git a/src/pages/City/CityListPage/index.tsx b/src/pages/City/CityListPage/index.tsx
index 7b82812..d7e823b 100644
--- a/src/pages/City/CityListPage/index.tsx
+++ b/src/pages/City/CityListPage/index.tsx
@@ -165,7 +165,9 @@ export const CityListPage = observer(() => {
           </div>
         )}
 
-        <SearchInput value={searchQuery} onChange={setSearchQuery} />
+        {rows.length > 0 && (
+          <SearchInput value={searchQuery} onChange={setSearchQuery} />
+        )}
 
         <DataGrid
           rows={filteredRows}
diff --git a/src/pages/Country/CountryListPage/index.tsx b/src/pages/Country/CountryListPage/index.tsx
index 92555f4..ee6c898 100644
--- a/src/pages/Country/CountryListPage/index.tsx
+++ b/src/pages/Country/CountryListPage/index.tsx
@@ -117,7 +117,9 @@ export const CountryListPage = observer(() => {
           </div>
         )}
 
-        <SearchInput value={searchQuery} onChange={setSearchQuery} />
+        {rows.length > 0 && (
+          <SearchInput value={searchQuery} onChange={setSearchQuery} />
+        )}
 
         <DataGrid
           rows={rows}
diff --git a/src/pages/Media/MediaListPage/index.tsx b/src/pages/Media/MediaListPage/index.tsx
index 9c93546..3ab62e9 100644
--- a/src/pages/Media/MediaListPage/index.tsx
+++ b/src/pages/Media/MediaListPage/index.tsx
@@ -113,7 +113,9 @@ export const MediaListPage = observer(() => {
   return (
     <>
       <div className="w-full">
-        <SearchInput value={searchQuery} onChange={setSearchQuery} />
+        {rows.length > 0 && (
+          <SearchInput value={searchQuery} onChange={setSearchQuery} />
+        )}
 
         {canWriteMedia && ids.length > 0 && (
           <div className="flex justify-end mb-5 duration-300">
diff --git a/src/pages/Route/RouteListPage/index.tsx b/src/pages/Route/RouteListPage/index.tsx
index 652ad5e..c27a81f 100644
--- a/src/pages/Route/RouteListPage/index.tsx
+++ b/src/pages/Route/RouteListPage/index.tsx
@@ -271,7 +271,9 @@ export const RouteListPage = observer(() => {
           </div>
         )}
 
-        <SearchInput value={searchQuery} onChange={setSearchQuery} />
+        {rows.length > 0 && (
+          <SearchInput value={searchQuery} onChange={setSearchQuery} />
+        )}
 
         <DataGrid
           rows={rows}
diff --git a/src/pages/Sight/SightListPage/index.tsx b/src/pages/Sight/SightListPage/index.tsx
index 78861d4..849a0f6 100644
--- a/src/pages/Sight/SightListPage/index.tsx
+++ b/src/pages/Sight/SightListPage/index.tsx
@@ -182,7 +182,9 @@ export const SightListPage = observer(() => {
           </div>
         )}
 
-        <SearchInput value={searchQuery} onChange={setSearchQuery} />
+        {rows.length > 0 && (
+          <SearchInput value={searchQuery} onChange={setSearchQuery} />
+        )}
 
         <DataGrid
           rows={rows}
diff --git a/src/pages/Snapshot/SnapshotListPage/index.tsx b/src/pages/Snapshot/SnapshotListPage/index.tsx
index ca5dbcb..4bc32de 100644
--- a/src/pages/Snapshot/SnapshotListPage/index.tsx
+++ b/src/pages/Snapshot/SnapshotListPage/index.tsx
@@ -299,7 +299,9 @@ export const SnapshotListPage = observer(() => {
           </Alert>
         )}
 
-        <SearchInput value={searchQuery} onChange={setSearchQuery} />
+        {rows.length > 0 && (
+          <SearchInput value={searchQuery} onChange={setSearchQuery} />
+        )}
 
         <DataGrid
           rows={rows}
diff --git a/src/pages/Station/StationListPage/index.tsx b/src/pages/Station/StationListPage/index.tsx
index 059d429..3f1c3f1 100644
--- a/src/pages/Station/StationListPage/index.tsx
+++ b/src/pages/Station/StationListPage/index.tsx
@@ -226,7 +226,9 @@ export const StationListPage = observer(() => {
           </div>
         )}
 
-        <SearchInput value={searchQuery} onChange={setSearchQuery} />
+        {rows.length > 0 && (
+          <SearchInput value={searchQuery} onChange={setSearchQuery} />
+        )}
 
         <DataGrid
           rows={rows}
diff --git a/src/pages/User/UserListPage/index.tsx b/src/pages/User/UserListPage/index.tsx
index 0240697..11f7a44 100644
--- a/src/pages/User/UserListPage/index.tsx
+++ b/src/pages/User/UserListPage/index.tsx
@@ -147,7 +147,9 @@ export const UserListPage = observer(() => {
           </div>
         )}
 
-        <SearchInput value={searchQuery} onChange={setSearchQuery} />
+        {rows.length > 0 && (
+          <SearchInput value={searchQuery} onChange={setSearchQuery} />
+        )}
 
         <DataGrid
           rows={rows}
diff --git a/src/pages/Vehicle/VehicleListPage/index.tsx b/src/pages/Vehicle/VehicleListPage/index.tsx
index 3187b00..dacf787 100644
--- a/src/pages/Vehicle/VehicleListPage/index.tsx
+++ b/src/pages/Vehicle/VehicleListPage/index.tsx
@@ -174,7 +174,9 @@ export const VehicleListPage = observer(() => {
           />
         </div>
 
-        <SearchInput value={searchQuery} onChange={setSearchQuery} />
+        {rows.length > 0 && (
+          <SearchInput value={searchQuery} onChange={setSearchQuery} />
+        )}
 
         {canWriteVehicles && ids.length > 0 && (
           <div className="flex justify-end mb-5 duration-300">
diff --git a/src/widgets/CitySelector/index.tsx b/src/widgets/CitySelector/index.tsx
index 418fb34..6401149 100644
--- a/src/widgets/CitySelector/index.tsx
+++ b/src/widgets/CitySelector/index.tsx
@@ -6,11 +6,21 @@ import {
   SelectChangeEvent,
   Typography,
   Box,
+  keyframes,
 } from "@mui/material";
 import { observer } from "mobx-react-lite";
 import { authStore, cityStore, selectedCityStore, snapshotStore, type City } from "@shared";
 import { MapPin } from "lucide-react";
 
+const borderSpin = keyframes`
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 200% 50%;
+  }
+`;
+
 export const CitySelector: React.FC = observer(() => {
   const { selectedCity, setSelectedCity, isLocked } = selectedCityStore;
   const canLoadAllCities = authStore.isAdmin && authStore.canRead("cities");
@@ -43,6 +53,8 @@ export const CitySelector: React.FC = observer(() => {
       })()
     : baseCities;
 
+  const noCitySelected = !selectedCity?.id;
+
   const handleCityChange = (event: SelectChangeEvent<string>) => {
     const cityId = event.target.value;
     if (cityId === "") {
@@ -58,49 +70,76 @@ export const CitySelector: React.FC = observer(() => {
     }
   };
 
+  const selectElement = (
+    <Select
+      value={selectedCity?.id?.toString() || ""}
+      onChange={handleCityChange}
+      displayEmpty
+      disabled={isLocked}
+      sx={{
+        height: "40px",
+        color: "white",
+        borderRadius: "4px",
+        ...(noCitySelected && !isLocked
+          ? {
+              backgroundColor: "#48989f",
+              "& .MuiOutlinedInput-notchedOutline": { border: "none" },
+            }
+          : {
+              "& .MuiOutlinedInput-notchedOutline": {
+                borderColor: isLocked
+                  ? "rgba(255, 255, 255, 0.1)"
+                  : "rgba(255, 255, 255, 0.3)",
+              },
+            }),
+        "&.Mui-disabled": {
+          color: "rgba(255, 255, 255, 0.5)",
+          WebkitTextFillColor: "rgba(255, 255, 255, 0.5)",
+        },
+        "&:hover .MuiOutlinedInput-notchedOutline": {
+          borderColor: isLocked
+            ? "rgba(255, 255, 255, 0.1)"
+            : "rgba(255, 255, 255, 0.5)",
+        },
+        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+          borderColor: "white",
+        },
+        "& .MuiSvgIcon-root": {
+          color: isLocked ? "rgba(255, 255, 255, 0.3)" : "white",
+        },
+      }}
+    >
+      <MenuItem value="">
+        <Typography variant="body2">Выберите город</Typography>
+      </MenuItem>
+      {currentCities.map((city) => (
+        <MenuItem key={city.id} value={city.id?.toString()}>
+          <Typography variant="body2">{city.name}</Typography>
+        </MenuItem>
+      ))}
+    </Select>
+  );
+
   return (
     <Box className="flex items-center gap-2">
       <MapPin size={16} className={isLocked ? "text-gray-400" : "text-white"} />
       <FormControl size="medium" sx={{ minWidth: 120 }}>
-        <Select
-          value={selectedCity?.id?.toString() || ""}
-          onChange={handleCityChange}
-          displayEmpty
-          disabled={isLocked}
-          sx={{
-            height: "40px",
-            color: "white",
-            "&.Mui-disabled": {
-              color: "rgba(255, 255, 255, 0.5)",
-              WebkitTextFillColor: "rgba(255, 255, 255, 0.5)",
-            },
-            "& .MuiOutlinedInput-notchedOutline": {
-              borderColor: isLocked
-                ? "rgba(255, 255, 255, 0.1)"
-                : "rgba(255, 255, 255, 0.3)",
-            },
-            "&:hover .MuiOutlinedInput-notchedOutline": {
-              borderColor: isLocked
-                ? "rgba(255, 255, 255, 0.1)"
-                : "rgba(255, 255, 255, 0.5)",
-            },
-            "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-              borderColor: "white",
-            },
-            "& .MuiSvgIcon-root": {
-              color: isLocked ? "rgba(255, 255, 255, 0.3)" : "white",
-            },
-          }}
-        >
-          <MenuItem value="">
-            <Typography variant="body2">Выберите город</Typography>
-          </MenuItem>
-          {currentCities.map((city) => (
-            <MenuItem key={city.id} value={city.id?.toString()}>
-              <Typography variant="body2">{city.name}</Typography>
-            </MenuItem>
-          ))}
-        </Select>
+        {noCitySelected && !isLocked ? (
+          <Box
+            sx={{
+              position: "relative",
+              borderRadius: "4px",
+              padding: "2px",
+              background: "linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.7), rgba(255,255,255,0.1), rgba(255,255,255,0.7), rgba(255,255,255,0.1))",
+              backgroundSize: "200% 100%",
+              animation: `${borderSpin} 2.5s linear infinite`,
+            }}
+          >
+            {selectElement}
+          </Box>
+        ) : (
+          selectElement
+        )}
       </FormControl>
     </Box>
   );