chore: release version v1.56.6

This reverts commit 9b5ea2f84b.

.devcontainer/Dockerfile

@@ -1,6 +1,27 @@
 FROM elixir:1.17-otp-27
 
 RUN apt install -yq curl gnupg
+# Install OS packages and Node.js (via nodesource),
+# plus inotify-tools and yarn
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    sudo \
+    curl \
+    make \
+    git \
+    bash \
+    build-essential \
+    ca-certificates \
+    jq \
+    vim \
+    net-tools \
+    procps \
+    # Optionally add any other tools you need, e.g. vim, wget...
+    && curl -sL https://deb.nodesource.com/setup_18.x | bash - \
+    && apt-get install -y --no-install-recommends nodejs inotify-tools \
+    && npm install -g yarn \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/*
+
 RUN apt --fix-broken install
 
 RUN mix local.hex --force

.devcontainer/devcontainer.json

@@ -1,20 +1,30 @@
 {
   "name": "wanderer-dev",
   "dockerComposeFile": ["./docker-compose.yml"],
-  "extensions": [
-    "jakebecker.elixir-ls",
-    "JakeBecker.elixir-ls",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode"
-  ],
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "jakebecker.elixir-ls",
+        "JakeBecker.elixir-ls",
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode"
+      ],
+      "settings": {
+        "editor.formatOnSave": true,
+        "search.exclude": {
+          "**/doc": true
+        },
+        "elixirLS.dialyzerEnabled": false
+      }
+    }
+  },
   "service": "wanderer",
   "workspaceFolder": "/app",
   "shutdownAction": "stopCompose",
-  "settings": {
-    "editor.formatOnSave": true,
-    "search.exclude": {
-      "**/doc": true
-    },
-    "elixirLS.dialyzerEnabled": false
-  }
+  "features": {
+    "ghcr.io/devcontainers/features/common-utils:2": {
+      "networkArgs": ["--add-host=host.docker.internal:host-gateway"]
+    }
+  },
+  "forwardPorts": [4444]
 }

.devcontainer/docker-compose.yml

@@ -14,15 +14,15 @@ services:
 
   wanderer:
     environment:
-      PORT: 8000
+      PORT: 4444
       DB_HOST: db
-      WEB_APP_URL: "http://localhost:8000"
+      WEB_APP_URL: "http://localhost:4444"
       ERL_AFLAGS: "-kernel shell_history enabled"
     build:
       context: .
       dockerfile: Dockerfile
     ports:
-      - 8000:8000
+      - 4444:4444
     volumes:
       - ..:/app:delegated
       - ~/.gitconfig:/root/.gitconfig

.gitignore

@@ -26,6 +26,7 @@
 
 .env
 *.local.env
+test/manual/.auto*
 
 .direnv/
 .cache/

CHANGELOG.md

@@ -2,6 +2,231 @@
 
 <!-- changelog -->
 
+## [v1.56.6](https://github.com/wanderer-industries/wanderer/compare/v1.56.5...v1.56.6) (2025-03-19)
+
+
+
+
+## [v1.56.5](https://github.com/wanderer-industries/wanderer/compare/v1.56.4...v1.56.5) (2025-03-19)
+
+
+
+
+## [v1.56.4](https://github.com/wanderer-industries/wanderer/compare/v1.56.3...v1.56.4) (2025-03-19)
+
+
+
+
+## [v1.56.3](https://github.com/wanderer-industries/wanderer/compare/v1.56.2...v1.56.3) (2025-03-19)
+
+
+
+
+### Bug Fixes:
+
+* cloak key error behavior (#288)
+
+## [v1.56.2](https://github.com/wanderer-industries/wanderer/compare/v1.56.1...v1.56.2) (2025-03-18)
+
+
+
+
+### Bug Fixes:
+
+* show signature tooltip on top
+
+## [v1.56.1](https://github.com/wanderer-industries/wanderer/compare/v1.56.0...v1.56.1) (2025-03-18)
+
+
+
+
+### Bug Fixes:
+
+* update activity api (#284)
+
+* qol updates for dev (#283)
+
+## [v1.56.0](https://github.com/wanderer-industries/wanderer/compare/v1.55.2...v1.56.0) (2025-03-17)
+
+
+
+
+### Features:
+
+* add static wh info (#262)
+
+* add static wh info
+
+* api: add character activity api (#263)
+
+* api: add character activity api
+
+### Bug Fixes:
+
+* character activity hide error
+
+* character added to map on follow (#272)
+
+## [v1.55.2](https://github.com/wanderer-industries/wanderer/compare/v1.55.1...v1.55.2) (2025-03-16)
+
+
+
+
+### Bug Fixes:
+
+* Core: fixed lazy delete reset state
+
+## [v1.55.1](https://github.com/wanderer-industries/wanderer/compare/v1.55.0...v1.55.1) (2025-03-16)
+
+
+
+
+### Bug Fixes:
+
+* Core: fixed lazy delete timeouts
+
+* Core: fixed lazy delete settings
+
+* keep character api off by default (#258)
+
+## [v1.55.0](https://github.com/wanderer-industries/wanderer/compare/v1.54.1...v1.55.0) (2025-03-15)
+
+
+
+
+### Features:
+
+* News: added map subscription news
+
+* Api: added map audit base API. Added comments server validations.
+
+* enhance character activty and summmarize by user (#206)
+
+* enhance character activty and summmarize by user (#206)
+
+### Bug Fixes:
+
+* Core: updated balance top up instructions
+
+* updated connections cleanup logic
+
+* removed placeholder favicon (#240)
+
+* fixed activity aggregation and new user tracking (#230)
+
+* fixed activity aggregation and new user tracking (#230)
+
+* fixed activity aggregation and new user tracking (#230)
+
+* fixed activity aggregation and new user tracking (#230)
+
+## [v1.54.1](https://github.com/wanderer-industries/wanderer/compare/v1.54.0...v1.54.1) (2025-03-06)
+
+
+
+
+### Bug Fixes:
+
+* fix scroll and size issues with kills widget (#219)
+
+* fix scroll and size issues with kills widget
+
+## [v1.54.0](https://github.com/wanderer-industries/wanderer/compare/v1.53.4...v1.54.0) (2025-03-05)
+
+
+
+
+### Features:
+
+* added auto-refresh timeout for cloud new version updates
+
+* add selectable sig deletion timing, and color options (#208)
+
+## [v1.53.4](https://github.com/wanderer-industries/wanderer/compare/v1.53.3...v1.53.4) (2025-03-04)
+
+
+
+
+### Bug Fixes:
+
+* add retry on kills retrieval (#207)
+
+* add missing masses to wh sizes const (#215)
+
+## [v1.53.3](https://github.com/wanderer-industries/wanderer/compare/v1.53.2...v1.53.3) (2025-02-27)
+
+
+
+
+### Bug Fixes:
+
+* Map: little bit up performance for windows manager
+
+## [v1.53.2](https://github.com/wanderer-industries/wanderer/compare/v1.53.1...v1.53.2) (2025-02-27)
+
+
+
+
+## [v1.53.1](https://github.com/wanderer-industries/wanderer/compare/v1.53.0...v1.53.1) (2025-02-26)
+
+
+
+
+### Bug Fixes:
+
+* Core: Fixed map ACLs add/remove behaviour
+
+## [v1.53.0](https://github.com/wanderer-industries/wanderer/compare/v1.52.8...v1.53.0) (2025-02-26)
+
+
+
+
+### Features:
+
+* Auto-set connection EOL status and ship size when linking/editing signatures (#194)
+
+* Automatically set connection EOL status and ship size type when linking/updating signatures
+
+## [v1.52.8](https://github.com/wanderer-industries/wanderer/compare/v1.52.7...v1.52.8) (2025-02-26)
+
+
+
+
+### Bug Fixes:
+
+* Map: Added delete systems hotkey
+
+## [v1.52.7](https://github.com/wanderer-industries/wanderer/compare/v1.52.6...v1.52.7) (2025-02-24)
+
+
+
+
+### Bug Fixes:
+
+* update news image link (#204)
+
+* Map: Block map events for old client versions
+
+## [v1.52.6](https://github.com/wanderer-industries/wanderer/compare/v1.52.5...v1.52.6) (2025-02-23)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fixed delete systems on map changes
+
+## [v1.52.5](https://github.com/wanderer-industries/wanderer/compare/v1.52.4...v1.52.5) (2025-02-22)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fixed delete system on signature deletion
+
+* Map: Fixed delete system on signature deletion
+
 ## [v1.52.4](https://github.com/wanderer-industries/wanderer/compare/v1.52.3...v1.52.4) (2025-02-21)
 
 

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/js/hooks/Mapper/common-styles/fixes.scss

@@ -67,16 +67,22 @@
   }
 }
 
-.p-sortable-column {
-  font-size: 12px;
-  font-weight: bold;
-  padding: 3px 4px;
+.p-datatable-thead {
+  th, th.p-sortable-column {
+    font-size: 12px;
+    font-weight: bold;
+    padding: 3px 4px;
+  }
 }
 
 .p-selectable-row td {
   padding: 4px 4px;
 }
 
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 3px 4px;
+}
+
 .p-sortable-column > .p-column-header-content > span:last-child {
   transform: scale(0.7);
 

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

@@ -0,0 +1,45 @@
+.p-confirm-popup {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  @apply p-[12px];
+
+  &::before, &::after {
+    display: none;
+  }
+
+  .p-confirm-popup-content, .p-confirm-popup-footer {
+    @apply p-0 m-0;
+  }
+
+  .p-confirm-popup-content {
+    display: flex;
+    gap: 6px;
+  }
+
+  .p-confirm-popup-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 4px;
+  }
+
+  .p-confirm-popup-icon {
+    font-size: 14px;
+  }
+
+  .p-confirm-popup-message {
+    @apply m-0;
+    font-size: 12px;
+  }
+
+  .p-confirm-popup-reject.p-button-sm,
+  .p-confirm-popup-accept.p-button-sm {
+    @apply px-1.5 py-1 m-0;
+
+    & > span {
+      font-size: 12px;
+      line-height: 12px;
+    }
+  }
+
+}

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

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

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

@@ -2,7 +2,6 @@ import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect, useMemo }
 import ReactFlow, {
   Background,
   Edge,
-  EdgeChange,
   MiniMap,
   Node,
   NodeChange,
@@ -79,11 +78,12 @@ const edgeTypes = {
   floating: SolarSystemEdge,
 };
 
+export const MAP_ROOT_ID = 'MAP_ROOT_ID';
+
 interface MapCompProps {
   refn: ForwardedRef<MapHandlers>;
   onCommand: OutCommandHandler;
   onSelectionChange: OnMapSelectionChange;
-  onManualDelete(systems: string[]): void;
   onConnectionInfoClick?(e: SolarSystemConnection): void;
   onAddSystem?: OnMapAddSystemCallback;
   onSelectionContextMenu?: NodeSelectionMouseHandler;
@@ -105,7 +105,6 @@ const MapComp = ({
   onSystemContextMenu,
   onConnectionInfoClick,
   onSelectionContextMenu,
-  onManualDelete,
   isShowMinimap,
   showKSpaceBG,
   isThickConnections,
@@ -114,7 +113,7 @@ const MapComp = ({
   theme,
   onAddSystem,
 }: MapCompProps) => {
-  const { getNode, getNodes } = useReactFlow();
+  const { getNodes } = useReactFlow();
   const [nodes, , onNodesChange] = useNodesState<Node<SolarSystemRawType>>(initialNodes);
   const [edges, , onEdgesChange] = useEdgesState<Edge<SolarSystemConnection>>(initialEdges);
 
@@ -187,8 +186,6 @@ const MapComp = ({
 
   const handleNodesChange = useCallback(
     (changes: NodeChange[]) => {
-      const systemsIdsToRemove: string[] = [];
-
       // prevents single node deselection on background / same node click
       // allows deseletion of all nodes if multiple are currently selected
       if (changes.length === 1 && changes[0].type == 'select' && changes[0].selected === false) {
@@ -196,30 +193,12 @@ const MapComp = ({
       }
 
       const nextChanges = changes.reduce((acc, change) => {
-        if (change.type !== 'remove') {
-          return [...acc, change];
-        }
-
-        const node = getNode(change.id);
-        if (!node) {
-          return [...acc, change];
-        }
-
-        if (node.data.locked) {
-          return acc;
-        }
-
-        systemsIdsToRemove.push(node.data.id);
         return [...acc, change];
       }, [] as NodeChange[]);
 
-      if (systemsIdsToRemove.length > 0) {
-        onManualDelete(systemsIdsToRemove);
-      }
-
       onNodesChange(nextChanges);
     },
-    [getNode, getNodes, onManualDelete, onNodesChange],
+    [getNodes, onNodesChange],
   );
 
   useEffect(() => {
@@ -232,7 +211,10 @@ const MapComp = ({
 
   return (
     <>
-      <div className={clsx(classes.MapRoot, { [classes.BackgroundAlternateColor]: isSoftBackground })}>
+      <div
+        data-window-id={MAP_ROOT_ID}
+        className={clsx(classes.MapRoot, { [classes.BackgroundAlternateColor]: isSoftBackground })}
+      >
         <ReactFlow
           nodes={nodes}
           edges={edges}
@@ -276,7 +258,7 @@ const MapComp = ({
           minZoom={0.2}
           maxZoom={1.5}
           elevateNodesOnSelect
-          deleteKeyCode={['Delete']}
+          deleteKeyCode={['']}
           {...(isPanAndDrag
             ? {
                 selectionOnDrag: true,

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

@@ -53,7 +53,7 @@ const MapContext = createContext<MapContextProps>({
   outCommand: async () => void 0,
 });
 
-export const MapProvider: React.FC<MapProviderProps> = ({ children, onCommand }) => {
+export const MapProvider = ({ children, onCommand }: MapProviderProps) => {
   const { update, ref } = useContextStore<MapData>({ ...INITIAL_DATA });
 
   return (

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

@@ -2,7 +2,6 @@ import React, { RefObject, useMemo } from 'react';
 import { ContextMenu } from 'primereact/contextmenu';
 import { PrimeIcons } from 'primereact/api';
 import { MenuItem } from 'primereact/menuitem';
-import { Edge } from '@reactflow/core/dist/esm/types/edges';
 import { ConnectionType, MassState, ShipSizeStatus, SolarSystemConnection, TimeStatus } from '@/hooks/Mapper/types';
 import clsx from 'clsx';
 import classes from './ContextMenuConnection.module.scss';
@@ -14,6 +13,7 @@ import {
   SHIP_SIZES_NAMES_SHORT,
   SHIP_SIZES_SIZE,
 } from '@/hooks/Mapper/components/map/constants.ts';
+import { Edge } from 'reactflow';
 
 export interface ContextMenuConnectionProps {
   contextMenuRef: RefObject<ContextMenu>;

assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/useContextMenuConnectionHandlers.ts

@@ -1,9 +1,8 @@
-import { EdgeMouseHandler } from 'reactflow';
+import { Edge, EdgeMouseHandler } from 'reactflow';
 import { useCallback, useRef, useState } from 'react';
 import { ContextMenu } from 'primereact/contextmenu';
 import { useMapState } from '../../MapProvider.tsx';
 import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
-import { Edge } from '@reactflow/core/dist/esm/types/edges';
 import { ConnectionType, MassState, ShipSizeStatus, SolarSystemConnection, TimeStatus } from '@/hooks/Mapper/types';
 import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
 

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

@@ -1,8 +1,12 @@
+import React, { useMemo } from 'react';
 import { SystemKillsContent } from '../../../mapInterface/widgets/SystemKills/SystemKillsContent/SystemKillsContent';
 import { useKillsCounter } from '../../hooks/useKillsCounter';
 import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
 import { WithChildren, WithClassName } from '@/hooks/Mapper/types/common';
 
+const ITEM_HEIGHT = 35;
+const MIN_TOOLTIP_HEIGHT = 40;
+
 type TooltipSize = 'xs' | 'sm' | 'md' | 'lg';
 
 type KillsBookmarkTooltipProps = {
@@ -15,19 +19,41 @@ type KillsBookmarkTooltipProps = {
   WithClassName;
 
 export const KillsCounter = ({ killsCount, systemId, className, children, size = 'xs' }: KillsBookmarkTooltipProps) => {
-  const { isLoading, kills: detailedKills, systemNameMap } = useKillsCounter({ realSystemId: systemId });
+  const {
+    isLoading,
+    kills: detailedKills,
+    systemNameMap,
+  } = useKillsCounter({
+    realSystemId: systemId,
+  });
 
-  if (!killsCount || detailedKills.length === 0 || !systemId || isLoading) return null;
+  const limitedKills = useMemo(() => {
+    if (!detailedKills || detailedKills.length === 0) return [];
+    return detailedKills.slice(0, killsCount);
+  }, [detailedKills, killsCount]);
+
+  if (!killsCount || limitedKills.length === 0 || !systemId || isLoading) {
+    return null;
+  }
+
+  // Calculate height based on number of kills, but ensure a minimum height
+  const killsNeededHeight = limitedKills.length * ITEM_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: '100%', minWidth: '300px', overflow: 'hidden' }}>
-      <SystemKillsContent
-        kills={detailedKills}
-        systemNameMap={systemNameMap}
-        onlyOneSystem={true}
-        autoSize={true}
-        limit={killsCount}
-      />
+    <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>
   );
 

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/useSolarSystemLogic';
+import { useLocalCounter, useSolarSystemNode, useNodeKillsCount } from '../../hooks';
 import {
   EFFECT_BACKGROUND_STYLES,
   MARKER_BOOKMARK_BG_STYLES,

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

@@ -4,7 +4,7 @@ import { Handle, NodeProps, Position } from 'reactflow';
 import clsx from 'clsx';
 import classes from './SolarSystemNodeTheme.module.scss';
 import { PrimeIcons } from 'primereact/api';
-import { useLocalCounter, useNodeKillsCount, useSolarSystemNode } from '../../hooks/useSolarSystemLogic';
+import { useLocalCounter, useNodeKillsCount, useSolarSystemNode } from '../../hooks';
 import {
   EFFECT_BACKGROUND_STYLES,
   MARKER_BOOKMARK_BG_STYLES,

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

@@ -322,6 +322,9 @@ export const WORMHOLES_ADDITIONAL_INFO: Record<string, WormholesAdditionalInfoTy
 export const WORMHOLES_ADDITIONAL_INFO_BY_CLASS_ID: Record<string, WormholesAdditionalInfoType> =
   WORMHOLES_ADDITIONAL_INFO_RAW.reduce((acc, x) => ({ ...acc, [x.wormholeClassID]: x }), {});
 
+export const WORMHOLES_ADDITIONAL_INFO_BY_SHORT_NAME: Record<string, WormholesAdditionalInfoType> =
+  WORMHOLES_ADDITIONAL_INFO_RAW.reduce((acc, x) => ({ ...acc, [x.shortName]: x }), {});
+
 // export const SOLAR_SYSTEM_CLASS_NAMES = {
 //   ccp1 =  ,
 //   c1 = ,
@@ -650,6 +653,7 @@ export enum LABELS {
   l3 = '3',
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const LABELS_INFO: Record<string, any> = {
   [LABELS.clear]: { id: 'clear', name: 'Clear', shortName: '', icon: '' },
   [LABELS.la]: { id: 'la', name: 'Label A', shortName: 'A', icon: '' },
@@ -750,6 +754,17 @@ export const SHIP_SIZES_SIZE = {
   [ShipSizeStatus.capital]: '2M',
 };
 
+export const SHIP_MASSES_SIZE: Record<number, ShipSizeStatus> = {
+  5_000_000: ShipSizeStatus.small,
+  62_000_000: ShipSizeStatus.medium,
+  300_000_000: ShipSizeStatus.large,
+  375_000_000: ShipSizeStatus.large,
+  1_000_000_000: ShipSizeStatus.freight,
+  1_350_000_000: ShipSizeStatus.capital,
+  1_800_000_000: ShipSizeStatus.capital,
+  2_000_000_000: ShipSizeStatus.capital,
+};
+
 export const SHIP_SIZES_DESCRIPTION = {
   [ShipSizeStatus.small]: 'Frigate wormhole - up to Destroyer | 5K t.',
   [ShipSizeStatus.medium]: 'Cruise wormhole - up to Battlecruiser | 62K t.',

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

@@ -1,3 +1,11 @@
 export * from './useMapHandlers';
 export * from './useUpdateNodes';
 export * from './useNodesEdgesState';
+export * from './useBackgroundVars';
+export * from './useKillsCounter';
+export * from './useSystemName';
+export * from './useNodesEdgesState';
+export * from './useSolarSystemNode';
+export * from './useUnsplashedSignatures';
+export * from './useUpdateNodes';
+export * from './useNodeKillsCount';

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

@@ -27,13 +27,12 @@ export function useKillsCounter({ realSystemId }: UseKillsCounterProps) {
   const filteredKills = useMemo(() => {
     if (!allKills || allKills.length === 0) return [];
 
-    return [...allKills]
-      .sort((a, b) => {
-        const aTime = a.kill_time ? new Date(a.kill_time).getTime() : 0;
-        const bTime = b.kill_time ? new Date(b.kill_time).getTime() : 0;
-        return bTime - aTime;
-      })
-      .slice(0, 10);
+    // Sort kills by time, most recent first, but don't limit the number of kills
+    return [...allKills].sort((a, b) => {
+      const aTime = a.kill_time ? new Date(a.kill_time).getTime() : 0;
+      const bTime = b.kill_time ? new Date(b.kill_time).getTime() : 0;
+      return bTime - aTime;
+    });
   }, [allKills]);
 
   return {

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

@@ -0,0 +1,31 @@
+import { useMemo } from 'react';
+import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager';
+import { LABELS_INFO, LABELS_ORDER } from '@/hooks/Mapper/components/map/constants';
+interface UseLabelsInfoParams {
+  labels: string | null;
+  linkedSigPrefix: string | null;
+  isShowLinkedSigId: boolean;
+}
+
+export type LabelInfo = {
+  id: string;
+  shortName: string;
+};
+
+function sortedLabels(labels: string[]): LabelInfo[] {
+  if (!labels) return [];
+  return LABELS_ORDER.filter(x => labels.includes(x)).map(x => LABELS_INFO[x] as LabelInfo);
+}
+
+export function useLabelsInfo({ labels, linkedSigPrefix, isShowLinkedSigId }: UseLabelsInfoParams) {
+  const labelsManager = useMemo(() => new LabelsManager(labels ?? ''), [labels]);
+  const labelsInfo = useMemo(() => sortedLabels(labelsManager.list), [labelsManager]);
+  const labelCustom = useMemo(() => {
+    if (isShowLinkedSigId && linkedSigPrefix) {
+      return labelsManager.customLabel ? `${linkedSigPrefix}・${labelsManager.customLabel}` : linkedSigPrefix;
+    }
+    return labelsManager.customLabel;
+  }, [linkedSigPrefix, isShowLinkedSigId, labelsManager]);
+
+  return { labelsInfo, labelCustom };
+}

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

@@ -131,6 +131,21 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
               // do nothing here
               break;
 
+            case Commands.characterActivityData:
+              break;
+
+            case Commands.trackingCharactersData:
+              break;
+
+            case Commands.updateActivity:
+              break;
+
+            case Commands.updateTracking:
+              break;
+
+            case Commands.userSettingsUpdated:
+              break;
+
             default:
               console.warn(`Map handlers: Unknown command: ${type}`, data);
               break;

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

@@ -0,0 +1,42 @@
+import { useEffect, useState, useCallback } from 'react';
+import { useMapEventListener } from '@/hooks/Mapper/events';
+import { Commands } from '@/hooks/Mapper/types';
+
+interface Kill {
+  solar_system_id: number | string;
+  kills: number;
+}
+
+interface MapEvent {
+  name: Commands;
+  data?: any;
+  payload?: Kill[];
+}
+
+export function useNodeKillsCount(
+  systemId: number | string,
+  initialKillsCount: number | null
+): number | null {
+  const [killsCount, setKillsCount] = useState<number | null>(initialKillsCount);
+
+  useEffect(() => {
+    setKillsCount(initialKillsCount);
+  }, [initialKillsCount]);
+
+  const handleEvent = useCallback((event: MapEvent): boolean => {
+    if (event.name === Commands.killsUpdated && Array.isArray(event.payload)) {
+      const killForSystem = event.payload.find(
+        kill => kill.solar_system_id.toString() === systemId.toString()
+      );
+      if (killForSystem && typeof killForSystem.kills === 'number') {
+        setKillsCount(killForSystem.kills);
+      }
+      return true;
+    }
+    return false;
+  }, [systemId]);
+
+  useMapEventListener(handleEvent);
+
+  return killsCount;
+}

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { MapSolarSystemType } from '../map.types';
 import { NodeProps } from 'reactflow';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
@@ -7,19 +7,12 @@ import { useMapState } from '@/hooks/Mapper/components/map/MapProvider';
 import { useDoubleClick } from '@/hooks/Mapper/hooks/useDoubleClick';
 import { REGIONS_MAP, Spaces } from '@/hooks/Mapper/constants';
 import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace';
-import { getSystemClassStyles, prepareUnsplashedChunks } from '@/hooks/Mapper/components/map/helpers';
+import { getSystemClassStyles } from '@/hooks/Mapper/components/map/helpers';
 import { sortWHClasses } from '@/hooks/Mapper/helpers';
-import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager';
-import { CharacterTypeRaw, Commands, OutCommand, SystemSignature } from '@/hooks/Mapper/types';
-import { LABELS_INFO, LABELS_ORDER } from '@/hooks/Mapper/components/map/constants';
-import { useMapEventListener } from '@/hooks/Mapper/events';
-
-export type LabelInfo = {
-  id: string;
-  shortName: string;
-};
-
-export type UnsplashedSignatureType = SystemSignature & { sig_id: string };
+import { CharacterTypeRaw, OutCommand, SystemSignature } from '@/hooks/Mapper/types';
+import { useUnsplashedSignatures } from './useUnsplashedSignatures';
+import { useSystemName } from './useSystemName';
+import { LabelInfo, useLabelsInfo } from './useLabelsInfo';
 
 function getActivityType(count: number): string {
   if (count <= 5) return 'activityNormal';
@@ -34,11 +27,6 @@ const SpaceToClass: Record<string, string> = {
   [Spaces.Gallente]: 'Gallente',
 };
 
-function sortedLabels(labels: string[]): LabelInfo[] {
-  if (!labels) return [];
-  return LABELS_ORDER.filter(x => labels.includes(x)).map(x => LABELS_INFO[x] as LabelInfo);
-}
-
 export function useLocalCounter(nodeVars: SolarSystemNodeVars) {
   const localCounterCharacters = useMemo(() => {
     return nodeVars.charactersInSystem
@@ -127,21 +115,19 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarS
 
   const linkedSigPrefix = useMemo(() => (linkedSigEveId ? linkedSigEveId.split('-')[0] : null), [linkedSigEveId]);
 
-  const labelsManager = useMemo(() => new LabelsManager(labels ?? ''), [labels]);
-  const labelsInfo = useMemo(() => sortedLabels(labelsManager.list), [labelsManager]);
-  const labelCustom = useMemo(() => {
-    if (isShowLinkedSigId && linkedSigPrefix) {
-      return labelsManager.customLabel ? `${linkedSigPrefix}・${labelsManager.customLabel}` : linkedSigPrefix;
-    }
-    return labelsManager.customLabel;
-  }, [linkedSigPrefix, isShowLinkedSigId, labelsManager]);
+  const { labelsInfo, labelCustom } = useLabelsInfo({
+    labels,
+    linkedSigPrefix,
+    isShowLinkedSigId,
+  });
 
   const killsCount = useMemo(() => kills[solar_system_id] ?? null, [kills, solar_system_id]);
   const killsActivityType = killsCount ? getActivityType(killsCount) : null;
 
-  const hasUserCharacters = useMemo(() => {
-    return charactersInSystem.some(x => userCharacters.includes(x.eve_id));
-  }, [charactersInSystem, userCharacters]);
+  const hasUserCharacters = useMemo(
+    () => charactersInSystem.some(x => userCharacters.includes(x.eve_id)),
+    [charactersInSystem, userCharacters],
+  );
 
   const dbClick = useDoubleClick(() => {
     outCommand({
@@ -153,54 +139,19 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarS
   const showHandlers = isConnecting || hoverNodeId === id;
 
   const space = showKSpaceBG ? REGIONS_MAP[region_id] : '';
-  const regionClass = showKSpaceBG ? SpaceToClass[space] : null;
+  const regionClass = showKSpaceBG ? SpaceToClass[space] || null : null;
 
-  const computedTemporaryName = useMemo(() => {
-    if (!isTempSystemNameEnabled) {
-      return '';
-    }
-    if (isShowLinkedSigIdTempName && linkedSigPrefix) {
-      return temporary_name ? `${linkedSigPrefix}・${temporary_name}` : `${linkedSigPrefix}・${solar_system_name}`;
-    }
-    return temporary_name;
-  }, [isShowLinkedSigIdTempName, isTempSystemNameEnabled, linkedSigPrefix, solar_system_name, temporary_name]);
+  const { systemName, computedTemporaryName, customName } = useSystemName({
+    isTempSystemNameEnabled,
+    temporary_name,
+    solar_system_name: solar_system_name || '',
+    isShowLinkedSigIdTempName,
+    linkedSigPrefix,
+    name,
+  });
 
-  const systemName = useMemo(() => {
-    if (isTempSystemNameEnabled && computedTemporaryName) {
-      return computedTemporaryName;
-    }
-    return solar_system_name;
-  }, [isTempSystemNameEnabled, solar_system_name, computedTemporaryName]);
+  const { unsplashedLeft, unsplashedRight } = useUnsplashedSignatures(systemSigs, isShowUnsplashedSignatures);
 
-  const customName = useMemo(() => {
-    if (isTempSystemNameEnabled && computedTemporaryName && name) {
-      return name;
-    }
-    if (solar_system_name !== name && name) {
-      return name;
-    }
-    return null;
-  }, [isTempSystemNameEnabled, computedTemporaryName, name, solar_system_name]);
-
-  const [unsplashedLeft, unsplashedRight] = useMemo(() => {
-    if (!isShowUnsplashedSignatures) {
-      return [[], []];
-    }
-    return prepareUnsplashedChunks(
-      systemSigs
-        .filter(s => s.group === 'Wormhole' && !s.linked_system)
-        .map(s => ({
-          eve_id: s.eve_id,
-          type: s.type,
-          custom_info: s.custom_info,
-          kind: s.kind,
-          name: s.name,
-          group: s.group,
-        })) as UnsplashedSignatureType[],
-    );
-  }, [isShowUnsplashedSignatures, systemSigs]);
-
-  // Ensure hubs are always strings.
   const hubsAsStrings = useMemo(() => hubs.map(item => item.toString()), [hubs]);
 
   const nodeVars: SolarSystemNodeVars = {
@@ -225,12 +176,10 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarS
     dbClick,
     sortedStatics,
     effectName: effect_name,
-    regionName: region_name,
     solarSystemId: solar_system_id.toString(),
-    solarSystemName: solar_system_name,
     locked,
     hubs: hubsAsStrings,
-    name: name,
+    name,
     isConnecting,
     hoverNodeId,
     charactersInSystem,
@@ -239,6 +188,8 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarS
     isThickConnections,
     classTitle: class_title,
     temporaryName: computedTemporaryName,
+    regionName: region_name,
+    solarSystemName: solar_system_name,
   };
 
   return nodeVars;
@@ -281,25 +232,3 @@ export interface SolarSystemNodeVars {
   classTitle: string | null;
   temporaryName?: string | null;
 }
-
-export function useNodeKillsCount(systemId: number | string, initialKillsCount: number | null): number | null {
-  const [killsCount, setKillsCount] = useState<number | null>(initialKillsCount);
-
-  useEffect(() => {
-    setKillsCount(initialKillsCount);
-  }, [initialKillsCount]);
-
-  useMapEventListener(event => {
-    if (event.name === Commands.killsUpdated && event.data?.toString() === systemId.toString()) {
-      //@ts-ignore
-      if (event.payload && typeof event.payload.kills === 'number') {
-        // @ts-ignore
-        setKillsCount(event.payload.kills);
-      }
-      return true;
-    }
-    return false;
-  });
-
-  return killsCount;
-}

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

@@ -0,0 +1,49 @@
+// useSystemName.ts
+import { useMemo } from 'react';
+
+interface UseSystemNameParams {
+  isTempSystemNameEnabled: boolean;
+  temporary_name?: string | null;
+  solar_system_name: string;
+  isShowLinkedSigIdTempName: boolean;
+  linkedSigPrefix: string | null;
+  name?: string | null;
+}
+
+export function useSystemName({
+  isTempSystemNameEnabled,
+  temporary_name,
+  solar_system_name,
+  isShowLinkedSigIdTempName,
+  linkedSigPrefix,
+  name,
+}: UseSystemNameParams) {
+  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]);
+
+  const systemName = useMemo(() => {
+    if (isTempSystemNameEnabled && computedTemporaryName) {
+      return computedTemporaryName;
+    }
+    return solar_system_name;
+  }, [isTempSystemNameEnabled, computedTemporaryName, solar_system_name]);
+
+  const customName = useMemo(() => {
+    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/hooks/useUnsplashedSignatures.ts

@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+import { SystemSignature } from '@/hooks/Mapper/types';
+import { prepareUnsplashedChunks } from '@/hooks/Mapper/components/map/helpers';
+
+export type UnsplashedSignatureType = SystemSignature & { sig_id: string };
+
+export function useUnsplashedSignatures(systemSigs: SystemSignature[], isShowUnsplashedSignatures: boolean) {
+  return useMemo(() => {
+    if (!isShowUnsplashedSignatures) {
+      return {
+        unsplashedLeft: [] as SystemSignature[],
+        unsplashedRight: [] as SystemSignature[],
+      };
+    }
+    const chunks = prepareUnsplashedChunks(
+      systemSigs
+        .filter(s => s.group === 'Wormhole' && !s.linked_system)
+        .map(s => ({
+          eve_id: s.eve_id,
+          type: s.type,
+          custom_info: s.custom_info,
+          kind: s.kind,
+          name: s.name,
+          group: s.group,
+        })) as UnsplashedSignatureType[],
+    );
+    const [unsplashedLeft, unsplashedRight] = chunks;
+    return { unsplashedLeft, unsplashedRight };
+  }, [isShowUnsplashedSignatures, systemSigs]);
+}

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

@@ -6,9 +6,9 @@ import { SolarSystemRawType } from '@/hooks/Mapper/types';
 const useThrottle = () => {
   const throttleSeed = useRef<number | null>(null);
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const throttleFunction = useRef((func: any, delay = 200) => {
     if (!throttleSeed.current) {
-      // Call the callback immediately for the first time
       func();
       throttleSeed.current = setTimeout(() => {
         throttleSeed.current = null;
@@ -75,7 +75,7 @@ export const useUpdateNodes = (nodes: Node<SolarSystemRawType>[]) => {
 
     const visibleNodes = new Set(nodes.filter(x => isNodeVisible(x, viewport)).map(x => x.id));
     update({ visibleNodes });
-  }, [nodes]);
+  }, [getViewport, nodes, update]);
 
   useOnViewportChange({
     onChange: () => throttle(updateNodesVisibility.bind(this)),
@@ -84,5 +84,5 @@ export const useUpdateNodes = (nodes: Node<SolarSystemRawType>[]) => {
 
   useEffect(() => {
     updateNodesVisibility();
-  }, [nodes]);
+  }, [nodes, updateNodesVisibility]);
 };

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

@@ -0,0 +1,52 @@
+import { MarkdownComment } from '@/hooks/Mapper/components/mapInterface/components/Comments/components';
+import { useEffect, useRef, useState } from 'react';
+import { CommentType } from '@/hooks/Mapper/types';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+
+export interface CommentsProps {}
+
+// eslint-disable-next-line no-empty-pattern
+export const Comments = ({}: CommentsProps) => {
+  const [commentsList, setCommentsList] = useState<CommentType[]>([]);
+
+  const {
+    data: { selectedSystems },
+    comments: { loadComments, comments, lastUpdateKey },
+  } = useMapRootState();
+
+  const [systemId] = selectedSystems;
+
+  const ref = useRef({ loadComments, systemId });
+  ref.current = { loadComments, systemId };
+
+  useEffect(() => {
+    const commentsBySystem = comments.get(systemId);
+    if (!commentsBySystem) {
+      return;
+    }
+
+    const els = [...commentsBySystem.comments].sort((a, b) => +new Date(b.updated_at) - +new Date(a.updated_at));
+
+    setCommentsList(els);
+  }, [systemId, lastUpdateKey, comments]);
+
+  useEffect(() => {
+    ref.current.loadComments(systemId);
+  }, [systemId]);
+
+  if (commentsList.length === 0) {
+    return (
+      <div className="w-full h-full flex justify-center items-center select-none text-stone-400/80 text-sm">
+        Not comments found here
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-1 mt-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} />
+      ))}
+    </div>
+  );
+};

assets/js/hooks/Mapper/components/mapInterface/components/Comments/components/MarkdownComment/MarkdownComment.module.scss

@@ -0,0 +1,70 @@
+.MarkdownCommentRoot {
+  border-left-width: 3px;
+
+  @apply text-[12px] leading-[1.2] text-stone-300 break-words;
+  @apply bg-gradient-to-r from-stone-600/40 via-stone-600/10 to-stone-600/0;
+
+  .h1 {
+    @apply text-[12px] font-normal m-0 p-0 border-none break-words whitespace-normal;
+  }
+
+  .h2 {
+    @apply text-[12px] font-normal m-0 p-0 border-none break-words whitespace-normal;
+  }
+
+  .h3 {
+    @apply text-[12px] font-normal m-0 p-0 border-none break-words whitespace-normal;
+  }
+
+  .h4 {
+    @apply text-[12px] font-normal m-0 p-0 border-none break-words whitespace-normal;
+  }
+
+  .h5 {
+    @apply text-[12px] font-normal m-0 p-0 border-none break-words whitespace-normal;
+  }
+
+  .h6 {
+    @apply text-[12px] font-normal m-0 p-0 border-none break-words whitespace-normal;
+  }
+
+  p {
+    @apply m-0 p-0 break-words whitespace-normal;
+  }
+
+  ul, ol {
+    @apply m-0 p-0 list-none;
+  }
+
+  li {
+    @apply m-0 break-words whitespace-normal;
+  }
+
+  blockquote {
+    @apply border-l-4 border-cyan-400 p-2 m-0 font-normal text-stone-300 italic break-words whitespace-normal;
+  }
+
+  a {
+    @apply text-violet-400 cursor-pointer transition-colors duration-200 break-words whitespace-normal;
+
+    &:hover {
+      @apply underline;
+    }
+  }
+
+  b, strong {
+    @apply font-bold text-green-400 break-words whitespace-normal;
+  }
+
+  i, em {
+    @apply italic text-pink-400 break-words whitespace-normal;
+  }
+
+  del {
+    @apply line-through text-stone-500 break-words whitespace-normal;
+  }
+
+  hr {
+    @apply border-none h-[1px] bg-cyan-400 opacity-50 my-2;
+  }
+}

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

@@ -0,0 +1,95 @@
+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 { useGetCacheCharacter } from '@/hooks/Mapper/mapRootProvider/hooks/api';
+import { useCallback, useRef, useState } from 'react';
+import { WdTransition } from '@/hooks/Mapper/components/ui-kit/WdTransition/WdTransition.tsx';
+import { PrimeIcons } from 'primereact/api';
+import { ConfirmPopup } from 'primereact/confirmpopup';
+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;
+  time: string;
+  characterEveId: string;
+  id: string;
+}
+
+export const MarkdownComment = ({ text, time, characterEveId, id }: MarkdownCommentProps) => {
+  const char = useGetCacheCharacter(characterEveId);
+  const [hovered, setHovered] = useState(false);
+
+  const cpRemoveBtnRef = useRef<HTMLElement>();
+  const [cpRemoveVisible, setCpRemoveVisible] = useState(false);
+
+  const { outCommand } = useMapRootState();
+  const ref = useRef({ outCommand, id });
+  ref.current = { outCommand, id };
+
+  const handleDelete = useCallback(async () => {
+    await ref.current.outCommand({
+      type: OutCommand.deleteSystemComment,
+      data: ref.current.id,
+    });
+  }, []);
+
+  const handleMouseEnter = useCallback(() => setHovered(true), []);
+  const handleMouseLeave = useCallback(() => setHovered(false), []);
+
+  const handleShowCP = useCallback(() => setCpRemoveVisible(true), []);
+  const handleHideCP = useCallback(() => setCpRemoveVisible(false), []);
+
+  return (
+    <>
+      <InfoDrawer
+        labelClassName="mb-[3px]"
+        className={clsx(classes.MarkdownCommentRoot, 'p-1 bg-stone-700/20 ')}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        title={
+          <div className="flex items-center justify-between">
+            <div>
+              <span className="text-stone-500">
+                by <span className="text-orange-300/70">{char?.data?.name ?? ''}</span>
+              </span>
+            </div>
+
+            <WdTransition active={hovered} timeout={100}>
+              <div className="text-stone-500 max-h-[12px]">
+                {!hovered && <TimeAgo timestamp={time} />}
+                {hovered && (
+                  // @ts-ignore
+                  <div ref={cpRemoveBtnRef}>
+                    <WdImgButton
+                      className={clsx(PrimeIcons.TRASH, 'hover:text-red-400')}
+                      tooltip={TOOLTIP_PROPS}
+                      onClick={handleShowCP}
+                    />
+                  </div>
+                )}
+              </div>
+            </WdTransition>
+          </div>
+        }
+      >
+        <Markdown remarkPlugins={REMARK_PLUGINS}>{text}</Markdown>
+      </InfoDrawer>
+
+      <ConfirmPopup
+        target={cpRemoveBtnRef.current}
+        visible={cpRemoveVisible}
+        onHide={handleHideCP}
+        message="Are you sure you want to delete?"
+        icon="pi pi-exclamation-triangle"
+        accept={handleDelete}
+      />
+    </>
+  );
+};

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

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

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

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

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

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

assets/js/hooks/Mapper/components/mapInterface/components/Comments/markdownexample.ts

@@ -0,0 +1,26 @@
+export const markdown = `
+  # Heading 1
+  ## Heading 2
+  ### Heading 3
+  #### Heading 4
+  ##### Heading 5
+  ###### Heading 6
+
+  ---
+
+  ## Paragraphs
+  This is a regular text paragraph.
+
+  Another paragraph, but with **bold** and *italic* text, as well as ~~strikethrough~~.
+
+  > This is a block quote.
+  > Second line of the quote.
+
+  ## Links
+  [Link to Google](https://www.google.com)
+
+  ## Horizontal Line
+  A block quote with ~strikethrough~ and a URL: https://reactjs.org.
+  ---
+
+  `;

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

@@ -0,0 +1,72 @@
+import { TooltipPosition, WdImageSize, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
+import clsx from 'clsx';
+import { PrimeIcons } from 'primereact/api';
+import { MarkdownEditor } from '@/hooks/Mapper/components/mapInterface/components/MarkdownEditor';
+import { useHotkey } from '@/hooks/Mapper/hooks';
+import { useCallback, useRef, useState } from 'react';
+import { OutCommand } from '@/hooks/Mapper/types';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+
+export interface CommentsEditorProps {}
+
+export const CommentsEditor = ({}: CommentsEditorProps) => {
+  const [textVal, setTextVal] = useState('');
+
+  const {
+    data: { selectedSystems },
+    outCommand,
+  } = useMapRootState();
+
+  const [systemId] = selectedSystems;
+
+  const ref = useRef({ outCommand, systemId, textVal });
+  ref.current = { outCommand, systemId, textVal };
+
+  const handleFinishEdit = useCallback(async () => {
+    if (ref.current.textVal === '') {
+      return;
+    }
+
+    await ref.current.outCommand({
+      type: OutCommand.addSystemComment,
+      data: {
+        solarSystemId: ref.current.systemId,
+        value: ref.current.textVal,
+      },
+    });
+    setTextVal('');
+  }, []);
+
+  const handleClick = async () => {
+    await handleFinishEdit();
+  };
+
+  useHotkey(true, ['Enter'], async () => {
+    await handleFinishEdit();
+  });
+
+  return (
+    <MarkdownEditor
+      value={textVal}
+      onChange={setTextVal}
+      overlayContent={
+        <div className="w-full h-full flex justify-end items-end pointer-events-none pb-[1px] pr-[8px]">
+          <WdImgButton
+            disabled={textVal.length === 0}
+            tooltip={{
+              position: TooltipPosition.bottom,
+              content: (
+                <span>
+                  Also you may use <span className="text-cyan-400">Meta + Enter</span> hotkey.
+                </span>
+              ),
+            }}
+            textSize={WdImageSize.large}
+            className={clsx(PrimeIcons.SEND, 'text-[14px]')}
+            onClick={handleClick}
+          />
+        </div>
+      }
+    />
+  );
+};

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

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

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

@@ -0,0 +1,40 @@
+.CERoot {
+  @apply border border-stone-400/30 rounded-[2px];
+
+  :global {
+    .cm-content {
+      @apply bg-stone-600/40;
+    }
+
+    .cm-scroller {
+      scrollbar-width: thin;
+      scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
+    }
+
+    .cm-scroller::-webkit-scrollbar {
+      width: 10px;
+    }
+
+    .cm-scroller::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .cm-scroller::-webkit-scrollbar-thumb {
+      background-color: rgba(255, 255, 255, 0.5);
+      border-radius: 5px;
+      border: 2px solid transparent;
+      background-clip: content-box;
+    }
+
+    .cm-scroller::-webkit-scrollbar-thumb:hover {
+      background-color: rgba(255, 255, 255, 0.7);
+    }
+
+    .cm-scroller::-webkit-scrollbar-button {
+      display: none;
+      height: 0;
+      width: 0;
+    }
+
+  }
+}

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

@@ -0,0 +1,87 @@
+import { ReactNode, useCallback, useRef, useState } from 'react';
+import CodeMirror, { ViewPlugin } from '@uiw/react-codemirror';
+import { markdown } from '@codemirror/lang-markdown';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { EditorView, type ViewUpdate } from '@codemirror/view';
+
+import classes from './MarkdownEditor.module.scss';
+import clsx from 'clsx';
+
+// TODO special plugin which force CodeMirror using capture for paste event
+const stopEventPropagationPlugin = ViewPlugin.fromClass(
+  class {
+    constructor(view: EditorView) {
+      // @ts-ignore
+      this.view = view;
+
+      // @ts-ignore
+      this.pasteHandler = (event: Event) => {
+        console.log('Paste done in editor, stopping global listeners.');
+        event.stopPropagation();
+      };
+
+      // @ts-ignore
+      view.dom.addEventListener('paste', this.pasteHandler);
+    }
+
+    destroy() {
+      // @ts-ignore
+      this.view.dom.removeEventListener('paste', this.pasteHandler);
+    }
+  },
+);
+
+const CODE_MIRROR_EXTENSIONS = [
+  markdown(),
+  EditorView.lineWrapping,
+  EditorView.theme({
+    '&': { backgroundColor: 'transparent !important' },
+    '& .cm-gutterElement': { display: 'none' },
+  }),
+  stopEventPropagationPlugin,
+];
+
+export interface MarkdownEditorProps {
+  overlayContent?: ReactNode;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export const MarkdownEditor = ({ value, onChange, overlayContent }: MarkdownEditorProps) => {
+  const [hasShift, setHasShift] = useState(false);
+
+  const refData = useRef({ onChange });
+  refData.current = { onChange };
+
+  const handleOnChange = useCallback((value: string, viewUpdate: ViewUpdate) => {
+    // Rerender happens after change
+    setTimeout(() => {
+      const scrollDOM = viewUpdate.view.scrollDOM;
+      setHasShift(scrollDOM.scrollHeight > scrollDOM.clientHeight);
+    }, 0);
+
+    refData.current.onChange(value);
+  }, []);
+
+  return (
+    <div className={clsx(classes.MarkdownEditor, 'relative')}>
+      <CodeMirror
+        value={value}
+        height="70px"
+        extensions={CODE_MIRROR_EXTENSIONS}
+        className={classes.CERoot}
+        theme={oneDark}
+        onChange={handleOnChange}
+        placeholder="Start typing..."
+      />
+      <div
+        className={clsx('absolute top-0 left-0 h-full pointer-events-none', {
+          'w-full': !hasShift,
+          'w-[calc(100%-10px)]': hasShift,
+        })}
+      >
+        {overlayContent}
+      </div>
+    </div>
+  );
+};

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

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

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

@@ -1,57 +1,163 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { Dialog } from 'primereact/dialog';
 
 import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
-import { SystemSignature } from '@/hooks/Mapper/types';
+import { CommandLinkSignatureToSystem, SignatureGroup, SystemSignature, TimeStatus } from '@/hooks/Mapper/types';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { CommandLinkSignatureToSystem } from '@/hooks/Mapper/types';
 import { SystemSignaturesContent } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent';
-import { SHOW_DESCRIPTION_COLUMN_SETTING } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatures';
+import { parseSignatureCustomInfo } from '@/hooks/Mapper/helpers/parseSignatureCustomInfo';
+import { getWhSize } from '@/hooks/Mapper/helpers/getWhSize';
+import { useSystemInfo } from '@/hooks/Mapper/components/hooks';
 import {
-  Setting,
-  COSMIC_SIGNATURE,
-} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog';
-import { SignatureGroup } from '@/hooks/Mapper/types';
+  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';
+
+const K162_SIGNATURE_TYPE = WORMHOLES_ADDITIONAL_INFO_BY_SHORT_NAME['K162'].shortName;
 
 interface SystemLinkSignatureDialogProps {
   data: CommandLinkSignatureToSystem;
   setVisible: (visible: boolean) => void;
 }
 
-const signatureSettings: Setting[] = [
-  { key: COSMIC_SIGNATURE, name: 'Show Cosmic Signatures', value: true },
-  { key: SignatureGroup.Wormhole, name: 'Wormhole', value: true },
-  { key: SHOW_DESCRIPTION_COLUMN_SETTING, name: 'Show Description Column', value: true, isFilter: false },
-];
+export const LINK_SIGNTATURE_SETTINGS: SignatureSettingsType = {
+  [SETTINGS_KEYS.COSMIC_SIGNATURE]: true,
+  [SETTINGS_KEYS.WORMHOLE]: true,
+  [SETTINGS_KEYS.SHOW_DESCRIPTION_COLUMN]: true,
+};
+
+// Extend the SignatureCustomInfo type to include k162Type
+interface ExtendedSignatureCustomInfo {
+  k162Type?: string;
+  isEOL?: boolean;
+  [key: string]: unknown;
+}
 
 export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignatureDialogProps) => {
-  const { outCommand } = useMapRootState();
+  const {
+    outCommand,
+    data: { wormholes },
+  } = useMapRootState();
 
   const ref = useRef({ outCommand });
   ref.current = { outCommand };
 
+  // Get system info for the target system
+  const { staticInfo: targetSystemInfo } = useSystemInfo({ systemId: `${data.solar_system_target}` });
+
+  // Get the system class group for the target system
+  const targetSystemClassGroup = useMemo(() => {
+    if (!targetSystemInfo) return null;
+    const systemClassId = targetSystemInfo.system_class;
+
+    const systemClassKey = Object.keys(SOLAR_SYSTEM_CLASS_IDS).find(
+      key => SOLAR_SYSTEM_CLASS_IDS[key as keyof typeof SOLAR_SYSTEM_CLASS_IDS] === systemClassId,
+    );
+
+    if (!systemClassKey) return null;
+
+    return (
+      SOLAR_SYSTEM_CLASSES_TO_CLASS_GROUPS[systemClassKey as keyof typeof SOLAR_SYSTEM_CLASSES_TO_CLASS_GROUPS] || null
+    );
+  }, [targetSystemInfo]);
+
   const handleHide = useCallback(() => {
     setVisible(false);
   }, [setVisible]);
 
-  const handleSelect = useCallback(
+  const filterSignature = useCallback(
     (signature: SystemSignature) => {
+      if (signature.group !== SignatureGroup.Wormhole || !targetSystemClassGroup) {
+        return true;
+      }
+
+      if (!signature.type) {
+        return true;
+      }
+
+      if (signature.type === K162_SIGNATURE_TYPE) {
+        // Parse the custom info to see if the user has specified what class this K162 leads to
+        const customInfo = parseSignatureCustomInfo(signature.custom_info) as ExtendedSignatureCustomInfo;
+
+        // If the user has specified a k162Type for this K162
+        if (customInfo.k162Type) {
+          // Get the K162 type information
+          const k162TypeInfo = K162_TYPES_MAP[customInfo.k162Type];
+
+          if (k162TypeInfo) {
+            // Check if the k162Type matches our target system class
+            return customInfo.k162Type === targetSystemClassGroup;
+          }
+        }
+
+        // If no k162Type is specified or we couldn't find type info, allow it
+        return true;
+      }
+
+      // Find the wormhole data for this signature type
+      const wormholeData = wormholes.find(wh => wh.name === signature.type);
+      if (!wormholeData) {
+        return true; // If we don't know the destination, don't filter it out
+      }
+
+      // Get the destination system class from the wormhole data
+      const destinationClass = wormholeData.dest;
+
+      // Check if the destination class matches the target system class
+      const isMatch = destinationClass === targetSystemClassGroup;
+      return isMatch;
+    },
+    [targetSystemClassGroup, wormholes],
+  );
+
+  const handleSelect = useCallback(
+    async (signature: SystemSignature) => {
       if (!signature) {
         return;
       }
 
       const { outCommand } = ref.current;
 
-      outCommand({
+      await outCommand({
         type: OutCommand.linkSignatureToSystem,
         data: {
           ...data,
           signature_eve_id: signature.eve_id,
         },
       });
+
+      if (parseSignatureCustomInfo(signature.custom_info).isEOL === true) {
+        await outCommand({
+          type: OutCommand.updateConnectionTimeStatus,
+          data: {
+            source: data.solar_system_source,
+            target: data.solar_system_target,
+            value: TimeStatus.eol,
+          },
+        });
+      }
+
+      const whShipSize = getWhSize(wormholes, signature.type);
+      if (whShipSize) {
+        await outCommand({
+          type: OutCommand.updateConnectionShipSizeType,
+          data: {
+            source: data.solar_system_source,
+            target: data.solar_system_target,
+            value: whShipSize,
+          },
+        });
+      }
+
       setVisible(false);
     },
-    [data, setVisible],
+    [data, setVisible, wormholes],
   );
 
   return (
@@ -66,9 +172,10 @@ export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignat
       <SystemSignaturesContent
         systemId={`${data.solar_system_source}`}
         hideLinkedSignatures
-        settings={signatureSettings}
+        settings={LINK_SIGNTATURE_SETTINGS}
         onSelect={handleSelect}
         selectable={true}
+        filterSignature={filterSignature}
       />
     </Dialog>
   );

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

@@ -5,12 +5,14 @@ import clsx from 'clsx';
 
 export interface WidgetProps {
   label: React.ReactNode | string;
+  windowId?: string;
   children?: React.ReactNode;
 }
 
-export const Widget = ({ label, children }: WidgetProps) => {
+export const Widget = ({ label, children, windowId }: WidgetProps) => {
   return (
     <div
+      data-window-id={windowId}
       className={clsx(
         classes.root,
         'flex flex-col w-full h-full rounded',

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

@@ -7,8 +7,9 @@ import {
   SystemStructures,
   SystemKills,
 } from '@/hooks/Mapper/components/mapInterface/widgets';
+import { CommentsWidget } from '@/hooks/Mapper/components/mapInterface/widgets/CommentsWidget';
 
-export const CURRENT_WINDOWS_VERSION = 8;
+export const CURRENT_WINDOWS_VERSION = 9;
 export const WINDOWS_LOCAL_STORE_KEY = 'windows:settings:v2';
 
 export enum WidgetsIds {
@@ -18,6 +19,7 @@ export enum WidgetsIds {
   routes = 'routes',
   structures = 'structures',
   kills = 'kills',
+  comments = 'comments',
 }
 
 export const STORED_VISIBLE_WIDGETS_DEFAULT = [
@@ -70,6 +72,13 @@ export const DEFAULT_WIDGETS: WindowProps[] = [
     zIndex: 0,
     content: () => <SystemKills />,
   },
+  {
+    id: WidgetsIds.comments,
+    position: { x: 10, y: 10 },
+    size: { width: 250, height: 300 },
+    zIndex: 0,
+    content: () => <CommentsWidget />,
+  },
 ];
 
 type WidgetsCheckboxesType = {
@@ -102,4 +111,8 @@ export const WIDGETS_CHECKBOXES_PROPS: WidgetsCheckboxesType = [
     id: WidgetsIds.kills,
     label: 'Kills',
   },
+  {
+    id: WidgetsIds.comments,
+    label: 'Comments',
+  },
 ];

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

@@ -0,0 +1,82 @@
+import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
+import { Comments } from '@/hooks/Mapper/components/mapInterface/components/Comments';
+import { InfoDrawer, SystemView, TooltipPosition, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
+import { useRef } from 'react';
+import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
+import { COMPACT_MAX_WIDTH } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import clsx from 'clsx';
+import { CommentsEditor } from '@/hooks/Mapper/components/mapInterface/components/CommentsEditor';
+import { PrimeIcons } from 'primereact/api';
+
+export const CommentsWidgetContent = () => {
+  const {
+    data: { selectedSystems },
+  } = useMapRootState();
+
+  const isNotSelectedSystem = selectedSystems.length !== 1;
+
+  if (isNotSelectedSystem) {
+    return (
+      <div className="w-full h-full flex justify-center items-center select-none text-stone-400/80 text-sm">
+        System is not selected
+      </div>
+    );
+  }
+
+  return (
+    <div className={clsx('h-full grid grid-rows-[1fr_auto] gap-1 px-[4px]')}>
+      <Comments />
+      <CommentsEditor />
+    </div>
+  );
+};
+
+export const CommentsWidget = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isCompact = useMaxWidth(containerRef, COMPACT_MAX_WIDTH);
+
+  const {
+    data: { selectedSystems, isSubscriptionActive },
+  } = useMapRootState();
+  const [systemId] = selectedSystems;
+  const isNotSelectedSystem = selectedSystems.length !== 1;
+
+  return (
+    <Widget
+      label={
+        <div ref={containerRef} className="flex justify-between items-center gap-1 text-xs w-full">
+          <div className="flex items-center gap-1">
+            {!isCompact && (
+              <div className="flex whitespace-nowrap text-ellipsis overflow-hidden text-stone-400">
+                Comments {isNotSelectedSystem ? '' : 'in'}
+              </div>
+            )}
+            {!isNotSelectedSystem && <SystemView systemId={systemId} className="select-none text-center" hideRegion />}
+          </div>
+          <WdImgButton
+            className={PrimeIcons.QUESTION_CIRCLE}
+            tooltip={{
+              position: TooltipPosition.left,
+              content: (
+                <div className="flex flex-col gap-1">
+                  <InfoDrawer title={<b className="text-slate-50">How to add/delete comment?</b>}>
+                    It is possible to use markdown formating. <br />
+                    Only users with tracking permission can add/delete comments. <br />
+                  </InfoDrawer>
+                  <InfoDrawer title={<b className="text-slate-50">Limitations</b>}>
+                    Each comment length is limited to <b>500</b> characters. <br />
+                    No more than <b>{isSubscriptionActive ? '500' : '30'}</b> comments are allowed per system*. <br />
+                    <small>* based on active map subscription.</small>
+                  </InfoDrawer>
+                </div>
+              ),
+            }}
+          />
+        </div>
+      }
+    >
+      <CommentsWidgetContent />
+    </Widget>
+  );
+};

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

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

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

@@ -13,6 +13,7 @@ export const LocalCharactersItemTemplate = ({ showShipName, ...options }: LocalC
       className={clsx(
         classes.CharacterRow,
         'box-border flex items-center w-full whitespace-nowrap overflow-hidden text-ellipsis min-w-[0px]',
+        'px-1',
         {
           'surface-hover': options.odd,
           'border-b border-gray-600 border-opacity-20': !options.last,

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

@@ -43,6 +43,7 @@ export const SystemKills: React.FC = React.memo(() => {
     systemId,
     outCommand,
     showAllVisible: visible,
+    sinceHours: settings.timeRange,
   });
 
   const isNothingSelected = !systemId && !visible;
@@ -61,45 +62,41 @@ export const SystemKills: React.FC = React.memo(() => {
   }, [kills, settings.whOnly, systemBySolarSystemId, visible]);
 
   return (
-    <div className="h-full flex flex-col min-h-0">
-      <div className="flex flex-col flex-1 min-h-0">
-        <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 “Show all systems”)
-              </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>
-          ) : (
-            <div className="w-full h-full" style={{ height: '100%' }}>
-              <SystemKillsContent
-                kills={filteredKills}
-                systemNameMap={systemNameMap}
-                onlyOneSystem={!visible}
-                timeRange={settings.timeRange}
-              />
-            </div>
-          )}
-        </Widget>
-      </div>
+    <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>

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

@@ -1,14 +1,35 @@
-.wrapper {
-  overflow-x: hidden;
-  box-sizing: border-box;
-}
-
+// Custom scrollbar styling is now handled by the global custom-scrollbar class
 .scrollerContent {
-  width: 100%;
-  box-sizing: border-box;
   overflow-x: hidden;
-}
-
-.VirtualScroller {
+  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/SystemKillsContent/SystemKillsContent.tsx

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import clsx from 'clsx';
 import { DetailedKill } from '@/hooks/Mapper/types/kills';
 import { VirtualScroller } from 'primereact/virtualscroller';
 import { useSystemKillsItemTemplate } from '../hooks/useSystemKillsItemTemplate';
@@ -11,7 +10,6 @@ export interface SystemKillsContentProps {
   kills: DetailedKill[];
   systemNameMap: Record<string, string>;
   onlyOneSystem?: boolean;
-  autoSize?: boolean;
   timeRange?: number;
   limit?: number;
 }
@@ -20,44 +18,54 @@ export const SystemKillsContent: React.FC<SystemKillsContentProps> = ({
   kills,
   systemNameMap,
   onlyOneSystem = false,
-  autoSize = false,
   timeRange = 4,
   limit,
 }) => {
   const processedKills = useMemo(() => {
+    if (!kills || kills.length === 0) return [];
+
+    // sort by newest first
     const sortedKills = kills
       .filter(k => k.kill_time)
       .sort((a, b) => new Date(b.kill_time!).getTime() - new Date(a.kill_time!).getTime());
 
-    if (limit !== undefined) {
-      return sortedKills.slice(0, limit);
-    } else {
-      const now = Date.now();
-      const cutoff = now - timeRange * 60 * 60 * 1000;
-      return sortedKills.filter(k => new Date(k.kill_time!).getTime() >= cutoff);
+    // filter by timeRange
+    let filteredKills = sortedKills;
+    if (timeRange !== undefined) {
+      const cutoffTime = new Date();
+      cutoffTime.setHours(cutoffTime.getHours() - timeRange);
+      filteredKills = sortedKills.filter(kill => {
+        const killTime = new Date(kill.kill_time!).getTime();
+        return killTime >= cutoffTime.getTime();
+      });
     }
-  }, [kills, timeRange, limit]);
 
-  const computedHeight = autoSize ? Math.max(processedKills.length, 1) * ITEM_HEIGHT : undefined;
-  const scrollerHeight = autoSize ? `${computedHeight}px` : '100%';
+    // apply limit if present
+    if (limit !== undefined) {
+      return filteredKills.slice(0, limit);
+    }
+    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
+  };
+
   return (
-    <div className={clsx('w-full h-full', classes.wrapper)}>
+    <div className="h-full w-full flex flex-col overflow-hidden" data-testid="system-kills-content">
       <VirtualScroller
         items={processedKills}
         itemSize={ITEM_HEIGHT}
         itemTemplate={itemTemplate}
-        autoSize={autoSize}
-        scrollWidth="100%"
-        style={{ height: scrollerHeight }}
-        className={clsx('w-full h-full custom-scrollbar select-none', {
-          [classes.VirtualScroller]: !autoSize,
-        })}
+        className={`w-full h-full flex-1 select-none ${classes.VirtualScroller}`}
+        style={virtualScrollerStyle}
         pt={{
           content: {
-            className: classes.scrollerContent,
+            className: `custom-scrollbar ${classes.scrollerContent}`,
           },
         }}
       />

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

@@ -90,6 +90,14 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
   const excluded = localData.excludedSystems || [];
   const timeRangeOptions = [4, 12, 24];
 
+  // Ensure timeRange is one of the valid options
+  useEffect(() => {
+    if (visible && !timeRangeOptions.includes(localData.timeRange)) {
+      // If current timeRange is not in options, set it to the default (4 hours)
+      handleTimeRangeChange(4);
+    }
+  }, [visible, localData.timeRange, handleTimeRangeChange]);
+
   return (
     <Dialog header="Kills Settings" visible={visible} style={{ width: '440px' }} draggable={false} onHide={handleHide}>
       <div className="flex flex-col gap-3 p-2.5">

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/helpers/linkHelpers.ts

@@ -1,5 +1,5 @@
 const ZKILL_URL = 'https://zkillboard.com';
-const BASE_IMAGE_URL = 'https://images.evetech.net';
+import { getEveImageUrl } from '@/hooks/Mapper/helpers';
 
 export function zkillLink(type: 'kill' | 'character' | 'corporation' | 'alliance', id?: number | null): string {
   if (!id) return `${ZKILL_URL}`;
@@ -10,21 +10,7 @@ export function zkillLink(type: 'kill' | 'character' | 'corporation' | 'alliance
   return `${ZKILL_URL}`;
 }
 
-export function eveImageUrl(
-  category: 'characters' | 'corporations' | 'alliances' | 'types',
-  id?: number | null,
-  variation: string = 'icon',
-  size?: number,
-): string | null {
-  if (!id || id <= 0) {
-    return null;
-  }
-  let url = `${BASE_IMAGE_URL}/${category}/${id}/${variation}`;
-  if (size) {
-    url += `?size=${size}`;
-  }
-  return url;
-}
+export const eveImageUrl = getEveImageUrl;
 
 export function buildVictimImageUrls(args: {
   victim_char_id?: number | null;

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

@@ -14,7 +14,7 @@ export const DEFAULT_KILLS_WIDGET_SETTINGS: KillsWidgetSettings = {
   whOnly: true,
   excludedSystems: [],
   version: 2,
-  timeRange: 1,
+  timeRange: 4,
 };
 
 function mergeWithDefaults(settings?: Partial<KillsWidgetSettings>): KillsWidgetSettings {

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

@@ -1,9 +1,10 @@
 import { useCallback, useMemo, useState, useEffect, useRef } from 'react';
 import debounce from 'lodash.debounce';
-import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
+import { Commands, OutCommand } from '@/hooks/Mapper/types/mapHandlers';
 import { DetailedKill } from '@/hooks/Mapper/types/kills';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useKillsWidgetSettings } from './useKillsWidgetSettings';
+import { useMapEventListener, MapEvent } from '@/hooks/Mapper/events';
 
 interface UseSystemKillsProps {
   systemId?: string;
@@ -18,11 +19,8 @@ function combineKills(existing: DetailedKill[], incoming: DetailedKill[], sinceH
   const byId: Record<string, DetailedKill> = {};
 
   for (const kill of [...existing, ...incoming]) {
-    if (!kill.kill_time) {
-      continue;
-    }
+    if (!kill.kill_time) continue;
     const killTimeMs = new Date(kill.kill_time).valueOf();
-
     if (killTimeMs >= cutoff) {
       byId[kill.killmail_id] = kill;
     }
@@ -31,15 +29,44 @@ function combineKills(existing: DetailedKill[], incoming: DetailedKill[], sinceH
   return Object.values(byId);
 }
 
+interface DetailedKillsEvent extends MapEvent<Commands> {
+  payload: Record<string, DetailedKill[]>;
+}
+
 export function useSystemKills({ systemId, outCommand, showAllVisible = false, sinceHours = 24 }: UseSystemKillsProps) {
   const { data, update } = useMapRootState();
   const { detailedKills = {}, systems = [] } = data;
-
   const [settings] = useKillsWidgetSettings();
   const excludedSystems = settings.excludedSystems;
 
-  // When showing all visible kills, filter out excluded systems;
-  // when showAllVisible is false, ignore the exclusion filter.
+  const effectiveSinceHours = sinceHours;
+
+  const updateDetailedKills = useCallback(
+    (newKillsMap: Record<string, DetailedKill[]>) => {
+      update(prev => {
+        const oldKills = prev.detailedKills ?? {};
+        const updated = { ...oldKills };
+        for (const [sid, killsArr] of Object.entries(newKillsMap)) {
+          updated[sid] = killsArr;
+        }
+        return { ...prev, detailedKills: updated };
+      }, true);
+    },
+    [update],
+  );
+
+  useMapEventListener((event: MapEvent<Commands>) => {
+    if (event.name === Commands.detailedKillsUpdated) {
+      const detailedEvent = event as DetailedKillsEvent;
+      if (systemId && !Object.keys(detailedEvent.payload).includes(systemId.toString())) {
+        return false;
+      }
+      updateDetailedKills(detailedEvent.payload);
+      return true;
+    }
+    return false;
+  });
+
   const effectiveSystemIds = useMemo(() => {
     if (showAllVisible) {
       return systems.map(s => s.id).filter(id => !excludedSystems.includes(Number(id)));
@@ -49,7 +76,6 @@ export function useSystemKills({ systemId, outCommand, showAllVisible = false, s
 
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-
   const didFallbackFetch = useRef(Object.keys(detailedKills).length !== 0);
 
   const mergeKillsIntoGlobal = useCallback(
@@ -60,17 +86,14 @@ export function useSystemKills({ systemId, outCommand, showAllVisible = false, s
 
         for (const [sid, newKills] of Object.entries(killsMap)) {
           const existing = updated[sid] ?? [];
-          const combined = combineKills(existing, newKills, sinceHours);
+          const combined = combineKills(existing, newKills, effectiveSinceHours);
           updated[sid] = combined;
         }
 
-        return {
-          ...prev,
-          detailedKills: updated,
-        };
+        return { ...prev, detailedKills: updated };
       });
     },
-    [update, sinceHours],
+    [update, effectiveSinceHours],
   );
 
   const fetchKills = useCallback(
@@ -86,16 +109,15 @@ export function useSystemKills({ systemId, outCommand, showAllVisible = false, s
           eventType = OutCommand.getSystemsKills;
           requestData = {
             system_ids: effectiveSystemIds,
-            since_hours: sinceHours,
+            since_hours: effectiveSinceHours,
           };
         } else if (systemId) {
           eventType = OutCommand.getSystemKills;
           requestData = {
             system_id: systemId,
-            since_hours: sinceHours,
+            since_hours: effectiveSinceHours,
           };
         } else {
-          // If there's no system and not showing all, do nothing
           setIsLoading(false);
           return;
         }
@@ -105,14 +127,11 @@ export function useSystemKills({ systemId, outCommand, showAllVisible = false, s
           data: requestData,
         });
 
-        // Single system => `resp.kills`
         if (resp?.kills) {
           const arr = resp.kills as DetailedKill[];
           const sid = systemId ?? 'unknown';
           mergeKillsIntoGlobal({ [sid]: arr });
-        }
-        // multiple systems => `resp.systems_kills`
-        else if (resp?.systems_kills) {
+        } else if (resp?.systems_kills) {
           mergeKillsIntoGlobal(resp.systems_kills as Record<string, DetailedKill[]>);
         } else {
           console.warn('[useSystemKills] Unexpected kills response =>', resp);
@@ -124,7 +143,7 @@ export function useSystemKills({ systemId, outCommand, showAllVisible = false, s
         setIsLoading(false);
       }
     },
-    [showAllVisible, systemId, outCommand, effectiveSystemIds, sinceHours, mergeKillsIntoGlobal],
+    [showAllVisible, systemId, outCommand, effectiveSystemIds, effectiveSinceHours, mergeKillsIntoGlobal],
   );
 
   const debouncedFetchKills = useMemo(
@@ -137,25 +156,26 @@ export function useSystemKills({ systemId, outCommand, showAllVisible = false, s
   );
 
   const finalKills = useMemo(() => {
+    let result: DetailedKill[] = [];
+
     if (showAllVisible) {
-      return effectiveSystemIds.flatMap(sid => detailedKills[sid] ?? []);
+      result = effectiveSystemIds.flatMap(sid => detailedKills[sid] ?? []);
     } else if (systemId) {
-      return detailedKills[systemId] ?? [];
+      result = detailedKills[systemId] ?? [];
     } else if (didFallbackFetch.current) {
-      // if we already did a fallback, we may have data for multiple systems
-      return effectiveSystemIds.flatMap(sid => detailedKills[sid] ?? []);
+      result = effectiveSystemIds.flatMap(sid => detailedKills[sid] ?? []);
     }
-    return [];
-  }, [showAllVisible, systemId, effectiveSystemIds, detailedKills]);
+
+    return result;
+  }, [showAllVisible, systemId, effectiveSystemIds, detailedKills, didFallbackFetch]);
 
   const effectiveIsLoading = isLoading && finalKills.length === 0;
 
   useEffect(() => {
     if (!systemId && !showAllVisible && !didFallbackFetch.current) {
       didFallbackFetch.current = true;
-      // Cancel any queued debounced calls, then do the fallback.
       debouncedFetchKills.cancel();
-      fetchKills(true); // forceFallback => fetch as though showAllVisible is true
+      fetchKills(true);
     }
   }, [systemId, showAllVisible, debouncedFetchKills, fetchKills]);
 
@@ -163,15 +183,17 @@ export function useSystemKills({ systemId, outCommand, showAllVisible = false, s
     if (effectiveSystemIds.length === 0) return;
 
     if (showAllVisible || systemId) {
-      debouncedFetchKills();
-      // Clean up the debounce on unmount or changes
+      // Cancel any pending debounced fetch
+      debouncedFetchKills.cancel();
+      // Fetch kills immediately
+      fetchKills();
       return () => debouncedFetchKills.cancel();
     }
-  }, [showAllVisible, systemId, effectiveSystemIds, debouncedFetchKills]);
+  }, [showAllVisible, systemId, effectiveSystemIds, debouncedFetchKills, fetchKills]);
 
   const refetch = useCallback(() => {
     debouncedFetchKills.cancel();
-    fetchKills(); // immediate (non-debounced) call
+    fetchKills();
   }, [debouncedFetchKills, fetchKills]);
 
   return {

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

@@ -1,15 +1,36 @@
 import { SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
 import { renderIcon } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders';
+import { getCharacterPortraitUrl } from '@/hooks/Mapper/helpers';
 
-export interface SignatureViewProps {}
+export interface SignatureViewProps {
+  signature: SystemSignature;
+  showCharacterPortrait?: boolean;
+}
+
+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 characterName = signature.character_name || 'Unknown character';
 
-export const SignatureView = (sig: SignatureViewProps & SystemSignature) => {
   return (
-    <div className="flex gap-2 items-center">
-      {renderIcon(sig)}
-      <div>{sig?.eve_id}</div>
-      <div>{sig?.group ?? SignatureGroup.CosmicSignature}</div>
-      <div>{sig?.name}</div>
+    <div className="flex flex-col gap-2">
+      <div className="flex gap-2 items-center px-2">
+        {renderIcon(signature)}
+        <div>{signature?.eve_id}</div>
+        <div>{groupDisplay}</div>
+        {!isWormhole && <div>{signature?.name}</div>}
+        {hasCharacterInfo && (
+          <div className="flex items-center gap-1 ml-2 pl-2 border-l border-stone-700">
+            <img
+              src={getCharacterPortraitUrl(signature.character_eve_id)}
+              alt={characterName}
+              className="w-5 h-5 rounded-sm border border-stone-700"
+            />
+            <div className="text-xs text-stone-300">{characterName}</div>
+          </div>
+        )}
+      </div>
     </div>
   );
 };

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

@@ -1,96 +1,118 @@
-import React from 'react';
-import { SystemView, WdCheckbox, WdImgButton, TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
+import { useRef } from 'react';
+import {
+  InfoDrawer,
+  LayoutEventBlocker,
+  SystemView,
+  TooltipPosition,
+  WdCheckbox,
+  WdImgButton,
+} from '@/hooks/Mapper/components/ui-kit';
 import { PrimeIcons } from 'primereact/api';
 import { CheckboxChangeEvent } from 'primereact/checkbox';
-import { InfoDrawer, LayoutEventBlocker } from '@/hooks/Mapper/components/ui-kit';
 import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
+import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
+import { COMPACT_MAX_WIDTH } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 
 export type HeaderProps = {
-  systemId: string;
-  isNotSelectedSystem: boolean;
   sigCount: number;
-  isCompact: boolean;
   lazyDeleteValue: boolean;
   onLazyDeleteChange: (checked: boolean) => void;
   pendingCount: number;
+  pendingTimeRemaining?: number; // Time remaining in ms
   onUndoClick: () => void;
   onSettingsClick: () => void;
 };
 
-function HeaderImpl({
-  systemId,
-  isNotSelectedSystem,
+export const SystemSignaturesHeader = ({
   sigCount,
-  isCompact,
   lazyDeleteValue,
   onLazyDeleteChange,
   pendingCount,
+  pendingTimeRemaining,
   onUndoClick,
   onSettingsClick,
-}: HeaderProps) {
+}: HeaderProps) => {
+  const {
+    data: { selectedSystems },
+  } = useMapRootState();
+
+  const [systemId] = selectedSystems;
+  const isNotSelectedSystem = selectedSystems.length !== 1;
+
+  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 className="flex justify-between items-center text-xs w-full h-full">
-      <div className="flex justify-between items-center gap-1">
-        {!isCompact && (
-          <div className="flex whitespace-nowrap text-ellipsis overflow-hidden text-stone-400">
-            {sigCount ? `[${sigCount}] ` : ''}Signatures {isNotSelectedSystem ? '' : 'in'}
-          </div>
-        )}
-        {!isNotSelectedSystem && <SystemView systemId={systemId} className="select-none text-center" hideRegion />}
-      </div>
+    <div ref={containerRef} className="w-full">
+      <div className="flex justify-between items-center text-xs w-full h-full">
+        <div className="flex justify-between items-center gap-1">
+          {!isCompact && (
+            <div className="flex whitespace-nowrap text-ellipsis overflow-hidden text-stone-400">
+              {sigCount ? `[${sigCount}] ` : ''}Signatures {isNotSelectedSystem ? '' : 'in'}
+            </div>
+          )}
+          {!isNotSelectedSystem && <SystemView systemId={systemId} className="select-none text-center" hideRegion />}
+        </div>
 
-      <LayoutEventBlocker className="flex gap-2.5">
-        <WdTooltipWrapper content="Enable Lazy delete">
-          <WdCheckbox
-            size="xs"
-            labelSide="left"
-            label={isCompact ? '' : 'Lazy delete'}
-            value={lazyDeleteValue}
-            classNameLabel="text-stone-400 hover:text-stone-200 transition duration-300 whitespace-nowrap text-ellipsis overflow-hidden"
-            onChange={(event: CheckboxChangeEvent) => onLazyDeleteChange(!!event.checked)}
-          />
-        </WdTooltipWrapper>
+        <LayoutEventBlocker className="flex gap-2.5">
+          <WdTooltipWrapper content="Enable Lazy delete">
+            <WdCheckbox
+              size="xs"
+              labelSide="left"
+              label={isCompact ? '' : 'Lazy delete'}
+              value={lazyDeleteValue}
+              classNameLabel="text-stone-400 hover:text-stone-200 transition duration-300 whitespace-nowrap text-ellipsis overflow-hidden"
+              onChange={(event: CheckboxChangeEvent) => onLazyDeleteChange(!!event.checked)}
+            />
+          </WdTooltipWrapper>
+
+          {pendingCount > 0 && (
+            <WdImgButton
+              className={PrimeIcons.UNDO}
+              style={{ color: 'red' }}
+              tooltip={{ content: `Undo pending changes (${pendingCount})${formatTimeRemaining()}` }}
+              onClick={onUndoClick}
+            />
+          )}
 
-        {pendingCount > 0 && (
           <WdImgButton
-            className={PrimeIcons.UNDO}
-            style={{ color: 'red' }}
-            tooltip={{ content: `Undo pending changes (${pendingCount})` }}
-            onClick={onUndoClick}
+            className={PrimeIcons.QUESTION_CIRCLE}
+            tooltip={{
+              position: TooltipPosition.left,
+              content: (
+                <div className="flex flex-col gap-1">
+                  <InfoDrawer title={<b className="text-slate-50">How to add/update signature?</b>}>
+                    In game you need to select one or more signatures <br /> in the list in{' '}
+                    <b className="text-sky-500">Probe scanner</b>. <br /> Use next hotkeys:
+                    <br />
+                    <b className="text-sky-500">Shift + LMB</b> or <b className="text-sky-500">Ctrl + LMB</b>
+                    <br /> or <b className="text-sky-500">Ctrl + A</b> for select all
+                    <br /> and then use <b className="text-sky-500">Ctrl + C</b>, after you need to go <br />
+                    here, select Solar system and paste it with <b className="text-sky-500">Ctrl + V</b>
+                  </InfoDrawer>
+                  <InfoDrawer title={<b className="text-slate-50">How to select?</b>}>
+                    For selecting any signature, click on it <br /> with hotkeys{' '}
+                    <b className="text-sky-500">Shift + LMB</b> or <b className="text-sky-500">Ctrl + LMB</b>
+                  </InfoDrawer>
+                  <InfoDrawer title={<b className="text-slate-50">How to delete?</b>}>
+                    To delete any signature, first select it <br /> and then press <b className="text-sky-500">Del</b>
+                  </InfoDrawer>
+                </div>
+              ),
+            }}
           />
-        )}
 
-        <WdImgButton
-          className={PrimeIcons.QUESTION_CIRCLE}
-          tooltip={{
-            position: TooltipPosition.left,
-            content: (
-              <div className="flex flex-col gap-1">
-                <InfoDrawer title={<b className="text-slate-50">How to add/update signature?</b>}>
-                  In game you need to select one or more signatures <br /> in the list in{' '}
-                  <b className="text-sky-500">Probe scanner</b>. <br /> Use next hotkeys:
-                  <br />
-                  <b className="text-sky-500">Shift + LMB</b> or <b className="text-sky-500">Ctrl + LMB</b>
-                  <br /> or <b className="text-sky-500">Ctrl + A</b> for select all
-                  <br /> and then use <b className="text-sky-500">Ctrl + C</b>, after you need to go <br />
-                  here, select Solar system and paste it with <b className="text-sky-500">Ctrl + V</b>
-                </InfoDrawer>
-                <InfoDrawer title={<b className="text-slate-50">How to select?</b>}>
-                  For selecting any signature, click on it <br /> with hotkeys{' '}
-                  <b className="text-sky-500">Shift + LMB</b> or <b className="text-sky-500">Ctrl + LMB</b>
-                </InfoDrawer>
-                <InfoDrawer title={<b className="text-slate-50">How to delete?</b>}>
-                  To delete any signature, first select it <br /> and then press <b className="text-sky-500">Del</b>
-                </InfoDrawer>
-              </div>
-            ),
-          }}
-        />
-
-        <WdImgButton className={PrimeIcons.SLIDERS_H} onClick={onSettingsClick} />
-      </LayoutEventBlocker>
+          <WdImgButton className={PrimeIcons.SLIDERS_H} onClick={onSettingsClick} />
+        </LayoutEventBlocker>
+      </div>
     </div>
   );
-}
-
-export const SystemSignaturesHeader = React.memo(HeaderImpl);
+};

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

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

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

@@ -4,20 +4,17 @@ 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';
-
-export type Setting = { key: string; name: string; value: boolean; isFilter?: boolean };
-
-export const COSMIC_SIGNATURE = 'Cosmic Signature';
-export const COSMIC_ANOMALY = 'Cosmic Anomaly';
-export const DEPLOYABLE = 'Deployable';
-export const STRUCTURE = 'Structure';
-export const STARBASE = 'Starbase';
-export const SHIP = 'Ship';
-export const DRONE = 'Drone';
+import { Dropdown } from 'primereact/dropdown';
+import {
+  Setting,
+  SettingsTypes,
+  SIGNATURE_SETTINGS,
+  SignatureSettingsType,
+} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
 
 interface SystemSignatureSettingsDialogProps {
-  settings: Setting[];
-  onSave: (settings: Setting[]) => void;
+  settings: SignatureSettingsType;
+  onSave: (settings: SignatureSettingsType) => void;
   onCancel: () => void;
 }
 
@@ -27,19 +24,50 @@ export const SystemSignatureSettingsDialog = ({
   onCancel,
 }: SystemSignatureSettingsDialogProps) => {
   const [activeIndex, setActiveIndex] = useState(0);
-  const [settings, setSettings] = useState<Setting[]>(defaultSettings);
+  const [settings, setSettings] = useState<SignatureSettingsType>(defaultSettings);
 
-  const filterSettings = settings.filter(setting => setting.isFilter);
-  const userSettings = settings.filter(setting => !setting.isFilter);
-
-  const handleSettingsChange = (key: string) => {
-    setSettings(prevState => prevState.map(item => (item.key === key ? { ...item, value: !item.value } : item)));
+  const handleSettingsChange = ({ key, type }: Setting, value?: unknown) => {
+    setSettings(prev => {
+      switch (type) {
+        case SettingsTypes.dropdown:
+          return { ...prev, [key]: value };
+        case SettingsTypes.flag:
+          return { ...prev, [key]: !prev[key] };
+      }
+      return prev;
+    });
   };
 
   const handleSave = useCallback(() => {
     onSave(settings);
   }, [onSave, settings]);
 
+  const renderSetting = (setting: Setting) => {
+    const val = settings[setting.key];
+    if (setting.options) {
+      return (
+        <div key={setting.key} className="flex items-center justify-between gap-2 mb-2">
+          <label className="text-[#b8b8b8] text-[13px] select-none">{setting.name}</label>
+          <Dropdown
+            value={val}
+            options={setting.options}
+            onChange={e => handleSettingsChange(setting, e.value)}
+            className="w-40"
+          />
+        </div>
+      );
+    }
+
+    return (
+      <PrettySwitchbox
+        key={setting.key}
+        label={setting.name}
+        checked={!!val}
+        setChecked={() => handleSettingsChange(setting)}
+      />
+    );
+  };
+
   return (
     <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">
@@ -52,30 +80,14 @@ export const SystemSignatureSettingsDialog = ({
             >
               <TabPanel header="Filters" headerClassName={styles.verticalTabHeader}>
                 <div className="w-full h-full flex flex-col gap-1">
-                  {filterSettings.map(setting => {
-                    return (
-                      <PrettySwitchbox
-                        key={setting.key}
-                        label={setting.name}
-                        checked={setting.value}
-                        setChecked={() => handleSettingsChange(setting.key)}
-                      />
-                    );
-                  })}
+                  {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">
-                  {userSettings.map(setting => {
-                    return (
-                      <PrettySwitchbox
-                        key={setting.key}
-                        label={setting.name}
-                        checked={setting.value}
-                        setChecked={() => handleSettingsChange(setting.key)}
-                      />
-                    );
-                  })}
+                  {SIGNATURE_SETTINGS.uiFlags.map(renderSetting)}
+                  <div className="my-2 border-t border-stone-700/50"></div>
+                  {SIGNATURE_SETTINGS.uiOther.map(renderSetting)}
                 </div>
               </TabPanel>
             </TabView>

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

@@ -1,85 +1,38 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
 import { SystemSignaturesContent } from './SystemSignaturesContent';
-import {
-  COSMIC_ANOMALY,
-  COSMIC_SIGNATURE,
-  DEPLOYABLE,
-  DRONE,
-  Setting,
-  SHIP,
-  STARBASE,
-  STRUCTURE,
-  SystemSignatureSettingsDialog,
-} from './SystemSignatureSettingsDialog';
-import { SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
+import { SystemSignatureSettingsDialog } from './SystemSignatureSettingsDialog';
+import { ExtendedSystemSignature, SystemSignature } from '@/hooks/Mapper/types';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth';
 import { useHotkey } from '@/hooks/Mapper/hooks';
-import { COMPACT_MAX_WIDTH } from './constants';
-import { renderHeaderLabel } from './renders';
+import { SystemSignaturesHeader } from './SystemSignatureHeader';
+import useLocalStorageState from 'use-local-storage-state';
+import {
+  SETTINGS_KEYS,
+  SETTINGS_VALUES,
+  SIGNATURE_DELETION_TIMEOUTS,
+  SIGNATURE_SETTING_STORE_KEY,
+  SIGNATURE_WINDOW_ID,
+  SIGNATURES_DELETION_TIMING,
+  SignatureSettingsType,
+} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
+import { calculateTimeRemaining } from './helpers';
 
-const SIGNATURE_SETTINGS_KEY = 'wanderer_system_signature_settings_v5_5';
-export const SHOW_DESCRIPTION_COLUMN_SETTING = 'show_description_column_setting';
-export const SHOW_UPDATED_COLUMN_SETTING = 'SHOW_UPDATED_COLUMN_SETTING';
-export const SHOW_CHARACTER_COLUMN_SETTING = 'SHOW_CHARACTER_COLUMN_SETTING';
-export const LAZY_DELETE_SIGNATURES_SETTING = 'LAZY_DELETE_SIGNATURES_SETTING';
-export const KEEP_LAZY_DELETE_SETTING = 'KEEP_LAZY_DELETE_ENABLED_SETTING';
+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>(() => {});
 
-const SETTINGS: Setting[] = [
-  { key: SHOW_UPDATED_COLUMN_SETTING, name: 'Show Updated Column', value: false, isFilter: false },
-  { key: SHOW_DESCRIPTION_COLUMN_SETTING, name: 'Show Description Column', value: false, isFilter: false },
-  { key: SHOW_CHARACTER_COLUMN_SETTING, name: 'Show Character Column', value: false, isFilter: false },
-  { key: LAZY_DELETE_SIGNATURES_SETTING, name: 'Lazy Delete Signatures', value: false, isFilter: false },
-  { key: KEEP_LAZY_DELETE_SETTING, name: 'Keep "Lazy Delete" Enabled', value: false, isFilter: false },
-
-  { key: COSMIC_ANOMALY, name: 'Show Anomalies', value: true, isFilter: true },
-  { key: COSMIC_SIGNATURE, name: 'Show Cosmic Signatures', value: true, isFilter: true },
-  { key: DEPLOYABLE, name: 'Show Deployables', value: true, isFilter: true },
-  { key: STRUCTURE, name: 'Show Structures', value: true, isFilter: true },
-  { key: STARBASE, name: 'Show Starbase', value: true, isFilter: true },
-  { key: SHIP, name: 'Show Ships', value: true, isFilter: true },
-  { key: DRONE, name: 'Show Drones And Charges', value: true, isFilter: true },
-  { key: SignatureGroup.Wormhole, name: 'Show Wormholes', value: true, isFilter: true },
-  { key: SignatureGroup.RelicSite, name: 'Show Relic Sites', value: true, isFilter: true },
-  { key: SignatureGroup.DataSite, name: 'Show Data Sites', value: true, isFilter: true },
-  { key: SignatureGroup.OreSite, name: 'Show Ore Sites', value: true, isFilter: true },
-  { key: SignatureGroup.GasSite, name: 'Show Gas Sites', value: true, isFilter: true },
-  { key: SignatureGroup.CombatSite, name: 'Show Combat Sites', value: true, isFilter: true },
-];
-
-function getDefaultSettings(): Setting[] {
-  return [...SETTINGS];
-}
-
-export const SystemSignatures: React.FC = () => {
   const {
     data: { selectedSystems },
   } = useMapRootState();
 
-  const [visible, setVisible] = useState(false);
-
-  const [currentSettings, setCurrentSettings] = useState<Setting[]>(() => {
-    const stored = localStorage.getItem(SIGNATURE_SETTINGS_KEY);
-    if (stored) {
-      try {
-        return JSON.parse(stored) as Setting[];
-      } catch (error) {
-        console.error('Error parsing stored settings', error);
-      }
-    }
-    return getDefaultSettings();
+  const [currentSettings, setCurrentSettings] = useLocalStorageState(SIGNATURE_SETTING_STORE_KEY, {
+    defaultValue: SETTINGS_VALUES,
   });
 
-  useEffect(() => {
-    localStorage.setItem(SIGNATURE_SETTINGS_KEY, JSON.stringify(currentSettings));
-  }, [currentSettings]);
-
-  const [sigCount, setSigCount] = useState<number>(0);
-  const [pendingSigs, setPendingSigs] = useState<SystemSignature[]>([]);
-
-  const undoPendingFnRef = useRef<() => void>(() => {});
-
   const handleSigCountChange = useCallback((count: number) => {
     setSigCount(count);
   }, []);
@@ -87,70 +40,75 @@ export const SystemSignatures: React.FC = () => {
   const [systemId] = selectedSystems;
   const isNotSelectedSystem = selectedSystems.length !== 1;
 
-  const lazyDeleteValue = useMemo(
-    () => currentSettings.find(setting => setting.key === LAZY_DELETE_SIGNATURES_SETTING)?.value || false,
-    [currentSettings]
-  );
-
-  const handleSettingsChange = useCallback((newSettings: Setting[]) => {
+  const handleSettingsChange = useCallback((newSettings: SignatureSettingsType) => {
     setCurrentSettings(newSettings);
     setVisible(false);
   }, []);
 
   const handleLazyDeleteChange = useCallback((value: boolean) => {
-    setCurrentSettings(prevSettings =>
-      prevSettings.map(setting => (setting.key === LAZY_DELETE_SIGNATURES_SETTING ? { ...setting, value } : setting))
-    );
+    setCurrentSettings(prev => ({ ...prev, [SETTINGS_KEYS.LAZY_DELETE_SIGNATURES]: value }));
   }, []);
 
-  const containerRef = useRef<HTMLDivElement>(null);
-  const isCompact = useMaxWidth(containerRef, COMPACT_MAX_WIDTH);
-
   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((newPending: SystemSignature[], newUndo: () => void) => {
-    setPendingSigs(prev => {
-      if (newPending.length === prev.length && newPending.every(np => prev.some(pp => pp.eve_id === np.eve_id))) {
-        return prev;
-      }
-      return newPending;
-    });
-    undoPendingFnRef.current = newUndo;
-  }, []);
+  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
+  useEffect(() => {
+    if (pendingSigs.length === 0) {
+      setPendingTimeRemaining(undefined);
+      return;
+    }
+
+    const calculate = () => {
+      setPendingTimeRemaining(() => calculateTimeRemaining(pendingSigs));
+    };
+
+    calculate();
+    const interval = setInterval(calculate, 1000);
+    return () => clearInterval(interval);
+  }, [pendingSigs]);
 
   return (
     <Widget
       label={
-        <div ref={containerRef} className="w-full">
-          {renderHeaderLabel({
-            systemId,
-            isNotSelectedSystem,
-            isCompact,
-            sigCount,
-            lazyDeleteValue,
-            pendingCount: pendingSigs.length,
-            onLazyDeleteChange: handleLazyDeleteChange,
-            onUndoClick: handleUndoClick,
-            onSettingsClick: handleSettingsButtonClick,
-          })}
-        </div>
+        <SystemSignaturesHeader
+          sigCount={sigCount}
+          lazyDeleteValue={currentSettings[SETTINGS_KEYS.LAZY_DELETE_SIGNATURES] as boolean}
+          pendingCount={pendingSigs.length}
+          pendingTimeRemaining={pendingTimeRemaining}
+          onLazyDeleteChange={handleLazyDeleteChange}
+          onUndoClick={handleUndoClick}
+          onSettingsClick={handleSettingsButtonClick}
+        />
       }
+      windowId={SIGNATURE_WINDOW_ID}
     >
       {isNotSelectedSystem ? (
         <div className="w-full h-full flex justify-center items-center select-none text-center text-stone-400/80 text-sm">
@@ -160,6 +118,12 @@ export const SystemSignatures: React.FC = () => {
         <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}

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

@@ -1,31 +1,30 @@
-import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
-import { DataTable, DataTableRowClickEvent, DataTableRowMouseEvent, SortOrder } from 'primereact/datatable';
-import { Column } from 'primereact/column';
 import { PrimeIcons } from 'primereact/api';
+import { Column } from 'primereact/column';
+import {
+  DataTable,
+  DataTableRowClickEvent,
+  DataTableRowMouseEvent,
+  DataTableStateEvent,
+  SortOrder,
+} from 'primereact/datatable';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import useLocalStorageState from 'use-local-storage-state';
 
-import { SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
-import { SignatureSettings } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings';
-import { WdTooltip, WdTooltipHandlers, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
 import { SignatureView } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SignatureView';
 import {
   COMPACT_MAX_WIDTH,
+  getGroupIdByRawGroup,
   GROUPS_LIST,
   MEDIUM_MAX_WIDTH,
   OTHER_COLUMNS_WIDTH,
+  SETTINGS_KEYS,
+  SIGNATURE_WINDOW_ID,
+  SignatureSettingsType,
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants';
-import {
-  SHOW_DESCRIPTION_COLUMN_SETTING,
-  SHOW_UPDATED_COLUMN_SETTING,
-  SHOW_CHARACTER_COLUMN_SETTING,
-} from '../SystemSignatures';
+import { SignatureSettings } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings';
+import { TooltipPosition, WdTooltip, WdTooltipHandlers, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
+import { ExtendedSystemSignature, SignatureGroup, SignatureKind, SystemSignature } from '@/hooks/Mapper/types';
 
-import {
-  getGroupIdByRawGroup,
-  GROUPS_LIST,
-} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
-
-import { COSMIC_SIGNATURE } from '../SystemSignatureSettingsDialog';
 import {
   renderAddedTimeLeft,
   renderDescription,
@@ -33,11 +32,12 @@ import {
   renderInfoColumn,
   renderUpdatedTimeLeft,
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders';
-import { ExtendedSystemSignature } from '../helpers/contentHelpers';
-import { useSystemSignaturesData } from '../hooks/useSystemSignaturesData';
-import { getSignatureRowClass } from '../helpers/rowStyles';
-import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth';
 import { useClipboard, useHotkey } from '@/hooks/Mapper/hooks';
+import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth';
+import { getSignatureRowClass } from '../helpers/rowStyles';
+import { useSystemSignaturesData } from '../hooks/useSystemSignaturesData';
+
+const renderColIcon = (sig: SystemSignature) => renderIcon(sig);
 
 type SystemSignaturesSortSettings = {
   sortField: string;
@@ -51,18 +51,21 @@ const SORT_DEFAULT_VALUES: SystemSignaturesSortSettings = {
 
 interface SystemSignaturesContentProps {
   systemId: string;
-  settings: { key: string; value: boolean }[];
+  settings: SignatureSettingsType;
   hideLinkedSignatures?: boolean;
   selectable?: boolean;
   onSelect?: (signature: SystemSignature) => void;
   onLazyDeleteChange?: (value: boolean) => void;
   onCountChange?: (count: number) => void;
-  onPendingChange?: (pending: ExtendedSystemSignature[], undo: () => void) => void;
+  onPendingChange?: (
+    pending: React.MutableRefObject<Record<string, ExtendedSystemSignature>>,
+    undo: () => void,
+  ) => void;
+  deletionTiming?: number;
+  filterSignature?: (signature: SystemSignature) => boolean;
 }
 
-const headerInlineStyle = { padding: '2px', fontSize: '12px', lineHeight: '1.333' };
-
-export function SystemSignaturesContent({
+export const SystemSignaturesContent = ({
   systemId,
   settings,
   hideLinkedSignatures,
@@ -71,7 +74,27 @@ export function SystemSignaturesContent({
   onLazyDeleteChange,
   onCountChange,
   onPendingChange,
-}: SystemSignaturesContentProps) {
+  deletionTiming,
+  filterSignature,
+}: SystemSignaturesContentProps) => {
+  const [selectedSignatureForDialog, setSelectedSignatureForDialog] = useState<SystemSignature | null>(null);
+  const [showSignatureSettings, setShowSignatureSettings] = useState(false);
+  const [nameColumnWidth, setNameColumnWidth] = useState('auto');
+  const [hoveredSignature, setHoveredSignature] = useState<SystemSignature | null>(null);
+
+  const tableRef = useRef<HTMLDivElement>(null);
+  const tooltipRef = useRef<WdTooltipHandlers>(null);
+
+  const isCompact = useMaxWidth(tableRef, COMPACT_MAX_WIDTH);
+  const isMedium = useMaxWidth(tableRef, MEDIUM_MAX_WIDTH);
+
+  const { clipboardContent, setClipboardContent } = useClipboard();
+
+  const [sortSettings, setSortSettings] = useLocalStorageState<{ sortField: string; sortOrder: SortOrder }>(
+    'window:signatures:sort',
+    { defaultValue: SORT_DEFAULT_VALUES },
+  );
+
   const { signatures, selectedSignatures, setSelectedSignatures, handleDeleteSelected, handleSelectAll, handlePaste } =
     useSystemSignaturesData({
       systemId,
@@ -79,21 +102,9 @@ export function SystemSignaturesContent({
       onCountChange,
       onPendingChange,
       onLazyDeleteChange,
+      deletionTiming,
     });
 
-  const [sortSettings, setSortSettings] = useLocalStorageState<{ sortField: string; sortOrder: SortOrder }>(
-    'window:signatures:sort',
-    { defaultValue: SORT_DEFAULT_VALUES },
-  );
-
-  const tableRef = useRef<HTMLDivElement>(null);
-  const tooltipRef = useRef<WdTooltipHandlers>(null);
-  const [hoveredSignature, setHoveredSignature] = useState<SystemSignature | null>(null);
-
-  const isCompact = useMaxWidth(tableRef, COMPACT_MAX_WIDTH);
-  const isMedium = useMaxWidth(tableRef, MEDIUM_MAX_WIDTH);
-
-  const { clipboardContent, setClipboardContent } = useClipboard();
   useEffect(() => {
     if (selectable) return;
     if (!clipboardContent?.text) return;
@@ -101,75 +112,122 @@ export function SystemSignaturesContent({
     handlePaste(clipboardContent.text);
 
     setClipboardContent(null);
-  }, [selectable, clipboardContent]);
+  }, [selectable, clipboardContent, handlePaste, setClipboardContent]);
 
   useHotkey(true, ['a'], handleSelectAll);
-  useHotkey(false, ['Backspace', 'Delete'], handleDeleteSelected);
 
-  const [nameColumnWidth, setNameColumnWidth] = useState('auto');
+  useHotkey(false, ['Backspace', 'Delete'], (event: KeyboardEvent) => {
+    const targetWindow = (event.target as HTMLHtmlElement)?.closest(`[data-window-id="${SIGNATURE_WINDOW_ID}"]`);
+
+    if (!targetWindow) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    handleDeleteSelected();
+  });
+
   const handleResize = useCallback(() => {
     if (!tableRef.current) return;
-    const tableWidth = tableRef.current.offsetWidth;
-    const otherColumnsWidth = OTHER_COLUMNS_WIDTH;
-    setNameColumnWidth(`${tableWidth - otherColumnsWidth}px`);
+
+    setNameColumnWidth(`${tableRef.current.offsetWidth - OTHER_COLUMNS_WIDTH}px`);
   }, []);
+
   useEffect(() => {
     if (!tableRef.current) return;
+
     const observer = new ResizeObserver(handleResize);
     observer.observe(tableRef.current);
     handleResize();
+
     return () => {
       observer.disconnect();
     };
   }, [handleResize]);
 
-  const [selectedSignatureForDialog, setSelectedSignatureForDialog] = useState<SystemSignature | null>(null);
-  const [showSignatureSettings, setShowSignatureSettings] = useState(false);
-
-  const handleRowClick = (e: DataTableRowClickEvent) => {
+  const handleRowClick = useCallback((e: DataTableRowClickEvent) => {
     setSelectedSignatureForDialog(e.data as SystemSignature);
     setShowSignatureSettings(true);
-  };
+  }, []);
 
   const handleSelectSignatures = useCallback(
     (e: { value: SystemSignature[] }) => {
-      if (selectable) {
-        onSelect?.(e.value[0]);
-      } else {
-        setSelectedSignatures(e.value as ExtendedSystemSignature[]);
-      }
+      selectable ? onSelect?.(e.value[0]) : setSelectedSignatures(e.value as ExtendedSystemSignature[]);
     },
-    [selectable, onSelect, setSelectedSignatures],
+    [selectable],
   );
 
-  const showDescriptionColumn = settings.find(s => s.key === SHOW_DESCRIPTION_COLUMN_SETTING)?.value;
-  const showUpdatedColumn = settings.find(s => s.key === SHOW_UPDATED_COLUMN_SETTING)?.value;
-  const showCharacterColumn = settings.find(s => s.key === SHOW_CHARACTER_COLUMN_SETTING)?.value;
-
-  const enabledGroups = settings
-    .filter(s => GROUPS_LIST.includes(s.key as SignatureGroup) && s.value === true)
-    .map(s => s.key);
+  const { showDescriptionColumn, showUpdatedColumn, showCharacterColumn, showCharacterPortrait } = useMemo(
+    () => ({
+      showDescriptionColumn: settings[SETTINGS_KEYS.SHOW_DESCRIPTION_COLUMN] as boolean,
+      showUpdatedColumn: settings[SETTINGS_KEYS.SHOW_UPDATED_COLUMN] as boolean,
+      showCharacterColumn: settings[SETTINGS_KEYS.SHOW_CHARACTER_COLUMN] as boolean,
+      showCharacterPortrait: settings[SETTINGS_KEYS.SHOW_CHARACTER_PORTRAIT] as boolean,
+    }),
+    [settings],
+  );
 
   const filteredSignatures = useMemo<ExtendedSystemSignature[]>(() => {
     return signatures.filter(sig => {
+      if (filterSignature && !filterSignature(sig)) {
+        return false;
+      }
+
       if (hideLinkedSignatures && sig.linked_system) {
         return false;
       }
-      const isCosmicSignature = sig.kind === COSMIC_SIGNATURE;
 
-      if (isCosmicSignature) {
-        const showCosmic = settings.find(y => y.key === COSMIC_SIGNATURE)?.value;
-        if (!showCosmic) return false;
-        if (sig.group) {
-          const preparedGroup = getGroupIdByRawGroup(sig.group);
-          return enabledGroups.includes(preparedGroup);
+      if (sig.kind === SignatureKind.CosmicSignature) {
+        if (!settings[SETTINGS_KEYS.COSMIC_SIGNATURE]) {
+          return false;
         }
+
+        if (sig.group) {
+          const enabledGroups = Object.keys(settings).filter(
+            x => GROUPS_LIST.includes(x as SignatureGroup) && settings[x as SETTINGS_KEYS],
+          );
+
+          return enabledGroups.includes(getGroupIdByRawGroup(sig.group));
+        }
+
         return true;
-      } else {
-        return settings.find(y => y.key === sig.kind)?.value;
       }
+
+      return settings[sig.kind];
     });
-  }, [signatures, hideLinkedSignatures, settings, enabledGroups]);
+  }, [signatures, hideLinkedSignatures, settings, filterSignature]);
+
+  const onRowMouseEnter = useCallback((e: DataTableRowMouseEvent) => {
+    setHoveredSignature(e.data as SystemSignature);
+    tooltipRef.current?.show(e.originalEvent);
+  }, []);
+
+  const onRowMouseLeave = useCallback(() => {
+    setHoveredSignature(null);
+    tooltipRef.current?.hide();
+  }, []);
+
+  const refVars = useRef({ settings, selectedSignatures, setSortSettings });
+  refVars.current = { settings, selectedSignatures, setSortSettings };
+
+  // @ts-ignore
+  const getRowClassName = useCallback(rowData => {
+    if (!rowData) {
+      return null;
+    }
+
+    return getSignatureRowClass(
+      rowData as ExtendedSystemSignature,
+      refVars.current.selectedSignatures,
+      refVars.current.settings[SETTINGS_KEYS.COLOR_BY_TYPE] as boolean,
+    );
+  }, []);
+
+  const handleSortSettings = useCallback(
+    (e: DataTableStateEvent) => refVars.current.setSortSettings({ sortField: e.sortField, sortOrder: e.sortOrder }),
+    [],
+  );
 
   return (
     <div ref={tableRef} className="h-full">
@@ -193,37 +251,22 @@ export function SystemSignaturesContent({
           onRowDoubleClick={handleRowClick}
           sortField={sortSettings.sortField}
           sortOrder={sortSettings.sortOrder}
-          onSort={e => setSortSettings({ sortField: e.sortField, sortOrder: e.sortOrder })}
-          onRowMouseEnter={
-            isCompact || isMedium
-              ? (e: DataTableRowMouseEvent) => {
-                  setHoveredSignature(filteredSignatures[e.index]);
-                  tooltipRef.current?.show(e.originalEvent);
-                }
-              : undefined
-          }
-          onRowMouseLeave={
-            isCompact || isMedium
-              ? () => {
-                  setHoveredSignature(null);
-                  tooltipRef.current?.hide();
-                }
-              : undefined
-          }
-          rowClassName={rowData => getSignatureRowClass(rowData as ExtendedSystemSignature, selectedSignatures)}
+          onSort={handleSortSettings}
+          onRowMouseEnter={onRowMouseEnter}
+          onRowMouseLeave={onRowMouseLeave}
+          // @ts-ignore
+          rowClassName={getRowClassName}
         >
           <Column
             field="icon"
             header=""
-            headerStyle={headerInlineStyle}
-            body={sig => renderIcon(sig)}
+            body={renderColIcon}
             bodyClassName="p-0 px-1"
             style={{ maxWidth: 26, minWidth: 26, width: 26 }}
           />
           <Column
             field="eve_id"
             header="Id"
-            headerStyle={headerInlineStyle}
             bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
             style={{ maxWidth: 72, minWidth: 72, width: 72 }}
             sortable
@@ -231,7 +274,6 @@ export function SystemSignaturesContent({
           <Column
             field="group"
             header="Group"
-            headerStyle={headerInlineStyle}
             bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
             style={{ maxWidth: 110, minWidth: 110, width: 110 }}
             body={sig => sig.group ?? ''}
@@ -241,7 +283,6 @@ export function SystemSignaturesContent({
           <Column
             field="info"
             header="Info"
-            headerStyle={headerInlineStyle}
             bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
             style={{ maxWidth: nameColumnWidth }}
             hidden={isCompact || isMedium}
@@ -251,7 +292,6 @@ export function SystemSignaturesContent({
             <Column
               field="description"
               header="Description"
-              headerStyle={headerInlineStyle}
               bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
               hidden={isCompact}
               body={renderDescription}
@@ -261,18 +301,16 @@ export function SystemSignaturesContent({
           <Column
             field="inserted_at"
             header="Added"
-            headerStyle={headerInlineStyle}
             dataType="date"
             body={renderAddedTimeLeft}
             style={{ minWidth: 70, maxWidth: 80 }}
-            bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+            bodyClassName="ssc-header text-ellipsis overflow-hidden whitespace-nowrap"
             sortable
           />
           {showUpdatedColumn && (
             <Column
               field="updated_at"
               header="Updated"
-              headerStyle={headerInlineStyle}
               dataType="date"
               body={renderUpdatedTimeLeft}
               style={{ minWidth: 70, maxWidth: 80 }}
@@ -293,7 +331,6 @@ export function SystemSignaturesContent({
           {!selectable && (
             <Column
               header=""
-              headerStyle={headerInlineStyle}
               body={() => (
                 <div className="flex justify-end items-center gap-2 mr-[4px]">
                   <WdTooltipWrapper content="Double-click a row to edit signature">
@@ -311,7 +348,12 @@ export function SystemSignaturesContent({
       <WdTooltip
         className="bg-stone-900/95 text-slate-50"
         ref={tooltipRef}
-        content={hoveredSignature ? <SignatureView {...hoveredSignature} /> : null}
+        position={TooltipPosition.top}
+        content={
+          hoveredSignature ? (
+            <SignatureView signature={hoveredSignature} showCharacterPortrait={showCharacterPortrait} />
+          ) : null
+        }
       />
 
       {showSignatureSettings && (
@@ -324,4 +366,4 @@ export function SystemSignaturesContent({
       )}
     </div>
   );
-}
+};

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

@@ -9,8 +9,8 @@ import {
 } from '@/hooks/Mapper/types';
 
 export const TIME_ONE_MINUTE = 1000 * 60;
-export const TIME_TEN_MINUTES = 1000 * 60 * 10;
-export const TIME_ONE_DAY = 24 * 60 * 60 * 1000;
+export const TIME_TEN_MINUTES = TIME_ONE_MINUTE * 10;
+export const TIME_ONE_DAY = 24 * 60 * TIME_ONE_MINUTE;
 export const TIME_ONE_WEEK = 7 * TIME_ONE_DAY;
 export const FINAL_DURATION_MS = 10000;
 
@@ -79,3 +79,132 @@ export const MAPPING_TYPE_TO_ENG = {
 };
 
 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';
+
+export enum SETTINGS_KEYS {
+  SHOW_DESCRIPTION_COLUMN = 'show_description_column',
+  SHOW_UPDATED_COLUMN = 'show_updated_column',
+  SHOW_CHARACTER_COLUMN = 'show_character_column',
+  LAZY_DELETE_SIGNATURES = 'lazy_delete_signatures',
+  KEEP_LAZY_DELETE = 'keep_lazy_delete_enabled',
+  DELETION_TIMING = 'deletion_timing',
+  COLOR_BY_TYPE = 'color_by_type',
+  SHOW_CHARACTER_PORTRAIT = 'show_character_portrait',
+
+  // From SignatureKind
+  COSMIC_ANOMALY = SignatureKind.CosmicAnomaly,
+  COSMIC_SIGNATURE = SignatureKind.CosmicSignature,
+  DEPLOYABLE = SignatureKind.Deployable,
+  STRUCTURE = SignatureKind.Structure,
+  STARBASE = SignatureKind.Starbase,
+  SHIP = SignatureKind.Ship,
+  DRONE = SignatureKind.Drone,
+
+  // From SignatureGroup
+  WORMHOLE = SignatureGroup.Wormhole,
+  RELIC_SITE = SignatureGroup.RelicSite,
+  DATA_SITE = SignatureGroup.DataSite,
+  ORE_SITE = SignatureGroup.OreSite,
+  GAS_SITE = SignatureGroup.GasSite,
+  COMBAT_SITE = SignatureGroup.CombatSite,
+}
+
+export enum SettingsTypes {
+  flag,
+  dropdown,
+}
+
+export type SignatureSettingsType = { [key in SETTINGS_KEYS]?: unknown };
+
+export type Setting = {
+  key: SETTINGS_KEYS;
+  name: string;
+  type: SettingsTypes;
+  isSeparator?: boolean;
+  options?: { label: string; value: any }[];
+};
+
+export enum SIGNATURES_DELETION_TIMING {
+  IMMEDIATE,
+  DEFAULT,
+  EXTENDED,
+}
+
+export type SignatureDeletionTimingType = { [key in SIGNATURES_DELETION_TIMING]?: unknown };
+
+export const SIGNATURE_SETTINGS = {
+  filterFlags: [
+    { type: SettingsTypes.flag, key: SETTINGS_KEYS.COSMIC_ANOMALY, name: 'Show Anomalies' },
+    { type: SettingsTypes.flag, key: SETTINGS_KEYS.COSMIC_SIGNATURE, name: 'Show Cosmic Signatures' },
+    { type: SettingsTypes.flag, key: SETTINGS_KEYS.DEPLOYABLE, name: 'Show Deployables' },
+    { type: SettingsTypes.flag, key: SETTINGS_KEYS.STRUCTURE, name: 'Show Structures' },
+    { type: SettingsTypes.flag, key: SETTINGS_KEYS.STARBASE, name: 'Show Starbase' },
+    { type: SettingsTypes.flag, key: SETTINGS_KEYS.SHIP, name: 'Show Ships' },
+    { type: SettingsTypes.flag, key: SETTINGS_KEYS.DRONE, name: 'Show Drones And Charges' },
+    { type: SettingsTypes.flag, key: SETTINGS_KEYS.WORMHOLE, name: 'Show Wormholes' },
+    { type: SettingsTypes.flag, key: SETTINGS_KEYS.RELIC_SITE, name: 'Show Relic Sites' },
+    { type: SettingsTypes.flag, key: SETTINGS_KEYS.DATA_SITE, name: 'Show Data Sites' },
+    { type: SettingsTypes.flag, key: SETTINGS_KEYS.ORE_SITE, name: 'Show Ore Sites' },
+    { type: SettingsTypes.flag, key: SETTINGS_KEYS.GAS_SITE, name: 'Show Gas Sites' },
+    { type: SettingsTypes.flag, key: SETTINGS_KEYS.COMBAT_SITE, name: 'Show Combat Sites' },
+  ],
+  uiFlags: [
+    { type: SettingsTypes.flag, key: SETTINGS_KEYS.SHOW_UPDATED_COLUMN, name: 'Show Updated Column' },
+    { type: SettingsTypes.flag, key: SETTINGS_KEYS.SHOW_DESCRIPTION_COLUMN, name: 'Show Description Column' },
+    { type: SettingsTypes.flag, key: SETTINGS_KEYS.SHOW_CHARACTER_COLUMN, name: 'Show Character Column' },
+    { type: SettingsTypes.flag, key: SETTINGS_KEYS.LAZY_DELETE_SIGNATURES, name: 'Lazy Delete Signatures' },
+    { type: SettingsTypes.flag, key: SETTINGS_KEYS.KEEP_LAZY_DELETE, name: 'Keep "Lazy Delete" Enabled' },
+    {
+      type: SettingsTypes.flag,
+      key: SETTINGS_KEYS.SHOW_CHARACTER_PORTRAIT,
+      name: 'Show Character Portrait in Tooltip',
+    },
+    { type: SettingsTypes.flag, key: SETTINGS_KEYS.COLOR_BY_TYPE, name: 'Color Signatures by Type' },
+  ],
+  uiOther: [
+    {
+      type: SettingsTypes.dropdown,
+      key: SETTINGS_KEYS.DELETION_TIMING,
+      name: 'Deletion Timing',
+      options: [
+        { value: SIGNATURES_DELETION_TIMING.IMMEDIATE, label: '0s' },
+        { value: SIGNATURES_DELETION_TIMING.DEFAULT, label: '10s' },
+        { value: SIGNATURES_DELETION_TIMING.EXTENDED, label: '30s' },
+      ],
+    },
+  ],
+};
+
+export const SETTINGS_VALUES: SignatureSettingsType = {
+  [SETTINGS_KEYS.SHOW_UPDATED_COLUMN]: true,
+  [SETTINGS_KEYS.SHOW_DESCRIPTION_COLUMN]: true,
+  [SETTINGS_KEYS.SHOW_CHARACTER_COLUMN]: true,
+  [SETTINGS_KEYS.LAZY_DELETE_SIGNATURES]: true,
+  [SETTINGS_KEYS.KEEP_LAZY_DELETE]: false,
+  [SETTINGS_KEYS.DELETION_TIMING]: SIGNATURES_DELETION_TIMING.DEFAULT,
+  [SETTINGS_KEYS.COLOR_BY_TYPE]: true,
+  [SETTINGS_KEYS.SHOW_CHARACTER_PORTRAIT]: true,
+
+  [SETTINGS_KEYS.COSMIC_ANOMALY]: true,
+  [SETTINGS_KEYS.COSMIC_SIGNATURE]: true,
+  [SETTINGS_KEYS.DEPLOYABLE]: true,
+  [SETTINGS_KEYS.STRUCTURE]: true,
+  [SETTINGS_KEYS.STARBASE]: true,
+  [SETTINGS_KEYS.SHIP]: true,
+  [SETTINGS_KEYS.DRONE]: true,
+
+  [SETTINGS_KEYS.WORMHOLE]: true,
+  [SETTINGS_KEYS.RELIC_SITE]: true,
+  [SETTINGS_KEYS.DATA_SITE]: true,
+  [SETTINGS_KEYS.ORE_SITE]: true,
+  [SETTINGS_KEYS.GAS_SITE]: true,
+  [SETTINGS_KEYS.COMBAT_SITE]: true,
+};
+
+export const SIGNATURE_DELETION_TIMEOUTS: SignatureDeletionTimingType = {
+  [SIGNATURES_DELETION_TIMING.DEFAULT]: 10_000,
+  [SIGNATURES_DELETION_TIMING.IMMEDIATE]: 0,
+  [SIGNATURES_DELETION_TIMING.EXTENDED]: 30_000,
+};

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

@@ -1,12 +1,6 @@
-import { SystemSignature } from '@/hooks/Mapper/types';
+import { ExtendedSystemSignature, SystemSignature } from '@/hooks/Mapper/types';
 import { FINAL_DURATION_MS } from '../constants';
 
-export interface ExtendedSystemSignature extends SystemSignature {
-  pendingDeletion?: boolean;
-  pendingAddition?: boolean;
-  pendingUntil?: number;
-}
-
 export function prepareUpdatePayload(
   systemId: string,
   added: ExtendedSystemSignature[],
@@ -55,40 +49,56 @@ export function schedulePendingAdditionForSig(
   );
 }
 
-export function mergeLocalPendingAdditions(
+export function mergeLocalPending(
+  pendingMapRef: React.MutableRefObject<Record<string, ExtendedSystemSignature>>,
   serverSigs: ExtendedSystemSignature[],
-  localSigs: ExtendedSystemSignature[],
 ): ExtendedSystemSignature[] {
   const now = Date.now();
-  const pendingAdditions = localSigs.filter(sig => sig.pendingAddition && sig.pendingUntil && sig.pendingUntil > now);
+  const pendingDeletions = Object.values(pendingMapRef.current).filter(
+    sig => sig.pendingDeletion && sig.pendingUntil && sig.pendingUntil > now,
+  );
   const mergedMap = new Map<string, ExtendedSystemSignature>();
   serverSigs.forEach(sig => mergedMap.set(sig.eve_id, sig));
-  pendingAdditions.forEach(sig => {
-    if (!mergedMap.has(sig.eve_id)) {
+
+  pendingDeletions.forEach(sig => {
+    if (mergedMap.has(sig.eve_id)) {
       mergedMap.set(sig.eve_id, sig);
     }
   });
   return Array.from(mergedMap.values());
 }
 
-export function scheduleLazyDeletionTimers(
-  toRemove: ExtendedSystemSignature[],
-  setPendingMap: React.Dispatch<React.SetStateAction<Record<string, { finalUntil: number; finalTimeoutId: number }>>>,
-  finalizeRemoval: (sig: ExtendedSystemSignature) => Promise<void>,
+export function scheduleLazyTimers(
+  signatures: ExtendedSystemSignature[],
+  pendingMapRef: React.MutableRefObject<Record<string, ExtendedSystemSignature>>,
+  finalizeFn: (sig: ExtendedSystemSignature) => Promise<void>,
   finalDuration = FINAL_DURATION_MS,
 ) {
-  const now = Date.now();
-  toRemove.forEach(sig => {
+  signatures.forEach(sig => {
     const finalTimeoutId = window.setTimeout(async () => {
-      await finalizeRemoval(sig);
+      await finalizeFn(sig);
     }, finalDuration);
 
-    setPendingMap(prev => ({
-      ...prev,
+    pendingMapRef.current = {
+      ...pendingMapRef.current,
       [sig.eve_id]: {
-        finalUntil: now + finalDuration,
+        ...sig,
         finalTimeoutId,
       },
-    }));
+    };
   });
 }
+
+export const calculateTimeRemaining = (pendingSigs: SystemSignature[]) => {
+  const now = Date.now();
+  let minTime: number | undefined = undefined;
+
+  pendingSigs.forEach(sig => {
+    const extendedSig = sig as unknown as { pendingUntil?: number };
+    if (extendedSig.pendingUntil && (minTime === undefined || extendedSig.pendingUntil - now < minTime)) {
+      minTime = extendedSig.pendingUntil - now;
+    }
+  });
+
+  return minTime && minTime > 0 ? minTime : undefined;
+};

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

@@ -4,7 +4,7 @@ import { getState } from './getState';
 
 /**
  * Compare two lists of signatures and return which are added, updated, or removed.
- * 
+ *
  * @param oldSignatures existing signatures (in memory or from server)
  * @param newSignatures newly parsed or incoming signatures from user input
  * @param updateOnly    if true, do NOT remove old signatures not found in newSignatures

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

@@ -12,11 +12,11 @@ export const getRowBackgroundColor = (date: Date | undefined): string => {
   const diff = currentDate.getTime() + currentDate.getTimezoneOffset() * TIME_ONE_MINUTE - date.getTime();
 
   if (diff < TIME_ONE_MINUTE) {
-    return 'bg-lime-600/50 transition hover:bg-lime-600/60';
+    return '[&_.ssc-header]:text-amber-300 [&_.ssc-header]:hover:text-amber-200 [&_.ssc-header]:font-bold';
   }
 
   if (diff < TIME_TEN_MINUTES) {
-    return 'bg-lime-700/40 transition hover:bg-lime-700/50';
+    return '[&_.ssc-header]:text-amber-500 [&_.ssc-header]:hover:text-amber-500 [&_.ssc-header]:font-bold';
   }
 
   return '';

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers/rowStyles.module.scss

@@ -1,34 +1,4 @@
-.pendingDeletion {
-  background-color: #f87171;
-  transition: background-color 0.2s ease;
-}
-
-
-.pendingDeletion td {
-  background-color: #f87171;
-  transition: background-color 0.2s ease;
-}
-
-.pendingDeletion {
-  background-color: #f87171;
-  transition: background-color 0.2s ease;
-}
-
-.Table thead tr {
-  font-size: 12px !important;    
-  line-height: 1.333;     
-}
-
 .TableRowCompact {
   font-size: 12px !important;
   line-height: 1.333;
 }
-
-.Table td {
-  padding: 2px;
-  height: 25px;  
-  border: 1px solid #383838;
-  box-sizing: border-box;
-}
-
-

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

@@ -1,20 +1,48 @@
 import clsx from 'clsx';
-import { ExtendedSystemSignature } from './contentHelpers';
+import { ExtendedSystemSignature, SignatureGroup } from '@/hooks/Mapper/types';
 import { getRowBackgroundColor } from './getRowBackgroundColor';
 import classes from './rowStyles.module.scss';
 
 export function getSignatureRowClass(
   row: ExtendedSystemSignature,
   selectedSignatures: ExtendedSystemSignature[],
+  colorByType?: boolean,
 ): string {
   const isSelected = selectedSignatures.some(s => s.eve_id === row.eve_id);
 
-  return clsx(
+  const baseCls = [
     classes.TableRowCompact,
-    'p-selectable-row',
-    isSelected && 'bg-amber-500/50 hover:bg-amber-500/70 transition duration-200',
-    !isSelected && row.pendingDeletion && classes.pendingDeletion,
-    !isSelected && getRowBackgroundColor(row.inserted_at ? new Date(row.inserted_at) : undefined),
-    'hover:bg-purple-400/20 transition duration-200',
-  );
+    getRowBackgroundColor(row.inserted_at ? new Date(row.inserted_at) : undefined),
+    'transition duration-200 my-2 hover:bg-purple-400/20',
+  ];
+
+  if (isSelected) {
+    return clsx([...baseCls, 'bg-violet-400/40 hover:bg-violet-300/40']);
+  }
+
+  if (row.pendingDeletion) {
+    return clsx([...baseCls, 'bg-red-400/40 hover:bg-red-400/50']);
+  }
+
+  // Apply color by type styling if enabled
+  if (colorByType) {
+    switch (row.group) {
+      case SignatureGroup.CosmicSignature:
+        return clsx([...baseCls, '[&_td:nth-child(-n+3)]:text-rose-400 [&_td:nth-child(-n+3)]:hover:text-rose-300']);
+      case SignatureGroup.Wormhole:
+        return clsx([...baseCls, '[&_td:nth-child(-n+3)]:text-sky-300 [&_td:nth-child(-n+3)]:hover:text-sky-200']);
+      case SignatureGroup.CombatSite:
+      case SignatureGroup.RelicSite:
+      case SignatureGroup.DataSite:
+      case SignatureGroup.GasSite:
+      case SignatureGroup.OreSite:
+        return clsx([...baseCls, '[&_td:nth-child(-n+4)]:text-lime-400 [&_td:nth-child(-n+4)]:hover:text-lime-300']);
+    }
+
+    // Default for color by type - apply same color as CosmicSignature (red) and small text size
+    return clsx([...baseCls, '[&_td:nth-child(-n+3)]:text-rose-400/100']);
+  }
+
+  // Original styling when color by type is disabled
+  return clsx(...baseCls);
 }

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

@@ -1,26 +1,38 @@
-import { ExtendedSystemSignature } from '../helpers/contentHelpers';
+import { SignatureSettingsType } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
+import { ExtendedSystemSignature } from '@/hooks/Mapper/types';
 
 export interface UseSystemSignaturesDataProps {
   systemId: string;
-  settings: { key: string; value: boolean }[];
+  settings: SignatureSettingsType;
   hideLinkedSignatures?: boolean;
   onCountChange?: (count: number) => void;
-  onPendingChange?: (pending: ExtendedSystemSignature[], undo: () => void) => void;
+  onPendingChange?: (
+    pending: React.MutableRefObject<Record<string, ExtendedSystemSignature>>,
+    undo: () => void,
+  ) => void;
   onLazyDeleteChange?: (value: boolean) => void;
+  deletionTiming?: number;
 }
 
 export interface UseFetchingParams {
   systemId: string;
   signaturesRef: React.MutableRefObject<ExtendedSystemSignature[]>;
   setSignatures: React.Dispatch<React.SetStateAction<ExtendedSystemSignature[]>>;
-  localPendingDeletions: ExtendedSystemSignature[];
+  pendingDeletionMapRef: React.MutableRefObject<Record<string, ExtendedSystemSignature>>;
 }
 
 export interface UsePendingDeletionParams {
   systemId: string;
+  deletionTiming?: number;
   setSignatures: React.Dispatch<React.SetStateAction<ExtendedSystemSignature[]>>;
+  onPendingChange?: (
+    pending: React.MutableRefObject<Record<string, ExtendedSystemSignature>>,
+    undo: () => void,
+  ) => void;
 }
 
 export interface UsePendingAdditionParams {
+  systemId: string;
   setSignatures: React.Dispatch<React.SetStateAction<ExtendedSystemSignature[]>>;
+  deletionTiming?: number;
 }

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

@@ -1,53 +0,0 @@
-import { useState, useCallback, useRef } from 'react';
-import { ExtendedSystemSignature, schedulePendingAdditionForSig } from '../helpers/contentHelpers';
-import { UsePendingAdditionParams } from './types';
-import { FINAL_DURATION_MS } from '../constants';
-
-export function usePendingAdditions({ setSignatures }: UsePendingAdditionParams) {
-  const [pendingUndoAdditions, setPendingUndoAdditions] = useState<ExtendedSystemSignature[]>([]);
-  const pendingAdditionMapRef = useRef<Record<string, { finalUntil: number; finalTimeoutId: number }>>({});
-
-  const processAddedSignatures = useCallback(
-    (added: ExtendedSystemSignature[]) => {
-      if (!added.length) return;
-      const now = Date.now();
-      setSignatures(prev => [
-        ...prev,
-        ...added.map(sig => ({
-          ...sig,
-          pendingAddition: true,
-          pendingUntil: now + FINAL_DURATION_MS,
-        })),
-      ]);
-      added.forEach(sig => {
-        schedulePendingAdditionForSig(
-          sig,
-          FINAL_DURATION_MS,
-          setSignatures,
-          pendingAdditionMapRef,
-          setPendingUndoAdditions,
-        );
-      });
-    },
-    [setSignatures],
-  );
-
-  const clearPendingAdditions = useCallback(() => {
-    Object.values(pendingAdditionMapRef.current).forEach(({ finalTimeoutId }) => {
-      clearTimeout(finalTimeoutId);
-    });
-    pendingAdditionMapRef.current = {};
-    setSignatures(prev =>
-      prev.map(x => (x.pendingAddition ? { ...x, pendingAddition: false, pendingUntil: undefined } : x)),
-    );
-    setPendingUndoAdditions([]);
-  }, [setSignatures]);
-
-  return {
-    pendingUndoAdditions,
-    setPendingUndoAdditions,
-    pendingAdditionMapRef,
-    processAddedSignatures,
-    clearPendingAdditions,
-  };
-}

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

@@ -1,16 +1,22 @@
-import { useState, useCallback } from 'react';
+import { useCallback, useRef, useEffect } from 'react';
 import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
-import { ExtendedSystemSignature, prepareUpdatePayload, scheduleLazyDeletionTimers } from '../helpers';
+import { prepareUpdatePayload, scheduleLazyTimers } 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 }: UsePendingDeletionParams) {
+export function usePendingDeletions({
+  systemId,
+  setSignatures,
+  deletionTiming,
+  onPendingChange,
+}: UsePendingDeletionParams) {
   const { outCommand } = useMapRootState();
-  const [localPendingDeletions, setLocalPendingDeletions] = useState<ExtendedSystemSignature[]>([]);
-  const [pendingDeletionMap, setPendingDeletionMap] = useState<
-    Record<string, { finalUntil: number; finalTimeoutId: number }>
-  >({});
+  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 (
@@ -19,60 +25,70 @@ export function usePendingDeletions({ systemId, setSignatures }: UsePendingDelet
       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,
-        pendingAddition: false,
-        pendingUntil: now + FINAL_DURATION_MS,
+        pendingUntil: now + finalDuration,
       }));
-      setLocalPendingDeletions(prev => [...prev, ...processedRemoved]);
+      pendingDeletionMapRef.current = {
+        ...pendingDeletionMapRef.current,
+        ...processedRemoved.reduce((acc: any, sig) => {
+          acc[sig.eve_id] = sig;
+          return acc;
+        }, {}),
+      };
 
-      outCommand({
-        type: OutCommand.updateSignatures,
-        data: prepareUpdatePayload(systemId, added, updated, []),
-      });
+      onPendingChange?.(pendingDeletionMapRef, clearPendingDeletions);
 
       setSignatures(prev =>
         prev.map(sig => {
           if (processedRemoved.find(r => r.eve_id === sig.eve_id)) {
-            return { ...sig, pendingDeletion: true, pendingUntil: now + FINAL_DURATION_MS };
+            return { ...sig, pendingDeletion: true, pendingUntil: now + finalDuration };
           }
           return sig;
         }),
       );
 
-      scheduleLazyDeletionTimers(
+      scheduleLazyTimers(
         processedRemoved,
-        setPendingDeletionMap,
+        pendingDeletionMapRef,
         async sig => {
           await outCommand({
             type: OutCommand.updateSignatures,
             data: prepareUpdatePayload(systemId, [], [], [sig]),
           });
-          setLocalPendingDeletions(prev => prev.filter(x => x.eve_id !== sig.eve_id));
+          delete pendingDeletionMapRef.current[sig.eve_id];
           setSignatures(prev => prev.filter(x => x.eve_id !== sig.eve_id));
+          onPendingChange?.(pendingDeletionMapRef, clearPendingDeletions);
         },
-        FINAL_DURATION_MS,
+        finalDuration,
       );
     },
-    [systemId, outCommand, setSignatures],
+    [systemId, outCommand, finalDuration],
   );
 
   const clearPendingDeletions = useCallback(() => {
-    Object.values(pendingDeletionMap).forEach(({ finalTimeoutId }) => clearTimeout(finalTimeoutId));
-    setPendingDeletionMap({});
-    setSignatures(prev =>
-      prev.map(x => (x.pendingDeletion ? { ...x, pendingDeletion: false, pendingUntil: undefined } : x)),
-    );
-    setLocalPendingDeletions([]);
-  }, [pendingDeletionMap, setSignatures]);
+    Object.values(pendingDeletionMapRef.current).forEach(({ finalTimeoutId }) => {
+      clearTimeout(finalTimeoutId);
+    });
+    pendingDeletionMapRef.current = {};
+    setSignatures(prev => prev.map(x => (x.pendingDeletion ? { ...x, pendingDeletion: false } : x)));
+    onPendingChange?.(pendingDeletionMapRef, clearPendingDeletions);
+  }, []);
 
   return {
-    localPendingDeletions,
-    setLocalPendingDeletions,
-    pendingDeletionMap,
-    setPendingDeletionMap,
+    pendingDeletionMapRef,
     processRemovedSignatures,
     clearPendingDeletions,
   };

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

@@ -1,17 +1,16 @@
 import { useCallback } from 'react';
-import { SystemSignature } from '@/hooks/Mapper/types';
+import { ExtendedSystemSignature, SystemSignature } from '@/hooks/Mapper/types';
 import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
-import { ExtendedSystemSignature, prepareUpdatePayload, getActualSigs, mergeLocalPendingAdditions } from '../helpers';
+import { prepareUpdatePayload, getActualSigs, mergeLocalPending } from '../helpers';
 import { UseFetchingParams } from './types';
-import { FINAL_DURATION_MS } from '../constants';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 
-export function useSignatureFetching({
+export const useSignatureFetching = ({
   systemId,
   signaturesRef,
   setSignatures,
-  localPendingDeletions,
-}: UseFetchingParams) {
+  pendingDeletionMapRef,
+}: UseFetchingParams) => {
   const {
     data: { characters },
     outCommand,
@@ -22,9 +21,6 @@ export function useSignatureFetching({
       setSignatures([]);
       return;
     }
-    if (localPendingDeletions.length) {
-      return;
-    }
     const resp = await outCommand({
       type: OutCommand.getSignatures,
       data: { system_id: systemId },
@@ -36,8 +32,8 @@ export function useSignatureFetching({
       character_name: characters.find(c => c.eve_id === s.character_eve_id)?.name,
     })) as ExtendedSystemSignature[];
 
-    setSignatures(prev => mergeLocalPendingAdditions(extended, prev));
-  }, [characters, systemId, localPendingDeletions, outCommand, setSignatures]);
+    setSignatures(() => mergeLocalPending(pendingDeletionMapRef, extended));
+  }, [characters, systemId, outCommand]);
 
   const handleUpdateSignatures = useCallback(
     async (newList: ExtendedSystemSignature[], updateOnly: boolean, skipUpdateUntouched?: boolean) => {
@@ -48,28 +44,16 @@ export function useSignatureFetching({
         skipUpdateUntouched,
       );
 
-      if (added.length > 0) {
-        const now = Date.now();
-        setSignatures(prev => [
-          ...prev,
-          ...added.map(a => ({
-            ...a,
-            pendingAddition: true,
-            pendingUntil: now + FINAL_DURATION_MS,
-          })),
-        ]);
-      }
-
       await outCommand({
         type: OutCommand.updateSignatures,
         data: prepareUpdatePayload(systemId, added, updated, removed),
       });
     },
-    [systemId, outCommand, signaturesRef, setSignatures],
+    [systemId, outCommand, signaturesRef],
   );
 
   return {
     handleGetSignatures,
     handleUpdateSignatures,
   };
-}
+};

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

@@ -1,72 +1,64 @@
 import { useCallback, useEffect, useState } from 'react';
 import useRefState from 'react-usestateref';
 import { useMapEventListener } from '@/hooks/Mapper/events';
-import { Commands, SystemSignature } from '@/hooks/Mapper/types';
+import { Commands, ExtendedSystemSignature, SignatureKind } from '@/hooks/Mapper/types';
 import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
 import { parseSignatures } from '@/hooks/Mapper/helpers';
-import {
-  KEEP_LAZY_DELETE_SETTING,
-  LAZY_DELETE_SIGNATURES_SETTING,
-} from '@/hooks/Mapper/components/mapInterface/widgets';
-import { ExtendedSystemSignature, getActualSigs, mergeLocalPendingAdditions } from '../helpers';
+
+import { getActualSigs } from '../helpers';
 import { useSignatureFetching } from './useSignatureFetching';
-import { usePendingAdditions } from './usePendingAdditions';
 import { usePendingDeletions } from './usePendingDeletions';
 import { UseSystemSignaturesDataProps } from './types';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { SETTINGS_KEYS } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
 
-export function useSystemSignaturesData({
+export const useSystemSignaturesData = ({
   systemId,
   settings,
   onCountChange,
   onPendingChange,
   onLazyDeleteChange,
-}: UseSystemSignaturesDataProps) {
+  deletionTiming,
+}: UseSystemSignaturesDataProps) => {
   const { outCommand } = useMapRootState();
   const [signatures, setSignatures, signaturesRef] = useRefState<ExtendedSystemSignature[]>([]);
   const [selectedSignatures, setSelectedSignatures] = useState<ExtendedSystemSignature[]>([]);
 
-  const { localPendingDeletions, setLocalPendingDeletions, processRemovedSignatures, clearPendingDeletions } =
-    usePendingDeletions({
-      systemId,
-      setSignatures,
-    });
-  const { pendingUndoAdditions, setPendingUndoAdditions, processAddedSignatures, clearPendingAdditions } =
-    usePendingAdditions({
-      setSignatures,
-    });
+  const { pendingDeletionMapRef, processRemovedSignatures, clearPendingDeletions } = usePendingDeletions({
+    systemId,
+    setSignatures,
+    deletionTiming,
+    onPendingChange,
+  });
 
   const { handleGetSignatures, handleUpdateSignatures } = useSignatureFetching({
     systemId,
     signaturesRef,
     setSignatures,
-    localPendingDeletions,
+    pendingDeletionMapRef,
   });
 
   const handlePaste = useCallback(
     async (clipboardString: string) => {
-      const lazyDeleteValue = settings.find(s => s.key === LAZY_DELETE_SIGNATURES_SETTING)?.value ?? false;
+      const lazyDeleteValue = settings[SETTINGS_KEYS.LAZY_DELETE_SIGNATURES] as boolean;
 
       const incomingSignatures = parseSignatures(
         clipboardString,
-        settings.map(s => s.key),
+        Object.keys(settings).filter(skey => skey in SignatureKind),
       ) as ExtendedSystemSignature[];
 
-      const current = signaturesRef.current;
       const currentNonPending = lazyDeleteValue
-        ? current.filter(sig => !sig.pendingDeletion)
-        : current.filter(sig => !sig.pendingDeletion && !sig.pendingAddition);
+        ? signaturesRef.current.filter(sig => !sig.pendingDeletion)
+        : signaturesRef.current.filter(sig => !sig.pendingDeletion || !sig.pendingAddition);
 
       const { added, updated, removed } = getActualSigs(currentNonPending, incomingSignatures, !lazyDeleteValue, true);
 
-      if (added.length > 0) {
-        processAddedSignatures(added);
-      }
-
       if (removed.length > 0) {
         await processRemovedSignatures(removed, added, updated);
-      } else {
-        const resp = await outCommand({
+      }
+
+      if (updated.length !== 0 || added.length !== 0) {
+        await outCommand({
           type: OutCommand.updateSignatures,
           data: {
             system_id: systemId,
@@ -75,34 +67,14 @@ export function useSystemSignaturesData({
             removed: [],
           },
         });
-        if (resp) {
-          const finalSigs = (resp.signatures ?? []) as SystemSignature[];
-          setSignatures(prev =>
-            mergeLocalPendingAdditions(
-              finalSigs.map(x => ({ ...x })),
-              prev,
-            ),
-          );
-        }
       }
 
-      const keepLazy = settings.find(s => s.key === KEEP_LAZY_DELETE_SETTING)?.value ?? false;
+      const keepLazy = settings[SETTINGS_KEYS.KEEP_LAZY_DELETE] as boolean;
       if (lazyDeleteValue && !keepLazy) {
-        setTimeout(() => {
-          onLazyDeleteChange?.(false);
-        }, 0);
+        onLazyDeleteChange?.(false);
       }
     },
-    [
-      settings,
-      signaturesRef,
-      processAddedSignatures,
-      processRemovedSignatures,
-      outCommand,
-      systemId,
-      setSignatures,
-      onLazyDeleteChange,
-    ],
+    [settings, signaturesRef, processRemovedSignatures, outCommand, systemId, onLazyDeleteChange],
   );
 
   const handleDeleteSelected = useCallback(async () => {
@@ -112,7 +84,7 @@ export function useSystemSignaturesData({
 
     await handleUpdateSignatures(finalList, false, true);
     setSelectedSignatures([]);
-  }, [selectedSignatures, signatures, handleUpdateSignatures]);
+  }, [selectedSignatures, signatures]);
 
   const handleSelectAll = useCallback(() => {
     setSelectedSignatures(signatures);
@@ -120,42 +92,7 @@ export function useSystemSignaturesData({
 
   const undoPending = useCallback(() => {
     clearPendingDeletions();
-    clearPendingAdditions();
-    setSignatures(prev =>
-      prev.map(x => (x.pendingDeletion ? { ...x, pendingDeletion: false, pendingUntil: undefined } : x)),
-    );
-
-    if (pendingUndoAdditions.length) {
-      pendingUndoAdditions.forEach(async sig => {
-        await outCommand({
-          type: OutCommand.updateSignatures,
-          data: {
-            system_id: systemId,
-            added: [],
-            updated: [],
-            removed: [sig],
-          },
-        });
-      });
-      setSignatures(prev => prev.filter(x => !pendingUndoAdditions.some(u => u.eve_id === x.eve_id)));
-      setPendingUndoAdditions([]);
-    }
-    setLocalPendingDeletions([]);
-  }, [
-    clearPendingDeletions,
-    clearPendingAdditions,
-    pendingUndoAdditions,
-    setPendingUndoAdditions,
-    setLocalPendingDeletions,
-    setSignatures,
-    outCommand,
-    systemId,
-  ]);
-
-  useEffect(() => {
-    const combined = [...localPendingDeletions, ...pendingUndoAdditions];
-    onPendingChange?.(combined, undoPending);
-  }, [localPendingDeletions, pendingUndoAdditions, onPendingChange, undoPending]);
+  }, [clearPendingDeletions]);
 
   useMapEventListener(event => {
     if (event.name === Commands.signaturesUpdated && String(event.data) === String(systemId)) {
@@ -167,14 +104,15 @@ export function useSystemSignaturesData({
   useEffect(() => {
     if (!systemId) {
       setSignatures([]);
+      undoPending();
       return;
     }
     handleGetSignatures();
-  }, [systemId, handleGetSignatures, setSignatures]);
+  }, [systemId]);
 
   useEffect(() => {
     onCountChange?.(signatures.length);
-  }, [signatures, onCountChange]);
+  }, [signatures]);
 
   return {
     signatures,
@@ -184,4 +122,4 @@ export function useSystemSignaturesData({
     handleSelectAll,
     handlePaste,
   };
-}
+};

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

@@ -5,4 +5,3 @@ export * from './renderAddedTimeLeft';
 export * from './renderUpdatedTimeLeft';
 export * from './renderLinkedSystem';
 export * from './renderInfoColumn';
-export * from './renderHeaderLabel';

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

@@ -1,5 +0,0 @@
-import { SystemSignaturesHeader, HeaderProps } from '../SystemSignatureHeader/SystemSignatureHeader';
-
-export function renderHeaderLabel(props: HeaderProps) {
-  return <SystemSignaturesHeader {...props} />;
-}

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

@@ -8,13 +8,20 @@ import { OnTheMap, RightBar } from '@/hooks/Mapper/components/mapRootContent/com
 import { MapContextMenu } from '@/hooks/Mapper/components/mapRootContent/components/MapContextMenu/MapContextMenu.tsx';
 import { useSkipContextMenu } from '@/hooks/Mapper/hooks/useSkipContextMenu';
 import { MapSettings } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings';
+import { CharacterActivity } from '@/hooks/Mapper/components/mapRootContent/components/CharacterActivity';
+import { TrackAndFollow } from '@/hooks/Mapper/components/mapRootContent/components/TrackAndFollow/TrackAndFollow';
+import { useCharacterActivityHandlers } from './hooks/useCharacterActivityHandlers';
+import { useTrackAndFollowHandlers } from './hooks/useTrackAndFollowHandlers';
 
 export interface MapRootContentProps {}
 
 // eslint-disable-next-line no-empty-pattern
 export const MapRootContent = ({}: MapRootContentProps) => {
-  const { interfaceSettings } = useMapRootState();
+  const { interfaceSettings, data } = useMapRootState();
   const { isShowMenu } = interfaceSettings;
+  const { showCharacterActivity, showTrackAndFollow } = data;
+  const { handleHideCharacterActivity } = useCharacterActivityHandlers();
+  const { handleHideTracking } = useTrackAndFollowHandlers();
 
   const themeClass = `${interfaceSettings.theme ?? 'default'}-theme`;
 
@@ -49,7 +56,11 @@ export const MapRootContent = ({}: MapRootContentProps) => {
           </div>
         )}
         <OnTheMap show={showOnTheMap} onHide={() => setShowOnTheMap(false)} />
-        <MapSettings show={showMapSettings} onHide={() => setShowMapSettings(false)} />
+        {showMapSettings && <MapSettings visible={showMapSettings} onHide={() => setShowMapSettings(false)} />}
+        {showCharacterActivity && (
+          <CharacterActivity visible={showCharacterActivity} onHide={handleHideCharacterActivity} />
+        )}
+        {showTrackAndFollow && <TrackAndFollow visible={showTrackAndFollow} onHide={handleHideTracking} />}
       </Layout>
     </div>
   );

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

@@ -0,0 +1,129 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Dialog } from 'primereact/dialog';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { ProgressSpinner } from 'primereact/progressspinner';
+import { CharacterCard } from '../../../ui-kit';
+import { CharacterTypeRaw } from '@/hooks/Mapper/types';
+
+export interface ActivitySummary {
+  character: CharacterTypeRaw;
+  passages: number;
+  connections: number;
+  signatures: number;
+}
+
+interface CharacterActivityProps {
+  visible: boolean;
+  onHide: () => void;
+}
+
+const getRowClassName = () => ['text-xs', 'leading-tight'];
+
+const renderCharacterTemplate = (rowData: ActivitySummary) => {
+  return <CharacterCard compact isOwn {...rowData.character} />;
+};
+
+const renderValueTemplate = (rowData: ActivitySummary, field: keyof ActivitySummary) => {
+  return <div className="tabular-nums">{rowData[field] as number}</div>;
+};
+
+export const CharacterActivity = ({ visible, onHide }: CharacterActivityProps) => {
+  const { data } = useMapRootState();
+  const { characterActivityData } = data;
+  const [localActivity, setLocalActivity] = useState<ActivitySummary[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const activity = useMemo(() => {
+    return characterActivityData?.activity || [];
+  }, [characterActivityData]);
+
+  useEffect(() => {
+    setLocalActivity(activity);
+    setLoading(characterActivityData?.loading !== false);
+  }, [activity, characterActivityData]);
+
+  const renderContent = () => {
+    if (loading) {
+      return (
+        <div className="flex flex-col items-center justify-center h-[400px] w-full">
+          <ProgressSpinner className="w-[50px] h-[50px]" strokeWidth="4" />
+          <div className="mt-4 text-text-color-secondary text-sm">Loading character activity data...</div>
+        </div>
+      );
+    }
+
+    if (localActivity.length === 0) {
+      return (
+        <div className="p-8 text-center text-text-color-secondary italic">No character activity data available</div>
+      );
+    }
+
+    return (
+      <DataTable
+        value={localActivity}
+        scrollable
+        scrollHeight="400px"
+        resizableColumns
+        columnResizeMode="fit"
+        className="w-full"
+        tableClassName="w-full border-0"
+        emptyMessage="No character activity data available"
+        sortField="passages"
+        sortOrder={-1}
+        size="small"
+        rowClassName={getRowClassName}
+        rowHover
+      >
+        <Column
+          field="character_name"
+          header="Character"
+          body={renderCharacterTemplate}
+          sortable
+          // headerStyle={{ minWidth: '75px', height: 'auto', overflow: 'visible' }}
+          // bodyStyle={{ minWidth: '75px' }}
+          // className={classes.characterColumn}
+          // headerClassName={classes.columnHeader}
+        />
+
+        <Column
+          field="passages"
+          header="Passages"
+          body={rowData => renderValueTemplate(rowData, 'passages')}
+          sortable
+          // headerStyle={{ width: '120px', textAlign: 'center', height: 'auto', overflow: 'visible' }}
+          // bodyStyle={{ width: '120px', textAlign: 'center' }}
+          // className={classes.numericColumn}
+          // headerClassName={classes.columnHeader}
+        />
+        <Column
+          field="connections"
+          header="Connections"
+          body={rowData => renderValueTemplate(rowData, 'connections')}
+          sortable
+          // headerStyle={{ width: '120px', textAlign: 'center', height: 'auto', overflow: 'visible' }}
+          // bodyStyle={{ width: '120px', textAlign: 'center' }}
+          // className={classes.numericColumn}
+          // headerClassName={classes.columnHeader}
+        />
+        <Column
+          field="signatures"
+          header="Signatures"
+          body={rowData => renderValueTemplate(rowData, 'signatures')}
+          sortable
+          // headerStyle={{ width: '120px', textAlign: 'center', height: 'auto', overflow: 'visible' }}
+          // bodyStyle={{ width: '120px', textAlign: 'center' }}
+          // className={classes.numericColumn}
+          // headerClassName={classes.columnHeader}
+        />
+      </DataTable>
+    );
+  };
+
+  return (
+    <Dialog header="Character Activity" visible={visible} className="max-w-[600px]" onHide={onHide} dismissableMask>
+      <div className="w-full h-[400px] flex flex-col overflow-hidden p-0 m-0">{renderContent()}</div>
+    </Dialog>
+  );
+};

assets/js/hooks/Mapper/components/mapRootContent/components/CharacterActivity/index.ts

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

assets/js/hooks/Mapper/components/mapRootContent/components/Connections/PassageCard/PassageCard.tsx

@@ -68,7 +68,7 @@ export const PassageCard = ({ inserted_at, character: char, ship }: PassageCardT
               <div className="grid gap-1 grid-cols-[1fr_1px_auto]">
                 {ship.ship_name && (
                   <>
-                    <span className="text-ellipsis overflow-hidden whitespace-nowrap">
+                    <span className="text-ellipsis overflow-hidden whitespace-nowrap flex justify-end text-neutral-400">
                       {getShipName(ship.ship_name)}
                     </span>
                     <div className="h-3 border-r border-neutral-500 my-0.5"></div>

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

@@ -22,8 +22,15 @@ export const MapContextMenu = ({ onShowOnTheMap, onShowMapSettings }: MapContext
 
   const handleAddCharacter = useCallback(() => {
     outCommand({
-      type: OutCommand.addCharacter,
-      data: null,
+      type: OutCommand.showTracking,
+      data: {},
+    });
+  }, [outCommand]);
+
+  const handleShowActivity = useCallback(() => {
+    outCommand({
+      type: OutCommand.showActivity,
+      data: {},
     });
   }, [outCommand]);
 
@@ -36,6 +43,12 @@ export const MapContextMenu = ({ onShowOnTheMap, onShowMapSettings }: MapContext
           command: handleAddCharacter,
           visible: true,
         },
+        {
+          label: 'Character Activity',
+          icon: 'pi pi-chart-bar',
+          command: handleShowActivity,
+          visible: canTrackCharacters,
+        },
         {
           label: 'On the map',
           icon: 'pi pi-hashtag',
@@ -61,7 +74,14 @@ export const MapContextMenu = ({ onShowOnTheMap, onShowMapSettings }: MapContext
         },
       ] as MenuItem[]
     ).filter(item => item.visible);
-  }, [canTrackCharacters, handleAddCharacter, onShowMapSettings, onShowOnTheMap, setInterfaceSettings]);
+  }, [
+    canTrackCharacters,
+    handleAddCharacter,
+    handleShowActivity,
+    onShowMapSettings,
+    onShowOnTheMap,
+    setInterfaceSettings,
+  ]);
 
   return (
     <div className="ml-1">

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

@@ -40,7 +40,7 @@ export type UserSettingsRemote = {
 export type UserSettings = UserSettingsRemote & InterfaceStoredSettings;
 
 export interface MapSettingsProps {
-  show: boolean;
+  visible: boolean;
   onHide: () => void;
 }
 
@@ -128,7 +128,7 @@ const THEME_SETTING: SettingsListItem = {
   options: THEME_OPTIONS,
 };
 
-export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
+export const MapSettings = ({ visible, onHide }: MapSettingsProps) => {
   const [activeIndex, setActiveIndex] = useState(0);
   const { outCommand, interfaceSettings, setInterfaceSettings } = useMapRootState();
   const [userRemoteSettings, setUserRemoteSettings] = useState<UserSettingsRemote>({
@@ -213,12 +213,12 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
   return (
     <Dialog
       header="Map user settings"
-      visible={show}
+      visible
       draggable={false}
       style={{ width: '550px' }}
       onShow={handleShow}
       onHide={() => {
-        if (!show) return;
+        if (!visible) return;
         setActiveIndex(0);
         onHide();
       }}

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

@@ -26,7 +26,7 @@ const STORED_DEFAULT_VALUES: WindowLocalSettingsType = {
 const itemTemplate = (item: CharacterTypeRaw & WithIsOwnCharacter, options: VirtualScrollerTemplateOptions) => {
   return (
     <div
-      className={clsx(classes.CharacterRow, 'w-full box-border', {
+      className={clsx(classes.CharacterRow, 'w-full box-border px-2 py-1', {
         'surface-hover': options.odd,
         ['border-b border-gray-600 border-opacity-20']: !options.last,
         ['bg-green-500 hover:bg-green-700 transition duration-300 bg-opacity-10 hover:bg-opacity-10']: item.online,

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

@@ -21,10 +21,11 @@ export const RightBar = ({ onShowOnTheMap, onShowMapSettings }: RightBarProps) =
 
   const isShowMinimap = interfaceSettings.isShowMinimap === undefined ? true : interfaceSettings.isShowMinimap;
 
-  const handleAddCharacter = useCallback(() => {
+  const handleShowTracking = useCallback(() => {
+    // Use the OutCommand pattern for showing the tracking dialog
     outCommand({
-      type: OutCommand.addCharacter,
-      data: null,
+      type: OutCommand.showTracking,
+      data: {},
     });
   }, [outCommand]);
 
@@ -63,22 +64,25 @@ export const RightBar = ({ onShowOnTheMap, onShowMapSettings }: RightBarProps) =
           <button
             className="btn bg-transparent text-gray-400 hover:text-white border-transparent hover:bg-transparent py-2 h-auto min-h-auto"
             type="button"
-            onClick={handleAddCharacter}
+            onClick={handleShowTracking}
+            id="show-tracking-button"
           >
             <i className="pi pi-user-plus"></i>
           </button>
         </WdTooltipWrapper>
 
         {canTrackCharacters && (
-          <WdTooltipWrapper content="Show on the map" position={TooltipPosition.left}>
-            <button
-              className="btn bg-transparent text-gray-400 hover:text-white border-transparent hover:bg-transparent py-2 h-auto min-h-auto"
-              type="button"
-              onClick={onShowOnTheMap}
-            >
-              <i className="pi pi-hashtag"></i>
-            </button>
-          </WdTooltipWrapper>
+          <>
+            <WdTooltipWrapper content="Show on the map" position={TooltipPosition.left}>
+              <button
+                className="btn bg-transparent text-gray-400 hover:text-white border-transparent hover:bg-transparent py-2 h-auto min-h-auto"
+                type="button"
+                onClick={onShowOnTheMap}
+              >
+                <i className="pi pi-hashtag"></i>
+              </button>
+            </WdTooltipWrapper>
+          </>
         )}
       </div>
 

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

@@ -1,6 +1,6 @@
 import { Dialog } from 'primereact/dialog';
 import { useCallback, useEffect } from 'react';
-import { OutCommand, SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
+import { OutCommand, SignatureGroup, SystemSignature, TimeStatus } from '@/hooks/Mapper/types';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import {
   SignatureGroupContent,
@@ -10,6 +10,7 @@ import { InputText } from 'primereact/inputtext';
 import { SystemsSettingsProvider } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/Provider.tsx';
 import { Button } from 'primereact/button';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { getWhSize } from '@/hooks/Mapper/helpers/getWhSize';
 
 type SystemSignaturePrepared = Omit<SystemSignature, 'linked_system'> & { linked_system: string };
 
@@ -21,7 +22,10 @@ export interface MapSettingsProps {
 }
 
 export const SignatureSettings = ({ systemId, show, onHide, signatureData }: MapSettingsProps) => {
-  const { outCommand } = useMapRootState();
+  const {
+    outCommand,
+    data: { wormholes },
+  } = useMapRootState();
 
   const handleShow = async () => {};
   const signatureForm = useForm<Partial<SystemSignaturePrepared>>({});
@@ -47,6 +51,31 @@ export const SignatureSettings = ({ systemId, show, onHide, signatureData }: Map
                 solar_system_target: values.linked_system,
               },
             });
+
+            if (values.isEOL) {
+              await outCommand({
+                type: OutCommand.updateConnectionTimeStatus,
+                data: {
+                  source: systemId,
+                  target: values.linked_system,
+                  value: TimeStatus.eol,
+                },
+              });
+            }
+
+            if (values.type) {
+              const whShipSize = getWhSize(wormholes, values.type);
+              if (whShipSize) {
+                outCommand({
+                  type: OutCommand.updateConnectionShipSizeType,
+                  data: {
+                    source: systemId,
+                    target: values.linked_system,
+                    value: whShipSize,
+                  },
+                });
+              }
+            }
           }
 
           out = {

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

@@ -0,0 +1,3 @@
+.trackFollowHeader {
+  background-color: #1e1e1e;
+}

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

@@ -0,0 +1,85 @@
+import { useCallback, useMemo } from 'react';
+import { Dialog } from 'primereact/dialog';
+import { VirtualScroller } from 'primereact/virtualscroller';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { TrackingCharacter } from './types';
+import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
+import { TrackingCharacterWrapper } from './TrackingCharacterWrapper';
+
+interface TrackAndFollowProps {
+  visible: boolean;
+  onHide: () => void;
+}
+
+export const TrackAndFollow = ({ visible, onHide }: TrackAndFollowProps) => {
+  const { outCommand, data } = useMapRootState();
+  const { trackingCharactersData } = data;
+
+  const characters = useMemo(() => trackingCharactersData || [], [trackingCharactersData]);
+
+  const handleTrackToggle = useCallback(
+    async (characterId: string) => {
+      try {
+        await outCommand({
+          type: OutCommand.toggleTrack,
+          data: { character_id: characterId },
+        });
+      } catch (error) {
+        console.error('Error toggling track:', error);
+      }
+    },
+    [outCommand],
+  );
+
+  const handleFollowToggle = useCallback(
+    async (characterId: string) => {
+      try {
+        await outCommand({
+          type: OutCommand.toggleFollow,
+          data: { character_id: characterId },
+        });
+      } catch (error) {
+        console.error('Error toggling follow:', error);
+      }
+    },
+    [outCommand],
+  );
+
+  const rowTemplate = (tc: TrackingCharacter) => {
+    const characterEveId = tc.character.eve_id;
+
+    return (
+      <TrackingCharacterWrapper
+        key={characterEveId}
+        character={tc.character}
+        isTracked={tc.tracked}
+        isFollowed={tc.followed}
+        onTrackToggle={() => handleTrackToggle(characterEveId)}
+        onFollowToggle={() => handleFollowToggle(characterEveId)}
+      />
+    );
+  };
+
+  return (
+    <Dialog
+      header={
+        <div className="dialog-header">
+          <span>Track & Follow</span>
+        </div>
+      }
+      visible={visible}
+      onHide={onHide}
+      className="w-[500px] text-text-color"
+      contentClassName="!p-0"
+    >
+      <div className="w-full overflow-hidden">
+        <div className="grid grid-cols-[80px_80px_1fr] p-1 font-normal text-sm text-center border-b border-[#383838]">
+          <div>Track</div>
+          <div>Follow</div>
+          <div className="text-center">Character</div>
+        </div>
+        <VirtualScroller items={characters} itemSize={48} itemTemplate={rowTemplate} className="h-72 w-full" />
+      </div>
+    </Dialog>
+  );
+};

assets/js/hooks/Mapper/components/mapRootContent/components/TrackAndFollow/TrackingCharacterWrapper.module.scss

@@ -0,0 +1,10 @@
+.characterRow {
+  border-color: var(--surface-border);
+  border-width: 0 0 1px 0;
+  border-style: solid;
+  opacity: 0.5;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+} 

assets/js/hooks/Mapper/components/mapRootContent/components/TrackAndFollow/TrackingCharacterWrapper.tsx

@@ -0,0 +1,49 @@
+import { WdCheckbox } from '@/hooks/Mapper/components/ui-kit/WdCheckbox/WdCheckbox';
+import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
+import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit/WdTooltip/WdTooltip';
+import { CharacterCard } from '@/hooks/Mapper/components/ui-kit';
+import { CharacterTypeRaw } from '@/hooks/Mapper/types';
+import WdRadioButton from '@/hooks/Mapper/components/ui-kit/WdRadioButton';
+
+interface TrackingCharacterWrapperProps {
+  character: CharacterTypeRaw;
+  isTracked: boolean;
+  isFollowed: boolean;
+  onTrackToggle: () => void;
+  onFollowToggle: () => void;
+}
+
+export const TrackingCharacterWrapper = ({
+  character,
+  isTracked,
+  isFollowed,
+  onTrackToggle,
+  onFollowToggle,
+}: TrackingCharacterWrapperProps) => {
+  const trackCheckboxId = `track-${character.eve_id}`;
+  const followRadioId = `follow-${character.eve_id}`;
+
+  return (
+    <div className="grid grid-cols-[80px_80px_1fr] items-center min-h-8 hover:bg-neutral-800  border-b border-[#383838]">
+      <div className="flex justify-center items-center p-0.5 text-center">
+        <WdTooltipWrapper content="Track this character on the map" position={TooltipPosition.top}>
+          <div className="flex justify-center items-center w-full">
+            <WdCheckbox id={trackCheckboxId} label="" value={isTracked} onChange={onTrackToggle} />
+          </div>
+        </WdTooltipWrapper>
+      </div>
+      <div className="flex justify-center items-center p-0.5 text-center">
+        <WdTooltipWrapper content="Follow this character's movements on the map" position={TooltipPosition.top}>
+          <div className="flex justify-center items-center w-full">
+            <div onClick={onFollowToggle} className="cursor-pointer">
+              <WdRadioButton id={followRadioId} name="followed_character" checked={isFollowed} onChange={() => {}} />
+            </div>
+          </div>
+        </WdTooltipWrapper>
+      </div>
+      <div className="flex items-center justify-center">
+        <CharacterCard showShipName={false} showSystem={false} isOwn {...character} />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,9 @@
+import { CharacterTypeRaw } from '@/hooks/Mapper/types';
+/**
+ * Interface for a character that can be tracked and followed
+ */
+export interface TrackingCharacter {
+  character: CharacterTypeRaw;
+  tracked: boolean;
+  followed: boolean;
+}

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

@@ -0,0 +1,65 @@
+import { useCallback } from 'react';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
+import type { ActivitySummary } from '@/hooks/Mapper/components/mapRootContent/components/CharacterActivity/CharacterActivity';
+
+/**
+ * Hook for character activity related handlers
+ */
+export const useCharacterActivityHandlers = () => {
+  const { outCommand, update } = useMapRootState();
+
+  /**
+   * Handle hiding the character activity dialog
+   */
+  const handleHideCharacterActivity = useCallback(() => {
+    // Update local state to hide the dialog
+    update(state => ({
+      ...state,
+      showCharacterActivity: false,
+    }));
+  }, [update]);
+
+  /**
+   * Handle showing the character activity dialog
+   */
+  const handleShowActivity = useCallback(() => {
+    // Update local state to show the dialog
+    update(state => ({
+      ...state,
+      showCharacterActivity: true,
+    }));
+
+    // Send the command to the server
+    outCommand({
+      type: OutCommand.showActivity,
+      data: {},
+    });
+  }, [outCommand, update]);
+
+  /**
+   * Handle updating character activity data
+   */
+  const handleUpdateActivity = useCallback(
+    (activityData: { activity: ActivitySummary[] }) => {
+      if (!activityData || !activityData.activity) {
+        console.error('Invalid activity data received:', activityData);
+        return;
+      }
+
+      // Update local state with the activity data
+      update(state => ({
+        ...state,
+        characterActivityData: activityData,
+        showCharacterActivity: true,
+      }));
+    },
+    [update],
+  );
+
+  return {
+    handleHideCharacterActivity,
+    handleShowActivity,
+    handleUpdateActivity,
+  };
+};

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

@@ -0,0 +1,115 @@
+import { useCallback } from 'react';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { OutCommand, CommandData, Commands } from '@/hooks/Mapper/types/mapHandlers';
+import type { TrackingCharacter } from '@/hooks/Mapper/components/mapRootContent/components/TrackAndFollow/types';
+
+/**
+ * Hook for track and follow related handlers
+ */
+export const useTrackAndFollowHandlers = () => {
+  const { outCommand, update } = useMapRootState();
+
+  /**
+   * Handle hiding the track and follow dialog
+   */
+  const handleHideTracking = useCallback(() => {
+    // Then update local state to hide the dialog
+    update(state => ({
+      ...state,
+      showTrackAndFollow: false,
+    }));
+  }, [update]);
+
+  /**
+   * Handle showing the track and follow dialog
+   */
+  const handleShowTracking = useCallback(() => {
+    // Update local state to show the dialog
+    update(state => ({
+      ...state,
+      showTrackAndFollow: true,
+    }));
+
+    // Send the command to the server
+    outCommand({
+      type: OutCommand.showTracking,
+      data: {},
+    });
+  }, [outCommand, update]);
+
+  /**
+   * Handle updating tracking data
+   */
+  const handleUpdateTracking = useCallback(
+    (trackingData: { characters: TrackingCharacter[] }) => {
+      if (!trackingData || !trackingData.characters) {
+        console.error('Invalid tracking data received:', trackingData);
+        return;
+      }
+
+      // Update local state with the tracking data
+      update(state => ({
+        ...state,
+        trackingCharactersData: trackingData.characters,
+        showTrackAndFollow: true,
+      }));
+    },
+    [update],
+  );
+
+  /**
+   * Handle toggling character tracking
+   */
+  const handleToggleTrack = useCallback(
+    (characterId: string) => {
+      if (!characterId) return;
+
+      // Send the toggle track command to the server
+      outCommand({
+        type: OutCommand.toggleTrack,
+        data: { 'character-id': characterId },
+      });
+
+      // Note: The local state is now updated in the TrackAndFollow component
+      // for immediate UI feedback, while we wait for the server response
+    },
+    [outCommand],
+  );
+
+  /**
+   * Handle toggling character following
+   */
+  const handleToggleFollow = useCallback(
+    (characterId: string) => {
+      if (!characterId) return;
+
+      // Send the toggle follow command to the server
+      outCommand({
+        type: OutCommand.toggleFollow,
+        data: { 'character-id': characterId },
+      });
+
+      // Note: The local state is now updated in the TrackAndFollow component
+      // for immediate UI feedback, while we wait for the server response
+    },
+    [outCommand],
+  );
+
+  /**
+   * Handle user settings updates
+   */
+  const handleUserSettingsUpdated = useCallback((settingsData: CommandData[Commands.userSettingsUpdated]) => {
+    if (!settingsData || !settingsData.settings) {
+      console.error('Invalid settings data received:', settingsData);
+    }
+  }, []);
+
+  return {
+    handleHideTracking,
+    handleShowTracking,
+    handleUpdateTracking,
+    handleToggleTrack,
+    handleToggleFollow,
+    handleUserSettingsUpdated,
+  };
+};

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

@@ -1,4 +1,4 @@
-import { Map } from '@/hooks/Mapper/components/map/Map.tsx';
+import { Map, MAP_ROOT_ID } from '@/hooks/Mapper/components/map/Map.tsx';
 import { useCallback, useRef, useState } from 'react';
 import { OutCommand, OutCommandHandler, SolarSystemConnection } from '@/hooks/Mapper/types';
 import { MapRootData, useMapRootState } from '@/hooks/Mapper/mapRootProvider';
@@ -15,7 +15,7 @@ import { Connections } from '@/hooks/Mapper/components/mapRootContent/components
 import { ContextMenuSystemMultiple, useContextMenuSystemMultipleHandlers } from '../contexts/ContextMenuSystemMultiple';
 import { getSystemById } from '@/hooks/Mapper/helpers';
 import { Commands } from '@/hooks/Mapper/types/mapHandlers.ts';
-import { Node, XYPosition } from 'reactflow';
+import { Node, useReactFlow, XYPosition } from 'reactflow';
 
 import { useCommandsSystems } from '@/hooks/Mapper/mapRootProvider/hooks/api';
 import { emitMapEvent, useMapEventListener } from '@/hooks/Mapper/events';
@@ -27,6 +27,7 @@ import {
   AddSystemDialog,
   SearchOnSubmitCallback,
 } from '@/hooks/Mapper/components/mapInterface/components/AddSystemDialog';
+import { useHotkey } from '../../hooks/useHotkey';
 
 // TODO: INFO - this component needs for abstract work with Map instance
 export const MapWrapper = () => {
@@ -46,6 +47,7 @@ export const MapWrapper = () => {
   } = useMapRootState();
   const { deleteSystems } = useDeleteSystems();
   const { mapRef, runCommand } = useCommonMapEventProcessor();
+  const { getNodes } = useReactFlow();
 
   const { updateLinkSignatureToSystem } = useCommandsSystems();
   const { open, ...systemContextProps } = useContextMenuSystemHandlers({ systems, hubs, outCommand });
@@ -97,29 +99,28 @@ export const MapWrapper = () => {
     [outCommand],
   );
 
-  const handleSystemContextMenu = useCallback(
-    (ev: any, systemId: string) => {
-      const { selectedSystems, systems } = ref.current;
-      if (selectedSystems.length > 1) {
-        const systemsInfo: Node[] = selectedSystems.map(x => ({ data: getSystemById(systems, x), id: x }) as Node);
+  const handleSystemContextMenu = useCallback((ev: any, systemId: string) => {
+    const { selectedSystems, systems } = ref.current;
+    if (selectedSystems.length > 1) {
+      const systemsInfo: Node[] = selectedSystems.map(x => ({ data: getSystemById(systems, x), id: x }) as Node);
 
-        handleSystemMultipleContext(ev, systemsInfo);
-        return;
-      }
+      handleSystemMultipleContext(ev, systemsInfo);
+      return;
+    }
 
-      open(ev, systemId);
-    },
-    [open],
-  );
+    open(ev, systemId);
+  }, []);
 
   const handleConnectionDbClick = useCallback((e: SolarSystemConnection) => setSelectedConnection(e), []);
 
-  const handleManualDelete = useCallback((toDelete: string[]) => {
-    const restDel = toDelete.filter(x => ref.current.systems.some(y => y.id === x));
+  const handleDeleteSelected = useCallback(() => {
+    const restDel = getNodes()
+      .filter(x => x.selected && !x.data.locked)
+      .map(x => x.data.id);
     if (restDel.length > 0) {
       ref.current.deleteSystems(restDel);
     }
-  }, []);
+  }, [getNodes]);
 
   const onAddSystem: OnMapAddSystemCallback = useCallback(({ coordinates }) => {
     setOpenAddSystem(coordinates);
@@ -143,6 +144,18 @@ export const MapWrapper = () => {
     [openAddSystem, outCommand],
   );
 
+  useHotkey(false, ['Delete'], (event: KeyboardEvent) => {
+    const targetWindow = (event.target as HTMLHtmlElement)?.closest(`[data-window-id="${MAP_ROOT_ID}"]`);
+
+    if (!targetWindow) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    handleDeleteSelected();
+  });
+
   return (
     <>
       <Map
@@ -155,7 +168,6 @@ export const MapWrapper = () => {
         minimapClasses={!isShowMenu ? classes.MiniMap : undefined}
         isShowMinimap={isShowMinimap}
         showKSpaceBG={isShowKSpace}
-        onManualDelete={handleManualDelete}
         isThickConnections={isThickConnections}
         isShowBackgroundPattern={isShowBackgroundPattern}
         isSoftBackground={isSoftBackground}

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

@@ -1,49 +0,0 @@
-.CharacterCard {
-
-}
-
-.EveIcon {
-  display: flex;
-  transition:
-    border-color 250ms,
-    opacity 250ms;
-  min-width: 33px;
-  min-height: 33px;
-  width: 33px;
-  height: 33px;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #272727;
-  background-color: rgba(0, 0, 0, 0);
-  border-radius: 0 !important;
-}
-
-.CharName {
-  max-width: 10rem;
-
-  &.CardBorderLeftIsOwn {
-    color: rgb(251 146 60 / 1)
-  }
-}
-
-.CharIcon {
-  border-radius: 0 !important;
-  border: 1px solid #2b2b2b;
-}
-
-.CharRow {
-  display: grid;
-  gap: 4px;
-
-  &.TwoColumns {
-    grid-template-columns: auto 1fr;
-  }
-
-  &.ThreeColumns {
-    grid-template-columns: auto 1fr auto;
-  }
-}
-
-.CardBorderLeftIsOwn {
-
-}

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

@@ -1,10 +1,10 @@
 import { useCallback } from 'react';
 import clsx from 'clsx';
-import classes from './CharacterCard.module.scss';
 import { SystemView } from '@/hooks/Mapper/components/ui-kit/SystemView';
 import { CharacterTypeRaw, WithIsOwnCharacter } from '@/hooks/Mapper/types';
 import { Commands } from '@/hooks/Mapper/types/mapHandlers';
 import { emitMapEvent } from '@/hooks/Mapper/events';
+import { CharacterPortrait, CharacterPortraitSize } from '@/hooks/Mapper/components/ui-kit';
 
 type CharacterCardProps = {
   compact?: boolean;
@@ -18,12 +18,8 @@ const SHIP_NAME_RX = /u'|'/g;
 export const getShipName = (name: string) => {
   return name
     .replace(SHIP_NAME_RX, '')
-    .replace(/\\u([\dA-Fa-f]{4})/g, (_, grp) =>
-      String.fromCharCode(parseInt(grp, 16))
-    )
-    .replace(/\\x([\dA-Fa-f]{2})/g, (_, grp) =>
-      String.fromCharCode(parseInt(grp, 16))
-    );
+    .replace(/\\u([\dA-Fa-f]{4})/g, (_, grp) => String.fromCharCode(parseInt(grp, 16)))
+    .replace(/\\x([\dA-Fa-f]{2})/g, (_, grp) => String.fromCharCode(parseInt(grp, 16)));
 };
 
 export const CharacterCard = ({
@@ -48,31 +44,14 @@ export const CharacterCard = ({
 
   if (compact) {
     return (
-      <div
-        className={clsx(classes.CharacterCard, 'w-full text-xs box-border')}
-        onClick={handleSelect}
-      >
-        <div className="w-full px-2 py-1 flex items-center gap-2" style={{ minWidth: 0 }}>
-          <img
-            src={`https://images.evetech.net/characters/${char.eve_id}/portrait`}
-            alt={`${char.name} portrait`}
-            style={{
-              width: '18px',
-              height: '18px',
-              borderRadius: 0,
-              flexShrink: 0,
-              border: '1px solid #2b2b2b',
-            }}
-          />
-          <div className="flex flex-grow overflow-hidden text-left" style={{ minWidth: 0 }}>
+      <div className={clsx('w-full text-xs box-border')} onClick={handleSelect}>
+        <div className="w-full flex items-center gap-1">
+          <CharacterPortrait characterEveId={char.eve_id} size={CharacterPortraitSize.w18} />
+          <div className="flex flex-grow overflow-hidden text-left">
             <div className="overflow-hidden text-ellipsis whitespace-nowrap">
-              <span className={clsx(isOwn ? 'text-orange-400' : 'text-gray-200')}>
-                {char.name}
-              </span>{" "}
+              <span className={clsx(isOwn ? 'text-orange-400' : 'text-gray-200')}>{char.name}</span>{' '}
               <span className="text-gray-400">
-                {(!locationShown && showShipName && shipNameText)
-                  ? `- ${shipNameText}`
-                  : `[${tickerText}]`}
+                {!locationShown && showShipName && shipNameText ? `- ${shipNameText}` : `[${tickerText}]`}
               </span>
             </div>
           </div>
@@ -88,58 +67,44 @@ export const CharacterCard = ({
         </div>
       </div>
     );
-  } else {
-    return (
-      <div
-        className={clsx(classes.CharacterCard, 'w-full text-xs box-border')}
-        onClick={handleSelect}
-      >
-        <div className="w-full px-2 py-1 flex items-center gap-2" style={{ minWidth: 0 }}>
-          <span
-            className={clsx(classes.EveIcon, classes.CharIcon, 'wd-bg-default')}
-            style={{
-              backgroundImage: `url(https://images.evetech.net/characters/${char.eve_id}/portrait)`,
-              minWidth: '33px',
-              minHeight: '33px',
-              width: '33px',
-              height: '33px',
-            }}
-          />
-          <div className="flex flex-col flex-grow overflow-hidden" style={{ minWidth: 0 }}>
-            <div className="overflow-hidden text-ellipsis whitespace-nowrap">
-              <span className={clsx(isOwn ? 'text-orange-400' : 'text-gray-200')}>
-                {char.name}
-              </span>{" "}
-              <span className="text-gray-400">[{tickerText}]</span>
-            </div>
-            {locationShown ? (
-              <div className="text-gray-300 text-xs overflow-hidden text-ellipsis whitespace-nowrap">
-                <SystemView
-                  systemId={char?.location?.solar_system_id?.toString() || ''}
-                  useSystemsCache={useSystemsCache}
-                />
-              </div>
-            ) : (
-              shipNameText && (
-                <div className="text-gray-300 text-xs overflow-hidden text-ellipsis whitespace-nowrap">
-                  {shipNameText}
-                </div>
-              )
-            )}
+  }
+
+  return (
+    <div className={clsx('w-full text-xs box-border')} onClick={handleSelect}>
+      <div className="w-full flex items-center gap-2">
+        <CharacterPortrait characterEveId={char.eve_id} size={CharacterPortraitSize.w33} />
+        <div className="flex flex-col flex-grow overflow-hidden">
+          <div className="overflow-hidden text-ellipsis whitespace-nowrap">
+            <span className={clsx(isOwn ? 'text-orange-400' : 'text-gray-200')}>{char.name}</span>{' '}
+            <span className="text-gray-400">[{tickerText}]</span>
           </div>
-          {shipType && (
-            <div className="flex-shrink-0 self-start">
-              <div
-                className="text-gray-300 overflow-hidden text-ellipsis whitespace-nowrap"
-                style={{ maxWidth: '200px' }}
-                title={shipType}
-              >
-                {shipType}
-              </div>
+          {locationShown ? (
+            <div className="text-gray-300 text-xs overflow-hidden text-ellipsis whitespace-nowrap">
+              <SystemView
+                systemId={char?.location?.solar_system_id?.toString() || ''}
+                useSystemsCache={useSystemsCache}
+              />
             </div>
+          ) : (
+            shipNameText && (
+              <div className="text-gray-300 text-xs overflow-hidden text-ellipsis whitespace-nowrap">
+                {shipNameText}
+              </div>
+            )
           )}
         </div>
+        {shipType && (
+          <div className="flex-shrink-0 self-start">
+            <div
+              className="text-gray-300 overflow-hidden text-ellipsis whitespace-nowrap"
+              style={{ maxWidth: '200px' }}
+              title={shipType}
+            >
+              {shipType}
+            </div>
+          </div>
+        )}
       </div>
-    );
-  }
+    </div>
+  );
 };

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

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

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

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

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

@@ -1,12 +1,20 @@
 import classes from './InfoDrawer.module.scss';
-import { WithChildren, WithClassName } from '@/hooks/Mapper/types/common.ts';
+import { WithChildren, WithClassName, WithHTMLProps } from '@/hooks/Mapper/types/common.ts';
 import clsx from 'clsx';
 import React from 'react';
 
-export type InfoDrawerProps = { title: React.ReactNode; labelClassName?: string; rightSide?: boolean } & WithChildren &
-  WithClassName;
+export type InfoDrawerProps = { title?: React.ReactNode; labelClassName?: string; rightSide?: boolean } & WithChildren &
+  WithClassName &
+  Omit<WithHTMLProps, 'title'>;
 
-export const InfoDrawer = ({ title, children, className, labelClassName, rightSide }: InfoDrawerProps) => {
+export const InfoDrawer = ({
+  title,
+  children,
+  className,
+  labelClassName,
+  rightSide,
+  ...htmlProps
+}: InfoDrawerProps) => {
   return (
     <div
       className={clsx(classes.InfoDrawerRoot, 'text-xs pl-1', className, {
@@ -14,8 +22,9 @@ export const InfoDrawer = ({ title, children, className, labelClassName, rightSi
         'flex flex-col items-end pr-1': rightSide,
         'pl-1': !rightSide,
       })}
+      {...htmlProps}
     >
-      <div className={clsx(classes.InfoDrawerLabel, 'text-neutral-400', labelClassName)}>{title}</div>
+      {title && <div className={clsx(classes.InfoDrawerLabel, 'text-neutral-400', labelClassName)}>{title}</div>}
       <div>{children}</div>
     </div>
   );

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

@@ -1,10 +1,10 @@
-import React, { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef } from 'react';
 
 interface TimeAgoProps {
   timestamp: string; // Теперь тип string, так как приходит ISO 8601 строка
 }
 
-export const TimeAgo: React.FC<TimeAgoProps> = ({ timestamp }) => {
+export const TimeAgo = ({ timestamp }: TimeAgoProps) => {
   const [timeAgo, setTimeAgo] = useState<string>('');
   const timeoutIdRef = useRef<number | null>(null);
 

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

@@ -7,6 +7,7 @@ import React, { useMemo } from 'react';
 let counter = 0;
 
 export interface WdCheckboxProps {
+  id?: string;
   label: React.ReactNode | string;
   classNameLabel?: string;
   value: boolean;
@@ -16,6 +17,7 @@ export interface WdCheckboxProps {
 }
 
 export const WdCheckbox = ({
+  id: defaultId,
   label,
   className,
   classNameLabel,
@@ -24,7 +26,7 @@ export const WdCheckbox = ({
   labelSide = 'right',
   size = 'normal',
 }: WdCheckboxProps & WithClassName) => {
-  const id = useMemo(() => (++counter).toString(), []);
+  const id = useMemo(() => defaultId || (++counter).toString(), [defaultId]);
 
   const labelElement = (
     <label

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

@@ -3,7 +3,12 @@
   opacity: 0.5;
   pointer-events: initial !important;
 
-  &:hover {
+  &.Disabled {
+    opacity: 0.3;
+    cursor: auto;
+  }
+
+  &:hover:not(&.Disabled) {
     opacity: 1;
   }
 }

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

@@ -29,6 +29,7 @@ export const WdImgButton = ({
   height = 20,
   textSize = WdImageSize.normal,
   tooltip,
+  disabled,
   ...props
 }: WdImgButtonProps) => {
   const content = (
@@ -39,11 +40,12 @@ export const WdImgButton = ({
         {
           [classes.Normal]: textSize === WdImageSize.normal,
           [classes.Large]: textSize === WdImageSize.large,
+          [classes.Disabled]: disabled,
         },
         'pi cursor-pointer',
         className,
       )}
-      onClick={onClick}
+      onClick={disabled ? undefined : onClick}
     >
       {source && <img src={source} width={width} height={height} className="external-icon" />}
     </div>

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

@@ -0,0 +1,56 @@
+.RadioInput {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid var(--surface-border, #ccc);
+  border-radius: 50%;
+  background-color: var(--surface-card, #fff);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  
+  &:hover {
+    border-color: var(--primary-color, #3B82F6);
+  }
+  
+  &:checked {
+    border-color: var(--primary-color, #3B82F6);
+    
+    &::after {
+      content: '';
+      width: 0.625rem;
+      height: 0.625rem;
+      background-color: var(--primary-color, #3B82F6);
+      border-radius: 50%;
+      display: block;
+    }
+    
+    &:hover {
+      border-color: var(--primary-color-dark, #2563EB);
+      
+      &::after {
+        background-color: var(--primary-color-dark, #2563EB);
+      }
+    }
+  }
+  
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 0.2rem var(--primary-color-light, rgba(59, 130, 246, 0.25));
+  }
+  
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    border-color: var(--surface-border, #ccc);
+    
+    &:checked::after {
+      background-color: var(--surface-border, #ccc);
+    }
+  }
+} 

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './WdRadioButton.module.scss';
+
+export interface WdRadioButtonProps {
+  id: string;
+  name: string;
+  checked: boolean;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  label?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+const WdRadioButton: React.FC<WdRadioButtonProps> = ({
+  id,
+  name,
+  checked,
+  onChange,
+  label,
+  className,
+  disabled = false,
+}) => {
+  return (
+    <div className={clsx('flex items-center', className)}>
+      <input
+        id={id}
+        type="radio"
+        name={name}
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+        className={clsx(
+          styles.RadioInput,
+          'w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600',
+        )}
+      />
+      {label && (
+        <label
+          htmlFor={id}
+          className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300 cursor-pointer"
+        >
+          {label}
+        </label>
+      )}
+    </div>
+  );
+};
+
+export default WdRadioButton; 

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

@@ -0,0 +1,4 @@
+import WdRadioButton from './WdRadioButton';
+
+export default WdRadioButton;
+export type { WdRadioButtonProps } from './WdRadioButton';

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

@@ -263,7 +263,8 @@ export const WdTooltip = forwardRef(function WdTooltip(
       className={clsx(
         classes.tooltip,
         interactive ? 'pointer-events-auto' : 'pointer-events-none',
-        'absolute p-1 border rounded-sm border-green-300 border-opacity-10 bg-stone-900 bg-opacity-90',
+        'absolute px-2 py-1',
+        'border rounded-sm border-green-300 border-opacity-10 bg-stone-900 bg-opacity-90',
         className,
         pos === null ? 'invisible' : '',
       )}