chore: release version v1.87.0

feat: Add support markdown for system description

CHANGELOG.md

@@ -2,6 +2,24 @@
 
 <!-- changelog -->
 
+## [v1.87.0](https://github.com/wanderer-industries/wanderer/compare/v1.86.1...v1.87.0) (2025-11-25)
+
+
+
+
+### Features:
+
+* Add support markdown for system description
+
+## [v1.86.1](https://github.com/wanderer-industries/wanderer/compare/v1.86.0...v1.86.1) (2025-11-25)
+
+
+
+
+### Bug Fixes:
+
+* Map: Add ability to see character passage direction in list of passages
+
 ## [v1.86.0](https://github.com/wanderer-industries/wanderer/compare/v1.85.5...v1.86.0) (2025-11-25)
 
 

assets/js/hooks/Mapper/components/mapInterface/components/Comments/components/MarkdownComment/MarkdownComment.tsx

@@ -1,4 +1,3 @@
-import classes from './MarkdownComment.module.scss';
 import clsx from 'clsx';
 import {
   InfoDrawer,
@@ -49,7 +48,11 @@ export const MarkdownComment = ({ text, time, characterEveId, id }: MarkdownComm
     <>
       <InfoDrawer
         labelClassName="mb-[3px]"
-        className={clsx(classes.MarkdownCommentRoot, 'p-1 bg-stone-700/20 ')}
+        className={clsx(
+          'p-1 bg-stone-700/20',
+          'text-[12px] leading-[1.2] text-stone-300 break-words',
+          'bg-gradient-to-r from-stone-600/40 via-stone-600/10 to-stone-600/0',
+        )}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
         title={

assets/js/hooks/Mapper/components/mapInterface/components/CommentsEditor/CommentsEditor.module.scss

@@ -0,0 +1,9 @@
+.CERoot {
+  @apply border border-stone-400/30 rounded-[2px];
+
+  :global {
+    .cm-content {
+      @apply bg-stone-600/40;
+    }
+  }
+}

assets/js/hooks/Mapper/components/mapInterface/components/CommentsEditor/CommentsEditor.tsx

@@ -6,6 +6,7 @@ import { useHotkey } from '@/hooks/Mapper/hooks';
 import { useCallback, useRef, useState } from 'react';
 import { OutCommand } from '@/hooks/Mapper/types';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import classes from './CommentsEditor.module.scss';
 
 export interface CommentsEditorProps {}
 
@@ -48,6 +49,7 @@ export const CommentsEditor = ({}: CommentsEditorProps) => {
 
   return (
     <MarkdownEditor
+      className={classes.CERoot}
       value={textVal}
       onChange={setTextVal}
       overlayContent={

assets/js/hooks/Mapper/components/mapInterface/components/MarkdownEditor/MarkdownEditor.module.scss

@@ -1,9 +1,9 @@
 .CERoot {
-  @apply border border-stone-400/30 rounded-[2px];
+  @apply border border-stone-500/30 rounded-[2px];
 
   :global {
     .cm-content {
-      @apply bg-stone-600/40;
+      @apply bg-stone-950/70;
     }
 
     .cm-scroller {

assets/js/hooks/Mapper/components/mapInterface/components/MarkdownEditor/MarkdownEditor.tsx

@@ -44,9 +44,17 @@ export interface MarkdownEditorProps {
   overlayContent?: ReactNode;
   value: string;
   onChange: (value: string) => void;
+  height?: string;
+  className?: string;
 }
 
-export const MarkdownEditor = ({ value, onChange, overlayContent }: MarkdownEditorProps) => {
+export const MarkdownEditor = ({
+  value,
+  onChange,
+  overlayContent,
+  height = '70px',
+  className,
+}: MarkdownEditorProps) => {
   const [hasShift, setHasShift] = useState(false);
 
   const refData = useRef({ onChange });
@@ -66,9 +74,9 @@ export const MarkdownEditor = ({ value, onChange, overlayContent }: MarkdownEdit
     <div className={clsx(classes.MarkdownEditor, 'relative')}>
       <CodeMirror
         value={value}
-        height="70px"
+        height={height}
         extensions={CODE_MIRROR_EXTENSIONS}
-        className={classes.CERoot}
+        className={clsx(classes.CERoot, className)}
         theme={oneDark}
         onChange={handleOnChange}
         placeholder="Start typing..."

assets/js/hooks/Mapper/components/mapInterface/components/SystemSettingsDialog/SystemSettingsDialog.tsx

@@ -8,8 +8,8 @@ import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager.ts';
 import { Dialog } from 'primereact/dialog';
 import { IconField } from 'primereact/iconfield';
 import { InputText } from 'primereact/inputtext';
-import { InputTextarea } from 'primereact/inputtextarea';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { MarkdownEditor } from '@/hooks/Mapper/components/mapInterface/components/MarkdownEditor';
 
 interface SystemSettingsDialog {
   systemId: string;
@@ -214,13 +214,9 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
 
             <div className="flex flex-col gap-1">
               <label htmlFor="username">Description</label>
-              <InputTextarea
-                autoResize
-                rows={5}
-                cols={30}
-                value={description}
-                onChange={e => setDescription(e.target.value)}
-              />
+              <div className="h-[200px]">
+                <MarkdownEditor value={description} onChange={e => setDescription(e)} height="180px" />
+              </div>
             </div>
           </div>
 

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemInfo/SystemInfoContent/SystemInfoContent.tsx

@@ -2,7 +2,7 @@ import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace.ts';
 import { useMemo } from 'react';
 import { getSystemById, sortWHClasses } from '@/hooks/Mapper/helpers';
-import { InfoDrawer, WHClassView, WHEffectView } from '@/hooks/Mapper/components/ui-kit';
+import { InfoDrawer, MarkdownTextViewer, WHClassView, WHEffectView } from '@/hooks/Mapper/components/ui-kit';
 import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
 
 interface SystemInfoContentProps {
@@ -51,7 +51,7 @@ export const SystemInfoContent = ({ systemId }: SystemInfoContentProps) => {
             </div>
           }
         >
-          <div className="break-words">{description}</div>
+          <MarkdownTextViewer>{description}</MarkdownTextViewer>
         </InfoDrawer>
       )}
     </div>

assets/js/hooks/Mapper/components/mapRootContent/components/Connections/Connections.module.scss

@@ -3,7 +3,7 @@
 }
 
 .SidebarOnTheMap {
-  width: 400px;
+  width: 460px;
   padding: 0 !important;
 
   :global {

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;
@@ -145,12 +160,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 +201,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>
   );

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 {

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')}

assets/js/hooks/Mapper/components/ui-kit/MarkdownTextViewer.module.scss

@@ -1,8 +1,5 @@
-.MarkdownCommentRoot {
-  border-left-width: 3px;
-
+.MarkdownTextViewer {
   @apply text-[12px] leading-[1.2] text-stone-300 break-words;
-  @apply bg-gradient-to-r from-stone-600/40 via-stone-600/10 to-stone-600/0;
 
   .h1 {
     @apply text-[12px] font-normal m-0 p-0 border-none break-words whitespace-normal;
@@ -56,6 +53,10 @@
     @apply font-bold text-green-400 break-words whitespace-normal;
   }
 
+  strong {
+    font-weight: bold;
+  }
+
   i, em {
     @apply italic text-pink-400 break-words whitespace-normal;
   }

assets/js/hooks/Mapper/components/ui-kit/MarkdownTextViewer.tsx

@@ -2,10 +2,16 @@ import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import remarkBreaks from 'remark-breaks';
 
+import classes from './MarkdownTextViewer.module.scss';
+
 const REMARK_PLUGINS = [remarkGfm, remarkBreaks];
 
 type MarkdownTextViewerProps = { children: string };
 
 export const MarkdownTextViewer = ({ children }: MarkdownTextViewerProps) => {
-  return <Markdown remarkPlugins={REMARK_PLUGINS}>{children}</Markdown>;
+  return (
+    <div className={classes.MarkdownTextViewer}>
+      <Markdown remarkPlugins={REMARK_PLUGINS}>{children}</Markdown>
+    </div>
+  );
 };

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;
 };

mix.exs

@@ -3,7 +3,7 @@ defmodule WandererApp.MixProject do
 
   @source_url "https://github.com/wanderer-industries/wanderer"
 
-  @version "1.86.0"
+  @version "1.87.0"
 
   def project do
     [