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

@@ -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

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}

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}

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}

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">

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}

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}

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}

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}

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}

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">