chore: release version v1.66.15

fix: remove bugs with signature deletion

.github/workflows/build.yml

@@ -18,49 +18,8 @@ permissions:
   contents: write
 
 jobs:
-  deploy-test:
-    name: 🚀 Deploy to test env (fly.io)
-    runs-on: ubuntu-latest
-    if: ${{ github.base_ref == 'main' || (github.ref == 'refs/heads/main' && github.event_name == 'push') }}
-    steps:
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v3
-      - uses: superfly/flyctl-actions/setup-flyctl@master
-
-      - name: 👀 Read app name
-        uses: SebRollen/toml-action@v1.0.0
-        id: app_name
-        with:
-          file: "fly.toml"
-          field: "app"
-
-      - name: 🚀 Deploy Test
-        run: flyctl deploy --remote-only --wait-timeout=300 --ha=false
-        env:
-          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
-
-  manual-approval:
-    name: Manual Approval
-    runs-on: ubuntu-latest
-    needs: deploy-test
-    if: success()
-
-    permissions:
-      issues: write
-
-    steps:
-      - name: Await Manual Approval
-        uses: trstringer/manual-approval@v1
-        with:
-          secret: ${{ github.TOKEN }}
-          approvers: DmitryPopov
-          minimum-approvals: 1
-          issue-title: "Manual Approval Required for Release"
-          issue-body: "Please approve or deny the deployment."
-
   build:
     name: 🛠 Build
-    needs: manual-approval
     runs-on: ubuntu-22.04
     if: ${{ (github.ref == 'refs/heads/main') && github.event_name == 'push' }}
     permissions:

CHANGELOG.md

@@ -2,6 +2,584 @@
 
 <!-- changelog -->
 
+## [v1.66.15](https://github.com/wanderer-industries/wanderer/compare/v1.66.14...v1.66.15) (2025-06-07)
+
+
+
+
+### Bug Fixes:
+
+* Core: Added back arm docker image build
+
+## [v1.66.14](https://github.com/wanderer-industries/wanderer/compare/v1.66.13...v1.66.14) (2025-06-07)
+
+
+
+
+### Bug Fixes:
+
+* Core: fixed online updates
+
+## [v1.66.13](https://github.com/wanderer-industries/wanderer/compare/v1.66.12...v1.66.13) (2025-06-07)
+
+
+
+
+### Bug Fixes:
+
+* Core: fixed location tracking issues
+
+## [v1.66.12](https://github.com/wanderer-industries/wanderer/compare/v1.66.11...v1.66.12) (2025-06-06)
+
+
+
+
+## [v1.66.11](https://github.com/wanderer-industries/wanderer/compare/v1.66.10...v1.66.11) (2025-06-06)
+
+
+
+
+### Bug Fixes:
+
+* Core: fixed refresh character tokens
+
+## [v1.66.10](https://github.com/wanderer-industries/wanderer/compare/v1.66.9...v1.66.10) (2025-06-06)
+
+
+
+
+## [v1.66.9](https://github.com/wanderer-industries/wanderer/compare/v1.66.8...v1.66.9) (2025-06-06)
+
+
+
+
+## [v1.66.8](https://github.com/wanderer-industries/wanderer/compare/v1.66.7...v1.66.8) (2025-06-06)
+
+
+
+
+### Bug Fixes:
+
+* fixed disable detailed kills env check
+
+## [v1.66.7](https://github.com/wanderer-industries/wanderer/compare/v1.66.6...v1.66.7) (2025-06-06)
+
+
+
+
+### Bug Fixes:
+
+* fixed disable detailed kills env check
+
+## [v1.66.6](https://github.com/wanderer-industries/wanderer/compare/v1.66.5...v1.66.6) (2025-06-06)
+
+
+
+
+### Bug Fixes:
+
+* respect error limits for ESI APIs
+
+## [v1.66.5](https://github.com/wanderer-industries/wanderer/compare/v1.66.4...v1.66.5) (2025-06-06)
+
+
+
+
+### Bug Fixes:
+
+* respect error limits for ESI APIs
+
+## [v1.66.4](https://github.com/wanderer-industries/wanderer/compare/v1.66.3...v1.66.4) (2025-06-06)
+
+
+
+
+### Bug Fixes:
+
+* respect error limits for ESI APIs
+
+## [v1.66.3](https://github.com/wanderer-industries/wanderer/compare/v1.66.2...v1.66.3) (2025-06-05)
+
+
+
+
+## [v1.66.2](https://github.com/wanderer-industries/wanderer/compare/v1.66.1...v1.66.2) (2025-06-05)
+
+
+
+
+## [v1.66.1](https://github.com/wanderer-industries/wanderer/compare/v1.66.0...v1.66.1) (2025-06-05)
+
+
+
+
+### Bug Fixes:
+
+* remove bugs with signature deletion
+
+## [v1.66.0](https://github.com/wanderer-industries/wanderer/compare/v1.65.24...v1.66.0) (2025-06-05)
+
+
+
+
+### Features:
+
+* show deleted signatures during undo timer
+
+### Bug Fixes:
+
+* remove callbacks from effect dependencies
+
+## [v1.65.24](https://github.com/wanderer-industries/wanderer/compare/v1.65.23...v1.65.24) (2025-06-04)
+
+
+
+
+### Bug Fixes:
+
+* Core: Fixed errors duration check to reduce requests amount to ESI
+
+## [v1.65.23](https://github.com/wanderer-industries/wanderer/compare/v1.65.22...v1.65.23) (2025-06-04)
+
+
+
+
+### Bug Fixes:
+
+* Core: Added back arm docker image build
+
+## [v1.65.22](https://github.com/wanderer-industries/wanderer/compare/v1.65.21...v1.65.22) (2025-06-04)
+
+
+
+
+### Bug Fixes:
+
+* Core: Fix character tracking issues
+
+## [v1.65.21](https://github.com/wanderer-industries/wanderer/compare/v1.65.20...v1.65.21) (2025-06-01)
+
+
+
+
+### Bug Fixes:
+
+* Core: Fix connection pool errors
+
+## [v1.65.20](https://github.com/wanderer-industries/wanderer/compare/v1.65.19...v1.65.20) (2025-06-01)
+
+
+
+
+### Bug Fixes:
+
+* Core: fix waypoint set timeout errors
+
+## [v1.65.19](https://github.com/wanderer-industries/wanderer/compare/v1.65.18...v1.65.19) (2025-06-01)
+
+
+
+
+### Bug Fixes:
+
+* Core: fix updating character online
+
+## [v1.65.18](https://github.com/wanderer-industries/wanderer/compare/v1.65.17...v1.65.18) (2025-05-30)
+
+
+
+
+### Bug Fixes:
+
+* Core: fix updating systems and connections
+
+## [v1.65.17](https://github.com/wanderer-industries/wanderer/compare/v1.65.16...v1.65.17) (2025-05-29)
+
+
+
+
+### Bug Fixes:
+
+* Core: fix updating systems and connections
+
+* Comments: fix error loading comments
+
+## [v1.65.16](https://github.com/wanderer-industries/wanderer/compare/v1.65.15...v1.65.16) (2025-05-29)
+
+
+
+
+### Bug Fixes:
+
+* Map: Allow lock systems for members
+
+## [v1.65.15](https://github.com/wanderer-industries/wanderer/compare/v1.65.14...v1.65.15) (2025-05-28)
+
+
+
+
+## [v1.65.14](https://github.com/wanderer-industries/wanderer/compare/v1.65.13...v1.65.14) (2025-05-28)
+
+
+
+
+## [v1.65.13](https://github.com/wanderer-industries/wanderer/compare/v1.65.12...v1.65.13) (2025-05-28)
+
+
+
+
+### Bug Fixes:
+
+* Signatures: small wh size is now passed from signature to connection
+
+## [v1.65.12](https://github.com/wanderer-industries/wanderer/compare/v1.65.11...v1.65.12) (2025-05-27)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fixed showing character ship
+
+## [v1.65.11](https://github.com/wanderer-industries/wanderer/compare/v1.65.10...v1.65.11) (2025-05-27)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fixed showing character ship
+
+## [v1.65.10](https://github.com/wanderer-industries/wanderer/compare/v1.65.9...v1.65.10) (2025-05-27)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fixed sorting for characters in Local
+
+* Map: Rally: fixed conflict style of status and rally
+
+* Core: Fixed character token refresh
+
+* Map: Add Rally point. Change placement of settings in Map User Settings. Add ability to placement minimap.
+
+* Map: Routes - hide user routes btn from context if subscriptions is not active or widget is closed. Also now hidden widget will show again in place where it was on moment of hide (except cases when screen size has changed.
+
+* Map: PINGS - Rally point first prototype
+
+## [v1.65.9](https://github.com/wanderer-industries/wanderer/compare/v1.65.8...v1.65.9) (2025-05-26)
+
+
+
+
+## [v1.65.8](https://github.com/wanderer-industries/wanderer/compare/v1.65.7...v1.65.8) (2025-05-26)
+
+
+
+
+## [v1.65.7](https://github.com/wanderer-industries/wanderer/compare/v1.65.6...v1.65.7) (2025-05-26)
+
+
+
+
+### Bug Fixes:
+
+* Core: Fixed map character tracking issues
+
+## [v1.65.6](https://github.com/wanderer-industries/wanderer/compare/v1.65.5...v1.65.6) (2025-05-26)
+
+
+
+
+### Bug Fixes:
+
+* Core: Fixed map character tracking issues
+
+## [v1.65.5](https://github.com/wanderer-industries/wanderer/compare/v1.65.4...v1.65.5) (2025-05-26)
+
+
+
+
+### Bug Fixes:
+
+* Core: Fixed map character tracking issues
+
+* Signature: Update restored signature character
+
+## [v1.65.4](https://github.com/wanderer-industries/wanderer/compare/v1.65.3...v1.65.4) (2025-05-24)
+
+
+
+
+### Bug Fixes:
+
+* Signature: Force signature update even if there are no any changes
+
+## [v1.65.3](https://github.com/wanderer-industries/wanderer/compare/v1.65.2...v1.65.3) (2025-05-23)
+
+
+
+
+### Bug Fixes:
+
+* Signature: Fixed signature clenup
+
+## [v1.65.2](https://github.com/wanderer-industries/wanderer/compare/v1.65.1...v1.65.2) (2025-05-23)
+
+
+
+
+### Bug Fixes:
+
+* Signature: Fixed signature updates
+
+## [v1.65.1](https://github.com/wanderer-industries/wanderer/compare/v1.65.0...v1.65.1) (2025-05-22)
+
+
+
+
+### Bug Fixes:
+
+* Core: Added unsync map events timeout handling (force page refresh if outdated map events found)
+
+## [v1.65.0](https://github.com/wanderer-industries/wanderer/compare/v1.64.8...v1.65.0) (2025-05-22)
+
+
+
+
+### Features:
+
+* default connections from c1 holes to medium size
+
+* support german and french signatures
+
+* improve signature undo process
+
+### Bug Fixes:
+
+* remove required id field from character schema
+
+* update openapi spec response types
+
+* fix issue with connection generation between k-space
+
+* Signature: Fixed signatures updates
+
+* update openapi spec for other apis
+
+## [v1.64.8](https://github.com/wanderer-industries/wanderer/compare/v1.64.7...v1.64.8) (2025-05-20)
+
+
+
+
+### Bug Fixes:
+
+* Core: Added unsync map events timeout handling (force page refresh if outdated map events found)
+
+## [v1.64.7](https://github.com/wanderer-industries/wanderer/compare/v1.64.6...v1.64.7) (2025-05-15)
+
+
+
+
+### Bug Fixes:
+
+* Core: Fixed connection EOL time refreshed every 2 minutes
+
+## [v1.64.6](https://github.com/wanderer-industries/wanderer/compare/v1.64.5...v1.64.6) (2025-05-15)
+
+
+
+
+### Bug Fixes:
+
+* Core: Added map hubs limits checking & a proper warning message shown
+
+## [v1.64.5](https://github.com/wanderer-industries/wanderer/compare/v1.64.4...v1.64.5) (2025-05-14)
+
+
+
+
+### Bug Fixes:
+
+* Core: Added character name update on re-auth
+
+## [v1.64.4](https://github.com/wanderer-industries/wanderer/compare/v1.64.3...v1.64.4) (2025-05-14)
+
+
+
+
+### Bug Fixes:
+
+* Core: Added 1 min timeout for ship and location updates on ESI API errors
+
+## [v1.64.3](https://github.com/wanderer-industries/wanderer/compare/v1.64.2...v1.64.3) (2025-05-14)
+
+
+
+
+### Bug Fixes:
+
+* Core: Fixed character tracking initialization logic & removed search caching
+
+## [v1.64.2](https://github.com/wanderer-industries/wanderer/compare/v1.64.1...v1.64.2) (2025-05-13)
+
+
+
+
+### Bug Fixes:
+
+* Core: Fixed tracking of ship & location for offline characters
+
+## [v1.64.1](https://github.com/wanderer-industries/wanderer/compare/v1.64.0...v1.64.1) (2025-05-13)
+
+
+
+
+### Bug Fixes:
+
+* Core: Fixed tracking stopped due to server errors
+
+## [v1.64.0](https://github.com/wanderer-industries/wanderer/compare/v1.63.0...v1.64.0) (2025-05-13)
+
+
+
+
+### Features:
+
+* api: add additional structure/signature methods (#365)
+
+* api: add additional system/connections methods (#351)
+
+### Bug Fixes:
+
+* Core: Fixed EOL connections cleanup
+
+* Core: Avoid Zarzakh system in routes widget
+
+* remove repeat errors for token refresh (#375)
+
+* updated openapi spec for character activity (#374)
+
+* removed error from characters endpoint, and updated routes (#372)
+
+* cleanup examples for system and connections (#370)
+
+* remove error on websocket reconnect (#367)
+
+## [v1.63.0](https://github.com/wanderer-industries/wanderer/compare/v1.62.4...v1.63.0) (2025-05-11)
+
+
+
+
+### Features:
+
+* Core: Updated map active characters page
+
+## [v1.62.4](https://github.com/wanderer-industries/wanderer/compare/v1.62.3...v1.62.4) (2025-05-10)
+
+
+
+
+### Bug Fixes:
+
+* Core: Fixed map characters got untracked
+
+## [v1.62.3](https://github.com/wanderer-industries/wanderer/compare/v1.62.2...v1.62.3) (2025-05-08)
+
+
+
+
+### Bug Fixes:
+
+* Core: Fixed map characters got untracked
+
+## [v1.62.2](https://github.com/wanderer-industries/wanderer/compare/v1.62.1...v1.62.2) (2025-05-05)
+
+
+
+
+### Bug Fixes:
+
+* Core: Fixed audit export API
+
+## [v1.62.1](https://github.com/wanderer-industries/wanderer/compare/v1.62.0...v1.62.1) (2025-05-05)
+
+
+
+
+## [v1.62.0](https://github.com/wanderer-industries/wanderer/compare/v1.61.2...v1.62.0) (2025-05-05)
+
+
+
+
+### Features:
+
+* Core: added user routes support
+
+### Bug Fixes:
+
+* Map: Fixed link signature modal crash afrer destination system removed
+
+* Map: Change design for tags (#358)
+
+* Map: Removed paywall restriction from public routes
+
+* Core: Fixed issues with structures loading
+
+* Map: Removed unnecessary logs
+
+* Map: Add support user routes
+
+* Map: Add support for User Routes on FE side.
+
+* Map: Refactor Local - show ship name, change placement of ship name. Refactor On the Map - show corp and ally logo. Fixed problem with ellipsis at long character and ship names.
+
+* Map: Refactored routes widget. Add loader for routes. Prepared for custom hubs
+
+* Map: Refactor init and update of mapper
+
+## [v1.61.2](https://github.com/wanderer-industries/wanderer/compare/v1.61.1...v1.61.2) (2025-04-29)
+
+
+
+
+### Bug Fixes:
+
+* Core: Fixed main character checking & manual systems delete logic
+
+## [v1.61.1](https://github.com/wanderer-industries/wanderer/compare/v1.61.0...v1.61.1) (2025-04-26)
+
+
+
+
+### Bug Fixes:
+
+* Core: Fixed additional price calc for map sub updates
+
+## [v1.61.0](https://github.com/wanderer-industries/wanderer/compare/v1.60.1...v1.61.0) (2025-04-24)
+
+
+
+
+### Features:
+
+* Core: force checking main character set for all map activity
+
+## [v1.60.1](https://github.com/wanderer-industries/wanderer/compare/v1.60.0...v1.60.1) (2025-04-22)
+
+
+
+
+### Bug Fixes:
+
+* Map: Removed unnecessary code onFE part
+
+* Map: Removed unnecessary debugger
+
+* Map: Changed name for drifters systems. Fixed static info for Barbican.
+
 ## [v1.60.0](https://github.com/wanderer-industries/wanderer/compare/v1.59.11...v1.60.0) (2025-04-17)
 
 

assets/.eslintrc.cjs

@@ -17,5 +17,6 @@ module.exports = {
     'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
     'react/react-in-jsx-scope': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',
+    "linebreak-style": "off",
   },
 };

assets/.prettierrc

@@ -7,5 +7,5 @@
   "semi": true,
   "tabWidth": 2,
   "useTabs": false,
-  "endOfLine": "lf"
+  "endOfLine": "auto"
 }

assets/js/hooks/Mapper/common-styles/fixes.scss

@@ -99,6 +99,11 @@
 .p-dropdown-item {
   padding: 0.25rem 0.5rem;
   font-size: 14px;
+  width: 100%;
+
+  .p-dropdown-item-label {
+    width: 100%;
+  }
 }
 
 .p-dropdown-item-group {
@@ -180,3 +185,30 @@
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: initial;
 }
+
+.suppress-menu-behaviour {
+  pointer-events: none;
+
+  .p-menuitem-content {
+    pointer-events: initial;
+    background-color: initial !important;
+  }
+  .p-menuitem-content:hover {
+    background-color: initial !important;
+  }
+}
+
+
+.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+  box-shadow: 0 0 0 1px #335c7e;
+  border-color: #335c7e;
+}
+
+.p-inputtext:enabled:focus {
+  box-shadow: 0 0 0 1px #335c7e;
+  border-color: #335c7e;
+}
+
+.p-inputtext:enabled:hover {
+  border-color: #335c7e;
+}

assets/js/hooks/Mapper/components/characters/Characters.tsx

@@ -1,14 +1,13 @@
-import { useCallback } from 'react';
-import clsx from 'clsx';
-import { useAutoAnimate } from '@formkit/auto-animate/react';
-import { Commands } from '@/hooks/Mapper/types/mapHandlers.ts';
-import { CharacterTypeRaw } from '@/hooks/Mapper/types';
 import { emitMapEvent } from '@/hooks/Mapper/events';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import classes from './Characters.module.scss';
 import { isDocked } from '@/hooks/Mapper/helpers/isDocked.ts';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { CharacterTypeRaw } from '@/hooks/Mapper/types';
+import { Commands, OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
+import { useAutoAnimate } from '@formkit/auto-animate/react';
+import clsx from 'clsx';
 import { PrimeIcons } from 'primereact/api';
-
+import { useCallback } from 'react';
+import classes from './Characters.module.scss';
 interface CharactersProps {
   data: CharacterTypeRaw[];
 }
@@ -17,13 +16,22 @@ export const Characters = ({ data }: CharactersProps) => {
   const [parent] = useAutoAnimate();
 
   const {
+    outCommand,
     data: { mainCharacterEveId, followingCharacterEveId },
   } = useMapRootState();
 
-  const handleSelect = useCallback((character: CharacterTypeRaw) => {
+  const handleSelect = useCallback(async (character: CharacterTypeRaw) => {
+    if (!character) {
+      return;
+    }
+
+    await outCommand({
+      type: OutCommand.startTracking,
+      data: { character_eve_id: character.eve_id },
+    });
     emitMapEvent({
       name: Commands.centerSystem,
-      data: character?.location?.solar_system_id?.toString(),
+      data: character.location?.solar_system_id?.toString(),
     });
   }, []);
 
@@ -37,14 +45,26 @@ export const Characters = ({ data }: CharactersProps) => {
         className={clsx(
           'overflow-hidden relative',
           'flex w-[35px] h-[35px] rounded-[4px] border-[1px] border-solid bg-transparent cursor-pointer',
-          'transition-colors duration-250',
+          'transition-colors duration-250 hover:bg-stone-300/90',
           {
             ['border-stone-800/90']: !character.online,
             ['border-lime-600/70']: character.online,
           },
         )}
-        title={character.name}
+        title={character.tracking_paused ? `${character.name} - Tracking Paused (click to resume)` : character.name}
       >
+        {character.tracking_paused && (
+          <>
+            <span
+              className={clsx(
+                'absolute top-[2px] left-[2px] w-[9px] h-[9px]',
+                'text-yellow-500 text-[9px] rounded-[1px] z-10 hover:hidden',
+                'pi',
+                PrimeIcons.PAUSE,
+              )}
+            />
+          </>
+        )}
         {mainCharacterEveId === character.eve_id && (
           <span
             className={clsx(
@@ -55,6 +75,7 @@ export const Characters = ({ data }: CharactersProps) => {
             )}
           />
         )}
+
         {followingCharacterEveId === character.eve_id && (
           <span
             className={clsx(

assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/ContextMenuSystem.tsx

@@ -1,11 +1,12 @@
 import React, { RefObject } from 'react';
 import { ContextMenu } from 'primereact/contextmenu';
-import { SolarSystemRawType } from '@/hooks/Mapper/types';
+import { PingType, SolarSystemRawType } from '@/hooks/Mapper/types';
 import { useContextMenuSystemItems } from '@/hooks/Mapper/components/contexts/ContextMenuSystem/useContextMenuSystemItems.tsx';
 import { WaypointSetContextHandler } from '@/hooks/Mapper/components/contexts/types.ts';
 
 export interface ContextMenuSystemProps {
   hubs: string[];
+  userHubs: string[];
   contextMenuRef: RefObject<ContextMenu>;
   systemId: string | undefined;
   systems: SolarSystemRawType[];
@@ -13,10 +14,12 @@ export interface ContextMenuSystemProps {
   onLockToggle(): void;
   onOpenSettings(): void;
   onHubToggle(): void;
+  onUserHubToggle(): void;
   onSystemTag(val?: string): void;
   onSystemStatus(val: number): void;
   onSystemLabels(val: string): void;
   onCustomLabelDialog(): void;
+  onTogglePing(type: PingType, solar_system_id: string, hasPing: boolean): void;
   onWaypointSet: WaypointSetContextHandler;
 }
 
@@ -25,7 +28,7 @@ export const ContextMenuSystem: React.FC<ContextMenuSystemProps> = ({ contextMen
 
   return (
     <>
-      <ContextMenu model={items} ref={contextMenuRef} breakpoint="767px" />
+      <ContextMenu className="min-w-[200px]" model={items} ref={contextMenuRef} breakpoint="767px" />
     </>
   );
 };

assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './useTagMenu';
 export * from './useStatusMenu';
 export * from './useLabelsMenu';
+export * from './useUserRoute';

assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/index.ts

@@ -1 +1 @@
-export * from './useTagMenu.ts';
+export * from './useTagMenu.tsx';

assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/useTagMenu.ts

@@ -1,68 +0,0 @@
-import { MenuItem } from 'primereact/menuitem';
-import { PrimeIcons } from 'primereact/api';
-import { useCallback, useRef } from 'react';
-import { SolarSystemRawType } from '@/hooks/Mapper/types';
-import { getSystemById } from '@/hooks/Mapper/helpers';
-import clsx from 'clsx';
-import { GRADIENT_MENU_ACTIVE_CLASSES } from '@/hooks/Mapper/constants.ts';
-
-const AVAILABLE_LETTERS = ['A', 'B', 'C', 'D', 'E', 'F', 'X', 'Y', 'Z'];
-const AVAILABLE_NUMBERS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
-
-export const useTagMenu = (
-  systems: SolarSystemRawType[],
-  systemId: string | undefined,
-  onSystemTag: (val?: string) => void,
-): (() => MenuItem) => {
-  const ref = useRef({ onSystemTag, systems, systemId });
-  ref.current = { onSystemTag, systems, systemId };
-
-  return useCallback(() => {
-    const { onSystemTag, systemId, systems } = ref.current;
-    const system = systemId ? getSystemById(systems, systemId) : undefined;
-
-    const isSelectedLetters = AVAILABLE_LETTERS.includes(system?.tag ?? '');
-    const isSelectedNumbers = AVAILABLE_NUMBERS.includes(system?.tag ?? '');
-
-    const menuItem: MenuItem = {
-      label: 'Tag',
-      icon: PrimeIcons.HASHTAG,
-      className: clsx({ [GRADIENT_MENU_ACTIVE_CLASSES]: isSelectedLetters || isSelectedNumbers }),
-      items: [
-        ...(system?.tag !== '' && system?.tag !== null
-          ? [
-              {
-                label: 'Clear',
-                icon: PrimeIcons.BAN,
-                command: () => onSystemTag(),
-              },
-            ]
-          : []),
-        {
-          label: 'Letter',
-          icon: PrimeIcons.TAGS,
-          className: clsx({ [GRADIENT_MENU_ACTIVE_CLASSES]: isSelectedLetters }),
-          items: AVAILABLE_LETTERS.map(x => ({
-            label: x,
-            icon: PrimeIcons.TAG,
-            command: () => onSystemTag(x),
-            className: clsx({ [GRADIENT_MENU_ACTIVE_CLASSES]: system?.tag === x }),
-          })),
-        },
-        {
-          label: 'Digit',
-          icon: PrimeIcons.TAGS,
-          className: clsx({ [GRADIENT_MENU_ACTIVE_CLASSES]: isSelectedNumbers }),
-          items: AVAILABLE_NUMBERS.map(x => ({
-            label: x,
-            icon: PrimeIcons.TAG,
-            command: () => onSystemTag(x),
-            className: clsx({ [GRADIENT_MENU_ACTIVE_CLASSES]: system?.tag === x }),
-          })),
-        },
-      ],
-    };
-
-    return menuItem;
-  }, []);
-};

assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/useTagMenu.tsx

@@ -0,0 +1,95 @@
+import { MenuItem } from 'primereact/menuitem';
+import { PrimeIcons } from 'primereact/api';
+import { useCallback, useRef } from 'react';
+import { SolarSystemRawType } from '@/hooks/Mapper/types';
+import { getSystemById } from '@/hooks/Mapper/helpers';
+import clsx from 'clsx';
+import { GRADIENT_MENU_ACTIVE_CLASSES } from '@/hooks/Mapper/constants.ts';
+import { LayoutEventBlocker } from '@/hooks/Mapper/components/ui-kit';
+import { Button } from 'primereact/button';
+
+const AVAILABLE_TAGS = [
+  'A',
+  'B',
+  'C',
+  'D',
+  'E',
+  'F',
+  'G',
+  'H',
+  'I',
+  'X',
+  'Y',
+  'Z',
+  '0',
+  '1',
+  '2',
+  '3',
+  '4',
+  '5',
+  '6',
+  '7',
+  '8',
+  '9',
+];
+
+export const useTagMenu = (
+  systems: SolarSystemRawType[],
+  systemId: string | undefined,
+  onSystemTag: (val?: string) => void,
+): (() => MenuItem) => {
+  const ref = useRef({ onSystemTag, systems, systemId });
+  ref.current = { onSystemTag, systems, systemId };
+
+  return useCallback(() => {
+    const { onSystemTag, systemId, systems } = ref.current;
+    const system = systemId ? getSystemById(systems, systemId) : undefined;
+
+    const isSelectedTag = AVAILABLE_TAGS.includes(system?.tag ?? '');
+
+    const menuItem: MenuItem = {
+      label: 'Tag',
+      icon: PrimeIcons.HASHTAG,
+      className: clsx({ [GRADIENT_MENU_ACTIVE_CLASSES]: isSelectedTag }),
+      items: [
+        {
+          label: 'Digit',
+          icon: PrimeIcons.TAGS,
+          className: '!h-[128px] suppress-menu-behaviour',
+          template: () => {
+            return (
+              <LayoutEventBlocker className="flex flex-col gap-1 w-[200px] h-full px-2">
+                <div className="grid grid-cols-[auto_auto_auto_auto_auto_auto] gap-1">
+                  {AVAILABLE_TAGS.map(x => (
+                    <Button
+                      outlined={system?.tag !== x}
+                      severity="warning"
+                      key={x}
+                      value={x}
+                      size="small"
+                      className="p-[3px] justify-center"
+                      onClick={() => system?.tag !== x && onSystemTag(x)}
+                    >
+                      {x}
+                    </Button>
+                  ))}
+                  <Button
+                    disabled={!isSelectedTag}
+                    icon="pi pi-ban"
+                    size="small"
+                    className="!p-0 !w-[initial] justify-center"
+                    outlined
+                    severity="help"
+                    onClick={() => onSystemTag()}
+                  ></Button>
+                </div>
+              </LayoutEventBlocker>
+            );
+          },
+        },
+      ],
+    };
+
+    return menuItem;
+  }, []);
+};

assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useUserRoute.tsx

@@ -0,0 +1,42 @@
+import { MapUserAddIcon, MapUserDeleteIcon } from '@/hooks/Mapper/icons';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useCallback, useRef } from 'react';
+import { WidgetsIds } from '@/hooks/Mapper/components/mapInterface/constants.tsx';
+
+interface UseUserRouteProps {
+  systemId: string | undefined;
+  userHubs: string[];
+  onUserHubToggle(): void;
+}
+
+export const useUserRoute = ({ userHubs, systemId, onUserHubToggle }: UseUserRouteProps) => {
+  const {
+    data: { isSubscriptionActive },
+    windowsSettings,
+  } = useMapRootState();
+
+  const ref = useRef({ userHubs, systemId, onUserHubToggle, isSubscriptionActive, windowsSettings });
+  ref.current = { userHubs, systemId, onUserHubToggle, isSubscriptionActive, windowsSettings };
+
+  return useCallback(() => {
+    const { userHubs, systemId, onUserHubToggle, isSubscriptionActive, windowsSettings } = ref.current;
+
+    const isVisibleUserRoutes = windowsSettings.visible.some(x => x === WidgetsIds.userRoutes);
+
+    if (!isSubscriptionActive || !isVisibleUserRoutes || !systemId) {
+      return [];
+    }
+
+    return [
+      {
+        label: !userHubs.includes(systemId) ? 'Add User Route' : 'Remove User Route',
+        icon: !userHubs.includes(systemId) ? (
+          <MapUserAddIcon className="mr-1 relative left-[-2px]" />
+        ) : (
+          <MapUserDeleteIcon className="mr-1 relative left-[-2px]" />
+        ),
+        command: onUserHubToggle,
+      },
+    ];
+  }, [windowsSettings]);
+};

assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/useContextMenuSystemHandlers.ts

@@ -5,22 +5,29 @@ import { SolarSystemRawType } from '@/hooks/Mapper/types';
 import { WaypointSetContextHandler } from '@/hooks/Mapper/components/contexts/types.ts';
 import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
 import { useDeleteSystems } from '@/hooks/Mapper/components/contexts/hooks';
+// import { PingType } from '@/hooks/Mapper/types/ping.ts';
 
 interface UseContextMenuSystemHandlersProps {
   hubs: string[];
+  userHubs: string[];
   systems: SolarSystemRawType[];
   outCommand: OutCommandHandler;
 }
 
-export const useContextMenuSystemHandlers = ({ systems, hubs, outCommand }: UseContextMenuSystemHandlersProps) => {
+export const useContextMenuSystemHandlers = ({
+  systems,
+  hubs,
+  userHubs,
+  outCommand,
+}: UseContextMenuSystemHandlersProps) => {
   const contextMenuRef = useRef<ContextMenu | null>(null);
 
   const [system, setSystem] = useState<string>();
 
   const { deleteSystems } = useDeleteSystems();
 
-  const ref = useRef({ hubs, system, systems, outCommand, deleteSystems });
-  ref.current = { hubs, system, systems, outCommand, deleteSystems };
+  const ref = useRef({ hubs, userHubs, system, systems, outCommand, deleteSystems });
+  ref.current = { hubs, userHubs, system, systems, outCommand, deleteSystems };
 
   const open = useCallback((ev: any, systemId: string) => {
     setSystem(systemId);
@@ -72,6 +79,37 @@ export const useContextMenuSystemHandlers = ({ systems, hubs, outCommand }: UseC
     setSystem(undefined);
   }, []);
 
+  const onUserHubToggle = useCallback(() => {
+    const { userHubs, system, outCommand } = ref.current;
+    if (!system) {
+      return;
+    }
+
+    outCommand({
+      type: !userHubs.includes(system) ? OutCommand.addUserHub : OutCommand.deleteUserHub,
+      data: {
+        system_id: system,
+      },
+    });
+    setSystem(undefined);
+  }, []);
+
+  // const onTogglePingRally = useCallback(() => {
+  //   const { userHubs, system, outCommand } = ref.current;
+  //   if (!system) {
+  //     return;
+  //   }
+  //
+  //   outCommand({
+  //     type: OutCommand.openPing,
+  //     data: {
+  //       solar_system_id: system,
+  //       type: PingType.Rally,
+  //     },
+  //   });
+  //   setSystem(undefined);
+  // }, []);
+
   const onSystemTag = useCallback((tag?: string) => {
     const { system, outCommand } = ref.current;
     if (!system) {
@@ -104,7 +142,6 @@ export const useContextMenuSystemHandlers = ({ systems, hubs, outCommand }: UseC
     setSystem(undefined);
   }, []);
 
-
   const onSystemStatus = useCallback((status: number) => {
     const { system, outCommand } = ref.current;
     if (!system) {
@@ -177,6 +214,8 @@ export const useContextMenuSystemHandlers = ({ systems, hubs, outCommand }: UseC
     onDeleteSystem,
     onLockToggle,
     onHubToggle,
+    onUserHubToggle,
+    // onTogglePingRally,
     onSystemTag,
     onSystemTemporaryName,
     onSystemStatus,

assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/useContextMenuSystemItems.tsx

@@ -1,4 +1,9 @@
-import { useLabelsMenu, useStatusMenu, useTagMenu } from '@/hooks/Mapper/components/contexts/ContextMenuSystem/hooks';
+import {
+  useLabelsMenu,
+  useStatusMenu,
+  useTagMenu,
+  useUserRoute,
+} from '@/hooks/Mapper/components/contexts/ContextMenuSystem/hooks';
 import { useMemo } from 'react';
 import { getSystemById } from '@/hooks/Mapper/helpers';
 import classes from './ContextMenuSystem.module.scss';
@@ -10,11 +15,19 @@ import { useMapCheckPermissions } from '@/hooks/Mapper/mapRootProvider/hooks/api
 import { UserPermission } from '@/hooks/Mapper/types/permissions.ts';
 import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace.ts';
 import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
+import { MapAddIcon, MapDeleteIcon } from '@/hooks/Mapper/icons';
+import { PingType } from '@/hooks/Mapper/types';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import clsx from 'clsx';
+import { MenuItem } from 'primereact/menuitem';
+import { MenuItemWithInfo, WdMenuItem } from '@/hooks/Mapper/components/ui-kit';
 
 export const useContextMenuSystemItems = ({
   onDeleteSystem,
   onLockToggle,
   onHubToggle,
+  onUserHubToggle,
+  onTogglePing,
   onSystemTag,
   onSystemStatus,
   onSystemLabels,
@@ -23,6 +36,7 @@ export const useContextMenuSystemItems = ({
   onWaypointSet,
   systemId,
   hubs,
+  userHubs,
   systems,
 }: Omit<ContextMenuSystemProps, 'contextMenuRef'>) => {
   const getTags = useTagMenu(systems, systemId, onSystemTag);
@@ -30,11 +44,33 @@ export const useContextMenuSystemItems = ({
   const getLabels = useLabelsMenu(systems, systemId, onSystemLabels, onCustomLabelDialog);
   const getWaypointMenu = useWaypointMenu(onWaypointSet);
   const canLockSystem = useMapCheckPermissions([UserPermission.LOCK_SYSTEM]);
+  const canManageSystem = useMapCheckPermissions([UserPermission.UPDATE_SYSTEM]);
+  const canDeleteSystem = useMapCheckPermissions([UserPermission.DELETE_SYSTEM]);
+  const getUserRoutes = useUserRoute({ userHubs, systemId, onUserHubToggle });
 
-  return useMemo(() => {
+  const {
+    data: { pings, isSubscriptionActive },
+  } = useMapRootState();
+
+  const ping = useMemo(() => (pings.length === 1 ? pings[0] : undefined), [pings]);
+  const isShowPingBtn = useMemo(() => {
+    if (!isSubscriptionActive) {
+      return false;
+    }
+
+    if (pings.length === 0) {
+      return true;
+    }
+
+    return pings[0].solar_system_id === systemId;
+  }, [isSubscriptionActive, pings, systemId]);
+
+  return useMemo((): MenuItem[] => {
     const system = systemId ? getSystemById(systems, systemId) : undefined;
     const systemStaticInfo = getSystemStaticInfo(systemId)!;
 
+    const hasPing = ping?.solar_system_id === systemId;
+
     if (!system || !systemId) {
       return [];
     }
@@ -61,50 +97,104 @@ export const useContextMenuSystemItems = ({
       ...getLabels(),
       ...getWaypointMenu(systemId, systemStaticInfo.system_class),
       {
-        label: !hubs.includes(systemId) ? 'Add in Routes' : 'Remove from Routes',
-        icon: PrimeIcons.MAP_MARKER,
+        label: !hubs.includes(systemId) ? 'Add Route' : 'Remove Route',
+        icon: !hubs.includes(systemId) ? (
+          <MapAddIcon className="mr-1 relative left-[-2px]" />
+        ) : (
+          <MapDeleteIcon className="mr-1 relative left-[-2px]" />
+        ),
         command: onHubToggle,
       },
-      ...(system.locked
-        ? canLockSystem
-          ? [
-              {
-                label: 'Unlock',
-                icon: PrimeIcons.LOCK_OPEN,
-                command: onLockToggle,
-              },
-            ]
-          : []
-        : [
-            ...(canLockSystem
-              ? [
-                  {
-                    label: 'Lock',
-                    icon: PrimeIcons.LOCK,
-                    command: onLockToggle,
-                  },
-                ]
-              : []),
+      ...getUserRoutes(),
+
+      { separator: true },
+      {
+        command: () => onTogglePing(PingType.Rally, systemId, hasPing),
+        disabled: !isShowPingBtn,
+        template: () => {
+          const iconClasses = clsx({
+            'pi text-cyan-400 hero-signal': !hasPing,
+            'pi text-red-400 hero-signal-slash': hasPing,
+          });
+
+          if (isShowPingBtn) {
+            return <WdMenuItem icon={iconClasses}>{!hasPing ? 'Ping: RALLY' : 'Cancel: RALLY'}</WdMenuItem>;
+          }
+
+          return (
+            <MenuItemWithInfo
+              infoTitle="Locked. Ping can be set only for one system."
+              infoClass="pi-lock text-stone-500 mr-[12px]"
+            >
+              <WdMenuItem disabled icon={iconClasses}>
+                {!hasPing ? 'Ping: RALLY' : 'Cancel: RALLY'}
+              </WdMenuItem>
+            </MenuItemWithInfo>
+          );
+        },
+      },
+      ...(system.locked && canLockSystem
+        ? [
+            {
+              label: 'Unlock',
+              icon: PrimeIcons.LOCK_OPEN,
+              command: onLockToggle,
+            },
+          ]
+        : []),
+      ...(!system.locked && canManageSystem
+        ? [
+            {
+              label: 'Lock',
+              icon: PrimeIcons.LOCK,
+              command: onLockToggle,
+            },
+          ]
+        : []),
+
+      ...(canDeleteSystem && !system.locked
+        ? [
             { separator: true },
             {
-              label: 'Delete',
-              icon: PrimeIcons.TRASH,
               command: onDeleteSystem,
+              disabled: hasPing,
+              template: () => {
+                if (!hasPing) {
+                  return <WdMenuItem icon="text-red-400 pi pi-trash">Delete</WdMenuItem>;
+                }
+
+                return (
+                  <MenuItemWithInfo
+                    infoTitle="Locked. System can not be deleted until ping set."
+                    infoClass="pi-lock text-stone-500 mr-[12px]"
+                  >
+                    <WdMenuItem disabled icon="text-red-400 pi pi-trash">
+                      Delete
+                    </WdMenuItem>
+                  </MenuItemWithInfo>
+                );
+              },
             },
-          ]),
+          ]
+        : []),
     ];
   }, [
-    canLockSystem,
-    systems,
     systemId,
+    systems,
     getTags,
     getStatus,
     getLabels,
     getWaypointMenu,
+    getUserRoutes,
     hubs,
     onHubToggle,
-    onOpenSettings,
+    canLockSystem,
     onLockToggle,
+    canDeleteSystem,
     onDeleteSystem,
+    onOpenSettings,
+    onTogglePing,
+    ping,
+    isShowPingBtn,
   ]);
 };

assets/js/hooks/Mapper/components/contexts/ContextMenuSystemInfo/ContextMenuSystemInfo.tsx

@@ -11,6 +11,7 @@ import { FastSystemActions } from '@/hooks/Mapper/components/contexts/components
 import { useJumpPlannerMenu } from '@/hooks/Mapper/components/contexts/hooks';
 import { Route } from '@/hooks/Mapper/types/routes.ts';
 import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace.ts';
+import { MapAddIcon, MapDeleteIcon } from '@/hooks/Mapper/icons';
 
 export interface ContextMenuSystemInfoProps {
   systemStatics: Map<number, SolarSystemStaticInfoRaw>;
@@ -69,8 +70,12 @@ export const ContextMenuSystemInfo: React.FC<ContextMenuSystemInfoProps> = ({
       ...getJumpPlannerMenu(system, routes),
       ...getWaypointMenu(systemId, system.system_class),
       {
-        label: !hubs.includes(systemId) ? 'Add in Routes' : 'Remove from Routes',
-        icon: PrimeIcons.MAP_MARKER,
+        label: !hubs.includes(systemId) ? 'Add Route' : 'Remove Route',
+        icon: !hubs.includes(systemId) ? (
+          <MapAddIcon className="mr-1 relative left-[-2px]" />
+        ) : (
+          <MapDeleteIcon className="mr-1 relative left-[-2px]" />
+        ),
         command: onHubToggle,
       },
       ...(!systemOnMap

assets/js/hooks/Mapper/components/contexts/ContextMenuSystemInfo/useContextMenuSystemInfoHandlers.ts

@@ -1,25 +1,25 @@
 import * as React from 'react';
 import { useCallback, useRef, useState } from 'react';
 import { ContextMenu } from 'primereact/contextmenu';
-import { Commands, OutCommand, OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers.ts';
+import { Commands, OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { WaypointSetContextHandler } from '@/hooks/Mapper/components/contexts/types.ts';
 import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
 import { SolarSystemStaticInfoRaw } from '@/hooks/Mapper/types';
 import { emitMapEvent } from '@/hooks/Mapper/events';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useRouteProvider } from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesProvider.tsx';
 
-interface UseContextMenuSystemHandlersProps {
-  hubs: string[];
-  outCommand: OutCommandHandler;
-}
+export const useContextMenuSystemInfoHandlers = () => {
+  const { outCommand } = useMapRootState();
+  const { hubs = [], toggleHubCommand } = useRouteProvider();
 
-export const useContextMenuSystemInfoHandlers = ({ hubs, outCommand }: UseContextMenuSystemHandlersProps) => {
   const contextMenuRef = useRef<ContextMenu | null>(null);
 
   const [system, setSystem] = useState<string>();
   const routeRef = useRef<(SolarSystemStaticInfoRaw | undefined)[]>([]);
 
-  const ref = useRef({ hubs, system, outCommand });
-  ref.current = { hubs, system, outCommand };
+  const ref = useRef({ hubs, system, outCommand, toggleHubCommand });
+  ref.current = { hubs, system, outCommand, toggleHubCommand };
 
   const open = useCallback(
     (ev: React.SyntheticEvent, systemId: string, route: (SolarSystemStaticInfoRaw | undefined)[]) => {
@@ -33,17 +33,12 @@ export const useContextMenuSystemInfoHandlers = ({ hubs, outCommand }: UseContex
   );
 
   const onHubToggle = useCallback(() => {
-    const { hubs, system, outCommand } = ref.current;
+    const { system } = ref.current;
     if (!system) {
       return;
     }
 
-    outCommand({
-      type: !hubs.includes(system) ? OutCommand.addHub : OutCommand.deleteHub,
-      data: {
-        system_id: system,
-      },
-    });
+    ref.current.toggleHubCommand(system);
     setSystem(undefined);
   }, []);
 
@@ -59,6 +54,8 @@ export const useContextMenuSystemInfoHandlers = ({ hubs, outCommand }: UseContex
         system_id: solarSystemId,
       },
     });
+
+    // TODO add it to some queue
     setTimeout(() => {
       emitMapEvent({
         name: Commands.centerSystem,

assets/js/hooks/Mapper/components/contexts/components/FastSystemActions/FastSystemActions.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useRef } from 'react';
-import { LayoutEventBlocker, WdImageSize, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
-import { ANOIK_ICON, DOTLAN_ICON, ZKB_ICON } from '@/hooks/Mapper/icons.ts';
+import { LayoutEventBlocker, TooltipPosition, WdImageSize, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
+import { ANOIK_ICON, DOTLAN_ICON, ZKB_ICON } from '@/hooks/Mapper/icons';
 
 import classes from './FastSystemActions.module.scss';
 import clsx from 'clsx';
@@ -59,9 +59,21 @@ export const FastSystemActions = ({
   return (
     <LayoutEventBlocker className={clsx('flex px-2 gap-2 justify-between items-center h-full')}>
       <div className={clsx('flex gap-2 items-center h-full', classes.Links)}>
-        <WdImgButton tooltip={{ content: 'Open zkillboard' }} source={ZKB_ICON} onClick={handleOpenZKB} />
-        <WdImgButton tooltip={{ content: 'Open Anoikis' }} source={ANOIK_ICON} onClick={handleOpenAnoikis} />
-        <WdImgButton tooltip={{ content: 'Open Dotlan' }} source={DOTLAN_ICON} onClick={handleOpenDotlan} />
+        <WdImgButton
+          tooltip={{ position: TooltipPosition.top, content: 'Open zkillboard' }}
+          source={ZKB_ICON}
+          onClick={handleOpenZKB}
+        />
+        <WdImgButton
+          tooltip={{ position: TooltipPosition.top, content: 'Open Anoikis' }}
+          source={ANOIK_ICON}
+          onClick={handleOpenAnoikis}
+        />
+        <WdImgButton
+          tooltip={{ position: TooltipPosition.top, content: 'Open Dotlan' }}
+          source={DOTLAN_ICON}
+          onClick={handleOpenDotlan}
+        />
       </div>
 
       <div className="flex gap-2 items-center pl-1">
@@ -69,14 +81,14 @@ export const FastSystemActions = ({
           textSize={WdImageSize.off}
           className={PrimeIcons.COPY}
           onClick={copySystemNameToClipboard}
-          tooltip={{ content: 'Copy system name' }}
+          tooltip={{ position: TooltipPosition.top, content: 'Copy system name' }}
         />
         {showEdit && (
           <WdImgButton
             textSize={WdImageSize.off}
             className="pi pi-pen-to-square text-base"
             onClick={onOpenSettings}
-            tooltip={{ content: 'Edit system name and description' }}
+            tooltip={{ position: TooltipPosition.top, content: 'Edit system name and description' }}
           />
         )}
       </div>

assets/js/hooks/Mapper/components/hooks/useSystemInfo.ts

@@ -1,6 +1,6 @@
+import { getSystemById } from '@/hooks/Mapper/helpers';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useMemo } from 'react';
-import { getSystemById } from '@/hooks/Mapper/helpers';
 import { getSystemStaticInfo } from '../../mapRootProvider/hooks/useLoadSystemStatic';
 
 interface UseSystemInfoProps {
@@ -17,7 +17,7 @@ export const useSystemInfo = ({ systemId }: UseSystemInfoProps) => {
     const dynamicInfo = getSystemById(systems, systemId);
 
     if (!staticInfo || !dynamicInfo) {
-      throw new Error(`Error on getting system ${systemId}`);
+      return { dynamicInfo, staticInfo, leadsTo: [] };
     }
 
     const leadsTo = connections

assets/js/hooks/Mapper/components/map/Map.tsx

@@ -28,11 +28,12 @@ import {
 import { getBehaviorForTheme } from './helpers/getThemeBehavior';
 import { OnMapAddSystemCallback, OnMapSelectionChange } from './map.types';
 import { SESSION_KEY } from '@/hooks/Mapper/constants.ts';
-import { SolarSystemConnection, SolarSystemRawType } from '@/hooks/Mapper/types';
+import { PingData, SolarSystemConnection, SolarSystemRawType } from '@/hooks/Mapper/types';
 import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
 import { NodeSelectionMouseHandler } from '@/hooks/Mapper/components/contexts/types.ts';
 import clsx from 'clsx';
 import { useBackgroundVars } from './hooks/useBackgroundVars';
+import type { PanelPosition } from '@reactflow/core';
 
 const DEFAULT_VIEW_PORT = { zoom: 1, x: 0, y: 0 };
 
@@ -95,6 +96,8 @@ interface MapCompProps {
   isShowBackgroundPattern?: boolean;
   isSoftBackground?: boolean;
   theme?: string;
+  pings: PingData[];
+  minimapPlacement?: PanelPosition;
 }
 
 const MapComp = ({
@@ -112,6 +115,8 @@ const MapComp = ({
   isSoftBackground,
   theme,
   onAddSystem,
+  pings,
+  minimapPlacement = 'bottom-right',
 }: MapCompProps) => {
   const { getNodes } = useReactFlow();
   const [nodes, , onNodesChange] = useNodesState<Node<SolarSystemRawType>>(initialNodes);
@@ -206,8 +211,9 @@ const MapComp = ({
       ...x,
       showKSpaceBG: showKSpaceBG,
       isThickConnections: isThickConnections,
+      pings,
     }));
-  }, [showKSpaceBG, isThickConnections, update]);
+  }, [showKSpaceBG, isThickConnections, pings, update]);
 
   return (
     <>
@@ -270,7 +276,9 @@ const MapComp = ({
           // onlyRenderVisibleElements
           selectionMode={SelectionMode.Partial}
         >
-          {isShowMinimap && <MiniMap pannable zoomable ariaLabel="Mini map" className={minimapClasses} />}
+          {isShowMinimap && (
+            <MiniMap pannable zoomable ariaLabel="Mini map" className={minimapClasses} position={minimapPlacement} />
+          )}
           {isShowBackgroundPattern && <Background variant={variant} gap={gap} size={size} color={color} />}
         </ReactFlow>
         {/* <button className="z-auto btn btn-primary absolute top-20 right-20" onClick={handleGetPassages}>

assets/js/hooks/Mapper/components/map/MapProvider.tsx

@@ -38,6 +38,10 @@ const INITIAL_DATA: MapData = {
   systemSignatures: {} as Record<string, SystemSignature[]>,
   options: {} as Record<string, string | boolean>,
   isSubscriptionActive: false,
+  mainCharacterEveId: null,
+  followingCharacterEveId: null,
+  userHubs: [],
+  pings: [],
 };
 
 export interface MapContextProps {

assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemKillsCounter.tsx

@@ -26,11 +26,7 @@ export const KillsCounter = ({
   children,
   size = TooltipSize.xs,
 }: KillsBookmarkTooltipProps) => {
-  const {
-    isLoading,
-    kills: detailedKills,
-    systemNameMap,
-  } = useKillsCounter({
+  const { isLoading, kills: detailedKills } = useKillsCounter({
     realSystemId: systemId,
   });
 

assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemLocalCounter.tsx

@@ -6,8 +6,8 @@ import { CharItemProps, LocalCharactersList } from '../../../mapInterface/widget
 import { useLocalCharactersItemTemplate } from '../../../mapInterface/widgets/LocalCharacters/hooks/useLocalCharacters';
 import { useLocalCharacterWidgetSettings } from '../../../mapInterface/widgets/LocalCharacters/hooks/useLocalWidgetSettings';
 import classes from './SolarSystemLocalCounter.module.scss';
-import { AvailableThemes } from '@/hooks/Mapper/mapRootProvider';
 import { useTheme } from '@/hooks/Mapper/hooks/useTheme.ts';
+import { AvailableThemes } from '@/hooks/Mapper/mapRootProvider/types.ts';
 
 interface LocalCounterProps {
   localCounterCharacters: Array<CharItemProps>;

assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.module.scss

@@ -1,11 +1,23 @@
 @import '@/hooks/Mapper/components/map/styles/eve-common-variables';
 
 $pastel-blue: #5a7d9a;
-$pastel-pink: #d291bc;
+$pastel-pink: rgb(30, 161, 255);
 $dark-bg: #2d2d2d;
 $text-color: #ffffff;
 $tooltip-bg: #202020;
 
+$neon-color-1: rgb(27, 132, 236);
+$neon-color-3: rgba(27, 132, 236, 0.40);
+
+@keyframes move-stripes {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 30px 0;
+  }
+}
+
 .RootCustomNode {
   display: flex;
   width: 130px;
@@ -32,7 +44,7 @@ $tooltip-bg: #202020;
   &.Amarria,
   &.Gallente,
   &.Caldaria {
-    &::before {
+    &::after {
       content: '';
       position: absolute;
       top: 0;
@@ -48,7 +60,7 @@ $tooltip-bg: #202020;
   }
 
   &.Mataria {
-    &::before {
+    &::after {
       background-image: url('/images/mataria-180.png');
       opacity: 0.6;
       background-position-x: 1px;
@@ -57,7 +69,7 @@ $tooltip-bg: #202020;
   }
 
   &.Caldaria {
-    &::before {
+    &::after {
       background-image: url('/images/caldaria-180.png');
       opacity: 0.6;
       background-position-x: 1px;
@@ -66,7 +78,7 @@ $tooltip-bg: #202020;
   }
 
   &.Amarria {
-    &::before {
+    &::after {
       opacity: 0.45;
       background-image: url('/images/amarr-180.png');
       background-position-x: 0;
@@ -75,7 +87,7 @@ $tooltip-bg: #202020;
   }
 
   &.Gallente {
-    &::before {
+    &::after {
       opacity: 0.5;
       background-image: url('/images/gallente-180.png');
       background-position-x: 1px;
@@ -88,6 +100,29 @@ $tooltip-bg: #202020;
     box-shadow: 0 0 10px #9a1af1c2;
   }
 
+  &.rally {
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: -1;
+
+      border-color: $neon-color-1;
+      background: repeating-linear-gradient(
+          45deg,
+          $neon-color-3 0px,
+          $neon-color-3 8px,
+          transparent 8px,
+          transparent 21px
+      );
+      background-size: 30px 30px;
+      animation: move-stripes 3s linear infinite;
+    }
+  }
+
   &.eve-system-status-home {
     border: 1px solid var(--eve-solar-system-status-color-home-dark30);
     background-image: linear-gradient(45deg, var(--eve-solar-system-status-color-background), transparent);

assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.tsx

@@ -16,22 +16,20 @@ import { LocalCounter } from './SolarSystemLocalCounter';
 import { KillsCounter } from './SolarSystemKillsCounter';
 import { TooltipSize } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper/utils.ts';
 import { TooltipPosition, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
+import { Tag } from 'primereact/tag';
 
+// let render = 0;
 export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>) => {
   const nodeVars = useSolarSystemNode(props);
   const { localCounterCharacters } = useLocalCounter(nodeVars);
   const localKillsCount = useNodeKillsCount(nodeVars.solarSystemId, nodeVars.killsCount);
 
+  // console.log('JOipP', `render ${nodeVars.id}`, render++);
+
   return (
     <>
       {nodeVars.visible && (
         <div className={classes.Bookmarks}>
-          {nodeVars.labelCustom !== '' && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
-              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]">{nodeVars.labelCustom}</span>
-            </div>
-          )}
-
           {nodeVars.isShattered && (
             <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered, '!pr-[2px]')}>
               <WdTooltipWrapper content="Shattered" position={TooltipPosition.top}>
@@ -55,6 +53,12 @@ export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>
             </KillsCounter>
           )}
 
+          {nodeVars.labelCustom !== '' && (
+            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
+              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]">{nodeVars.labelCustom}</span>
+            </div>
+          )}
+
           {nodeVars.labelsInfo.map(x => (
             <div key={x.id} className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}>
               {x.shortName}
@@ -67,8 +71,11 @@ export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>
         className={clsx(
           classes.RootCustomNode,
           nodeVars.regionClass && classes[nodeVars.regionClass],
-          nodeVars.status !== undefined ? classes[STATUS_CLASSES[nodeVars.status]] : '',
-          { [classes.selected]: nodeVars.selected },
+          nodeVars.status !== undefined && classes[STATUS_CLASSES[nodeVars.status]],
+          {
+            [classes.selected]: nodeVars.selected,
+            [classes.rally]: nodeVars.isRally,
+          },
         )}
         onMouseDownCapture={e => nodeVars.dbClick(e)}
       >
@@ -86,7 +93,11 @@ export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>
               </div>
 
               {nodeVars.tag != null && nodeVars.tag !== '' && (
-                <div className={clsx(classes.TagTitle, 'text-sky-400 font-medium')}>{nodeVars.tag}</div>
+                <Tag
+                  value={nodeVars.tag}
+                  severity="warning"
+                  className="py-0 px-[2px] text-[9px] [&_.p-tag-value]:leading-[1.3]"
+                ></Tag>
               )}
 
               <div

assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeTheme.tsx

@@ -17,21 +17,18 @@ import { KillsCounter } from './SolarSystemKillsCounter';
 import { TooltipPosition, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
 import { TooltipSize } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper/utils.ts';
 
+// let render = 0;
 export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>) => {
   const nodeVars = useSolarSystemNode(props);
   const { localCounterCharacters } = useLocalCounter(nodeVars);
   const localKillsCount = useNodeKillsCount(nodeVars.solarSystemId, nodeVars.killsCount);
 
+  // console.log('JOipP', `render ${nodeVars.id}`, render++);
+
   return (
     <>
       {nodeVars.visible && (
         <div className={classes.Bookmarks}>
-          {nodeVars.labelCustom !== '' && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
-              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]">{nodeVars.labelCustom}</span>
-            </div>
-          )}
-
           {nodeVars.isShattered && (
             <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered, '!pr-[2px]')}>
               <WdTooltipWrapper content="Shattered" position={TooltipPosition.top}>
@@ -55,6 +52,12 @@ export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>)
             </KillsCounter>
           )}
 
+          {nodeVars.labelCustom !== '' && (
+            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
+              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]">{nodeVars.labelCustom}</span>
+            </div>
+          )}
+
           {nodeVars.labelsInfo.map(x => (
             <div key={x.id} className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}>
               {x.shortName}
@@ -68,7 +71,10 @@ export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>)
           classes.RootCustomNode,
           nodeVars.regionClass && classes[nodeVars.regionClass],
           nodeVars.status !== undefined ? classes[STATUS_CLASSES[nodeVars.status]] : '',
-          { [classes.selected]: nodeVars.selected },
+          {
+            [classes.selected]: nodeVars.selected,
+            [classes.rally]: nodeVars.isRally,
+          },
         )}
         onMouseDownCapture={e => nodeVars.dbClick(e)}
       >
@@ -113,23 +119,13 @@ export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>)
 
             <div className={clsx(classes.BottomRow, 'flex items-center justify-between')}>
               {nodeVars.customName && (
-                <div
-                  className={clsx(
-                    classes.CustomName,
-                    '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] whitespace-nowrap overflow-hidden text-ellipsis mr-0.5',
-                  )}
-                >
+                <div className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] whitespace-nowrap overflow-hidden text-ellipsis mr-0.5">
                   {nodeVars.customName}
                 </div>
               )}
 
               {!nodeVars.isWormhole && !nodeVars.customName && (
-                <div
-                  className={clsx(
-                    classes.RegionName,
-                    '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] whitespace-nowrap overflow-hidden text-ellipsis mr-0.5',
-                  )}
-                >
+                <div className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] whitespace-nowrap overflow-hidden text-ellipsis mr-0.5">
                   {nodeVars.regionName}
                 </div>
               )}

assets/js/hooks/Mapper/components/map/constants.ts

@@ -16,7 +16,7 @@ export enum SOLAR_SYSTEM_CLASS_IDS {
   thera = 12,
   c13 = 13,
   sentinel = 14,
-  baribican = 15,
+  barbican = 15,
   vidette = 16,
   conflux = 17,
   redoubt = 18,
@@ -82,7 +82,7 @@ export const SOLAR_SYSTEM_CLASSES_TO_CLASS_GROUPS = {
   thera: SOLAR_SYSTEM_CLASS_GROUPS.thera,
   c13: SOLAR_SYSTEM_CLASS_GROUPS.c13,
   sentinel: SOLAR_SYSTEM_CLASS_GROUPS.drifter,
-  baribican: SOLAR_SYSTEM_CLASS_GROUPS.drifter,
+  barbican: SOLAR_SYSTEM_CLASS_GROUPS.drifter,
   vidette: SOLAR_SYSTEM_CLASS_GROUPS.drifter,
   conflux: SOLAR_SYSTEM_CLASS_GROUPS.drifter,
   redoubt: SOLAR_SYSTEM_CLASS_GROUPS.drifter,
@@ -217,7 +217,7 @@ export const WORMHOLES_ADDITIONAL_INFO_RAW: WormholesAdditionalInfoType[] = [
     wormholeClassID: 14,
     effectPower: 2,
     title: 'Class 14 (Sentinel Drifter)',
-    shortTitle: 'Sentinel',
+    shortTitle: 'Sentinel MZ',
   },
   {
     id: 'barbican',
@@ -225,7 +225,7 @@ export const WORMHOLES_ADDITIONAL_INFO_RAW: WormholesAdditionalInfoType[] = [
     wormholeClassID: 15,
     effectPower: 2,
     title: 'Class 15 (Barbican Drifter)',
-    shortTitle: 'Barbican',
+    shortTitle: 'Liberated Barbican',
   },
   {
     id: 'vidette',
@@ -233,7 +233,7 @@ export const WORMHOLES_ADDITIONAL_INFO_RAW: WormholesAdditionalInfoType[] = [
     wormholeClassID: 16,
     effectPower: 2,
     title: 'Class 16 (Vidette Drifter)',
-    shortTitle: 'Vidette',
+    shortTitle: 'Sanctified Vidette',
   },
   {
     id: 'conflux',
@@ -241,7 +241,7 @@ export const WORMHOLES_ADDITIONAL_INFO_RAW: WormholesAdditionalInfoType[] = [
     wormholeClassID: 17,
     effectPower: 2,
     title: 'Class 17 (Conflux Drifter)',
-    shortTitle: 'Conflux',
+    shortTitle: 'Conflux Eyrie',
   },
   {
     id: 'redoubt',
@@ -249,7 +249,7 @@ export const WORMHOLES_ADDITIONAL_INFO_RAW: WormholesAdditionalInfoType[] = [
     wormholeClassID: 18,
     effectPower: 2,
     title: 'Class 18 (Redoubt Drifter)',
-    shortTitle: 'Redoubt',
+    shortTitle: 'Azdaja Redoubt',
   },
   {
     id: 'a1',

assets/js/hooks/Mapper/components/map/helpers/isWormholeSpace.ts

@@ -10,7 +10,7 @@ export const isWormholeSpace = (wormholeClassID: number) => {
     case SOLAR_SYSTEM_CLASS_IDS.c6:
     case SOLAR_SYSTEM_CLASS_IDS.c13:
     case SOLAR_SYSTEM_CLASS_IDS.thera:
-    case SOLAR_SYSTEM_CLASS_IDS.baribican:
+    case SOLAR_SYSTEM_CLASS_IDS.barbican:
     case SOLAR_SYSTEM_CLASS_IDS.vidette:
     case SOLAR_SYSTEM_CLASS_IDS.conflux:
     case SOLAR_SYSTEM_CLASS_IDS.redoubt:

assets/js/hooks/Mapper/components/map/hooks/api/useCommandsCharacters.ts

@@ -1,5 +1,4 @@
 import { useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
-import { useCallback, useRef } from 'react';
 import {
   CommandCharacterAdded,
   CommandCharacterRemoved,
@@ -7,6 +6,7 @@ import {
   CommandCharacterUpdated,
   CommandPresentCharacters,
 } from '@/hooks/Mapper/types';
+import { useCallback, useRef } from 'react';
 
 export const useCommandsCharacters = () => {
   const { update } = useMapState();

assets/js/hooks/Mapper/components/map/hooks/api/useMapCommands.ts

@@ -1,6 +1,6 @@
 import { MapData, useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
-import { useCallback, useRef } from 'react';
 import { CommandKillsUpdated, CommandMapUpdated } from '@/hooks/Mapper/types';
+import { useCallback, useRef } from 'react';
 
 export const useMapCommands = () => {
   const { update } = useMapState();
@@ -8,13 +8,21 @@ export const useMapCommands = () => {
   const ref = useRef({ update });
   ref.current = { update };
 
-  const mapUpdated = useCallback(({ hubs }: CommandMapUpdated) => {
+  const mapUpdated = useCallback(({ hubs, system_signatures, kills }: CommandMapUpdated) => {
     const out: Partial<MapData> = {};
 
     if (hubs) {
       out.hubs = hubs;
     }
 
+    if (system_signatures) {
+      out.systemSignatures = system_signatures;
+    }
+
+    if (kills) {
+      out.kills = kills.reduce((acc, x) => ({ ...acc, [x.solar_system_id]: x.kills }), {});
+    }
+
     ref.current.update(out);
   }, []);
 

assets/js/hooks/Mapper/components/map/hooks/api/useMapInit.ts

@@ -1,8 +1,8 @@
-import { useReactFlow } from 'reactflow';
-import { useCallback, useRef } from 'react';
-import { CommandInit } from '@/hooks/Mapper/types/mapHandlers.ts';
-import { convertConnection2Edge, convertSystem2Node } from '../../helpers';
 import { MapData, useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
+import { CommandInit } from '@/hooks/Mapper/types/mapHandlers.ts';
+import { useCallback, useRef } from 'react';
+import { useReactFlow } from 'reactflow';
+import { convertConnection2Edge, convertSystem2Node } from '../../helpers';
 
 export const useMapInit = () => {
   const rf = useReactFlow();

assets/js/hooks/Mapper/components/map/hooks/useMapHandlers.ts

@@ -115,35 +115,18 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
               }, 500);
               break;
 
+            case Commands.pingAdded:
+            case Commands.pingCancelled:
             case Commands.routes:
-              // do nothing here
-              break;
-
             case Commands.signaturesUpdated:
-              // do nothing here
-              break;
-
             case Commands.linkSignatureToSystem:
-              // do nothing here
-              break;
-
             case Commands.detailedKillsUpdated:
-              // do nothing here
-              break;
-
             case Commands.characterActivityData:
-              break;
-
             case Commands.trackingCharactersData:
-              break;
-
             case Commands.updateActivity:
-              break;
-
             case Commands.updateTracking:
-              break;
-
             case Commands.userSettingsUpdated:
+              // do nothing
               break;
 
             default:

assets/js/hooks/Mapper/components/map/hooks/useNodeKillsCount.ts

@@ -13,28 +13,26 @@ interface MapEvent {
   payload?: Kill[];
 }
 
-export function useNodeKillsCount(
-  systemId: number | string,
-  initialKillsCount: number | null
-): number | null {
+export function useNodeKillsCount(systemId: number | string, initialKillsCount: number | null): number | null {
   const [killsCount, setKillsCount] = useState<number | null>(initialKillsCount);
 
   useEffect(() => {
     setKillsCount(initialKillsCount);
   }, [initialKillsCount]);
 
-  const handleEvent = useCallback((event: MapEvent): boolean => {
-    if (event.name === Commands.killsUpdated && Array.isArray(event.payload)) {
-      const killForSystem = event.payload.find(
-        kill => kill.solar_system_id.toString() === systemId.toString()
-      );
-      if (killForSystem && typeof killForSystem.kills === 'number') {
-        setKillsCount(killForSystem.kills);
+  const handleEvent = useCallback(
+    (event: MapEvent): boolean => {
+      if (event.name === Commands.killsUpdated && Array.isArray(event.payload)) {
+        const killForSystem = event.payload.find(kill => kill.solar_system_id.toString() === systemId.toString());
+        if (killForSystem && typeof killForSystem.kills === 'number') {
+          setKillsCount(killForSystem.kills);
+        }
+        return true;
       }
-      return true;
-    }
-    return false;
-  }, [systemId]);
+      return false;
+    },
+    [systemId],
+  );
 
   useMapEventListener(handleEvent);
 

assets/js/hooks/Mapper/components/map/hooks/useSolarSystemNode.ts

@@ -9,7 +9,7 @@ import { REGIONS_MAP, Spaces } from '@/hooks/Mapper/constants';
 import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace';
 import { getSystemClassStyles } from '@/hooks/Mapper/components/map/helpers';
 import { sortWHClasses } from '@/hooks/Mapper/helpers';
-import { CharacterTypeRaw, OutCommand, SystemSignature } from '@/hooks/Mapper/types';
+import { CharacterTypeRaw, OutCommand, PingType, SystemSignature } from '@/hooks/Mapper/types';
 import { useUnsplashedSignatures } from './useUnsplashedSignatures';
 import { useSystemName } from './useSystemName';
 import { LabelInfo, useLabelsInfo } from './useLabelsInfo';
@@ -21,6 +21,45 @@ function getActivityType(count: number): string {
   return 'activityDanger';
 }
 
+export interface SolarSystemNodeVars {
+  id: string;
+  selected: boolean;
+  visible: boolean;
+  isWormhole: boolean;
+  classTitleColor: string | null;
+  killsCount: number | null;
+  killsActivityType: string | null;
+  hasUserCharacters: boolean;
+  showHandlers: boolean;
+  regionClass: string | null;
+  systemName: string;
+  customName?: string | null;
+  labelCustom: string | null;
+  isShattered: boolean;
+  tag?: string | null;
+  status?: number;
+  labelsInfo: LabelInfo[];
+  dbClick: (event: React.MouseEvent<HTMLDivElement>) => void;
+  sortedStatics: Array<string | number>;
+  effectName: string | null;
+  regionName: string | null;
+  solarSystemId: string;
+  solarSystemName: string | null;
+  locked: boolean;
+  hubs: string[];
+  name: string | null;
+  isConnecting: boolean;
+  hoverNodeId: string | null;
+  charactersInSystem: Array<CharacterTypeRaw>;
+  userCharacters: string[];
+  unsplashedLeft: Array<SystemSignature>;
+  unsplashedRight: Array<SystemSignature>;
+  isThickConnections: boolean;
+  isRally: boolean;
+  classTitle: string | null;
+  temporaryName?: string | null;
+}
+
 const SpaceToClass: Record<string, string> = {
   [Spaces.Caldari]: 'Caldaria',
   [Spaces.Matar]: 'Mataria',
@@ -41,7 +80,7 @@ export function useLocalCounter(nodeVars: SolarSystemNodeVars) {
   return { localCounterCharacters };
 }
 
-export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarSystemNodeVars {
+export const useSolarSystemNode = (props: NodeProps<MapSolarSystemType>): SolarSystemNodeVars => {
   const { id, data, selected } = props;
   const {
     id: solar_system_id,
@@ -55,10 +94,14 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarS
   } = data;
 
   const {
-    interfaceSettings,
+    storedSettings: { interfaceSettings },
     data: { systemSignatures: mapSystemSignatures },
   } = useMapRootState();
 
+  const systemStaticInfo = useMemo(() => {
+    return getSystemStaticInfo(solar_system_id)!;
+  }, [solar_system_id]);
+
   const {
     system_class,
     security,
@@ -69,9 +112,7 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarS
     region_id,
     is_shattered,
     solar_system_name,
-  } = useMemo(() => {
-    return getSystemStaticInfo(parseInt(solar_system_id))!;
-  }, [solar_system_id]);
+  } = systemStaticInfo;
 
   const { isShowUnsplashedSignatures } = interfaceSettings;
   const isTempSystemNameEnabled = useMapGetOption('show_temp_system_name') === 'true';
@@ -90,6 +131,7 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarS
       visibleNodes,
       showKSpaceBG,
       isThickConnections,
+      pings,
     },
     outCommand,
   } = useMapState();
@@ -130,7 +172,7 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarS
   const dbClick = useDoubleClick(() => {
     outCommand({
       type: OutCommand.openSettings,
-      data: { system_id: solar_system_id.toString() },
+      data: { system_id: solar_system_id },
     });
   });
 
@@ -142,16 +184,21 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarS
   const { systemName, computedTemporaryName, customName } = useSystemName({
     isTempSystemNameEnabled,
     temporary_name,
-    solar_system_name: solar_system_name || '',
     isShowLinkedSigIdTempName,
     linkedSigPrefix,
     name,
+    systemStaticInfo,
   });
 
   const { unsplashedLeft, unsplashedRight } = useUnsplashedSignatures(systemSigs, isShowUnsplashedSignatures);
 
   const hubsAsStrings = useMemo(() => hubs.map(item => item.toString()), [hubs]);
 
+  const isRally = useMemo(
+    () => pings.find(x => x.solar_system_id === solar_system_id && x.type === PingType.Rally),
+    [pings, solar_system_id],
+  );
+
   const nodeVars: SolarSystemNodeVars = {
     id,
     selected,
@@ -188,45 +235,8 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarS
     temporaryName: computedTemporaryName,
     regionName: region_name,
     solarSystemName: solar_system_name,
+    isRally,
   };
 
   return nodeVars;
-}
-
-export interface SolarSystemNodeVars {
-  id: string;
-  selected: boolean;
-  visible: boolean;
-  isWormhole: boolean;
-  classTitleColor: string | null;
-  killsCount: number | null;
-  killsActivityType: string | null;
-  hasUserCharacters: boolean;
-  showHandlers: boolean;
-  regionClass: string | null;
-  systemName: string;
-  customName?: string | null;
-  labelCustom: string | null;
-  isShattered: boolean;
-  tag?: string | null;
-  status?: number;
-  labelsInfo: LabelInfo[];
-  dbClick: (event: React.MouseEvent<HTMLDivElement>) => void;
-  sortedStatics: Array<string | number>;
-  effectName: string | null;
-  regionName: string | null;
-  solarSystemId: string;
-  solarSystemName: string | null;
-  locked: boolean;
-  hubs: string[];
-  name: string | null;
-  isConnecting: boolean;
-  hoverNodeId: string | null;
-  charactersInSystem: Array<CharacterTypeRaw>;
-  userCharacters: string[];
-  unsplashedLeft: Array<SystemSignature>;
-  unsplashedRight: Array<SystemSignature>;
-  isThickConnections: boolean;
-  classTitle: string | null;
-  temporaryName?: string | null;
-}
+};

assets/js/hooks/Mapper/components/map/hooks/useSystemName.ts

@@ -1,30 +1,34 @@
-// useSystemName.ts
 import { useMemo } from 'react';
+import { SolarSystemStaticInfoRaw } from '@/hooks/Mapper/types';
 
 interface UseSystemNameParams {
   isTempSystemNameEnabled: boolean;
   temporary_name?: string | null;
-  solar_system_name: string;
   isShowLinkedSigIdTempName: boolean;
   linkedSigPrefix: string | null;
   name?: string | null;
+  systemStaticInfo: SolarSystemStaticInfoRaw;
 }
 
-export function useSystemName({
+export const useSystemName = ({
   isTempSystemNameEnabled,
   temporary_name,
-  solar_system_name,
   isShowLinkedSigIdTempName,
   linkedSigPrefix,
   name,
-}: UseSystemNameParams) {
+  systemStaticInfo,
+}: UseSystemNameParams) => {
+  const { solar_system_name = '' } = systemStaticInfo;
+
   const computedTemporaryName = useMemo(() => {
     if (!isTempSystemNameEnabled) {
       return '';
     }
+
     if (isShowLinkedSigIdTempName && linkedSigPrefix) {
       return temporary_name ? `${linkedSigPrefix}・${temporary_name}` : `${linkedSigPrefix}・${solar_system_name}`;
     }
+
     return temporary_name ?? '';
   }, [isTempSystemNameEnabled, temporary_name, solar_system_name, isShowLinkedSigIdTempName, linkedSigPrefix]);
 
@@ -32,6 +36,7 @@ export function useSystemName({
     if (isTempSystemNameEnabled && computedTemporaryName) {
       return computedTemporaryName;
     }
+
     return solar_system_name;
   }, [isTempSystemNameEnabled, computedTemporaryName, solar_system_name]);
 
@@ -39,11 +44,13 @@ export function useSystemName({
     if (isTempSystemNameEnabled && computedTemporaryName && name) {
       return name;
     }
+
     if (solar_system_name !== name && name) {
       return name;
     }
+
     return null;
   }, [isTempSystemNameEnabled, computedTemporaryName, name, solar_system_name]);
 
   return { systemName, computedTemporaryName, customName };
-}
+};

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

@@ -1,9 +1,12 @@
 import classes from './MarkdownComment.module.scss';
 import clsx from 'clsx';
-import Markdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import { InfoDrawer, TimeAgo, TooltipPosition, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
-import remarkBreaks from 'remark-breaks';
+import {
+  InfoDrawer,
+  MarkdownTextViewer,
+  TimeAgo,
+  TooltipPosition,
+  WdImgButton,
+} from '@/hooks/Mapper/components/ui-kit';
 import { useGetCacheCharacter } from '@/hooks/Mapper/mapRootProvider/hooks/api';
 import { useCallback, useRef, useState } from 'react';
 import { WdTransition } from '@/hooks/Mapper/components/ui-kit/WdTransition/WdTransition.tsx';
@@ -13,7 +16,6 @@ import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { OutCommand } from '@/hooks/Mapper/types';
 
 const TOOLTIP_PROPS = { content: 'Remove comment', position: TooltipPosition.top };
-const REMARK_PLUGINS = [remarkGfm, remarkBreaks];
 
 export interface MarkdownCommentProps {
   text: string;
@@ -79,7 +81,7 @@ export const MarkdownComment = ({ text, time, characterEveId, id }: MarkdownComm
           </div>
         }
       >
-        <Markdown remarkPlugins={REMARK_PLUGINS}>{text}</Markdown>
+        <MarkdownTextViewer>{text}</MarkdownTextViewer>
       </InfoDrawer>
 
       <ConfirmPopup

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

@@ -9,6 +9,7 @@ import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 
 export interface CommentsEditorProps {}
 
+// eslint-disable-next-line no-empty-pattern
 export const CommentsEditor = ({}: CommentsEditorProps) => {
   const [textVal, setTextVal] = useState('');
 

assets/js/hooks/Mapper/components/mapInterface/components/PingsInterface/PingRoute.tsx

@@ -0,0 +1,49 @@
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useMemo } from 'react';
+import { RoutesList } from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesList';
+
+export const PingRoute = () => {
+  const {
+    data: { routes, pings, loadingPublicRoutes },
+  } = useMapRootState();
+
+  const route = useMemo(() => {
+    const [ping] = pings;
+    if (!ping) {
+      return null;
+    }
+
+    return routes?.routes.find(x => ping.solar_system_id === x.destination.toString()) ?? null;
+  }, [routes, pings]);
+
+  const preparedRoute = useMemo(() => {
+    if (!route) {
+      return null;
+    }
+
+    return {
+      ...route,
+      mapped_systems:
+        route.systems?.map(solar_system_id =>
+          routes?.systems_static_data.find(
+            system_static_data => system_static_data.solar_system_id === solar_system_id,
+          ),
+        ) ?? [],
+    };
+  }, [route, routes?.systems_static_data]);
+
+  if (loadingPublicRoutes) {
+    return <span className="m-0 text-[12px]">Loading...</span>;
+  }
+
+  if (!preparedRoute || preparedRoute.origin === preparedRoute.destination) {
+    return null;
+  }
+
+  return (
+    <div className="m-0 flex gap-2 items-center text-[12px]">
+      {preparedRoute.has_connection && <div className="text-[12px]">{preparedRoute.systems?.length ?? 2}</div>}
+      <RoutesList data={preparedRoute} />
+    </div>
+  );
+};

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

@@ -0,0 +1,284 @@
+import { Button } from 'primereact/button';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Toast } from 'primereact/toast';
+import clsx from 'clsx';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { Commands, OutCommand, PingType } from '@/hooks/Mapper/types';
+import {
+  CharacterCardById,
+  SystemView,
+  TimeAgo,
+  TooltipPosition,
+  WdImgButton,
+  WdImgButtonTooltip,
+} from '@/hooks/Mapper/components/ui-kit';
+import useRefState from 'react-usestateref';
+import { PrimeIcons } from 'primereact/api';
+import { emitMapEvent } from '@/hooks/Mapper/events';
+import { ConfirmPopup } from 'primereact/confirmpopup';
+import { PingRoute } from '@/hooks/Mapper/components/mapInterface/components/PingsInterface/PingRoute.tsx';
+import { PingsPlacement } from '@/hooks/Mapper/mapRootProvider/types.ts';
+
+const PING_PLACEMENT_MAP = {
+  [PingsPlacement.rightTop]: 'top-right',
+  [PingsPlacement.leftTop]: 'top-left',
+  [PingsPlacement.rightBottom]: 'bottom-right',
+  [PingsPlacement.leftBottom]: 'bottom-left',
+};
+
+const PING_PLACEMENT_MAP_OFFSETS = {
+  [PingsPlacement.rightTop]: { default: '!top-[56px]', withLeftMenu: '!top-[56px] !right-[64px]' },
+  [PingsPlacement.rightBottom]: { default: '!bottom-[15px]', withLeftMenu: '!bottom-[15px] !right-[64px]' },
+  [PingsPlacement.leftTop]: { default: '!top-[56px] !left-[64px]', withLeftMenu: '!top-[56px] !left-[64px]' },
+  [PingsPlacement.leftBottom]: { default: '!left-[64px] !bottom-[15px]', withLeftMenu: '!bottom-[15px]' },
+};
+
+const CLOSE_TOOLTIP_PROPS: WdImgButtonTooltip = {
+  content: 'Hide',
+  position: TooltipPosition.top,
+  className: '!leading-[0]',
+};
+
+const NAVIGATE_TOOLTIP_PROPS: WdImgButtonTooltip = {
+  content: 'Navigate To',
+  position: TooltipPosition.top,
+  className: '!leading-[0]',
+};
+
+const DELETE_TOOLTIP_PROPS: WdImgButtonTooltip = {
+  content: 'Remove',
+  position: TooltipPosition.top,
+  className: '!leading-[0]',
+};
+
+// const TOOLTIP_WAYPOINT_PROPS: WdImgButtonTooltip = {
+//   content: 'Waypoint',
+//   position: TooltipPosition.bottom,
+//   className: '!leading-[0]',
+// };
+
+const TITLES = {
+  [PingType.Alert]: 'Alert',
+  [PingType.Rally]: 'Rally Point',
+};
+
+const ICONS = {
+  [PingType.Alert]: 'pi-bell',
+  [PingType.Rally]: 'pi-bell',
+};
+
+export interface PingsInterfaceProps {
+  hasLeftOffset?: boolean;
+}
+
+// TODO: right now can be one ping. But in future will be multiple pings then:
+//  1. we will use this as container
+//  2. we will create PingInstance (which will contains ping Button and Toast
+//  3. ADD Context menu
+export const PingsInterface = ({ hasLeftOffset }: PingsInterfaceProps) => {
+  const toast = useRef<Toast>(null);
+  const [isShow, setIsShow, isShowRef] = useRefState(false);
+
+  const cpRemoveBtnRef = useRef<HTMLElement>();
+  const [cpRemoveVisible, setCpRemoveVisible] = useState(false);
+
+  const {
+    storedSettings: { interfaceSettings },
+    data: { pings, selectedSystems },
+    outCommand,
+  } = useMapRootState();
+
+  const selectedSystem = useMemo(() => {
+    if (selectedSystems.length !== 1) {
+      return null;
+    }
+
+    return selectedSystems[0];
+  }, [selectedSystems]);
+
+  const ping = useMemo(() => (pings.length === 1 ? pings[0] : null), [pings]);
+
+  const handleShowCP = useCallback(() => setCpRemoveVisible(true), []);
+  const handleHideCP = useCallback(() => setCpRemoveVisible(false), []);
+
+  const navigateTo = useCallback(() => {
+    if (!ping) {
+      return;
+    }
+
+    emitMapEvent({
+      name: Commands.centerSystem,
+      data: ping.solar_system_id?.toString(),
+    });
+  }, [ping]);
+
+  const removePing = useCallback(async () => {
+    if (!ping) {
+      return;
+    }
+
+    await outCommand({
+      type: OutCommand.cancelPing,
+      data: { type: ping.type, solar_system_id: ping.solar_system_id },
+    });
+  }, [outCommand, ping]);
+
+  useEffect(() => {
+    if (!ping) {
+      return;
+    }
+
+    const tid = setTimeout(() => {
+      toast.current?.replace({ severity: 'warn', detail: ping.message });
+      setIsShow(true);
+    }, 200);
+
+    return () => clearTimeout(tid);
+  }, [ping]);
+
+  const handleClickShow = useCallback(() => {
+    if (!ping) {
+      return;
+    }
+
+    if (!isShowRef.current) {
+      toast.current?.show({ severity: 'warn', detail: ping.message });
+      setIsShow(true);
+      return;
+    }
+    toast.current?.clear();
+    setIsShow(false);
+  }, [ping]);
+
+  const handleClickHide = useCallback(() => {
+    toast.current?.clear();
+    setIsShow(false);
+  }, []);
+
+  const { placement, offsets } = useMemo(() => {
+    const rawPlacement =
+      interfaceSettings.pingsPlacement == null ? PingsPlacement.rightTop : interfaceSettings.pingsPlacement;
+
+    return {
+      placement: PING_PLACEMENT_MAP[rawPlacement],
+      offsets: PING_PLACEMENT_MAP_OFFSETS[rawPlacement],
+    };
+  }, [interfaceSettings]);
+
+  if (!ping) {
+    return null;
+  }
+
+  const isShowSelectedSystem = selectedSystem != null && selectedSystem !== ping.solar_system_id;
+
+  return (
+    <>
+      <Toast
+        position={placement as never}
+        className={clsx('!max-w-[initial] w-[500px]', hasLeftOffset ? offsets.withLeftMenu : offsets.default)}
+        ref={toast}
+        content={({ message }) => (
+          <section
+            className={clsx(
+              'flex flex-col p-3 w-full border border-stone-800 shadow-md animate-fadeInDown rounded-[5px]',
+              'bg-gradient-to-tr from-transparent to-sky-700/60 bg-stone-900/70',
+            )}
+          >
+            <div className="flex gap-3">
+              <i className={clsx('pi text-yellow-500 text-2xl', 'relative top-[2px]', ICONS[ping.type])}></i>
+              <div className="flex flex-col gap-1 w-full">
+                <div className="flex justify-between">
+                  <div>
+                    <div className="m-0 font-semibold text-base text-white">{TITLES[ping.type]}</div>
+
+                    <div className="flex gap-1 items-center">
+                      {isShowSelectedSystem && (
+                        <>
+                          <SystemView systemId={selectedSystem} />
+                          <span className="pi pi-angle-double-right text-[10px] relative top-[1px] text-stone-400" />
+                        </>
+                      )}
+                      <SystemView systemId={ping.solar_system_id} />
+                      {isShowSelectedSystem && (
+                        <WdImgButton
+                          className={clsx(PrimeIcons.QUESTION_CIRCLE, 'ml-[2px] relative top-[-2px] !text-[10px]')}
+                          tooltip={{
+                            position: TooltipPosition.top,
+                            content: (
+                              <div className="flex flex-col gap-1">
+                                The settings for the route are taken from the Routes settings and can be configured
+                                through them.
+                              </div>
+                            ),
+                          }}
+                        />
+                      )}
+                    </div>
+                  </div>
+                  <div className="flex flex-col items-end">
+                    <CharacterCardById className="" characterId={ping.character_eve_id} simpleMode />
+                    <TimeAgo timestamp={ping.inserted_at.toString()} className="text-stone-400 text-[11px]" />
+                  </div>
+                </div>
+
+                {selectedSystem != null && <PingRoute />}
+
+                <p className="m-0 text-[13px] text-stone-200 min-h-[20px] pr-[16px]">{message.detail}</p>
+              </div>
+
+              <WdImgButton
+                className={clsx(PrimeIcons.TIMES, 'hover:text-red-400 mt-[3px]')}
+                tooltip={CLOSE_TOOLTIP_PROPS}
+                onClick={handleClickHide}
+              />
+            </div>
+
+            {/*Button bar*/}
+            <div className="flex justify-end items-center gap-2 h-0 relative top-[-8px]">
+              <WdImgButton
+                className={clsx('pi-compass', 'hover:text-red-400 mt-[3px]')}
+                tooltip={NAVIGATE_TOOLTIP_PROPS}
+                onClick={navigateTo}
+              />
+
+              {/*@ts-ignore*/}
+              <div ref={cpRemoveBtnRef}>
+                <WdImgButton
+                  className={clsx('pi-trash', 'text-red-400 hover:text-red-300')}
+                  tooltip={DELETE_TOOLTIP_PROPS}
+                  onClick={handleShowCP}
+                />
+              </div>
+              {/* TODO ADD solar system menu*/}
+              {/*<WdImgButton*/}
+              {/*  className={clsx('pi-map-marker', 'hover:text-red-400 mt-[3px]')}*/}
+              {/*  tooltip={TOOLTIP_WAYPOINT_PROPS}*/}
+              {/*  onClick={handleClickHide}*/}
+              {/*/>*/}
+            </div>
+          </section>
+        )}
+      ></Toast>
+
+      <Button
+        icon="pi pi-bell"
+        severity="warning"
+        aria-label="Notification"
+        size="small"
+        className="w-[33px] h-[33px]"
+        outlined
+        onClick={handleClickShow}
+        disabled={isShow}
+      />
+
+      <ConfirmPopup
+        target={cpRemoveBtnRef.current}
+        visible={cpRemoveVisible}
+        onHide={handleHideCP}
+        message="Are you sure you want to delete ping?"
+        icon="pi pi-exclamation-triangle text-orange-400"
+        accept={removePing}
+      />
+    </>
+  );
+};

assets/js/hooks/Mapper/components/mapInterface/components/PingsInterface/index.ts

@@ -0,0 +1 @@
+export * from './PingsInterface.tsx';

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

@@ -1,23 +1,23 @@
-import { useCallback, useMemo, useRef } from 'react';
 import { Dialog } from 'primereact/dialog';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 
-import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
-import { CommandLinkSignatureToSystem, SignatureGroup, SystemSignature, TimeStatus } from '@/hooks/Mapper/types';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { SystemSignaturesContent } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent';
-import { parseSignatureCustomInfo } from '@/hooks/Mapper/helpers/parseSignatureCustomInfo';
-import { getWhSize } from '@/hooks/Mapper/helpers/getWhSize';
 import { useSystemInfo } from '@/hooks/Mapper/components/hooks';
 import {
   SOLAR_SYSTEM_CLASS_IDS,
   SOLAR_SYSTEM_CLASSES_TO_CLASS_GROUPS,
   WORMHOLES_ADDITIONAL_INFO_BY_SHORT_NAME,
 } from '@/hooks/Mapper/components/map/constants.ts';
-import { K162_TYPES_MAP } from '@/hooks/Mapper/constants.ts';
 import {
   SETTINGS_KEYS,
   SignatureSettingsType,
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
+import { SystemSignaturesContent } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent';
+import { K162_TYPES_MAP } from '@/hooks/Mapper/constants.ts';
+import { getWhSize } from '@/hooks/Mapper/helpers/getWhSize';
+import { parseSignatureCustomInfo } from '@/hooks/Mapper/helpers/parseSignatureCustomInfo';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { CommandLinkSignatureToSystem, SignatureGroup, SystemSignature, TimeStatus } from '@/hooks/Mapper/types';
+import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
 
 const K162_SIGNATURE_TYPE = WORMHOLES_ADDITIONAL_INFO_BY_SHORT_NAME['K162'].shortName;
 
@@ -49,7 +49,9 @@ export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignat
   ref.current = { outCommand };
 
   // Get system info for the target system
-  const { staticInfo: targetSystemInfo } = useSystemInfo({ systemId: `${data.solar_system_target}` });
+  const { staticInfo: targetSystemInfo, dynamicInfo: targetSystemDynamicInfo } = useSystemInfo({
+    systemId: `${data.solar_system_target}`,
+  });
 
   // Get the system class group for the target system
   const targetSystemClassGroup = useMemo(() => {
@@ -144,7 +146,7 @@ export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignat
       }
 
       const whShipSize = getWhSize(wormholes, signature.type);
-      if (whShipSize) {
+      if (whShipSize !== undefined && whShipSize !== null) {
         await outCommand({
           type: OutCommand.updateConnectionShipSizeType,
           data: {
@@ -160,6 +162,12 @@ export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignat
     [data, setVisible, wormholes],
   );
 
+  useEffect(() => {
+    if (!targetSystemDynamicInfo) {
+      handleHide();
+    }
+  }, [targetSystemDynamicInfo]);
+
   return (
     <Dialog
       header="Select signature to link"

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

@@ -0,0 +1,101 @@
+import { InputTextarea } from 'primereact/inputtextarea';
+import { Dialog } from 'primereact/dialog';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useCallback, useRef, useState } from 'react';
+import { Button } from 'primereact/button';
+import { OutCommand } from '@/hooks/Mapper/types';
+import { PingType } from '@/hooks/Mapper/types/ping.ts';
+import { SystemView } from '@/hooks/Mapper/components/ui-kit';
+import clsx from 'clsx';
+
+const PING_TITLES = {
+  [PingType.Rally]: 'RALLY',
+  [PingType.Alert]: 'ALERT',
+};
+
+interface SystemPingDialogProps {
+  systemId: string;
+  type: PingType;
+  visible: boolean;
+  setVisible: (visible: boolean) => void;
+}
+
+export const SystemPingDialog = ({ systemId, type, visible, setVisible }: SystemPingDialogProps) => {
+  const { outCommand } = useMapRootState();
+
+  const [message, setMessage] = useState('');
+  const inputRef = useRef<HTMLTextAreaElement>();
+
+  const ref = useRef({ message, outCommand, systemId, type });
+  ref.current = { message, outCommand, systemId, type };
+
+  const handleSave = useCallback(() => {
+    const { message, outCommand, systemId, type } = ref.current;
+
+    outCommand({
+      type: OutCommand.addPing,
+      data: {
+        solar_system_id: systemId,
+        type,
+        message,
+      },
+    });
+    setVisible(false);
+  }, [setVisible]);
+
+  const onShow = useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  return (
+    <Dialog
+      header={
+        <div className="flex gap-1 text-[13px] items-center text-stone-300">
+          <div>Ping:{` `}</div>
+          <div
+            className={clsx({
+              ['text-cyan-400']: type === PingType.Rally,
+            })}
+          >
+            {PING_TITLES[type]}
+          </div>
+          <div className="text-[11px]">in</div> <SystemView systemId={systemId} className="relative top-[1px]" />
+        </div>
+      }
+      visible={visible}
+      draggable={false}
+      style={{ width: '450px' }}
+      onShow={onShow}
+      onHide={() => {
+        if (!visible) {
+          return;
+        }
+
+        setVisible(false);
+      }}
+    >
+      <form onSubmit={handleSave}>
+        <div className="flex flex-col gap-3 px-2">
+          <div className="flex flex-col gap-1">
+            <label className="text-[11px]" htmlFor="username">
+              Message
+            </label>
+            <InputTextarea
+              // @ts-ignore
+              ref={inputRef}
+              autoResize
+              rows={3}
+              cols={30}
+              value={message}
+              onChange={e => setMessage(e.target.value)}
+            />
+          </div>
+
+          <div className="flex gap-2 justify-end">
+            <Button onClick={handleSave} size="small" severity="danger" label="Ping!"></Button>
+          </div>
+        </div>
+      </form>
+    </Dialog>
+  );
+};

assets/js/hooks/Mapper/components/mapInterface/components/SystemPingDialog/index.ts

@@ -0,0 +1 @@
+export * from './SystemPingDialog';

assets/js/hooks/Mapper/components/mapInterface/components/index.ts

@@ -2,3 +2,4 @@ export * from './Widget';
 export * from './SystemSettingsDialog';
 export * from './SystemCustomLabelDialog';
 export * from './SystemLinkSignatureDialog';
+export * from './PingsInterface';

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

@@ -1,13 +1,14 @@
 import { WindowProps } from '@/hooks/Mapper/components/ui-kit/WindowManager/types.ts';
 import {
+  CommentsWidget,
   LocalCharacters,
-  RoutesWidget,
   SystemInfo,
   SystemSignatures,
   SystemStructures,
+  WRoutesPublic,
+  WRoutesUser,
   WSystemKills,
 } from '@/hooks/Mapper/components/mapInterface/widgets';
-import { CommentsWidget } from '@/hooks/Mapper/components/mapInterface/widgets/CommentsWidget';
 
 export const CURRENT_WINDOWS_VERSION = 9;
 export const WINDOWS_LOCAL_STORE_KEY = 'windows:settings:v2';
@@ -20,6 +21,7 @@ export enum WidgetsIds {
   structures = 'structures',
   kills = 'kills',
   comments = 'comments',
+  userRoutes = 'userRoutes',
 }
 
 export const STORED_VISIBLE_WIDGETS_DEFAULT = [
@@ -56,7 +58,14 @@ export const DEFAULT_WIDGETS: WindowProps[] = [
     position: { x: 10, y: 530 },
     size: { width: 510, height: 200 },
     zIndex: 0,
-    content: () => <RoutesWidget />,
+    content: () => <WRoutesPublic />,
+  },
+  {
+    id: WidgetsIds.userRoutes,
+    position: { x: 10, y: 10 },
+    size: { width: 510, height: 200 },
+    zIndex: 0,
+    content: () => <WRoutesUser />,
   },
   {
     id: WidgetsIds.structures,
@@ -103,6 +112,10 @@ export const WIDGETS_CHECKBOXES_PROPS: WidgetsCheckboxesType = [
     id: WidgetsIds.routes,
     label: 'Routes',
   },
+  {
+    id: WidgetsIds.userRoutes,
+    label: 'User Routes',
+  },
   {
     id: WidgetsIds.structures,
     label: 'Structures',

assets/js/hooks/Mapper/components/mapInterface/helpers/sortCharacters.ts

@@ -1,6 +1,10 @@
 import { CharacterTypeRaw, WithIsOwnCharacter } from '@/hooks/Mapper/types';
 
 export const sortCharacters = (a: CharacterTypeRaw & WithIsOwnCharacter, b: CharacterTypeRaw & WithIsOwnCharacter) => {
+  if (a.online === b.online) {
+    return a.name.localeCompare(b.name);
+  }
+
   if (a.online !== b.online) {
     return a.online && !b.online ? -1 : 1;
   }

assets/js/hooks/Mapper/components/mapInterface/widgets/LocalCharacters/components/LocalCharactersItemTemplate/LocalCharactersItemTemplate.tsx

@@ -1,8 +1,8 @@
-import classes from './LocalCharactersItemTemplate.module.scss';
-import clsx from 'clsx';
-import { CharacterCard } from '@/hooks/Mapper/components/ui-kit';
 import { CharItemProps } from '@/hooks/Mapper/components/mapInterface/widgets/LocalCharacters/components';
+import { CharacterCard } from '@/hooks/Mapper/components/ui-kit';
+import clsx from 'clsx';
 import { VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
+import classes from './LocalCharactersItemTemplate.module.scss';
 
 export type LocalCharactersItemTemplateProps = { showShipName: boolean } & CharItemProps &
   VirtualScrollerTemplateOptions;
@@ -22,7 +22,7 @@ export const LocalCharactersItemTemplate = ({ showShipName, ...options }: LocalC
       )}
       style={{ height: `${options.props.itemSize}px` }}
     >
-      <CharacterCard showShipName={showShipName} {...options} />
+      <CharacterCard showShipName={showShipName} showTicker showShip {...options} />
     </div>
   );
 };

assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesProvider.tsx

@@ -1,79 +1,31 @@
-import React, { createContext, useContext, useEffect } from 'react';
-import { ContextStoreDataUpdate, useContextStore } from '@/hooks/Mapper/utils';
-import { SESSION_KEY } from '@/hooks/Mapper/constants.ts';
+import React, { createContext, forwardRef, useContext } from 'react';
+import {
+  RoutesImperativeHandle,
+  RoutesProviderInnerProps,
+  RoutesWidgetProps,
+} from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/types.ts';
 
-export type RoutesType = {
-  path_type: 'shortest' | 'secure' | 'insecure';
-  include_mass_crit: boolean;
-  include_eol: boolean;
-  include_frig: boolean;
-  include_cruise: boolean;
-  include_thera: boolean;
-  avoid_wormholes: boolean;
-  avoid_pochven: boolean;
-  avoid_edencom: boolean;
-  avoid_triglavian: boolean;
-  avoid: number[];
-};
-
-interface MapProviderProps {
+type MapProviderProps = {
   children: React.ReactNode;
-}
+} & RoutesWidgetProps;
 
-export const DEFAULT_SETTINGS: RoutesType = {
-  path_type: 'shortest',
-  include_mass_crit: true,
-  include_eol: true,
-  include_frig: true,
-  include_cruise: true,
-  include_thera: true,
-  avoid_wormholes: false,
-  avoid_pochven: false,
-  avoid_edencom: false,
-  avoid_triglavian: false,
-  avoid: [],
-};
-
-export interface MapContextProps {
-  update: ContextStoreDataUpdate<RoutesType>;
-  data: RoutesType;
-}
-
-const RoutesContext = createContext<MapContextProps>({
+const RoutesContext = createContext<RoutesProviderInnerProps>({
   update: () => {},
-  data: { ...DEFAULT_SETTINGS },
+  // @ts-ignore
+  data: {},
 });
 
-export const RoutesProvider: React.FC<MapProviderProps> = ({ children }) => {
-  const { update, ref } = useContextStore<RoutesType>(
-    { ...DEFAULT_SETTINGS },
-    {
-      onAfterAUpdate: values => {
-        localStorage.setItem(SESSION_KEY.routes, JSON.stringify(values));
-      },
-    },
-  );
+// INFO: this component have imperative handler but now it not using.
+export const RoutesProvider = forwardRef<RoutesImperativeHandle, MapProviderProps>(
+  ({ children, ...props } /*, ref*/) => {
+    // useImperativeHandle(ref, () => ({}));
 
-  useEffect(() => {
-    const items = localStorage.getItem(SESSION_KEY.routes);
-    if (items) {
-      update(JSON.parse(items));
-    }
-  }, [update]);
-
-  return (
-    <RoutesContext.Provider
-      value={{
-        update,
-        data: ref,
-      }}
-    >
-      {children}
-    </RoutesContext.Provider>
-  );
-};
+    return <RoutesContext.Provider value={{ ...props /*, loading, setLoading*/ }}>{children}</RoutesContext.Provider>;
+  },
+);
+RoutesProvider.displayName = 'RoutesProvider';
 
 export const useRouteProvider = () => {
-  const context = useContext<MapContextProps>(RoutesContext);
+  const context = useContext<RoutesProviderInnerProps>(RoutesContext);
   return context;
 };

assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesWidget.tsx

@@ -2,16 +2,16 @@ import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import {
   LayoutEventBlocker,
-  SystemViewStandalone,
+  LoadingWrapper,
+  SystemView,
   TooltipPosition,
   WdCheckbox,
   WdImgButton,
 } from '@/hooks/Mapper/components/ui-kit';
 import { useLoadSystemStatic } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic.ts';
-import { MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { getSystemById } from '@/hooks/Mapper/helpers/getSystemById.ts';
+
+import { forwardRef, MouseEvent, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import classes from './RoutesWidget.module.scss';
-import { useLoadRoutes } from './hooks';
 import { RoutesList } from './RoutesList';
 import clsx from 'clsx';
 import { Route } from '@/hooks/Mapper/types/routes.ts';
@@ -25,7 +25,10 @@ import {
   AddSystemDialog,
   SearchOnSubmitCallback,
 } from '@/hooks/Mapper/components/mapInterface/components/AddSystemDialog';
-import { OutCommand } from '@/hooks/Mapper/types';
+import {
+  RoutesImperativeHandle,
+  RoutesWidgetProps,
+} from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/types.ts';
 
 const sortByDist = (a: Route, b: Route) => {
   const distA = a.has_connection ? a.systems?.length || 0 : Infinity;
@@ -36,45 +39,31 @@ const sortByDist = (a: Route, b: Route) => {
 
 export const RoutesWidgetContent = () => {
   const {
-    data: { selectedSystems, hubs = [], systems, routes },
-    outCommand,
+    data: { selectedSystems, systems, isSubscriptionActive },
   } = useMapRootState();
+  const { hubs = [], routesList, isRestricted, loading } = useRouteProvider();
 
   const [systemId] = selectedSystems;
 
-  const { loading } = useLoadRoutes();
-
-  const { systems: systemStatics, loadSystems, lastUpdateKey } = useLoadSystemStatic({ systems: hubs ?? [] });
-  const { open, ...systemCtxProps } = useContextMenuSystemInfoHandlers({
-    outCommand,
-    hubs,
-  });
-
-  const preparedHubs = useMemo(() => {
-    return hubs.map(x => {
-      const sys = getSystemById(systems, x.toString());
-
-      return { ...systemStatics.get(parseInt(x))!, ...(sys && { customName: sys.name ?? '' }) };
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hubs, systems, systemStatics, lastUpdateKey]);
+  const { systems: systemStatics, loadSystems } = useLoadSystemStatic({ systems: hubs ?? [] });
+  const { open, ...systemCtxProps } = useContextMenuSystemInfoHandlers();
 
   const preparedRoutes: Route[] = useMemo(() => {
     return (
-      routes?.routes
+      routesList?.routes
         .sort(sortByDist)
-        .filter(x => x.destination.toString() !== systemId)
+        // .filter(x => x.destination.toString() !== systemId)
         .map(route => ({
           ...route,
           mapped_systems:
             route.systems?.map(solar_system_id =>
-              routes?.systems_static_data.find(
+              routesList?.systems_static_data.find(
                 system_static_data => system_static_data.solar_system_id === solar_system_id,
               ),
             ) ?? [],
         })) ?? []
     );
-  }, [routes?.routes, routes?.systems_static_data, systemId]);
+  }, [routesList?.routes, routesList?.systems_static_data, systemId]);
 
   const refData = useRef({ open, loadSystems, preparedRoutes });
   refData.current = { open, loadSystems, preparedRoutes };
@@ -97,9 +86,13 @@ export const RoutesWidgetContent = () => {
     [handleClick],
   );
 
-  if (loading) {
+  if (isRestricted && !isSubscriptionActive) {
     return (
-      <div className="w-full h-full flex justify-center items-center select-none text-center">Loading routes...</div>
+      <div className="w-full h-full flex items-center justify-center">
+        <span className="select-none text-center text-stone-400/80 text-sm">
+          User Routes available with &#39;Active&#39; map subscription only (contact map administrators)
+        </span>
+      </div>
     );
   }
 
@@ -117,12 +110,10 @@ export const RoutesWidgetContent = () => {
 
   return (
     <>
-      {systemId !== undefined && routes && (
+      <LoadingWrapper loading={loading}>
         <div className={clsx(classes.RoutesGrid, 'px-2 py-2')}>
           {preparedRoutes.map(route => {
-            const sys = preparedHubs.find(x => x.solar_system_id === route.destination)!;
-
-            // TODO do not delte this console log
+            // TODO do not delete this console log
             // eslint-disable-next-line no-console
             // console.log('JOipP', `Check sys [${route.destination}]:`, sys);
 
@@ -132,15 +123,19 @@ export const RoutesWidgetContent = () => {
                   <WdImgButton
                     className={clsx(PrimeIcons.BARS, classes.RemoveBtn)}
                     onClick={e => handleClick(e, route.destination.toString())}
-                    tooltip={{ content: 'Click here to open system menu', position: TooltipPosition.top, offset: 10 }}
+                    tooltip={{
+                      content: 'Click here to open system menu',
+                      position: TooltipPosition.top,
+                      offset: 10,
+                    }}
                   />
 
-                  <SystemViewStandalone
-                    key={route.destination}
+                  <SystemView
+                    systemId={route.destination.toString()}
                     className={clsx('select-none text-center cursor-context-menu')}
                     hideRegion
                     compact
-                    {...sys}
+                    showCustomName
                   />
                 </div>
                 <div className="text-right pl-1">{route.has_connection ? route.systems?.length ?? 2 : ''}</div>
@@ -151,7 +146,7 @@ export const RoutesWidgetContent = () => {
             );
           })}
         </div>
-      )}
+      </LoadingWrapper>
 
       <ContextMenuSystemInfo
         hubs={hubs}
@@ -165,15 +160,13 @@ export const RoutesWidgetContent = () => {
   );
 };
 
-export const RoutesWidgetComp = () => {
-  const [routeSettingsVisible, setRouteSettingsVisible] = useState(false);
-  const { data, update } = useRouteProvider();
-  const {
-    data: { hubs = [] },
-    outCommand,
-  } = useMapRootState();
+type RoutesWidgetCompProps = {
+  title: ReactNode | string;
+};
 
-  const preparedHubs = useMemo(() => hubs.map(x => parseInt(x)), [hubs]);
+export const RoutesWidgetComp = ({ title }: RoutesWidgetCompProps) => {
+  const [routeSettingsVisible, setRouteSettingsVisible] = useState(false);
+  const { data, update, addHubCommand } = useRouteProvider();
 
   const isSecure = data.path_type === 'secure';
   const handleSecureChange = useCallback(() => {
@@ -190,24 +183,15 @@ export const RoutesWidgetComp = () => {
   const onAddSystem = useCallback(() => setOpenAddSystem(true), []);
 
   const handleSubmitAddSystem: SearchOnSubmitCallback = useCallback(
-    async item => {
-      if (preparedHubs.includes(item.value)) {
-        return;
-      }
-
-      await outCommand({
-        type: OutCommand.addHub,
-        data: { system_id: item.value },
-      });
-    },
-    [hubs, outCommand],
+    async item => addHubCommand(item.value.toString()),
+    [addHubCommand],
   );
 
   return (
     <Widget
       label={
         <div className="flex justify-between items-center text-xs w-full" ref={ref}>
-          <span className="select-none">Routes</span>
+          <span className="select-none">{title}</span>
           <LayoutEventBlocker className="flex items-center gap-2">
             <WdImgButton
               className={PrimeIcons.PLUS_CIRCLE}
@@ -231,6 +215,7 @@ export const RoutesWidgetComp = () => {
               className={PrimeIcons.SLIDERS_H}
               onClick={() => setRouteSettingsVisible(true)}
               tooltip={{
+                position: TooltipPosition.top,
                 content: 'Click here to open Routes settings',
               }}
             />
@@ -251,10 +236,13 @@ export const RoutesWidgetComp = () => {
   );
 };
 
-export const RoutesWidget = () => {
-  return (
-    <RoutesProvider>
-      <RoutesWidgetComp />
-    </RoutesProvider>
-  );
-};
+export const RoutesWidget = forwardRef<RoutesImperativeHandle, RoutesWidgetProps & RoutesWidgetCompProps>(
+  ({ title, ...props }, ref) => {
+    return (
+      <RoutesProvider {...props} ref={ref}>
+        <RoutesWidgetComp title={title} />
+      </RoutesProvider>
+    );
+  },
+);
+RoutesWidget.displayName = 'RoutesWidget';

assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/hooks/useLoadRoutes.ts

@@ -1,10 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { OutCommand } from '@/hooks/Mapper/types';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import {
-  RoutesType,
-  useRouteProvider,
-} from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesProvider.tsx';
+import { RoutesType } from '@/hooks/Mapper/mapRootProvider/types.ts';
+import { LoadRoutesCommand } from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/types.ts';
+import { RoutesList } from '@/hooks/Mapper/types/routes.ts';
 
 function usePrevious<T>(value: T): T | undefined {
   const ref = useRef<T>();
@@ -16,13 +14,25 @@ function usePrevious<T>(value: T): T | undefined {
   return ref.current;
 }
 
-export const useLoadRoutes = () => {
+type UseLoadRoutesProps = {
+  loadRoutesCommand: LoadRoutesCommand;
+  hubs: string[];
+  routesList: RoutesList | undefined;
+  data: RoutesType;
+  deps?: unknown[];
+};
+
+export const useLoadRoutes = ({
+  data: routesSettings,
+  loadRoutesCommand,
+  hubs,
+  routesList,
+  deps = [],
+}: UseLoadRoutesProps) => {
   const [loading, setLoading] = useState(false);
-  const { data: routesSettings } = useRouteProvider();
 
   const {
-    outCommand,
-    data: { selectedSystems, hubs, systems, connections },
+    data: { selectedSystems, systems, connections },
   } = useMapRootState();
 
   const prevSys = usePrevious(systems);
@@ -31,17 +41,16 @@ export const useLoadRoutes = () => {
 
   const loadRoutes = useCallback(
     (systemId: string, routesSettings: RoutesType) => {
-      outCommand({
-        type: OutCommand.getRoutes,
-        data: {
-          system_id: systemId,
-          routes_settings: routesSettings,
-        },
-      });
+      loadRoutesCommand(systemId, routesSettings);
+      setLoading(true);
     },
-    [outCommand],
+    [loadRoutesCommand],
   );
 
+  useEffect(() => {
+    setLoading(false);
+  }, [routesList]);
+
   useEffect(() => {
     if (selectedSystems.length !== 1) {
       return;
@@ -61,7 +70,8 @@ export const useLoadRoutes = () => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
       .map(x => routesSettings[x]),
+    ...deps,
   ]);
 
-  return { loading, loadRoutes };
+  return { loading, loadRoutes, setLoading };
 };

assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/types.ts

@@ -0,0 +1,24 @@
+import { RoutesType } from '@/hooks/Mapper/mapRootProvider/types.ts';
+import { RoutesList } from '@/hooks/Mapper/types/routes.ts';
+
+export type LoadRoutesCommand = (systemId: string, routesSettings: RoutesType) => Promise<void>;
+export type AddHubCommand = (systemId: string) => Promise<void>;
+export type ToggleHubCommand = (systemId: string) => Promise<void>;
+
+export type RoutesWidgetProps = {
+  data: RoutesType;
+  update: (d: RoutesType) => void;
+  hubs: string[];
+  routesList: RoutesList | undefined;
+  loading: boolean;
+
+  addHubCommand: AddHubCommand;
+  toggleHubCommand: ToggleHubCommand;
+  isRestricted?: boolean;
+};
+
+export type RoutesProviderInnerProps = RoutesWidgetProps;
+
+export type RoutesImperativeHandle = {
+  stopLoading: () => void;
+};

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

@@ -1,9 +1,9 @@
 import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { LayoutEventBlocker, SystemView, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
+import { LayoutEventBlocker, SystemView, TooltipPosition, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
 import { SystemInfoContent } from './SystemInfoContent';
 import { PrimeIcons } from 'primereact/api';
-import { useState, useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { SystemSettingsDialog } from '@/hooks/Mapper/components/mapInterface/components/SystemSettingsDialog/SystemSettingsDialog.tsx';
 import { ANOIK_ICON, DOTLAN_ICON, ZKB_ICON } from '@/hooks/Mapper/icons';
 import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
@@ -42,7 +42,7 @@ export const SystemInfo = () => {
                 <WdImgButton
                   className="pi pi-pen-to-square"
                   onClick={() => setVisible(true)}
-                  tooltip={{ content: 'Edit system name and description' }}
+                  tooltip={{ position: TooltipPosition.top, content: 'Edit system name and description' }}
                 />
               </LayoutEventBlocker>
             </div>

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SignatureView/SignatureView.tsx

@@ -10,7 +10,7 @@ export interface SignatureViewProps {
 export const SignatureView = ({ signature, showCharacterPortrait = false }: SignatureViewProps) => {
   const isWormhole = signature?.group === SignatureGroup.Wormhole;
   const hasCharacterInfo = showCharacterPortrait && signature.character_eve_id;
-  const groupDisplay = isWormhole ? SignatureGroup.Wormhole : (signature?.group ?? SignatureGroup.CosmicSignature);
+  const groupDisplay = isWormhole ? SignatureGroup.Wormhole : signature?.group ?? SignatureGroup.CosmicSignature;
   const characterName = signature.character_name || 'Unknown character';
 
   return (

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureHeader/SystemSignatureHeader.tsx

@@ -19,7 +19,7 @@ export type HeaderProps = {
   lazyDeleteValue: boolean;
   onLazyDeleteChange: (checked: boolean) => void;
   pendingCount: number;
-  pendingTimeRemaining?: number; // Time remaining in ms
+  undoCountdown?: number;
   onUndoClick: () => void;
   onSettingsClick: () => void;
 };
@@ -29,7 +29,7 @@ export const SystemSignaturesHeader = ({
   lazyDeleteValue,
   onLazyDeleteChange,
   pendingCount,
-  pendingTimeRemaining,
+  undoCountdown,
   onUndoClick,
   onSettingsClick,
 }: HeaderProps) => {
@@ -43,13 +43,6 @@ export const SystemSignaturesHeader = ({
   const containerRef = useRef<HTMLDivElement>(null);
   const isCompact = useMaxWidth(containerRef, COMPACT_MAX_WIDTH);
 
-  // Format time remaining as seconds
-  const formatTimeRemaining = () => {
-    if (!pendingTimeRemaining) return '';
-    const seconds = Math.ceil(pendingTimeRemaining / 1000);
-    return ` (${seconds}s remaining)`;
-  };
-
   return (
     <div ref={containerRef} className="w-full">
       <div className="flex justify-between items-center text-xs w-full h-full">
@@ -78,7 +71,9 @@ export const SystemSignaturesHeader = ({
             <WdImgButton
               className={PrimeIcons.UNDO}
               style={{ color: 'red' }}
-              tooltip={{ content: `Undo pending changes (${pendingCount})${formatTimeRemaining()}` }}
+              tooltip={{
+                content: `Undo pending deletions (${pendingCount})${undoCountdown && undoCountdown > 0 ? ` — ${undoCountdown}s left` : ''}`,
+              }}
               onClick={onUndoClick}
             />
           )}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatures.tsx

@@ -1,99 +1,179 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useState, useEffect, useRef, useMemo } from 'react';
 import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
 import { SystemSignaturesContent } from './SystemSignaturesContent';
 import { SystemSignatureSettingsDialog } from './SystemSignatureSettingsDialog';
-import { ExtendedSystemSignature, SystemSignature } from '@/hooks/Mapper/types';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { useHotkey } from '@/hooks/Mapper/hooks';
 import { SystemSignaturesHeader } from './SystemSignatureHeader';
 import useLocalStorageState from 'use-local-storage-state';
+import { useHotkey } from '@/hooks/Mapper/hooks/useHotkey';
 import {
   SETTINGS_KEYS,
   SETTINGS_VALUES,
-  SIGNATURE_DELETION_TIMEOUTS,
   SIGNATURE_SETTING_STORE_KEY,
   SIGNATURE_WINDOW_ID,
-  SIGNATURES_DELETION_TIMING,
   SignatureSettingsType,
+  getDeletionTimeoutMs,
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
-import { calculateTimeRemaining } from './helpers';
+import { OutCommand, OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers';
+import { ExtendedSystemSignature } from '@/hooks/Mapper/types';
 
-export const SystemSignatures = () => {
-  const [visible, setVisible] = useState(false);
-  const [sigCount, setSigCount] = useState<number>(0);
-  const [pendingSigs, setPendingSigs] = useState<SystemSignature[]>([]);
-  const [pendingTimeRemaining, setPendingTimeRemaining] = useState<number | undefined>();
-  const undoPendingFnRef = useRef<() => void>(() => {});
+/**
+ * Custom hook for managing pending signature deletions and undo countdown.
+ */
+function useSignatureUndo(
+  systemId: string | undefined,
+  settings: SignatureSettingsType,
+  outCommand: OutCommandHandler,
+) {
+  const [countdown, setCountdown] = useState<number>(0);
+  const [pendingIds, setPendingIds] = useState<Set<string>>(new Set());
+  const [deletedSignatures, setDeletedSignatures] = useState<ExtendedSystemSignature[]>([]);
+  const intervalRef = useRef<number | null>(null);
 
-  const {
-    data: { selectedSystems },
-  } = useMapRootState();
-
-  const [currentSettings, setCurrentSettings] = useLocalStorageState(SIGNATURE_SETTING_STORE_KEY, {
-    defaultValue: SETTINGS_VALUES,
-  });
-
-  const handleSigCountChange = useCallback((count: number) => {
-    setSigCount(count);
+  const addDeleted = useCallback((signatures: ExtendedSystemSignature[]) => {
+    const newIds = signatures.map(sig => sig.eve_id);
+    setPendingIds(prev => {
+      const next = new Set(prev);
+      newIds.forEach(id => next.add(id));
+      return next;
+    });
+    setDeletedSignatures(prev => [...prev, ...signatures]);
   }, []);
 
-  const [systemId] = selectedSystems;
-  const isNotSelectedSystem = selectedSystems.length !== 1;
-
-  const handleSettingsChange = useCallback((newSettings: SignatureSettingsType) => {
-    setCurrentSettings(newSettings);
-    setVisible(false);
-  }, []);
-
-  const handleLazyDeleteChange = useCallback((value: boolean) => {
-    setCurrentSettings(prev => ({ ...prev, [SETTINGS_KEYS.LAZY_DELETE_SIGNATURES]: value }));
-  }, []);
-
-  useHotkey(true, ['z'], event => {
-    if (pendingSigs.length > 0) {
-      event.preventDefault();
-      event.stopPropagation();
-      undoPendingFnRef.current();
-      setPendingSigs([]);
-      setPendingTimeRemaining(undefined);
-    }
-  });
-
-  const handleUndoClick = useCallback(() => {
-    undoPendingFnRef.current();
-    setPendingSigs([]);
-    setPendingTimeRemaining(undefined);
-  }, []);
-
-  const handleSettingsButtonClick = useCallback(() => {
-    setVisible(true);
-  }, []);
-
-  const handlePendingChange = useCallback(
-    (pending: React.MutableRefObject<Record<string, ExtendedSystemSignature>>, newUndo: () => void) => {
-      setPendingSigs(() => {
-        return Object.values(pending.current).filter(sig => sig.pendingDeletion);
-      });
-      undoPendingFnRef.current = newUndo;
-    },
-    [],
-  );
-
-  // Calculate the minimum time remaining for any pending signature
+  // Clear deleted signatures when system changes
   useEffect(() => {
-    if (pendingSigs.length === 0) {
-      setPendingTimeRemaining(undefined);
+    if (systemId) {
+      setDeletedSignatures([]);
+      setPendingIds(new Set());
+      setCountdown(0);
+      if (intervalRef.current != null) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    }
+  }, [systemId]);
+
+  // kick off or clear countdown whenever pendingIds changes
+  useEffect(() => {
+    // clear any existing timer
+    if (intervalRef.current != null) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+
+    if (pendingIds.size === 0) {
+      setCountdown(0);
+      setDeletedSignatures([]);
       return;
     }
 
-    const calculate = () => {
-      setPendingTimeRemaining(() => calculateTimeRemaining(pendingSigs));
-    };
+    // determine timeout from settings
+    const timeoutMs = getDeletionTimeoutMs(settings);
 
-    calculate();
-    const interval = setInterval(calculate, 1000);
-    return () => clearInterval(interval);
-  }, [pendingSigs]);
+    setCountdown(Math.ceil(timeoutMs / 1000));
+
+    // start new interval
+    intervalRef.current = window.setInterval(() => {
+      setCountdown(prev => {
+        if (prev <= 1) {
+          clearInterval(intervalRef.current!);
+          intervalRef.current = null;
+          setPendingIds(new Set());
+          setDeletedSignatures([]);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    return () => {
+      if (intervalRef.current != null) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [pendingIds, settings]);
+
+  // undo handler
+  const handleUndo = useCallback(async () => {
+    if (!systemId || pendingIds.size === 0) return;
+    await outCommand({
+      type: OutCommand.undoDeleteSignatures,
+      data: { system_id: systemId, eve_ids: Array.from(pendingIds) },
+    });
+    setPendingIds(new Set());
+    setDeletedSignatures([]);
+    setCountdown(0);
+    if (intervalRef.current != null) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, [systemId, pendingIds, outCommand]);
+
+  return {
+    pendingIds,
+    countdown,
+    deletedSignatures,
+    addDeleted,
+    handleUndo,
+  };
+}
+
+export const SystemSignatures = () => {
+  const [visible, setVisible] = useState(false);
+  const [sigCount, setSigCount] = useState(0);
+
+  const {
+    data: { selectedSystems },
+    outCommand,
+  } = useMapRootState();
+
+  const [currentSettings, setCurrentSettings] = useLocalStorageState<SignatureSettingsType>(
+    SIGNATURE_SETTING_STORE_KEY,
+    {
+      defaultValue: SETTINGS_VALUES,
+    },
+  );
+
+  const [systemId] = selectedSystems;
+  const isSystemSelected = useMemo(() => selectedSystems.length === 1, [selectedSystems.length]);
+  const { pendingIds, countdown, deletedSignatures, addDeleted, handleUndo } = useSignatureUndo(
+    systemId,
+    currentSettings,
+    outCommand,
+  );
+
+  useHotkey(true, ['z', 'Z'], (event: KeyboardEvent) => {
+    if (pendingIds.size > 0 && countdown > 0) {
+      event.preventDefault();
+      event.stopPropagation();
+      handleUndo();
+    }
+  });
+
+  const handleCountChange = useCallback((count: number) => {
+    setSigCount(count);
+  }, []);
+
+  const handleSettingsSave = useCallback(
+    (newSettings: SignatureSettingsType) => {
+      setCurrentSettings(newSettings);
+      setVisible(false);
+    },
+    [setCurrentSettings],
+  );
+
+  const handleLazyDeleteToggle = useCallback(
+    (value: boolean) => {
+      setCurrentSettings(prev => ({
+        ...prev,
+        [SETTINGS_KEYS.LAZY_DELETE_SIGNATURES]: value,
+      }));
+    },
+    [setCurrentSettings],
+  );
+
+  const openSettings = useCallback(() => setVisible(true), []);
 
   return (
     <Widget
@@ -101,16 +181,16 @@ export const SystemSignatures = () => {
         <SystemSignaturesHeader
           sigCount={sigCount}
           lazyDeleteValue={currentSettings[SETTINGS_KEYS.LAZY_DELETE_SIGNATURES] as boolean}
-          pendingCount={pendingSigs.length}
-          pendingTimeRemaining={pendingTimeRemaining}
-          onLazyDeleteChange={handleLazyDeleteChange}
-          onUndoClick={handleUndoClick}
-          onSettingsClick={handleSettingsButtonClick}
+          pendingCount={pendingIds.size}
+          undoCountdown={countdown}
+          onLazyDeleteChange={handleLazyDeleteToggle}
+          onUndoClick={handleUndo}
+          onSettingsClick={openSettings}
         />
       }
       windowId={SIGNATURE_WINDOW_ID}
     >
-      {isNotSelectedSystem ? (
+      {!isSystemSelected ? (
         <div className="w-full h-full flex justify-center items-center select-none text-center text-stone-400/80 text-sm">
           System is not selected
         </div>
@@ -118,22 +198,18 @@ export const SystemSignatures = () => {
         <SystemSignaturesContent
           systemId={systemId}
           settings={currentSettings}
-          deletionTiming={
-            SIGNATURE_DELETION_TIMEOUTS[
-              (currentSettings[SETTINGS_KEYS.DELETION_TIMING] as keyof typeof SIGNATURE_DELETION_TIMEOUTS) ||
-                SIGNATURES_DELETION_TIMING.DEFAULT
-            ] as number
-          }
-          onLazyDeleteChange={handleLazyDeleteChange}
-          onCountChange={handleSigCountChange}
-          onPendingChange={handlePendingChange}
+          deletedSignatures={deletedSignatures}
+          onLazyDeleteChange={handleLazyDeleteToggle}
+          onCountChange={handleCountChange}
+          onSignatureDeleted={addDeleted}
         />
       )}
+
       {visible && (
         <SystemSignatureSettingsDialog
           settings={currentSettings}
           onCancel={() => setVisible(false)}
-          onSave={handleSettingsChange}
+          onSave={handleSettingsSave}
         />
       )}
     </Widget>

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent/SystemSignaturesContent.tsx

@@ -57,12 +57,9 @@ interface SystemSignaturesContentProps {
   onSelect?: (signature: SystemSignature) => void;
   onLazyDeleteChange?: (value: boolean) => void;
   onCountChange?: (count: number) => void;
-  onPendingChange?: (
-    pending: React.MutableRefObject<Record<string, ExtendedSystemSignature>>,
-    undo: () => void,
-  ) => void;
-  deletionTiming?: number;
   filterSignature?: (signature: SystemSignature) => boolean;
+  onSignatureDeleted?: (deletedSignatures: ExtendedSystemSignature[]) => void;
+  deletedSignatures?: ExtendedSystemSignature[];
 }
 
 export const SystemSignaturesContent = ({
@@ -73,9 +70,9 @@ export const SystemSignaturesContent = ({
   onSelect,
   onLazyDeleteChange,
   onCountChange,
-  onPendingChange,
-  deletionTiming,
   filterSignature,
+  onSignatureDeleted,
+  deletedSignatures = [],
 }: SystemSignaturesContentProps) => {
   const [selectedSignatureForDialog, setSelectedSignatureForDialog] = useState<SystemSignature | null>(null);
   const [showSignatureSettings, setShowSignatureSettings] = useState(false);
@@ -95,15 +92,21 @@ export const SystemSignaturesContent = ({
     { defaultValue: SORT_DEFAULT_VALUES },
   );
 
-  const { signatures, selectedSignatures, setSelectedSignatures, handleDeleteSelected, handleSelectAll, handlePaste } =
-    useSystemSignaturesData({
-      systemId,
-      settings,
-      onCountChange,
-      onPendingChange,
-      onLazyDeleteChange,
-      deletionTiming,
-    });
+  const {
+    signatures,
+    selectedSignatures,
+    setSelectedSignatures,
+    handleDeleteSelected,
+    handleSelectAll,
+    handlePaste,
+    hasUnsupportedLanguage,
+  } = useSystemSignaturesData({
+    systemId,
+    settings,
+    onCountChange,
+    onLazyDeleteChange,
+    onSignatureDeleted,
+  });
 
   useEffect(() => {
     if (selectable) return;
@@ -125,6 +128,8 @@ export const SystemSignaturesContent = ({
 
     event.preventDefault();
     event.stopPropagation();
+
+    // Delete key should always immediately delete, never show pending deletions
     handleDeleteSelected();
   });
 
@@ -153,9 +158,16 @@ export const SystemSignaturesContent = ({
 
   const handleSelectSignatures = useCallback(
     (e: { value: SystemSignature[] }) => {
-      selectable ? onSelect?.(e.value[0]) : setSelectedSignatures(e.value as ExtendedSystemSignature[]);
+      // Filter out deleted signatures from selection
+      const selectableSignatures = e.value.filter(
+        sig => !deletedSignatures.some(deleted => deleted.eve_id === sig.eve_id),
+      );
+
+      selectable
+        ? onSelect?.(selectableSignatures[0])
+        : setSelectedSignatures(selectableSignatures as ExtendedSystemSignature[]);
     },
-    [selectable],
+    [onSelect, selectable, setSelectedSignatures, deletedSignatures],
   );
 
   const { showDescriptionColumn, showUpdatedColumn, showCharacterColumn, showCharacterPortrait } = useMemo(
@@ -169,7 +181,11 @@ export const SystemSignaturesContent = ({
   );
 
   const filteredSignatures = useMemo<ExtendedSystemSignature[]>(() => {
-    return signatures.filter(sig => {
+    // Get the set of deleted signature IDs for quick lookup
+    const deletedIds = new Set(deletedSignatures.map(sig => sig.eve_id));
+
+    // Common filter function
+    const shouldShowSignature = (sig: ExtendedSystemSignature): boolean => {
       if (filterSignature && !filterSignature(sig)) {
         return false;
       }
@@ -188,15 +204,37 @@ export const SystemSignaturesContent = ({
             x => GROUPS_LIST.includes(x as SignatureGroup) && settings[x as SETTINGS_KEYS],
           );
 
-          return enabledGroups.includes(getGroupIdByRawGroup(sig.group));
+          const mappedGroup = getGroupIdByRawGroup(sig.group);
+          if (!mappedGroup) {
+            return true; // If we can't determine the group, still show it
+          }
+          return enabledGroups.includes(mappedGroup);
         }
 
         return true;
       }
 
-      return settings[sig.kind];
+      return settings[sig.kind] as boolean;
+    };
+
+    // Filter active signatures, excluding any that are in the deleted list
+    const activeSignatures = signatures.filter(sig => {
+      // Skip if this signature is in the deleted list
+      if (deletedIds.has(sig.eve_id)) {
+        return false;
+      }
+
+      return shouldShowSignature(sig);
     });
-  }, [signatures, hideLinkedSignatures, settings, filterSignature]);
+
+    // Add deleted signatures with pending deletion flag, applying the same filters
+    const deletedWithPendingFlag = deletedSignatures.filter(shouldShowSignature).map(sig => ({
+      ...sig,
+      pendingDeletion: true,
+    }));
+
+    return [...activeSignatures, ...deletedWithPendingFlag];
+  }, [signatures, hideLinkedSignatures, settings, filterSignature, deletedSignatures]);
 
   const onRowMouseEnter = useCallback((e: DataTableRowMouseEvent) => {
     setHoveredSignature(e.data as SystemSignature);
@@ -236,113 +274,122 @@ export const SystemSignaturesContent = ({
           No signatures
         </div>
       ) : (
-        <DataTable
-          value={filteredSignatures}
-          size="small"
-          selectionMode="multiple"
-          selection={selectedSignatures}
-          metaKeySelection
-          onSelectionChange={handleSelectSignatures}
-          dataKey="eve_id"
-          className="w-full select-none"
-          resizableColumns={false}
-          rowHover
-          selectAll
-          onRowDoubleClick={handleRowClick}
-          sortField={sortSettings.sortField}
-          sortOrder={sortSettings.sortOrder}
-          onSort={handleSortSettings}
-          onRowMouseEnter={onRowMouseEnter}
-          onRowMouseLeave={onRowMouseLeave}
-          // @ts-ignore
-          rowClassName={getRowClassName}
-        >
-          <Column
-            field="icon"
-            header=""
-            body={renderColIcon}
-            bodyClassName="p-0 px-1"
-            style={{ maxWidth: 26, minWidth: 26, width: 26 }}
-          />
-          <Column
-            field="eve_id"
-            header="Id"
-            bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-            style={{ maxWidth: 72, minWidth: 72, width: 72 }}
-            sortable
-          />
-          <Column
-            field="group"
-            header="Group"
-            bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-            style={{ maxWidth: 110, minWidth: 110, width: 110 }}
-            body={sig => sig.group ?? ''}
-            hidden={isCompact}
-            sortable
-          />
-          <Column
-            field="info"
-            header="Info"
-            bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-            style={{ maxWidth: nameColumnWidth }}
-            hidden={isCompact || isMedium}
-            body={renderInfoColumn}
-          />
-          {showDescriptionColumn && (
-            <Column
-              field="description"
-              header="Description"
-              bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-              hidden={isCompact}
-              body={renderDescription}
-              sortable
-            />
+        <>
+          {hasUnsupportedLanguage && (
+            <div className="w-full flex justify-center items-center text-amber-500 text-xs p-1 bg-amber-950/20 border-b border-amber-800/30">
+              <i className={PrimeIcons.EXCLAMATION_TRIANGLE + ' mr-1'} />
+              Non-English signatures detected. Some signatures may not display correctly. Double-click to edit signature
+              details.
+            </div>
           )}
-          <Column
-            field="inserted_at"
-            header="Added"
-            dataType="date"
-            body={renderAddedTimeLeft}
-            style={{ minWidth: 70, maxWidth: 80 }}
-            bodyClassName="ssc-header text-ellipsis overflow-hidden whitespace-nowrap"
-            sortable
-          />
-          {showUpdatedColumn && (
-            <Column
-              field="updated_at"
-              header="Updated"
-              dataType="date"
-              body={renderUpdatedTimeLeft}
-              style={{ minWidth: 70, maxWidth: 80 }}
-              bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-              sortable
-            />
-          )}
-
-          {showCharacterColumn && (
-            <Column
-              field="character_name"
-              header="Character"
-              bodyClassName="w-[70px] text-ellipsis overflow-hidden whitespace-nowrap"
-              sortable
-            ></Column>
-          )}
-
-          {!selectable && (
+          <DataTable
+            value={filteredSignatures}
+            size="small"
+            selectionMode="multiple"
+            selection={selectedSignatures}
+            metaKeySelection
+            onSelectionChange={handleSelectSignatures}
+            dataKey="eve_id"
+            className="w-full select-none"
+            resizableColumns={false}
+            rowHover
+            selectAll
+            onRowDoubleClick={handleRowClick}
+            sortField={sortSettings.sortField}
+            sortOrder={sortSettings.sortOrder}
+            onSort={handleSortSettings}
+            onRowMouseEnter={onRowMouseEnter}
+            onRowMouseLeave={onRowMouseLeave}
+            // @ts-ignore
+            rowClassName={getRowClassName}
+          >
             <Column
+              field="icon"
               header=""
-              body={() => (
-                <div className="flex justify-end items-center gap-2 mr-[4px]">
-                  <WdTooltipWrapper content="Double-click a row to edit signature">
-                    <span className={PrimeIcons.PENCIL + ' text-[10px]'} />
-                  </WdTooltipWrapper>
-                </div>
-              )}
+              body={renderColIcon}
+              bodyClassName="p-0 px-1"
               style={{ maxWidth: 26, minWidth: 26, width: 26 }}
-              bodyClassName="p-0 pl-1 pr-2"
             />
-          )}
-        </DataTable>
+            <Column
+              field="eve_id"
+              header="Id"
+              bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+              style={{ maxWidth: 72, minWidth: 72, width: 72 }}
+              sortable
+            />
+            <Column
+              field="group"
+              header="Group"
+              bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+              style={{ maxWidth: 110, minWidth: 110, width: 110 }}
+              body={sig => sig.group ?? ''}
+              hidden={isCompact}
+              sortable
+            />
+            <Column
+              field="info"
+              header="Info"
+              bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+              style={{ maxWidth: nameColumnWidth }}
+              hidden={isCompact || isMedium}
+              body={renderInfoColumn}
+            />
+            {showDescriptionColumn && (
+              <Column
+                field="description"
+                header="Description"
+                bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+                hidden={isCompact}
+                body={renderDescription}
+                sortable
+              />
+            )}
+            <Column
+              field="inserted_at"
+              header="Added"
+              dataType="date"
+              body={renderAddedTimeLeft}
+              style={{ minWidth: 70, maxWidth: 80 }}
+              bodyClassName="ssc-header text-ellipsis overflow-hidden whitespace-nowrap"
+              sortable
+            />
+            {showUpdatedColumn && (
+              <Column
+                field="updated_at"
+                header="Updated"
+                dataType="date"
+                body={renderUpdatedTimeLeft}
+                style={{ minWidth: 70, maxWidth: 80 }}
+                bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+                sortable
+              />
+            )}
+
+            {showCharacterColumn && (
+              <Column
+                field="character_name"
+                header="Character"
+                bodyClassName="w-[70px] text-ellipsis overflow-hidden whitespace-nowrap"
+                sortable
+              ></Column>
+            )}
+
+            {!selectable && (
+              <Column
+                header=""
+                body={() => (
+                  <div className="flex justify-end items-center gap-2 mr-[4px]">
+                    <WdTooltipWrapper content="Double-click a row to edit signature">
+                      <span className={PrimeIcons.PENCIL + ' text-[10px]'} />
+                    </WdTooltipWrapper>
+                  </div>
+                )}
+                style={{ maxWidth: 26, minWidth: 26, width: 26 }}
+                bodyClassName="p-0 pl-1 pr-2"
+              />
+            )}
+          </DataTable>
+        </>
       )}
 
       <WdTooltip

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts

@@ -1,10 +1,14 @@
 import {
   GroupType,
   SignatureGroup,
+  SignatureGroupDE,
   SignatureGroupENG,
+  SignatureGroupFR,
   SignatureGroupRU,
   SignatureKind,
+  SignatureKindDE,
   SignatureKindENG,
+  SignatureKindFR,
   SignatureKindRU,
 } from '@/hooks/Mapper/types';
 
@@ -40,46 +44,58 @@ export const GROUPS: Record<SignatureGroup, GroupType> = {
   [SignatureGroup.CosmicSignature]: { id: SignatureGroup.CosmicSignature, icon: '/icons/x_close14.png', w: 9, h: 9 },
 };
 
-export const MAPPING_GROUP_TO_ENG = {
-  // ENGLISH
-  [SignatureGroupENG.GasSite]: SignatureGroup.GasSite,
-  [SignatureGroupENG.RelicSite]: SignatureGroup.RelicSite,
-  [SignatureGroupENG.DataSite]: SignatureGroup.DataSite,
-  [SignatureGroupENG.OreSite]: SignatureGroup.OreSite,
-  [SignatureGroupENG.CombatSite]: SignatureGroup.CombatSite,
-  [SignatureGroupENG.Wormhole]: SignatureGroup.Wormhole,
-  [SignatureGroupENG.CosmicSignature]: SignatureGroup.CosmicSignature,
-
-  // RUSSIAN
-  [SignatureGroupRU.GasSite]: SignatureGroup.GasSite,
-  [SignatureGroupRU.RelicSite]: SignatureGroup.RelicSite,
-  [SignatureGroupRU.DataSite]: SignatureGroup.DataSite,
-  [SignatureGroupRU.OreSite]: SignatureGroup.OreSite,
-  [SignatureGroupRU.CombatSite]: SignatureGroup.CombatSite,
-  [SignatureGroupRU.Wormhole]: SignatureGroup.Wormhole,
-  [SignatureGroupRU.CosmicSignature]: SignatureGroup.CosmicSignature,
+export const LANGUAGE_GROUP_MAPPINGS = {
+  EN: {
+    [SignatureGroupENG.GasSite]: SignatureGroup.GasSite,
+    [SignatureGroupENG.RelicSite]: SignatureGroup.RelicSite,
+    [SignatureGroupENG.DataSite]: SignatureGroup.DataSite,
+    [SignatureGroupENG.OreSite]: SignatureGroup.OreSite,
+    [SignatureGroupENG.CombatSite]: SignatureGroup.CombatSite,
+    [SignatureGroupENG.Wormhole]: SignatureGroup.Wormhole,
+    [SignatureGroupENG.CosmicSignature]: SignatureGroup.CosmicSignature,
+  },
+  RU: {
+    [SignatureGroupRU.GasSite]: SignatureGroup.GasSite,
+    [SignatureGroupRU.RelicSite]: SignatureGroup.RelicSite,
+    [SignatureGroupRU.DataSite]: SignatureGroup.DataSite,
+    [SignatureGroupRU.OreSite]: SignatureGroup.OreSite,
+    [SignatureGroupRU.CombatSite]: SignatureGroup.CombatSite,
+    [SignatureGroupRU.Wormhole]: SignatureGroup.Wormhole,
+    [SignatureGroupRU.CosmicSignature]: SignatureGroup.CosmicSignature,
+  },
+  FR: {
+    [SignatureGroupFR.GasSite]: SignatureGroup.GasSite,
+    [SignatureGroupFR.RelicSite]: SignatureGroup.RelicSite,
+    [SignatureGroupFR.DataSite]: SignatureGroup.DataSite,
+    [SignatureGroupFR.OreSite]: SignatureGroup.OreSite,
+    [SignatureGroupFR.CombatSite]: SignatureGroup.CombatSite,
+    [SignatureGroupFR.Wormhole]: SignatureGroup.Wormhole,
+    [SignatureGroupFR.CosmicSignature]: SignatureGroup.CosmicSignature,
+  },
+  DE: {
+    [SignatureGroupDE.GasSite]: SignatureGroup.GasSite,
+    [SignatureGroupDE.RelicSite]: SignatureGroup.RelicSite,
+    [SignatureGroupDE.DataSite]: SignatureGroup.DataSite,
+    [SignatureGroupDE.OreSite]: SignatureGroup.OreSite,
+    [SignatureGroupDE.CombatSite]: SignatureGroup.CombatSite,
+    [SignatureGroupDE.Wormhole]: SignatureGroup.Wormhole,
+    [SignatureGroupDE.CosmicSignature]: SignatureGroup.CosmicSignature,
+  },
 };
 
-export const MAPPING_TYPE_TO_ENG = {
-  // ENGLISH
-  [SignatureKindENG.CosmicSignature]: SignatureKind.CosmicSignature,
-  [SignatureKindENG.CosmicAnomaly]: SignatureKind.CosmicAnomaly,
-  [SignatureKindENG.Structure]: SignatureKind.Structure,
-  [SignatureKindENG.Ship]: SignatureKind.Ship,
-  [SignatureKindENG.Deployable]: SignatureKind.Deployable,
-  [SignatureKindENG.Drone]: SignatureKind.Drone,
+// Flatten the structure for backward compatibility
+export const MAPPING_GROUP_TO_ENG: Record<string, SignatureGroup> = (() => {
+  const flattened: Record<string, SignatureGroup> = {};
+  for (const [, mappings] of Object.entries(LANGUAGE_GROUP_MAPPINGS)) {
+    Object.assign(flattened, mappings);
+  }
+  return flattened;
+})();
 
-  // RUSSIAN
-  [SignatureKindRU.CosmicSignature]: SignatureKind.CosmicSignature,
-  [SignatureKindRU.CosmicAnomaly]: SignatureKind.CosmicAnomaly,
-  [SignatureKindRU.Structure]: SignatureKind.Structure,
-  [SignatureKindRU.Ship]: SignatureKind.Ship,
-  [SignatureKindRU.Deployable]: SignatureKind.Deployable,
-  [SignatureKindRU.Drone]: SignatureKind.Drone,
+export const getGroupIdByRawGroup = (val: string): SignatureGroup | undefined => {
+  return MAPPING_GROUP_TO_ENG[val] || undefined;
 };
 
-export const getGroupIdByRawGroup = (val: string) => MAPPING_GROUP_TO_ENG[val as SignatureGroup];
-
 export const SIGNATURE_WINDOW_ID = 'system_signatures_window';
 export const SIGNATURE_SETTING_STORE_KEY = 'wanderer_system_signature_settings_v6_5';
 
@@ -123,7 +139,7 @@ export type Setting = {
   name: string;
   type: SettingsTypes;
   isSeparator?: boolean;
-  options?: { label: string; value: any }[];
+  options?: { label: string; value: number | string | boolean }[];
 };
 
 export enum SIGNATURES_DELETION_TIMING {
@@ -132,7 +148,8 @@ export enum SIGNATURES_DELETION_TIMING {
   EXTENDED,
 }
 
-export type SignatureDeletionTimingType = { [key in SIGNATURES_DELETION_TIMING]?: unknown };
+// Now use a stricter type: every timing key maps to a number
+export type SignatureDeletionTimingType = Record<SIGNATURES_DELETION_TIMING, number>;
 
 export const SIGNATURE_SETTINGS = {
   filterFlags: [
@@ -203,8 +220,73 @@ export const SETTINGS_VALUES: SignatureSettingsType = {
   [SETTINGS_KEYS.COMBAT_SITE]: true,
 };
 
+// Now this map is strongly typed as “number” for each timing enum
 export const SIGNATURE_DELETION_TIMEOUTS: SignatureDeletionTimingType = {
-  [SIGNATURES_DELETION_TIMING.DEFAULT]: 10_000,
   [SIGNATURES_DELETION_TIMING.IMMEDIATE]: 0,
+  [SIGNATURES_DELETION_TIMING.DEFAULT]: 10_000,
   [SIGNATURES_DELETION_TIMING.EXTENDED]: 30_000,
 };
+
+/**
+ * Helper function to extract the deletion timeout in milliseconds from settings
+ */
+export function getDeletionTimeoutMs(settings: SignatureSettingsType): number {
+  const raw = settings[SETTINGS_KEYS.DELETION_TIMING];
+  const timing =
+    raw && typeof raw === 'object' && 'value' in raw
+      ? (raw as { value: SIGNATURES_DELETION_TIMING }).value
+      : (raw as SIGNATURES_DELETION_TIMING | undefined);
+
+  const validTiming = typeof timing === 'number' ? timing : SIGNATURES_DELETION_TIMING.DEFAULT;
+
+  return SIGNATURE_DELETION_TIMEOUTS[validTiming];
+}
+
+// Replace the flat structure with a nested structure by language
+export const LANGUAGE_TYPE_MAPPINGS = {
+  EN: {
+    [SignatureKindENG.CosmicSignature]: SignatureKind.CosmicSignature,
+    [SignatureKindENG.CosmicAnomaly]: SignatureKind.CosmicAnomaly,
+    [SignatureKindENG.Structure]: SignatureKind.Structure,
+    [SignatureKindENG.Ship]: SignatureKind.Ship,
+    [SignatureKindENG.Deployable]: SignatureKind.Deployable,
+    [SignatureKindENG.Drone]: SignatureKind.Drone,
+    [SignatureKindENG.Starbase]: SignatureKind.Starbase,
+  },
+  RU: {
+    [SignatureKindRU.CosmicSignature]: SignatureKind.CosmicSignature,
+    [SignatureKindRU.CosmicAnomaly]: SignatureKind.CosmicAnomaly,
+    [SignatureKindRU.Structure]: SignatureKind.Structure,
+    [SignatureKindRU.Ship]: SignatureKind.Ship,
+    [SignatureKindRU.Deployable]: SignatureKind.Deployable,
+    [SignatureKindRU.Drone]: SignatureKind.Drone,
+    [SignatureKindRU.Starbase]: SignatureKind.Starbase,
+  },
+  FR: {
+    [SignatureKindFR.CosmicSignature]: SignatureKind.CosmicSignature,
+    [SignatureKindFR.CosmicAnomaly]: SignatureKind.CosmicAnomaly,
+    [SignatureKindFR.Structure]: SignatureKind.Structure,
+    [SignatureKindFR.Ship]: SignatureKind.Ship,
+    [SignatureKindFR.Deployable]: SignatureKind.Deployable,
+    [SignatureKindFR.Drone]: SignatureKind.Drone,
+    [SignatureKindFR.Starbase]: SignatureKind.Starbase,
+  },
+  DE: {
+    [SignatureKindDE.CosmicSignature]: SignatureKind.CosmicSignature,
+    [SignatureKindDE.CosmicAnomaly]: SignatureKind.CosmicAnomaly,
+    [SignatureKindDE.Structure]: SignatureKind.Structure,
+    [SignatureKindDE.Ship]: SignatureKind.Ship,
+    [SignatureKindDE.Deployable]: SignatureKind.Deployable,
+    [SignatureKindDE.Drone]: SignatureKind.Drone,
+    [SignatureKindDE.Starbase]: SignatureKind.Starbase,
+  },
+};
+
+// Flatten the structure for backward compatibility
+export const MAPPING_TYPE_TO_ENG: Record<string, SignatureKind> = (() => {
+  const flattened: Record<string, SignatureKind> = {};
+  for (const [, mappings] of Object.entries(LANGUAGE_TYPE_MAPPINGS)) {
+    Object.assign(flattened, mappings);
+  }
+  return flattened;
+})();

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers/getActualSigs.ts

@@ -1,5 +1,5 @@
-import { SystemSignature } from '@/hooks/Mapper/types';
 import { GROUPS_LIST } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants';
+import { SystemSignature } from '@/hooks/Mapper/types';
 import { getState } from './getState';
 
 /**
@@ -22,6 +22,7 @@ export const getActualSigs = (
 
   oldSignatures.forEach(oldSig => {
     const newSig = newSignatures.find(s => s.eve_id === oldSig.eve_id);
+
     if (newSig) {
       const needUpgrade = getState(GROUPS_LIST, newSig) > getState(GROUPS_LIST, oldSig);
       const mergedSig = { ...oldSig };

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers/getState.ts

@@ -1,13 +1,15 @@
-import { SystemSignature } from '@/hooks/Mapper/types';
+import { UNKNOWN_SIGNATURE_NAME } from '@/hooks/Mapper/helpers';
+import { SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
 
 export const getState = (_: string[], newSig: SystemSignature) => {
   let state = -1;
-  if (!newSig.group) {
+  if (!newSig.group || newSig.group === SignatureGroup.CosmicSignature) {
     state = 0;
-  } else if (!newSig.name || newSig.name === '') {
+  } else if (!newSig.name || newSig.name === '' || newSig.name === UNKNOWN_SIGNATURE_NAME) {
     state = 1;
   } else if (newSig.name !== '') {
     state = 2;
   }
+
   return state;
 };

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/hooks/usePendingDeletions.ts

@@ -1,23 +1,18 @@
-import { useCallback, useRef, useEffect } from 'react';
+import { useCallback, useRef } from 'react';
 import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
-import { prepareUpdatePayload, scheduleLazyTimers } from '../helpers';
+import { prepareUpdatePayload } from '../helpers';
 import { UsePendingDeletionParams } from './types';
-import { FINAL_DURATION_MS } from '../constants';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { ExtendedSystemSignature } from '@/hooks/Mapper/types';
 
 export function usePendingDeletions({
   systemId,
   setSignatures,
-  deletionTiming,
   onPendingChange,
-}: UsePendingDeletionParams) {
+}: Omit<UsePendingDeletionParams, 'deletionTiming'>) {
   const { outCommand } = useMapRootState();
   const pendingDeletionMapRef = useRef<Record<string, ExtendedSystemSignature>>({});
 
-  // Use the provided deletion timing or fall back to the default
-  const finalDuration = deletionTiming !== undefined ? deletionTiming : FINAL_DURATION_MS;
-
   const processRemovedSignatures = useCallback(
     async (
       removed: ExtendedSystemSignature[],
@@ -25,63 +20,15 @@ export function usePendingDeletions({
       updated: ExtendedSystemSignature[],
     ) => {
       if (!removed.length) return;
-
-      // If deletion timing is 0, immediately delete without pending state
-      if (finalDuration === 0) {
-        await outCommand({
-          type: OutCommand.updateSignatures,
-          data: prepareUpdatePayload(systemId, added, updated, removed),
-        });
-        return;
-      }
-
-      const now = Date.now();
-      const processedRemoved = removed.map(r => ({
-        ...r,
-        pendingDeletion: true,
-        pendingUntil: now + finalDuration,
-      }));
-      pendingDeletionMapRef.current = {
-        ...pendingDeletionMapRef.current,
-        ...processedRemoved.reduce((acc: any, sig) => {
-          acc[sig.eve_id] = sig;
-          return acc;
-        }, {}),
-      };
-
-      onPendingChange?.(pendingDeletionMapRef, clearPendingDeletions);
-
-      setSignatures(prev =>
-        prev.map(sig => {
-          if (processedRemoved.find(r => r.eve_id === sig.eve_id)) {
-            return { ...sig, pendingDeletion: true, pendingUntil: now + finalDuration };
-          }
-          return sig;
-        }),
-      );
-
-      scheduleLazyTimers(
-        processedRemoved,
-        pendingDeletionMapRef,
-        async sig => {
-          await outCommand({
-            type: OutCommand.updateSignatures,
-            data: prepareUpdatePayload(systemId, [], [], [sig]),
-          });
-          delete pendingDeletionMapRef.current[sig.eve_id];
-          setSignatures(prev => prev.filter(x => x.eve_id !== sig.eve_id));
-          onPendingChange?.(pendingDeletionMapRef, clearPendingDeletions);
-        },
-        finalDuration,
-      );
+      await outCommand({
+        type: OutCommand.updateSignatures,
+        data: prepareUpdatePayload(systemId, added, updated, removed),
+      });
     },
-    [systemId, outCommand, finalDuration],
+    [systemId, outCommand],
   );
 
   const clearPendingDeletions = useCallback(() => {
-    Object.values(pendingDeletionMapRef.current).forEach(({ finalTimeoutId }) => {
-      clearTimeout(finalTimeoutId);
-    });
     pendingDeletionMapRef.current = {};
     setSignatures(prev => prev.map(x => (x.pendingDeletion ? { ...x, pendingDeletion: false } : x)));
     onPendingChange?.(pendingDeletionMapRef, clearPendingDeletions);

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/hooks/useSystemSignaturesData.ts

@@ -5,7 +5,10 @@ import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
 import { useCallback, useEffect, useState } from 'react';
 import useRefState from 'react-usestateref';
 
-import { SETTINGS_KEYS } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
+import {
+  SETTINGS_KEYS,
+  getDeletionTimeoutMs,
+} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { getActualSigs } from '../helpers';
 import { UseSystemSignaturesDataProps } from './types';
@@ -18,16 +21,18 @@ export const useSystemSignaturesData = ({
   onCountChange,
   onPendingChange,
   onLazyDeleteChange,
-  deletionTiming,
-}: UseSystemSignaturesDataProps) => {
+  onSignatureDeleted,
+}: Omit<UseSystemSignaturesDataProps, 'deletionTiming'> & {
+  onSignatureDeleted?: (deletedSignatures: ExtendedSystemSignature[]) => void;
+}) => {
   const { outCommand } = useMapRootState();
   const [signatures, setSignatures, signaturesRef] = useRefState<ExtendedSystemSignature[]>([]);
   const [selectedSignatures, setSelectedSignatures] = useState<ExtendedSystemSignature[]>([]);
+  const [hasUnsupportedLanguage, setHasUnsupportedLanguage] = useState<boolean>(false);
 
   const { pendingDeletionMapRef, processRemovedSignatures, clearPendingDeletions } = usePendingDeletions({
     systemId,
     setSignatures,
-    deletionTiming,
     onPendingChange,
   });
 
@@ -42,6 +47,7 @@ export const useSystemSignaturesData = ({
     async (clipboardString: string) => {
       const lazyDeleteValue = settings[SETTINGS_KEYS.LAZY_DELETE_SIGNATURES] as boolean;
 
+      // Parse the incoming signatures
       const incomingSignatures = parseSignatures(
         clipboardString,
         Object.keys(settings).filter(skey => skey in SignatureKind),
@@ -51,14 +57,37 @@ export const useSystemSignaturesData = ({
         return;
       }
 
+      // Check if any signatures might be using unsupported languages
+      // This is a basic heuristic: if we have signatures where the original group wasn't mapped
+      const clipboardRows = clipboardString.split('\n').filter(row => row.trim() !== '');
+      const detectedSignatureCount = clipboardRows.filter(row => row.match(/^[A-Z]{3}-\d{3}/)).length;
+
+      // If we detected valid IDs but got fewer parsed signatures, we might have language issues
+      if (detectedSignatureCount > 0 && incomingSignatures.length < detectedSignatureCount) {
+        setHasUnsupportedLanguage(true);
+      } else {
+        setHasUnsupportedLanguage(false);
+      }
+
       const currentNonPending = lazyDeleteValue
         ? signaturesRef.current.filter(sig => !sig.pendingDeletion)
         : signaturesRef.current.filter(sig => !sig.pendingDeletion || !sig.pendingAddition);
 
-      const { added, updated, removed } = getActualSigs(currentNonPending, incomingSignatures, !lazyDeleteValue, true);
+      const { added, updated, removed } = getActualSigs(currentNonPending, incomingSignatures, !lazyDeleteValue, false);
 
       if (removed.length > 0) {
         await processRemovedSignatures(removed, added, updated);
+
+        // Only show pending deletions if:
+        // 1. Lazy deletion is enabled AND
+        // 2. Deletion timing is not immediate (> 0)
+        if (onSignatureDeleted && lazyDeleteValue) {
+          const timeoutMs = getDeletionTimeoutMs(settings);
+
+          if (timeoutMs > 0) {
+            onSignatureDeleted(removed);
+          }
+        }
       }
 
       if (updated.length !== 0 || added.length !== 0) {
@@ -78,17 +107,23 @@ export const useSystemSignaturesData = ({
         onLazyDeleteChange?.(false);
       }
     },
-    [settings, signaturesRef, processRemovedSignatures, outCommand, systemId, onLazyDeleteChange],
+    [settings, signaturesRef, processRemovedSignatures, outCommand, systemId, onLazyDeleteChange, onSignatureDeleted],
   );
 
   const handleDeleteSelected = useCallback(async () => {
     if (!selectedSignatures.length) return;
+
     const selectedIds = selectedSignatures.map(s => s.eve_id);
     const finalList = signatures.filter(s => !selectedIds.includes(s.eve_id));
 
+    // IMPORTANT: Send deletion to server BEFORE updating local state
+    // Otherwise signaturesRef.current will be updated and getActualSigs won't detect removals
     await handleUpdateSignatures(finalList, false, true);
+
+    // Update local state after server call
+    setSignatures(finalList);
     setSelectedSignatures([]);
-  }, [selectedSignatures, signatures]);
+  }, [handleUpdateSignatures, selectedSignatures, signatures, setSignatures]);
 
   const handleSelectAll = useCallback(() => {
     setSelectedSignatures(signatures);
@@ -119,11 +154,12 @@ export const useSystemSignaturesData = ({
   }, [signatures]);
 
   return {
-    signatures,
+    signatures: signatures.filter(sig => !sig.deleted),
     selectedSignatures,
     setSelectedSignatures,
     handleDeleteSelected,
     handleSelectAll,
     handlePaste,
+    hasUnsupportedLanguage,
   };
 };

assets/js/hooks/Mapper/components/mapInterface/widgets/WRoutesPublic/WRoutesPublic.tsx

@@ -0,0 +1,69 @@
+import { Commands, OutCommand } from '@/hooks/Mapper/types';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import {
+  AddHubCommand,
+  RoutesImperativeHandle,
+} from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/types.ts';
+import { useCallback, useRef } from 'react';
+import { RoutesWidget } from '@/hooks/Mapper/components/mapInterface/widgets';
+import { useMapEventListener } from '@/hooks/Mapper/events';
+
+export const WRoutesPublic = () => {
+  const {
+    outCommand,
+    storedSettings: { settingsRoutes, settingsRoutesUpdate },
+    data: { hubs, routes, loadingPublicRoutes },
+  } = useMapRootState();
+
+  const ref = useRef<RoutesImperativeHandle>(null);
+
+  const addHubCommand: AddHubCommand = useCallback(
+    async systemId => {
+      if (hubs.includes(systemId)) {
+        return;
+      }
+
+      await outCommand({
+        type: OutCommand.addHub,
+        data: { system_id: systemId },
+      });
+    },
+    [hubs, outCommand],
+  );
+
+  const toggleHubCommand: AddHubCommand = useCallback(
+    async (systemId: string | undefined) => {
+      if (!systemId) {
+        return;
+      }
+
+      outCommand({
+        type: !hubs.includes(systemId) ? OutCommand.addHub : OutCommand.deleteHub,
+        data: {
+          system_id: systemId,
+        },
+      });
+    },
+    [hubs, outCommand],
+  );
+
+  useMapEventListener(event => {
+    if (event.name === Commands.routes) {
+      ref.current?.stopLoading();
+    }
+  });
+
+  return (
+    <RoutesWidget
+      ref={ref}
+      title="Routes"
+      data={settingsRoutes}
+      loading={loadingPublicRoutes}
+      update={settingsRoutesUpdate}
+      hubs={hubs}
+      routesList={routes}
+      addHubCommand={addHubCommand}
+      toggleHubCommand={toggleHubCommand}
+    />
+  );
+};

assets/js/hooks/Mapper/components/mapInterface/widgets/WRoutesPublic/index.ts

@@ -0,0 +1 @@
+export * from './WRoutesPublic';

assets/js/hooks/Mapper/components/mapInterface/widgets/WRoutesUser/WRoutesUser.tsx

@@ -0,0 +1,94 @@
+import { Commands, OutCommand } from '@/hooks/Mapper/types';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import {
+  AddHubCommand,
+  LoadRoutesCommand,
+  RoutesImperativeHandle,
+} from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/types.ts';
+import { useCallback, useRef } from 'react';
+import { RoutesWidget } from '@/hooks/Mapper/components/mapInterface/widgets';
+import { useMapEventListener } from '@/hooks/Mapper/events';
+import { useLoadRoutes } from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/hooks';
+
+export const WRoutesUser = () => {
+  const {
+    outCommand,
+    storedSettings: { settingsRoutes, settingsRoutesUpdate },
+    data: { userHubs, userRoutes },
+  } = useMapRootState();
+
+  const ref = useRef<RoutesImperativeHandle>(null);
+
+  const loadRoutesCommand: LoadRoutesCommand = useCallback(
+    async (systemId, routesSettings) => {
+      outCommand({
+        type: OutCommand.getUserRoutes,
+        data: {
+          system_id: systemId,
+          routes_settings: routesSettings,
+        },
+      });
+    },
+    [outCommand],
+  );
+
+  const addHubCommand: AddHubCommand = useCallback(
+    async systemId => {
+      if (userHubs.includes(systemId)) {
+        return;
+      }
+
+      await outCommand({
+        type: OutCommand.addUserHub,
+        data: { system_id: systemId },
+      });
+    },
+    [userHubs, outCommand],
+  );
+
+  const toggleHubCommand: AddHubCommand = useCallback(
+    async (systemId: string | undefined) => {
+      if (!systemId) {
+        return;
+      }
+
+      outCommand({
+        type: !userHubs.includes(systemId) ? OutCommand.addUserHub : OutCommand.deleteUserHub,
+        data: {
+          system_id: systemId,
+        },
+      });
+    },
+    [userHubs, outCommand],
+  );
+
+  // INFO: User routes loading only if open widget with user routes
+  const { loading, setLoading } = useLoadRoutes({
+    data: settingsRoutes,
+    hubs: userHubs,
+    loadRoutesCommand,
+    routesList: userRoutes,
+  });
+
+  useMapEventListener(event => {
+    if (event.name === Commands.userRoutes) {
+      setLoading(false);
+    }
+    return true;
+  });
+
+  return (
+    <RoutesWidget
+      ref={ref}
+      title="User Routes"
+      data={settingsRoutes}
+      update={settingsRoutesUpdate}
+      hubs={userHubs}
+      routesList={userRoutes}
+      loading={loading}
+      addHubCommand={addHubCommand}
+      toggleHubCommand={toggleHubCommand}
+      isRestricted
+    />
+  );
+};

assets/js/hooks/Mapper/components/mapInterface/widgets/WRoutesUser/index.ts

@@ -0,0 +1 @@
+export * from './WRoutesUser';

assets/js/hooks/Mapper/components/mapInterface/widgets/index.ts

@@ -4,3 +4,6 @@ export * from './RoutesWidget';
 export * from './SystemSignatures';
 export * from './SystemStructures';
 export * from './WSystemKills';
+export * from './WRoutesUser';
+export * from './WRoutesPublic';
+export * from './CommentsWidget';

assets/js/hooks/Mapper/components/mapRootContent/MapRootContent.tsx

@@ -13,12 +13,16 @@ import { useCharacterActivityHandlers } from './hooks/useCharacterActivityHandle
 import { TrackingDialog } from '@/hooks/Mapper/components/mapRootContent/components/TrackingDialog';
 import { useMapEventListener } from '@/hooks/Mapper/events';
 import { Commands } from '@/hooks/Mapper/types';
+import { PingsInterface } from '@/hooks/Mapper/components/mapInterface/components';
 
 export interface MapRootContentProps {}
 
 // eslint-disable-next-line no-empty-pattern
 export const MapRootContent = ({}: MapRootContentProps) => {
-  const { interfaceSettings, data } = useMapRootState();
+  const {
+    storedSettings: { interfaceSettings },
+    data,
+  } = useMapRootState();
   const { isShowMenu } = interfaceSettings;
   const { showCharacterActivity } = data;
   const { handleHideCharacterActivity } = useCharacterActivityHandlers();
@@ -59,17 +63,21 @@ export const MapRootContent = ({}: MapRootContentProps) => {
                 onShowOnTheMap={handleShowOnTheMap}
                 onShowMapSettings={handleShowMapSettings}
                 onShowTrackingDialog={handleShowTrackingDialog}
+                additionalContent={<PingsInterface hasLeftOffset />}
               />
             </div>
           </div>
         ) : (
           <div className="absolute top-0 left-14 w-[calc(100%-3.5rem)] h-[calc(100%-3.5rem)] pointer-events-none">
             <Topbar>
-              <MapContextMenu
-                onShowOnTheMap={handleShowOnTheMap}
-                onShowMapSettings={handleShowMapSettings}
-                onShowTrackingDialog={handleShowTrackingDialog}
-              />
+              <div className="flex items-center ml-1">
+                <PingsInterface />
+                <MapContextMenu
+                  onShowOnTheMap={handleShowOnTheMap}
+                  onShowMapSettings={handleShowMapSettings}
+                  onShowTrackingDialog={handleShowTrackingDialog}
+                />
+              </div>
             </Topbar>
             {mapInterface}
           </div>

assets/js/hooks/Mapper/components/mapRootContent/components/MapContextMenu/MapContextMenu.tsx

@@ -15,7 +15,10 @@ export interface MapContextMenuProps {
 }
 
 export const MapContextMenu = ({ onShowOnTheMap, onShowMapSettings, onShowTrackingDialog }: MapContextMenuProps) => {
-  const { outCommand, setInterfaceSettings } = useMapRootState();
+  const {
+    outCommand,
+    storedSettings: { setInterfaceSettings },
+  } = useMapRootState();
 
   const canTrackCharacters = useMapCheckPermissions([UserPermission.TRACK_CHARACTER]);
 

assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/MapSettings.tsx

@@ -4,13 +4,7 @@ import { useCallback, useRef, useState } from 'react';
 import { TabPanel, TabView } from 'primereact/tabview';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { OutCommand } from '@/hooks/Mapper/types';
-import {
-  CONNECTIONS_CHECKBOXES_PROPS,
-  SIGNATURES_CHECKBOXES_PROPS,
-  SYSTEMS_CHECKBOXES_PROPS,
-  THEME_SETTING,
-  UI_CHECKBOXES_PROPS,
-} from './constants.ts';
+import { CONNECTIONS_CHECKBOXES_PROPS, SIGNATURES_CHECKBOXES_PROPS, SYSTEMS_CHECKBOXES_PROPS } from './constants.ts';
 import {
   MapSettingsProvider,
   useMapSettings,
@@ -34,6 +28,8 @@ export const MapSettingsComp = ({ visible, onHide }: MapSettingsProps) => {
   refVars.current = { outCommand, onHide, visible };
 
   const handleShow = useCallback(async () => {
+    // TODO: need fix it - add type?
+    // @ts-ignore
     const { user_settings } = await refVars.current.outCommand({
       type: OutCommand.getUserSettings,
       data: null,
@@ -88,17 +84,9 @@ export const MapSettingsComp = ({ visible, onHide }: MapSettingsProps) => {
               {renderSettingsList(SIGNATURES_CHECKBOXES_PROPS)}
             </TabPanel>
 
-            <TabPanel header="User Interface" headerClassName={styles.verticalTabHeader}>
-              {renderSettingsList(UI_CHECKBOXES_PROPS)}
-            </TabPanel>
-
             <TabPanel header="Widgets" className="h-full" headerClassName={styles.verticalTabHeader}>
               <WidgetsSettings />
             </TabPanel>
-
-            <TabPanel header="Theme" headerClassName={styles.verticalTabHeader}>
-              {renderSettingItem(THEME_SETTING)}
-            </TabPanel>
           </TabView>
         </div>
       </div>

assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/MapSettingsProvider.tsx

@@ -31,13 +31,16 @@ type MapSettingsContextType = {
 const MapSettingsContext = createContext<MapSettingsContextType | undefined>(undefined);
 
 export const MapSettingsProvider = ({ children }: { children: ReactNode }) => {
-  const { outCommand, interfaceSettings, setInterfaceSettings } = useMapRootState();
+  const {
+    outCommand,
+    storedSettings: { interfaceSettings, setInterfaceSettings },
+  } = useMapRootState();
 
   const [userRemoteSettings, setUserRemoteSettings] = useState<UserSettingsRemote>({
     ...DEFAULT_REMOTE_SETTINGS,
   });
 
-  const mergedSettings = useMemo(() => {
+  const mergedSettings: UserSettings = useMemo(() => {
     return {
       ...userRemoteSettings,
       ...interfaceSettings,
@@ -75,7 +78,7 @@ export const MapSettingsProvider = ({ children }: { children: ReactNode }) => {
       if (item.type === 'checkbox') {
         return (
           <PrettySwitchbox
-            key={item.prop}
+            key={item.prop.toString()}
             label={item.label}
             checked={!!currentValue}
             setChecked={checked => handleSettingChange(item.prop, checked)}
@@ -85,8 +88,9 @@ export const MapSettingsProvider = ({ children }: { children: ReactNode }) => {
 
       if (item.type === 'dropdown' && item.options) {
         return (
-          <div key={item.prop} className="flex items-center gap-2 mt-2">
-            <label className="text-sm">{item.label}:</label>
+          <div key={item.prop.toString()} className="grid grid-cols-[auto_1fr_auto] items-center">
+            <label className="text-[var(--gray-200)] text-[13px] select-none">{item.label}:</label>
+            <div className="border-b-2 border-dotted border-[#3f3f3f] h-px mx-3" />
             <Dropdown
               className="text-sm"
               value={currentValue}

assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/CommonSettings.tsx

@@ -1,13 +1,34 @@
-import { COMMON_CHECKBOXES_PROPS } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/constants.ts';
+import {
+  MINI_MAP_PLACEMENT,
+  PINGS_PLACEMENT,
+  THEME_SETTING,
+  UI_CHECKBOXES_PROPS,
+} from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/constants.ts';
 import { useMapSettings } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/MapSettingsProvider.tsx';
 import { SettingsListItem } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/types.ts';
+import { useCallback } from 'react';
 
 export const CommonSettings = () => {
   const { renderSettingItem } = useMapSettings();
 
-  const renderSettingsList = (list: SettingsListItem[]) => {
-    return list.map(renderSettingItem);
-  };
+  const renderSettingsList = useCallback(
+    (list: SettingsListItem[]) => {
+      return list.map(renderSettingItem);
+    },
+    [renderSettingItem],
+  );
 
-  return <div className="w-full h-full flex flex-col gap-1">{renderSettingsList(COMMON_CHECKBOXES_PROPS)}</div>;
+  return (
+    <div className="flex flex-col h-full gap-1">
+      <div>
+        <div className="w-full h-full flex flex-col gap-1">{renderSettingsList(UI_CHECKBOXES_PROPS)}</div>
+      </div>
+
+      <div className="border-b-2 border-dotted border-stone-700/50 h-px my-3" />
+
+      <div className="grid grid-cols-[1fr_auto]">{renderSettingItem(MINI_MAP_PLACEMENT)}</div>
+      <div className="grid grid-cols-[1fr_auto]">{renderSettingItem(PINGS_PLACEMENT)}</div>
+      <div className="grid grid-cols-[1fr_auto]">{renderSettingItem(THEME_SETTING)}</div>
+    </div>
+  );
 };

assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/PrettySwitchbox/PrettySwitchbox.tsx

@@ -10,9 +10,9 @@ interface PrettySwitchboxProps {
 
 export const PrettySwitchbox = ({ checked, setChecked, label }: PrettySwitchboxProps) => {
   return (
-    <label className={styles.CheckboxContainer}>
-      <span>{label}</span>
-      <div />
+    <label className="grid grid-cols-[auto_1fr_auto] items-center">
+      <span className="text-[var(--gray-200)] text-[13px] select-none">{label}</span>
+      <div className="border-b-2 border-dotted border-[#3f3f3f] h-px mx-3" />
       <div className={styles.smallInputSwitch}>
         <WdCheckbox size="m" label={''} value={checked} onChange={e => setChecked(e.checked ?? false)} />
       </div>

assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/constants.ts

@@ -1,5 +1,6 @@
 import { SettingsListItem, UserSettingsRemoteProps } from './types.ts';
-import { AvailableThemes, InterfaceStoredSettingsProps } from '@/hooks/Mapper/mapRootProvider';
+import { InterfaceStoredSettingsProps } from '@/hooks/Mapper/mapRootProvider';
+import { AvailableThemes, MiniMapPlacement, PingsPlacement } from '@/hooks/Mapper/mapRootProvider/types.ts';
 
 export const DEFAULT_REMOTE_SETTINGS = {
   [UserSettingsRemoteProps.link_signature_on_splash]: false,
@@ -13,13 +14,13 @@ export const UserSettingsRemoteList = [
   UserSettingsRemoteProps.delete_connection_with_sigs,
 ];
 
-export const COMMON_CHECKBOXES_PROPS: SettingsListItem[] = [
-  {
-    prop: InterfaceStoredSettingsProps.isShowMinimap,
-    label: 'Show Minimap',
-    type: 'checkbox',
-  },
-];
+// export const COMMON_CHECKBOXES_PROPS: SettingsListItem[] = [
+//   // {
+//   //   prop: InterfaceStoredSettingsProps.isShowMinimap,
+//   //   label: 'Show Minimap',
+//   //   type: 'checkbox',
+//   // },
+// ];
 
 export const SYSTEMS_CHECKBOXES_PROPS: SettingsListItem[] = [
   {
@@ -89,3 +90,32 @@ export const THEME_SETTING: SettingsListItem = {
   type: 'dropdown',
   options: THEME_OPTIONS,
 };
+
+export const MINI_MAP_PLACEMENT_OPTIONS = [
+  { label: 'Right Bottom', value: MiniMapPlacement.rightBottom },
+  { label: 'Right Top', value: MiniMapPlacement.rightTop },
+  { label: 'Left Top', value: MiniMapPlacement.leftTop },
+  { label: 'Left Bottom', value: MiniMapPlacement.leftBottom },
+  { label: 'Hide', value: MiniMapPlacement.hide },
+];
+
+export const MINI_MAP_PLACEMENT: SettingsListItem = {
+  prop: 'minimapPlacement',
+  label: 'Minimap Placement',
+  type: 'dropdown',
+  options: MINI_MAP_PLACEMENT_OPTIONS,
+};
+
+export const PINGS_PLACEMENT_OPTIONS = [
+  { label: 'Right Top', value: PingsPlacement.rightTop },
+  { label: 'Left Top', value: PingsPlacement.leftTop },
+  { label: 'Left Bottom', value: PingsPlacement.leftBottom },
+  { label: 'Right Bottom', value: PingsPlacement.rightBottom },
+];
+
+export const PINGS_PLACEMENT: SettingsListItem = {
+  prop: 'pingsPlacement',
+  label: 'Pings Placement',
+  type: 'dropdown',
+  options: PINGS_PLACEMENT_OPTIONS,
+};

assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/types.ts

@@ -1,4 +1,4 @@
-import { InterfaceStoredSettings } from '@/hooks/Mapper/mapRootProvider';
+import { InterfaceStoredSettings } from '@/hooks/Mapper/mapRootProvider/types.ts';
 
 export enum UserSettingsRemoteProps {
   link_signature_on_splash = 'link_signature_on_splash',

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

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

assets/js/hooks/Mapper/components/mapRootContent/components/OnTheMap/OnTheMap.tsx

@@ -1,15 +1,17 @@
 import classes from './OnTheMap.module.scss';
 import { Sidebar } from 'primereact/sidebar';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { sortCharacters } from '@/hooks/Mapper/components/mapInterface/helpers/sortCharacters.ts';
 import { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
 import clsx from 'clsx';
 import { CharacterTypeRaw, WithIsOwnCharacter } from '@/hooks/Mapper/types';
-import { CharacterCard, WdCheckbox } from '@/hooks/Mapper/components/ui-kit';
+import { CharacterCard, TooltipPosition, WdCheckbox, WdImageSize, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
 import useLocalStorageState from 'use-local-storage-state';
 import { useMapCheckPermissions, useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
 import { UserPermission } from '@/hooks/Mapper/types/permissions.ts';
+import { InputText } from 'primereact/inputtext';
+import { IconField } from 'primereact/iconfield';
 
 type WindowLocalSettingsType = {
   compact: boolean;
@@ -33,7 +35,7 @@ const itemTemplate = (item: CharacterTypeRaw & WithIsOwnCharacter, options: Virt
       })}
       style={{ height: options.props.itemSize + 'px' }}
     >
-      <CharacterCard showSystem {...item} />
+      <CharacterCard showCorporationLogo showAllyLogo showSystem showTicker showShip {...item} />
     </div>
   );
 };
@@ -48,6 +50,8 @@ export const OnTheMap = ({ show, onHide }: OnTheMapProps) => {
     data: { characters, userCharacters },
   } = useMapRootState();
 
+  const [searchVal, setSearchVal] = useState('');
+
   const [settings, setSettings] = useLocalStorageState<WindowLocalSettingsType>('window:onTheMap:settings', {
     defaultValue: STORED_DEFAULT_VALUES,
   });
@@ -61,13 +65,54 @@ export const OnTheMap = ({ show, onHide }: OnTheMapProps) => {
   );
 
   const sorted = useMemo(() => {
-    const out = characters.map(x => ({ ...x, isOwn: userCharacters.includes(x.eve_id) })).sort(sortCharacters);
+    let out = characters.map(x => ({ ...x, isOwn: userCharacters.includes(x.eve_id) })).sort(sortCharacters);
+
+    if (searchVal !== '') {
+      out = out.filter(x => {
+        const normalized = searchVal.toLowerCase();
+
+        if (x.name.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        if (x.corporation_name.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        if (x.alliance_name?.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        if (x.corporation_ticker.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        if (x.alliance_ticker?.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        if (x.ship?.ship_name?.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        if (x.ship?.ship_type_info.name?.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        if (x.ship?.ship_type_info.group_name?.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        return false;
+      });
+    }
+
     if (showOffline && !settings.hideOffline) {
       return out;
     }
 
     return out.filter(x => x.online);
-  }, [showOffline, characters, settings.hideOffline, userCharacters]);
+  }, [showOffline, searchVal, characters, settings.hideOffline, userCharacters]);
 
   return (
     <Sidebar
@@ -79,7 +124,30 @@ export const OnTheMap = ({ show, onHide }: OnTheMapProps) => {
       icons={<></>}
     >
       <div className={clsx(classes.SidebarContent, '')}>
-        <div className={'flex justify-end items-center gap-2 px-3'}>
+        <div className={'flex justify-between items-center gap-2 px-2 pt-1'}>
+          <IconField>
+            {searchVal.length > 0 && (
+              <WdImgButton
+                className="pi pi-trash"
+                textSize={WdImageSize.large}
+                tooltip={{
+                  content: 'Clear',
+                  className: 'pi p-input-icon',
+                  position: TooltipPosition.top,
+                }}
+                onClick={() => setSearchVal('')}
+              />
+            )}
+            <InputText
+              id="label"
+              aria-describedby="label"
+              autoComplete="off"
+              value={searchVal}
+              placeholder="Type to search"
+              onChange={e => setSearchVal(e.target.value)}
+            />
+          </IconField>
+
           {showOffline && (
             <WdCheckbox
               size="m"

assets/js/hooks/Mapper/components/mapRootContent/components/RightBar/RightBar.tsx

@@ -1,6 +1,6 @@
 import classes from './RightBar.module.scss';
 import clsx from 'clsx';
-import { useCallback } from 'react';
+import { ReactNode, useCallback } from 'react';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
 import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
@@ -12,22 +12,21 @@ interface RightBarProps {
   onShowOnTheMap?: () => void;
   onShowMapSettings?: () => void;
   onShowTrackingDialog?: () => void;
+  additionalContent?: ReactNode;
 }
 
-export const RightBar = ({ onShowOnTheMap, onShowMapSettings, onShowTrackingDialog }: RightBarProps) => {
-  const { interfaceSettings, setInterfaceSettings } = useMapRootState();
+export const RightBar = ({
+  onShowOnTheMap,
+  onShowMapSettings,
+  onShowTrackingDialog,
+  additionalContent,
+}: RightBarProps) => {
+  const {
+    storedSettings: { interfaceSettings, setInterfaceSettings },
+  } = useMapRootState();
 
   const canTrackCharacters = useMapCheckPermissions([UserPermission.TRACK_CHARACTER]);
 
-  const isShowMinimap = interfaceSettings.isShowMinimap === undefined ? true : interfaceSettings.isShowMinimap;
-
-  const toggleMinimap = useCallback(() => {
-    setInterfaceSettings(x => ({
-      ...x,
-      isShowMinimap: !x.isShowMinimap,
-    }));
-  }, [setInterfaceSettings]);
-
   const toggleKSpace = useCallback(() => {
     setInterfaceSettings(x => ({
       ...x,
@@ -76,6 +75,7 @@ export const RightBar = ({ onShowOnTheMap, onShowMapSettings, onShowTrackingDial
             </WdTooltipWrapper>
           </>
         )}
+        {additionalContent}
       </div>
 
       <div className="flex flex-col items-center mb-2 gap-1">
@@ -104,16 +104,6 @@ export const RightBar = ({ onShowOnTheMap, onShowMapSettings, onShowTrackingDial
           </button>
         </WdTooltipWrapper>
 
-        <WdTooltipWrapper content={isShowMinimap ? 'Hide minimap' : 'Show minimap'} position={TooltipPosition.left}>
-          <button
-            className="btn bg-transparent text-gray-400 hover:text-white border-transparent hover:bg-transparent py-2 h-auto min-h-auto"
-            type="button"
-            onClick={toggleMinimap}
-          >
-            <i className={isShowMinimap ? 'pi pi-eye' : 'pi pi-eye-slash'}></i>
-          </button>
-        </WdTooltipWrapper>
-
         <WdTooltipWrapper content="Switch to menu" position={TooltipPosition.left}>
           <button
             className="btn bg-transparent text-gray-400 hover:text-white border-transparent hover:bg-transparent py-2 h-auto min-h-auto"

assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/SignatureSettings.tsx

@@ -31,6 +31,7 @@ export const SignatureSettings = ({ systemId, show, onHide, signatureData }: Map
   const signatureForm = useForm<Partial<SystemSignaturePrepared>>({});
 
   const handleSave = useCallback(
+    // TODO: need fix
     async (e: any) => {
       e?.preventDefault();
       if (!signatureData) {
@@ -52,6 +53,7 @@ export const SignatureSettings = ({ systemId, show, onHide, signatureData }: Map
               },
             });
 
+            // TODO: need fix
             if (values.isEOL) {
               await outCommand({
                 type: OutCommand.updateConnectionTimeStatus,
@@ -65,8 +67,8 @@ export const SignatureSettings = ({ systemId, show, onHide, signatureData }: Map
 
             if (values.type) {
               const whShipSize = getWhSize(wormholes, values.type);
-              if (whShipSize) {
-                outCommand({
+              if (whShipSize !== undefined && whShipSize !== null) {
+                await outCommand({
                   type: OutCommand.updateConnectionShipSizeType,
                   data: {
                     source: systemId,
@@ -81,7 +83,9 @@ export const SignatureSettings = ({ systemId, show, onHide, signatureData }: Map
           out = {
             ...out,
             custom_info: JSON.stringify({
+              // TODO: need fix
               k162Type: values.k162Type,
+              // TODO: need fix
               isEOL: values.isEOL,
             }),
           };
@@ -145,7 +149,7 @@ export const SignatureSettings = ({ systemId, show, onHide, signatureData }: Map
       signatureForm.reset();
       onHide();
     },
-    [signatureForm, onHide, outCommand, signatureData, systemId],
+    [signatureData, signatureForm, outCommand, systemId, onHide, wormholes],
   );
 
   useEffect(() => {
@@ -166,6 +170,7 @@ export const SignatureSettings = ({ systemId, show, onHide, signatureData }: Map
 
     signatureForm.reset({
       linked_system: linked_system?.solar_system_id.toString() ?? undefined,
+      // TODO: need fix
       k162Type: k162Type,
       isEOL: isEOL,
       ...rest,

assets/js/hooks/Mapper/components/mapRootContent/components/TrackingDialog/TrackingCharactersList.tsx

@@ -44,7 +44,7 @@ export const TrackingCharactersList = () => {
         bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
         headerClassName="[&_div]:ml-2"
         body={row => {
-          return <CharacterCard showShipName={false} showSystem={false} isOwn {...row.character} />;
+          return <CharacterCard showCorporationLogo showTicker isOwn {...row.character} />;
         }}
       />
     </DataTable>

assets/js/hooks/Mapper/components/mapRootContent/components/TrackingDialog/TrackingSettings.tsx

@@ -10,8 +10,8 @@ const renderValCharacterTemplate = (row: TrackingCharacter | undefined) => {
   }
 
   return (
-    <div className="py-1">
-      <CharacterCard compact showShipName={false} showSystem={false} isOwn {...row.character} />
+    <div className="py-1 w-full">
+      <CharacterCard compact isOwn {...row.character} />
     </div>
   );
 };
@@ -21,7 +21,11 @@ const renderCharacterTemplate = (row: TrackingCharacter | undefined) => {
     return <div className="h-[33px] flex items-center">Character is not selected</div>;
   }
 
-  return <CharacterCard showShipName={false} showSystem={false} isOwn {...row.character} />;
+  return (
+    <div className="w-full">
+      <CharacterCard isOwn {...row.character} />
+    </div>
+  );
 };
 
 export const TrackingSettings = () => {

assets/js/hooks/Mapper/components/mapRootContent/hooks/useCharacterActivityHandlers.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
-import type { ActivitySummary } from '@/hooks/Mapper/components/mapRootContent/components/CharacterActivity/CharacterActivity';
+import { ActivitySummary } from '@/hooks/Mapper/types';
 
 /**
  * Hook for character activity related handlers

assets/js/hooks/Mapper/components/mapWrapper/MapWrapper.tsx

@@ -1,5 +1,5 @@
 import { Map, MAP_ROOT_ID } from '@/hooks/Mapper/components/map/Map.tsx';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { OutCommand, OutCommandHandler, SolarSystemConnection } from '@/hooks/Mapper/types';
 import { MapRootData, useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { OnMapAddSystemCallback, OnMapSelectionChange } from '@/hooks/Mapper/components/map/map.types.ts';
@@ -10,7 +10,6 @@ import {
   SystemLinkSignatureDialog,
   SystemSettingsDialog,
 } from '@/hooks/Mapper/components/mapInterface/components';
-import classes from './MapWrapper.module.scss';
 import { Connections } from '@/hooks/Mapper/components/mapRootContent/components/Connections';
 import { ContextMenuSystemMultiple, useContextMenuSystemMultipleHandlers } from '../contexts/ContextMenuSystemMultiple';
 import { getSystemById } from '@/hooks/Mapper/helpers';
@@ -20,7 +19,6 @@ import { Node, useReactFlow, XYPosition } from 'reactflow';
 import { useCommandsSystems } from '@/hooks/Mapper/mapRootProvider/hooks/api';
 import { emitMapEvent, useMapEventListener } from '@/hooks/Mapper/events';
 
-import { STORED_INTERFACE_DEFAULT_VALUES } from '@/hooks/Mapper/mapRootProvider/MapRootProvider';
 import { useDeleteSystems } from '@/hooks/Mapper/components/contexts/hooks';
 import { useCommonMapEventProcessor } from '@/hooks/Mapper/components/mapWrapper/hooks/useCommonMapEventProcessor.ts';
 import {
@@ -28,33 +26,52 @@ import {
   SearchOnSubmitCallback,
 } from '@/hooks/Mapper/components/mapInterface/components/AddSystemDialog';
 import { useHotkey } from '../../hooks/useHotkey';
+import { PingType } from '@/hooks/Mapper/types/ping.ts';
+import { SystemPingDialog } from '@/hooks/Mapper/components/mapInterface/components/SystemPingDialog';
+import { MiniMapPlacement } from '@/hooks/Mapper/mapRootProvider/types.ts';
+import { MINIMAP_PLACEMENT_MAP } from '@/hooks/Mapper/constants.ts';
+import type { PanelPosition } from '@reactflow/core';
+import { MINI_MAP_PLACEMENT_OFFSETS } from './constants.ts';
 
 // TODO: INFO - this component needs for abstract work with Map instance
 export const MapWrapper = () => {
   const {
     update,
     outCommand,
-    data: { selectedConnections, selectedSystems, hubs, systems, linkSignatureToSystem, systemSignatures },
-    interfaceSettings: {
-      isShowMenu,
-      isShowMinimap = STORED_INTERFACE_DEFAULT_VALUES.isShowMinimap,
-      isShowKSpace,
-      isThickConnections,
-      isShowBackgroundPattern,
-      isShowUnsplashedSignatures,
-      isSoftBackground,
-      theme,
+    data: {
+      pings,
+      selectedConnections,
+      selectedSystems,
+      hubs,
+      userHubs,
+      systems,
+      linkSignatureToSystem,
+      systemSignatures,
     },
+    storedSettings: { interfaceSettings },
   } = useMapRootState();
+
+  const {
+    isShowMenu,
+    isShowKSpace,
+    isThickConnections,
+    isShowBackgroundPattern,
+    isShowUnsplashedSignatures,
+    isSoftBackground,
+    theme,
+    minimapPlacement,
+  } = interfaceSettings;
+
   const { deleteSystems } = useDeleteSystems();
   const { mapRef, runCommand } = useCommonMapEventProcessor();
   const { getNodes } = useReactFlow();
 
   const { updateLinkSignatureToSystem } = useCommandsSystems();
-  const { open, ...systemContextProps } = useContextMenuSystemHandlers({ systems, hubs, outCommand });
+  const { open, ...systemContextProps } = useContextMenuSystemHandlers({ systems, hubs, userHubs, outCommand });
   const { handleSystemMultipleContext, ...systemMultipleCtxProps } = useContextMenuSystemMultipleHandlers();
 
   const [openSettings, setOpenSettings] = useState<string | null>(null);
+  const [openPing, setOpenPing] = useState<{ type: PingType; solar_system_id: string } | null>(null);
   const [openCustomLabel, setOpenCustomLabel] = useState<string | null>(null);
   const [openAddSystem, setOpenAddSystem] = useState<XYPosition | null>(null);
   const [selectedConnection, setSelectedConnection] = useState<SolarSystemConnection | null>(null);
@@ -96,6 +113,8 @@ export const MapWrapper = () => {
     event => {
       switch (event.type) {
         case OutCommand.openSettings:
+          // TODO - need fix it
+          // @ts-ignore
           setOpenSettings(event.data.system_id);
           break;
         default:
@@ -107,28 +126,34 @@ export const MapWrapper = () => {
     [outCommand],
   );
 
-  const handleSystemContextMenu = useCallback((ev: any, systemId: string) => {
-    const { selectedSystems, systems } = ref.current;
-    if (selectedSystems.length > 1) {
-      const systemsInfo: Node[] = selectedSystems.map(x => ({ data: getSystemById(systems, x), id: x }) as Node);
+  const handleSystemContextMenu = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (ev: any, systemId: string) => {
+      const { selectedSystems, systems } = ref.current;
+      if (selectedSystems.length > 1) {
+        const systemsInfo: Node[] = selectedSystems.map(x => ({ data: getSystemById(systems, x), id: x }) as Node);
 
-      handleSystemMultipleContext(ev, systemsInfo);
-      return;
-    }
+        handleSystemMultipleContext(ev, systemsInfo);
+        return;
+      }
 
-    open(ev, systemId);
-  }, []);
+      open(ev, systemId);
+    },
+    [handleSystemMultipleContext, open],
+  );
 
   const handleConnectionDbClick = useCallback((e: SolarSystemConnection) => setSelectedConnection(e), []);
 
   const handleDeleteSelected = useCallback(() => {
     const restDel = getNodes()
       .filter(x => x.selected && !x.data.locked)
+      .filter(x => !pings.some(p => x.data.id === p.solar_system_id))
       .map(x => x.data.id);
+
     if (restDel.length > 0) {
       ref.current.deleteSystems(restDel);
     }
-  }, [getNodes]);
+  }, [getNodes, pings]);
 
   const onAddSystem: OnMapAddSystemCallback = useCallback(({ coordinates }) => {
     setOpenAddSystem(coordinates);
@@ -152,6 +177,27 @@ export const MapWrapper = () => {
     [openAddSystem, outCommand],
   );
 
+  const handleOpenSettings = useCallback(() => {
+    ref.current.systemContextProps.systemId && setOpenSettings(ref.current.systemContextProps.systemId);
+  }, []);
+
+  const handleTogglePing = useCallback(async (type: PingType, solar_system_id: string, hasPing: boolean) => {
+    if (hasPing) {
+      await outCommand({
+        type: OutCommand.cancelPing,
+        data: { type, solar_system_id: solar_system_id },
+      });
+      return;
+    }
+
+    setOpenPing({ type, solar_system_id });
+  }, []);
+
+  const handleCustomLabelDialog = useCallback(() => {
+    const { systemContextProps } = ref.current;
+    systemContextProps.systemId && setOpenCustomLabel(systemContextProps.systemId);
+  }, []);
+
   useHotkey(false, ['Delete'], (event: KeyboardEvent) => {
     const targetWindow = (event.target as HTMLHtmlElement)?.closest(`[data-window-id="${MAP_ROOT_ID}"]`);
 
@@ -173,6 +219,22 @@ export const MapWrapper = () => {
     outCommand({ type: OutCommand.loadSignatures, data: {} });
   }, [isShowUnsplashedSignatures, systems]);
 
+  const { showMinimap, minimapPosition, minimapClasses } = useMemo(() => {
+    const rawPlacement = minimapPlacement == null ? MiniMapPlacement.rightBottom : minimapPlacement;
+
+    if (rawPlacement === MiniMapPlacement.hide) {
+      return { minimapPosition: undefined, showMinimap: false, minimapClasses: '' };
+    }
+
+    const mmClasses = MINI_MAP_PLACEMENT_OFFSETS[rawPlacement];
+
+    return {
+      minimapPosition: MINIMAP_PLACEMENT_MAP[rawPlacement] as PanelPosition,
+      showMinimap: true,
+      minimapClasses: isShowMenu ? mmClasses.default : mmClasses.withLeftMenu,
+    };
+  }, [minimapPlacement, isShowMenu]);
+
   return (
     <>
       <Map
@@ -182,19 +244,29 @@ export const MapWrapper = () => {
         onConnectionInfoClick={handleConnectionDbClick}
         onSystemContextMenu={handleSystemContextMenu}
         onSelectionContextMenu={handleSystemMultipleContext}
-        minimapClasses={!isShowMenu ? classes.MiniMap : undefined}
-        isShowMinimap={isShowMinimap}
+        minimapClasses={minimapClasses}
+        isShowMinimap={showMinimap}
         showKSpaceBG={isShowKSpace}
         isThickConnections={isThickConnections}
         isShowBackgroundPattern={isShowBackgroundPattern}
         isSoftBackground={isSoftBackground}
         theme={theme}
+        pings={pings}
         onAddSystem={onAddSystem}
+        minimapPlacement={minimapPosition}
       />
 
       {openSettings != null && (
         <SystemSettingsDialog systemId={openSettings} visible setVisible={() => setOpenSettings(null)} />
       )}
+      {openPing != null && (
+        <SystemPingDialog
+          systemId={openPing.solar_system_id}
+          type={openPing.type}
+          visible
+          setVisible={() => setOpenPing(null)}
+        />
+      )}
 
       {openCustomLabel != null && (
         <SystemCustomLabelDialog systemId={openCustomLabel} visible setVisible={() => setOpenCustomLabel(null)} />
@@ -215,14 +287,11 @@ export const MapWrapper = () => {
       <ContextMenuSystem
         systems={systems}
         hubs={hubs}
+        userHubs={userHubs}
         {...systemContextProps}
-        onOpenSettings={() => {
-          systemContextProps.systemId && setOpenSettings(systemContextProps.systemId);
-        }}
-        onCustomLabelDialog={() => {
-          const { systemContextProps } = ref.current;
-          systemContextProps.systemId && setOpenCustomLabel(systemContextProps.systemId);
-        }}
+        onOpenSettings={handleOpenSettings}
+        onTogglePing={handleTogglePing}
+        onCustomLabelDialog={handleCustomLabelDialog}
       />
 
       <ContextMenuSystemMultiple {...systemMultipleCtxProps} />

assets/js/hooks/Mapper/components/mapWrapper/constants.ts

@@ -0,0 +1,8 @@
+import { MiniMapPlacement } from '@/hooks/Mapper/mapRootProvider/types.ts';
+
+export const MINI_MAP_PLACEMENT_OFFSETS = {
+  [MiniMapPlacement.rightTop]: { default: '!top-[48px]', withLeftMenu: '!top-[48px] !right-[58px]' },
+  [MiniMapPlacement.rightBottom]: { default: '!bottom-[0px]', withLeftMenu: '!bottom-[0px] !right-[58px]' },
+  [MiniMapPlacement.leftTop]: { default: '!top-[48px] !left-[56px]', withLeftMenu: '!top-[48px] !left-[56px]' },
+  [MiniMapPlacement.leftBottom]: { default: '!left-[56px] !bottom-[0px]', withLeftMenu: '!left-[56px] !bottom-[0px]' },
+};

assets/js/hooks/Mapper/components/mapWrapper/hooks/useCommonMapEventProcessor.ts

@@ -1,7 +1,8 @@
-import { MutableRefObject, useCallback, useEffect, useRef } from 'react';
-import { Command, Commands, MapHandlers } from '@/hooks/Mapper/types';
 import { MapEvent } from '@/hooks/Mapper/events';
+// import { useThrottle } from '@/hooks/Mapper/hooks';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { Command, Commands, MapHandlers } from '@/hooks/Mapper/types';
+import { MutableRefObject, useCallback, useEffect, useRef } from 'react';
 
 export const useCommonMapEventProcessor = () => {
   const mapRef = useRef<MapHandlers>() as MutableRefObject<MapHandlers>;
@@ -11,13 +12,14 @@ export const useCommonMapEventProcessor = () => {
 
   const refQueue = useRef<MapEvent<Command>[]>([]);
 
-  // const ref = useRef({})
-
   const runCommand = useCallback(({ name, data }: MapEvent<Command>) => {
     switch (name) {
       case Commands.addSystems:
       case Commands.removeSystems:
+        // case Commands.updateSystems:
         // case Commands.addConnections:
+        // case Commands.removeConnections:
+        // case Commands.updateConnection:
         refQueue.current.push({ name, data });
         return;
     }
@@ -26,9 +28,17 @@ export const useCommonMapEventProcessor = () => {
     mapRef.current?.command(name, data);
   }, []);
 
-  useEffect(() => {
-    refQueue.current.forEach(x => mapRef.current?.command(x.name, x.data));
+  const processQueue = useCallback(() => {
+    const commands = [...refQueue.current];
     refQueue.current = [];
+    commands.forEach(x => mapRef.current?.command(x.name, x.data));
+  }, []);
+
+  // const throttledProcessQueue = useThrottle(processQueue, 200);
+
+  useEffect(() => {
+    // throttledProcessQueue();
+    processQueue();
   }, [systems]);
 
   return {

assets/js/hooks/Mapper/components/topbar/Topbar.tsx

@@ -1,9 +1,9 @@
-import { Characters } from '../characters/Characters';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { useMemo } from 'react';
-import clsx from 'clsx';
 import { sortOnlineFunc } from '@/hooks/Mapper/components/hooks/useGetOwnOnlineCharacters.ts';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { WithChildren } from '@/hooks/Mapper/types/common.ts';
+import clsx from 'clsx';
+import { useMemo } from 'react';
+import { Characters } from '../characters/Characters';
 
 const Topbar = ({ children }: WithChildren) => {
   const {
@@ -24,7 +24,10 @@ const Topbar = ({ children }: WithChildren) => {
     >
       <span className="flex-1"></span>
       <span className="mr-2"></span>
-      <Characters data={charsToShow} />
+      <div className="flex gap-1 items-center">
+        <Characters data={charsToShow} />
+      </div>
+
       {children}
     </nav>
   );

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

@@ -1,20 +1,34 @@
-import { useCallback } from 'react';
-import clsx from 'clsx';
+import {
+  TooltipPosition,
+  WdEveEntityPortrait,
+  WdEveEntityPortraitSize,
+  WdEveEntityPortraitType,
+  WdTooltipWrapper,
+} from '@/hooks/Mapper/components/ui-kit';
 import { SystemView } from '@/hooks/Mapper/components/ui-kit/SystemView';
-import { CharacterTypeRaw, WithIsOwnCharacter } from '@/hooks/Mapper/types';
-import { Commands } from '@/hooks/Mapper/types/mapHandlers';
 import { emitMapEvent } from '@/hooks/Mapper/events';
-import { CharacterPortrait, CharacterPortraitSize } from '@/hooks/Mapper/components/ui-kit';
 import { isDocked } from '@/hooks/Mapper/helpers/isDocked.ts';
+import { CharacterTypeRaw, WithIsOwnCharacter } from '@/hooks/Mapper/types';
+import { WithClassName } from '@/hooks/Mapper/types/common.ts';
+import { Commands } from '@/hooks/Mapper/types/mapHandlers';
+import clsx from 'clsx';
+import { useCallback } from 'react';
 import classes from './CharacterCard.module.scss';
 
-type CharacterCardProps = {
+export type CharacterCardProps = {
   compact?: boolean;
   showSystem?: boolean;
+  showTicker?: boolean;
+  showShip?: boolean;
   showShipName?: boolean;
   useSystemsCache?: boolean;
-} & CharacterTypeRaw &
-  WithIsOwnCharacter;
+  showCorporationLogo?: boolean;
+  showAllyLogo?: boolean;
+  simpleMode?: boolean;
+} & WithIsOwnCharacter &
+  WithClassName;
+
+type CharacterCardInnerProps = CharacterCardProps & CharacterTypeRaw;
 
 const SHIP_NAME_RX = /u'|'/g;
 export const getShipName = (name: string) => {
@@ -25,13 +39,19 @@ export const getShipName = (name: string) => {
 };
 
 export const CharacterCard = ({
+  simpleMode,
   compact = false,
   isOwn,
   showSystem,
+  showShip,
   showShipName,
+  showCorporationLogo,
+  showAllyLogo,
+  showTicker,
   useSystemsCache,
+  className,
   ...char
-}: CharacterCardProps) => {
+}: CharacterCardInnerProps) => {
   const handleSelect = useCallback(() => {
     emitMapEvent({
       name: Commands.centerSystem,
@@ -44,28 +64,128 @@ export const CharacterCard = ({
   const shipType = char.ship?.ship_type_info?.name;
   const locationShown = showSystem && char.location?.solar_system_id;
 
-  if (compact) {
+  // INFO: Simple mode show only name and icon of ally/corp. By default it compact view
+  if (simpleMode) {
     return (
-      <div className={clsx('w-full text-xs box-border')} onClick={handleSelect}>
-        <div className="w-full flex items-center gap-1 relative">
-          <CharacterPortrait characterEveId={char.eve_id} size={CharacterPortraitSize.w18} />
-          {isDocked(char.location) && <span className={classes.Docked} />}
-          <div className="flex flex-grow overflow-hidden text-left">
-            <div className="overflow-hidden text-ellipsis whitespace-nowrap">
-              <span className={clsx(isOwn ? 'text-orange-400' : 'text-gray-200')}>{char.name}</span>{' '}
-              <span className="text-gray-400">
-                {!locationShown && showShipName && shipNameText ? `- ${shipNameText}` : `[${tickerText}]`}
+      <div className={clsx('text-xs box-border', className)} onClick={handleSelect}>
+        <div className="flex items-center gap-1 relative">
+          <WdEveEntityPortrait eveId={char.eve_id} size={WdEveEntityPortraitSize.w18} />
+
+          {!char.alliance_id && (
+            <WdTooltipWrapper position={TooltipPosition.top} content={char.corporation_name}>
+              <WdEveEntityPortrait
+                type={WdEveEntityPortraitType.corporation}
+                eveId={char.corporation_id?.toString()}
+                size={WdEveEntityPortraitSize.w18}
+              />
+            </WdTooltipWrapper>
+          )}
+
+          {char.alliance_id && (
+            <WdTooltipWrapper position={TooltipPosition.top} content={char.alliance_name}>
+              <WdEveEntityPortrait
+                type={WdEveEntityPortraitType.alliance}
+                eveId={char.alliance_id?.toString()}
+                size={WdEveEntityPortraitSize.w18}
+              />
+            </WdTooltipWrapper>
+          )}
+
+          <div className="flex overflow-hidden text-left">
+            <div className="flex">
+              <span
+                className={clsx(
+                  'overflow-hidden text-ellipsis whitespace-nowrap',
+                  isOwn ? 'text-orange-400' : 'text-gray-200',
+                )}
+                title={char.name}
+              >
+                {char.name}
               </span>
+              {showTicker && <span className="flex-shrink-0 text-gray-400 ml-1">[{tickerText}]</span>}
             </div>
           </div>
-          {shipType && (
-            <div
-              className="text-gray-300 overflow-hidden text-ellipsis whitespace-nowrap flex-shrink-0"
-              style={{ maxWidth: '120px' }}
-              title={shipType}
-            >
-              {shipType}
+        </div>
+      </div>
+    );
+  }
+
+  if (compact) {
+    return (
+      <div className={clsx('text-xs box-border w-full', className)} onClick={handleSelect}>
+        <div className="w-full flex items-center gap-1 relative">
+          <WdEveEntityPortrait eveId={char.eve_id} size={WdEveEntityPortraitSize.w18} />
+
+          {showCorporationLogo && (
+            <WdTooltipWrapper position={TooltipPosition.top} content={char.corporation_name}>
+              <WdEveEntityPortrait
+                type={WdEveEntityPortraitType.corporation}
+                eveId={char.corporation_id?.toString()}
+                size={WdEveEntityPortraitSize.w18}
+              />
+            </WdTooltipWrapper>
+          )}
+
+          {showAllyLogo && char.alliance_id && (
+            <WdTooltipWrapper position={TooltipPosition.top} content={char.alliance_name}>
+              <WdEveEntityPortrait
+                type={WdEveEntityPortraitType.alliance}
+                eveId={char.alliance_id?.toString()}
+                size={WdEveEntityPortraitSize.w18}
+              />
+            </WdTooltipWrapper>
+          )}
+
+          {isDocked(char.location) && <span className={classes.Docked} />}
+          <div className="flex flex-grow-[2] overflow-hidden text-left w-[50px]">
+            <div className="flex min-w-0">
+              <span
+                className={clsx(
+                  'overflow-hidden text-ellipsis whitespace-nowrap',
+                  isOwn ? 'text-orange-400' : 'text-gray-200',
+                )}
+                title={char.name}
+              >
+                {char.name}
+              </span>
+              {showTicker && <span className="flex-shrink-0 text-gray-400 ml-1">[{tickerText}]</span>}
             </div>
+          </div>
+
+          {showShip && shipType && (
+            <>
+              {!showShipName && (
+                <div
+                  className="text-gray-300 overflow-hidden text-ellipsis whitespace-nowrap flex-shrink-0"
+                  style={{ maxWidth: '120px' }}
+                  title={shipType}
+                >
+                  {shipType}
+                </div>
+              )}
+              {showShipName && (
+                <div className="flex flex-grow-[1] justify-end w-[50px]">
+                  <div className="min-w-0">
+                    <div
+                      className="text-gray-300 overflow-hidden text-ellipsis whitespace-nowrap flex-shrink-0"
+                      style={{ maxWidth: '120px' }}
+                      title={shipNameText}
+                    >
+                      {shipNameText}
+                    </div>
+                  </div>
+                </div>
+              )}
+              {char.ship && (
+                <WdTooltipWrapper position={TooltipPosition.top} content={char.ship.ship_type_info?.name}>
+                  <WdEveEntityPortrait
+                    type={WdEveEntityPortraitType.ship}
+                    eveId={char.ship.ship_type_id?.toString()}
+                    size={WdEveEntityPortraitSize.w18}
+                  />
+                </WdTooltipWrapper>
+              )}
+            </>
           )}
         </div>
       </div>
@@ -75,11 +195,41 @@ export const CharacterCard = ({
   return (
     <div className={clsx('w-full text-xs box-border')} onClick={handleSelect}>
       <div className="w-full flex items-center gap-2">
-        <CharacterPortrait characterEveId={char.eve_id} size={CharacterPortraitSize.w33} />
-        <div className="flex flex-col flex-grow overflow-hidden">
-          <div className="overflow-hidden text-ellipsis whitespace-nowrap">
-            <span className={clsx(isOwn ? 'text-orange-400' : 'text-gray-200')}>{char.name}</span>{' '}
-            <span className="text-gray-400">[{tickerText}]</span>
+        <div className="flex items-center gap-1">
+          <WdEveEntityPortrait eveId={char.eve_id} size={WdEveEntityPortraitSize.w33} />
+
+          {showCorporationLogo && (
+            <WdTooltipWrapper position={TooltipPosition.top} content={char.corporation_name}>
+              <WdEveEntityPortrait
+                type={WdEveEntityPortraitType.corporation}
+                eveId={char.corporation_id?.toString()}
+                size={WdEveEntityPortraitSize.w33}
+              />
+            </WdTooltipWrapper>
+          )}
+
+          {showAllyLogo && char.alliance_id && (
+            <WdTooltipWrapper position={TooltipPosition.top} content={char.alliance_name}>
+              <WdEveEntityPortrait
+                type={WdEveEntityPortraitType.alliance}
+                eveId={char.alliance_id?.toString()}
+                size={WdEveEntityPortraitSize.w33}
+              />
+            </WdTooltipWrapper>
+          )}
+        </div>
+
+        <div className="flex flex-col flex-grow overflow-hidden  w-[50px]">
+          <div className="flex min-w-0">
+            <span
+              className={clsx(
+                'overflow-hidden text-ellipsis whitespace-nowrap',
+                isOwn ? 'text-orange-400' : 'text-gray-200',
+              )}
+            >
+              {char.name}
+            </span>
+            {showTicker && <span className="flex-shrink-0 text-gray-400 ml-1">[{tickerText}]</span>}
           </div>
           {locationShown ? (
             <div className="text-gray-300 text-xs overflow-hidden text-ellipsis whitespace-nowrap">
@@ -96,16 +246,31 @@ export const CharacterCard = ({
             )
           )}
         </div>
-        {shipType && (
-          <div className="flex-shrink-0 self-start">
-            <div
-              className="text-gray-300 overflow-hidden text-ellipsis whitespace-nowrap"
-              style={{ maxWidth: '200px' }}
-              title={shipType}
-            >
-              {shipType}
+        {showShip && shipType && (
+          <>
+            <div className="flex flex-col flex-shrink-0 items-end self-start">
+              <div
+                className="text-gray-300 overflow-hidden text-ellipsis whitespace-nowrap max-w-[200px]"
+                title={shipType}
+              >
+                {shipType}
+              </div>
+              <div
+                className="flex justify-end text-stone-500 overflow-hidden text-ellipsis whitespace-nowrap max-w-[200px]"
+                title={shipNameText}
+              >
+                {shipNameText}
+              </div>
             </div>
-          </div>
+
+            {char.ship && (
+              <WdEveEntityPortrait
+                type={WdEveEntityPortraitType.ship}
+                eveId={char.ship.ship_type_id?.toString()}
+                size={WdEveEntityPortraitSize.w33}
+              />
+            )}
+          </>
         )}
       </div>
     </div>

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

@@ -0,0 +1,23 @@
+import { CharacterCard, CharacterCardProps } from '@/hooks/Mapper/components/ui-kit/CharacterCard';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useMemo } from 'react';
+
+type CharacterCardByIdProps = {
+  characterId: string;
+} & Omit<CharacterCardProps, 'isOwn'>;
+
+export const CharacterCardById = ({ characterId, ...props }: CharacterCardByIdProps) => {
+  const {
+    data: { characters },
+  } = useMapRootState();
+
+  const charInfo = useMemo(() => {
+    return characters.find(x => x.eve_id === characterId);
+  }, [characterId, characters]);
+
+  if (!charInfo) {
+    return 'No character found.';
+  }
+
+  return <CharacterCard isOwn={false} {...charInfo} {...props} />;
+};

assets/js/hooks/Mapper/components/ui-kit/CharacterCardById/index.ts

@@ -0,0 +1 @@
+export * from './CharacterCardById';

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

@@ -1,47 +0,0 @@
-import clsx from 'clsx';
-import { WithClassName } from '@/hooks/Mapper/types/common.ts';
-
-export enum CharacterPortraitSize {
-  default,
-  w18,
-  w33,
-}
-
-// TODO IF YOU NEED ANOTHER ONE SIZE PLEASE ADD IT HERE and IN CharacterPortraitSize
-const getSize = (size: CharacterPortraitSize) => {
-  switch (size) {
-    case CharacterPortraitSize.w18:
-      return 'min-w-[18px] min-h-[18px] w-[18px] h-[18px]';
-    case CharacterPortraitSize.w33:
-      return 'min-w-[33px] min-h-[33px] w-[33px] h-[33px]';
-    default:
-      return '';
-  }
-};
-
-export type CharacterPortraitProps = {
-  characterEveId: string | undefined;
-  size?: CharacterPortraitSize;
-} & WithClassName;
-
-export const CharacterPortrait = ({
-  characterEveId,
-  size = CharacterPortraitSize.default,
-  className,
-}: CharacterPortraitProps) => {
-  if (characterEveId == null) {
-    return null;
-  }
-
-  return (
-    <span
-      className={clsx(
-        getSize(size),
-        'flex transition-[border-color,opacity] duration-250 border border-gray-800 bg-transparent rounded-none',
-        'wd-bg-default',
-        className,
-      )}
-      style={{ backgroundImage: `url(https://images.evetech.net/characters/${characterEveId}/portrait)` }}
-    />
-  );
-};

assets/js/hooks/Mapper/components/ui-kit/CharacterPortrait/index.ts

@@ -1 +0,0 @@
-export * from './CharacterPortrait';

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ProgressSpinner } from 'primereact/progressspinner';
+
+type LoadingWrapperProps = {
+  loading?: boolean;
+  children: React.ReactNode;
+};
+
+export const LoadingWrapper: React.FC<LoadingWrapperProps> = ({ loading, children }) => {
+  return (
+    <div className="relative w-full h-full">
+      {children}
+      {loading && (
+        <div className="absolute inset-0 bg-stone-950/50 flex items-center justify-center z-10">
+          <ProgressSpinner
+            style={{ width: '50px', height: '50px' }}
+            strokeWidth="2"
+            fill="transparent"
+            animationDuration="2s"
+          />
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,11 @@
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import remarkBreaks from 'remark-breaks';
+
+const REMARK_PLUGINS = [remarkGfm, remarkBreaks];
+
+type MarkdownTextViewerProps = { children: string };
+
+export const MarkdownTextViewer = ({ children }: MarkdownTextViewerProps) => {
+  return <Markdown remarkPlugins={REMARK_PLUGINS}>{children}</Markdown>;
+};

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

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { WithChildren } from '@/hooks/Mapper/types/common.ts';
+import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
+import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit/WdTooltip';
+import clsx from 'clsx';
+
+type MenuItemWithInfoProps = { infoTitle: ReactNode; infoClass?: string } & WithChildren;
+export const MenuItemWithInfo = ({ children, infoClass, infoTitle }: MenuItemWithInfoProps) => {
+  return (
+    <div className="flex justify-between w-full h-full items-center">
+      {children}
+      <WdTooltipWrapper
+        content={infoTitle}
+        position={TooltipPosition.top}
+        className="!opacity-100 !pointer-events-auto"
+      >
+        <div className={clsx('pi text-orange-400', infoClass)} />
+      </WdTooltipWrapper>
+    </div>
+  );
+};

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import clsx from 'clsx';
+
+export type SvgIconProps = React.SVGAttributes<SVGElement> & {
+  width?: number;
+  height?: number;
+  className?: string;
+};
+
+export const SvgIconWrapper = ({
+  width = 24,
+  height = 24,
+  children,
+  className,
+  ...props
+}: SvgIconProps & { children: React.ReactNode }) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={clsx('w-[19px] h-[19px]', className)}
+      {...props}
+    >
+      {children}
+    </svg>
+  );
+};

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

@@ -1,5 +1,4 @@
-import { WithClassName } from '@/hooks/Mapper/types/common.ts';
-import { SystemViewStandalone } from '@/hooks/Mapper/components/ui-kit';
+import { SystemViewStandalone, SystemViewStandaloneProps } from '@/hooks/Mapper/components/ui-kit';
 import { useLoadSystemStatic } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic.ts';
 import { useMemo } from 'react';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
@@ -8,18 +7,11 @@ import { SolarSystemStaticInfoRaw } from '@/hooks/Mapper/types';
 export type SystemViewProps = {
   systemId: string;
   systemInfo?: SolarSystemStaticInfoRaw;
-  hideRegion?: boolean;
   useSystemsCache?: boolean;
   showCustomName?: boolean;
-} & WithClassName;
+} & Pick<SystemViewStandaloneProps, 'className' | 'compact' | 'hideRegion'>;
 
-export const SystemView = ({
-  systemId,
-  systemInfo: customSystemInfo,
-  hideRegion,
-  className,
-  showCustomName,
-}: SystemViewProps) => {
+export const SystemView = ({ systemId, systemInfo: customSystemInfo, showCustomName, ...rest }: SystemViewProps) => {
   const memSystems = useMemo(() => [systemId], [systemId]);
   const { systems, loading } = useLoadSystemStatic({ systems: memSystems });
 
@@ -47,13 +39,8 @@ export const SystemView = ({
   }
 
   if (!mapSystemInfo) {
-    return <SystemViewStandalone hideRegion={hideRegion} className={className} {...systemInfo} />;
+    return <SystemViewStandalone {...rest} {...systemInfo} />;
   }
 
-  return (
-    <div>
-      <SystemViewStandalone hideRegion={hideRegion} className={className} {...systemInfo} />
-      <span>{systemInfo.solar_system_name}</span>
-    </div>
-  );
+  return <SystemViewStandalone customName={mapSystemInfo.name ?? undefined} {...rest} {...systemInfo} />;
 };

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

@@ -37,8 +37,8 @@ export const SystemViewStandalone = ({
   ...props
 }: SystemViewStandaloneProps) => {
   const classTitleColor = getSystemClassStyles({ systemClass: system_class, security });
-
   const isWH = isWormholeSpace(system_class);
+  1;
 
   const handleClick = useCallback(
     (e: MouseEvent) => {

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

@@ -1,10 +1,11 @@
 import { useEffect, useState, useRef } from 'react';
+import { WithClassName } from '@/hooks/Mapper/types/common.ts';
 
 interface TimeAgoProps {
   timestamp: string; // Теперь тип string, так как приходит ISO 8601 строка
 }
 
-export const TimeAgo = ({ timestamp }: TimeAgoProps) => {
+export const TimeAgo = ({ timestamp, className }: TimeAgoProps & WithClassName) => {
   const [timeAgo, setTimeAgo] = useState<string>('');
   const timeoutIdRef = useRef<number | null>(null);
 
@@ -64,5 +65,5 @@ export const TimeAgo = ({ timestamp }: TimeAgoProps) => {
     return `${days} days ago`;
   };
 
-  return <span>{timeAgo}</span>;
+  return <span className={className}>{timeAgo}</span>;
 };

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

@@ -0,0 +1,71 @@
+import clsx from 'clsx';
+import { WithClassName } from '@/hooks/Mapper/types/common.ts';
+
+export enum WdEveEntityPortraitType {
+  character,
+  corporation,
+  alliance,
+  ship,
+}
+
+export enum WdEveEntityPortraitSize {
+  default,
+  w18,
+  w33,
+}
+
+export const getLogo = (type: WdEveEntityPortraitType, eveId: string | number) => {
+  switch (type) {
+    case WdEveEntityPortraitType.alliance:
+      return `url(https://images.evetech.net/alliances/${eveId}/logo?size=64)`;
+    case WdEveEntityPortraitType.corporation:
+      return `url(https://images.evetech.net/corporations/${eveId}/logo?size=64)`;
+    case WdEveEntityPortraitType.character:
+      return `url(https://images.evetech.net/characters/${eveId}/portrait)`;
+    case WdEveEntityPortraitType.ship:
+      return `url(https://images.evetech.net/types/${eveId}/icon)`;
+  }
+
+  return '';
+};
+
+// TODO IF YOU NEED ANOTHER ONE SIZE PLEASE ADD IT HERE and IN WdEveEntityPortraitSize
+const getSize = (size: WdEveEntityPortraitSize) => {
+  switch (size) {
+    case WdEveEntityPortraitSize.w18:
+      return 'min-w-[18px] min-h-[18px] w-[18px] h-[18px]';
+    case WdEveEntityPortraitSize.w33:
+      return 'min-w-[33px] min-h-[33px] w-[33px] h-[33px]';
+    default:
+      return '';
+  }
+};
+
+export type WdEveEntityPortraitProps = {
+  eveId: string | undefined;
+  type?: WdEveEntityPortraitType;
+  size?: WdEveEntityPortraitSize;
+} & WithClassName;
+
+export const WdEveEntityPortrait = ({
+  eveId,
+  size = WdEveEntityPortraitSize.default,
+  type = WdEveEntityPortraitType.character,
+  className,
+}: WdEveEntityPortraitProps) => {
+  if (eveId == null) {
+    return null;
+  }
+
+  return (
+    <span
+      className={clsx(
+        getSize(size),
+        'flex transition-[border-color,opacity] duration-250 border border-gray-800 bg-transparent rounded-none',
+        'wd-bg-default',
+        className,
+      )}
+      style={{ backgroundImage: getLogo(type, eveId) }}
+    />
+  );
+};

assets/js/hooks/Mapper/components/ui-kit/WdEveEntityPortrait/index.ts

@@ -0,0 +1 @@
+export * from './WdEveEntityPortrait.tsx';

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

@@ -11,12 +11,14 @@ export enum WdImageSize {
   large = 'large',
 }
 
+export type WdImgButtonTooltip = Pick<WdTooltipWrapperProps, 'content' | 'position' | 'offset' | 'className'>;
+
 export type WdImgButtonProps = {
   onClick?(e: MouseEvent): void;
   source?: string;
   width?: number;
   height?: number;
-  tooltip?: Pick<WdTooltipWrapperProps, 'content' | 'position' | 'offset' | 'className'>;
+  tooltip?: WdImgButtonTooltip;
   textSize?: WdImageSize;
 } & WithClassName &
   HTMLProps<HTMLDivElement>;

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

@@ -0,0 +1,16 @@
+import { WithChildren } from '@/hooks/Mapper/types/common.ts';
+import clsx from 'clsx';
+
+type WdMenuItemProps = { icon?: string; disabled?: boolean } & WithChildren;
+export const WdMenuItem = ({ children, icon, disabled }: WdMenuItemProps) => {
+  return (
+    <a
+      className={clsx('flex gap-[6px] w-full h-full items-center px-[12px] !py-0 ml-[-2px]', 'p-menuitem-link', {
+        'p-disabled': disabled,
+      })}
+    >
+      {icon && <div className={clsx('min-w-[20px]', icon)}></div>}
+      <div className="w-full">{children}</div>
+    </a>
+  );
+};