Merge remote-tracking branch 'origin/main'

* feat: Automatically set connection EOL status and ship size type when linking/updating signatures

.devcontainer/devcontainer.json

@@ -1,7 +1,12 @@
 {
   "name": "wanderer-dev",
   "dockerComposeFile": ["./docker-compose.yml"],
-  "extensions": ["jakebecker.elixir-ls"],
+  "extensions": [
+    "jakebecker.elixir-ls",
+    "JakeBecker.elixir-ls",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ],
   "service": "wanderer",
   "workspaceFolder": "/app",
   "shutdownAction": "stopCompose",

.env.example

@@ -7,4 +7,5 @@ export EVE_CLIENT_WITH_WALLET_SECRET="<EVE_CLIENT_WITH_WALLET_SECRET>"
 export GIT_SHA="1111"
 export WANDERER_INVITES="false"
 export WANDERER_PUBLIC_API_DISABLED="false"
+export WANDERER_CHARACTER_API_DISABLED="false"
 export WANDERER_ZKILL_PRELOAD_DISABLED="false"

.github/workflows/build.yml

@@ -1,8 +1,6 @@
 name: Build
 
 on:
-  pull_request:
-    types: [opened, synchronize, reopened, labeled, unlabeled]
   push:
     branches:
       - main
@@ -41,8 +39,28 @@ jobs:
         env:
           FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
 
+  manual-approval:
+    name: Manual Approval
+    runs-on: ubuntu-latest
+    needs: deploy-test
+    if: success()
+
+    permissions:
+      issues: write
+
+    steps:
+      - name: Await Manual Approval
+        uses: trstringer/manual-approval@v1
+        with:
+          secret: ${{ github.TOKEN }}
+          approvers: DmitryPopov
+          minimum-approvals: 1
+          issue-title: "Manual Approval Required for Release"
+          issue-body: "Please approve or deny the deployment."
+
   build:
     name: 🛠 Build
+    needs: manual-approval
     runs-on: ubuntu-22.04
     if: ${{ (github.ref == 'refs/heads/main') && github.event_name == 'push' }}
     permissions:
@@ -140,7 +158,6 @@ jobs:
         platform:
           - linux/amd64
           - linux/arm64
-          - linux/arm64/v8
     steps:
       - name: Prepare
         run: |

CHANGELOG.md

@@ -2,6 +2,270 @@
 
 <!-- changelog -->
 
+## [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)
+
+
+
+
+### Bug Fixes:
+
+* signature paste for russian lang
+
+## [v1.52.3](https://github.com/wanderer-industries/wanderer/compare/v1.52.2...v1.52.3) (2025-02-21)
+
+
+
+
+### Bug Fixes:
+
+* remove signature expiration (#196)
+
+## [v1.52.2](https://github.com/wanderer-industries/wanderer/compare/v1.52.1...v1.52.2) (2025-02-21)
+
+
+
+
+### Bug Fixes:
+
+* prevent constant full signature widget rerender (#195)
+
+## [v1.52.1](https://github.com/wanderer-industries/wanderer/compare/v1.52.0...v1.52.1) (2025-02-20)
+
+
+
+
+### Bug Fixes:
+
+* proper virtual scroller usage (#192)
+
+* restore delete key functionality for nodes (#191)
+
+## [v1.52.0](https://github.com/wanderer-industries/wanderer/compare/v1.51.3...v1.52.0) (2025-02-19)
+
+
+
+
+### Features:
+
+* Map: Added map characters view
+
+## [v1.51.3](https://github.com/wanderer-industries/wanderer/compare/v1.51.2...v1.51.3) (2025-02-19)
+
+
+
+
+### Bug Fixes:
+
+* pending deletion working again (#185)
+
+## [v1.51.2](https://github.com/wanderer-industries/wanderer/compare/v1.51.1...v1.51.2) (2025-02-18)
+
+
+
+
+## [v1.51.1](https://github.com/wanderer-industries/wanderer/compare/v1.51.0...v1.51.1) (2025-02-18)
+
+
+
+
+## [v1.51.0](https://github.com/wanderer-industries/wanderer/compare/v1.50.0...v1.51.0) (2025-02-17)
+
+
+
+
+### Features:
+
+* add undo deletion for signatures (#155)
+
+* add undo for signature deletion and addition
+
+## [v1.50.0](https://github.com/wanderer-industries/wanderer/compare/v1.49.0...v1.50.0) (2025-02-17)
+
+
+
+
+### Features:
+
+* allow addition of characters to acl without preregistration (#176)
+
+## [v1.49.0](https://github.com/wanderer-industries/wanderer/compare/v1.48.1...v1.49.0) (2025-02-15)
+
+
+
+
+### Features:
+
+* add api for acl management (#171)
+
+## [v1.48.1](https://github.com/wanderer-industries/wanderer/compare/v1.48.0...v1.48.1) (2025-02-13)
+
+
+
+
+## [v1.48.0](https://github.com/wanderer-industries/wanderer/compare/v1.47.6...v1.48.0) (2025-02-12)
+
+
+
+
+### Features:
+
+* autosize local character tooltip and increase hover target (#165)
+
+## [v1.47.6](https://github.com/wanderer-industries/wanderer/compare/v1.47.5...v1.47.6) (2025-02-12)
+
+
+
+
+## [v1.47.5](https://github.com/wanderer-industries/wanderer/compare/v1.47.4...v1.47.5) (2025-02-12)
+
+
+
+
+### Bug Fixes:
+
+* sync kills count bookmark and the kills widget (#160)
+
+* lazy load kills widget
+
+## [v1.47.4](https://github.com/wanderer-industries/wanderer/compare/v1.47.3...v1.47.4) (2025-02-11)
+
+
+
+
+## [v1.47.3](https://github.com/wanderer-industries/wanderer/compare/v1.47.2...v1.47.3) (2025-02-11)
+
+
+
+
+## [v1.47.2](https://github.com/wanderer-industries/wanderer/compare/v1.47.1...v1.47.2) (2025-02-11)
+
+
+
+
+### Bug Fixes:
+
+* lazy load kills widget (#157)
+
+* lazy load kills widget
+
+* updates for eslint and pr feedback
+
+## [v1.47.1](https://github.com/wanderer-industries/wanderer/compare/v1.47.0...v1.47.1) (2025-02-09)
+
+
+
+
+### Bug Fixes:
+
+* Connections: Fixed connections auto-refresh after update
+
+## [v1.47.0](https://github.com/wanderer-industries/wanderer/compare/v1.46.1...v1.47.0) (2025-02-09)
+
+
+
+
+### Features:
+
+* Map: Added check for active map subscription to using Map APIs
+
+## [v1.46.1](https://github.com/wanderer-industries/wanderer/compare/v1.46.0...v1.46.1) (2025-02-09)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fixed a lot of design and architect issues after last milli… (#154)
+
+* Map: Fixed a lot of design and architect issues after last million PRs
+
+* Map: removed unnecessary hooks styles
+
 ## [v1.46.0](https://github.com/wanderer-industries/wanderer/compare/v1.45.5...v1.46.0) (2025-02-08)
 
 

assets/css/app.css

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

assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useLabelsMenu/useLabelsMenu.module.scss

@@ -1,3 +0,0 @@
-.active {
-  background-color: rgba(98, 98, 98, 0.33);
-}

assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useStatusMenu/useStatusMenu.module.scss

@@ -1,3 +0,0 @@
-.active {
-  background-color: rgba(98, 98, 98, 0.33);
-}

assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/useTagMenu.module.scss

@@ -1,3 +0,0 @@
-.active {
-  background-color: rgba(98, 98, 98, 0.33);
-}

assets/js/hooks/Mapper/components/contexts/hooks/useWaypointMenu/useWaypointMenu.module.scss

@@ -1,3 +0,0 @@
-.active {
-  background-color: rgba(98, 98, 98, 0.33);
-}

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,
@@ -34,6 +33,7 @@ import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
 import { NodeSelectionMouseHandler } from '@/hooks/Mapper/components/contexts/types.ts';
 import clsx from 'clsx';
 import { useBackgroundVars } from './hooks/useBackgroundVars';
+import { ResizableAreaNode } from '@/hooks/Mapper/components/map/components/ResizableAreaNode';
 
 const DEFAULT_VIEW_PORT = { zoom: 1, x: 0, y: 0 };
 
@@ -60,6 +60,20 @@ const initialNodes: Node<SolarSystemRawType>[] = [
   //   },
   //   type: 'custom',
   // },
+  {
+    id: '1231213',
+    type: 'resizableAreaNode',
+    width: 200,
+    height: 100,
+    position: { x: 100, y: 100 },
+    data: {
+      width: 200,
+      height: 100,
+      bgColor: 'rgba(255, 0, 0, 0.2)',
+      // этот коллбэк переопределим позже
+      onResize: () => {},
+    },
+  },
 ];
 
 const initialEdges = [
@@ -79,12 +93,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;
-  canRemoveConnection?(connectionId: string): boolean;
   onConnectionInfoClick?(e: SolarSystemConnection): void;
   onAddSystem?: OnMapAddSystemCallback;
   onSelectionContextMenu?: NodeSelectionMouseHandler;
@@ -106,7 +120,6 @@ const MapComp = ({
   onSystemContextMenu,
   onConnectionInfoClick,
   onSelectionContextMenu,
-  onManualDelete,
   isShowMinimap,
   showKSpaceBG,
   isThickConnections,
@@ -114,9 +127,8 @@ const MapComp = ({
   isSoftBackground,
   theme,
   onAddSystem,
-  canRemoveConnection,
 }: MapCompProps) => {
-  const { getEdge, getNode, getNodes } = useReactFlow();
+  const { getNodes } = useReactFlow();
   const [nodes, , onNodesChange] = useNodesState<Node<SolarSystemRawType>>(initialNodes);
   const [edges, , onEdgesChange] = useEdgesState<Edge<SolarSystemConnection>>(initialEdges);
 
@@ -131,6 +143,7 @@ const MapComp = ({
   const nodeTypes = useMemo(() => {
     return {
       custom: nodeComponent,
+      resizableAreaNode: ResizableAreaNode,
     };
   }, [nodeComponent]);
 
@@ -189,73 +202,22 @@ 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) {
         changes[0].selected = getNodes().filter(node => node.selected).length === 1;
       }
 
+      // eslint-disable-next-line no-console
+      console.log('JOipP', `changes`, changes);
+
       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],
-  );
-
-  const handleEdgesChange = useCallback(
-    (changes: EdgeChange[]) => {
-      const nextChanges = changes.reduce((acc, change) => {
-        if (change.type !== 'remove') {
-          return [...acc, change];
-        }
-
-        if (canRemoveConnection?.(change.id)) {
-          return [...acc, change];
-        }
-
-        const edge = getEdge(change.id);
-        if (!edge) {
-          return [...acc, change];
-        }
-
-        const sourceNode = getNode(edge.source);
-        const targetNode = getNode(edge.target);
-        if (!sourceNode || !targetNode) {
-          return [...acc, change];
-        }
-
-        if (sourceNode.data.locked || targetNode.data.locked) {
-          return acc;
-        }
-
-        return [...acc, change];
-      }, [] as EdgeChange[]);
-
-      onEdgesChange(nextChanges);
-    },
-    [canRemoveConnection, getEdge, getNode, onEdgesChange],
+    [getNodes, onNodesChange],
   );
 
   useEffect(() => {
@@ -268,12 +230,15 @@ 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}
           onNodesChange={handleNodesChange}
-          onEdgesChange={handleEdgesChange}
+          onEdgesChange={onEdgesChange}
           onConnect={onConnect}
           // TODO we need save into session all of this
           //      and on any action do either
@@ -312,7 +277,7 @@ const MapComp = ({
           minZoom={0.2}
           maxZoom={1.5}
           elevateNodesOnSelect
-          deleteKeyCode={['Delete']}
+          deleteKeyCode={['']}
           {...(isPanAndDrag
             ? {
                 selectionOnDrag: true,

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

@@ -37,7 +37,7 @@ const INITIAL_DATA: MapData = {
   userPermissions: {},
   systemSignatures: {} as Record<string, SystemSignature[]>,
   options: {} as Record<string, string | boolean>,
-  is_subscription_active: false,
+  isSubscriptionActive: false,
 };
 
 export interface MapContextProps {

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

@@ -0,0 +1,54 @@
+import { NodeProps } from 'reactflow';
+import { Rnd } from 'react-rnd';
+
+export type ResizableAreaData = {
+  width: number;
+  height: number;
+  bgColor: string;
+  onResize: (nodeId: string, newWidth: number, newHeight: number) => void;
+};
+
+export const ResizableAreaNode = ({ id, data, selected, dragging, ...rest }: NodeProps<ResizableAreaData>) => {
+  const { width = 200, height = 100, bgColor = 'rgba(255, 0, 0, 0.2)', onResize } = data;
+  // eslint-disable-next-line no-console
+  // console.log('JOipP', `ResizableAreaNode`, data);
+  return (
+    <div
+      style={{
+        position: 'relative',
+        width,
+        height,
+        border: selected ? '2px solid red' : '2px dashed #999',
+        backgroundColor: bgColor,
+        pointerEvents: dragging ? 'none' : 'auto',
+      }}
+      {...rest}
+    >
+      <Rnd
+        enableUserSelectHack={false}
+        disableDragging={true}
+        style={{ width: '100%', height: '100%' }}
+        size={{ width, height }}
+        onResizeStop={(e, direction, ref, delta, position) => {
+          const newWidth = parseFloat(ref.style.width);
+          const newHeight = parseFloat(ref.style.height);
+          onResize?.(id, newWidth, newHeight);
+        }}
+        enableResizing={{
+          top: true,
+          right: true,
+          bottom: true,
+          left: true,
+          topRight: true,
+          bottomRight: true,
+          bottomLeft: true,
+          topLeft: true,
+        }}
+      >
+        <div style={{ width: '100%', height: '100%', padding: 8 }}>
+          Resizable Area: {width} x {height}
+        </div>
+      </Rnd>
+    </div>
+  );
+};

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

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

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

@@ -1,7 +1,8 @@
 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.ts';
+import { WithChildren, WithClassName } from '@/hooks/Mapper/types/common';
+import { useMemo } from 'react';
 
 type TooltipSize = 'xs' | 'sm' | 'md' | 'lg';
 
@@ -17,14 +18,48 @@ type KillsBookmarkTooltipProps = {
 export const KillsCounter = ({ killsCount, systemId, className, children, size = 'xs' }: KillsBookmarkTooltipProps) => {
   const { isLoading, kills: detailedKills, systemNameMap } = useKillsCounter({ realSystemId: systemId });
 
-  if (!killsCount || detailedKills.length === 0 || !systemId || isLoading) return null;
+  // Limit the kills shown to match the killsCount parameter
+  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 a reasonable height for the tooltip based on the number of kills
+  // but cap it to avoid excessively large tooltips
+  const maxKillsToShow = Math.min(limitedKills.length, 20);
+  const tooltipHeight = Math.max(200, Math.min(500, maxKillsToShow * 35));
 
   const tooltipContent = (
-    <SystemKillsContent kills={detailedKills} systemNameMap={systemNameMap} compact={true} onlyOneSystem={true} />
+    <div
+      style={{
+        width: '400px',
+        height: `${tooltipHeight}px`,
+        maxHeight: '500px',
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <div className="p-2 border-b border-stone-700 bg-stone-800 text-stone-200 font-medium">
+        System Kills ({limitedKills.length})
+      </div>
+      <div className="flex-1 overflow-hidden">
+        <SystemKillsContent
+          kills={limitedKills}
+          systemNameMap={systemNameMap}
+          onlyOneSystem={true}
+          // Don't use autoSize here as we want the virtual scroller to handle scrolling
+          autoSize={false}
+          // We've already limited the kills to match killsCount
+          limit={undefined}
+        />
+      </div>
+    </div>
   );
 
   return (
-    // @ts-ignore
     <WdTooltipWrapper content={tooltipContent} className={className} size={size} interactive={true}>
       {children}
     </WdTooltipWrapper>

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

@@ -0,0 +1,54 @@
+.TooltipActive {
+  pointer-events: auto !important;
+  position: relative;
+  z-index: 3;
+}
+
+.hoverTarget {
+  padding: 0.5rem;
+  margin: -0.5rem;
+  display: inline-block;
+}
+
+.localCounter {
+  mix-blend-mode: screen;
+  display: flex;
+  align-items: center;
+  gap: 1px;
+  position: relative;
+  top: 1px;
+  color: var(--rf-node-local-counter);
+
+  &.hasUserCharacters {
+    color: var(--rf-has-user-characters);
+  }
+
+  & > i {
+    font-size: 9px;
+    position: relative;
+  }
+
+  & > span {
+    font-size: 9px;
+    line-height: 9px;
+    font-weight: var(--rf-local-counter-font-weight, 500);
+
+    @-moz-document url-prefix() {
+      position: relative;
+      top: -1px;
+    }
+  }
+}
+
+.Pathfinder {
+  .localCounter {
+    @-moz-document url-prefix() {
+      top: 0;
+    }
+
+    & > span {
+      position: relative;
+      top: -1px;
+    }
+  }
+}

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

@@ -2,37 +2,34 @@ import { useMemo } from 'react';
 import clsx from 'clsx';
 import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
 import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit/WdTooltip';
-import { LocalCharactersList, CharItemProps } from '../../../mapInterface/widgets/LocalCharacters/components';
+import { CharItemProps, LocalCharactersList } from '../../../mapInterface/widgets/LocalCharacters/components';
 import { useLocalCharactersItemTemplate } from '../../../mapInterface/widgets/LocalCharacters/hooks/useLocalCharacters';
 import { useLocalCharacterWidgetSettings } from '../../../mapInterface/widgets/LocalCharacters/hooks/useLocalWidgetSettings';
+import classes from './SolarSystemLocalCounter.module.scss';
+import { AvailableThemes } from '@/hooks/Mapper/mapRootProvider';
+import { useTheme } from '@/hooks/Mapper/hooks/useTheme.ts';
 
 interface LocalCounterProps {
   localCounterCharacters: Array<CharItemProps>;
-  classes: { [key: string]: string };
   hasUserCharacters: boolean;
   showIcon?: boolean;
 }
 
-export function LocalCounter({
-  localCounterCharacters,
-  hasUserCharacters,
-  classes,
-  showIcon = true,
-}: LocalCounterProps) {
+export const LocalCounter = ({ localCounterCharacters, hasUserCharacters, showIcon = true }: LocalCounterProps) => {
   const [settings] = useLocalCharacterWidgetSettings();
   const itemTemplate = useLocalCharactersItemTemplate(settings.showShipName);
+  const theme = useTheme();
 
   const pilotTooltipContent = useMemo(() => {
     return (
       <div
         style={{
-          width: '300px',
-          overflowX: 'hidden',
-          overflowY: 'auto',
-          height: '300px',
+          width: '100%',
+          minWidth: '300px',
+          overflow: 'hidden',
         }}
       >
-        <LocalCharactersList items={localCounterCharacters} itemTemplate={itemTemplate} itemSize={26} />
+        <LocalCharactersList items={localCounterCharacters} itemTemplate={itemTemplate} itemSize={26} autoSize={true} />
       </div>
     );
   }, [localCounterCharacters, itemTemplate]);
@@ -42,23 +39,23 @@ export function LocalCounter({
   }
 
   return (
-    <div className={classes.LocalCounterLayer} style={{ zIndex: 9999 }}>
-      <WdTooltipWrapper
-        // @ts-ignore
-        content={pilotTooltipContent}
-        position={TooltipPosition.right}
-        offset={180}
-        interactive={true}
-      >
-        <div
-          className={clsx(classes.localCounter, {
-            [classes.hasUserCharacters]: hasUserCharacters,
-          })}
-        >
-          {showIcon && <i className="pi pi-users" style={{ fontSize: '0.50rem' }} />}
-          <span>{localCounterCharacters.length}</span>
+    <div
+      className={clsx(classes.TooltipActive, {
+        [classes.Pathfinder]: theme === AvailableThemes.pathfinder,
+      })}
+    >
+      <WdTooltipWrapper content={pilotTooltipContent} position={TooltipPosition.right} offset={0} interactive={true}>
+        <div className={clsx(classes.hoverTarget)}>
+          <div
+            className={clsx(classes.localCounter, {
+              [classes.hasUserCharacters]: hasUserCharacters,
+            })}
+          >
+            {showIcon && <i className="pi pi-users" />}
+            <span>{localCounterCharacters.length}</span>
+          </div>
         </div>
       </WdTooltipWrapper>
     </div>
   );
-}
+};

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

@@ -25,7 +25,7 @@ $tooltip-bg: #202020;
   border: 1px solid darken($pastel-blue, 10%);
   border-radius: 5px;
   position: relative;
-  z-index: 1;
+  z-index: 3;
   overflow: hidden;
 
   &.Mataria,
@@ -90,11 +90,7 @@ $tooltip-bg: #202020;
 
   &.eve-system-status-home {
     border: 1px solid var(--eve-solar-system-status-color-home-dark30);
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-home),
-      transparent
-    );
+    background-image: linear-gradient(45deg, var(--eve-solar-system-status-color-background), transparent);
     &.selected {
       border-color: var(--eve-solar-system-status-color-home);
     }
@@ -102,11 +98,7 @@ $tooltip-bg: #202020;
 
   &.eve-system-status-friendly {
     border: 1px solid var(--eve-solar-system-status-color-friendly-dark20);
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-friendly-dark30),
-      transparent
-    );
+    background-image: linear-gradient(275deg, var(--eve-solar-system-status-friendly-dark30), transparent);
     &.selected {
       border-color: var(--eve-solar-system-status-color-friendly-dark5);
     }
@@ -121,27 +113,15 @@ $tooltip-bg: #202020;
   }
 
   &.eve-system-status-warning {
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-warning),
-      transparent
-    );
+    background-image: linear-gradient(275deg, var(--eve-solar-system-status-warning), transparent);
   }
 
   &.eve-system-status-dangerous {
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-dangerous),
-      transparent
-    );
+    background-image: linear-gradient(275deg, var(--eve-solar-system-status-dangerous), transparent);
   }
 
   &.eve-system-status-target {
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-target),
-      transparent
-    );
+    background-image: linear-gradient(275deg, var(--eve-solar-system-status-target), transparent);
   }
 }
 
@@ -254,7 +234,7 @@ $tooltip-bg: #202020;
     font-size: 11px;
     font-weight: 500;
     text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
-    color: var(--rf-tag-color, #38BDF8);
+    color: var(--rf-tag-color, #38bdf8);
   }
 
   /* Firefox kostyl */
@@ -263,7 +243,6 @@ $tooltip-bg: #202020;
       font-weight: bold;
     }
   }
-
 }
 
 .BottomRow {
@@ -273,7 +252,7 @@ $tooltip-bg: #202020;
   height: 19px;
 
   .hasLocalCounter {
-    margin-right: 1.25rem;
+    margin-right: 2px;
     &.countAbove9 {
       margin-right: 1.5rem;
     }
@@ -319,7 +298,8 @@ $tooltip-bg: #202020;
 
 .Handlers {
   position: absolute;
-  z-index: 2;
+  z-index: 4;
+  pointer-events: none;
   top: 0;
   left: 0;
   width: 100%;
@@ -332,6 +312,7 @@ $tooltip-bg: #202020;
   border: 1px solid $pastel-blue;
   width: 5px;
   height: 5px;
+  pointer-events: auto;
 
   &.selected {
     border-color: $pastel-pink;
@@ -374,39 +355,3 @@ $tooltip-bg: #202020;
     }
   }
 }
-
-.LocalCounterLayer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 9999;
-  padding: 8;
-
-  .localCounter {
-    position: absolute;
-    pointer-events: auto;
-    top: 10.5px;
-    right: 8px;
-    mix-blend-mode: screen;
-    gap: 2px;
-    color: var(--rf-node-local-counter, #5cb85c);
-
-    &.hasUserCharacters {
-      color: var(--rf-has-user-characters, #fbbf24);
-    }
-
-    & > i {
-      position: relative;
-      top: 1px;
-    }
-
-    & > span {
-      font-size: 9px;
-      line-height: 9px;
-      font-weight: var(--rf-local-counter-font-weight, 500);
-    }
-  }
-}

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 } from '../../hooks/useSolarSystemLogic';
+import { useLocalCounter, useSolarSystemNode, useNodeKillsCount } from '../../hooks';
 import {
   EFFECT_BACKGROUND_STYLES,
   MARKER_BOOKMARK_BG_STYLES,
@@ -18,6 +18,7 @@ import { KillsCounter } from './SolarSystemKillsCounter';
 export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>) => {
   const nodeVars = useSolarSystemNode(props);
   const { localCounterCharacters } = useLocalCounter(nodeVars);
+  const localKillsCount = useNodeKillsCount(nodeVars.solarSystemId, nodeVars.killsCount);
 
   return (
     <>
@@ -35,9 +36,9 @@ export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>
             </div>
           )}
 
-          {nodeVars.killsCount && nodeVars.killsCount > 0 && nodeVars.solarSystemId && (
+          {localKillsCount && localKillsCount > 0 && nodeVars.solarSystemId && (
             <KillsCounter
-              killsCount={nodeVars.killsCount}
+              killsCount={localKillsCount}
               systemId={nodeVars.solarSystemId}
               size="lg"
               killsActivityType={nodeVars.killsActivityType}
@@ -65,6 +66,7 @@ export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>
           nodeVars.status !== undefined ? classes[STATUS_CLASSES[nodeVars.status]] : '',
           { [classes.selected]: nodeVars.selected },
         )}
+        onMouseDownCapture={e => nodeVars.dbClick(e)}
       >
         {nodeVars.visible && (
           <>
@@ -120,18 +122,18 @@ export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>
 
               {nodeVars.isWormhole && !nodeVars.customName && <div />}
 
-              <div className="flex items-center justify-end">
-                <div
-                  className={clsx('flex items-center gap-1', {
-                    [classes.hasLocalCounter]: nodeVars.charactersInSystem.length > 0,
-                    [classes.countAbove9]: nodeVars.charactersInSystem.length > 9,
-                  })}
-                >
+              <div className="flex items-center gap-1 justify-end">
+                <div className={clsx('flex items-center gap-1')}>
                   {nodeVars.locked && <i className={clsx(PrimeIcons.LOCK, classes.lockIcon)} />}
                   {nodeVars.hubs.includes(nodeVars.solarSystemId) && (
                     <i className={clsx(PrimeIcons.MAP_MARKER, classes.mapMarker)} />
                   )}
                 </div>
+
+                <LocalCounter
+                  hasUserCharacters={nodeVars.hasUserCharacters}
+                  localCounterCharacters={localCounterCharacters}
+                />
               </div>
             </div>
           </>
@@ -158,7 +160,7 @@ export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>
         </>
       )}
 
-      <div onMouseDownCapture={e => nodeVars.dbClick(e)} className={classes.Handlers}>
+      <div className={classes.Handlers}>
         <Handle
           type="source"
           className={clsx(classes.Handle, classes.HandleTop, {
@@ -200,11 +202,6 @@ export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>
           id="d"
         />
       </div>
-      <LocalCounter
-        hasUserCharacters={nodeVars.hasUserCharacters}
-        localCounterCharacters={localCounterCharacters}
-        classes={classes}
-      />
     </>
   );
 });

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

@@ -4,3 +4,17 @@
    Only override what's different from the base
    Currently none required
 ---------------------------------------------- */
+
+.RootCustomNode {
+  &.eve-system-status-home {
+    border: 1px solid var(--eve-solar-system-status-color-home-dark30);
+    background-image: linear-gradient(
+        275deg,
+        var(--eve-solar-system-status-home),
+        transparent
+    );
+    &.selected {
+      border-color: var(--eve-solar-system-status-color-home);
+    }
+  }
+}

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, useSolarSystemNode } from '../../hooks/useSolarSystemLogic';
+import { useLocalCounter, useNodeKillsCount, useSolarSystemNode } from '../../hooks';
 import {
   EFFECT_BACKGROUND_STYLES,
   MARKER_BOOKMARK_BG_STYLES,
@@ -18,6 +18,7 @@ import { KillsCounter } from './SolarSystemKillsCounter';
 export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>) => {
   const nodeVars = useSolarSystemNode(props);
   const { localCounterCharacters } = useLocalCounter(nodeVars);
+  const localKillsCount = useNodeKillsCount(nodeVars.solarSystemId, nodeVars.killsCount);
 
   return (
     <>
@@ -25,7 +26,7 @@ export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>)
         <div className={classes.Bookmarks}>
           {nodeVars.labelCustom !== '' && (
             <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
-              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] ">{nodeVars.labelCustom}</span>
+              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]">{nodeVars.labelCustom}</span>
             </div>
           )}
 
@@ -35,9 +36,9 @@ export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>)
             </div>
           )}
 
-          {nodeVars.killsCount && nodeVars.killsCount > 0 && nodeVars.solarSystemId && (
+          {localKillsCount && localKillsCount > 0 && nodeVars.solarSystemId && (
             <KillsCounter
-              killsCount={nodeVars.killsCount}
+              killsCount={localKillsCount}
               systemId={nodeVars.solarSystemId}
               size="lg"
               killsActivityType={nodeVars.killsActivityType}
@@ -65,6 +66,7 @@ export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>)
           nodeVars.status !== undefined ? classes[STATUS_CLASSES[nodeVars.status]] : '',
           { [classes.selected]: nodeVars.selected },
         )}
+        onMouseDownCapture={e => nodeVars.dbClick(e)}
       >
         {nodeVars.visible && (
           <>
@@ -130,18 +132,18 @@ export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>)
 
               {nodeVars.isWormhole && !nodeVars.customName && <div />}
 
-              <div className="flex items-center justify-end">
-                <div
-                  className={clsx('flex items-center gap-1', {
-                    [classes.hasLocalCounter]: nodeVars.charactersInSystem.length > 0,
-                    [classes.countAbove9]: nodeVars.charactersInSystem.length > 9,
-                  })}
-                >
+              <div className="flex items-center gap-1 justify-end">
+                <div className={clsx('flex items-center gap-1')}>
                   {nodeVars.locked && <i className={clsx(PrimeIcons.LOCK, classes.lockIcon)} />}
                   {nodeVars.hubs.includes(nodeVars.solarSystemId) && (
                     <i className={clsx(PrimeIcons.MAP_MARKER, classes.mapMarker)} />
                   )}
                 </div>
+
+                <LocalCounter
+                  hasUserCharacters={nodeVars.hasUserCharacters}
+                  localCounterCharacters={localCounterCharacters}
+                />
               </div>
             </div>
           </>
@@ -168,7 +170,7 @@ export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>)
         </>
       )}
 
-      <div onMouseDownCapture={e => nodeVars.dbClick(e)} className={classes.Handlers}>
+      <div className={classes.Handlers}>
         <Handle
           type="source"
           className={clsx(classes.Handle, classes.HandleTop, {
@@ -210,11 +212,6 @@ export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>)
           id="d"
         />
       </div>
-      <LocalCounter
-        hasUserCharacters={nodeVars.hasUserCharacters}
-        localCounterCharacters={localCounterCharacters}
-        classes={classes}
-      />
     </>
   );
 });

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

@@ -750,6 +750,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/helpers/convertSystem2Node.ts

@@ -10,5 +10,6 @@ export const convertSystem2Node = (sys: SolarSystemRawType): Node => {
     position: sys.position,
     data: sys,
     draggable: !sys.locked,
+    deletable: !sys.locked,
   };
 };

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

@@ -58,7 +58,11 @@ export const useMapInit = () => {
       update(updateData);
 
       if (systems) {
-        rf.setNodes(systems.map(convertSystem2Node));
+        // rf.setNod7es(systems.map(convertSystem2Node));
+        const prev = rf.getNodes();
+        const areaNodes = prev.filter(x => x.type !== 'resizableAreaNode');
+
+        rf.setNodes([...areaNodes, ...systems.map(convertSystem2Node)]);
       }
 
       if (connections) {

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/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

@@ -7,18 +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, OutCommand, SystemSignature } from '@/hooks/Mapper/types';
-import { LABELS_INFO, LABELS_ORDER } from '@/hooks/Mapper/components/map/constants';
-
-export type LabelInfo = {
-  id: string;
-  shortName: string;
-};
-
-export type UnsplashedSignatureType = SystemSignature & { sig_id: string };
+import { useUnsplashedSignatures } from './useUnsplashedSignatures';
+import { useSystemName } from './useSystemName';
+import { LabelInfo, useLabelsInfo } from './useLabelsInfo';
 
 function getActivityType(count: number): string {
   if (count <= 5) return 'activityNormal';
@@ -33,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
@@ -126,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({
@@ -152,55 +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,
-          sig_id: s.eve_id, // Add a unique key property
-        })) 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;

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/map/styles/default-theme.scss

@@ -31,6 +31,6 @@
   --window-corner: #72716f;
 
   --rf-local-counter-font-weight: 500;
-  --rf-node-local-counter: #5cb85c;
-  --rf-has-user-characters: #fbbf24;
+  --rf-node-local-counter: inherit;
+  --rf-has-user-characters: #ffc75d;
 }

assets/js/hooks/Mapper/components/map/styles/eve-common-variables.scss

@@ -1,19 +1,19 @@
 
-$friendlyBase: #3bbd39;              
-$friendlyAlpha: #3bbd3952;           
+$friendlyBase: #3bbd39;
+$friendlyAlpha: #3bbd3952;
 $friendlyDark20: darken($friendlyBase, 20%);
 $friendlyDark30: darken($friendlyBase, 30%);
 $friendlyDark5:  darken($friendlyBase, 5%);
 
-$lookingForBase: #43c2fd;            
+$lookingForBase: #43c2fd;
 $lookingForAlpha: rgba(67, 176, 253, 0.48);
 $lookingForDark15: darken($lookingForBase, 15%);
 
-$homeBase: rgb(197, 253, 67);
-$homeAlpha: rgba(197, 253, 67, 0.32);
+$homeBase: rgb(179, 253, 67);
+$homeAlpha: rgba(186, 248, 48, 0.32);
+$homeBackground: #a0fa5636;
 $homeDark30: darken($homeBase, 30%);
 
-
 :root {
   --pastel-blue: #5a7d9a;
   --pastel-pink: #d291bc;
@@ -98,6 +98,7 @@ $homeDark30: darken($homeBase, 30%);
   --eve-solar-system-status-color-unknown: transparent;
   --eve-solar-system-status-home:                #{$homeAlpha};
   --eve-solar-system-status-color-home:          #{$homeBase};
+  --eve-solar-system-status-color-background:    #{$homeBackground};
   --eve-solar-system-status-color-home-dark30:   #{$homeDark30};
   --eve-solar-system-status-friendly:            #{$friendlyAlpha};
   --eve-solar-system-status-color-friendly:      #{$friendlyBase};

assets/js/hooks/Mapper/components/map/styles/pathfinder-theme.scss

@@ -2,6 +2,10 @@
 @import './eve-common';
 @import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap');
 
+$homeBase: rgb(197, 253, 67);
+$homeAlpha: rgba(197, 253, 67, 0.32);
+$homeDark30: darken($homeBase, 30%);
+
 .pathfinder-theme {
   /* -- Override values from the default theme -- */
   --rf-bg-color: #000000;
@@ -41,4 +45,10 @@
   --eve-wh-type-color-c6: #d9534f;
   --eve-wh-type-color-c13: #7986cb;
   --eve-wh-type-color-drifter: #44aa82;
+
+  --rf-node-local-counter: #5cb85c;
+  --rf-has-user-characters: #ffc75d;
+
+  --eve-solar-system-status-home:                #{$homeAlpha};
+  --eve-solar-system-status-color-home:          #{$homeBase};
 }

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

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef } from 'react';
 import { Dialog } from 'primereact/dialog';
 
 import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
-import { SystemSignature } from '@/hooks/Mapper/types';
+import { 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';
@@ -12,6 +12,8 @@ import {
   COSMIC_SIGNATURE,
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog';
 import { SignatureGroup } from '@/hooks/Mapper/types';
+import { parseSignatureCustomInfo } from '@/hooks/Mapper/helpers/parseSignatureCustomInfo';
+import { getWhSize } from '@/hooks/Mapper/helpers/getWhSize';
 
 interface SystemLinkSignatureDialogProps {
   data: CommandLinkSignatureToSystem;
@@ -25,7 +27,10 @@ const signatureSettings: Setting[] = [
 ];
 
 export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignatureDialogProps) => {
-  const { outCommand } = useMapRootState();
+  const {
+    outCommand,
+    data: { wormholes },
+  } = useMapRootState();
 
   const ref = useRef({ outCommand });
   ref.current = { outCommand };
@@ -35,20 +40,44 @@ export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignat
   }, [setVisible]);
 
   const handleSelect = useCallback(
-    (signature: SystemSignature) => {
+    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],

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/widgets/LocalCharacters/LocalCharacters.tsx

@@ -8,6 +8,8 @@ import { LocalCharactersList } from './components/LocalCharactersList';
 import { useLocalCharactersItemTemplate } from './hooks/useLocalCharacters';
 import { useLocalCharacterWidgetSettings } from './hooks/useLocalWidgetSettings';
 import { LocalCharactersHeader } from './components/LocalCharactersHeader';
+import classes from './LocalCharacters.module.scss';
+import clsx from 'clsx';
 
 export const LocalCharacters = () => {
   const {
@@ -16,11 +18,11 @@ export const LocalCharacters = () => {
 
   const [settings, setSettings] = useLocalCharacterWidgetSettings();
   const [systemId] = selectedSystems;
-  const restrictOfflineShowing = useMapGetOption("restrict_offline_showing");
+  const restrictOfflineShowing = useMapGetOption('restrict_offline_showing');
   const isAdminOrManager = useMapCheckPermissions([UserPermission.MANAGE_MAP]);
   const showOffline = useMemo(
     () => !restrictOfflineShowing || isAdminOrManager,
-    [isAdminOrManager, restrictOfflineShowing]
+    [isAdminOrManager, restrictOfflineShowing],
   );
 
   const sorted = useMemo(() => {
@@ -81,7 +83,10 @@ export const LocalCharacters = () => {
           items={sorted}
           itemSize={settings.compact ? 26 : 41}
           itemTemplate={itemTemplate}
-          containerClassName="w-full h-full overflow-x-hidden overflow-y-auto custom-scrollbar select-none"
+          containerClassName={clsx(
+            'w-full h-full overflow-x-hidden overflow-y-auto custom-scrollbar select-none',
+            classes.VirtualScroller,
+          )}
         />
       )}
     </Widget>

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

@@ -1,8 +1,7 @@
 import React, { useRef } from 'react';
 import clsx from 'clsx';
 import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth';
-import { LayoutEventBlocker, WdResponsiveCheckbox, WdDisplayMode } from '@/hooks/Mapper/components/ui-kit';
-import { useElementWidth } from '@/hooks/Mapper/components/hooks';
+import { LayoutEventBlocker, TooltipPosition, WdCheckbox, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
 
 interface LocalCharactersHeaderProps {
   sortedCount: number;
@@ -24,68 +23,54 @@ export const LocalCharactersHeader: React.FC<LocalCharactersHeaderProps> = ({
   setSettings,
 }) => {
   const headerRef = useRef<HTMLDivElement>(null);
-  const headerWidth = useElementWidth(headerRef) || 300;
-
-  const reservedWidth = 100;
-  const availableWidthForCheckboxes = Math.max(headerWidth - reservedWidth, 0);
-
-  let displayMode: WdDisplayMode = "full";
-  if (availableWidthForCheckboxes >= 150) {
-    displayMode = "full";
-  } else if (availableWidthForCheckboxes >= 100) {
-    displayMode = "abbr";
-  } else {
-    displayMode = "checkbox";
-  }
-
-  const compact = useMaxWidth(headerRef, 145);
+  const compactOffline = useMaxWidth(headerRef, 145);
+  const compactShipName = useMaxWidth(headerRef, 195);
 
   return (
-    <div className="flex w-full items-center text-xs" ref={headerRef}>
-      <div className="flex-shrink-0 select-none mr-2">
-        Local{showList ? ` [${sortedCount}]` : ""}
-      </div>
-      <div className="flex-grow overflow-hidden">
-        <LayoutEventBlocker className="flex items-center gap-2 justify-end">
-          <div className="flex items-center gap-2">
-            {showOffline && (
-              <WdResponsiveCheckbox
-                tooltipContent="Show offline characters in system"
+    <div className="flex w-full items-center text-xs justify-between" ref={headerRef}>
+      <div className="flex-shrink-0 select-none mr-2">Local{showList ? ` [${sortedCount}]` : ''}</div>
+      <LayoutEventBlocker className="flex items-center gap-2 justify-end">
+        <div className="flex items-center gap-2">
+          {showOffline && (
+            <WdTooltipWrapper content="Show offline characters in system" position={TooltipPosition.top}>
+              <WdCheckbox
                 size="xs"
-                labelFull="Show offline"
-                labelAbbreviated="Offline"
+                labelSide="left"
+                label={compactOffline ? '' : 'Offline'}
                 value={settings.showOffline}
-                onChange={() =>
-                  setSettings((prev: any) => ({ ...prev, showOffline: !prev.showOffline }))
-                }
-                classNameLabel={clsx("whitespace-nowrap text-stone-400 hover:text-stone-200 transition duration-300", { truncate: compact })}
-                displayMode={displayMode}
+                onChange={() => setSettings((prev: any) => ({ ...prev, showOffline: !prev.showOffline }))}
+                classNameLabel={clsx('whitespace-nowrap text-stone-400 hover:text-stone-200 transition duration-300', {
+                  truncate: compactOffline,
+                })}
               />
-            )}
-            {settings.compact && (
-              <WdResponsiveCheckbox
-                tooltipContent="Show ship name in compact rows"
+            </WdTooltipWrapper>
+          )}
+
+          {settings.compact && (
+            <WdTooltipWrapper content="Show ship name in compact rows" position={TooltipPosition.top}>
+              <WdCheckbox
                 size="xs"
-                labelFull="Show ship name"
-                labelAbbreviated="Ship name"
+                labelSide="left"
+                label={compactShipName ? '' : 'Ship name'}
                 value={settings.showShipName}
-                onChange={() =>
-                  setSettings((prev: any) => ({ ...prev, showShipName: !prev.showShipName }))
-                }
-                classNameLabel={clsx("whitespace-nowrap text-stone-400 hover:text-stone-200 transition duration-300", { truncate: compact })}
-                displayMode={displayMode}
+                onChange={() => setSettings((prev: any) => ({ ...prev, showShipName: !prev.showShipName }))}
+                classNameLabel={clsx('whitespace-nowrap text-stone-400 hover:text-stone-200 transition duration-300', {
+                  truncate: compactShipName,
+                })}
               />
-            )}
-          </div>
+            </WdTooltipWrapper>
+          )}
+        </div>
+        <WdTooltipWrapper content="Enable compact mode" position={TooltipPosition.top}>
           <span
-            className={clsx("w-4 h-4 cursor-pointer", {
-              "hero-bars-2": settings.compact,
-              "hero-bars-3": !settings.compact,
+            className={clsx('w-4 h-4 min-w-[1rem] cursor-pointer', {
+              'hero-bars-2': settings.compact,
+              'hero-bars-3': !settings.compact,
             })}
             onClick={() => setSettings((prev: any) => ({ ...prev, compact: !prev.compact }))}
           />
-        </LayoutEventBlocker>
-      </div>
+        </WdTooltipWrapper>
+      </LayoutEventBlocker>
     </div>
   );
 };

assets/js/hooks/Mapper/components/mapInterface/widgets/LocalCharacters/components/LocalCharactersItemTemplate/LocalCharactersItemTemplate.module.scss

@@ -1,13 +1,6 @@
-.VirtualScroller {
-  height: 100% !important;
-}
-
 .CharacterRow {
-  //border-left-width: 1px;
-
   &.CardBorderLeftIsOwn {
     border-left-color: rgb(251 146 60 / 1)
   }
 }
 
-

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

@@ -0,0 +1,27 @@
+import classes from './LocalCharactersItemTemplate.module.scss';
+import clsx from 'clsx';
+import { CharacterCard } from '@/hooks/Mapper/components/ui-kit';
+import { CharItemProps } from '@/hooks/Mapper/components/mapInterface/widgets/LocalCharacters/components';
+import { VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
+
+export type LocalCharactersItemTemplateProps = { showShipName: boolean } & CharItemProps &
+  VirtualScrollerTemplateOptions;
+
+export const LocalCharactersItemTemplate = ({ showShipName, ...options }: LocalCharactersItemTemplateProps) => {
+  return (
+    <div
+      className={clsx(
+        classes.CharacterRow,
+        'box-border flex items-center w-full whitespace-nowrap overflow-hidden text-ellipsis min-w-[0px]',
+        {
+          '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': options.online,
+        },
+      )}
+      style={{ height: `${options.props.itemSize}px` }}
+    >
+      <CharacterCard showShipName={showShipName} {...options} />
+    </div>
+  );
+};

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

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

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

@@ -3,25 +3,42 @@ import { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virt
 import clsx from 'clsx';
 import { CharItemProps } from './types';
 
-type LocalCharactersListProps = {
+export type LocalCharactersListProps = {
   items: Array<CharItemProps>;
-
   itemSize: number;
-
   itemTemplate: (char: CharItemProps, options: VirtualScrollerTemplateOptions) => React.ReactNode;
-
   containerClassName?: string;
+  style?: React.CSSProperties;
+  autoSize?: boolean;
 };
 
-export function LocalCharactersList({ items, itemSize, itemTemplate, containerClassName }: LocalCharactersListProps) {
+export const LocalCharactersList = ({
+  items,
+  itemSize,
+  itemTemplate,
+  containerClassName,
+  style = {},
+  autoSize = false,
+}: LocalCharactersListProps) => {
+  const computedHeight = autoSize ? `${Math.max(items.length, 1) * itemSize}px` : style.height || '100%';
+
+  const localStyle: React.CSSProperties = {
+    ...style,
+    height: computedHeight,
+    width: '100%',
+    boxSizing: 'border-box',
+    overflowX: 'hidden',
+  };
+
   return (
     <VirtualScroller
       items={items}
       itemSize={itemSize}
       orientation="vertical"
       className={clsx('w-full h-full', containerClassName)}
-      autoSize={false}
       itemTemplate={itemTemplate}
+      autoSize={autoSize}
+      style={localStyle}
     />
   );
-}
+};

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

@@ -1,2 +1,3 @@
+export * from './LocalCharactersItemTemplate';
 export * from './LocalCharactersList';
 export * from './types';

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

@@ -1,33 +1,12 @@
 import { useCallback } from 'react';
 import { VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
-import clsx from 'clsx';
-import classes from './useLocalCharacters.module.scss';
-import { CharacterCard } from '@/hooks/Mapper/components/ui-kit';
-import { CharItemProps } from '../components';
+import { CharItemProps, LocalCharactersItemTemplate } from '../components';
 
 export function useLocalCharactersItemTemplate(showShipName: boolean) {
   return useCallback(
-    (char: CharItemProps, options: VirtualScrollerTemplateOptions) => {
-      return (
-        <div
-          className={clsx(classes.CharacterRow, 'box-border flex items-center', {
-            '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': char.online,
-          })}
-          style={{
-            height: `${options.props.itemSize}px`,
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            minWidth: 0,
-            width: '100%',
-          }}
-        >
-          <CharacterCard showShipName={showShipName} {...char} />
-        </div>
-      );
-    },
+    (char: CharItemProps, options: VirtualScrollerTemplateOptions) => (
+      <LocalCharactersItemTemplate {...char} {...options} showShipName={showShipName} />
+    ),
     [showShipName],
   );
 }

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

@@ -1,7 +1,7 @@
 import classes from './RoutesList.module.scss';
 import { Route, SystemStaticInfoShort } from '@/hooks/Mapper/types/routes.ts';
 import clsx from 'clsx';
-import { SystemViewStandalone, WdTooltip, WdTooltipHandlers } from '@/hooks/Mapper/components/ui-kit';
+import { SystemViewStandalone, TooltipPosition, WdTooltip, WdTooltipHandlers } from '@/hooks/Mapper/components/ui-kit';
 import { getBackgroundClass, getShapeClass } from '@/hooks/Mapper/components/map/helpers';
 import { MouseEvent, useCallback, useRef, useState } from 'react';
 import { Commands } from '@/hooks/Mapper/types';
@@ -46,9 +46,11 @@ export const RouteSystem = ({
     <>
       <WdTooltip
         ref={tooltipRef}
+        position={TooltipPosition.top}
         // targetSelector={`.tooltip-route-sys_${destination}_${solar_system_id}`}
         content={() => (
           <SystemViewStandalone
+            className="mx-[4px]"
             security={security}
             system_class={system_class}
             class_title={class_title}
@@ -63,8 +65,8 @@ export const RouteSystem = ({
           tooltipRef.current?.show(e);
           onMouseEnter?.(solar_system_id);
         }}
-        onMouseLeave={e => {
-          tooltipRef.current?.hide(e);
+        onMouseLeave={() => {
+          tooltipRef.current?.hide();
           onMouseLeave?.();
         }}
         onContextMenu={handleContext}

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

@@ -184,7 +184,7 @@ export const RoutesWidgetComp = () => {
   }, [data, update]);
 
   const ref = useRef<HTMLDivElement>(null);
-  const compact = useMaxWidth(ref, 155);
+  const compact = useMaxWidth(ref, 170);
   const [openAddSystem, setOpenAddSystem] = useState<boolean>(false);
 
   const onAddSystem = useCallback(() => setOpenAddSystem(true), []);
@@ -217,14 +217,14 @@ export const RoutesWidgetComp = () => {
               }}
             />
 
-            <WdTooltipWrapper content="Show shortest route">
+            <WdTooltipWrapper content="Show shortest route" position={TooltipPosition.top}>
               <WdCheckbox
                 size="xs"
                 labelSide="left"
                 label={compact ? '' : 'Show shortest'}
                 value={!isSecure}
                 onChange={handleSecureChange}
-                classNameLabel={clsx('text-red-400')}
+                classNameLabel="text-red-400 whitespace-nowrap"
               />
             </WdTooltipWrapper>
             <WdImgButton

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

@@ -7,8 +7,9 @@ import { useKillsWidgetSettings } from './hooks/useKillsWidgetSettings';
 import { useSystemKills } from './hooks/useSystemKills';
 import { KillsSettingsDialog } from './components/SystemKillsSettingsDialog';
 import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace';
+import { SolarSystemRawType } from '@/hooks/Mapper/types';
 
-export const SystemKills: React.FC = () => {
+export const SystemKills: React.FC = React.memo(() => {
   const {
     data: { selectedSystems, systems, isSubscriptionActive },
     outCommand,
@@ -25,6 +26,16 @@ export const SystemKills: React.FC = () => {
     return map;
   }, [systems]);
 
+  const systemBySolarSystemId = useMemo(() => {
+    const map: Record<number, SolarSystemRawType> = {};
+    systems.forEach(sys => {
+      if (sys.system_static_info?.solar_system_id != null) {
+        map[sys.system_static_info.solar_system_id] = sys;
+      }
+    });
+    return map;
+  }, [systems]);
+
   const [settings] = useKillsWidgetSettings();
   const visible = settings.showAll;
 
@@ -40,78 +51,59 @@ export const SystemKills: React.FC = () => {
   const filteredKills = useMemo(() => {
     if (!settings.whOnly || !visible) return kills;
     return kills.filter(kill => {
-      const system = systems.find(
-        sys => sys.system_static_info.solar_system_id === kill.solar_system_id
-      );
+      const system = systemBySolarSystemId[kill.solar_system_id];
       if (!system) {
         console.warn(`System with id ${kill.solar_system_id} not found.`);
         return false;
       }
       return isWormholeSpace(system.system_static_info.system_class);
     });
-  }, [kills, settings.whOnly, systems]);
+  }, [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)}
-            />
-          }
-        >
-          <div className="relative h-full">
-            {!isSubscriptionActive ? (
-              <div className="absolute inset-0 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="absolute inset-0 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="absolute inset-0 flex items-center justify-center">
-                <span className="select-none text-center text-stone-400/80 text-sm">
-                  Loading Kills...
-                </span>
-              </div>
-            ) : error ? (
-              <div className="absolute inset-0 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="absolute inset-0 flex items-center justify-center">
-                <span className="select-none text-center text-stone-400/80 text-sm">
-                  No kills found
-                </span>
-              </div>
-            ) : (
-              <div className="h-full overflow-y-auto">
-                <SystemKillsContent
-                  key={settings.compact ? 'compact' : 'normal'}
-                  kills={filteredKills}
-                  systemNameMap={systemNameMap}
-                  compact={settings.compact}
-                  onlyOneSystem={!visible}
-                />
-              </div>
-            )}
-          </div>
+        <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>
 
-      <KillsSettingsDialog
-        visible={settingsDialogVisible}
-        setVisible={setSettingsDialogVisible}
-      />
+      {settingsDialogVisible && <KillsSettingsDialog visible setVisible={setSettingsDialogVisible} />}
     </div>
   );
-};
+});
+
+SystemKills.displayName = 'SystemKills';

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

@@ -1,16 +1,14 @@
-.TableRowCompact {
-  height: 8px;
-  max-height: 8px;
-  font-size: 12px !important;
-  line-height: 8px;
+.wrapper {
+  overflow-x: hidden;
+  box-sizing: border-box;
 }
 
-.Table {
-  font-size: 12px;
-  border-collapse: collapse;
+.scrollerContent {
+  width: 100%;
+  box-sizing: border-box;
+  overflow-x: hidden;
 }
 
-.Tooltip {
-  white-space: pre-line;
-  line-height: 1.2rem;
+.VirtualScroller {
+  height: 100% !important;
 }

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

@@ -1,50 +1,68 @@
 import React, { useMemo } from 'react';
 import clsx from 'clsx';
 import { DetailedKill } from '@/hooks/Mapper/types/kills';
-import { KillRow } from '../components/SystemKillsRow';
+import { VirtualScroller } from 'primereact/virtualscroller';
+import { useSystemKillsItemTemplate } from '../hooks/useSystemKillsItemTemplate';
+import classes from './SystemKillsContent.module.scss';
 
-interface SystemKillsContentProps {
+export const ITEM_HEIGHT = 35;
+
+export interface SystemKillsContentProps {
   kills: DetailedKill[];
   systemNameMap: Record<string, string>;
-  compact?: boolean;
   onlyOneSystem?: boolean;
+  autoSize?: boolean;
+  timeRange?: number;
+  limit?: number;
 }
 
 export const SystemKillsContent: React.FC<SystemKillsContentProps> = ({
   kills,
   systemNameMap,
-  compact = false,
   onlyOneSystem = false,
+  autoSize = false,
+  timeRange = 4,
+  limit,
 }) => {
-  const sortedKills = useMemo(() => {
-    return [...kills].sort((a, b) => {
-      const timeA = a.kill_time ? new Date(a.kill_time).getTime() : 0;
-      const timeB = b.kill_time ? new Date(b.kill_time).getTime() : 0;
-      return timeB - timeA;
-    });
-  }, [kills]);
+  const processedKills = useMemo(() => {
+    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);
+    }
+  }, [kills, timeRange, limit]);
+
+  const computedHeight = autoSize ? Math.max(processedKills.length, 1) * ITEM_HEIGHT : undefined;
+  const scrollerHeight = autoSize ? `${computedHeight}px` : '100%';
+
+  const itemTemplate = useSystemKillsItemTemplate(systemNameMap, onlyOneSystem);
 
   return (
-    <div
-      className={clsx(
-        'flex flex-col w-full text-stone-200 text-xs transition-all duration-300',
-        compact ? 'p-1' : 'p-1'
-      )}
-    >
-      {sortedKills.map(kill => {
-        const systemIdStr = String(kill.solar_system_id);
-        const systemName = systemNameMap[systemIdStr] || `System ${systemIdStr}`;
-
-        return (
-          <KillRow
-            key={kill.killmail_id}
-            killDetails={kill}
-            systemName={systemName}
-            isCompact={compact}
-            onlyOneSystem={onlyOneSystem}
-          />
-        );
-      })}
+    <div className={clsx('w-full h-full', classes.wrapper)}>
+      <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,
+        })}
+        pt={{
+          content: {
+            className: classes.scrollerContent,
+          },
+        }}
+      />
     </div>
   );
 };
+
+export default SystemKillsContent;

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

@@ -1,268 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import { DetailedKill } from '@/hooks/Mapper/types/kills';
-import {
-  formatISK,
-  formatTimeMixed,
-  zkillLink,
-  getAttackerSubscript,
-  buildVictimImageUrls,
-  buildAttackerImageUrls,
-  getPrimaryLogoAndTooltip,
-  getAttackerPrimaryImageAndTooltip,
-} from '../helpers';
-import { VictimRowSubInfo } from './VictimRowSubInfo';
-import { WdTooltipWrapper } from '../../../../ui-kit/WdTooltipWrapper';
-import classes from './SystemKillRow.module.scss';
-import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
-
-export interface FullKillRowProps {
-  killDetails: DetailedKill;
-  systemName: string;
-  onlyOneSystem: boolean;
-}
-
-export const FullKillRow: React.FC<FullKillRowProps> = ({
-  killDetails,
-  systemName,
-  onlyOneSystem,
-}) => {
-  const {
-    killmail_id = 0,
-    // Victim data
-    victim_char_name = '',
-    victim_alliance_ticker = '',
-    victim_corp_ticker = '',
-    victim_ship_name = '',
-    victim_char_id = 0,
-    victim_corp_id = 0,
-    victim_alliance_id = 0,
-    victim_ship_type_id = 0,
-    victim_corp_name = '',
-    victim_alliance_name = '',
-    // Attacker data
-    final_blow_char_id = 0,
-    final_blow_char_name = '',
-    final_blow_alliance_ticker = '',
-    final_blow_corp_ticker = '',
-    final_blow_corp_name = '',
-    final_blow_alliance_name = '',
-    final_blow_corp_id = 0,
-    final_blow_alliance_id = 0,
-    final_blow_ship_name = '',
-    final_blow_ship_type_id = 0,
-    total_value = 0,
-    kill_time = '',
-  } = killDetails || {};
-
-  const attackerIsNpc = final_blow_char_id === 0;
-  const victimAffiliation = victim_alliance_ticker || victim_corp_ticker || null;
-  const attackerAffiliation = attackerIsNpc
-    ? ''
-    : final_blow_alliance_ticker || final_blow_corp_ticker || '';
-
-  const killValueFormatted =
-    total_value != null && total_value > 0 ? `${formatISK(total_value)} ISK` : null;
-  const killTimeAgo = kill_time ? formatTimeMixed(kill_time) : '0h ago';
-
-  // Build victim images
-  const {
-    victimPortraitUrl,
-    victimCorpLogoUrl,
-    victimAllianceLogoUrl,
-    victimShipUrl,
-  } = buildVictimImageUrls({
-    victim_char_id,
-    victim_ship_type_id,
-    victim_corp_id,
-    victim_alliance_id,
-  });
-
-  // Build attacker images
-  const {
-    attackerPortraitUrl,
-    attackerCorpLogoUrl,
-    attackerAllianceLogoUrl,
-  } = buildAttackerImageUrls({
-    final_blow_char_id,
-    final_blow_corp_id,
-    final_blow_alliance_id,
-  });
-
-  // Primary image for victim
-  const { url: victimPrimaryImageUrl, tooltip: victimPrimaryTooltip } =
-    getPrimaryLogoAndTooltip(
-      victimAllianceLogoUrl,
-      victimCorpLogoUrl,
-      victim_alliance_name,
-      victim_corp_name,
-      'Victim'
-    );
-
-  // Primary image for attacker
-  const { url: attackerPrimaryImageUrl, tooltip: attackerPrimaryTooltip } =
-    getAttackerPrimaryImageAndTooltip(
-      attackerIsNpc,
-      attackerAllianceLogoUrl,
-      attackerCorpLogoUrl,
-      final_blow_alliance_name,
-      final_blow_corp_name,
-      final_blow_ship_type_id
-    );
-
-  const attackerSubscript = getAttackerSubscript(killDetails);
-
-  return (
-    <div
-      className={clsx(
-        classes.killRowContainer,
-        'w-full text-sm py-1 px-2',
-        'flex flex-col sm:flex-row'
-      )}
-    >
-      <div className="w-full flex flex-col sm:flex-row items-start gap-2">
-        {/* Victim Section */}
-        <div className="flex items-start gap-1 min-w-0">
-          {victimShipUrl && (
-            <div className="relative shrink-0 w-12 h-12 sm:w-14 sm:h-14 overflow-hidden">
-              <a
-                href={zkillLink('kill', killmail_id)}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="block w-full h-full"
-              >
-                <img
-                  src={victimShipUrl}
-                  alt="VictimShip"
-                  className={clsx(
-                    classes.killRowImage,
-                    'w-full h-full object-contain'
-                  )}
-                />
-              </a>
-            </div>
-          )}
-          {victimPrimaryImageUrl && (
-            <WdTooltipWrapper
-              content={victimPrimaryTooltip}
-              position={TooltipPosition.top}
-            >
-              <div className="relative shrink-0 w-12 h-12 sm:w-14 sm:h-14 overflow-hidden">
-                <a
-                  href={zkillLink('kill', killmail_id)}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="block w-full h-full"
-                >
-                  <img
-                    src={victimPrimaryImageUrl}
-                    alt="VictimPrimaryLogo"
-                    className={clsx(
-                      classes.killRowImage,
-                      'w-full h-full object-contain'
-                    )}
-                  />
-                </a>
-              </div>
-            </WdTooltipWrapper>
-          )}
-          <VictimRowSubInfo
-            victimCharName={victim_char_name}
-            victimCharacterId={victim_char_id}
-            victimPortraitUrl={victimPortraitUrl}
-          />
-          <div className="flex flex-col text-stone-200 leading-4 min-w-0 overflow-hidden">
-            <div className="truncate font-semibold">
-              {victim_char_name}
-              {victimAffiliation && (
-                <span className="ml-1 text-stone-400">/ {victimAffiliation}</span>
-              )}
-            </div>
-            <div className="truncate text-stone-300">
-              {victim_ship_name}
-              {killValueFormatted && (
-                <>
-                  <span className="ml-1 text-stone-400">/</span>
-                  <span className="ml-1 text-green-400">{killValueFormatted}</span>
-                </>
-              )}
-            </div>
-            <div className="truncate text-stone-400">
-              {!onlyOneSystem && systemName && <span>{systemName}</span>}
-            </div>
-          </div>
-        </div>
-        {/* Attacker Section */}
-        <div className="flex items-start gap-1 min-w-0 sm:ml-auto">
-          <div className="flex flex-col items-end leading-4 min-w-0 overflow-hidden text-right">
-            {!attackerIsNpc && (
-              <div className="truncate font-semibold">
-                {final_blow_char_name}
-                {attackerAffiliation && (
-                  <span className="ml-1 text-stone-400">/ {attackerAffiliation}</span>
-                )}
-              </div>
-            )}
-            {!attackerIsNpc && final_blow_ship_name && (
-              <div className="truncate text-stone-300">{final_blow_ship_name}</div>
-            )}
-            <div className="truncate text-red-400">{killTimeAgo}</div>
-          </div>
-          {(!attackerIsNpc && attackerPortraitUrl && final_blow_char_id > 0) && (
-            <div className="relative shrink-0 w-12 h-12 sm:w-14 sm:h-14 overflow-hidden">
-              <a
-                href={zkillLink('character', final_blow_char_id)}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="block w-full h-full"
-              >
-                <img
-                  src={attackerPortraitUrl}
-                  alt="AttackerPortrait"
-                  className={clsx(
-                    classes.killRowImage,
-                    'w-full h-full object-contain'
-                  )}
-                />
-              </a>
-            </div>
-          )}
-          {attackerPrimaryImageUrl && (
-            <WdTooltipWrapper
-              content={attackerPrimaryTooltip}
-              position={TooltipPosition.top}
-            >
-              <div className="relative shrink-0 w-12 h-12 sm:w-14 sm:h-14 overflow-hidden">
-                <a
-                  href={zkillLink('kill', killmail_id)}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="block w-full h-full"
-                >
-                  <img
-                    src={attackerPrimaryImageUrl}
-                    alt={attackerIsNpc ? 'NpcShip' : 'AttackerPrimaryLogo'}
-                    className={clsx(
-                      classes.killRowImage,
-                      'w-full h-full object-contain'
-                    )}
-                  />
-                  {attackerSubscript && (
-                    <span
-                      className={clsx(
-                        attackerSubscript.cssClass,
-                        classes.attackerCountLabel
-                      )}
-                    >
-                      {attackerSubscript.label}
-                    </span>
-                  )}
-                </a>
-              </div>
-            </WdTooltipWrapper>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};

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

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

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

@@ -11,8 +11,8 @@ import {
   getPrimaryLogoAndTooltip,
   getAttackerPrimaryImageAndTooltip,
 } from '../helpers';
-import { WdTooltipWrapper } from '../../../../ui-kit/WdTooltipWrapper';
-import classes from './SystemKillRow.module.scss';
+import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
+import classes from './KillRowDetail.module.scss';
 import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
 
 export interface CompactKillRowProps {
@@ -21,15 +21,10 @@ export interface CompactKillRowProps {
   onlyOneSystem: boolean;
 }
 
-export const CompactKillRow: React.FC<CompactKillRowProps> = ({
-  killDetails,
-  systemName,
-  onlyOneSystem,
-}) => {
+export const KillRowDetail: React.FC<CompactKillRowProps> = ({ killDetails, systemName, onlyOneSystem }) => {
   const {
     killmail_id = 0,
-
-    // Victim
+    // Victim data
     victim_char_name = 'Unknown Pilot',
     victim_alliance_ticker = '',
     victim_corp_ticker = '',
@@ -40,8 +35,7 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({
     victim_corp_id = 0,
     victim_alliance_id = 0,
     victim_ship_type_id = 0,
-
-    // Attacker
+    // Attacker data
     final_blow_char_id = 0,
     final_blow_char_name = '',
     final_blow_alliance_ticker = '',
@@ -51,72 +45,64 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({
     final_blow_corp_id = 0,
     final_blow_corp_name = '',
     final_blow_ship_type_id = 0,
-
     kill_time = '',
     total_value = 0,
   } = killDetails || {};
 
   const attackerIsNpc = final_blow_char_id === 0;
 
-  // Tickers & strings
-  const victimAffiliationTicker =
-    victim_alliance_ticker || victim_corp_ticker || 'No Ticker';
-  const killValueFormatted =
-    total_value != null && total_value > 0 ? `${formatISK(total_value)} ISK` : null;
-  const attackerName = attackerIsNpc ? '' : final_blow_char_name;
-  const attackerTicker = attackerIsNpc
-    ? ''
-    : final_blow_alliance_ticker || final_blow_corp_ticker || '';
+  // Define victim affiliation ticker.
+  const victimAffiliationTicker = victim_alliance_ticker || victim_corp_ticker || 'No Ticker';
+
+  const killValueFormatted = total_value != null && total_value > 0 ? `${formatISK(total_value)} ISK` : null;
   const killTimeAgo = kill_time ? formatTimeMixed(kill_time) : '0h ago';
+
   const attackerSubscript = getAttackerSubscript(killDetails);
 
-  // Victim images, including the ship
-  const {
-    victimCorpLogoUrl,
-    victimAllianceLogoUrl,
-    victimShipUrl,
-  } = buildVictimImageUrls({
+  const { victimCorpLogoUrl, victimAllianceLogoUrl, victimShipUrl } = buildVictimImageUrls({
     victim_char_id,
     victim_ship_type_id,
     victim_corp_id,
     victim_alliance_id,
   });
 
-  // Attacker corp/alliance
   const { attackerCorpLogoUrl, attackerAllianceLogoUrl } = buildAttackerImageUrls({
     final_blow_char_id,
     final_blow_corp_id,
     final_blow_alliance_id,
   });
 
-  // Victim corp/alliance logo
-  const { url: victimPrimaryLogoUrl, tooltip: victimPrimaryTooltip } =
-    getPrimaryLogoAndTooltip(
-      victimAllianceLogoUrl,
-      victimCorpLogoUrl,
-      victim_alliance_name,
-      victim_corp_name,
-      'Victim'
-    );
+  const { url: victimPrimaryLogoUrl, tooltip: victimPrimaryTooltip } = getPrimaryLogoAndTooltip(
+    victimAllianceLogoUrl,
+    victimCorpLogoUrl,
+    victim_alliance_name,
+    victim_corp_name,
+    'Victim',
+  );
 
-  // Attacker corp/alliance or NPC ship
-  const { url: attackerPrimaryImageUrl, tooltip: attackerPrimaryTooltip } =
-    getAttackerPrimaryImageAndTooltip(
-      attackerIsNpc,
-      attackerAllianceLogoUrl,
-      attackerCorpLogoUrl,
-      final_blow_alliance_name,
-      final_blow_corp_name,
-      final_blow_ship_type_id
-    );
+  const { url: attackerPrimaryImageUrl, tooltip: attackerPrimaryTooltip } = getAttackerPrimaryImageAndTooltip(
+    attackerIsNpc,
+    attackerAllianceLogoUrl,
+    attackerCorpLogoUrl,
+    final_blow_alliance_name,
+    final_blow_corp_name,
+    final_blow_ship_type_id,
+  );
+
+  // Define attackerTicker to use the alliance ticker if available, otherwise the corp ticker.
+  const attackerTicker = attackerIsNpc ? '' : final_blow_alliance_ticker || final_blow_corp_ticker || '';
+
+  // For the attacker image link: if the attacker is not an NPC, link to the character page; otherwise, link to the kill page.
+  const attackerLink = attackerIsNpc ? zkillLink('kill', killmail_id) : zkillLink('character', final_blow_char_id);
 
   return (
     <div
       className={clsx(
         'h-10 flex items-center border-b border-stone-800',
-        'text-xs whitespace-nowrap overflow-hidden leading-none'
+        'text-xs whitespace-nowrap overflow-hidden leading-none',
       )}
     >
+      {/* Victim Section */}
       <div className="flex items-center gap-1">
         {victimShipUrl && (
           <div className="relative shrink-0 w-8 h-8 overflow-hidden">
@@ -128,20 +114,14 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({
             >
               <img
                 src={victimShipUrl}
-                alt="VictimShip"
-                className={clsx(
-                  classes.killRowImage,
-                  'w-full h-full object-contain'
-                )}
+                alt="Victim Ship"
+                className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
               />
             </a>
           </div>
         )}
         {victimPrimaryLogoUrl && (
-          <WdTooltipWrapper
-            content={victimPrimaryTooltip}
-            position={TooltipPosition.top}
-          >
+          <WdTooltipWrapper content={victimPrimaryTooltip} position={TooltipPosition.top}>
             <a
               href={zkillLink('kill', killmail_id)}
               target="_blank"
@@ -150,17 +130,14 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({
             >
               <img
                 src={victimPrimaryLogoUrl}
-                alt="VictimPrimaryLogo"
-                className={clsx(
-                  classes.killRowImage,
-                  'w-full h-full object-contain'
-                )}
+                alt="Victim Primary Logo"
+                className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
               />
             </a>
           </WdTooltipWrapper>
         )}
       </div>
-      <div className="flex flex-col ml-2 min-w-0 overflow-hidden leading-[1rem]">
+      <div className="flex flex-col ml-2 flex-1 min-w-0 overflow-hidden leading-[1rem]">
         <div className="truncate text-stone-200">
           {victim_char_name}
           <span className="text-stone-400"> / {victimAffiliationTicker}</span>
@@ -176,20 +153,17 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({
         </div>
       </div>
       <div className="flex items-center ml-auto gap-2">
-        <div className="flex flex-col items-end min-w-0 overflow-hidden text-right leading-[1rem]">
-          {!attackerIsNpc && (attackerName || attackerTicker) && (
+        <div className="flex flex-col items-end flex-1 min-w-0 overflow-hidden text-right leading-[1rem]">
+          {!attackerIsNpc && (final_blow_char_name || attackerTicker) && (
             <div className="truncate text-stone-200">
-              {attackerName}
-              {attackerTicker && (
-                <span className="ml-1 text-stone-400">/ {attackerTicker}</span>
-              )}
+              {final_blow_char_name}
+              {!attackerIsNpc && attackerTicker && <span className="ml-1 text-stone-400">/ {attackerTicker}</span>}
             </div>
           )}
           <div className="truncate text-stone-400">
             {!onlyOneSystem && systemName ? (
               <>
-                {systemName} /{' '}
-                <span className="ml-1 text-red-400">{killTimeAgo}</span>
+                {systemName} / <span className="ml-1 text-red-400">{killTimeAgo}</span>
               </>
             ) : (
               <span className="text-red-400">{killTimeAgo}</span>
@@ -197,30 +171,24 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({
           </div>
         </div>
         {attackerPrimaryImageUrl && (
-          <WdTooltipWrapper
-            content={attackerPrimaryTooltip}
-            position={TooltipPosition.top}
-          >
+          <WdTooltipWrapper content={attackerPrimaryTooltip} position={TooltipPosition.top}>
             <a
-              href={zkillLink('kill', killmail_id)}
+              href={attackerLink}
               target="_blank"
               rel="noopener noreferrer"
               className="relative block shrink-0 w-8 h-8 overflow-hidden"
             >
               <img
                 src={attackerPrimaryImageUrl}
-                alt={attackerIsNpc ? 'NpcShip' : 'AttackerPrimaryLogo'}
-                className={clsx(
-                  classes.killRowImage,
-                  'w-full h-full object-contain'
-                )}
+                alt={attackerIsNpc ? 'NPC Ship' : 'Attacker Primary Logo'}
+                className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
               />
               {attackerSubscript && (
                 <span
                   className={clsx(
                     classes.attackerCountLabel,
                     attackerSubscript.cssClass,
-                    'text-[0.6rem] leading-none px-[2px]'
+                    'text-[0.6rem] leading-none px-[2px]',
                   )}
                 >
                   {attackerSubscript.label}

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

@@ -1,15 +1,15 @@
 import React, { useRef } from 'react';
-import clsx from 'clsx';
 import {
   LayoutEventBlocker,
-  WdResponsiveCheckbox,
-  WdImgButton,
+  SystemView,
   TooltipPosition,
-  WdDisplayMode,
+  WdCheckbox,
+  WdImgButton,
+  WdTooltipWrapper,
 } from '@/hooks/Mapper/components/ui-kit';
 import { useKillsWidgetSettings } from '../hooks/useKillsWidgetSettings';
 import { PrimeIcons } from 'primereact/api';
-import { useElementWidth } from '@/hooks/Mapper/components/hooks';
+import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
 
 interface KillsHeaderProps {
   systemId?: string;
@@ -25,47 +25,41 @@ export const KillsHeader: React.FC<KillsHeaderProps> = ({ systemId, onOpenSettin
   };
 
   const headerRef = useRef<HTMLDivElement>(null);
-  const headerWidth = useElementWidth(headerRef) || 300;
-
-  const reservedWidth = 100;
-  const availableWidth = Math.max(headerWidth - reservedWidth, 0);
-
-  let displayMode: WdDisplayMode = "full";
-  if (availableWidth >= 60) {
-    displayMode = "full";
-  } else {
-    displayMode = "abbr";
-  }
+  const compact = useMaxWidth(headerRef, 150);
 
   return (
-    <div className="flex w-full items-center text-xs" ref={headerRef}>
-      <div className="flex-shrink-0 select-none mr-2">
-        Kills{systemId && !showAll && ' in '}
+    <div className="flex w-full items-center justify-between text-xs" ref={headerRef}>
+      <div className="flex items-center gap-1">
+        <div className="text-stone-400">
+          Kills
+          {systemId && !showAll && ' in '}
+        </div>
+        {systemId && !showAll && <SystemView systemId={systemId} className="select-none text-center" hideRegion />}
       </div>
-      <div className="flex-grow overflow-hidden">
-        <LayoutEventBlocker className="flex items-center gap-2 justify-end">
-          <div className="flex items-center gap-2">
-            <WdResponsiveCheckbox
-              tooltipContent="Show all systems"
+
+      <LayoutEventBlocker className="flex items-center gap-2 justify-end">
+        <div className="flex items-center gap-2">
+          <WdTooltipWrapper content="Show all systems" position={TooltipPosition.top}>
+            <WdCheckbox
               size="xs"
-              labelFull="Show all systems"
-              labelAbbreviated="All"
+              labelSide="left"
+              label={compact ? 'All' : 'Show all systems'}
               value={showAll}
               onChange={onToggleShowAllVisible}
-              classNameLabel={clsx("whitespace-nowrap text-stone-400 hover:text-stone-200 transition duration-300")}
-              displayMode={displayMode}
+              classNameLabel="whitespace-nowrap text-stone-400 hover:text-stone-200 transition duration-300"
             />
-            <WdImgButton
-              className={PrimeIcons.SLIDERS_H}
-              onClick={onOpenSettings}
-              tooltip={{
-                content: 'Open Kills Settings',
-                position: TooltipPosition.left,
-              }}
-            />
-          </div>
-        </LayoutEventBlocker>
-      </div>
+          </WdTooltipWrapper>
+
+          <WdImgButton
+            className={PrimeIcons.SLIDERS_H}
+            onClick={onOpenSettings}
+            tooltip={{
+              content: 'Open Kills Settings',
+              position: TooltipPosition.top,
+            }}
+          />
+        </div>
+      </LayoutEventBlocker>
     </div>
   );
 };

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

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

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

@@ -1,13 +1,14 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Dialog } from 'primereact/dialog';
 import { Button } from 'primereact/button';
-import { WdImgButton, SystemView, TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
+import { WdImgButton } from '@/hooks/Mapper/components/ui-kit';
 import { PrimeIcons } from 'primereact/api';
 import { useKillsWidgetSettings } from '../hooks/useKillsWidgetSettings';
 import {
   AddSystemDialog,
   SearchOnSubmitCallback,
 } from '@/hooks/Mapper/components/mapInterface/components/AddSystemDialog';
+import { SystemView, TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
 
 interface KillsSettingsDialogProps {
   visible: boolean;
@@ -17,36 +18,27 @@ interface KillsSettingsDialogProps {
 export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visible, setVisible }) => {
   const [globalSettings, setGlobalSettings] = useKillsWidgetSettings();
   const localRef = useRef({
-    compact: globalSettings.compact,
     showAll: globalSettings.showAll,
     whOnly: globalSettings.whOnly,
     excludedSystems: globalSettings.excludedSystems || [],
+    timeRange: globalSettings.timeRange,
   });
 
   const [, forceRender] = useState(0);
-
   const [addSystemDialogVisible, setAddSystemDialogVisible] = useState(false);
 
   useEffect(() => {
     if (visible) {
       localRef.current = {
-        compact: globalSettings.compact,
         showAll: globalSettings.showAll,
         whOnly: globalSettings.whOnly,
         excludedSystems: globalSettings.excludedSystems || [],
+        timeRange: globalSettings.timeRange,
       };
       forceRender(n => n + 1);
     }
   }, [visible, globalSettings]);
 
-  const handleCompactChange = useCallback((checked: boolean) => {
-    localRef.current = {
-      ...localRef.current,
-      compact: checked,
-    };
-    forceRender(n => n + 1);
-  }, []);
-
   const handleWHChange = useCallback((checked: boolean) => {
     localRef.current = {
       ...localRef.current,
@@ -55,6 +47,14 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
     forceRender(n => n + 1);
   }, []);
 
+  const handleTimeRangeChange = useCallback((newTimeRange: number) => {
+    localRef.current = {
+      ...localRef.current,
+      timeRange: newTimeRange,
+    };
+    forceRender(n => n + 1);
+  }, []);
+
   const handleRemoveSystem = useCallback((sysId: number) => {
     localRef.current = {
       ...localRef.current,
@@ -88,22 +88,11 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
 
   const localData = localRef.current;
   const excluded = localData.excludedSystems || [];
+  const timeRangeOptions = [4, 12, 24];
 
   return (
     <Dialog header="Kills Settings" visible={visible} style={{ width: '440px' }} draggable={false} onHide={handleHide}>
       <div className="flex flex-col gap-3 p-2.5">
-        <div className="flex items-center gap-2">
-          <input
-            type="checkbox"
-            id="kills-compact-mode"
-            checked={localData.compact}
-            onChange={e => handleCompactChange(e.target.checked)}
-          />
-          <label htmlFor="kills-compact-mode" className="cursor-pointer">
-            Use compact mode
-          </label>
-        </div>
-
         <div className="flex items-center gap-2">
           <input
             type="checkbox"
@@ -111,11 +100,30 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
             checked={localData.whOnly}
             onChange={e => handleWHChange(e.target.checked)}
           />
-          <label htmlFor="kills-wh-only-mode" className="cursor-pointer">
+          <label htmlFor="kills-wormhole-only-mode" className="cursor-pointer">
             Only show wormhole kills
           </label>
         </div>
 
+        <div className="flex flex-col gap-1">
+          <span className="text-sm">Time Range:</span>
+          <div className="flex flex-wrap gap-2">
+            {timeRangeOptions.map(option => (
+              <label key={option} className="cursor-pointer flex items-center gap-1">
+                <input
+                  type="radio"
+                  name="timeRange"
+                  value={option}
+                  checked={localData.timeRange === option}
+                  onChange={() => handleTimeRangeChange(option)}
+                />
+                <span className="text-sm">{option} Hours</span>
+              </label>
+            ))}
+          </div>
+        </div>
+
+        {/* Excluded Systems */}
         <div className="flex flex-col gap-1">
           <div className="flex items-center justify-between">
             <label className="text-sm text-stone-400">Excluded Systems</label>
@@ -128,8 +136,7 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
           {excluded.length === 0 && <div className="text-stone-500 text-xs italic">No systems excluded.</div>}
           {excluded.map(sysId => (
             <div key={sysId} className="flex items-center justify-between border-b border-stone-600 py-1 px-1 text-xs">
-              <SystemView systemId={sysId.toString()} hideRegion compact/>
-
+              <SystemView systemId={sysId.toString()} hideRegion />
               <WdImgButton
                 className={PrimeIcons.TRASH}
                 onClick={() => handleRemoveSystem(sysId)}

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

@@ -1,39 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import { zkillLink } from '../helpers';
-import classes from './SystemKillRow.module.scss';
-
-interface VictimRowSubInfoProps {
-  victimCharacterId: number | null;
-  victimPortraitUrl: string | null;
-  victimCharName?: string;
-}
-
-export const VictimRowSubInfo: React.FC<VictimRowSubInfoProps> = ({
-  victimCharacterId = 0,
-  victimPortraitUrl,
-  victimCharName,
-}) => {
-  if (!victimPortraitUrl || !victimCharacterId || victimCharacterId <= 0) {
-    return null;
-  }
-
-  return (
-    <div className="flex items-start gap-1">
-      <div className="relative shrink-0 w-12 h-12 sm:w-14 sm:h-14 overflow-hidden">
-        <a
-          href={zkillLink('character', victimCharacterId)}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="block w-full h-full"
-        >
-          <img
-            src={victimPortraitUrl}
-            alt={victimCharName || 'Victim Portrait'}
-            className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
-          />
-        </a>
-      </div>
-    </div>
-  );
-};

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

@@ -2,19 +2,19 @@ import { useMemo, useCallback } from 'react';
 import useLocalStorageState from 'use-local-storage-state';
 
 export interface KillsWidgetSettings {
-  compact: boolean;
   showAll: boolean;
   whOnly: boolean;
   excludedSystems: number[];
   version: number;
+  timeRange: number;
 }
 
 export const DEFAULT_KILLS_WIDGET_SETTINGS: KillsWidgetSettings = {
-  compact: true,
   showAll: false,
   whOnly: true,
   excludedSystems: [],
-  version: 0,
+  version: 2,
+  timeRange: 1,
 };
 
 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,42 @@ 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 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 +74,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(
@@ -64,10 +88,7 @@ export function useSystemKills({ systemId, outCommand, showAllVisible = false, s
           updated[sid] = combined;
         }
 
-        return {
-          ...prev,
-          detailedKills: updated,
-        };
+        return { ...prev, detailedKills: updated };
       });
     },
     [update, sinceHours],
@@ -95,7 +116,6 @@ export function useSystemKills({ systemId, outCommand, showAllVisible = false, s
             since_hours: sinceHours,
           };
         } else {
-          // If there's no system and not showing all, do nothing
           setIsLoading(false);
           return;
         }
@@ -105,14 +125,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);
@@ -142,7 +159,6 @@ export function useSystemKills({ systemId, outCommand, showAllVisible = false, s
     } else if (systemId) {
       return 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] ?? []);
     }
     return [];
@@ -153,9 +169,8 @@ export function useSystemKills({ systemId, outCommand, showAllVisible = false, s
   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]);
 
@@ -164,14 +179,13 @@ export function useSystemKills({ systemId, outCommand, showAllVisible = false, s
 
     if (showAllVisible || systemId) {
       debouncedFetchKills();
-      // Clean up the debounce on unmount or changes
       return () => debouncedFetchKills.cancel();
     }
   }, [showAllVisible, systemId, effectiveSystemIds, debouncedFetchKills]);
 
   const refetch = useCallback(() => {
     debouncedFetchKills.cancel();
-    fetchKills(); // immediate (non-debounced) call
+    fetchKills();
   }, [debouncedFetchKills, fetchKills]);
 
   return {

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

@@ -0,0 +1,13 @@
+// useSystemKillsItemTemplate.tsx
+import { useCallback } from 'react';
+import { VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
+import { DetailedKill } from '@/hooks/Mapper/types/kills';
+import { KillItemTemplate } from '../components/KillItemTemplate';
+
+export function useSystemKillsItemTemplate(systemNameMap: Record<string, string>, onlyOneSystem: boolean) {
+  return useCallback(
+    (kill: DetailedKill, options: VirtualScrollerTemplateOptions) =>
+      KillItemTemplate(systemNameMap, onlyOneSystem, kill, options),
+    [systemNameMap, onlyOneSystem],
+  );
+}

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

@@ -0,0 +1,96 @@
+import React from 'react';
+import { SystemView, WdCheckbox, WdImgButton, TooltipPosition } 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';
+
+export type HeaderProps = {
+  systemId: string;
+  isNotSelectedSystem: boolean;
+  sigCount: number;
+  isCompact: boolean;
+  lazyDeleteValue: boolean;
+  onLazyDeleteChange: (checked: boolean) => void;
+  pendingCount: number;
+  onUndoClick: () => void;
+  onSettingsClick: () => void;
+};
+
+function HeaderImpl({
+  systemId,
+  isNotSelectedSystem,
+  sigCount,
+  isCompact,
+  lazyDeleteValue,
+  onLazyDeleteChange,
+  pendingCount,
+  onUndoClick,
+  onSettingsClick,
+}: HeaderProps) {
+  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>
+
+      <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})` }}
+            onClick={onUndoClick}
+          />
+        )}
+
+        <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>
+    </div>
+  );
+}
+
+export const SystemSignaturesHeader = React.memo(HeaderImpl);

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

@@ -1,12 +1,5 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
-import {
-  InfoDrawer,
-  LayoutEventBlocker,
-  SystemView,
-  TooltipPosition,
-  WdCheckbox,
-  WdImgButton,
-} from '@/hooks/Mapper/components/ui-kit';
 import { SystemSignaturesContent } from './SystemSignaturesContent';
 import {
   COSMIC_ANOMALY,
@@ -19,28 +12,28 @@ import {
   STRUCTURE,
   SystemSignatureSettingsDialog,
 } from './SystemSignatureSettingsDialog';
-import { SignatureGroup } from '@/hooks/Mapper/types';
-
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-import { PrimeIcons } from 'primereact/api';
-
+import { SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { CheckboxChangeEvent } from 'primereact/checkbox';
-import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
-import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
+import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth';
+import { useHotkey } from '@/hooks/Mapper/hooks';
+import { COMPACT_MAX_WIDTH } from './constants';
+import { renderHeaderLabel } from './renders';
 
-const SIGNATURE_SETTINGS_KEY = 'wanderer_system_signature_settings_v5_2';
+const SIGNATURE_SETTINGS_KEY = 'wanderer_system_signature_settings_v5_5';
+export const SIGNATURE_WINDOW_ID = 'system_signatures_window';
 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';
 
-const settings: Setting[] = [
+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 },
@@ -56,121 +49,127 @@ const settings: Setting[] = [
   { key: SignatureGroup.CombatSite, name: 'Show Combat Sites', value: true, isFilter: true },
 ];
 
-const defaultSettings = () => {
-  return [...settings];
-};
+function getDefaultSettings(): Setting[] {
+  return [...SETTINGS];
+}
 
-export const SystemSignatures = () => {
+export const SystemSignatures: React.FC = () => {
   const {
     data: { selectedSystems },
   } = useMapRootState();
 
   const [visible, setVisible] = useState(false);
-  const [settings, setSettings] = useState<Setting[]>(defaultSettings);
+
+  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();
+  });
+
+  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);
+  }, []);
 
   const [systemId] = selectedSystems;
-
   const isNotSelectedSystem = selectedSystems.length !== 1;
 
-  const lazyDeleteValue = useMemo(() => {
-    return settings.find(setting => setting.key === LAZY_DELETE_SIGNATURES_SETTING)!.value;
-  }, [settings]);
+  const lazyDeleteValue = useMemo(
+    () => currentSettings.find(setting => setting.key === LAZY_DELETE_SIGNATURES_SETTING)?.value || false,
+    [currentSettings],
+  );
 
-  const handleSettingsChange = useCallback((settings: Setting[]) => {
-    setSettings(settings);
-    localStorage.setItem(SIGNATURE_SETTINGS_KEY, JSON.stringify(settings));
+  const handleSettingsChange = useCallback((newSettings: Setting[]) => {
+    setCurrentSettings(newSettings);
     setVisible(false);
   }, []);
 
   const handleLazyDeleteChange = useCallback((value: boolean) => {
-    setSettings(settings => {
-      const lazyDelete = settings.find(setting => setting.key === LAZY_DELETE_SIGNATURES_SETTING)!;
-      lazyDelete.value = value;
-      localStorage.setItem(SIGNATURE_SETTINGS_KEY, JSON.stringify(settings));
-      return [...settings];
-    });
+    setCurrentSettings(prevSettings =>
+      prevSettings.map(setting => (setting.key === LAZY_DELETE_SIGNATURES_SETTING ? { ...setting, value } : setting)),
+    );
   }, []);
 
-  useEffect(() => {
-    const restoredSettings = localStorage.getItem(SIGNATURE_SETTINGS_KEY);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isCompact = useMaxWidth(containerRef, COMPACT_MAX_WIDTH);
 
-    if (restoredSettings) {
-      setSettings(JSON.parse(restoredSettings));
+  useHotkey(true, ['z'], event => {
+    if (pendingSigs.length > 0) {
+      event.preventDefault();
+      event.stopPropagation();
+      undoPendingFnRef.current();
+      setPendingSigs([]);
     }
+  });
+
+  const handleUndoClick = useCallback(() => {
+    undoPendingFnRef.current();
+    setPendingSigs([]);
   }, []);
 
-  const ref = useRef<HTMLDivElement>(null);
-  const compact = useMaxWidth(ref, 260);
+  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;
+  }, []);
 
   return (
     <Widget
       label={
-        <div className="flex justify-between items-center text-xs w-full h-full" ref={ref}>
-          <div className="flex justify-between items-center gap-1">
-            {!compact && (
-              <div className="flex whitespace-nowrap text-ellipsis overflow-hidden text-stone-400">
-                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={compact ? '' : 'Lazy delete'}
-                value={lazyDeleteValue}
-                classNameLabel="text-stone-400 hover:text-stone-200 transition duration-300 whitespace-nowrap text-ellipsis overflow-hidden"
-                onChange={(event: CheckboxChangeEvent) => handleLazyDeleteChange(!!event.checked)}
-              />
-            </WdTooltipWrapper>
-
-            <WdImgButton
-              className={PrimeIcons.QUESTION_CIRCLE}
-              tooltip={{
-                position: TooltipPosition.left,
-                // @ts-ignore
-                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 select one or more signatures <br /> in 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 select any signature need click on that, <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>}>
-                      For delete any signature first of all you need select before
-                      <br /> and then use <b className="text-sky-500">Del</b>
-                    </InfoDrawer>
-                  </div>
-                ) as React.ReactNode,
-              }}
-            />
-            <WdImgButton className={PrimeIcons.SLIDERS_H} onClick={() => setVisible(true)} />
-          </LayoutEventBlocker>
+        <div ref={containerRef} className="w-full">
+          {renderHeaderLabel({
+            systemId,
+            isNotSelectedSystem,
+            isCompact,
+            sigCount,
+            lazyDeleteValue,
+            pendingCount: pendingSigs.length,
+            onLazyDeleteChange: handleLazyDeleteChange,
+            onUndoClick: handleUndoClick,
+            onSettingsClick: handleSettingsButtonClick,
+          })}
         </div>
       }
+      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">
           System is not selected
         </div>
       ) : (
-        <SystemSignaturesContent systemId={systemId} settings={settings} onLazyDeleteChange={handleLazyDeleteChange} />
+        <SystemSignaturesContent
+          systemId={systemId}
+          settings={currentSettings}
+          onLazyDeleteChange={handleLazyDeleteChange}
+          onCountChange={handleSigCountChange}
+          onPendingChange={handlePendingChange}
+        />
       )}
       {visible && (
         <SystemSignatureSettingsDialog
-          settings={settings}
+          settings={currentSettings}
           onCancel={() => setVisible(false)}
           onSave={handleSettingsChange}
         />
@@ -178,3 +177,5 @@ export const SystemSignatures = () => {
     </Widget>
   );
 };
+
+export default SystemSignatures;

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

@@ -1,10 +0,0 @@
-.TableRowCompact {
-  height: 8px;
-  max-height: 8px;
-  font-size: 12px !important;
-  line-height: 8px;
-}
-
-.Table {
-
-}

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

@@ -1,29 +1,28 @@
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { parseSignatures } from '@/hooks/Mapper/helpers';
-import { Commands, OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
-import { WdTooltip, WdTooltipHandlers } from '@/hooks/Mapper/components/ui-kit';
-import {
-  getGroupIdByRawGroup,
-  GROUPS_LIST,
-} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
-
+import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
 import { DataTable, DataTableRowClickEvent, DataTableRowMouseEvent, SortOrder } from 'primereact/datatable';
 import { Column } from 'primereact/column';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import useRefState from 'react-usestateref';
-import { Setting } from '../SystemSignatureSettingsDialog';
-import { useHotkey } from '@/hooks/Mapper/hooks';
-import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
-import { useClipboard } from '@/hooks/Mapper/hooks/useClipboard';
+import { PrimeIcons } from 'primereact/api';
+import useLocalStorageState from 'use-local-storage-state';
 
-import classes from './SystemSignaturesContent.module.scss';
-import clsx from 'clsx';
-import { SystemSignature } from '@/hooks/Mapper/types';
+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 {
-  getActualSigs,
-  getRowColorByTimeLeft,
-} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers';
+  COMPACT_MAX_WIDTH,
+  GROUPS_LIST,
+  MEDIUM_MAX_WIDTH,
+  OTHER_COLUMNS_WIDTH,
+  getGroupIdByRawGroup,
+} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants';
+import {
+  SHOW_DESCRIPTION_COLUMN_SETTING,
+  SHOW_UPDATED_COLUMN_SETTING,
+  SHOW_CHARACTER_COLUMN_SETTING,
+  SIGNATURE_WINDOW_ID,
+} from '../SystemSignatures';
+
+import { COSMIC_SIGNATURE } from '../SystemSignatureSettingsDialog';
 import {
   renderAddedTimeLeft,
   renderDescription,
@@ -31,18 +30,12 @@ import {
   renderInfoColumn,
   renderUpdatedTimeLeft,
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders';
-import useLocalStorageState from 'use-local-storage-state';
-import { PrimeIcons } from 'primereact/api';
-import { SignatureSettings } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings';
-import { useMapEventListener } from '@/hooks/Mapper/events';
-import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
-import { COSMIC_SIGNATURE } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog';
-import {
-  SHOW_DESCRIPTION_COLUMN_SETTING,
-  SHOW_UPDATED_COLUMN_SETTING,
-  LAZY_DELETE_SIGNATURES_SETTING,
-  KEEP_LAZY_DELETE_SETTING,
-} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures';
+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';
+
 type SystemSignaturesSortSettings = {
   sortField: string;
   sortOrder: SortOrder;
@@ -55,391 +48,287 @@ const SORT_DEFAULT_VALUES: SystemSignaturesSortSettings = {
 
 interface SystemSignaturesContentProps {
   systemId: string;
-  settings: Setting[];
+  settings: { key: string; value: boolean }[];
   hideLinkedSignatures?: boolean;
   selectable?: boolean;
   onSelect?: (signature: SystemSignature) => void;
   onLazyDeleteChange?: (value: boolean) => void;
+  onCountChange?: (count: number) => void;
+  onPendingChange?: (pending: ExtendedSystemSignature[], undo: () => void) => void;
 }
-export const SystemSignaturesContent = ({
+
+const headerInlineStyle = { padding: '2px', fontSize: '12px', lineHeight: '1.333' };
+
+export function SystemSignaturesContent({
   systemId,
   settings,
   hideLinkedSignatures,
   selectable,
   onSelect,
   onLazyDeleteChange,
-}: SystemSignaturesContentProps) => {
-  const { outCommand } = useMapRootState();
-
-  const [signatures, setSignatures, signaturesRef] = useRefState<SystemSignature[]>([]);
-  const [selectedSignatures, setSelectedSignatures] = useState<SystemSignature[]>([]);
-  const [nameColumnWidth, setNameColumnWidth] = useState('auto');
-  const [selectedSignature, setSelectedSignature] = useState<SystemSignature | null>(null);
-
-  const [hoveredSig, setHoveredSig] = useState<SystemSignature | null>(null);
-
-  const [sortSettings, setSortSettings] = useLocalStorageState<SystemSignaturesSortSettings>('window:signatures:sort', {
-    defaultValue: SORT_DEFAULT_VALUES,
-  });
-
-  const tableRef = useRef<HTMLDivElement>(null);
-  const compact = useMaxWidth(tableRef, 260);
-  const medium = useMaxWidth(tableRef, 380);
-  const refData = useRef({ selectable });
-  refData.current = { selectable };
-
-  const tooltipRef = useRef<WdTooltipHandlers>(null);
-
-  const { clipboardContent, setClipboardContent } = useClipboard();
-
-  const lazyDeleteValue = useMemo(() => {
-    return settings.find(setting => setting.key === LAZY_DELETE_SIGNATURES_SETTING)?.value ?? false;
-  }, [settings]);
-
-  const keepLazyDeleteValue = useMemo(() => {
-    return settings.find(setting => setting.key === KEEP_LAZY_DELETE_SETTING)?.value ?? false;
-  }, [settings]);
-
-  const handleResize = useCallback(() => {
-    if (tableRef.current) {
-      const tableWidth = tableRef.current.offsetWidth;
-      const otherColumnsWidth = 276;
-      const availableWidth = tableWidth - otherColumnsWidth;
-      setNameColumnWidth(`${availableWidth}px`);
-    }
-  }, []);
-
-  const groupSettings = useMemo(() => settings.filter(s => (GROUPS_LIST as string[]).includes(s.key)), [settings]);
-  const showDescriptionColumn = useMemo(
-    () => settings.find(s => s.key === SHOW_DESCRIPTION_COLUMN_SETTING)?.value,
-    [settings],
-  );
-
-  const showUpdatedColumn = useMemo(() => settings.find(s => s.key === SHOW_UPDATED_COLUMN_SETTING)?.value, [settings]);
-
-  const filteredSignatures = useMemo(() => {
-    return signatures
-      .filter(x => {
-        if (hideLinkedSignatures && !!x.linked_system) {
-          return false;
-        }
-
-        const isCosmicSignature = x.kind === COSMIC_SIGNATURE;
-        const preparedGroup = getGroupIdByRawGroup(x.group);
-
-        if (isCosmicSignature) {
-          const showCosmicSignatures = settings.find(y => y.key === COSMIC_SIGNATURE)?.value;
-          if (showCosmicSignatures) {
-            return !x.group || groupSettings.find(y => y.key === preparedGroup)?.value;
-          } else {
-            return !!x.group && groupSettings.find(y => y.key === preparedGroup)?.value;
-          }
-        }
-
-        return settings.find(y => y.key === x.kind)?.value;
-      })
-      .sort((a, b) => {
-        return new Date(b.updated_at || 0).getTime() - new Date(a.updated_at || 0).getTime();
-      });
-  }, [signatures, settings, groupSettings, hideLinkedSignatures]);
-
-  const handleGetSignatures = useCallback(async () => {
-    const { signatures } = await outCommand({
-      type: OutCommand.getSignatures,
-      data: { system_id: systemId },
+  onCountChange,
+  onPendingChange,
+}: SystemSignaturesContentProps) {
+  const { signatures, selectedSignatures, setSelectedSignatures, handleDeleteSelected, handleSelectAll, handlePaste } =
+    useSystemSignaturesData({
+      systemId,
+      settings,
+      onCountChange,
+      onPendingChange,
+      onLazyDeleteChange,
     });
 
-    setSignatures(signatures);
-  }, [outCommand, systemId]);
-
-  const handleUpdateSignatures = useCallback(
-    async (newSignatures: SystemSignature[], updateOnly: boolean, skipUpdateUntouched?: boolean) => {
-      const { added, updated, removed } = getActualSigs(
-        signaturesRef.current,
-        newSignatures,
-        updateOnly,
-        skipUpdateUntouched,
-      );
-
-      const { signatures: updatedSignatures } = await outCommand({
-        type: OutCommand.updateSignatures,
-        data: {
-          system_id: systemId,
-          added,
-          updated,
-          removed,
-        },
-      });
-
-      setSignatures(() => updatedSignatures);
-      setSelectedSignatures([]);
-    },
-    [outCommand, systemId],
+  const [sortSettings, setSortSettings] = useLocalStorageState<{ sortField: string; sortOrder: SortOrder }>(
+    'window:signatures:sort',
+    { defaultValue: SORT_DEFAULT_VALUES },
   );
 
-  const handleDeleteSelected = useCallback(
-    async (e: KeyboardEvent) => {
-      if (selectable) {
-        return;
-      }
-      if (selectedSignatures.length === 0) {
-        return;
-      }
+  const tableRef = useRef<HTMLDivElement>(null);
+  const tooltipRef = useRef<WdTooltipHandlers>(null);
+  const [hoveredSignature, setHoveredSignature] = useState<SystemSignature | null>(null);
 
-      e.preventDefault();
-      e.stopPropagation();
-
-      const selectedSignaturesEveIds = selectedSignatures.map(x => x.eve_id);
-      await handleUpdateSignatures(
-        signatures.filter(x => !selectedSignaturesEveIds.includes(x.eve_id)),
-        false,
-        true,
-      );
-    },
-    [handleUpdateSignatures, selectable, signatures, selectedSignatures],
-  );
-
-  const handleSelectAll = useCallback(() => {
-    setSelectedSignatures(signatures);
-  }, [signatures]);
-
-  const handleSelectSignatures = useCallback(
-    // TODO still will be good to define types if we use typescript
-    // @ts-ignore
-    e => {
-      if (selectable) {
-        onSelect?.(e.value);
-      } else {
-        setSelectedSignatures(e.value);
-      }
-    },
-    [onSelect, selectable],
-  );
-
-  const handlePaste = async (clipboardContent: string) => {
-    const newSignatures = parseSignatures(
-      clipboardContent,
-      settings.map(x => x.key),
-    );
-
-    handleUpdateSignatures(newSignatures, !lazyDeleteValue);
-
-    if (lazyDeleteValue && !keepLazyDeleteValue) {
-      onLazyDeleteChange?.(false);
-    }
-  };
-
-  const handleEnterRow = useCallback(
-    (e: DataTableRowMouseEvent) => {
-      setHoveredSig(filteredSignatures[e.index]);
-      tooltipRef.current?.show(e.originalEvent);
-    },
-    [filteredSignatures],
-  );
-
-  const handleLeaveRow = useCallback((e: DataTableRowMouseEvent) => {
-    tooltipRef.current?.hide(e.originalEvent);
-    setHoveredSig(null);
-  }, []);
+  const isCompact = useMaxWidth(tableRef, COMPACT_MAX_WIDTH);
+  const isMedium = useMaxWidth(tableRef, MEDIUM_MAX_WIDTH);
 
+  const { clipboardContent, setClipboardContent } = useClipboard();
   useEffect(() => {
-    if (refData.current.selectable) {
-      return;
-    }
-
-    if (!clipboardContent?.text) {
-      return;
-    }
+    if (selectable) return;
+    if (!clipboardContent?.text) return;
 
     handlePaste(clipboardContent.text);
+
     setClipboardContent(null);
-  }, [clipboardContent, selectable, lazyDeleteValue, keepLazyDeleteValue]);
+  }, [selectable, clipboardContent]);
 
   useHotkey(true, ['a'], handleSelectAll);
-  useHotkey(false, ['Backspace', 'Delete'], handleDeleteSelected);
+  useHotkey(false, ['Backspace', 'Delete'], (event: KeyboardEvent) => {
+    const targetWindow = (event.target as HTMLHtmlElement)?.closest(`[data-window-id="${SIGNATURE_WINDOW_ID}"]`);
 
-  useEffect(() => {
-    if (!systemId) {
-      setSignatures([]);
+    if (!targetWindow) {
       return;
     }
 
-    handleGetSignatures();
-  }, [systemId]);
-
-  useMapEventListener(event => {
-    switch (event.name) {
-      case Commands.signaturesUpdated:
-        if (event.data?.toString() !== systemId.toString()) {
-          return;
-        }
-
-        handleGetSignatures();
-        return true;
-    }
+    event.preventDefault();
+    event.stopPropagation();
+    handleDeleteSelected();
   });
 
-  useEffect(() => {
-    const observer = new ResizeObserver(handleResize);
-    if (tableRef.current) {
-      observer.observe(tableRef.current);
-    }
-
-    handleResize(); // Call on mount to set initial width
-
-    return () => {
-      if (tableRef.current) {
-        observer.unobserve(tableRef.current);
-      }
-    };
+  const [nameColumnWidth, setNameColumnWidth] = useState('auto');
+  const handleResize = useCallback(() => {
+    if (!tableRef.current) return;
+    const tableWidth = tableRef.current.offsetWidth;
+    const otherColumnsWidth = OTHER_COLUMNS_WIDTH;
+    setNameColumnWidth(`${tableWidth - otherColumnsWidth}px`);
   }, []);
+  useEffect(() => {
+    if (!tableRef.current) return;
+    const observer = new ResizeObserver(handleResize);
+    observer.observe(tableRef.current);
+    handleResize();
+    return () => {
+      observer.disconnect();
+    };
+  }, [handleResize]);
 
-  const renderToolbar = (/*row: SystemSignature*/) => {
-    return (
-      <div className="flex justify-end items-center gap-2 mr-[4px]">
-        <WdTooltipWrapper content="To Edit Signature do double click">
-          <span className={clsx(PrimeIcons.PENCIL, 'text-[10px]')}></span>
-        </WdTooltipWrapper>
-      </div>
-    );
-  };
-
+  const [selectedSignatureForDialog, setSelectedSignatureForDialog] = useState<SystemSignature | null>(null);
   const [showSignatureSettings, setShowSignatureSettings] = useState(false);
 
   const handleRowClick = (e: DataTableRowClickEvent) => {
-    setSelectedSignature(e.data as SystemSignature);
+    setSelectedSignatureForDialog(e.data as SystemSignature);
     setShowSignatureSettings(true);
   };
 
-  return (
-    <>
-      <div ref={tableRef} className={'h-full '}>
-        {filteredSignatures.length === 0 ? (
-          <div className="w-full h-full flex justify-center items-center select-none text-stone-400/80 text-sm">
-            No signatures
-          </div>
-        ) : (
-          <>
-            {/* @ts-ignore */}
-            <DataTable
-              className={classes.Table}
-              value={filteredSignatures}
-              size="small"
-              selectionMode={selectable ? 'single' : 'multiple'}
-              selection={selectedSignatures}
-              metaKeySelection
-              onSelectionChange={handleSelectSignatures}
-              dataKey="eve_id"
-              tableClassName="w-full select-none"
-              resizableColumns={false}
-              onRowDoubleClick={handleRowClick}
-              rowHover
-              selectAll
-              sortField={sortSettings.sortField}
-              sortOrder={sortSettings.sortOrder}
-              onSort={event => setSortSettings(() => ({ sortField: event.sortField, sortOrder: event.sortOrder }))}
-              onRowMouseEnter={compact || medium ? handleEnterRow : undefined}
-              onRowMouseLeave={compact || medium ? handleLeaveRow : undefined}
-              rowClassName={row => {
-                if (selectedSignatures.some(x => x.eve_id === row.eve_id)) {
-                  return clsx(classes.TableRowCompact, 'bg-amber-500/50 hover:bg-amber-500/70 transition duration-200');
-                }
-
-                const dateClass = getRowColorByTimeLeft(row.inserted_at ? new Date(row.inserted_at) : undefined);
-                if (!dateClass) {
-                  return clsx(classes.TableRowCompact, 'hover:bg-purple-400/20 transition duration-200');
-                }
-
-                return clsx(classes.TableRowCompact, dateClass);
-              }}
-            >
-              <Column
-                bodyClassName="p-0 px-1"
-                field="group"
-                body={x => renderIcon(x)}
-                style={{ maxWidth: 26, minWidth: 26, width: 26, height: 25 }}
-              ></Column>
-
-              <Column
-                field="eve_id"
-                header="Id"
-                bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-                style={{ maxWidth: 72, minWidth: 72, width: 72 }}
-                sortable
-              ></Column>
-              <Column
-                field="group"
-                header="Group"
-                bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-                hidden={compact}
-                style={{ maxWidth: 110, minWidth: 110, width: 110 }}
-                sortable
-              ></Column>
-              <Column
-                field="info"
-                bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-                body={renderInfoColumn}
-                style={{ maxWidth: nameColumnWidth }}
-                hidden={compact || medium}
-              ></Column>
-              {showDescriptionColumn && (
-                <Column
-                  field="description"
-                  header="Description"
-                  bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-                  body={renderDescription}
-                  hidden={compact}
-                  sortable
-                ></Column>
-              )}
-
-              <Column
-                field="inserted_at"
-                header="Added"
-                dataType="date"
-                bodyClassName="w-[70px] text-ellipsis overflow-hidden whitespace-nowrap"
-                body={renderAddedTimeLeft}
-                sortable
-              ></Column>
-
-              {showUpdatedColumn && (
-                <Column
-                  field="updated_at"
-                  header="Updated"
-                  dataType="date"
-                  bodyClassName="w-[70px] text-ellipsis overflow-hidden whitespace-nowrap"
-                  body={renderUpdatedTimeLeft}
-                  sortable
-                ></Column>
-              )}
-
-              {!selectable && (
-                <Column
-                  bodyClassName="p-0 pl-1 pr-2"
-                  field="group"
-                  body={renderToolbar}
-                  // headerClassName={headerClasses}
-                  style={{ maxWidth: 26, minWidth: 26, width: 26 }}
-                ></Column>
-              )}
-            </DataTable>
-          </>
-        )}
-        <WdTooltip
-          className="bg-stone-900/95 text-slate-50"
-          ref={tooltipRef}
-          content={hoveredSig ? <SignatureView {...hoveredSig} /> : null}
-        />
-
-        {showSignatureSettings && (
-          <SignatureSettings
-            systemId={systemId}
-            show
-            onHide={() => setShowSignatureSettings(false)}
-            signatureData={selectedSignature}
-          />
-        )}
-      </div>
-    </>
+  const handleSelectSignatures = useCallback(
+    (e: { value: SystemSignature[] }) => {
+      if (selectable) {
+        onSelect?.(e.value[0]);
+      } else {
+        setSelectedSignatures(e.value as ExtendedSystemSignature[]);
+      }
+    },
+    [selectable, onSelect, setSelectedSignatures],
   );
-};
+
+  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 filteredSignatures = useMemo<ExtendedSystemSignature[]>(() => {
+    return signatures.filter(sig => {
+      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);
+        }
+        return true;
+      } else {
+        return settings.find(y => y.key === sig.kind)?.value;
+      }
+    });
+  }, [signatures, hideLinkedSignatures, settings, enabledGroups]);
+
+  return (
+    <div ref={tableRef} className="h-full">
+      {filteredSignatures.length === 0 ? (
+        <div className="w-full h-full flex justify-center items-center select-none text-stone-400/80 text-sm">
+          No signatures
+        </div>
+      ) : (
+        <DataTable
+          value={filteredSignatures}
+          size="small"
+          selectionMode="multiple"
+          selection={selectedSignatures}
+          metaKeySelection
+          onSelectionChange={handleSelectSignatures}
+          dataKey="eve_id"
+          className="w-full select-none"
+          resizableColumns={false}
+          rowHover
+          selectAll
+          onRowDoubleClick={handleRowClick}
+          sortField={sortSettings.sortField}
+          sortOrder={sortSettings.sortOrder}
+          onSort={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)}
+        >
+          <Column
+            field="icon"
+            header=""
+            headerStyle={headerInlineStyle}
+            body={sig => renderIcon(sig)}
+            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
+          />
+          <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 ?? ''}
+            hidden={isCompact}
+            sortable
+          />
+          <Column
+            field="info"
+            header="Info"
+            headerStyle={headerInlineStyle}
+            bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+            style={{ maxWidth: nameColumnWidth }}
+            hidden={isCompact || isMedium}
+            body={renderInfoColumn}
+          />
+          {showDescriptionColumn && (
+            <Column
+              field="description"
+              header="Description"
+              headerStyle={headerInlineStyle}
+              bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+              hidden={isCompact}
+              body={renderDescription}
+              sortable
+            />
+          )}
+          <Column
+            field="inserted_at"
+            header="Added"
+            headerStyle={headerInlineStyle}
+            dataType="date"
+            body={renderAddedTimeLeft}
+            style={{ minWidth: 70, maxWidth: 80 }}
+            bodyClassName="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 }}
+              bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+              sortable
+            />
+          )}
+
+          {showCharacterColumn && (
+            <Column
+              field="character_name"
+              header="Character"
+              bodyClassName="w-[70px] text-ellipsis overflow-hidden whitespace-nowrap"
+              sortable
+            ></Column>
+          )}
+
+          {!selectable && (
+            <Column
+              header=""
+              headerStyle={headerInlineStyle}
+              body={() => (
+                <div className="flex justify-end items-center gap-2 mr-[4px]">
+                  <WdTooltipWrapper content="Double-click a row to edit signature">
+                    <span className={PrimeIcons.PENCIL + ' text-[10px]'} />
+                  </WdTooltipWrapper>
+                </div>
+              )}
+              style={{ maxWidth: 26, minWidth: 26, width: 26 }}
+              bodyClassName="p-0 pl-1 pr-2"
+            />
+          )}
+        </DataTable>
+      )}
+
+      <WdTooltip
+        className="bg-stone-900/95 text-slate-50"
+        ref={tooltipRef}
+        content={hoveredSignature ? <SignatureView {...hoveredSignature} /> : null}
+      />
+
+      {showSignatureSettings && (
+        <SignatureSettings
+          systemId={systemId}
+          show
+          onHide={() => setShowSignatureSettings(false)}
+          signatureData={selectedSignatureForDialog || undefined}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -10,6 +10,13 @@ import {
 
 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_ONE_WEEK = 7 * TIME_ONE_DAY;
+export const FINAL_DURATION_MS = 10000;
+
+export const COMPACT_MAX_WIDTH = 260;
+export const MEDIUM_MAX_WIDTH = 380;
+export const OTHER_COLUMNS_WIDTH = 276;
 
 export const GROUPS_LIST = [
   SignatureGroup.GasSite,

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

@@ -0,0 +1,94 @@
+import { 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[],
+  updated: ExtendedSystemSignature[],
+  removed: ExtendedSystemSignature[],
+) {
+  return {
+    system_id: systemId,
+    added: added.map(s => ({ ...s })),
+    updated: updated.map(s => ({ ...s })),
+    removed: removed.map(s => ({ ...s })),
+  };
+}
+
+export function schedulePendingAdditionForSig(
+  sig: ExtendedSystemSignature,
+  finalDuration: number,
+  setSignatures: React.Dispatch<React.SetStateAction<ExtendedSystemSignature[]>>,
+  pendingAdditionMapRef: React.MutableRefObject<Record<string, { finalUntil: number; finalTimeoutId: number }>>,
+  setPendingUndoAdditions: React.Dispatch<React.SetStateAction<ExtendedSystemSignature[]>>,
+) {
+  setPendingUndoAdditions(prev => [...prev, sig]);
+
+  const now = Date.now();
+  const finalTimeoutId = window.setTimeout(() => {
+    setSignatures(prev =>
+      prev.map(x => (x.eve_id === sig.eve_id ? { ...x, pendingAddition: false, pendingUntil: undefined } : x)),
+    );
+    const clone = { ...pendingAdditionMapRef.current };
+    delete clone[sig.eve_id];
+    pendingAdditionMapRef.current = clone;
+
+    setPendingUndoAdditions(prev => prev.filter(x => x.eve_id !== sig.eve_id));
+  }, finalDuration);
+
+  pendingAdditionMapRef.current = {
+    ...pendingAdditionMapRef.current,
+    [sig.eve_id]: {
+      finalUntil: now + finalDuration,
+      finalTimeoutId,
+    },
+  };
+
+  setSignatures(prev =>
+    prev.map(x => (x.eve_id === sig.eve_id ? { ...x, pendingAddition: true, pendingUntil: now + finalDuration } : x)),
+  );
+}
+
+export function mergeLocalPendingAdditions(
+  serverSigs: ExtendedSystemSignature[],
+  localSigs: ExtendedSystemSignature[],
+): ExtendedSystemSignature[] {
+  const now = Date.now();
+  const pendingAdditions = localSigs.filter(sig => sig.pendingAddition && 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)) {
+      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>,
+  finalDuration = FINAL_DURATION_MS,
+) {
+  const now = Date.now();
+  toRemove.forEach(sig => {
+    const finalTimeoutId = window.setTimeout(async () => {
+      await finalizeRemoval(sig);
+    }, finalDuration);
+
+    setPendingMap(prev => ({
+      ...prev,
+      [sig.eve_id]: {
+        finalUntil: now + finalDuration,
+        finalTimeoutId,
+      },
+    }));
+  });
+}

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

@@ -1,25 +1,67 @@
 import { SystemSignature } from '@/hooks/Mapper/types';
-import { GROUPS_LIST } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
-import { getState } from './getState.ts';
+import { GROUPS_LIST } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants';
+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
+ * @param skipUpdateUntouched if true, do NOT push unmodified signatures into the `updated` array
+ */
 export const getActualSigs = (
   oldSignatures: SystemSignature[],
   newSignatures: SystemSignature[],
-  updateOnly: boolean,
+  updateOnly?: boolean,
   skipUpdateUntouched?: boolean,
 ): { added: SystemSignature[]; updated: SystemSignature[]; removed: SystemSignature[] } => {
   const updated: SystemSignature[] = [];
   const removed: SystemSignature[] = [];
+  const added: SystemSignature[] = [];
 
   oldSignatures.forEach(oldSig => {
-    // if old sigs is not contains in newSigs we need mark it as removed
-    // otherwise we check
     const newSig = newSignatures.find(s => s.eve_id === oldSig.eve_id);
     if (newSig) {
-      // we take new sig and now we need check that sig has been updated
-      const isNeedUpgrade = getState(GROUPS_LIST, newSig) > getState(GROUPS_LIST, oldSig);
-      if (isNeedUpgrade) {
-        updated.push({ ...oldSig, group: newSig.group, name: newSig.name });
+      const needUpgrade = getState(GROUPS_LIST, newSig) > getState(GROUPS_LIST, oldSig);
+      const mergedSig = { ...oldSig };
+      let changed = false;
+
+      if (needUpgrade) {
+        mergedSig.group = newSig.group;
+        mergedSig.name = newSig.name;
+        changed = true;
+      }
+      if (newSig.description && newSig.description !== oldSig.description) {
+        mergedSig.description = newSig.description;
+        changed = true;
+      }
+
+      try {
+        const oldInfo = JSON.parse(oldSig.custom_info || '{}');
+        const newInfo = JSON.parse(newSig.custom_info || '{}');
+        let infoChanged = false;
+        for (const key in newInfo) {
+          if (oldInfo[key] !== newInfo[key]) {
+            oldInfo[key] = newInfo[key];
+            infoChanged = true;
+          }
+        }
+        if (infoChanged) {
+          mergedSig.custom_info = JSON.stringify(oldInfo);
+          changed = true;
+        }
+      } catch (e) {
+        console.error(`getActualSigs: Error merging custom_info for ${oldSig.eve_id}`, e);
+      }
+
+      if (newSig.updated_at !== oldSig.updated_at) {
+        mergedSig.updated_at = newSig.updated_at;
+        changed = true;
+      }
+
+      if (changed) {
+        updated.push(mergedSig);
       } else if (!skipUpdateUntouched) {
         updated.push({ ...oldSig });
       }
@@ -30,8 +72,12 @@ export const getActualSigs = (
     }
   });
 
-  const oldSignaturesIds = oldSignatures.map(x => x.eve_id);
-  const added = newSignatures.filter(s => !oldSignaturesIds.includes(s.eve_id));
+  const oldIds = new Set(oldSignatures.map(x => x.eve_id));
+  newSignatures.forEach(s => {
+    if (!oldIds.has(s.eve_id)) {
+      added.push(s);
+    }
+  });
 
   return { added, updated, removed };
 };

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

@@ -3,9 +3,9 @@ import {
   TIME_TEN_MINUTES,
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
 
-export const getRowColorByTimeLeft = (date: Date | undefined) => {
+export const getRowBackgroundColor = (date: Date | undefined): string => {
   if (!date) {
-    return null;
+    return '';
   }
 
   const currentDate = new Date();
@@ -18,4 +18,6 @@ export const getRowColorByTimeLeft = (date: Date | undefined) => {
   if (diff < TIME_TEN_MINUTES) {
     return 'bg-lime-700/40 transition hover:bg-lime-700/50';
   }
+
+  return '';
 };

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

@@ -1,11 +1,8 @@
 import { SystemSignature } from '@/hooks/Mapper/types';
 
-// also we need detect changes, we need understand that sigs has states
-// first state when kind is Cosmic Signature or Cosmic Anomaly and group is empty
-// and we should detect it for ungrade sigs
 export const getState = (_: string[], newSig: SystemSignature) => {
   let state = -1;
-  if (!newSig.group || newSig.group === '') {
+  if (!newSig.group) {
     state = 0;
   } else if (!newSig.name || newSig.name === '') {
     state = 1;

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

@@ -1,3 +1,5 @@
 export * from './getState';
-export * from './getRowColorByTimeLeft';
+export * from './getRowBackgroundColor';
 export * from './getActualSigs';
+export * from './contentHelpers';
+export * from './rowStyles';

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

@@ -0,0 +1,34 @@
+.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

@@ -0,0 +1,20 @@
+import clsx from 'clsx';
+import { ExtendedSystemSignature } from './contentHelpers';
+import { getRowBackgroundColor } from './getRowBackgroundColor';
+import classes from './rowStyles.module.scss';
+
+export function getSignatureRowClass(
+  row: ExtendedSystemSignature,
+  selectedSignatures: ExtendedSystemSignature[],
+): string {
+  const isSelected = selectedSignatures.some(s => s.eve_id === row.eve_id);
+
+  return clsx(
+    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',
+  );
+}

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

@@ -0,0 +1,26 @@
+import { ExtendedSystemSignature } from '../helpers/contentHelpers';
+
+export interface UseSystemSignaturesDataProps {
+  systemId: string;
+  settings: { key: string; value: boolean }[];
+  hideLinkedSignatures?: boolean;
+  onCountChange?: (count: number) => void;
+  onPendingChange?: (pending: ExtendedSystemSignature[], undo: () => void) => void;
+  onLazyDeleteChange?: (value: boolean) => void;
+}
+
+export interface UseFetchingParams {
+  systemId: string;
+  signaturesRef: React.MutableRefObject<ExtendedSystemSignature[]>;
+  setSignatures: React.Dispatch<React.SetStateAction<ExtendedSystemSignature[]>>;
+  localPendingDeletions: ExtendedSystemSignature[];
+}
+
+export interface UsePendingDeletionParams {
+  systemId: string;
+  setSignatures: React.Dispatch<React.SetStateAction<ExtendedSystemSignature[]>>;
+}
+
+export interface UsePendingAdditionParams {
+  setSignatures: React.Dispatch<React.SetStateAction<ExtendedSystemSignature[]>>;
+}

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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,79 @@
+import { useState, useCallback } from 'react';
+import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
+import { ExtendedSystemSignature, prepareUpdatePayload, scheduleLazyDeletionTimers } from '../helpers';
+import { UsePendingDeletionParams } from './types';
+import { FINAL_DURATION_MS } from '../constants';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+
+export function usePendingDeletions({ systemId, setSignatures }: UsePendingDeletionParams) {
+  const { outCommand } = useMapRootState();
+  const [localPendingDeletions, setLocalPendingDeletions] = useState<ExtendedSystemSignature[]>([]);
+  const [pendingDeletionMap, setPendingDeletionMap] = useState<
+    Record<string, { finalUntil: number; finalTimeoutId: number }>
+  >({});
+
+  const processRemovedSignatures = useCallback(
+    async (
+      removed: ExtendedSystemSignature[],
+      added: ExtendedSystemSignature[],
+      updated: ExtendedSystemSignature[],
+    ) => {
+      if (!removed.length) return;
+      const now = Date.now();
+      const processedRemoved = removed.map(r => ({
+        ...r,
+        pendingDeletion: true,
+        pendingAddition: false,
+        pendingUntil: now + FINAL_DURATION_MS,
+      }));
+      setLocalPendingDeletions(prev => [...prev, ...processedRemoved]);
+
+      outCommand({
+        type: OutCommand.updateSignatures,
+        data: prepareUpdatePayload(systemId, added, updated, []),
+      });
+
+      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;
+        }),
+      );
+
+      scheduleLazyDeletionTimers(
+        processedRemoved,
+        setPendingDeletionMap,
+        async sig => {
+          await outCommand({
+            type: OutCommand.updateSignatures,
+            data: prepareUpdatePayload(systemId, [], [], [sig]),
+          });
+          setLocalPendingDeletions(prev => prev.filter(x => x.eve_id !== sig.eve_id));
+          setSignatures(prev => prev.filter(x => x.eve_id !== sig.eve_id));
+        },
+        FINAL_DURATION_MS,
+      );
+    },
+    [systemId, outCommand, setSignatures],
+  );
+
+  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]);
+
+  return {
+    localPendingDeletions,
+    setLocalPendingDeletions,
+    pendingDeletionMap,
+    setPendingDeletionMap,
+    processRemovedSignatures,
+    clearPendingDeletions,
+  };
+}

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

@@ -0,0 +1,75 @@
+import { useCallback } from 'react';
+import { SystemSignature } from '@/hooks/Mapper/types';
+import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
+import { ExtendedSystemSignature, prepareUpdatePayload, getActualSigs, mergeLocalPendingAdditions } from '../helpers';
+import { UseFetchingParams } from './types';
+import { FINAL_DURATION_MS } from '../constants';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+
+export function useSignatureFetching({
+  systemId,
+  signaturesRef,
+  setSignatures,
+  localPendingDeletions,
+}: UseFetchingParams) {
+  const {
+    data: { characters },
+    outCommand,
+  } = useMapRootState();
+
+  const handleGetSignatures = useCallback(async () => {
+    if (!systemId) {
+      setSignatures([]);
+      return;
+    }
+    if (localPendingDeletions.length) {
+      return;
+    }
+    const resp = await outCommand({
+      type: OutCommand.getSignatures,
+      data: { system_id: systemId },
+    });
+    const serverSigs = (resp.signatures ?? []) as SystemSignature[];
+
+    const extended = serverSigs.map(s => ({
+      ...s,
+      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]);
+
+  const handleUpdateSignatures = useCallback(
+    async (newList: ExtendedSystemSignature[], updateOnly: boolean, skipUpdateUntouched?: boolean) => {
+      const { added, updated, removed } = getActualSigs(
+        signaturesRef.current,
+        newList,
+        updateOnly,
+        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],
+  );
+
+  return {
+    handleGetSignatures,
+    handleUpdateSignatures,
+  };
+}

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

@@ -0,0 +1,187 @@
+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 { 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 { useSignatureFetching } from './useSignatureFetching';
+import { usePendingAdditions } from './usePendingAdditions';
+import { usePendingDeletions } from './usePendingDeletions';
+import { UseSystemSignaturesDataProps } from './types';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+
+export function useSystemSignaturesData({
+  systemId,
+  settings,
+  onCountChange,
+  onPendingChange,
+  onLazyDeleteChange,
+}: 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 { handleGetSignatures, handleUpdateSignatures } = useSignatureFetching({
+    systemId,
+    signaturesRef,
+    setSignatures,
+    localPendingDeletions,
+  });
+
+  const handlePaste = useCallback(
+    async (clipboardString: string) => {
+      const lazyDeleteValue = settings.find(s => s.key === LAZY_DELETE_SIGNATURES_SETTING)?.value ?? false;
+
+      const incomingSignatures = parseSignatures(
+        clipboardString,
+        settings.map(s => s.key),
+      ) as ExtendedSystemSignature[];
+
+      const current = signaturesRef.current;
+      const currentNonPending = lazyDeleteValue
+        ? current.filter(sig => !sig.pendingDeletion)
+        : 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({
+          type: OutCommand.updateSignatures,
+          data: {
+            system_id: systemId,
+            added,
+            updated,
+            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;
+      if (lazyDeleteValue && !keepLazy) {
+        setTimeout(() => {
+          onLazyDeleteChange?.(false);
+        }, 0);
+      }
+    },
+    [
+      settings,
+      signaturesRef,
+      processAddedSignatures,
+      processRemovedSignatures,
+      outCommand,
+      systemId,
+      setSignatures,
+      onLazyDeleteChange,
+    ],
+  );
+
+  const handleDeleteSelected = useCallback(async () => {
+    if (!selectedSignatures.length) return;
+    const selectedIds = selectedSignatures.map(s => s.eve_id);
+    const finalList = signatures.filter(s => !selectedIds.includes(s.eve_id));
+
+    await handleUpdateSignatures(finalList, false, true);
+    setSelectedSignatures([]);
+  }, [selectedSignatures, signatures, handleUpdateSignatures]);
+
+  const handleSelectAll = useCallback(() => {
+    setSelectedSignatures(signatures);
+  }, [signatures]);
+
+  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]);
+
+  useMapEventListener(event => {
+    if (event.name === Commands.signaturesUpdated && String(event.data) === String(systemId)) {
+      handleGetSignatures();
+      return true;
+    }
+  });
+
+  useEffect(() => {
+    if (!systemId) {
+      setSignatures([]);
+      return;
+    }
+    handleGetSignatures();
+  }, [systemId, handleGetSignatures, setSignatures]);
+
+  useEffect(() => {
+    onCountChange?.(signatures.length);
+  }, [signatures, onCountChange]);
+
+  return {
+    signatures,
+    selectedSignatures,
+    setSelectedSignatures,
+    handleDeleteSelected,
+    handleSelectAll,
+    handlePaste,
+  };
+}

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

@@ -5,3 +5,4 @@ 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

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

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

@@ -24,6 +24,12 @@ export const renderInfoColumn = (row: SystemSignature) => {
           </WdTooltipWrapper>
         )}
 
+        {customInfo.isCrit && (
+          <WdTooltipWrapper offset={5} position={TooltipPosition.top} content="Signature marked as Crit">
+            <div className="pi pi-clock text-fuchsia-400 text-[11px] mr-[2px]"></div>
+          </WdTooltipWrapper>
+        )}
+
         {row.type && (
           <WHClassView
             className="text-[11px]"

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

@@ -3,7 +3,12 @@ import { Dialog } from 'primereact/dialog';
 import { useCallback, useMemo, useState } from 'react';
 import { TabPanel, TabView } from 'primereact/tabview';
 import { PrettySwitchbox } from './components';
-import { InterfaceStoredSettingsProps, useMapRootState, InterfaceStoredSettings } from '@/hooks/Mapper/mapRootProvider';
+import {
+  InterfaceStoredSettingsProps,
+  useMapRootState,
+  InterfaceStoredSettings,
+  AvailableThemes
+} from '@/hooks/Mapper/mapRootProvider';
 import { OutCommand } from '@/hooks/Mapper/types';
 import { Dropdown } from 'primereact/dropdown';
 import { WidgetsSettings } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/components/WidgetsSettings/WidgetsSettings.tsx';
@@ -112,8 +117,8 @@ const UI_CHECKBOXES_PROPS: SettingsListItem[] = [
 ];
 
 const THEME_OPTIONS = [
-  { label: 'Default', value: 'default' },
-  { label: 'Pathfinder', value: 'pathfinder' },
+  { label: 'Default', value: AvailableThemes.default },
+  { label: 'Pathfinder', value: AvailableThemes.pathfinder },
 ];
 
 const THEME_SETTING: SettingsListItem = {

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 };
 
@@ -17,11 +18,14 @@ export interface MapSettingsProps {
   systemId: string;
   show: boolean;
   onHide: () => void;
-  signatureData: SystemSignature | null;
+  signatureData: SystemSignature | undefined;
 }
 
 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/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,13 +27,14 @@ 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 = () => {
   const {
     update,
     outCommand,
-    data: { selectedConnections, selectedSystems, hubs, systems, connections, linkSignatureToSystem },
+    data: { selectedConnections, selectedSystems, hubs, systems, linkSignatureToSystem },
     interfaceSettings: {
       isShowMenu,
       isShowMinimap = STORED_INTERFACE_DEFAULT_VALUES.isShowMinimap,
@@ -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 });
@@ -56,8 +58,8 @@ export const MapWrapper = () => {
   const [openAddSystem, setOpenAddSystem] = useState<XYPosition | null>(null);
   const [selectedConnection, setSelectedConnection] = useState<SolarSystemConnection | null>(null);
 
-  const ref = useRef({ selectedConnections, selectedSystems, systemContextProps, systems, connections, deleteSystems });
-  ref.current = { selectedConnections, selectedSystems, systemContextProps, systems, connections, deleteSystems };
+  const ref = useRef({ selectedConnections, selectedSystems, systemContextProps, systems, deleteSystems });
+  ref.current = { selectedConnections, selectedSystems, systemContextProps, systems, deleteSystems };
 
   useMapEventListener(event => {
     runCommand(event);
@@ -114,22 +116,19 @@ export const MapWrapper = () => {
 
   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);
   }, []);
 
-  const canRemoveConnection = useCallback((connectionId: string) => {
-    const { connections } = ref.current;
-    return !connections.some(x => x.id === connectionId);
-  }, []);
-
   const handleSubmitAddSystem: SearchOnSubmitCallback = useCallback(
     async item => {
       if (ref.current.systems.some(x => x.system_static_info.solar_system_id === item.value)) {
@@ -148,6 +147,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
@@ -160,13 +171,11 @@ export const MapWrapper = () => {
         minimapClasses={!isShowMenu ? classes.MiniMap : undefined}
         isShowMinimap={isShowMinimap}
         showKSpaceBG={isShowKSpace}
-        onManualDelete={handleManualDelete}
         isThickConnections={isThickConnections}
         isShowBackgroundPattern={isShowBackgroundPattern}
         isSoftBackground={isSoftBackground}
         theme={theme}
         onAddSystem={onAddSystem}
-        canRemoveConnection={canRemoveConnection}
       />
 
       {openSettings != null && (

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

@@ -2,12 +2,12 @@ import classes from './WdCheckbox.module.scss';
 import { Checkbox, CheckboxChangeEvent } from 'primereact/checkbox';
 import { WithClassName } from '@/hooks/Mapper/types/common';
 import clsx from 'clsx';
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 let counter = 0;
 
 export interface WdCheckboxProps {
-  label: string;
+  label: React.ReactNode | string;
   classNameLabel?: string;
   value: boolean;
   labelSide?: 'left' | 'right';

assets/js/hooks/Mapper/components/ui-kit/WdResponsiveCheckBox/WdResponsiveCheckbox.tsx

@@ -10,8 +10,7 @@ import { WdCheckbox, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
  * - "checkbox": show only the checkbox (no text)
  * - "hide": do not render the checkbox at all
  */
-export type WdDisplayMode = "full" | "abbr" | "checkbox" | "hide";
-
+export type WdDisplayMode = 'full' | 'abbr' | 'checkbox' | 'hide';
 
 export interface WdResponsiveCheckboxProps {
   tooltipContent: string;
@@ -38,21 +37,21 @@ export const WdResponsiveCheckbox: React.FC<WdResponsiveCheckboxProps> = ({
   labelSide = 'left',
   displayMode,
 }) => {
-  if (displayMode === "hide") {
+  if (displayMode === 'hide') {
     return null;
   }
 
   const label =
-    displayMode === "full"
+    displayMode === 'full'
       ? labelFull
-      : displayMode === "abbr"
-      ? labelAbbreviated
-      : displayMode === "checkbox"
-      ? ""
-      : labelFull;
+      : displayMode === 'abbr'
+        ? labelAbbreviated
+        : displayMode === 'checkbox'
+          ? ''
+          : labelFull;
 
   const checkbox = (
-    <div className={clsx("min-w-0", containerClassName)}>
+    <div className={clsx('min-w-0', containerClassName)}>
       <WdCheckbox
         size={size}
         labelSide={labelSide}
@@ -64,9 +63,5 @@ export const WdResponsiveCheckbox: React.FC<WdResponsiveCheckboxProps> = ({
     </div>
   );
 
-  return tooltipContent ? (
-    <WdTooltipWrapper content={tooltipContent}>{checkbox}</WdTooltipWrapper>
-  ) : (
-    checkbox
-  );
+  return tooltipContent ? <WdTooltipWrapper content={tooltipContent}>{checkbox}</WdTooltipWrapper> : checkbox;
 };

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

@@ -1,13 +1,4 @@
-import React, {
-  ForwardedRef,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { ForwardedRef, forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import clsx from 'clsx';
 import debounce from 'lodash.debounce';
@@ -58,11 +49,11 @@ export const WdTooltip = forwardRef(function WdTooltip(
     className,
     ...restProps
   }: TooltipProps,
-  ref: ForwardedRef<WdTooltipHandlers>
+  ref: ForwardedRef<WdTooltipHandlers>,
 ) {
   // Always initialize position so we never have a null value.
   const [visible, setVisible] = useState(false);
-  const [pos, setPos] = useState<OffsetPosition>({ left: 0, top: 0 });
+  const [pos, setPos] = useState<OffsetPosition | null>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
 
   const [isMouseInsideTooltip, setIsMouseInsideTooltip] = useState(false);
@@ -80,8 +71,13 @@ export const WdTooltip = forwardRef(function WdTooltip(
     let newLeft = x;
     let newTop = y;
 
-    if (newLeft < 0) newLeft = 10;
-    if (newTop < 0) newTop = 10;
+    if (newLeft < 0) {
+      newLeft = 10;
+    }
+
+    if (newTop < 0) {
+      newTop = 10;
+    }
 
     const rightEdge = newLeft + tooltipWidth + 10;
     if (rightEdge > window.innerWidth) {
@@ -99,11 +95,13 @@ export const WdTooltip = forwardRef(function WdTooltip(
   const scheduleHide = useCallback(() => {
     if (!interactive) {
       setVisible(false);
+      setPos(null);
       return;
     }
     if (!hideTimeoutRef.current) {
       hideTimeoutRef.current = setTimeout(() => {
         setVisible(false);
+        setPos(null);
       }, LEAVE_DELAY);
     }
   }, [interactive]);
@@ -130,12 +128,12 @@ export const WdTooltip = forwardRef(function WdTooltip(
         clearTimeout(hideTimeoutRef.current);
       }
       setVisible(false);
+      setPos(null);
     },
     getIsMouseInside: () => isMouseInsideTooltip,
   }));
 
-  // Recalculate position once the tooltip element has been rendered.
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (!tooltipRef.current || !triggerInfo) return;
 
     const tooltipEl = tooltipRef.current;
@@ -147,30 +145,36 @@ export const WdTooltip = forwardRef(function WdTooltip(
       const tooltipBounds = tooltipEl.getBoundingClientRect();
       x = rect.left - tooltipBounds.width - offset;
       y = rect.top + rect.height / 2 - tooltipBounds.height / 2;
+
       if (x <= 0) {
         x = rect.left + rect.width + offset;
       }
+
       setPos(calcTooltipPosition({ x, y }));
       return;
     }
+
     if (tPosition === TooltipPosition.right) {
       x = rect.left + rect.width + offset;
       y = rect.top + rect.height / 2 - tooltipEl.offsetHeight / 2;
       setPos(calcTooltipPosition({ x, y }));
       return;
     }
+
     if (tPosition === TooltipPosition.top) {
       x = rect.left + rect.width / 2 - tooltipEl.offsetWidth / 2;
       y = rect.top - tooltipEl.offsetHeight - offset;
       setPos(calcTooltipPosition({ x, y }));
       return;
     }
+
     if (tPosition === TooltipPosition.bottom) {
       x = rect.left + rect.width / 2 - tooltipEl.offsetWidth / 2;
       y = rect.bottom + offset;
       setPos(calcTooltipPosition({ x, y }));
       return;
     }
+
     // Default case: use stored coordinates.
     setPos(calcTooltipPosition({ x, y }));
   }, [calcTooltipPosition, triggerInfo, tPosition, offset]);
@@ -184,6 +188,7 @@ export const WdTooltip = forwardRef(function WdTooltip(
         scheduleHide();
         return;
       }
+
       const triggerEl = targetEl.closest(targetSelector);
       const insideTooltip = interactive && tooltipRef.current?.contains(targetEl);
 
@@ -196,6 +201,7 @@ export const WdTooltip = forwardRef(function WdTooltip(
         clearTimeout(hideTimeoutRef.current);
         hideTimeoutRef.current = null;
       }
+
       setVisible(true);
 
       if (triggerEl && tooltipRef.current) {
@@ -206,30 +212,26 @@ export const WdTooltip = forwardRef(function WdTooltip(
         let y = evt.clientY;
 
         switch (tPosition) {
-          case TooltipPosition.left: {
+          case TooltipPosition.left:
             x = rect.left - tooltipEl.offsetWidth - offset;
             y = rect.top + rect.height / 2 - tooltipEl.offsetHeight / 2;
+
             if (x <= 0) {
               x = rect.left + rect.width + offset;
             }
             break;
-          }
-          case TooltipPosition.right: {
+          case TooltipPosition.right:
             x = rect.left + rect.width + offset;
             y = rect.top + rect.height / 2 - tooltipEl.offsetHeight / 2;
             break;
-          }
-          case TooltipPosition.top: {
+          case TooltipPosition.top:
             x = rect.left + rect.width / 2 - tooltipEl.offsetWidth / 2;
             y = rect.top - tooltipEl.offsetHeight - offset;
             break;
-          }
-          case TooltipPosition.bottom: {
+          case TooltipPosition.bottom:
             x = rect.left + rect.width / 2 - tooltipEl.offsetWidth / 2;
             y = rect.bottom + offset;
             break;
-          }
-          default:
         }
 
         setPos(calcTooltipPosition({ x, y }));
@@ -237,13 +239,10 @@ export const WdTooltip = forwardRef(function WdTooltip(
     };
 
     const debounced = debounce(handleMouseMove, 15);
-    const listener = (evt: Event) => {
-      debounced(evt as MouseEvent);
-    };
 
-    document.addEventListener('mousemove', listener);
+    document.addEventListener('mousemove', debounced);
     return () => {
-      document.removeEventListener('mousemove', listener);
+      document.removeEventListener('mousemove', debounced);
       debounced.cancel();
     };
   }, [targetSelector, interactive, tPosition, offset, calcTooltipPosition, scheduleHide]);
@@ -265,11 +264,12 @@ export const WdTooltip = forwardRef(function WdTooltip(
         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',
-        className
+        className,
+        pos === null ? 'invisible' : '',
       )}
       style={{
-        top: pos.top,
-        left: pos.left,
+        top: pos?.top ?? 0,
+        left: pos?.left ?? 0,
         zIndex: 10000,
       }}
       onMouseEnter={() => {
@@ -289,7 +289,7 @@ export const WdTooltip = forwardRef(function WdTooltip(
     >
       {typeof content === 'function' ? content() : content}
     </div>,
-    document.body
+    document.body,
   );
 });
 

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

@@ -1,4 +1,4 @@
-import { forwardRef, HTMLProps, ReactNode } from 'react';
+import { forwardRef, HTMLProps, ReactNode, useMemo } from 'react';
 import clsx from 'clsx';
 import { WdTooltip, WdTooltipHandlers, TooltipProps } from '@/hooks/Mapper/components/ui-kit';
 import classes from './WdTooltipWrapper.module.scss';
@@ -13,11 +13,8 @@ export type WdTooltipWrapperProps = {
   Omit<TooltipProps, 'content'>;
 
 export const WdTooltipWrapper = forwardRef<WdTooltipHandlers, WdTooltipWrapperProps>(
-  (
-    { className, children, content, offset, position, targetSelector, interactive = false, size, ...props },
-    forwardedRef,
-  ) => {
-    const suffix = Math.random().toString(36).slice(2, 7);
+  ({ className, children, content, offset, position, targetSelector, interactive, size, ...props }, forwardedRef) => {
+    const suffix = useMemo(() => Math.random().toString(36).slice(2, 7), []);
     const autoClass = `wdTooltipAutoTrigger-${suffix}`;
     const finalTargetSelector = targetSelector || `.${autoClass}`;
 

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

@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react'
 import styles from './WindowManager.module.scss';
 import debounce from 'lodash.debounce';
 import { WindowProps } from '@/hooks/Mapper/components/ui-kit/WindowManager/types.ts';
+import fastDeepEqual from 'fast-deep-equal';
 
 const MIN_WINDOW_SIZE = 100;
 const SNAP_THRESHOLD = 10;
@@ -100,6 +101,8 @@ export const WindowManager: React.FC<WindowManagerProps> = ({
   );
 
   const refPrevSize = useRef({ w: 0, h: 0 });
+  const ref = useRef({ windows, viewPort, onChange });
+  ref.current = { windows, viewPort, onChange };
 
   useEffect(() => {
     if (!viewPort) {
@@ -110,6 +113,16 @@ export const WindowManager: React.FC<WindowManagerProps> = ({
   }, [viewPort]);
 
   useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const next = initialWindows.map(({ content, ...x }) => x);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const prev = ref.current.windows.map(({ content, ...x }) => x);
+
+    // Here we avoid unnecessary renders if changes was emitted from here.
+    if (fastDeepEqual(next, prev)) {
+      return;
+    }
+
     setWindows(initialWindows.slice(0));
   }, [initialWindows]);
 
@@ -120,9 +133,6 @@ export const WindowManager: React.FC<WindowManagerProps> = ({
   const startMousePositionRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
   const startWindowStateRef = useRef<{ x: number; y: number; width: number; height: number }>(DefaultWindowState);
 
-  const ref = useRef({ windows, viewPort, onChange });
-  ref.current = { windows, viewPort, onChange };
-
   const onDebouncedChange = useMemo(() => {
     return debounce(() => {
       ref.current.onChange?.({

assets/js/hooks/Mapper/helpers/getWhSize.ts

@@ -0,0 +1,13 @@
+import { SHIP_MASSES_SIZE } from '../components/map/constants';
+import { ShipSizeStatus } from '../types/connection';
+import { WormholeDataRaw } from '../types/wormholes';
+
+export const getWhSize = (whDatas: WormholeDataRaw[], whType: string): ShipSizeStatus | null => {
+  if (whType === 'K162' || whType == null) return null;
+
+  const wormholeData = whDatas.find(wh => wh.name === whType);
+
+  if (!wormholeData?.max_mass_per_jump) return null;
+
+  return SHIP_MASSES_SIZE[wormholeData.max_mass_per_jump] ?? ShipSizeStatus.large;
+};

assets/js/hooks/Mapper/helpers/parseSignatures.ts

@@ -16,13 +16,15 @@ export const parseSignatures = (value: string, availableKeys: string[]): SystemS
 
     const kind = MAPPING_TYPE_TO_ENG[sigArrInfo[1] as SignatureKind];
 
-    outArr.push({
+    const signature: SystemSignature = {
       eve_id: sigArrInfo[0],
       kind: availableKeys.includes(kind) ? kind : SignatureKind.CosmicSignature,
       group: sigArrInfo[2] as SignatureGroup,
       name: sigArrInfo[3],
       type: '',
-    });
+    };
+
+    outArr.push(signature);
   }
 
   return outArr;

assets/js/hooks/Mapper/helpers/sortWHClasses.ts

@@ -2,12 +2,13 @@ import { WORMHOLES_ADDITIONAL_INFO } from '@/hooks/Mapper/components/map/constan
 import { WormholeDataRaw } from '@/hooks/Mapper/types';
 
 export const sortWHClasses = (wormholesData: Record<string, WormholeDataRaw>, statics: string[]) => {
-  if (!statics) {
+  if (!statics || !wormholesData) {
     return [];
   }
 
   return statics
     .map(x => wormholesData[x])
+    .filter(x => !!x)
     .map(x => ({ name: x.name, ...WORMHOLES_ADDITIONAL_INFO[x.dest] }))
     .sort((a, b) => a.wormholeClassID - b.wormholeClassID)
     .map(x => x.name);

assets/js/hooks/Mapper/hooks/useTheme.ts

@@ -0,0 +1,7 @@
+import { AvailableThemes, useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+
+export const useTheme = (): AvailableThemes => {
+  const { interfaceSettings } = useMapRootState();
+
+  return interfaceSettings.theme;
+};

assets/js/hooks/Mapper/index.tsx

@@ -1,6 +1,9 @@
 import { createRoot } from 'react-dom/client';
 import Mapper from './MapRoot';
 
+const LAST_VERSION_KEY = 'wandererLastVersion';
+const UI_LOADED_EVENT = 'ui_loaded';
+
 export default {
   _rootEl: null,
   _errorCount: 0,
@@ -8,7 +11,7 @@ export default {
   mounted() {
     // create react root element
     const rootEl = document.getElementById(this.el.id);
-    this._version = this.el.dataset.version;
+    const activeVersion = localStorage.getItem(LAST_VERSION_KEY);
     this._rootEl = createRoot(rootEl!);
 
     const handleError = (error: Error, componentStack: string) => {
@@ -22,7 +25,7 @@ export default {
       onError: handleError,
     });
 
-    this.pushEvent('ui_loaded');
+    this.pushEvent(UI_LOADED_EVENT, { version: activeVersion });
   },
 
   handleEventWrapper(event: string, handler: (payload: any) => void) {
@@ -32,7 +35,8 @@ export default {
   },
 
   reconnected() {
-    this.pushEvent('ui_loaded');
+    const activeVersion = localStorage.getItem(LAST_VERSION_KEY);
+    this.pushEvent(UI_LOADED_EVENT, { version: activeVersion });
   },
 
   async pushEventAsync(event: string, payload: any) {
@@ -46,4 +50,8 @@ export default {
   render(hooks) {
     this._rootEl.render(<Mapper hooks={hooks} />);
   },
+
+  destroyed() {
+    this._rootEl.unmount();
+  },
 };

assets/js/hooks/Mapper/mapRootProvider/MapRootProvider.tsx

@@ -46,6 +46,11 @@ const INITIAL_DATA: MapRootData = {
   linkSignatureToSystem: null,
 };
 
+export enum AvailableThemes {
+  default = 'default',
+  pathfinder = 'pathfinder',
+}
+
 export enum InterfaceStoredSettingsProps {
   isShowMenu = 'isShowMenu',
   isShowMinimap = 'isShowMinimap',
@@ -65,7 +70,7 @@ export type InterfaceStoredSettings = {
   isShowUnsplashedSignatures: boolean;
   isShowBackgroundPattern: boolean;
   isSoftBackground: boolean;
-  theme: string;
+  theme: AvailableThemes;
 };
 
 export const STORED_INTERFACE_DEFAULT_VALUES: InterfaceStoredSettings = {
@@ -76,7 +81,7 @@ export const STORED_INTERFACE_DEFAULT_VALUES: InterfaceStoredSettings = {
   isShowUnsplashedSignatures: false,
   isShowBackgroundPattern: true,
   isSoftBackground: false,
-  theme: 'default',
+  theme: AvailableThemes.default,
 };
 
 export interface MapRootContextProps {

assets/js/hooks/Mapper/types/kills.ts

@@ -21,7 +21,6 @@ export interface DetailedKill {
   victim_ship_type_id?: number | null;
   victim_ship_name?: string;
 
-
   final_blow_char_id?: number | null;
   final_blow_char_name?: string;
   final_blow_corp_id?: number | null;

assets/js/hooks/Mapper/types/mapHandlers.ts

@@ -66,6 +66,7 @@ export type CommandInit = {
   routes: RoutesList;
   options: Record<string, string | boolean>;
   reset?: boolean;
+  is_subscription_active?: boolean;
 };
 export type CommandAddSystems = SolarSystemRawType[];
 export type CommandUpdateSystems = SolarSystemRawType[];

assets/js/hooks/Mapper/types/signatures.ts

@@ -33,6 +33,8 @@ export type SignatureCustomInfo = {
 
 export type SystemSignature = {
   eve_id: string;
+  character_eve_id?: string;
+  character_name?: string;
   kind: SignatureKind;
   name: string;
   // SignatureCustomInfo

assets/js/hooks/Mapper/utils/contextStore/useContextStore.ts

@@ -1,18 +1,31 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useRef, useState, useEffect } from 'react';
 
-import { ContextStoreDataOpts, ProvideConstateDataReturnType, ContextStoreDataUpdate } from './types';
+import { ContextStoreDataOpts, ProvideConstateDataReturnType, ContextStoreDataUpdate, UpdateFunc } from './types';
 
 export const useContextStore = <T>(
   initialValue: T,
   { notNeedRerender = false, handleBeforeUpdate, onAfterAUpdate }: ContextStoreDataOpts<T> = {},
 ): ProvideConstateDataReturnType<T> => {
   const ref = useRef<T>(initialValue);
+  const queueRef = useRef<{ valOrFunc: Partial<T> | UpdateFunc<T>; force: boolean }[]>([]);
   const [, setRerenderKey] = useState(0);
 
   const refWrapper = useRef({ notNeedRerender, handleBeforeUpdate, onAfterAUpdate });
   refWrapper.current = { notNeedRerender, handleBeforeUpdate, onAfterAUpdate };
 
   const update: ContextStoreDataUpdate<T> = useCallback((valOrFunc, force = false) => {
+    queueRef.current.push({ valOrFunc, force });
+  }, []);
+
+  const processNextQueue = useCallback(() => {
+    const next = queueRef.current.shift();
+
+    if (!next) {
+      return;
+    }
+
+    const { valOrFunc, force } = next;
+
     // It need to force prevent unnecessary rerendering
     // update will create once
     const { notNeedRerender, handleBeforeUpdate, onAfterAUpdate } = refWrapper.current;
@@ -76,5 +89,19 @@ export const useContextStore = <T>(
     onAfterAUpdate?.(ref.current);
   }, []);
 
+  useEffect(() => {
+    let requestId: number;
+    const process = () => {
+      processNextQueue();
+      requestId = requestAnimationFrame(process);
+    };
+
+    process();
+
+    return () => {
+      cancelAnimationFrame(requestId);
+    };
+  });
+
   return { update, ref: ref.current };
 };