From 1c117903f6857c64899f24f399b1fae41d062868 Mon Sep 17 00:00:00 2001
From: DanSylvest <cublakhan257@gmail.com>
Date: Tue, 25 Nov 2025 21:51:01 +0300
Subject: [PATCH 1/2] fix(Map): Add ability to see character passage direction
 in list of passages

---
 .../Connections/Connections.module.scss       |  2 +-
 .../components/Connections/Connections.tsx    | 28 +++++++++++--
 .../PassageCard/PassageCard.module.scss       |  4 ++
 .../Connections/PassageCard/PassageCard.tsx   | 42 ++++++++++++++++---
 .../hooks/Mapper/types/connectionPassages.ts  |  6 +++
 5 files changed, 73 insertions(+), 9 deletions(-)

diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/Connections.module.scss b/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/Connections.module.scss
index 42c9c058..fd2d2393 100644
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/Connections.module.scss
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/Connections.module.scss
@@ -3,7 +3,7 @@
 }
 
 .SidebarOnTheMap {
-  width: 400px;
+  width: 460px;
   padding: 0 !important;
 
   :global {
diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/Connections.tsx b/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/Connections.tsx
index d88d6b24..670863ff 100644
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/Connections.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/Connections.tsx
@@ -5,6 +5,7 @@ import {
   ConnectionType,
   OutCommand,
   Passage,
+  PassageWithSourceTarget,
   SolarSystemConnection,
 } from '@/hooks/Mapper/types';
 import clsx from 'clsx';
@@ -19,7 +20,7 @@ import { PassageCard } from './PassageCard';
 
 const sortByDate = (a: string, b: string) => new Date(a).getTime() - new Date(b).getTime();
 
-const itemTemplate = (item: Passage, options: VirtualScrollerTemplateOptions) => {
+const itemTemplate = (item: PassageWithSourceTarget, options: VirtualScrollerTemplateOptions) => {
   return (
     <div
       className={clsx(classes.CharacterRow, 'w-full box-border', {
@@ -35,7 +36,7 @@ const itemTemplate = (item: Passage, options: VirtualScrollerTemplateOptions) =>
 };
 
 export interface ConnectionPassagesContentProps {
-  passages: Passage[];
+  passages: PassageWithSourceTarget[];
 }
 
 export const ConnectionPassages = ({ passages = [] }: ConnectionPassagesContentProps) => {
@@ -113,6 +114,20 @@ export const Connections = ({ selectedConnection, onHide }: OnTheMapProps) => {
     [outCommand],
   );
 
+  const preparedPassages = useMemo(() => {
+    if (!cnInfo) {
+      return [];
+    }
+
+    return passages
+      .sort((a, b) => sortByDate(b.inserted_at, a.inserted_at))
+      .map<PassageWithSourceTarget>(x => ({
+        ...x,
+        source: x.from ? cnInfo.target : cnInfo.source,
+        target: x.from ? cnInfo.source : cnInfo.target,
+      }));
+  }, [cnInfo, passages]);
+
   useEffect(() => {
     if (!selectedConnection) {
       return;
@@ -125,6 +140,11 @@ export const Connections = ({ selectedConnection, onHide }: OnTheMapProps) => {
     return passages.reduce((acc, x) => acc + parseInt(x.ship.ship_type_info.mass), 0);
   }, [passages]);
 
+  useEffect(() => {
+    // eslint-disable-next-line no-console
+    console.log('JOipP', `cnInfo`, cnInfo);
+  }, [cnInfo]);
+
   if (!cnInfo) {
     return null;
   }
@@ -145,12 +165,14 @@ export const Connections = ({ selectedConnection, onHide }: OnTheMapProps) => {
           <InfoDrawer title="Connection" rightSide>
             <div className="flex justify-end gap-2 items-center">
               <SystemView
+                showCustomName
                 systemId={cnInfo.source}
                 className={clsx(classes.InfoTextSize, 'select-none text-center')}
                 hideRegion
               />
               <span className="pi pi-angle-double-right text-stone-500 text-[15px]"></span>
               <SystemView
+                showCustomName
                 systemId={cnInfo.target}
                 className={clsx(classes.InfoTextSize, 'select-none text-center')}
                 hideRegion
@@ -184,7 +206,7 @@ export const Connections = ({ selectedConnection, onHide }: OnTheMapProps) => {
         {/* separator */}
         <div className="w-full h-px bg-neutral-800 px-0.5"></div>
 
-        <ConnectionPassages passages={passages} />
+        <ConnectionPassages passages={preparedPassages} />
       </div>
     </Sidebar>
   );
diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/PassageCard/PassageCard.module.scss b/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/PassageCard/PassageCard.module.scss
index f36b6021..08af7c64 100644
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/PassageCard/PassageCard.module.scss
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/PassageCard/PassageCard.module.scss
@@ -35,6 +35,10 @@
   &.ThreeColumns {
     grid-template-columns: auto 1fr auto;
   }
+
+  &.FourColumns {
+    grid-template-columns: auto auto 1fr auto;
+  }
 }
 
 .CardBorderLeftIsOwn {
diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/PassageCard/PassageCard.tsx b/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/PassageCard/PassageCard.tsx
index 04669de2..fe7ff986 100644
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/PassageCard/PassageCard.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/PassageCard/PassageCard.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import classes from './PassageCard.module.scss';
-import { Passage } from '@/hooks/Mapper/types';
-import { TimeAgo } from '@/hooks/Mapper/components/ui-kit';
+import { PassageWithSourceTarget } from '@/hooks/Mapper/types';
+import { SystemView, TimeAgo, TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
 import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
 import { kgToTons } from '@/hooks/Mapper/utils/kgToTons.ts';
 import { useMemo } from 'react';
@@ -11,7 +11,7 @@ type PassageCardType = {
   showShipName?: boolean;
   // showSystem?: boolean;
   // useSystemsCache?: boolean;
-} & Passage;
+} & PassageWithSourceTarget;
 
 const SHIP_NAME_RX = /u'|'/g;
 export const getShipName = (name: string) => {
@@ -25,7 +25,7 @@ export const getShipName = (name: string) => {
     });
 };
 
-export const PassageCard = ({ inserted_at, character: char, ship }: PassageCardType) => {
+export const PassageCard = ({ inserted_at, character: char, ship, source, target, from }: PassageCardType) => {
   const isOwn = false;
 
   const insertedAt = useMemo(() => {
@@ -37,7 +37,39 @@ export const PassageCard = ({ inserted_at, character: char, ship }: PassageCardT
     <div className={clsx(classes.CharacterCard, 'w-full text-xs', 'flex flex-col box-border')}>
       <div className="flex flex-col justify-between px-2 py-1 gap-1">
         {/*here icon and other*/}
-        <div className={clsx(classes.CharRow, classes.ThreeColumns)}>
+        <div className={clsx(classes.CharRow, classes.FourColumns)}>
+          <WdTooltipWrapper
+            position={TooltipPosition.top}
+            content={
+              <div className="flex justify-between gap-2 items-center">
+                <SystemView
+                  showCustomName
+                  systemId={source}
+                  className="select-none text-center !text-[12px]"
+                  hideRegion
+                />
+                <span className="pi pi-angle-double-right text-stone-500 text-[15px]"></span>
+                <SystemView
+                  showCustomName
+                  systemId={target}
+                  className="select-none text-center !text-[12px]"
+                  hideRegion
+                />
+              </div>
+            }
+          >
+            <div
+              className={clsx(
+                'transition-all transform ease-in duration-200',
+                'pi text-stone-500 text-[15px] w-[35px] h-[33px] !flex items-center justify-center border rounded-[6px]',
+                {
+                  ['pi-angle-double-right !text-orange-400 border-orange-400 hover:bg-orange-400/30']: from,
+                  ['pi-angle-double-left !text-stone-500/70 border-stone-500/70 hover:bg-stone-500/30']: !from,
+                },
+              )}
+            />
+          </WdTooltipWrapper>
+
           {/*portrait*/}
           <span
             className={clsx(classes.EveIcon, classes.CharIcon, 'wd-bg-default')}
diff --git a/assets/js/hooks/Mapper/types/connectionPassages.ts b/assets/js/hooks/Mapper/types/connectionPassages.ts
index 3a56d1f4..0f5b0a54 100644
--- a/assets/js/hooks/Mapper/types/connectionPassages.ts
+++ b/assets/js/hooks/Mapper/types/connectionPassages.ts
@@ -6,11 +6,17 @@ export type PassageLimitedCharacterType = Pick<
 >;
 
 export type Passage = {
+  from: boolean;
   inserted_at: string; // Date
   ship: ShipTypeRaw;
   character: PassageLimitedCharacterType;
 };
 
+export type PassageWithSourceTarget = {
+  source: string;
+  target: string;
+} & Passage;
+
 export type ConnectionInfoOutput = {
   marl_eol_time: string;
 };

From 36d3c0937b8c45fb36c04bff8dae4e8f257cc3a0 Mon Sep 17 00:00:00 2001
From: DanSylvest <cublakhan257@gmail.com>
Date: Tue, 25 Nov 2025 22:04:12 +0300
Subject: [PATCH 2/2] chore: Add ability to see character passage direction in
 list of passages - remove unnecessary log

---
 .../mapRootContent/components/Connections/Connections.tsx    | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/Connections.tsx b/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/Connections.tsx
index 670863ff..35b95b7e 100644
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/Connections.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/Connections/Connections.tsx
@@ -140,11 +140,6 @@ export const Connections = ({ selectedConnection, onHide }: OnTheMapProps) => {
     return passages.reduce((acc, x) => acc + parseInt(x.ship.ship_type_info.mass), 0);
   }, [passages]);
 
-  useEffect(() => {
-    // eslint-disable-next-line no-console
-    console.log('JOipP', `cnInfo`, cnInfo);
-  }, [cnInfo]);
-
   if (!cnInfo) {
     return null;
   }