From 5298fb9f605123155b7a3fbdbca4396cdf4c5aaa Mon Sep 17 00:00:00 2001
From: fisenko <kkzemeow@gmail.com>
Date: Thu, 6 Nov 2025 00:32:19 +0300
Subject: [PATCH] feat: Add `description` for stations in sightbar

---
 src/pages/MapPage/index.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/pages/MapPage/index.tsx b/src/pages/MapPage/index.tsx
index 6ada42b..db3732b 100644
--- a/src/pages/MapPage/index.tsx
+++ b/src/pages/MapPage/index.tsx
@@ -139,6 +139,7 @@ interface ApiRoute {
 interface ApiStation {
   id: number;
   name: string;
+  description?: string;
   latitude: number;
   longitude: number;
   city_id: number;
@@ -2375,6 +2376,7 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
             )
           ),
           name: station.name,
+          description: station.description || "",
         });
         feature.setId(`station-${station.id}`);
         feature.set("featureType", "station");
@@ -2813,11 +2815,19 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
               numericRouteId !== null &&
               mapStore.hiddenRoutes.has(numericRouteId);
 
+            const description = feature.get("description") as
+              | string
+              | undefined;
+            const showDescription =
+              featureType === "station" &&
+              description &&
+              description.trim() !== "";
+
             return (
               <div
                 key={String(fId)}
                 data-feature-id={fId}
-                className={`flex items-start p-2 rounded-md group transition-colors duration-150 ${
+                className={`flex items-start p-2 rounded-md group transition-colors duration-150 relative ${
                   isSelected
                     ? "bg-orange-100 border border-orange-300"
                     : "hover:bg-blue-50"
@@ -2860,6 +2870,11 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
                       {fName}
                     </span>
                   </div>
+                  {showDescription && (
+                    <div className="mt-1 text-xs text-gray-600 line-clamp-2">
+                      {description}
+                    </div>
+                  )}
                 </div>
                 <div className="flex-shrink-0 flex items-center space-x-1 opacity-60 group-hover:opacity-100">
                   <button