chore: release version v1.71.3

fix(Map): Fix incorrect placing of labels

.env.example

@@ -8,4 +8,5 @@ export GIT_SHA="1111"
 export WANDERER_INVITES="false"
 export WANDERER_PUBLIC_API_DISABLED="false"
 export WANDERER_CHARACTER_API_DISABLED="false"
-export WANDERER_ZKILL_PRELOAD_DISABLED="false"
+export WANDERER_KILLS_SERVICE_ENABLED="true"
+export WANDERER_KILLS_BASE_URL="ws://host.docker.internal:4004"

.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:

Makefile

@@ -1,4 +1,4 @@
-.PHONY: deploy install cleanup start yarn migrate format test coverage versions
+.PHONY: deploy install cleanup start yarn migrate format test coverage versions standalone-tests
 
 ROOT_DIR:=$(shell dirname $(realpath $(firstword $(MAKEFILE_LIST))))
 SHELL := /bin/bash
@@ -35,6 +35,11 @@ test t:
 coverage cover co:
 	mix test --cover
 
+unit-tests ut:
+	@echo "Running unit tests..."
+	@find test/unit -name "*.exs" -exec elixir {} \;
+	@echo "All unit tests completed."
+
 versions v:
 	@echo "Tool Versions"
 	@cat .tool-versions

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/css/app.css

@@ -112,19 +112,19 @@ body > div:first-of-type {
 }
 
 .wd-characters-icons {
-  display: flex;
-  transition:
-    border-color 250ms,
-    opacity 250ms;
-  width: 35px;
-  height: 35px;
-  border-radius: 50%;
-  border-width: 2px;
-  border-style: solid;
-  border-color: #5a5a5a;
-  background-color: rgba(0, 0, 0, 0);
-  cursor: pointer;
-  opacity: 0.6;
+  /*display: flex;*/
+  /*transition:*/
+  /*  border-color 250ms,*/
+  /*  opacity 250ms;*/
+  /*width: 35px;*/
+  /*height: 35px;*/
+  /*border-radius: 50%;*/
+  /*border-width: 2px;*/
+  /*border-style: solid;*/
+  /*border-color: #5a5a5a;*/
+  /*background-color: rgba(0, 0, 0, 0);*/
+  /*cursor: pointer;*/
+  /*opacity: 0.6;*/
 }
 
 .wd-bg-default {

assets/js/hooks/Mapper/MapRoot.tsx

@@ -1,14 +1,14 @@
-import { ErrorBoundary } from 'react-error-boundary';
 import { PrimeReactProvider } from 'primereact/api';
+import { ErrorBoundary } from 'react-error-boundary';
 
-import { ReactFlowProvider } from 'reactflow';
 import { MapHandlers } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { ErrorInfo, useCallback, useEffect, useRef } from 'react';
+import { ReactFlowProvider } from 'reactflow';
 import { useMapperHandlers } from './useMapperHandlers';
 
-import './common-styles/main.scss';
-import { MapRootProvider } from '@/hooks/Mapper/mapRootProvider';
 import { MapRootContent } from '@/hooks/Mapper/components/mapRootContent/MapRootContent.tsx';
+import { MapRootProvider } from '@/hooks/Mapper/mapRootProvider';
+import './common-styles/main.scss';
 
 const ErrorFallback = () => {
   return <div className="!z-100 absolute w-screen h-screen bg-transparent"></div>;
@@ -20,7 +20,7 @@ export default function MapRoot({ hooks }) {
 
   const mapperHandlerRefs = useRef([providerRef]);
 
-  const { handleCommand, handleMapEvent, handleMapEvents } = useMapperHandlers(mapperHandlerRefs.current, hooksRef);
+  const { handleCommand, handleMapEvent } = useMapperHandlers(mapperHandlerRefs.current, hooksRef);
 
   const logError = useCallback((error: Error, info: ErrorInfo) => {
     if (!hooksRef.current) {
@@ -35,7 +35,6 @@ export default function MapRoot({ hooks }) {
     }
 
     hooksRef.current.handleEvent('map_event', handleMapEvent);
-    hooksRef.current.handleEvent('map_events', handleMapEvents);
   }, []);
 
   return (

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 {
@@ -143,3 +148,67 @@
     background: #966d3d;
   }
 }
+
+.p-datatable-wrapper {
+  height: 100%;
+  & {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
+  }
+
+  &::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.5);
+    border-radius: 5px;
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(255, 255, 255, 0.7);
+  }
+
+  &::-webkit-scrollbar-button {
+    display: none;
+    height: 0;
+    width: 0;
+  }
+}
+
+.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/common-styles/prime-fixes/fix-dialog.scss

@@ -1,11 +1,8 @@
-/* Основной класс диалога */
 body .p-dialog {
   display: flex;
   flex-direction: column;
-  //position: absolute;
   top: 0;
   left: 0;
-  //visibility: hidden;
   overflow: hidden;
   border-radius: 2px;
   box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
@@ -29,12 +26,10 @@ body .p-dialog {
   }
 }
 
-/* Стиль видимого диалога */
 .p-dialog-visible {
   visibility: visible;
 }
 
-/* Анимации */
 .p-dialog-enter {
   opacity: 0;
 }
@@ -53,31 +48,27 @@ body .p-dialog {
   transition: opacity 0.3s;
 }
 
-/* Заголовок диалога */
 .p-dialog-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1rem;
   background: #f4f4f4;
-  //border-bottom: 1px solid #ddd;
+  height: 40px;
 }
 
-/* Содержимое диалога */
 .p-dialog-content {
   padding: 0.5rem;
   overflow-y: auto;
   flex: 1;
 }
 
-/* Подвал диалога */
 .p-dialog-footer {
   padding: 1rem;
   border-top: 1px solid #ddd;
   background: #f4f4f4;
 }
 
-/* Кнопка закрытия диалога */
 .p-dialog-header-close {
   display: flex;
   align-items: center;
@@ -93,3 +84,12 @@ body .p-dialog {
 .p-dialog-header-close .pi {
   font-size: 1.25rem;
 }
+
+.p-dialog {
+  .p-dialog-title {
+    font-size: 1rem !important;
+  }
+  .p-dialog-header-icons {
+    align-self: initial !important;
+  }
+}

assets/js/hooks/Mapper/common-styles/prime-fixes/fix-tabs.scss

@@ -0,0 +1,77 @@
+.vertical-tabs-container {
+  display: flex;
+  width: 100%;
+  min-height: 300px;
+
+  .p-tabview {
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .p-tabview-panels {
+    padding: 6px 1rem;
+    flex-grow: 1;
+    height: 100%;
+  }
+
+  .p-tabview-nav-container {
+    border-right: none;
+    height: 100%;
+  }
+
+  .p-tabview-nav {
+    flex-direction: column;
+    width: 150px;
+    min-height: 100%;
+    border: none;
+
+    li {
+      width: 100%;
+      border-right: 4px solid var(--surface-hover);
+      background-color: var(--surface-card);
+
+      transition: background-color 200ms, border-right-color 200ms;
+
+      &:hover {
+        background-color: var(--surface-hover);
+        border-right: 4px solid var(--surface-100);
+      }
+
+      .p-tabview-nav-link {
+        transition: color 200ms;
+
+        justify-content: flex-end;
+        padding: 10px;
+        //background-color: var(--surface-card);
+        background-color: initial;
+        border: none;
+        color: var(--gray-400);
+
+        border-radius: initial;
+        font-weight: 400;
+        margin: 0;
+      }
+
+      &.p-tabview-selected {
+        background-color: var(--surface-50);
+        border-right: 4px solid var(--primary-color);
+
+        .p-tabview-nav-link {
+          font-weight: 600;
+          color: var(--primary-color);
+        }
+
+        &:hover {
+          //background-color: var(--surface-hover);
+          border-right: 4px solid var(--primary-color);
+        }
+
+      }
+    }
+  }
+
+  .p-tabview-panel {
+    flex-grow: 1;
+  }
+}

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

@@ -1,5 +1,6 @@
 @import "fix-dialog";
 @import "fix-popup";
+@import "fix-tabs";
 //@import "fix-input";
 
 //@import "theme";

assets/js/hooks/Mapper/components/characters/Characters.module.scss

@@ -0,0 +1,18 @@
+.Docked {
+  content: " ";
+  display: inline-block;
+  width: 11px;
+  height: 11px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  position: absolute;
+  z-index: 1;
+  overflow: hidden;
+  border-radius: 1px;
+
+  background-image: url(/images/citadelLarge.png);
+  left: 2px;
+  top: 22px;
+  transform: rotateZ(0deg);
+}

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

@@ -1,17 +1,37 @@
-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 { 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[];
+}
 
-const Characters = ({ data }: { data: CharacterTypeRaw[] }) => {
+export const Characters = ({ data }: CharactersProps) => {
   const [parent] = useAutoAnimate();
 
-  const handleSelect = useCallback((character: CharacterTypeRaw) => {
+  const {
+    outCommand,
+    data: { mainCharacterEveId, followingCharacterEveId },
+  } = useMapRootState();
+
+  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(),
     });
   }, []);
 
@@ -21,21 +41,71 @@ const Characters = ({ data }: { data: CharacterTypeRaw[] }) => {
       className="flex flex-col items-center justify-center"
       onClick={() => handleSelect(character)}
     >
-      <div className="tooltip tooltip-bottom" title={character.name}>
-        <a
-          className={clsx('wd-characters-icons wd-bg-default', { ['character-online']: character.online })}
+      <div
+        className={clsx(
+          'overflow-hidden relative',
+          'flex w-[35px] h-[35px] rounded-[4px] border-[1px] border-solid bg-transparent cursor-pointer',
+          'transition-colors duration-250 hover:bg-stone-300/90',
+          {
+            ['border-stone-800/90']: !character.online,
+            ['border-lime-600/70']: character.online,
+          },
+        )}
+        title={character.tracking_paused ? `${character.name} - Tracking Paused (click to resume)` : character.name}
+      >
+        {character.tracking_paused && (
+          <>
+            <span
+              className={clsx(
+                'absolute flex flex-col  p-[2px]  top-[0px] left-[0px] w-[35px] h-[35px]',
+                'text-yellow-500 text-[9px] z-10 bg-gray-800/40',
+                'pi',
+                PrimeIcons.PAUSE,
+              )}
+            />
+          </>
+        )}
+        {mainCharacterEveId === character.eve_id && (
+          <span
+            className={clsx(
+              'absolute top-[2px] left-[22px] w-[9px] h-[9px]',
+              'text-yellow-500 text-[9px] rounded-[1px] z-10',
+              'pi',
+              PrimeIcons.STAR_FILL,
+            )}
+          />
+        )}
+
+        {followingCharacterEveId === character.eve_id && (
+          <span
+            className={clsx(
+              'absolute top-[23px] left-[22px] w-[10px] h-[10px]',
+              'text-sky-300 text-[10px] rounded-[1px] z-10',
+              'pi pi-angle-double-right',
+            )}
+          />
+        )}
+        {isDocked(character.location) && <div className={classes.Docked} />}
+        <div
+          className={clsx(
+            'flex w-full h-full bg-transparent cursor-pointer',
+            'bg-center bg-no-repeat bg-[length:100%]',
+            'transition-opacity',
+            'shadow-[inset_0_1px_6px_1px_#000000]',
+            {
+              ['opacity-60']: !character.online,
+              ['opacity-100']: character.online,
+            },
+          )}
           style={{ backgroundImage: `url(https://images.evetech.net/characters/${character.eve_id}/portrait)` }}
-        ></a>
+        ></div>
       </div>
     </li>
   ));
 
   return (
-    <ul className="flex characters" id="characters" ref={parent}>
+    <ul className="flex gap-1 characters" id="characters" ref={parent}>
       {items}
     </ul>
   );
 };
-
-// eslint-disable-next-line react/display-name
-export default Characters;

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';
@@ -9,11 +14,20 @@ import { FastSystemActions } from '@/hooks/Mapper/components/contexts/components
 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,
@@ -22,6 +36,7 @@ export const useContextMenuSystemItems = ({
   onWaypointSet,
   systemId,
   hubs,
+  userHubs,
   systems,
 }: Omit<ContextMenuSystemProps, 'contextMenuRef'>) => {
   const getTags = useTagMenu(systems, systemId, onSystemTag);
@@ -29,9 +44,32 @@ 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 [];
@@ -44,9 +82,9 @@ export const useContextMenuSystemItems = ({
           return (
             <FastSystemActions
               systemId={systemId}
-              systemName={system.system_static_info.solar_system_name}
-              regionName={system.system_static_info.region_name}
-              isWH={isWormholeSpace(system.system_static_info.system_class)}
+              systemName={systemStaticInfo.solar_system_name}
+              regionName={systemStaticInfo.region_name}
+              isWH={isWormholeSpace(systemStaticInfo.system_class)}
               showEdit
               onOpenSettings={onOpenSettings}
             />
@@ -57,52 +95,106 @@ export const useContextMenuSystemItems = ({
       getTags(),
       getStatus(),
       ...getLabels(),
-      ...getWaypointMenu(systemId, system.system_static_info.system_class),
+      ...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/contexts/hooks/useJumpPlannerMenu/useJumpPlannerMenu.tsx

@@ -4,8 +4,8 @@ import { useCallback } from 'react';
 import { isPossibleSpace } from '@/hooks/Mapper/components/map/helpers/isKnownSpace.ts';
 import { Route } from '@/hooks/Mapper/types/routes.ts';
 import { SolarSystemRawType, SolarSystemStaticInfoRaw } from '@/hooks/Mapper/types';
-import { getSystemById } from '@/hooks/Mapper/helpers';
 import { SOLAR_SYSTEM_CLASS_IDS } from '@/hooks/Mapper/components/map/constants.ts';
+import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
 
 const imperialSpace = [SOLAR_SYSTEM_CLASS_IDS.hs, SOLAR_SYSTEM_CLASS_IDS.ls, SOLAR_SYSTEM_CLASS_IDS.ns];
 const criminalSpace = [SOLAR_SYSTEM_CLASS_IDS.ls, SOLAR_SYSTEM_CLASS_IDS.ns];
@@ -47,7 +47,7 @@ export const useJumpPlannerMenu = (
         return [];
       }
 
-      const origin = getSystemById(systems, systemIdFrom)?.system_static_info;
+      const origin = getSystemStaticInfo(systemIdFrom);
 
       if (!origin) {
         return [];

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

@@ -1,7 +1,7 @@
+import { getSystemById } from '@/hooks/Mapper/helpers';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useMemo } from 'react';
-import { getSystemById } from '@/hooks/Mapper/helpers';
-import { useLoadSystemStatic } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic.ts';
+import { getSystemStaticInfo } from '../../mapRootProvider/hooks/useLoadSystemStatic';
 
 interface UseSystemInfoProps {
   systemId: string;
@@ -12,14 +12,12 @@ export const useSystemInfo = ({ systemId }: UseSystemInfoProps) => {
     data: { systems, connections },
   } = useMapRootState();
 
-  const { systems: systemStatics } = useLoadSystemStatic({ systems: [systemId] });
-
   return useMemo(() => {
-    const staticInfo = systemStatics.get(parseInt(systemId));
+    const staticInfo = getSystemStaticInfo(parseInt(systemId));
     const dynamicInfo = getSystemById(systems, systemId);
 
     if (!staticInfo || !dynamicInfo) {
-      throw new Error(`Error on getting system ${systemId}`);
+      return { dynamicInfo, staticInfo, leadsTo: [] };
     }
 
     const leadsTo = connections
@@ -29,5 +27,5 @@ export const useSystemInfo = ({ systemId }: UseSystemInfoProps) => {
       .filter(x => x !== systemId);
 
     return { dynamicInfo, staticInfo, leadsTo };
-  }, [systemStatics, systemId, systems, connections]);
+  }, [systemId, systems, 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

@@ -1,14 +1,15 @@
-import React, { useMemo } from 'react';
-import { SystemKillsContent } from '../../../mapInterface/widgets/SystemKills/SystemKillsContent/SystemKillsContent';
+import { useMemo } from 'react';
 import { useKillsCounter } from '../../hooks/useKillsCounter';
 import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
 import { WithChildren, WithClassName } from '@/hooks/Mapper/types/common';
+import {
+  KILLS_ROW_HEIGHT,
+  SystemKillsList,
+} from '@/hooks/Mapper/components/mapInterface/widgets/WSystemKills/SystemKillsList';
+import { TooltipSize } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper/utils.ts';
 
-const ITEM_HEIGHT = 35;
 const MIN_TOOLTIP_HEIGHT = 40;
 
-type TooltipSize = 'xs' | 'sm' | 'md' | 'lg';
-
 type KillsBookmarkTooltipProps = {
   killsCount: number;
   killsActivityType: string | null;
@@ -18,12 +19,14 @@ type KillsBookmarkTooltipProps = {
 } & WithChildren &
   WithClassName;
 
-export const KillsCounter = ({ killsCount, systemId, className, children, size = 'xs' }: KillsBookmarkTooltipProps) => {
-  const {
-    isLoading,
-    kills: detailedKills,
-    systemNameMap,
-  } = useKillsCounter({
+export const KillsCounter = ({
+  killsCount,
+  systemId,
+  className,
+  children,
+  size = TooltipSize.xs,
+}: KillsBookmarkTooltipProps) => {
+  const { isLoading, kills: detailedKills } = useKillsCounter({
     realSystemId: systemId,
   });
 
@@ -37,28 +40,24 @@ export const KillsCounter = ({ killsCount, systemId, className, children, size =
   }
 
   // Calculate height based on number of kills, but ensure a minimum height
-  const killsNeededHeight = limitedKills.length * ITEM_HEIGHT;
+  const killsNeededHeight = limitedKills.length * KILLS_ROW_HEIGHT;
   // Add a small buffer (10px) to prevent scrollbar from appearing unnecessarily
   const tooltipHeight = Math.max(MIN_TOOLTIP_HEIGHT, Math.min(killsNeededHeight + 10, 500));
 
-  const tooltipContent = (
-    <div
-      style={{
-        width: '400px',
-        height: `${tooltipHeight}px`,
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-      className="overflow-hidden"
-    >
-      <div className="flex-1 h-full">
-        <SystemKillsContent kills={limitedKills} systemNameMap={systemNameMap} onlyOneSystem />
-      </div>
-    </div>
-  );
-
   return (
-    <WdTooltipWrapper content={tooltipContent} className={className} size={size} interactive={true}>
+    <WdTooltipWrapper
+      content={
+        <div className="overflow-hidden flex w-[450px] flex-col" style={{ height: `${tooltipHeight}px` }}>
+          <div className="flex-1 h-full">
+            <SystemKillsList kills={limitedKills} onlyOneSystem timeRange={1} />
+          </div>
+        </div>
+      }
+      className={className}
+      tooltipClassName="!px-0"
+      size={size}
+      interactive={true}
+    >
       {children}
     </WdTooltipWrapper>
   );

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);
@@ -355,3 +390,15 @@ $tooltip-bg: #202020;
     }
   }
 }
+
+.ShatteredIcon {
+  position: relative;
+  //top: -1px;
+  left: -1px;
+
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+
+  background-image: url(/images/chart-network-svgrepo-com.svg)
+}

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

@@ -4,7 +4,7 @@ import { Handle, NodeProps, Position } from 'reactflow';
 import clsx from 'clsx';
 import classes from './SolarSystemNodeDefault.module.scss';
 import { PrimeIcons } from 'primereact/api';
-import { useLocalCounter, useSolarSystemNode, useNodeKillsCount } from '../../hooks';
+import { useLocalCounter, useNodeKillsCount, useSolarSystemNode } from '../../hooks';
 import {
   EFFECT_BACKGROUND_STYLES,
   MARKER_BOOKMARK_BG_STYLES,
@@ -14,43 +14,51 @@ import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/Worm
 import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
 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)}>
-              <span className={clsx('pi pi-chart-pie', classes.icon)} />
+            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered, '!pr-[2px]')}>
+              <WdTooltipWrapper content="Shattered" position={TooltipPosition.top}>
+                <span className={clsx('block w-[10px] h-[10px]', classes.ShatteredIcon)} />
+              </WdTooltipWrapper>
             </div>
           )}
 
-          {localKillsCount && localKillsCount > 0 && nodeVars.solarSystemId && (
+          {localKillsCount != null && localKillsCount > 0 && nodeVars.solarSystemId && (
             <KillsCounter
               killsCount={localKillsCount}
               systemId={nodeVars.solarSystemId}
-              size="lg"
+              size={TooltipSize.lg}
               killsActivityType={nodeVars.killsActivityType}
               className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!])}
             >
               <div className={clsx(classes.BookmarkWithIcon)}>
                 <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
-                <span className={clsx(classes.text)}>{nodeVars.killsCount}</span>
+                <span className={clsx(classes.text)}>{localKillsCount}</span>
               </div>
             </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}
@@ -63,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)}
       >
@@ -82,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

@@ -14,25 +14,26 @@ import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/Worm
 import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
 import { LocalCounter } from './SolarSystemLocalCounter';
 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)}>
-              <span className={clsx('pi pi-chart-pie', classes.icon)} />
+            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered, '!pr-[2px]')}>
+              <WdTooltipWrapper content="Shattered" position={TooltipPosition.top}>
+                <span className={clsx('block w-[10px] h-[10px]', classes.ShatteredIcon)} />
+              </WdTooltipWrapper>
             </div>
           )}
 
@@ -40,17 +41,23 @@ export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>)
             <KillsCounter
               killsCount={localKillsCount}
               systemId={nodeVars.solarSystemId}
-              size="lg"
+              size={TooltipSize.lg}
               killsActivityType={nodeVars.killsActivityType}
               className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!])}
             >
               <div className={clsx(classes.BookmarkWithIcon)}>
                 <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
-                <span className={clsx(classes.text)}>{nodeVars.killsCount}</span>
+                <span className={clsx(classes.text)}>{localKillsCount}</span>
               </div>
             </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}
@@ -64,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)}
       >
@@ -109,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/useMapAddSystems.ts

@@ -2,10 +2,13 @@ import { Node, useReactFlow } from 'reactflow';
 import { useCallback, useRef } from 'react';
 import { CommandAddSystems } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { convertSystem2Node } from '../../helpers';
+import { useLoadSystemStatic } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
 
 export const useMapAddSystems = () => {
   const rf = useReactFlow();
 
+  const { addSystemStatic } = useLoadSystemStatic({ systems: [] });
+
   const ref = useRef({ rf });
   ref.current = { rf };
 
@@ -13,7 +16,10 @@ export const useMapAddSystems = () => {
     const { rf } = ref.current;
     const nodes = rf.getNodes();
 
-    const prepared: Node[] = systems.filter(x => !nodes.some(y => x.id === y.id)).map(convertSystem2Node);
+    const newSystems = systems.filter(x => !nodes.some(y => x.id === y.id));
+    newSystems.forEach(x => addSystemStatic(x.system_static_info));
+
+    const prepared: Node[] = newSystems.map(convertSystem2Node);
     rf.addNodes(prepared);
   }, []);
 };

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();
@@ -14,6 +14,7 @@ export const useMapInit = () => {
   return useCallback(
     ({
       systems,
+      system_signatures,
       kills,
       connections,
       wormholes,
@@ -51,6 +52,10 @@ export const useMapInit = () => {
         updateData.systems = systems;
       }
 
+      if (system_signatures) {
+        updateData.systemSignatures = system_signatures;
+      }
+
       if (kills) {
         updateData.kills = kills.reduce((acc, x) => ({ ...acc, [x.solar_system_id]: x.kills }), {});
       }

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

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import { useSystemKills } from '../../mapInterface/widgets/SystemKills/hooks/useSystemKills';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useSystemKills } from '@/hooks/Mapper/components/mapInterface/widgets/WSystemKills/hooks/useSystemKills.ts';
 
 interface UseKillsCounterProps {
   realSystemId: string;
@@ -22,6 +22,7 @@ export function useKillsCounter({ realSystemId }: UseKillsCounterProps) {
     systemId: realSystemId,
     outCommand,
     showAllVisible: false,
+    sinceHours: 1,
   });
 
   const filteredKills = useMemo(() => {

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

@@ -1,6 +1,7 @@
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback, useMemo } from 'react';
 import { useMapEventListener } from '@/hooks/Mapper/events';
 import { Commands } from '@/hooks/Mapper/types';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 
 interface Kill {
   solar_system_id: number | string;
@@ -9,32 +10,66 @@ interface Kill {
 
 interface MapEvent {
   name: Commands;
-  data?: any;
+  data?: unknown;
   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);
+  const { data: mapData } = useMapRootState();
+  const { detailedKills = {} } = mapData;
+
+  // Calculate 1-hour kill count from detailed kills
+  const oneHourKillCount = useMemo(() => {
+    const systemKills = detailedKills[systemId] || [];
+
+    // If we have detailed kills data (even if empty), use it for counting
+    if (Object.prototype.hasOwnProperty.call(detailedKills, systemId)) {
+      const oneHourAgo = Date.now() - 60 * 60 * 1000; // 1 hour in milliseconds
+      const recentKills = systemKills.filter(kill => {
+        if (!kill.kill_time) return false;
+        const killTime = new Date(kill.kill_time).getTime();
+        if (isNaN(killTime)) return false;
+        return killTime >= oneHourAgo;
+      });
+
+      return recentKills.length; // Return 0 if no recent kills, not null
+    }
+
+    // Return null only if we don't have detailed kills data for this system
+    return null;
+  }, [detailedKills, systemId]);
 
   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);
-      }
-      return true;
+    // Always prefer the calculated 1-hour count over initial count
+    // This ensures we properly expire old kills
+    if (oneHourKillCount !== null) {
+      setKillsCount(oneHourKillCount);
+    } else if (detailedKills[systemId] && detailedKills[systemId].length === 0) {
+      // If we have detailed kills data but it's empty, set to 0
+      setKillsCount(0);
+    } else {
+      // Only fall back to initial count if we have no detailed kills data at all
+      setKillsCount(initialKillsCount);
     }
-    return false;
-  }, [systemId]);
+  }, [oneHourKillCount, initialKillsCount, detailedKills, systemId]);
+
+  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') {
+          // Only update if we don't have detailed kills data
+          if (!detailedKills[systemId] || detailedKills[systemId].length === 0) {
+            setKillsCount(killForSystem.kills);
+          }
+        }
+        return true;
+      }
+      return false;
+    },
+    [systemId, detailedKills],
+  );
 
   useMapEventListener(handleEvent);
 

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

@@ -9,10 +9,11 @@ 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';
+import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
 
 function getActivityType(count: number): string {
   if (count <= 5) return 'activityNormal';
@@ -20,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',
@@ -40,11 +80,10 @@ 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 {
-    system_static_info,
-    system_signatures,
+    id: solar_system_id,
     locked,
     name,
     tag,
@@ -54,23 +93,26 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarS
     linked_sig_eve_id: linkedSigEveId = '',
   } = data;
 
+  const {
+    storedSettings: { interfaceSettings },
+    data: { systemSignatures: mapSystemSignatures },
+  } = useMapRootState();
+
+  const systemStaticInfo = useMemo(() => {
+    return getSystemStaticInfo(solar_system_id)!;
+  }, [solar_system_id]);
+
   const {
     system_class,
     security,
     class_title,
-    solar_system_id,
     statics,
     effect_name,
     region_name,
     region_id,
     is_shattered,
     solar_system_name,
-  } = system_static_info;
-
-  const {
-    interfaceSettings,
-    data: { systemSignatures: mapSystemSignatures },
-  } = useMapRootState();
+  } = systemStaticInfo;
 
   const { isShowUnsplashedSignatures } = interfaceSettings;
   const isTempSystemNameEnabled = useMapGetOption('show_temp_system_name') === 'true';
@@ -89,19 +131,17 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarS
       visibleNodes,
       showKSpaceBG,
       isThickConnections,
+      pings,
     },
     outCommand,
   } = useMapState();
 
   const visible = useMemo(() => visibleNodes.has(id), [id, visibleNodes]);
 
-  const systemSigs = useMemo(
-    () => mapSystemSignatures[solar_system_id] || system_signatures,
-    [system_signatures, solar_system_id, mapSystemSignatures],
-  );
+  const systemSigs = useMemo(() => mapSystemSignatures[solar_system_id] || [], [solar_system_id, mapSystemSignatures]);
 
   const charactersInSystem = useMemo(() => {
-    return characters.filter(c => c.location?.solar_system_id === solar_system_id && c.online);
+    return characters.filter(c => c.location?.solar_system_id === parseInt(solar_system_id) && c.online);
   }, [characters, solar_system_id]);
 
   const isWormhole = isWormholeSpace(system_class);
@@ -121,7 +161,7 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarS
     isShowLinkedSigId,
   });
 
-  const killsCount = useMemo(() => kills[solar_system_id] ?? null, [kills, solar_system_id]);
+  const killsCount = useMemo(() => kills[parseInt(solar_system_id)] ?? null, [kills, solar_system_id]);
   const killsActivityType = killsCount ? getActivityType(killsCount) : null;
 
   const hasUserCharacters = useMemo(
@@ -132,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 },
     });
   });
 
@@ -144,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,
@@ -190,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/map/styles/eve-common.scss

@@ -542,48 +542,32 @@
   background-color: #d10600;
 }
 
-.react-flow {
-  color: var(--text-color);
 
-  &__pane {
-    cursor: auto;
-  }
+.react-flow__minimap-node {
+  fill: #ffb03a;
+}
 
-  &__minimap {
-    background-color: rgba(66, 66, 66, 1);
-    opacity: 0.7;
-    border: 1px solid #2f2f2f;
-    border-radius: 4px;
-    overflow: hidden;
-  }
+.react-flow__minimap {
+  border: 1px solid #282828;
+  border-radius: 4px;
+  background-color: rgb(47 37 37) !important;
+  overflow: hidden;
+}
 
-  &__minimap-mask {
-    fill: rgba(28, 28, 28, 0.75);
-  }
+.react-flow__minimap-mask {
+  stroke-width: 2px;
+  fill: rgba(0, 0, 0, 0.5);
+  mix-blend-mode: overlay;
+}
 
-  &__controls {
-    filter: brightness(1.5);
-  }
-
-  &__minimap-node {
-    fill: #ffb03a;
-  }
+.react-flow__minimap-mask {
+  stroke-width: 2px;
+  fill: rgb(0 0 0 / 50%) !important;
+  mix-blend-mode: inherit;
+  opacity: 1;
+  stroke: #fff;
 }
 
 .context-menu-active {
   background-color: rgba(131, 131, 131, 0.33);
 }
-
-.p-dialog {
-  .p-dialog-header {
-    height: 40px;
-    padding: 1rem;
-    padding-right: 10px !important;
-  }
-  .p-dialog-title {
-    font-size: 1rem !important;
-  }
-  .p-dialog-header-icons {
-    align-self: initial !important;
-  }
-}

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

@@ -43,7 +43,7 @@ export const Comments = ({}: CommentsProps) => {
   }
 
   return (
-    <div className="flex flex-col gap-1 mt-1 whitespace-nowrap overflow-auto text-ellipsis custom-scrollbar">
+    <div className="flex flex-col gap-1 whitespace-nowrap overflow-auto text-ellipsis custom-scrollbar">
       {commentsList.map(({ id, text, updated_at, characterEveId }) => (
         <MarkdownComment key={id} text={text} time={updated_at} characterEveId={characterEveId} id={id} />
       ))}

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/MarkdownEditor/MarkdownEditor.tsx

@@ -16,7 +16,6 @@ const stopEventPropagationPlugin = ViewPlugin.fromClass(
 
       // @ts-ignore
       this.pasteHandler = (event: Event) => {
-        console.log('Paste done in editor, stopping global listeners.');
         event.stopPropagation();
       };
 

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/SystemSettingsDialog/SystemSettingsDialog.tsx

@@ -10,6 +10,7 @@ import { OutCommand } from '@/hooks/Mapper/types';
 import { IconField } from 'primereact/iconfield';
 import { TooltipPosition, WdImageSize, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
 import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager.ts';
+import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
 
 interface SystemSettingsDialog {
   systemId: string;
@@ -26,6 +27,7 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
   const isTempSystemNameEnabled = useMapGetOption('show_temp_system_name') === 'true';
 
   const system = getSystemById(systems, systemId);
+  const systemStaticInfo = getSystemStaticInfo(systemId);
 
   const [name, setName] = useState('');
   const [label, setLabel] = useState('');
@@ -33,11 +35,11 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
   const [description, setDescription] = useState('');
   const inputRef = useRef<HTMLInputElement>();
 
-  const ref = useRef({ name, description, temporaryName, label, outCommand, systemId, system });
-  ref.current = { name, description, label, temporaryName, outCommand, systemId, system };
+  const ref = useRef({ name, description, temporaryName, label, outCommand, systemId, system, systemStaticInfo });
+  ref.current = { name, description, label, temporaryName, outCommand, systemId, system, systemStaticInfo };
 
   const handleSave = useCallback(() => {
-    const { name, description, label, temporaryName, outCommand, systemId, system } = ref.current;
+    const { name, description, label, temporaryName, outCommand, systemId, system, systemStaticInfo } = ref.current;
 
     const outLabel = new LabelsManager(system?.labels ?? '');
     outLabel.updateCustomLabel(label);
@@ -62,7 +64,7 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
       type: OutCommand.updateSystemName,
       data: {
         system_id: systemId,
-        value: name.trim() || system?.system_static_info.solar_system_name,
+        value: name.trim() || systemStaticInfo?.solar_system_name,
       },
     });
 
@@ -78,11 +80,11 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
   }, [setVisible]);
 
   const handleResetSystemName = useCallback(() => {
-    const { system } = ref.current;
-    if (!system) {
+    const { systemStaticInfo } = ref.current;
+    if (!systemStaticInfo) {
       return;
     }
-    setName(system.system_static_info.solar_system_name);
+    setName(systemStaticInfo.solar_system_name);
   }, []);
 
   const onShow = useCallback(() => {
@@ -130,7 +132,7 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
               <label htmlFor="username">Custom name</label>
 
               <IconField>
-                {name !== system?.system_static_info.solar_system_name && (
+                {name !== systemStaticInfo?.solar_system_name && (
                   <WdImgButton
                     className="pi pi-undo"
                     textSize={WdImageSize.large}

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

@@ -1,5 +1,5 @@
 .root {
-  padding-bottom: 5px;
+
 }
 
 .Header {

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

@@ -2,14 +2,15 @@ import React from 'react';
 
 import classes from './Widget.module.scss';
 import clsx from 'clsx';
+import { WithChildren } from '@/hooks/Mapper/types/common.ts';
 
-export interface WidgetProps {
+export type WidgetProps = {
   label: React.ReactNode | string;
   windowId?: string;
-  children?: React.ReactNode;
-}
+  contentClassName?: string;
+} & WithChildren;
 
-export const Widget = ({ label, children, windowId }: WidgetProps) => {
+export const Widget = ({ label, children, windowId, contentClassName }: WidgetProps) => {
   return (
     <div
       data-window-id={windowId}
@@ -34,7 +35,7 @@ export const Widget = ({ label, children, windowId }: WidgetProps) => {
         {label}
       </div>
       <div
-        className={clsx(classes.Content, 'overflow-auto', 'bg-opacity-5  custom-scrollbar')}
+        className={clsx(classes.Content, 'overflow-auto', 'bg-opacity-5 custom-scrollbar', contentClassName)}
         style={{ flexGrow: 1 }}
         onContextMenu={e => {
           e.preventDefault();

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,
-  SystemKills,
+  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,
@@ -70,7 +79,7 @@ export const DEFAULT_WIDGETS: WindowProps[] = [
     position: { x: 270, y: 730 },
     size: { width: 510, height: 200 },
     zIndex: 0,
-    content: () => <SystemKills />,
+    content: () => <WSystemKills />,
   },
   {
     id: WidgetsIds.comments,
@@ -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/CommentsWidget/CommentsWidget.tsx

@@ -44,6 +44,7 @@ export const CommentsWidget = () => {
 
   return (
     <Widget
+      contentClassName="my-1"
       label={
         <div ref={containerRef} className="flex justify-between items-center gap-1 text-xs w-full">
           <div className="flex items-center gap-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,24 +1,24 @@
 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 { getSystemById } from '@/hooks/Mapper/helpers';
 import { ANOIK_ICON, DOTLAN_ICON, ZKB_ICON } from '@/hooks/Mapper/icons';
+import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
 
 export const SystemInfo = () => {
   const [visible, setVisible] = useState(false);
 
   const {
-    data: { selectedSystems, systems },
+    data: { selectedSystems },
   } = useMapRootState();
 
   const [systemId] = selectedSystems;
 
-  const sys = getSystemById(systems, systemId)!;
-  const { solar_system_name: solarSystemName } = sys?.system_static_info || {};
+  const systemStaticInfo = getSystemStaticInfo(systemId)!;
+  const { solar_system_name: solarSystemName } = systemStaticInfo || {};
 
   const isNotSelectedSystem = selectedSystems.length !== 1;
 
@@ -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/SystemInfo/SystemInfoContent/SystemInfoContent.tsx

@@ -3,6 +3,7 @@ import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormhol
 import { useMemo } from 'react';
 import { getSystemById, sortWHClasses } from '@/hooks/Mapper/helpers';
 import { InfoDrawer, WHClassView, WHEffectView } from '@/hooks/Mapper/components/ui-kit';
+import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
 
 interface SystemInfoContentProps {
   systemId: string;
@@ -14,9 +15,9 @@ export const SystemInfoContent = ({ systemId }: SystemInfoContentProps) => {
   } = useMapRootState();
 
   const sys = getSystemById(systems, systemId)! || {};
+  const systemStaticInfo = getSystemStaticInfo(systemId)!;
   const { description } = sys;
-  const { system_class, region_name, constellation_name, statics, effect_name, effect_power } =
-    sys.system_static_info || {};
+  const { system_class, region_name, constellation_name, statics, effect_name, effect_power } = systemStaticInfo || {};
   const isWH = isWormholeSpace(system_class);
   const sortedStatics = useMemo(() => sortWHClasses(wormholesData, statics), [wormholesData, statics]);
 

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

@@ -1,106 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
-import { SystemKillsContent } from './SystemKillsContent/SystemKillsContent';
-import { KillsHeader } from './components/SystemKillsHeader';
-import { useKillsWidgetSettings } from './hooks/useKillsWidgetSettings';
-import { useSystemKills } from './hooks/useSystemKills';
-import { KillsSettingsDialog } from './components/SystemKillsSettingsDialog';
-import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace';
-import { SolarSystemRawType } from '@/hooks/Mapper/types';
-
-export const SystemKills: React.FC = React.memo(() => {
-  const {
-    data: { selectedSystems, systems, isSubscriptionActive },
-    outCommand,
-  } = useMapRootState();
-
-  const [systemId] = selectedSystems || [];
-  const [settingsDialogVisible, setSettingsDialogVisible] = useState(false);
-
-  const systemNameMap = useMemo(() => {
-    const map: Record<string, string> = {};
-    systems.forEach(sys => {
-      map[sys.id] = sys.temporary_name || sys.name || '???';
-    });
-    return map;
-  }, [systems]);
-
-  const systemBySolarSystemId = useMemo(() => {
-    const map: Record<number, SolarSystemRawType> = {};
-    systems.forEach(sys => {
-      if (sys.system_static_info?.solar_system_id != null) {
-        map[sys.system_static_info.solar_system_id] = sys;
-      }
-    });
-    return map;
-  }, [systems]);
-
-  const [settings] = useKillsWidgetSettings();
-  const visible = settings.showAll;
-
-  const { kills, isLoading, error } = useSystemKills({
-    systemId,
-    outCommand,
-    showAllVisible: visible,
-    sinceHours: settings.timeRange,
-  });
-
-  const isNothingSelected = !systemId && !visible;
-  const showLoading = isLoading && kills.length === 0;
-
-  const filteredKills = useMemo(() => {
-    if (!settings.whOnly || !visible) return kills;
-    return kills.filter(kill => {
-      const system = systemBySolarSystemId[kill.solar_system_id];
-      if (!system) {
-        console.warn(`System with id ${kill.solar_system_id} not found.`);
-        return false;
-      }
-      return isWormholeSpace(system.system_static_info.system_class);
-    });
-  }, [kills, settings.whOnly, systemBySolarSystemId, visible]);
-
-  return (
-    <div className="h-full flex flex-col">
-      <Widget label={<KillsHeader systemId={systemId} onOpenSettings={() => setSettingsDialogVisible(true)} />}>
-        {!isSubscriptionActive ? (
-          <div className="w-full h-full flex items-center justify-center">
-            <span className="select-none text-center text-stone-400/80 text-sm">
-              Kills available with &#39;Active&#39; map subscription only (contact map administrators)
-            </span>
-          </div>
-        ) : isNothingSelected ? (
-          <div className="w-full h-full flex items-center justify-center">
-            <span className="select-none text-center text-stone-400/80 text-sm">
-              No system selected (or toggle &quot;Show all systems&quot;)
-            </span>
-          </div>
-        ) : showLoading ? (
-          <div className="w-full h-full flex items-center justify-center">
-            <span className="select-none text-center text-stone-400/80 text-sm">Loading Kills...</span>
-          </div>
-        ) : error ? (
-          <div className="w-full h-full flex items-center justify-center">
-            <span className="select-none text-center text-red-400 text-sm">{error}</span>
-          </div>
-        ) : !filteredKills || filteredKills.length === 0 ? (
-          <div className="w-full h-full flex items-center justify-center">
-            <span className="select-none text-center text-stone-400/80 text-sm">No kills found</span>
-          </div>
-        ) : (
-          <SystemKillsContent
-            kills={filteredKills}
-            systemNameMap={systemNameMap}
-            onlyOneSystem={!visible}
-            timeRange={settings.timeRange}
-          />
-        )}
-      </Widget>
-
-      {settingsDialogVisible && <KillsSettingsDialog visible setVisible={setSettingsDialogVisible} />}
-    </div>
-  );
-});
-
-SystemKills.displayName = 'SystemKills';

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKillsContent/SystemKillsContent.module.scss

@@ -1,35 +0,0 @@
-// Custom scrollbar styling is now handled by the global custom-scrollbar class
-.scrollerContent {
-  overflow-x: hidden;
-  overflow-y: auto;
-  height: 100% !important;
-}
-
-// VirtualScroller specific styles that can't be handled with Tailwind
-.VirtualScroller {
-  overflow: hidden !important;
-  display: flex !important;
-  flex-direction: column !important;
-  height: 100% !important;
-
-  // Target this specific VirtualScroller instance
-  &:global(.p-virtualscroller) {
-    height: 100% !important;
-
-    :global(.p-virtualscroller-content) {
-      height: 100% !important;
-    }
-  }
-}
-
-// Fix for PrimeReact VirtualScroller - these need to be global
-:global {
-  .p-virtualscroller {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .p-virtualscroller-content {
-    flex: 1;
-  }
-}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/KillItemTemplate.tsx

@@ -1,20 +0,0 @@
-import { DetailedKill } from '@/hooks/Mapper/types/kills';
-import { VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
-import { KillRow } from './SystemKillsRow';
-import clsx from 'clsx';
-
-export function KillItemTemplate(
-  systemNameMap: Record<string, string>,
-  onlyOneSystem: boolean,
-  kill: DetailedKill,
-  options: VirtualScrollerTemplateOptions,
-) {
-  const systemIdStr = String(kill.solar_system_id);
-  const systemName = systemNameMap[systemIdStr] || `System ${systemIdStr}`;
-
-  return (
-    <div style={{ height: `${options.props.itemSize}px` }} className={clsx({ 'bg-gray-900': options.odd })}>
-      <KillRow killDetails={kill} systemName={systemName} onlyOneSystem={onlyOneSystem} />
-    </div>
-  );
-}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/SystemKillsRow.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { DetailedKill } from '@/hooks/Mapper/types/kills';
-import { KillRowDetail } from './KillRowDetail.tsx';
-
-export interface KillRowProps {
-  killDetails: DetailedKill;
-  systemName: string;
-  onlyOneSystem?: boolean;
-}
-
-const KillRowComponent: React.FC<KillRowProps> = ({ killDetails, systemName, onlyOneSystem = false }) => {
-  return <KillRowDetail killDetails={killDetails} systemName={systemName} onlyOneSystem={onlyOneSystem} />;
-};
-
-export const KillRow = React.memo(KillRowComponent);

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

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

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/SystemSignatureSettingsDialog/SystemSignatureSettingsDialog.module.scss

@@ -1,79 +0,0 @@
-.verticalTabsContainer {
-  display: flex;
-  width: 100%;
-  min-height: 300px;
-
-  :global {
-    .p-tabview {
-      width: 100%;
-      display: flex;
-      align-items: flex-start;
-    }
-
-    .p-tabview-panels {
-      padding: 6px 1rem !important;
-      flex-grow: 1;
-    }
-
-    .p-tabview-nav-container {
-      border-right: none;
-      height: 100%;
-    }
-
-    .p-tabview-nav {
-      flex-direction: column;
-      width: 150px;
-      min-height: 100%;
-      border: none;
-
-      li {
-        width: 100%;
-        border-right: 4px solid var(--surface-hover);
-        background-color: var(--surface-card);
-
-        transition:
-          background-color 200ms,
-          border-right-color 200ms;
-
-        &:hover {
-          background-color: var(--surface-hover);
-          border-right: 4px solid var(--surface-100);
-        }
-
-        .p-tabview-nav-link {
-          transition: color 200ms;
-
-          justify-content: flex-end;
-          padding: 10px;
-          //background-color: var(--surface-card);
-          background-color: initial;
-          border: none;
-          color: var(--gray-400);
-
-          border-radius: initial;
-          font-weight: 400;
-          margin: 0;
-        }
-
-        &.p-tabview-selected {
-          background-color: var(--surface-50);
-          border-right: 4px solid var(--primary-color);
-
-          .p-tabview-nav-link {
-            font-weight: 600;
-            color: var(--primary-color);
-          }
-
-          &:hover {
-            //background-color: var(--surface-hover);
-            border-right: 4px solid var(--primary-color);
-          }
-        }
-      }
-    }
-
-    .p-tabview-panel {
-      flex-grow: 1;
-    }
-  }
-}

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

@@ -2,7 +2,6 @@ import { Dialog } from 'primereact/dialog';
 import { useCallback, useState } from 'react';
 import { Button } from 'primereact/button';
 import { TabPanel, TabView } from 'primereact/tabview';
-import styles from './SystemSignatureSettingsDialog.module.scss';
 import { PrettySwitchbox } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/components';
 import { Dropdown } from 'primereact/dropdown';
 import {
@@ -72,26 +71,24 @@ export const SystemSignatureSettingsDialog = ({
     <Dialog header="System Signatures Settings" visible={true} onHide={onCancel} className="w-full max-w-lg h-[500px]">
       <div className="flex flex-col gap-3 justify-between h-full">
         <div className="flex flex-col gap-2">
-          <div className={styles.verticalTabsContainer}>
-            <TabView
-              activeIndex={activeIndex}
-              onTabChange={e => setActiveIndex(e.index)}
-              className={styles.verticalTabView}
-            >
-              <TabPanel header="Filters" headerClassName={styles.verticalTabHeader}>
-                <div className="w-full h-full flex flex-col gap-1">
-                  {SIGNATURE_SETTINGS.filterFlags.map(renderSetting)}
-                </div>
-              </TabPanel>
-              <TabPanel header="User Interface" headerClassName={styles.verticalTabHeader}>
-                <div className="w-full h-full flex flex-col gap-1">
-                  {SIGNATURE_SETTINGS.uiFlags.map(renderSetting)}
-                  <div className="my-2 border-t border-stone-700/50"></div>
-                  {SIGNATURE_SETTINGS.uiOther.map(renderSetting)}
-                </div>
-              </TabPanel>
-            </TabView>
-          </div>
+          <TabView
+            activeIndex={activeIndex}
+            onTabChange={e => setActiveIndex(e.index)}
+            className="vertical-tabs-container"
+          >
+            <TabPanel header="Filters">
+              <div className="w-full h-full flex flex-col gap-1">
+                {SIGNATURE_SETTINGS.filterFlags.map(renderSetting)}
+              </div>
+            </TabPanel>
+            <TabPanel header="User Interface">
+              <div className="w-full h-full flex flex-col gap-1">
+                {SIGNATURE_SETTINGS.uiFlags.map(renderSetting)}
+                <div className="my-2 border-t border-stone-700/50"></div>
+                {SIGNATURE_SETTINGS.uiOther.map(renderSetting)}
+              </div>
+            </TabPanel>
+          </TabView>
         </div>
 
         <div className="flex gap-2 justify-end">

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

@@ -1,16 +1,19 @@
-import { useCallback, useEffect, useState } from 'react';
-import useRefState from 'react-usestateref';
 import { useMapEventListener } from '@/hooks/Mapper/events';
+import { parseSignatures } from '@/hooks/Mapper/helpers';
 import { Commands, ExtendedSystemSignature, SignatureKind } from '@/hooks/Mapper/types';
 import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
-import { parseSignatures } from '@/hooks/Mapper/helpers';
+import { useCallback, useEffect, useState } from 'react';
+import useRefState from 'react-usestateref';
 
-import { getActualSigs } from '../helpers';
-import { useSignatureFetching } from './useSignatureFetching';
-import { usePendingDeletions } from './usePendingDeletions';
-import { UseSystemSignaturesDataProps } from './types';
+import {
+  SETTINGS_KEYS,
+  getDeletionTimeoutMs,
+} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { SETTINGS_KEYS } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
+import { getActualSigs } from '../helpers';
+import { UseSystemSignaturesDataProps } from './types';
+import { usePendingDeletions } from './usePendingDeletions';
+import { useSignatureFetching } from './useSignatureFetching';
 
 export const useSystemSignaturesData = ({
   systemId,
@@ -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,19 +47,47 @@ 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),
       ) as ExtendedSystemSignature[];
 
+      if (incomingSignatures.length === 0) {
+        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) {
@@ -74,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);
@@ -115,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/SystemStructures/helpers/parserHelper.ts

@@ -32,7 +32,12 @@ export function parseFormatOneLine(line: string): StructureItem | null {
     return null;
   }
 
-  if (rawTypeName != STRUCTURE_TYPE_MAP[rawTypeId]) {
+  // in some localizations (like russian) there is an option called "mark names with *"
+  // The example output will be "35826	Itamo - Research & Production	Azbel*	609 м"
+  // so, let's fix this
+  const localizationFixedName = rawTypeName.replace("*", "");
+
+  if (localizationFixedName != STRUCTURE_TYPE_MAP[rawTypeId]) {
     return null;
   }
 

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/WSystemKills/SystemKillsList/SystemKillsList.tsx

@@ -1,26 +1,26 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { DetailedKill } from '@/hooks/Mapper/types/kills';
 import { VirtualScroller } from 'primereact/virtualscroller';
 import { useSystemKillsItemTemplate } from '../hooks/useSystemKillsItemTemplate';
-import classes from './SystemKillsContent.module.scss';
+import clsx from 'clsx';
+import { WithClassName } from '@/hooks/Mapper/types/common.ts';
 
-export const ITEM_HEIGHT = 35;
+export const KILLS_ROW_HEIGHT = 40;
 
-export interface SystemKillsContentProps {
+export type SystemKillsContentProps = {
   kills: DetailedKill[];
-  systemNameMap: Record<string, string>;
   onlyOneSystem?: boolean;
   timeRange?: number;
   limit?: number;
-}
+} & WithClassName;
 
-export const SystemKillsContent: React.FC<SystemKillsContentProps> = ({
+export const SystemKillsList = ({
   kills,
-  systemNameMap,
   onlyOneSystem = false,
   timeRange = 4,
   limit,
-}) => {
+  className,
+}: SystemKillsContentProps) => {
   const processedKills = useMemo(() => {
     if (!kills || kills.length === 0) return [];
 
@@ -47,30 +47,17 @@ export const SystemKillsContent: React.FC<SystemKillsContentProps> = ({
     return filteredKills;
   }, [kills, timeRange, limit]);
 
-  const itemTemplate = useSystemKillsItemTemplate(systemNameMap, onlyOneSystem);
-
-  // Define style for the VirtualScroller
-  const virtualScrollerStyle: React.CSSProperties = {
-    boxSizing: 'border-box',
-    height: '100%', // Use 100% height to fill the container
-  };
+  const itemTemplate = useSystemKillsItemTemplate(onlyOneSystem);
 
   return (
-    <div className="h-full w-full flex flex-col overflow-hidden" data-testid="system-kills-content">
-      <VirtualScroller
-        items={processedKills}
-        itemSize={ITEM_HEIGHT}
-        itemTemplate={itemTemplate}
-        className={`w-full h-full flex-1 select-none ${classes.VirtualScroller}`}
-        style={virtualScrollerStyle}
-        pt={{
-          content: {
-            className: `custom-scrollbar ${classes.scrollerContent}`,
-          },
-        }}
-      />
-    </div>
+    <VirtualScroller
+      items={processedKills}
+      itemSize={KILLS_ROW_HEIGHT}
+      itemTemplate={itemTemplate}
+      className={clsx(
+        'w-full flex-1 select-none !h-full overflow-x-hidden overflow-y-auto custom-scrollbar',
+        className,
+      )}
+    />
   );
 };
-
-export default SystemKillsContent;

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

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

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

@@ -0,0 +1,109 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
+import { SystemKillsList } from './SystemKillsList';
+import { KillsHeader } from './components/SystemKillsHeader';
+import { useKillsWidgetSettings } from './hooks/useKillsWidgetSettings';
+import { useSystemKills } from './hooks/useSystemKills';
+import { KillsSettingsDialog } from './components/SystemKillsSettingsDialog';
+import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace';
+import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
+
+const SystemKillsContent = () => {
+  const {
+    data: { selectedSystems, isSubscriptionActive },
+    outCommand,
+  } = useMapRootState();
+
+  const [systemId] = selectedSystems || [];
+
+  const systemStaticInfo = getSystemStaticInfo(systemId)!;
+
+  const [settings] = useKillsWidgetSettings();
+  const visible = settings.showAll;
+
+  const { kills, isLoading, error } = useSystemKills({
+    systemId,
+    outCommand,
+    showAllVisible: visible,
+    sinceHours: settings.timeRange,
+  });
+
+  const isNothingSelected = !systemId && !visible;
+  const showLoading = isLoading && kills.length === 0;
+
+  const filteredKills = useMemo(() => {
+    if (!settings.whOnly || !visible) return kills;
+    return kills.filter(kill => {
+      if (!systemStaticInfo) {
+        console.warn(`System with id ${kill.solar_system_id} not found.`);
+        return false;
+      }
+      return isWormholeSpace(systemStaticInfo.system_class);
+    });
+  }, [kills, settings.whOnly, systemStaticInfo, visible]);
+
+  if (!isSubscriptionActive) {
+    return (
+      <div className="w-full h-full flex items-center justify-center">
+        <span className="select-none text-center text-stone-400/80 text-sm">
+          Kills available with &#39;Active&#39; map subscription only (contact map administrators)
+        </span>
+      </div>
+    );
+  }
+
+  if (isNothingSelected) {
+    return (
+      <div className="w-full h-full flex items-center justify-center">
+        <span className="select-none text-center text-stone-400/80 text-sm">
+          No system selected (or toggle &quot;Show all systems&quot;)
+        </span>
+      </div>
+    );
+  }
+
+  if (showLoading) {
+    return (
+      <div className="w-full h-full flex items-center justify-center">
+        <span className="select-none text-center text-stone-400/80 text-sm">Loading Kills...</span>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="w-full h-full flex items-center justify-center">
+        <span className="select-none text-center text-red-400 text-sm">{error}</span>
+      </div>
+    );
+  }
+
+  if (!filteredKills || filteredKills.length === 0) {
+    return (
+      <div className="w-full h-full flex items-center justify-center">
+        <span className="select-none text-center text-stone-400/80 text-sm">No kills found</span>
+      </div>
+    );
+  }
+
+  return <SystemKillsList kills={filteredKills} onlyOneSystem={!visible} timeRange={settings.timeRange} />;
+};
+
+export const WSystemKills = () => {
+  const [settingsDialogVisible, setSettingsDialogVisible] = useState(false);
+  const {
+    data: { selectedSystems },
+  } = useMapRootState();
+
+  const [systemId] = selectedSystems || [];
+
+  const handleOpenSettings = useCallback(() => setSettingsDialogVisible(true), []);
+
+  return (
+    <Widget label={<KillsHeader systemId={systemId} onOpenSettings={handleOpenSettings} />}>
+      <SystemKillsContent />
+      {settingsDialogVisible && <KillsSettingsDialog visible setVisible={setSettingsDialogVisible} />}
+    </Widget>
+  );
+};

assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/components/KillItemTemplate.tsx

@@ -0,0 +1,24 @@
+import { DetailedKill } from '@/hooks/Mapper/types/kills';
+import { VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
+import { KillRowDetail } from '@/hooks/Mapper/components/mapInterface/widgets/WSystemKills/components/KillRowDetail.tsx';
+import clsx from 'clsx';
+import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
+
+export const KillItemTemplate = (
+  onlyOneSystem: boolean,
+  kill: DetailedKill,
+  options: VirtualScrollerTemplateOptions,
+) => {
+  const systemName = getSystemStaticInfo(kill.solar_system_id)?.solar_system_name || `System ${kill.solar_system_id}`;
+
+  return (
+    <div style={{ height: `${options.props.itemSize}px` }}>
+      <KillRowDetail
+        killDetails={kill}
+        systemName={systemName}
+        onlyOneSystem={onlyOneSystem}
+        className={clsx(options.odd && 'bg-stone-800/50')}
+      />
+    </div>
+  );
+};

assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/components/KillRowDetail.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useMemo } from 'react';
 import clsx from 'clsx';
 import { DetailedKill } from '@/hooks/Mapper/types/kills';
 import {
@@ -14,92 +14,130 @@ import {
 import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
 import classes from './KillRowDetail.module.scss';
 import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
+import { WithClassName } from '@/hooks/Mapper/types/common.ts';
 
-export interface CompactKillRowProps {
-  killDetails: DetailedKill;
+export type CompactKillRowProps = {
+  killDetails?: DetailedKill | null;
   systemName: string;
   onlyOneSystem: boolean;
-}
+} & WithClassName;
 
-export const KillRowDetail: React.FC<CompactKillRowProps> = ({ killDetails, systemName, onlyOneSystem }) => {
+export const KillRowDetail = ({ killDetails, systemName, onlyOneSystem, className }: CompactKillRowProps) => {
   const {
-    killmail_id = 0,
+    killmail_id,
     // Victim data
-    victim_char_name = 'Unknown Pilot',
-    victim_alliance_ticker = '',
-    victim_corp_ticker = '',
-    victim_ship_name = 'Unknown Ship',
-    victim_corp_name = '',
-    victim_alliance_name = '',
-    victim_char_id = 0,
-    victim_corp_id = 0,
-    victim_alliance_id = 0,
-    victim_ship_type_id = 0,
-    // Attacker data
-    final_blow_char_id = 0,
-    final_blow_char_name = '',
-    final_blow_alliance_ticker = '',
-    final_blow_alliance_name = '',
-    final_blow_alliance_id = 0,
-    final_blow_corp_ticker = '',
-    final_blow_corp_id = 0,
-    final_blow_corp_name = '',
-    final_blow_ship_type_id = 0,
-    kill_time = '',
-    total_value = 0,
-  } = killDetails || {};
-
-  const attackerIsNpc = final_blow_char_id === 0;
-
-  // Define victim affiliation ticker.
-  const victimAffiliationTicker = victim_alliance_ticker || victim_corp_ticker || 'No Ticker';
-
-  const killValueFormatted = total_value != null && total_value > 0 ? `${formatISK(total_value)} ISK` : null;
-  const killTimeAgo = kill_time ? formatTimeMixed(kill_time) : '0h ago';
-
-  const attackerSubscript = getAttackerSubscript(killDetails);
-
-  const { victimCorpLogoUrl, victimAllianceLogoUrl, victimShipUrl } = buildVictimImageUrls({
+    victim_char_name,
+    victim_alliance_ticker,
+    victim_corp_ticker,
+    victim_ship_name,
+    victim_corp_name,
+    victim_alliance_name,
     victim_char_id,
-    victim_ship_type_id,
     victim_corp_id,
     victim_alliance_id,
+    victim_ship_type_id,
+    // Attacker data
+    final_blow_char_id,
+    final_blow_char_name,
+    final_blow_alliance_ticker,
+    final_blow_alliance_name,
+    final_blow_alliance_id,
+    final_blow_corp_ticker,
+    final_blow_corp_id,
+    final_blow_corp_name,
+    final_blow_ship_type_id,
+    kill_time,
+    total_value,
+  } = killDetails || {};
+
+  // Apply fallback values using nullish coalescing to handle both null and undefined
+  const safeKillmailId = killmail_id ?? 0;
+  const safeVictimCharName = victim_char_name ?? 'Unknown Pilot';
+  const safeVictimAllianceTicker = victim_alliance_ticker ?? '';
+  const safeVictimCorpTicker = victim_corp_ticker ?? '';
+  const safeVictimShipName = victim_ship_name ?? 'Unknown Ship';
+  const safeVictimCorpName = victim_corp_name ?? '';
+  const safeVictimAllianceName = victim_alliance_name ?? '';
+  const safeVictimCharId = victim_char_id ?? 0;
+  const safeVictimCorpId = victim_corp_id ?? 0;
+  const safeVictimAllianceId = victim_alliance_id ?? 0;
+  const safeVictimShipTypeId = victim_ship_type_id ?? 0;
+  const safeFinalBlowCharId = final_blow_char_id ?? 0;
+  const safeFinalBlowCharName = final_blow_char_name ?? '';
+  const safeFinalBlowAllianceTicker = final_blow_alliance_ticker ?? '';
+  const safeFinalBlowAllianceName = final_blow_alliance_name ?? '';
+  const safeFinalBlowAllianceId = final_blow_alliance_id ?? 0;
+  const safeFinalBlowCorpTicker = final_blow_corp_ticker ?? '';
+  const safeFinalBlowCorpId = final_blow_corp_id ?? 0;
+  const safeFinalBlowCorpName = final_blow_corp_name ?? '';
+  const safeFinalBlowShipTypeId = final_blow_ship_type_id ?? 0;
+  const safeKillTime = kill_time ?? '';
+  const safeTotalValue = total_value ?? 0;
+
+  const attackerIsNpc = safeFinalBlowCharId === 0;
+
+  // Define victim affiliation ticker.
+  const victimAffiliationTicker = safeVictimAllianceTicker || safeVictimCorpTicker || 'No Ticker';
+
+  const killValueFormatted = safeTotalValue != null && safeTotalValue > 0 ? `${formatISK(safeTotalValue)} ISK` : null;
+  const killTimeAgo = safeKillTime ? formatTimeMixed(safeKillTime) : '0h ago';
+
+  const attackerSubscript = killDetails ? getAttackerSubscript(killDetails) : undefined;
+
+  const { victimCorpLogoUrl, victimAllianceLogoUrl, victimShipUrl } = buildVictimImageUrls({
+    victim_char_id: safeVictimCharId,
+    victim_ship_type_id: safeVictimShipTypeId,
+    victim_corp_id: safeVictimCorpId,
+    victim_alliance_id: safeVictimAllianceId,
   });
 
   const { attackerCorpLogoUrl, attackerAllianceLogoUrl } = buildAttackerImageUrls({
-    final_blow_char_id,
-    final_blow_corp_id,
-    final_blow_alliance_id,
+    final_blow_char_id: safeFinalBlowCharId,
+    final_blow_corp_id: safeFinalBlowCorpId,
+    final_blow_alliance_id: safeFinalBlowAllianceId,
   });
 
   const { url: victimPrimaryLogoUrl, tooltip: victimPrimaryTooltip } = getPrimaryLogoAndTooltip(
     victimAllianceLogoUrl,
     victimCorpLogoUrl,
-    victim_alliance_name,
-    victim_corp_name,
+    safeVictimAllianceName,
+    safeVictimCorpName,
     'Victim',
   );
 
-  const { url: attackerPrimaryImageUrl, tooltip: attackerPrimaryTooltip } = getAttackerPrimaryImageAndTooltip(
-    attackerIsNpc,
-    attackerAllianceLogoUrl,
-    attackerCorpLogoUrl,
-    final_blow_alliance_name,
-    final_blow_corp_name,
-    final_blow_ship_type_id,
+  const { url: attackerPrimaryImageUrl, tooltip: attackerPrimaryTooltip } = useMemo(
+    () =>
+      getAttackerPrimaryImageAndTooltip(
+        attackerIsNpc,
+        attackerAllianceLogoUrl,
+        attackerCorpLogoUrl,
+        safeFinalBlowAllianceName,
+        safeFinalBlowCorpName,
+        safeFinalBlowShipTypeId,
+      ),
+    [
+      attackerAllianceLogoUrl,
+      attackerCorpLogoUrl,
+      attackerIsNpc,
+      safeFinalBlowAllianceName,
+      safeFinalBlowCorpName,
+      safeFinalBlowShipTypeId,
+    ],
   );
 
   // Define attackerTicker to use the alliance ticker if available, otherwise the corp ticker.
-  const attackerTicker = attackerIsNpc ? '' : final_blow_alliance_ticker || final_blow_corp_ticker || '';
+  const attackerTicker = attackerIsNpc ? '' : safeFinalBlowAllianceTicker || safeFinalBlowCorpTicker || '';
 
   // For the attacker image link: if the attacker is not an NPC, link to the character page; otherwise, link to the kill page.
-  const attackerLink = attackerIsNpc ? zkillLink('kill', killmail_id) : zkillLink('character', final_blow_char_id);
+  const attackerLink = attackerIsNpc ? zkillLink('kill', safeKillmailId) : zkillLink('character', safeFinalBlowCharId);
 
   return (
     <div
       className={clsx(
         'h-10 flex items-center border-b border-stone-800',
         'text-xs whitespace-nowrap overflow-hidden leading-none',
+        'px-1',
+        className,
       )}
     >
       {/* Victim Section */}
@@ -107,7 +145,7 @@ export const KillRowDetail: React.FC<CompactKillRowProps> = ({ killDetails, syst
         {victimShipUrl && (
           <div className="relative shrink-0 w-8 h-8 overflow-hidden">
             <a
-              href={zkillLink('kill', killmail_id)}
+              href={zkillLink('kill', safeKillmailId)}
               target="_blank"
               rel="noopener noreferrer"
               className="block w-full h-full"
@@ -123,7 +161,7 @@ export const KillRowDetail: React.FC<CompactKillRowProps> = ({ killDetails, syst
         {victimPrimaryLogoUrl && (
           <WdTooltipWrapper content={victimPrimaryTooltip} position={TooltipPosition.top}>
             <a
-              href={zkillLink('kill', killmail_id)}
+              href={zkillLink('kill', safeKillmailId)}
               target="_blank"
               rel="noopener noreferrer"
               className="relative block shrink-0 w-8 h-8 overflow-hidden"
@@ -139,24 +177,26 @@ export const KillRowDetail: React.FC<CompactKillRowProps> = ({ killDetails, syst
       </div>
       <div className="flex flex-col ml-2 flex-1 min-w-0 overflow-hidden leading-[1rem]">
         <div className="truncate text-stone-200">
-          {victim_char_name}
+          {safeVictimCharName}
           <span className="text-stone-400"> / {victimAffiliationTicker}</span>
         </div>
-        <div className="truncate text-stone-300">
-          {victim_ship_name}
+        <div className="truncate text-stone-300 flex items-center gap-1">
+          <span className="text-stone-400 overflow-hidden text-ellipsis whitespace-nowrap max-w-[140px]">
+            {safeVictimShipName}
+          </span>
           {killValueFormatted && (
             <>
-              <span className="ml-1 text-stone-400">/</span>
-              <span className="ml-1 text-green-400">{killValueFormatted}</span>
+              <span className="text-stone-400">/</span>
+              <span className="text-green-400">{killValueFormatted}</span>
             </>
           )}
         </div>
       </div>
       <div className="flex items-center ml-auto gap-2">
         <div className="flex flex-col items-end flex-1 min-w-0 overflow-hidden text-right leading-[1rem]">
-          {!attackerIsNpc && (final_blow_char_name || attackerTicker) && (
+          {!attackerIsNpc && (safeFinalBlowCharName || attackerTicker) && (
             <div className="truncate text-stone-200">
-              {final_blow_char_name}
+              {safeFinalBlowCharName}
               {!attackerIsNpc && attackerTicker && <span className="ml-1 text-stone-400">/ {attackerTicker}</span>}
             </div>
           )}