chore: release version v1.55.1

* feat(Map): Add widget for comments. Refactor design of Signatures widget. Refactor a lot of code. Add Transition component in ui-kit. Sync versions of react.

---------

Co-authored-by: Dmitry Popov <dmitriypopovsamara@gmail.com>
Co-authored-by: achichenkov <aleksei.chichenkov@telleqt.ai>

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

.gitignore

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

CHANGELOG.md

@@ -2,6 +2,463 @@
 
 <!-- changelog -->
 
+## [v1.55.1](https://github.com/wanderer-industries/wanderer/compare/v1.55.0...v1.55.1) (2025-03-16)
+
+
+
+
+### Bug Fixes:
+
+* Core: fixed lazy delete timeouts
+
+* Core: fixed lazy delete settings
+
+* keep character api off by default (#258)
+
+## [v1.55.0](https://github.com/wanderer-industries/wanderer/compare/v1.54.1...v1.55.0) (2025-03-15)
+
+
+
+
+### Features:
+
+* News: added map subscription news
+
+* Api: added map audit base API. Added comments server validations.
+
+* enhance character activty and summmarize by user (#206)
+
+* enhance character activty and summmarize by user (#206)
+
+### Bug Fixes:
+
+* Core: updated balance top up instructions
+
+* updated connections cleanup logic
+
+* removed placeholder favicon (#240)
+
+* fixed activity aggregation and new user tracking (#230)
+
+* fixed activity aggregation and new user tracking (#230)
+
+* fixed activity aggregation and new user tracking (#230)
+
+* fixed activity aggregation and new user tracking (#230)
+
+## [v1.54.1](https://github.com/wanderer-industries/wanderer/compare/v1.54.0...v1.54.1) (2025-03-06)
+
+
+
+
+### Bug Fixes:
+
+* fix scroll and size issues with kills widget (#219)
+
+* fix scroll and size issues with kills widget
+
+## [v1.54.0](https://github.com/wanderer-industries/wanderer/compare/v1.53.4...v1.54.0) (2025-03-05)
+
+
+
+
+### Features:
+
+* added auto-refresh timeout for cloud new version updates
+
+* add selectable sig deletion timing, and color options (#208)
+
+## [v1.53.4](https://github.com/wanderer-industries/wanderer/compare/v1.53.3...v1.53.4) (2025-03-04)
+
+
+
+
+### Bug Fixes:
+
+* add retry on kills retrieval (#207)
+
+* add missing masses to wh sizes const (#215)
+
+## [v1.53.3](https://github.com/wanderer-industries/wanderer/compare/v1.53.2...v1.53.3) (2025-02-27)
+
+
+
+
+### Bug Fixes:
+
+* Map: little bit up performance for windows manager
+
+## [v1.53.2](https://github.com/wanderer-industries/wanderer/compare/v1.53.1...v1.53.2) (2025-02-27)
+
+
+
+
+## [v1.53.1](https://github.com/wanderer-industries/wanderer/compare/v1.53.0...v1.53.1) (2025-02-26)
+
+
+
+
+### Bug Fixes:
+
+* Core: Fixed map ACLs add/remove behaviour
+
+## [v1.53.0](https://github.com/wanderer-industries/wanderer/compare/v1.52.8...v1.53.0) (2025-02-26)
+
+
+
+
+### Features:
+
+* Auto-set connection EOL status and ship size when linking/editing signatures (#194)
+
+* Automatically set connection EOL status and ship size type when linking/updating signatures
+
+## [v1.52.8](https://github.com/wanderer-industries/wanderer/compare/v1.52.7...v1.52.8) (2025-02-26)
+
+
+
+
+### Bug Fixes:
+
+* Map: Added delete systems hotkey
+
+## [v1.52.7](https://github.com/wanderer-industries/wanderer/compare/v1.52.6...v1.52.7) (2025-02-24)
+
+
+
+
+### Bug Fixes:
+
+* update news image link (#204)
+
+* Map: Block map events for old client versions
+
+## [v1.52.6](https://github.com/wanderer-industries/wanderer/compare/v1.52.5...v1.52.6) (2025-02-23)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fixed delete systems on map changes
+
+## [v1.52.5](https://github.com/wanderer-industries/wanderer/compare/v1.52.4...v1.52.5) (2025-02-22)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fixed delete system on signature deletion
+
+* Map: Fixed delete system on signature deletion
+
+## [v1.52.4](https://github.com/wanderer-industries/wanderer/compare/v1.52.3...v1.52.4) (2025-02-21)
+
+
+
+
+### 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)
+
+
+
+
+### Features:
+
+* Added WANDERER_RESTRICT_MAPS_CREATION env support
+
+## [v1.45.5](https://github.com/wanderer-industries/wanderer/compare/v1.45.4...v1.45.5) (2025-02-07)
+
+
+
+
+### Bug Fixes:
+
+* restore styling for local characters list (#152)
+
+## [v1.45.4](https://github.com/wanderer-industries/wanderer/compare/v1.45.3...v1.45.4) (2025-02-07)
+
+
+
+
+### Bug Fixes:
+
+* remove snap to grid customization (#153)
+
+## [v1.45.3](https://github.com/wanderer-industries/wanderer/compare/v1.45.2...v1.45.3) (2025-02-05)
+
+
+
+
+### Bug Fixes:
+
+* color and formatting fixes for local character (#150)
+
+## [v1.45.2](https://github.com/wanderer-industries/wanderer/compare/v1.45.1...v1.45.2) (2025-02-05)
+
+
+
+
+### Bug Fixes:
+
+* fix route list hover and on the map character list (#149)
+
+* correct formatting for on the map character list
+
+* fix hover for route list
+
+## [v1.45.1](https://github.com/wanderer-industries/wanderer/compare/v1.45.0...v1.45.1) (2025-02-05)
+
+
+
+
+### Bug Fixes:
+
+* kill count subscript position on firefox, and remove kill filter for single system (#148)
+
+## [v1.45.0](https://github.com/wanderer-industries/wanderer/compare/v1.44.9...v1.45.0) (2025-02-05)
+
+
+
+
+### Features:
+
+* allow filtering of k-space kills (#147)
+
+## [v1.44.9](https://github.com/wanderer-industries/wanderer/compare/v1.44.8...v1.44.9) (2025-02-04)
+
+
+
+
+### Bug Fixes:
+
+* improve local character header shrink behavior (#146)
+
+## [v1.44.8](https://github.com/wanderer-industries/wanderer/compare/v1.44.7...v1.44.8) (2025-02-04)
+
+
+
+
+### Bug Fixes:
+
+* Core: include external libraries in build
+
+## [v1.44.7](https://github.com/wanderer-industries/wanderer/compare/v1.44.6...v1.44.7) (2025-02-04)
+
+
+
+
+### Bug Fixes:
+
+* Core: include external libraries in build
+
+## [v1.44.6](https://github.com/wanderer-industries/wanderer/compare/v1.44.5...v1.44.6) (2025-02-04)
+
+
+
+
+## [v1.44.5](https://github.com/wanderer-industries/wanderer/compare/v1.44.4...v1.44.5) (2025-02-04)
+
+
+
+
+### Bug Fixes:
+
+* include category param in search cache key (#144)
+
+## [v1.44.4](https://github.com/wanderer-industries/wanderer/compare/v1.44.3...v1.44.4) (2025-02-02)
+
+
+
+
+## [v1.44.3](https://github.com/wanderer-industries/wanderer/compare/v1.44.2...v1.44.3) (2025-02-02)
+
+
+
+
+### Bug Fixes:
+
+* restored kills lightning bolt functionality (#143)
+
+## [v1.44.2](https://github.com/wanderer-industries/wanderer/compare/v1.44.1...v1.44.2) (2025-02-02)
+
+
+
+
 ## [v1.44.1](https://github.com/wanderer-industries/wanderer/compare/v1.44.0...v1.44.1) (2025-02-01)
 
 

README.md

@@ -58,6 +58,7 @@ Now you can visit [`localhost:8000`](http://localhost:8000) from your browser.
 - `root@0d0a785313b6:/app# apt update`
 - `root@0d0a785313b6:/app# curl -sL https://deb.nodesource.com/setup_18.x  | bash -`
 - `root@0d0a785313b6:/app# apt-get install nodejs inotify-tools -y`
+- `root@0d0a785313b6:/app# npm install -g yarn`
 - `root@0d0a785313b6:/app# mix setup`
 
 - See how to run server in #Run section

assets/app.tsx

@@ -1,6 +1,3 @@
-// import '@fontsource-variable/inter'
-// import '@fontsource-variable/jetbrains-mono'
-// import './lib/tailwind/index.css';
 import './css/app.css';
 
 import './lib/phoenix';

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

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

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

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

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

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

assets/js/hooks/Mapper/components/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/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from './useSystemInfo';
 export * from './useGetOwnOnlineCharacters';
+export * from './useElementWidth';

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

@@ -0,0 +1,43 @@
+import { useState, useLayoutEffect, RefObject } from 'react';
+
+/**
+ * useElementWidth
+ *
+ * A custom hook that accepts a ref to an HTML element and returns its current width.
+ * It uses a ResizeObserver and window resize listener to update the width when necessary.
+ *
+ * @param ref - A RefObject pointing to an HTML element.
+ * @returns The current width of the element.
+ */
+export function useElementWidth<T extends HTMLElement>(ref: RefObject<T>): number {
+  const [width, setWidth] = useState<number>(0);
+
+  useLayoutEffect(() => {
+    const updateWidth = () => {
+      if (ref.current) {
+        const newWidth = ref.current.getBoundingClientRect().width;
+        if (newWidth > 0) {
+          setWidth(newWidth);
+        }
+      }
+    };
+
+    updateWidth(); // Initial measurement
+
+    const observer = new ResizeObserver(() => {
+      const id = setTimeout(updateWidth, 100);
+      return () => clearTimeout(id);
+    });
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+    window.addEventListener("resize", updateWidth);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", updateWidth);
+    };
+  }, [ref]);
+
+  return width;
+}

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

@@ -2,7 +2,6 @@ import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect, useMemo }
 import ReactFlow, {
   Background,
   Edge,
-  EdgeChange,
   MiniMap,
   Node,
   NodeChange,
@@ -79,12 +78,12 @@ const edgeTypes = {
   floating: SolarSystemEdge,
 };
 
+export const MAP_ROOT_ID = 'MAP_ROOT_ID';
+
 interface MapCompProps {
   refn: ForwardedRef<MapHandlers>;
   onCommand: OutCommandHandler;
   onSelectionChange: OnMapSelectionChange;
-  onManualDelete(systems: string[]): void;
-  canRemoveConnection?(connectionId: string): boolean;
   onConnectionInfoClick?(e: SolarSystemConnection): void;
   onAddSystem?: OnMapAddSystemCallback;
   onSelectionContextMenu?: NodeSelectionMouseHandler;
@@ -106,7 +105,6 @@ const MapComp = ({
   onSystemContextMenu,
   onConnectionInfoClick,
   onSelectionContextMenu,
-  onManualDelete,
   isShowMinimap,
   showKSpaceBG,
   isThickConnections,
@@ -114,9 +112,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);
 
@@ -128,7 +125,6 @@ const MapComp = ({
   const { variant, gap, size, color } = useBackgroundVars(theme);
   const { isPanAndDrag, nodeComponent, connectionMode } = getBehaviorForTheme(theme || 'default');
 
-  // You can create nodeTypes dynamically based on the node component
   const nodeTypes = useMemo(() => {
     return {
       custom: nodeComponent,
@@ -190,8 +186,6 @@ const MapComp = ({
 
   const handleNodesChange = useCallback(
     (changes: NodeChange[]) => {
-      const systemsIdsToRemove: string[] = [];
-
       // prevents single node deselection on background / same node click
       // allows deseletion of all nodes if multiple are currently selected
       if (changes.length === 1 && changes[0].type == 'select' && changes[0].selected === false) {
@@ -199,64 +193,12 @@ const MapComp = ({
       }
 
       const nextChanges = changes.reduce((acc, change) => {
-        if (change.type !== 'remove') {
-          return [...acc, change];
-        }
-
-        const node = getNode(change.id);
-        if (!node) {
-          return [...acc, change];
-        }
-
-        if (node.data.locked) {
-          return acc;
-        }
-
-        systemsIdsToRemove.push(node.data.id);
         return [...acc, change];
       }, [] as NodeChange[]);
 
-      if (systemsIdsToRemove.length > 0) {
-        onManualDelete(systemsIdsToRemove);
-      }
-
       onNodesChange(nextChanges);
     },
-    [getNode, getNodes, onManualDelete, onNodesChange],
-  );
-
-  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);
-    },
-    [getEdge, getNode, onEdgesChange],
+    [getNodes, onNodesChange],
   );
 
   useEffect(() => {
@@ -269,12 +211,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
@@ -313,7 +258,7 @@ const MapComp = ({
           minZoom={0.2}
           maxZoom={1.5}
           elevateNodesOnSelect
-          deleteKeyCode={['Delete']}
+          deleteKeyCode={['']}
           {...(isPanAndDrag
             ? {
                 selectionOnDrag: true,

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

@@ -37,6 +37,7 @@ const INITIAL_DATA: MapData = {
   userPermissions: {},
   systemSignatures: {} as Record<string, SystemSignature[]>,
   options: {} as Record<string, string | boolean>,
+  isSubscriptionActive: false,
 };
 
 export interface MapContextProps {
@@ -52,7 +53,7 @@ const MapContext = createContext<MapContextProps>({
   outCommand: async () => void 0,
 });
 
-export const MapProvider: React.FC<MapProviderProps> = ({ children, onCommand }) => {
+export const MapProvider = ({ children, onCommand }: MapProviderProps) => {
   const { update, ref } = useContextStore<MapData>({ ...INITIAL_DATA });
 
   return (

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

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

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

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

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

@@ -0,0 +1,48 @@
+.KillsBookmark {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 8px;
+    font-weight: 700;
+    border: 0;
+    border-radius: 5px 5px 0 0;
+    padding: 4px 3px;
+
+  }
+  
+.KillsBookmarkWithIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: -2px;
+    text-shadow: 0 0 3px #000;
+    padding-right: 2px;
+    height: 8px;
+    font-size: 8px;
+    line-height: 12px;
+    font-weight: 700;
+    text-size-adjust: 100%;
+
+    .pi {
+        font-size: 9px;
+    }
+
+    .text {
+        font-size: 9px;
+        font-family: var(--rf-node-font-family, inherit) !important;
+        font-weight: var(--rf-node-font-weight, inherit) !important;
+    }
+}
+
+.TooltipContainer {
+    background-color: #1a1a1a;
+    color: #fff;
+    padding: 3px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    border-radius: 2px;
+    pointer-events: auto;
+    max-width: 500px;
+    max-height: 300px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }

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

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

@@ -0,0 +1,61 @@
+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 { 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>;
+  hasUserCharacters: boolean;
+  showIcon?: boolean;
+}
+
+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: '100%',
+          minWidth: '300px',
+          overflow: 'hidden',
+        }}
+      >
+        <LocalCharactersList items={localCounterCharacters} itemTemplate={itemTemplate} itemSize={26} autoSize={true} />
+      </div>
+    );
+  }, [localCounterCharacters, itemTemplate]);
+
+  if (localCounterCharacters.length === 0) {
+    return null;
+  }
+
+  return (
+    <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

@@ -2,34 +2,30 @@
 
 $pastel-blue: #5a7d9a;
 $pastel-pink: #d291bc;
-$pastel-green: #88b04b;
-$pastel-yellow: #ffdd59;
 $dark-bg: #2d2d2d;
 $text-color: #ffffff;
 $tooltip-bg: #202020;
 
-$node-bg-color: #202020;
-$node-soft-bg-color: #202020;
-$text-color: #ffffff;
-$tag-color:  #38BDF8;
-$region-name: #D6D3D1;
-$custom-name: #93C5FD;
-
 .RootCustomNode {
   display: flex;
   width: 130px;
   height: 34px;
 
+  font-family: var(--rf-node-font-family, inherit) !important;
+  font-weight: var(--rf-node-font-weight, inherit) !important;
+
   flex-direction: column;
   padding: 2px 6px;
   font-size: 10px;
 
-  background-color: $tooltip-bg;
+  background-color: var(--rf-node-bg-color, #202020) !important;
+  color: var(--rf-text-color, #ffffff);
+
   box-shadow: 0 0 5px rgba($dark-bg, 0.5);
   border: 1px solid darken($pastel-blue, 10%);
   border-radius: 5px;
   position: relative;
-  z-index: 1;
+  z-index: 3;
   overflow: hidden;
 
   &.Mataria,
@@ -92,21 +88,9 @@ $custom-name: #93C5FD;
     box-shadow: 0 0 10px #9a1af1c2;
   }
 
-  &.tooltip {
-    background-color: $tooltip-bg;
-    color: $text-color;
-    padding: 5px 10px;
-    border-radius: 3px;
-    border: 1px solid $pastel-pink;
-  }
-
   &.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);
     }
@@ -114,11 +98,7 @@ $custom-name: #93C5FD;
 
   &.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);
     }
@@ -133,27 +113,15 @@ $custom-name: #93C5FD;
   }
 
   &.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);
   }
 }
 
@@ -178,8 +146,6 @@ $custom-name: #93C5FD;
     padding-left: 3px;
     padding-right: 3px;
 
-    //background-color: #833ca4;
-
     &:not(:first-child) {
       box-shadow: inset 4px -3px 4px rgba(0, 0, 0, 0.3);
     }
@@ -266,26 +232,17 @@ $custom-name: #93C5FD;
 
   .TagTitle {
     font-size: 11px;
-    font-weight: medium;
+    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 */
   @-moz-document url-prefix() {
     .classSystemName {
-      font-family: inherit !important;
       font-weight: bold;
     }
   }
-
-  .classSystemName {
-    //font-weight: bold;
-  }
-
-  .solarSystemName {
-  }
 }
 
 .BottomRow {
@@ -294,22 +251,23 @@ $custom-name: #93C5FD;
   align-items: center;
   height: 19px;
 
-  .localCounter {
-    display: flex;
-    //align-items: center;
-    gap: 2px;
-
-    & > i {
-      position: relative;
-      top: 1px;
+  .hasLocalCounter {
+    margin-right: 2px;
+    &.countAbove9 {
+      margin-right: 1.5rem;
     }
+  }
 
-    & > span {
-      font-size: 9px;
-      line-height: 9px;
-      font-weight: 500;
-      //margin-top: 1px;
-    }
+  .lockIcon {
+    font-size: 0.45rem;
+    font-weight: bold;
+    position: relative;
+  }
+
+  .mapMarker {
+    font-size: 0.45rem;
+    font-weight: bold;
+    position: relative;
   }
 }
 
@@ -340,7 +298,8 @@ $custom-name: #93C5FD;
 
 .Handlers {
   position: absolute;
-  z-index: 2;
+  z-index: 4;
+  pointer-events: none;
   top: 0;
   left: 0;
   width: 100%;
@@ -353,6 +312,7 @@ $custom-name: #93C5FD;
   border: 1px solid $pastel-blue;
   width: 5px;
   height: 5px;
+  pointer-events: auto;
 
   &.selected {
     border-color: $pastel-pink;

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

@@ -1,20 +1,24 @@
 import { memo } from 'react';
 import { MapSolarSystemType } from '../../map.types';
-import { Handle, Position, NodeProps } from 'reactflow';
+import { Handle, NodeProps, Position } from 'reactflow';
 import clsx from 'clsx';
 import classes from './SolarSystemNodeDefault.module.scss';
 import { PrimeIcons } from 'primereact/api';
-import { useSolarSystemNode } from '../../hooks/useSolarSystemNode';
+import { useLocalCounter, useSolarSystemNode, useNodeKillsCount } from '../../hooks';
 import {
+  EFFECT_BACKGROUND_STYLES,
   MARKER_BOOKMARK_BG_STYLES,
   STATUS_CLASSES,
-  EFFECT_BACKGROUND_STYLES,
 } from '@/hooks/Mapper/components/map/constants';
 import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/WormholeClassComp';
 import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
+import { LocalCounter } from './SolarSystemLocalCounter';
+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 (
     <>
@@ -22,7 +26,7 @@ export const SolarSystemNodeDefault = 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>
           )}
 
@@ -32,13 +36,19 @@ export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>
             </div>
           )}
 
-          {nodeVars.killsCount && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!])}>
+          {localKillsCount && localKillsCount > 0 && nodeVars.solarSystemId && (
+            <KillsCounter
+              killsCount={localKillsCount}
+              systemId={nodeVars.solarSystemId}
+              size="lg"
+              killsActivityType={nodeVars.killsActivityType}
+              className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!])}
+            >
               <div className={clsx(classes.BookmarkWithIcon)}>
                 <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
                 <span className={clsx(classes.text)}>{nodeVars.killsCount}</span>
               </div>
-            </div>
+            </KillsCounter>
           )}
 
           {nodeVars.labelsInfo.map(x => (
@@ -53,11 +63,10 @@ export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>
         className={clsx(
           classes.RootCustomNode,
           nodeVars.regionClass && classes[nodeVars.regionClass],
-          classes[STATUS_CLASSES[nodeVars.status]],
-          {
-            [classes.selected]: nodeVars.selected,
-          },
+          nodeVars.status !== undefined ? classes[STATUS_CLASSES[nodeVars.status]] : '',
+          { [classes.selected]: nodeVars.selected },
         )}
+        onMouseDownCapture={e => nodeVars.dbClick(e)}
       >
         {nodeVars.visible && (
           <>
@@ -88,7 +97,7 @@ export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>
               {nodeVars.isWormhole && (
                 <div className={classes.statics}>
                   {nodeVars.sortedStatics.map(whClass => (
-                    <WormholeClassComp key={whClass} id={whClass} />
+                    <WormholeClassComp key={String(whClass)} id={String(whClass)} />
                   ))}
                 </div>
               )}
@@ -113,27 +122,18 @@ export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>
 
               {nodeVars.isWormhole && !nodeVars.customName && <div />}
 
-              <div className="flex items-center justify-end">
-                <div className="flex gap-1 items-center">
-                  {nodeVars.locked && (
-                    <i className={PrimeIcons.LOCK} style={{ fontSize: '0.45rem', fontWeight: 'bold' }} />
-                  )}
-
-                  {nodeVars.hubs.includes(nodeVars.solarSystemId.toString()) && (
-                    <i className={PrimeIcons.MAP_MARKER} style={{ fontSize: '0.45rem', fontWeight: 'bold' }} />
-                  )}
-
-                  {nodeVars.charactersInSystem.length > 0 && (
-                    <div
-                      className={clsx(classes.localCounter, {
-                        ['text-amber-300']: nodeVars.hasUserCharacters,
-                      })}
-                    >
-                      <i className="pi pi-users" style={{ fontSize: '0.50rem' }} />
-                      <span className="font-sans">{nodeVars.charactersInSystem.length}</span>
-                    </div>
+              <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>
           </>
@@ -145,7 +145,7 @@ export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>
           {nodeVars.unsplashedLeft.length > 0 && (
             <div className={classes.Unsplashed}>
               {nodeVars.unsplashedLeft.map(sig => (
-                <UnsplashedSignature key={sig.sig_id} signature={sig} />
+                <UnsplashedSignature key={sig.eve_id} signature={sig} />
               ))}
             </div>
           )}
@@ -153,14 +153,14 @@ export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>
           {nodeVars.unsplashedRight.length > 0 && (
             <div className={clsx(classes.Unsplashed, classes['Unsplashed--right'])}>
               {nodeVars.unsplashedRight.map(sig => (
-                <UnsplashedSignature key={sig.sig_id} signature={sig} />
+                <UnsplashedSignature key={sig.eve_id} signature={sig} />
               ))}
             </div>
           )}
         </>
       )}
 
-      <div onMouseDownCapture={nodeVars.dbClick} className={classes.Handlers}>
+      <div className={classes.Handlers}>
         <Handle
           type="source"
           className={clsx(classes.Handle, classes.HandleTop, {

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

@@ -1,91 +1,20 @@
 @import './SolarSystemNodeDefault.module.scss';
 
-/* ---------------------------
-   Only override what's different
---------------------------- */
+/* ---------------------------------------------
+   Only override what's different from the base
+   Currently none required
+---------------------------------------------- */
 
-/* 1) .RootCustomNode:
-   - new background-color using CSS var
-   - plus color, font-family, and font-weight */
 .RootCustomNode {
-  background-color: var(--rf-node-bg-color, #202020) !important;
-  color: var(--rf-text-color, #ffffff);
-  font-family: var(--rf-node-font-family, inherit) !important;
-  font-weight: var(--rf-node-font-weight, inherit) !important;
-}
-
-/* 2) .Bookmarks:
-   - add var-based font family/weight
-*/
-.Bookmarks {
-  font-family: var(--rf-node-font-family, inherit) !important;
-  font-weight: var(--rf-node-font-weight, inherit) !important;
-}
-
-/* 3) .HeadRow, .classTitle, .classSystemName:
-   - add new references to var-based font family/weight
-*/
-.HeadRow {
-  font-family: var(--rf-node-font-family, inherit) !important;
-  font-weight: var(--rf-node-font-weight, inherit) !important;
-
-  .classTitle {
-    font-family: var(--rf-node-font-family, inherit) !important;
-    font-weight: var(--rf-node-font-weight, inherit) !important;
-  }
-
-  @-moz-document url-prefix() {
-    .classSystemName {
-      font-family: var(--rf-node-font-family, inherit) !important;
-      font-weight: var(--rf-node-font-weight, inherit) !important;
-    }
-  }
-
-  .classSystemName {
-    font-family: var(--rf-node-font-family, inherit) !important;
-    font-weight: var(--rf-node-font-weight, inherit) !important;
-  }
-}
-
-/* 4) .BottomRow:
-   - introduces .tagTitle, .regionName, .customName, .localCounter
-     referencing new CSS variables */
-.BottomRow {
-  font-family: var(--rf-node-font-family, inherit) !important;
-  font-weight: var(--rf-node-font-weight, inherit) !important;
-
-  .tagTitle {
-    font-size: 11px;
-    font-weight: medium;
-    text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
-    font-family: var(--rf-node-font-family, inherit) !important;
-    font-weight: var(--rf-node-font-weight, inherit) !important;
-    color: var(--rf-tag-color, #38BDF8);
-  }
-
-  .regionName {
-    color: var(--rf-region-name, #D6D3D1);
-    font-family: var(--rf-node-font-family, inherit) !important;
-    font-weight: var(--rf-node-font-weight, inherit) !important;
-  }
-
-  .customName {
-    color: var(--rf-custom-name, #93C5FD);
-    font-family: var(--rf-node-font-family, inherit) !important;
-    font-weight: var(--rf-node-font-weight, inherit) !important;
-  }
-
-  .localCounter {
-    display: flex;
-    color: var(--rf-has-user-characters, #fbbf24);
-    font-family: var(--rf-node-font-family, inherit) !important;
-    font-weight: var(--rf-node-font-weight, inherit) !important;
-    gap: 2px;
-
-    .hasUserCharacters {
-      color: var(--rf-has-user-characters, #fbbf24);
-      font-family: var(--rf-node-font-family, inherit) !important;
-      font-weight: var(--rf-node-font-weight, inherit) !important;
+  &.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

@@ -1,20 +1,24 @@
 import { memo } from 'react';
 import { MapSolarSystemType } from '../../map.types';
-import { Handle, Position, NodeProps } from 'reactflow';
+import { Handle, NodeProps, Position } from 'reactflow';
 import clsx from 'clsx';
 import classes from './SolarSystemNodeTheme.module.scss';
 import { PrimeIcons } from 'primereact/api';
-import { useSolarSystemNode } from '../../hooks/useSolarSystemNode';
+import { useLocalCounter, useNodeKillsCount, useSolarSystemNode } from '../../hooks';
 import {
+  EFFECT_BACKGROUND_STYLES,
   MARKER_BOOKMARK_BG_STYLES,
   STATUS_CLASSES,
-  EFFECT_BACKGROUND_STYLES,
 } from '@/hooks/Mapper/components/map/constants';
 import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/WormholeClassComp';
 import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
+import { LocalCounter } from './SolarSystemLocalCounter';
+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 (
     <>
@@ -22,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>
           )}
 
@@ -32,13 +36,19 @@ export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>)
             </div>
           )}
 
-          {nodeVars.killsCount && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!])}>
+          {localKillsCount && localKillsCount > 0 && nodeVars.solarSystemId && (
+            <KillsCounter
+              killsCount={localKillsCount}
+              systemId={nodeVars.solarSystemId}
+              size="lg"
+              killsActivityType={nodeVars.killsActivityType}
+              className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!])}
+            >
               <div className={clsx(classes.BookmarkWithIcon)}>
                 <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
                 <span className={clsx(classes.text)}>{nodeVars.killsCount}</span>
               </div>
-            </div>
+            </KillsCounter>
           )}
 
           {nodeVars.labelsInfo.map(x => (
@@ -53,11 +63,10 @@ export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>)
         className={clsx(
           classes.RootCustomNode,
           nodeVars.regionClass && classes[nodeVars.regionClass],
-          classes[STATUS_CLASSES[nodeVars.status]],
-          {
-            [classes.selected]: nodeVars.selected,
-          },
+          nodeVars.status !== undefined ? classes[STATUS_CLASSES[nodeVars.status]] : '',
+          { [classes.selected]: nodeVars.selected },
         )}
+        onMouseDownCapture={e => nodeVars.dbClick(e)}
       >
         {nodeVars.visible && (
           <>
@@ -88,7 +97,7 @@ export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>)
               {nodeVars.isWormhole && (
                 <div className={classes.statics}>
                   {nodeVars.sortedStatics.map(whClass => (
-                    <WormholeClassComp key={whClass} id={whClass} />
+                    <WormholeClassComp key={String(whClass)} id={String(whClass)} />
                   ))}
                 </div>
               )}
@@ -123,27 +132,18 @@ export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>)
 
               {nodeVars.isWormhole && !nodeVars.customName && <div />}
 
-              <div className="flex items-center justify-end">
-                <div className="flex gap-1 items-center">
-                  {nodeVars.locked && (
-                    <i className={PrimeIcons.LOCK} style={{ fontSize: '0.45rem', fontWeight: 'bold' }} />
-                  )}
-
-                  {nodeVars.hubs.includes(nodeVars.solarSystemId.toString()) && (
-                    <i className={PrimeIcons.MAP_MARKER} style={{ fontSize: '0.45rem', fontWeight: 'bold' }} />
-                  )}
-
-                  {nodeVars.charactersInSystem.length > 0 && (
-                    <div
-                      className={clsx(classes.localCounter, {
-                        [classes.hasUserCharacters]: nodeVars.hasUserCharacters,
-                      })}
-                    >
-                      <i className="pi pi-users" style={{ fontSize: '0.50rem' }} />
-                      <span className="font-sans">{nodeVars.charactersInSystem.length}</span>
-                    </div>
+              <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>
           </>
@@ -155,7 +155,7 @@ export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>)
           {nodeVars.unsplashedLeft.length > 0 && (
             <div className={classes.Unsplashed}>
               {nodeVars.unsplashedLeft.map(sig => (
-                <UnsplashedSignature key={sig.sig_id} signature={sig} />
+                <UnsplashedSignature key={sig.eve_id} signature={sig} />
               ))}
             </div>
           )}
@@ -163,14 +163,14 @@ export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>)
           {nodeVars.unsplashedRight.length > 0 && (
             <div className={clsx(classes.Unsplashed, classes['Unsplashed--right'])}>
               {nodeVars.unsplashedRight.map(sig => (
-                <UnsplashedSignature key={sig.sig_id} signature={sig} />
+                <UnsplashedSignature key={sig.eve_id} signature={sig} />
               ))}
             </div>
           )}
         </>
       )}
 
-      <div onMouseDownCapture={nodeVars.dbClick} className={classes.Handlers}>
+      <div className={classes.Handlers}>
         <Handle
           type="source"
           className={clsx(classes.Handle, classes.HandleTop, {

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

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

assets/js/hooks/Mapper/components/map/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/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/useBackgroundVars.ts

@@ -6,6 +6,7 @@ export function useBackgroundVars(themeName?: string) {
   const [gap, setGap] = useState<number>(16);
   const [size, setSize] = useState<number>(1);
   const [color, setColor] = useState('#81818b');
+  const [snapSize, setSnapSize] = useState<number>(25);
 
   useEffect(() => {
     // match any element whose entire `class` attribute ends with "-theme"
@@ -29,16 +30,19 @@ export function useBackgroundVars(themeName?: string) {
 
     const cssVarGap = style.getPropertyValue('--rf-bg-gap');
     const cssVarSize = style.getPropertyValue('--rf-bg-size');
+    const cssVarSnapSize = style.getPropertyValue('--rf-snap-size');
     const cssColor = style.getPropertyValue('--rf-bg-pattern-color');
 
     const gapNum = parseInt(cssVarGap, 10) || 16;
     const sizeNum = parseInt(cssVarSize, 10) || 1;
+    const snapSize = parseInt(cssVarSnapSize, 10) || 25; //react-flow default
 
     setVariant(finalVariant);
     setGap(gapNum);
     setSize(sizeNum);
     setColor(cssColor);
+    setSnapSize(snapSize);
   }, [themeName]);
 
-  return { variant, gap, size, color };
+  return { variant, gap, size, color, snapSize };
 }

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

@@ -0,0 +1,43 @@
+import { useMemo } from 'react';
+import { useSystemKills } from '../../mapInterface/widgets/SystemKills/hooks/useSystemKills';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+
+interface UseKillsCounterProps {
+  realSystemId: string;
+}
+
+export function useKillsCounter({ realSystemId }: UseKillsCounterProps) {
+  const { data: mapData, outCommand } = useMapRootState();
+  const { systems } = mapData;
+
+  const systemNameMap = useMemo(() => {
+    const m: Record<string, string> = {};
+    systems.forEach(sys => {
+      m[sys.id] = sys.temporary_name || sys.name || '???';
+    });
+    return m;
+  }, [systems]);
+
+  const { kills: allKills, isLoading } = useSystemKills({
+    systemId: realSystemId,
+    outCommand,
+    showAllVisible: false,
+  });
+
+  const filteredKills = useMemo(() => {
+    if (!allKills || allKills.length === 0) return [];
+
+    // 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 {
+    isLoading,
+    kills: filteredKills,
+    systemNameMap,
+  };
+}

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

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

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

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

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

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

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

@@ -7,13 +7,14 @@ 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 } from '@/hooks/Mapper/types';
-import { LABELS_INFO, LABELS_ORDER } from '@/hooks/Mapper/components/map/constants';
+import { CharacterTypeRaw, OutCommand, SystemSignature } from '@/hooks/Mapper/types';
+import { useUnsplashedSignatures } from './useUnsplashedSignatures';
+import { useSystemName } from './useSystemName';
+import { LabelInfo, useLabelsInfo } from './useLabelsInfo';
 
-function getActivityType(count: number) {
+function getActivityType(count: number): string {
   if (count <= 5) return 'activityNormal';
   if (count <= 30) return 'activityWarn';
   return 'activityDanger';
@@ -26,12 +27,20 @@ const SpaceToClass: Record<string, string> = {
   [Spaces.Gallente]: 'Gallente',
 };
 
-function sortedLabels(labels: string[]) {
-  if (!labels) return [];
-  return LABELS_ORDER.filter(x => labels.includes(x)).map(x => LABELS_INFO[x]);
+export function useLocalCounter(nodeVars: SolarSystemNodeVars) {
+  const localCounterCharacters = useMemo(() => {
+    return nodeVars.charactersInSystem
+      .map(char => ({
+        ...char,
+        compact: true,
+        isOwn: nodeVars.userCharacters.includes(char.eve_id),
+      }))
+      .sort((a, b) => a.name.localeCompare(b.name));
+  }, [nodeVars.charactersInSystem, nodeVars.userCharacters]);
+  return { localCounterCharacters };
 }
 
-export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>) {
+export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarSystemNodeVars {
   const { id, data, selected } = props;
   const {
     system_static_info,
@@ -71,7 +80,6 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>) {
   const {
     data: {
       characters,
-      presentCharacters,
       wormholesData,
       hubs,
       kills,
@@ -87,15 +95,14 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>) {
 
   const visible = useMemo(() => visibleNodes.has(id), [id, visibleNodes]);
 
-  const systemSignatures = useMemo(
+  const systemSigs = useMemo(
     () => mapSystemSignatures[solar_system_id] || system_signatures,
     [system_signatures, solar_system_id, mapSystemSignatures],
   );
 
   const charactersInSystem = useMemo(() => {
-    return characters.filter(c => c.location?.solar_system_id === solar_system_id).filter(c => c.online);
-    // eslint-disable-next-line
-  }, [characters, presentCharacters, solar_system_id]);
+    return characters.filter(c => c.location?.solar_system_id === solar_system_id && c.online);
+  }, [characters, solar_system_id]);
 
   const isWormhole = isWormholeSpace(system_class);
 
@@ -108,21 +115,19 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>) {
 
   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({
@@ -134,54 +139,31 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>) {
   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 temporaryName = useMemo(() => {
-    if (!isTempSystemNameEnabled) {
-      return '';
-    }
+  const { systemName, computedTemporaryName, customName } = useSystemName({
+    isTempSystemNameEnabled,
+    temporary_name,
+    solar_system_name: solar_system_name || '',
+    isShowLinkedSigIdTempName,
+    linkedSigPrefix,
+    name,
+  });
 
-    if (isShowLinkedSigIdTempName && linkedSigPrefix) {
-      return temporary_name ? `${linkedSigPrefix}・${temporary_name}` : `${linkedSigPrefix}・${solar_system_name}`;
-    }
+  const { unsplashedLeft, unsplashedRight } = useUnsplashedSignatures(systemSigs, isShowUnsplashedSignatures);
 
-    return temporary_name;
-  }, [isShowLinkedSigIdTempName, isTempSystemNameEnabled, linkedSigPrefix, solar_system_name, temporary_name]);
+  const hubsAsStrings = useMemo(() => hubs.map(item => item.toString()), [hubs]);
 
-  const systemName = useMemo(() => {
-    if (isTempSystemNameEnabled && temporaryName) {
-      return temporaryName;
-    }
-    return solar_system_name;
-  }, [isTempSystemNameEnabled, solar_system_name, temporaryName]);
-
-  const customName = (isTempSystemNameEnabled && temporaryName && name) || (solar_system_name !== name && name) || null;
-
-  const [unsplashedLeft, unsplashedRight] = useMemo(() => {
-    if (!isShowUnsplashedSignatures) {
-      return [[], []];
-    }
-    return prepareUnsplashedChunks(
-      systemSignatures
-        .filter(s => s.group === 'Wormhole' && !s.linked_system)
-        .map(s => ({
-          eve_id: s.eve_id,
-          type: s.type,
-          custom_info: s.custom_info,
-        })),
-    );
-  }, [isShowUnsplashedSignatures, systemSignatures]);
-
-  const nodeVars = {
+  const nodeVars: SolarSystemNodeVars = {
     id,
     selected,
-
     visible,
     isWormhole,
     classTitleColor,
     killsCount,
     killsActivityType,
     hasUserCharacters,
+    userCharacters,
     showHandlers,
     regionClass,
     systemName,
@@ -194,12 +176,10 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>) {
     dbClick,
     sortedStatics,
     effectName: effect_name,
-    regionName: region_name,
-    solarSystemId: solar_system_id,
-    solarSystemName: solar_system_name,
+    solarSystemId: solar_system_id.toString(),
     locked,
-    hubs,
-    name: name,
+    hubs: hubsAsStrings,
+    name,
     isConnecting,
     hoverNodeId,
     charactersInSystem,
@@ -207,7 +187,9 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>) {
     unsplashedRight,
     isThickConnections,
     classTitle: class_title,
-    temporaryName: temporary_name,
+    temporaryName: computedTemporaryName,
+    regionName: region_name,
+    solarSystemName: solar_system_name,
   };
 
   return nodeVars;
@@ -230,24 +212,22 @@ export interface SolarSystemNodeVars {
   isShattered: boolean;
   tag?: string | null;
   status?: number;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  labelsInfo: Array<any>;
-  dbClick: (event?: void) => void;
+  labelsInfo: LabelInfo[];
+  dbClick: (event: React.MouseEvent<HTMLDivElement>) => void;
   sortedStatics: Array<string | number>;
   effectName: string | null;
   regionName: string | null;
-  solarSystemId: number;
+  solarSystemId: string;
   solarSystemName: string | null;
   locked: boolean;
-  hubs: string[] | number[];
+  hubs: string[];
   name: string | null;
   isConnecting: boolean;
   hoverNodeId: string | null;
   charactersInSystem: Array<CharacterTypeRaw>;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  unsplashedLeft: Array<any>;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  unsplashedRight: Array<any>;
+  userCharacters: string[];
+  unsplashedLeft: Array<SystemSignature>;
+  unsplashedRight: Array<SystemSignature>;
   isThickConnections: boolean;
   classTitle: string | null;
   temporaryName?: string | null;

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

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

@@ -11,7 +11,8 @@
   --rf-tag-color:  #38BDF8;
   --rf-region-name: #D6D3D1;
   --rf-custom-name: #93C5FD;
-
+  --rf-node-font-family: 'Shentox', 'Rogan', sans-serif !important;
+  --rf-node-font-weight: 500;
 
   --rf-bg-variant: "dots";
   --rf-bg-gap: 15;
@@ -28,4 +29,8 @@
   --tooltip-bg: #202020;
 
   --window-corner: #72716f;
+
+  --rf-local-counter-font-weight: 500;
+  --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,24 +2,31 @@
 @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;
   --rf-soft-bg-color: #282828;
-
-  --rf-node-bg-color: #202020;
   --rf-node-soft-bg-color: #313335;
   --rf-node-font-weight: bold;
   --rf-text-color: #adadad;
   --rf-region-name: var(--rf-text-color);
   --rf-custom-name: var(--rf-text-color);
-
-  --tooltip-bg: #202020;
-
   --rf-bg-variant: "lines";
-  --rf-bg-gap: 32;
-  --rf-bg-size: 1;
+  --rf-bg-gap: 34;
+  --rf-snap-size: 17;
   --rf-bg-pattern-color: #313131;
+  --rf-local-counter-font-weight: 700;
 
+  /* Additional node-specific overrides */
+  --rf-node-line-height: normal;
+  --rf-node-font-family: 'Oxygen', sans-serif;
+  --rf-tag-color: #fbbf24;
+
+  /* -- theme-specific variables -- */
   --eve-effect-pulsar: #428bca;
   --eve-effect-magnetar: #e06fdf;
   --eve-effect-wolfRayet: #e28a0d;
@@ -39,13 +46,9 @@
   --eve-wh-type-color-c13: #7986cb;
   --eve-wh-type-color-drifter: #44aa82;
 
-  --rf-node-font-weight: bold;
-  --rf-node-line-height: normal;
-  --rf-node-font-family: 'Oxygen', sans-serif;
-  --rf-node-text-color: var(--pf-text-color);
+  --rf-node-local-counter: #5cb85c;
+  --rf-has-user-characters: #ffc75d;
 
-  --rf-tag-color: #fbbf24;
-  --rf-has-user-characters: #5cb85c;
-
-  --window-corner: #72716f;
+  --eve-solar-system-status-home:                #{$homeAlpha};
+  --eve-solar-system-status-color-home:          #{$homeBase};
 }

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

@@ -1,5 +1,3 @@
-import 'react-grid-layout/css/styles.css';
-import 'react-resizable/css/styles.css';
 import { useMemo } from 'react';
 import { WindowManager } from '@/hooks/Mapper/components/ui-kit/WindowManager';
 import { DEFAULT_WIDGETS } from '@/hooks/Mapper/components/mapInterface/constants.tsx';

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,13 +1,3 @@
 .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/LocalCharacters.tsx

@@ -1,130 +1,71 @@
-import { useCallback, useMemo, useRef } from 'react';
+import { useMemo } from 'react';
 import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
-import clsx from 'clsx';
-import classes from './LocalCharacters.module.scss';
-import { CharacterTypeRaw, WithIsOwnCharacter } from '@/hooks/Mapper/types';
-import { CharacterCard, LayoutEventBlocker, WdCheckbox } from '@/hooks/Mapper/components/ui-kit';
-import { sortCharacters } from '@/hooks/Mapper/components/mapInterface/helpers/sortCharacters.ts';
-import useLocalStorageState from 'use-local-storage-state';
+import { sortCharacters } from '@/hooks/Mapper/components/mapInterface/helpers/sortCharacters';
 import { useMapCheckPermissions, useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
-import { UserPermission } from '@/hooks/Mapper/types/permissions.ts';
-import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
-import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
-
-type CharItemProps = {
-  compact: boolean;
-} & CharacterTypeRaw &
-  WithIsOwnCharacter;
-
-const useItemTemplate = () => {
-  const {
-    data: { presentCharacters },
-  } = useMapRootState();
-
-  return useCallback(
-    (char: CharItemProps, options: VirtualScrollerTemplateOptions) => {
-      return (
-        <div
-          className={clsx(classes.CharacterRow, 'w-full box-border', {
-            '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' }}
-        >
-          <CharacterCard showShipName {...char} />
-        </div>
-      );
-    },
-    // eslint-disable-next-line
-    [presentCharacters],
-  );
-};
-
-type WindowLocalSettingsType = {
-  compact: boolean;
-  showOffline: boolean;
-  version: number;
-};
-
-const STORED_DEFAULT_VALUES: WindowLocalSettingsType = {
-  compact: true,
-  showOffline: false,
-  version: 0,
-};
+import { UserPermission } from '@/hooks/Mapper/types/permissions';
+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 {
-    data: { characters, userCharacters, selectedSystems, presentCharacters },
+    data: { characters, userCharacters, selectedSystems },
   } = useMapRootState();
 
-  const [settings, setSettings] = useLocalStorageState<WindowLocalSettingsType>('window:local:settings', {
-    defaultValue: STORED_DEFAULT_VALUES,
-  });
-
+  const [settings, setSettings] = useLocalCharacterWidgetSettings();
   const [systemId] = selectedSystems;
-
   const restrictOfflineShowing = useMapGetOption('restrict_offline_showing');
   const isAdminOrManager = useMapCheckPermissions([UserPermission.MANAGE_MAP]);
-
   const showOffline = useMemo(
     () => !restrictOfflineShowing || isAdminOrManager,
     [isAdminOrManager, restrictOfflineShowing],
   );
 
-  const itemTemplate = useItemTemplate();
-
   const sorted = useMemo(() => {
-    const sorted = characters
+    const filtered = characters
       .filter(x => x.location?.solar_system_id?.toString() === systemId)
-      .map(x => ({ ...x, isOwn: userCharacters.includes(x.eve_id), compact: settings.compact }))
+      .map(x => ({
+        ...x,
+        isOwn: userCharacters.includes(x.eve_id),
+        compact: settings.compact,
+        showShipName: settings.showShipName,
+      }))
       .sort(sortCharacters);
 
     if (!showOffline || !settings.showOffline) {
-      return sorted.filter(c => c.online);
+      return filtered.filter(c => c.online);
     }
-
-    return sorted;
-    // eslint-disable-next-line
-  }, [showOffline, characters, settings.showOffline, settings.compact, systemId, userCharacters, presentCharacters]);
+    return filtered;
+  }, [
+    characters,
+    systemId,
+    userCharacters,
+    settings.compact,
+    settings.showOffline,
+    settings.showShipName,
+    showOffline,
+  ]);
 
   const isNobodyHere = sorted.length === 0;
   const isNotSelectedSystem = selectedSystems.length !== 1;
   const showList = sorted.length > 0 && selectedSystems.length === 1;
 
-  const ref = useRef<HTMLDivElement>(null);
-  const compact = useMaxWidth(ref, 145);
+  const itemTemplate = useLocalCharactersItemTemplate(settings.showShipName);
 
   return (
     <Widget
       label={
-        <div className="flex justify-between items-center text-xs w-full" ref={ref}>
-          <span className="select-none">Local{showList ? ` [${sorted.length}]` : ''}</span>
-          <LayoutEventBlocker className="flex items-center gap-2">
-            {showOffline && (
-              <WdTooltipWrapper content="Show offline characters in system">
-                <WdCheckbox
-                  size="xs"
-                  labelSide="left"
-                  label={compact ? '' : 'Show offline'}
-                  value={settings.showOffline}
-                  classNameLabel="text-stone-400 hover:text-stone-200 transition duration-300"
-                  onChange={() => setSettings(() => ({ ...settings, showOffline: !settings.showOffline }))}
-                />
-              </WdTooltipWrapper>
-            )}
-
-            <span
-              className={clsx('w-4 h-4 cursor-pointer', {
-                ['hero-bars-2']: settings.compact,
-                ['hero-bars-3']: !settings.compact,
-              })}
-              onClick={() => setSettings(() => ({ ...settings, compact: !settings.compact }))}
-            ></span>
-          </LayoutEventBlocker>
-        </div>
+        <LocalCharactersHeader
+          sortedCount={sorted.length}
+          showList={showList}
+          showOffline={showOffline}
+          settings={settings}
+          setSettings={setSettings}
+        />
       }
     >
       {isNotSelectedSystem && (
@@ -132,23 +73,20 @@ export const LocalCharacters = () => {
           System is not selected
         </div>
       )}
-
       {isNobodyHere && !isNotSelectedSystem && (
         <div className="w-full h-full flex justify-center items-center select-none text-stone-400/80 text-sm">
           Nobody here
         </div>
       )}
-
       {showList && (
-        <VirtualScroller
+        <LocalCharactersList
           items={sorted}
           itemSize={settings.compact ? 26 : 41}
           itemTemplate={itemTemplate}
-          className={clsx(
-            classes.VirtualScroller,
+          containerClassName={clsx(
             'w-full h-full overflow-x-hidden overflow-y-auto custom-scrollbar select-none',
+            classes.VirtualScroller,
           )}
-          autoSize={false}
         />
       )}
     </Widget>

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

@@ -0,0 +1,76 @@
+import React, { useRef } from 'react';
+import clsx from 'clsx';
+import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth';
+import { LayoutEventBlocker, TooltipPosition, WdCheckbox, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
+
+interface LocalCharactersHeaderProps {
+  sortedCount: number;
+  showList: boolean;
+  showOffline: boolean;
+  settings: {
+    compact: boolean;
+    showOffline: boolean;
+    showShipName: boolean;
+  };
+  setSettings: (fn: (prev: any) => any) => void;
+}
+
+export const LocalCharactersHeader: React.FC<LocalCharactersHeaderProps> = ({
+  sortedCount,
+  showList,
+  showOffline,
+  settings,
+  setSettings,
+}) => {
+  const headerRef = useRef<HTMLDivElement>(null);
+  const compactOffline = useMaxWidth(headerRef, 145);
+  const compactShipName = useMaxWidth(headerRef, 195);
+
+  return (
+    <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"
+                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: compactOffline,
+                })}
+              />
+            </WdTooltipWrapper>
+          )}
+
+          {settings.compact && (
+            <WdTooltipWrapper content="Show ship name in compact rows" position={TooltipPosition.top}>
+              <WdCheckbox
+                size="xs"
+                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: compactShipName,
+                })}
+              />
+            </WdTooltipWrapper>
+          )}
+        </div>
+        <WdTooltipWrapper content="Enable compact mode" position={TooltipPosition.top}>
+          <span
+            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 }))}
+          />
+        </WdTooltipWrapper>
+      </LayoutEventBlocker>
+    </div>
+  );
+};

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

@@ -0,0 +1,6 @@
+.CharacterRow {
+  &.CardBorderLeftIsOwn {
+    border-left-color: rgb(251 146 60 / 1)
+  }
+}
+

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

@@ -0,0 +1,28 @@
+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]',
+        'px-1',
+        {
+          'surface-hover': options.odd,
+          'border-b border-gray-600 border-opacity-20': !options.last,
+          'bg-green-500 hover:bg-green-700 transition duration-300 bg-opacity-10 hover:bg-opacity-10': 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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
+import clsx from 'clsx';
+import { CharItemProps } from './types';
+
+export type LocalCharactersListProps = {
+  items: Array<CharItemProps>;
+  itemSize: number;
+  itemTemplate: (char: CharItemProps, options: VirtualScrollerTemplateOptions) => React.ReactNode;
+  containerClassName?: string;
+  style?: React.CSSProperties;
+  autoSize?: boolean;
+};
+
+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)}
+      itemTemplate={itemTemplate}
+      autoSize={autoSize}
+      style={localStyle}
+    />
+  );
+};

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

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

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

@@ -0,0 +1,6 @@
+import { CharacterTypeRaw, WithIsOwnCharacter } from '@/hooks/Mapper/types';
+
+export type CharItemProps = {
+  compact: boolean;
+} & CharacterTypeRaw &
+  WithIsOwnCharacter;

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

@@ -0,0 +1,12 @@
+import { useCallback } from 'react';
+import { VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
+import { CharItemProps, LocalCharactersItemTemplate } from '../components';
+
+export function useLocalCharactersItemTemplate(showShipName: boolean) {
+  return useCallback(
+    (char: CharItemProps, options: VirtualScrollerTemplateOptions) => (
+      <LocalCharactersItemTemplate {...char} {...options} showShipName={showShipName} />
+    ),
+    [showShipName],
+  );
+}

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

@@ -0,0 +1,21 @@
+import useLocalStorageState from 'use-local-storage-state';
+
+export interface LocalCharacterWidgetSettings {
+  compact: boolean;
+  showOffline: boolean;
+  version: number;
+  showShipName: boolean;
+}
+
+export const LOCAL_CHARACTER_WIDGET_DEFAULT: LocalCharacterWidgetSettings = {
+  compact: true,
+  showOffline: false,
+  version: 0,
+  showShipName: false,
+};
+
+export function useLocalCharacterWidgetSettings() {
+  return useLocalStorageState<LocalCharacterWidgetSettings>('kills:widget:settings', {
+    defaultValue: LOCAL_CHARACTER_WIDGET_DEFAULT,
+  });
+}

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

@@ -6,15 +6,16 @@ import { KillsHeader } from './components/SystemKillsHeader';
 import { useKillsWidgetSettings } from './hooks/useKillsWidgetSettings';
 import { useSystemKills } from './hooks/useSystemKills';
 import { KillsSettingsDialog } from './components/SystemKillsSettingsDialog';
+import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace';
+import { SolarSystemRawType } from '@/hooks/Mapper/types';
 
-export const SystemKills: React.FC = () => {
+export const SystemKills: React.FC = React.memo(() => {
   const {
-    data: { selectedSystems, systems },
+    data: { selectedSystems, systems, isSubscriptionActive },
     outCommand,
   } = useMapRootState();
 
   const [systemId] = selectedSystems || [];
-
   const [settingsDialogVisible, setSettingsDialogVisible] = useState(false);
 
   const systemNameMap = useMemo(() => {
@@ -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;
 
@@ -32,54 +43,64 @@ export const SystemKills: React.FC = () => {
     systemId,
     outCommand,
     showAllVisible: visible,
+    sinceHours: settings.timeRange,
   });
 
   const isNothingSelected = !systemId && !visible;
   const showLoading = isLoading && kills.length === 0;
 
+  const filteredKills = useMemo(() => {
+    if (!settings.whOnly || !visible) return kills;
+    return kills.filter(kill => {
+      const system = systemBySolarSystemId[kill.solar_system_id];
+      if (!system) {
+        console.warn(`System with id ${kill.solar_system_id} not found.`);
+        return false;
+      }
+      return isWormholeSpace(system.system_static_info.system_class);
+    });
+  }, [kills, settings.whOnly, systemBySolarSystemId, visible]);
+
   return (
-    <div className="h-full flex flex-col min-h-0">
-      <div className="flex flex-col flex-1 min-h-0">
-        <Widget label={<KillsHeader systemId={systemId} onOpenSettings={() => setSettingsDialogVisible(true)} />}>
-          {isNothingSelected && (
-            <div className="w-full h-full flex justify-center items-center select-none text-center text-stone-400/80 text-sm">
-              No system selected (or toggle “Show all systems”)
-            </div>
-          )}
+    <div className="h-full flex flex-col">
+      <Widget label={<KillsHeader systemId={systemId} onOpenSettings={() => setSettingsDialogVisible(true)} />}>
+        {!isSubscriptionActive ? (
+          <div className="w-full h-full flex items-center justify-center">
+            <span className="select-none text-center text-stone-400/80 text-sm">
+              Kills available with &#39;Active&#39; map subscription only (contact map administrators)
+            </span>
+          </div>
+        ) : isNothingSelected ? (
+          <div className="w-full h-full flex items-center justify-center">
+            <span className="select-none text-center text-stone-400/80 text-sm">
+              No system selected (or toggle &quot;Show all systems&quot;)
+            </span>
+          </div>
+        ) : showLoading ? (
+          <div className="w-full h-full flex items-center justify-center">
+            <span className="select-none text-center text-stone-400/80 text-sm">Loading Kills...</span>
+          </div>
+        ) : error ? (
+          <div className="w-full h-full flex items-center justify-center">
+            <span className="select-none text-center text-red-400 text-sm">{error}</span>
+          </div>
+        ) : !filteredKills || filteredKills.length === 0 ? (
+          <div className="w-full h-full flex items-center justify-center">
+            <span className="select-none text-center text-stone-400/80 text-sm">No kills found</span>
+          </div>
+        ) : (
+          <SystemKillsContent
+            kills={filteredKills}
+            systemNameMap={systemNameMap}
+            onlyOneSystem={!visible}
+            timeRange={settings.timeRange}
+          />
+        )}
+      </Widget>
 
-          {!isNothingSelected && showLoading && (
-            <div className="w-full h-full flex justify-center items-center select-none text-center text-stone-400/80 text-sm">
-              Loading Kills...
-            </div>
-          )}
-
-          {!isNothingSelected && !showLoading && error && (
-            <div className="w-full h-full flex justify-center items-center select-none text-center text-red-400 text-sm">
-              {error}
-            </div>
-          )}
-
-          {!isNothingSelected && !showLoading && !error && (!kills || kills.length === 0) && (
-            <div className="w-full h-full flex justify-center items-center select-none text-center text-stone-400/80 text-sm">
-              No kills found
-            </div>
-          )}
-
-          {!isNothingSelected && !showLoading && !error && (
-            <div className="flex-1 flex flex-col overflow-y-auto">
-              <SystemKillsContent
-                key={settings.compact ? 'compact' : 'normal'}
-                kills={kills}
-                systemNameMap={systemNameMap}
-                compact={settings.compact}
-                onlyOneSystem={!visible}
-              />
-            </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,35 @@
-.TableRowCompact {
-  height: 8px;
-  max-height: 8px;
-  font-size: 12px !important;
-  line-height: 8px;
+// Custom scrollbar styling is now handled by the global custom-scrollbar class
+.scrollerContent {
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: 100% !important;
 }
 
-.Table {
-  font-size: 12px;
-  border-collapse: collapse;
+// VirtualScroller specific styles that can't be handled with Tailwind
+.VirtualScroller {
+  overflow: hidden !important;
+  display: flex !important;
+  flex-direction: column !important;
+  height: 100% !important;
+
+  // Target this specific VirtualScroller instance
+  &:global(.p-virtualscroller) {
+    height: 100% !important;
+
+    :global(.p-virtualscroller-content) {
+      height: 100% !important;
+    }
+  }
 }
 
-.Tooltip {
-  white-space: pre-line;
-  line-height: 1.2rem;
+// Fix for PrimeReact VirtualScroller - these need to be global
+:global {
+  .p-virtualscroller {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .p-virtualscroller-content {
+    flex: 1;
+  }
 }

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

@@ -1,50 +1,76 @@
 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;
+  timeRange?: number;
+  limit?: number;
 }
 
 export const SystemKillsContent: React.FC<SystemKillsContentProps> = ({
   kills,
   systemNameMap,
-  compact = false,
   onlyOneSystem = 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(() => {
+    if (!kills || kills.length === 0) return [];
+
+    // sort by newest first
+    const sortedKills = kills
+      .filter(k => k.kill_time)
+      .sort((a, b) => new Date(b.kill_time!).getTime() - new Date(a.kill_time!).getTime());
+
+    // filter by timeRange
+    let filteredKills = sortedKills;
+    if (timeRange !== undefined) {
+      const cutoffTime = new Date();
+      cutoffTime.setHours(cutoffTime.getHours() - timeRange);
+      filteredKills = sortedKills.filter(kill => {
+        const killTime = new Date(kill.kill_time!).getTime();
+        return killTime >= cutoffTime.getTime();
+      });
+    }
+
+    // apply limit if present
+    if (limit !== undefined) {
+      return filteredKills.slice(0, limit);
+    }
+    return filteredKills;
+  }, [kills, timeRange, limit]);
+
+  const itemTemplate = useSystemKillsItemTemplate(systemNameMap, onlyOneSystem);
+
+  // Define style for the VirtualScroller
+  const virtualScrollerStyle: React.CSSProperties = {
+    boxSizing: 'border-box',
+    height: '100%', // Use 100% height to fill the container
+  };
 
   return (
-    <div
-      className={clsx(
-        '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="h-full w-full flex flex-col overflow-hidden" data-testid="system-kills-content">
+      <VirtualScroller
+        items={processedKills}
+        itemSize={ITEM_HEIGHT}
+        itemTemplate={itemTemplate}
+        className={`w-full h-full flex-1 select-none ${classes.VirtualScroller}`}
+        style={virtualScrollerStyle}
+        pt={{
+          content: {
+            className: `custom-scrollbar ${classes.scrollerContent}`,
+          },
+        }}
+      />
     </div>
   );
 };
+
+export default SystemKillsContent;

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

@@ -1,52 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import { zkillLink } from '../helpers';
-import classes from './SystemKillRow.module.scss';
-
-interface AttackerRowSubInfoProps {
-  finalBlowCharId: number | null | undefined;
-  finalBlowCharName?: string;
-  attackerPortraitUrl: string | null;
-
-  finalBlowCorpId: number | null | undefined;
-  finalBlowCorpName?: string;
-  attackerCorpLogoUrl: string | null;
-
-  finalBlowAllianceId: number | null | undefined;
-  finalBlowAllianceName?: string;
-  attackerAllianceLogoUrl: string | null;
-
-  containerHeight?: number;
-}
-
-export const AttackerRowSubInfo: React.FC<AttackerRowSubInfoProps> = ({
-  finalBlowCharId = 0,
-  finalBlowCharName,
-  attackerPortraitUrl,
-  containerHeight = 8,
-}) => {
-  if (!attackerPortraitUrl || finalBlowCharId === null || finalBlowCharId <= 0) {
-    return null;
-  }
-
-  const containerClass = `h-${containerHeight}`;
-
-  return (
-    <div className={clsx('flex items-start gap-1', containerClass)}>
-      <div className="relative shrink-0 w-auto h-full overflow-hidden">
-        <a
-          href={zkillLink('character', finalBlowCharId)}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="block h-full"
-        >
-          <img
-            src={attackerPortraitUrl}
-            alt={finalBlowCharName || 'AttackerPortrait'}
-            className={clsx(classes.killRowImage, 'h-full w-auto object-contain')}
-          />
-        </a>
-      </div>
-    </div>
-  );
-};

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

@@ -1,197 +0,0 @@
-// FullKillRow.tsx
-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_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 = '',
-
-    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;
-  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';
-
-  const { victimPortraitUrl, victimCorpLogoUrl, victimAllianceLogoUrl } = buildVictimImageUrls({
-    victim_char_id,
-    victim_ship_type_id,
-    victim_corp_id,
-    victim_alliance_id,
-  });
-  const { attackerPortraitUrl, attackerCorpLogoUrl, attackerAllianceLogoUrl } = buildAttackerImageUrls({
-    final_blow_char_id,
-    final_blow_corp_id,
-    final_blow_alliance_id,
-  });
-
-  const { url: victimPrimaryImageUrl, tooltip: victimPrimaryTooltip } = getPrimaryLogoAndTooltip(
-    victimAllianceLogoUrl,
-    victimCorpLogoUrl,
-    victim_alliance_name,
-    victim_corp_name,
-    'Victim',
-  );
-
-  const { url: attackerPrimaryImageUrl, tooltip: attackerPrimaryTooltip } = getAttackerPrimaryImageAndTooltip(
-    attackerIsNpc,
-    attackerAllianceLogoUrl,
-    attackerCorpLogoUrl,
-    final_blow_alliance_name,
-    final_blow_corp_name,
-    final_blow_ship_type_id || 0,
-  );
-
-  const attackerSubscript = getAttackerSubscript(killDetails);
-
-  return (
-    <div className={clsx(classes.killRowContainer, 'h-18 w-full justify-between items-start text-sm py-[4px]')}>
-      {/* ---------------- Victim Side ---------------- */}
-      <div className="flex items-start gap-1 min-w-0 h-full">
-        {/* Victim top-level logo (corp or alliance), with tooltip */}
-        {victimPrimaryImageUrl && (
-          <WdTooltipWrapper content={victimPrimaryTooltip} position={TooltipPosition.top}>
-            <div className="relative shrink-0 w-14 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">
-            <span className="font-semibold">{victim_char_name}</span>
-            {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>
-
-      <div className="flex items-start gap-1 min-w-0 h-full">
-        <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 !== null && final_blow_char_id > 0 && (
-          <div className="relative shrink-0 w-14 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-14 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>
-  );
-};

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,10 +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 data
     victim_char_name = 'Unknown Pilot',
     victim_alliance_ticker = '',
     victim_corp_ticker = '',
@@ -35,7 +35,7 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, sys
     victim_corp_id = 0,
     victim_alliance_id = 0,
     victim_ship_type_id = 0,
-
+    // Attacker data
     final_blow_char_id = 0,
     final_blow_char_name = '',
     final_blow_alliance_ticker = '',
@@ -45,25 +45,27 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, sys
     final_blow_corp_id = 0,
     final_blow_corp_name = '',
     final_blow_ship_type_id = 0,
-
     kill_time = '',
     total_value = 0,
   } = killDetails || {};
 
   const attackerIsNpc = final_blow_char_id === 0;
+
+  // Define victim affiliation ticker.
   const victimAffiliationTicker = victim_alliance_ticker || victim_corp_ticker || 'No Ticker';
+
   const killValueFormatted = total_value != null && total_value > 0 ? `${formatISK(total_value)} ISK` : null;
-  const attackerName = attackerIsNpc ? '' : final_blow_char_name;
-  const attackerTicker = attackerIsNpc ? '' : final_blow_alliance_ticker || final_blow_corp_ticker || '';
   const killTimeAgo = kill_time ? formatTimeMixed(kill_time) : '0h ago';
+
   const attackerSubscript = getAttackerSubscript(killDetails);
 
-  const { victimCorpLogoUrl, victimAllianceLogoUrl } = buildVictimImageUrls({
+  const { victimCorpLogoUrl, victimAllianceLogoUrl, victimShipUrl } = buildVictimImageUrls({
     victim_char_id,
     victim_ship_type_id,
     victim_corp_id,
     victim_alliance_id,
   });
+
   const { attackerCorpLogoUrl, attackerAllianceLogoUrl } = buildAttackerImageUrls({
     final_blow_char_id,
     final_blow_corp_id,
@@ -84,9 +86,15 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, sys
     attackerCorpLogoUrl,
     final_blow_alliance_name,
     final_blow_corp_name,
-    final_blow_ship_type_id || 0,
+    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(
@@ -94,24 +102,42 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, sys
         'text-xs whitespace-nowrap overflow-hidden leading-none',
       )}
     >
-      {victimPrimaryLogoUrl && (
-        <WdTooltipWrapper content={victimPrimaryTooltip} position={TooltipPosition.top}>
-          <a
-            href={zkillLink('kill', killmail_id)}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="relative shrink-0 w-8 h-8 overflow-hidden"
-          >
-            <img
-              src={victimPrimaryLogoUrl}
-              alt="VictimPrimaryLogo"
-              className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
-            />
-          </a>
-        </WdTooltipWrapper>
-      )}
-
-      <div className="flex flex-col ml-2 min-w-0 overflow-hidden leading-[1rem]">
+      {/* Victim Section */}
+      <div className="flex items-center gap-1">
+        {victimShipUrl && (
+          <div className="relative shrink-0 w-8 h-8 overflow-hidden">
+            <a
+              href={zkillLink('kill', killmail_id)}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="block w-full h-full"
+            >
+              <img
+                src={victimShipUrl}
+                alt="Victim Ship"
+                className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
+              />
+            </a>
+          </div>
+        )}
+        {victimPrimaryLogoUrl && (
+          <WdTooltipWrapper content={victimPrimaryTooltip} position={TooltipPosition.top}>
+            <a
+              href={zkillLink('kill', killmail_id)}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="relative block shrink-0 w-8 h-8 overflow-hidden"
+            >
+              <img
+                src={victimPrimaryLogoUrl}
+                alt="Victim Primary Logo"
+                className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
+              />
+            </a>
+          </WdTooltipWrapper>
+        )}
+      </div>
+      <div className="flex flex-col ml-2 flex-1 min-w-0 overflow-hidden leading-[1rem]">
         <div className="truncate text-stone-200">
           {victim_char_name}
           <span className="text-stone-400"> / {victimAffiliationTicker}</span>
@@ -126,13 +152,12 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, sys
           )}
         </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">
@@ -145,18 +170,17 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, sys
             )}
           </div>
         </div>
-
         {attackerPrimaryImageUrl && (
           <WdTooltipWrapper content={attackerPrimaryTooltip} position={TooltipPosition.top}>
             <a
-              href={zkillLink('kill', killmail_id)}
+              href={attackerLink}
               target="_blank"
               rel="noopener noreferrer"
-              className="relative shrink-0 w-8 h-8 overflow-hidden"
+              className="relative block shrink-0 w-8 h-8 overflow-hidden"
             >
               <img
                 src={attackerPrimaryImageUrl}
-                alt={attackerIsNpc ? 'NpcShip' : 'AttackerPrimaryLogo'}
+                alt={attackerIsNpc ? 'NPC Ship' : 'Attacker Primary Logo'}
                 className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
               />
               {attackerSubscript && (
@@ -166,7 +190,6 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, sys
                     attackerSubscript.cssClass,
                     'text-[0.6rem] leading-none px-[2px]',
                   )}
-                  style={{ bottom: 0, right: 0 }}
                 >
                   {attackerSubscript.label}
                 </span>

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

@@ -1,20 +1,22 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import {
   LayoutEventBlocker,
+  SystemView,
+  TooltipPosition,
   WdCheckbox,
   WdImgButton,
-  TooltipPosition,
-  SystemView,
+  WdTooltipWrapper,
 } from '@/hooks/Mapper/components/ui-kit';
 import { useKillsWidgetSettings } from '../hooks/useKillsWidgetSettings';
 import { PrimeIcons } from 'primereact/api';
+import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
 
-interface KillsWidgetHeaderProps {
+interface KillsHeaderProps {
   systemId?: string;
   onOpenSettings: () => void;
 }
 
-export const KillsHeader: React.FC<KillsWidgetHeaderProps> = ({ systemId, onOpenSettings }) => {
+export const KillsHeader: React.FC<KillsHeaderProps> = ({ systemId, onOpenSettings }) => {
   const [settings, setSettings] = useKillsWidgetSettings();
   const { showAll } = settings;
 
@@ -22,8 +24,11 @@ export const KillsHeader: React.FC<KillsWidgetHeaderProps> = ({ systemId, onOpen
     setSettings(prev => ({ ...prev, showAll: !prev.showAll }));
   };
 
+  const headerRef = useRef<HTMLDivElement>(null);
+  const compact = useMaxWidth(headerRef, 150);
+
   return (
-    <div className="flex justify-between items-center text-xs w-full">
+    <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
@@ -32,24 +37,28 @@ export const KillsHeader: React.FC<KillsWidgetHeaderProps> = ({ systemId, onOpen
         {systemId && !showAll && <SystemView systemId={systemId} className="select-none text-center" hideRegion />}
       </div>
 
-      <LayoutEventBlocker className="flex gap-2 items-center">
-        <WdCheckbox
-          size="xs"
-          labelSide="left"
-          label="Show all systems"
-          value={showAll}
-          classNameLabel="text-stone-400 hover:text-stone-200 transition duration-300"
-          onChange={onToggleShowAllVisible}
-        />
+      <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"
+              labelSide="left"
+              label={compact ? 'All' : 'Show all systems'}
+              value={showAll}
+              onChange={onToggleShowAllVisible}
+              classNameLabel="whitespace-nowrap text-stone-400 hover:text-stone-200 transition duration-300"
+            />
+          </WdTooltipWrapper>
 
-        <WdImgButton
-          className={PrimeIcons.SLIDERS_H}
-          onClick={onOpenSettings}
-          tooltip={{
-            content: 'Open Kills Settings',
-            position: TooltipPosition.left,
-          }}
-        />
+          <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,30 +18,39 @@ 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) => {
+  const handleWHChange = useCallback((checked: boolean) => {
     localRef.current = {
       ...localRef.current,
-      compact: checked,
+      whOnly: checked,
+    };
+    forceRender(n => n + 1);
+  }, []);
+
+  const handleTimeRangeChange = useCallback((newTimeRange: number) => {
+    localRef.current = {
+      ...localRef.current,
+      timeRange: newTimeRange,
     };
     forceRender(n => n + 1);
   }, []);
@@ -78,6 +88,15 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
 
   const localData = localRef.current;
   const excluded = localData.excludedSystems || [];
+  const timeRangeOptions = [4, 12, 24];
+
+  // Ensure timeRange is one of the valid options
+  useEffect(() => {
+    if (visible && !timeRangeOptions.includes(localData.timeRange)) {
+      // If current timeRange is not in options, set it to the default (4 hours)
+      handleTimeRangeChange(4);
+    }
+  }, [visible, localData.timeRange, handleTimeRangeChange]);
 
   return (
     <Dialog header="Kills Settings" visible={visible} style={{ width: '440px' }} draggable={false} onHide={handleHide}>
@@ -85,15 +104,34 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
         <div className="flex items-center gap-2">
           <input
             type="checkbox"
-            id="kills-compact-mode"
-            checked={localData.compact}
-            onChange={e => handleCompactChange(e.target.checked)}
+            id="kills-wormhole-only-mode"
+            checked={localData.whOnly}
+            onChange={e => handleWHChange(e.target.checked)}
           />
-          <label htmlFor="kills-compact-mode" className="cursor-pointer">
-            Use compact mode
+          <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>
@@ -106,8 +144,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)}
@@ -117,13 +154,11 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
           ))}
         </div>
 
-        {/* Apply + Close button row */}
         <div className="flex gap-2 justify-end mt-4">
           <Button onClick={handleApply} label="Apply" outlined size="small" />
         </div>
       </div>
 
-      {/* AddSystemDialog for picking new systems to exclude */}
       <AddSystemDialog
         title="Add system to kills exclude list"
         visible={addSystemDialogVisible}

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

@@ -1,40 +0,0 @@
-// VictimSubRowInfo.tsx
-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 === null || victimCharacterId <= 0) {
-    return null;
-  }
-
-  return (
-    <div className="flex items-start gap-1 h-14">
-      <div className="relative shrink-0 w-14 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/helpers/linkHelpers.ts

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

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

@@ -2,17 +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: false,
   showAll: false,
+  whOnly: true,
   excludedSystems: [],
-  version: 0,
+  version: 2,
+  timeRange: 4,
 };
 
 function mergeWithDefaults(settings?: Partial<KillsWidgetSettings>): KillsWidgetSettings {

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

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

assets/js/hooks/Mapper/components/mapInterface/widgets/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/SignatureView/SignatureView.tsx

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

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

@@ -0,0 +1,118 @@
+import { useRef } from 'react';
+import {
+  InfoDrawer,
+  LayoutEventBlocker,
+  SystemView,
+  TooltipPosition,
+  WdCheckbox,
+  WdImgButton,
+} from '@/hooks/Mapper/components/ui-kit';
+import { PrimeIcons } from 'primereact/api';
+import { CheckboxChangeEvent } from 'primereact/checkbox';
+import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
+import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
+import { COMPACT_MAX_WIDTH } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+
+export type HeaderProps = {
+  sigCount: number;
+  lazyDeleteValue: boolean;
+  onLazyDeleteChange: (checked: boolean) => void;
+  pendingCount: number;
+  pendingTimeRemaining?: number; // Time remaining in ms
+  onUndoClick: () => void;
+  onSettingsClick: () => void;
+};
+
+export const SystemSignaturesHeader = ({
+  sigCount,
+  lazyDeleteValue,
+  onLazyDeleteChange,
+  pendingCount,
+  pendingTimeRemaining,
+  onUndoClick,
+  onSettingsClick,
+}: HeaderProps) => {
+  const {
+    data: { selectedSystems },
+  } = useMapRootState();
+
+  const [systemId] = selectedSystems;
+  const isNotSelectedSystem = selectedSystems.length !== 1;
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isCompact = useMaxWidth(containerRef, COMPACT_MAX_WIDTH);
+
+  // Format time remaining as seconds
+  const formatTimeRemaining = () => {
+    if (!pendingTimeRemaining) return '';
+    const seconds = Math.ceil(pendingTimeRemaining / 1000);
+    return ` (${seconds}s remaining)`;
+  };
+
+  return (
+    <div ref={containerRef} className="w-full">
+      <div className="flex justify-between items-center text-xs w-full h-full">
+        <div className="flex justify-between items-center gap-1">
+          {!isCompact && (
+            <div className="flex whitespace-nowrap text-ellipsis overflow-hidden text-stone-400">
+              {sigCount ? `[${sigCount}] ` : ''}Signatures {isNotSelectedSystem ? '' : 'in'}
+            </div>
+          )}
+          {!isNotSelectedSystem && <SystemView systemId={systemId} className="select-none text-center" hideRegion />}
+        </div>
+
+        <LayoutEventBlocker className="flex gap-2.5">
+          <WdTooltipWrapper content="Enable Lazy delete">
+            <WdCheckbox
+              size="xs"
+              labelSide="left"
+              label={isCompact ? '' : 'Lazy delete'}
+              value={lazyDeleteValue}
+              classNameLabel="text-stone-400 hover:text-stone-200 transition duration-300 whitespace-nowrap text-ellipsis overflow-hidden"
+              onChange={(event: CheckboxChangeEvent) => onLazyDeleteChange(!!event.checked)}
+            />
+          </WdTooltipWrapper>
+
+          {pendingCount > 0 && (
+            <WdImgButton
+              className={PrimeIcons.UNDO}
+              style={{ color: 'red' }}
+              tooltip={{ content: `Undo pending changes (${pendingCount})${formatTimeRemaining()}` }}
+              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>
+    </div>
+  );
+};

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

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

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

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

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

@@ -1,176 +1,137 @@
+import { useCallback, useEffect, 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,
-  COSMIC_SIGNATURE,
-  DEPLOYABLE,
-  DRONE,
-  Setting,
-  SHIP,
-  STARBASE,
-  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 { SystemSignatureSettingsDialog } from './SystemSignatureSettingsDialog';
+import { ExtendedSystemSignature, 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';
-
-const SIGNATURE_SETTINGS_KEY = 'wanderer_system_signature_settings_v5_2';
-export const SHOW_DESCRIPTION_COLUMN_SETTING = 'show_description_column_setting';
-export const SHOW_UPDATED_COLUMN_SETTING = 'SHOW_UPDATED_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[] = [
-  { 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: LAZY_DELETE_SIGNATURES_SETTING, name: 'Lazy Delete Signatures', value: false, isFilter: false },
-  { key: KEEP_LAZY_DELETE_SETTING, name: 'Keep "Lazy Delete" Enabled', value: false, isFilter: false },
-  { key: COSMIC_ANOMALY, name: 'Show Anomalies', value: true, isFilter: true },
-  { key: COSMIC_SIGNATURE, name: 'Show Cosmic Signatures', value: true, isFilter: true },
-  { key: DEPLOYABLE, name: 'Show Deployables', value: true, isFilter: true },
-  { key: STRUCTURE, name: 'Show Structures', value: true, isFilter: true },
-  { key: STARBASE, name: 'Show Starbase', value: true, isFilter: true },
-  { key: SHIP, name: 'Show Ships', value: true, isFilter: true },
-  { key: DRONE, name: 'Show Drones And Charges', value: true, isFilter: true },
-  { key: SignatureGroup.Wormhole, name: 'Show Wormholes', value: true, isFilter: true },
-  { key: SignatureGroup.RelicSite, name: 'Show Relic Sites', value: true, isFilter: true },
-  { key: SignatureGroup.DataSite, name: 'Show Data Sites', value: true, isFilter: true },
-  { key: SignatureGroup.OreSite, name: 'Show Ore Sites', value: true, isFilter: true },
-  { key: SignatureGroup.GasSite, name: 'Show Gas Sites', value: true, isFilter: true },
-  { key: SignatureGroup.CombatSite, name: 'Show Combat Sites', value: true, isFilter: true },
-];
-
-const defaultSettings = () => {
-  return [...settings];
-};
+import { useHotkey } from '@/hooks/Mapper/hooks';
+import { SystemSignaturesHeader } from './SystemSignatureHeader';
+import useLocalStorageState from 'use-local-storage-state';
+import {
+  SETTINGS_KEYS,
+  SETTINGS_VALUES,
+  SIGNATURE_DELETION_TIMEOUTS,
+  SIGNATURE_SETTING_STORE_KEY,
+  SIGNATURE_WINDOW_ID,
+  SIGNATURES_DELETION_TIMING,
+  SignatureSettingsType,
+} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
+import { calculateTimeRemaining } from './helpers';
 
 export const SystemSignatures = () => {
+  const [visible, setVisible] = useState(false);
+  const [sigCount, setSigCount] = useState<number>(0);
+  const [pendingSigs, setPendingSigs] = useState<SystemSignature[]>([]);
+  const [pendingTimeRemaining, setPendingTimeRemaining] = useState<number | undefined>();
+  const undoPendingFnRef = useRef<() => void>(() => {});
+
   const {
     data: { selectedSystems },
   } = useMapRootState();
 
-  const [visible, setVisible] = useState(false);
-  const [settings, setSettings] = useState<Setting[]>(defaultSettings);
+  const [currentSettings, setCurrentSettings] = useLocalStorageState(SIGNATURE_SETTING_STORE_KEY, {
+    defaultValue: SETTINGS_VALUES,
+  });
+
+  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 handleSettingsChange = useCallback((settings: Setting[]) => {
-    setSettings(settings);
-    localStorage.setItem(SIGNATURE_SETTINGS_KEY, JSON.stringify(settings));
+  const handleSettingsChange = useCallback((newSettings: SignatureSettingsType) => {
+    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(prev => ({ ...prev, [SETTINGS_KEYS.LAZY_DELETE_SIGNATURES]: value }));
   }, []);
 
-  useEffect(() => {
-    const restoredSettings = localStorage.getItem(SIGNATURE_SETTINGS_KEY);
-
-    if (restoredSettings) {
-      setSettings(JSON.parse(restoredSettings));
+  useHotkey(true, ['z'], event => {
+    if (pendingSigs.length > 0) {
+      event.preventDefault();
+      event.stopPropagation();
+      undoPendingFnRef.current();
+      setPendingSigs([]);
+      setPendingTimeRemaining(undefined);
     }
+  });
+
+  const handleUndoClick = useCallback(() => {
+    undoPendingFnRef.current();
+    setPendingSigs([]);
+    setPendingTimeRemaining(undefined);
   }, []);
 
-  const ref = useRef<HTMLDivElement>(null);
-  const compact = useMaxWidth(ref, 260);
+  const handleSettingsButtonClick = useCallback(() => {
+    setVisible(true);
+  }, []);
+
+  const handlePendingChange = useCallback(
+    (pending: React.MutableRefObject<Record<string, ExtendedSystemSignature>>, newUndo: () => void) => {
+      setPendingSigs(() => {
+        return Object.values(pending.current).filter(sig => sig.pendingDeletion);
+      });
+      undoPendingFnRef.current = newUndo;
+    },
+    [],
+  );
+
+  // Calculate the minimum time remaining for any pending signature
+  useEffect(() => {
+    if (pendingSigs.length === 0) {
+      setPendingTimeRemaining(undefined);
+      return;
+    }
+
+    const calculate = () => {
+      setPendingTimeRemaining(() => calculateTimeRemaining(pendingSigs));
+    };
+
+    calculate();
+    const interval = setInterval(calculate, 1000);
+    return () => clearInterval(interval);
+  }, [pendingSigs]);
 
   return (
     <Widget
       label={
-        <div 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>
+        <SystemSignaturesHeader
+          sigCount={sigCount}
+          lazyDeleteValue={currentSettings[SETTINGS_KEYS.LAZY_DELETE_SIGNATURES] as boolean}
+          pendingCount={pendingSigs.length}
+          pendingTimeRemaining={pendingTimeRemaining}
+          onLazyDeleteChange={handleLazyDeleteChange}
+          onUndoClick={handleUndoClick}
+          onSettingsClick={handleSettingsButtonClick}
+        />
       }
+      windowId={SIGNATURE_WINDOW_ID}
     >
       {isNotSelectedSystem ? (
         <div className="w-full h-full flex justify-center items-center select-none text-center text-stone-400/80 text-sm">
           System is not selected
         </div>
       ) : (
-        <SystemSignaturesContent systemId={systemId} settings={settings} onLazyDeleteChange={handleLazyDeleteChange} />
+        <SystemSignaturesContent
+          systemId={systemId}
+          settings={currentSettings}
+          deletionTiming={
+            SIGNATURE_DELETION_TIMEOUTS[
+              (currentSettings[SETTINGS_KEYS.DELETION_TIMING] as keyof typeof SIGNATURE_DELETION_TIMEOUTS) ||
+                SIGNATURES_DELETION_TIMING.DEFAULT
+            ] as number
+          }
+          onLazyDeleteChange={handleLazyDeleteChange}
+          onCountChange={handleSigCountChange}
+          onPendingChange={handlePendingChange}
+        />
       )}
       {visible && (
         <SystemSignatureSettingsDialog
-          settings={settings}
+          settings={currentSettings}
           onCancel={() => setVisible(false)}
           onSave={handleSettingsChange}
         />
@@ -178,3 +139,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,30 @@
-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 { 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 {
+  DataTable,
+  DataTableRowClickEvent,
+  DataTableRowMouseEvent,
+  DataTableStateEvent,
+  SortOrder,
+} from 'primereact/datatable';
+import { Column } from 'primereact/column';
+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 { ExtendedSystemSignature, SignatureGroup, SignatureKind, 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,
+  getGroupIdByRawGroup,
+  GROUPS_LIST,
+  MEDIUM_MAX_WIDTH,
+  OTHER_COLUMNS_WIDTH,
+  SETTINGS_KEYS,
+  SIGNATURE_WINDOW_ID,
+  SignatureSettingsType,
+} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants';
+
 import {
   renderAddedTimeLeft,
   renderDescription,
@@ -31,18 +32,13 @@ 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 { useSystemSignaturesData } from '../hooks/useSystemSignaturesData';
+import { getSignatureRowClass } from '../helpers/rowStyles';
+import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth';
+import { useClipboard, useHotkey } from '@/hooks/Mapper/hooks';
+
+const renderColIcon = (sig: SystemSignature) => renderIcon(sig);
+
 type SystemSignaturesSortSettings = {
   sortField: string;
   sortOrder: SortOrder;
@@ -55,12 +51,17 @@ const SORT_DEFAULT_VALUES: SystemSignaturesSortSettings = {
 
 interface SystemSignaturesContentProps {
   systemId: string;
-  settings: Setting[];
+  settings: SignatureSettingsType;
   hideLinkedSignatures?: boolean;
   selectable?: boolean;
   onSelect?: (signature: SystemSignature) => void;
   onLazyDeleteChange?: (value: boolean) => void;
+  onCountChange?: (count: number) => void;
+  onPendingChange?: (pending: ExtendedSystemSignature[], undo: () => void) => void;
+  deletionTiming?: number;
+  filterSignature?: (signature: SystemSignature) => boolean;
 }
+
 export const SystemSignaturesContent = ({
   systemId,
   settings,
@@ -68,378 +69,297 @@ export const SystemSignaturesContent = ({
   selectable,
   onSelect,
   onLazyDeleteChange,
+  onCountChange,
+  onPendingChange,
+  deletionTiming,
+  filterSignature,
 }: SystemSignaturesContentProps) => {
-  const { outCommand } = useMapRootState();
-
-  const [signatures, setSignatures, signaturesRef] = useRefState<SystemSignature[]>([]);
-  const [selectedSignatures, setSelectedSignatures] = useState<SystemSignature[]>([]);
+  const [selectedSignatureForDialog, setSelectedSignatureForDialog] = useState<SystemSignature | null>(null);
+  const [showSignatureSettings, setShowSignatureSettings] = useState(false);
   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 [hoveredSignature, setHoveredSignature] = useState<SystemSignature | null>(null);
 
   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 isCompact = useMaxWidth(tableRef, COMPACT_MAX_WIDTH);
+  const isMedium = useMaxWidth(tableRef, MEDIUM_MAX_WIDTH);
+
   const { clipboardContent, setClipboardContent } = useClipboard();
 
-  const lazyDeleteValue = useMemo(() => {
-    return settings.find(setting => setting.key === LAZY_DELETE_SIGNATURES_SETTING)?.value ?? false;
-  }, [settings]);
+  const [sortSettings, setSortSettings] = useLocalStorageState<{ sortField: string; sortOrder: SortOrder }>(
+    'window:signatures:sort',
+    { defaultValue: SORT_DEFAULT_VALUES },
+  );
 
-  const keepLazyDeleteValue = useMemo(() => {
-    return settings.find(setting => setting.key === KEEP_LAZY_DELETE_SETTING)?.value ?? false;
-  }, [settings]);
+  const { signatures, selectedSignatures, setSelectedSignatures, handleDeleteSelected, handleSelectAll, handlePaste } =
+    useSystemSignaturesData({
+      systemId,
+      settings,
+      onCountChange,
+      onPendingChange,
+      onLazyDeleteChange,
+      deletionTiming,
+    });
+
+  useEffect(() => {
+    if (selectable) return;
+    if (!clipboardContent?.text) return;
+
+    handlePaste(clipboardContent.text);
+
+    setClipboardContent(null);
+  }, [selectable, clipboardContent, handlePaste, setClipboardContent]);
+
+  useHotkey(true, ['a'], handleSelectAll);
+
+  useHotkey(false, ['Backspace', 'Delete'], (event: KeyboardEvent) => {
+    const targetWindow = (event.target as HTMLHtmlElement)?.closest(`[data-window-id="${SIGNATURE_WINDOW_ID}"]`);
+
+    if (!targetWindow) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    handleDeleteSelected();
+  });
 
   const handleResize = useCallback(() => {
-    if (tableRef.current) {
-      const tableWidth = tableRef.current.offsetWidth;
-      const otherColumnsWidth = 276;
-      const availableWidth = tableWidth - otherColumnsWidth;
-      setNameColumnWidth(`${availableWidth}px`);
-    }
+    if (!tableRef.current) return;
+
+    setNameColumnWidth(`${tableRef.current.offsetWidth - OTHER_COLUMNS_WIDTH}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,
+  useEffect(() => {
+    if (!tableRef.current) return;
+
+    const observer = new ResizeObserver(handleResize);
+    observer.observe(tableRef.current);
+    handleResize();
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [handleResize]);
+
+  const handleRowClick = useCallback((e: DataTableRowClickEvent) => {
+    setSelectedSignatureForDialog(e.data as SystemSignature);
+    setShowSignatureSettings(true);
+  }, []);
+
+  const handleSelectSignatures = useCallback(
+    (e: { value: SystemSignature[] }) => {
+      selectable ? onSelect?.(e.value[0]) : setSelectedSignatures(e.value as ExtendedSystemSignature[]);
+    },
+    [selectable],
+  );
+
+  const { showDescriptionColumn, showUpdatedColumn, showCharacterColumn, showCharacterPortrait } = useMemo(
+    () => ({
+      showDescriptionColumn: settings[SETTINGS_KEYS.SHOW_DESCRIPTION_COLUMN] as boolean,
+      showUpdatedColumn: settings[SETTINGS_KEYS.SHOW_UPDATED_COLUMN] as boolean,
+      showCharacterColumn: settings[SETTINGS_KEYS.SHOW_CHARACTER_COLUMN] as boolean,
+      showCharacterPortrait: settings[SETTINGS_KEYS.SHOW_CHARACTER_PORTRAIT] as boolean,
+    }),
     [settings],
   );
 
-  const showUpdatedColumn = useMemo(() => settings.find(s => s.key === SHOW_UPDATED_COLUMN_SETTING)?.value, [settings]);
+  const filteredSignatures = useMemo<ExtendedSystemSignature[]>(() => {
+    return signatures.filter(sig => {
+      if (filterSignature && !filterSignature(sig)) {
+        return false;
+      }
 
-  const filteredSignatures = useMemo(() => {
-    return signatures
-      .filter(x => {
-        if (hideLinkedSignatures && !!x.linked_system) {
+      if (hideLinkedSignatures && sig.linked_system) {
+        return false;
+      }
+
+      if (sig.kind === SignatureKind.CosmicSignature) {
+        if (!settings[SETTINGS_KEYS.COSMIC_SIGNATURE]) {
           return false;
         }
 
-        const isCosmicSignature = x.kind === COSMIC_SIGNATURE;
-        const preparedGroup = getGroupIdByRawGroup(x.group);
+        if (sig.group) {
+          const enabledGroups = Object.keys(settings).filter(
+            x => GROUPS_LIST.includes(x as SignatureGroup) && settings[x as SETTINGS_KEYS],
+          );
 
-        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 enabledGroups.includes(getGroupIdByRawGroup(sig.group));
         }
 
-        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 },
-    });
-
-    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 handleDeleteSelected = useCallback(
-    async (e: KeyboardEvent) => {
-      if (selectable) {
-        return;
-      }
-      if (selectedSignatures.length === 0) {
-        return;
-      }
-
-      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);
-  }, []);
-
-  useEffect(() => {
-    if (refData.current.selectable) {
-      return;
-    }
-
-    if (!clipboardContent?.text) {
-      return;
-    }
-
-    handlePaste(clipboardContent.text);
-    setClipboardContent(null);
-  }, [clipboardContent, selectable, lazyDeleteValue, keepLazyDeleteValue]);
-
-  useHotkey(true, ['a'], handleSelectAll);
-  useHotkey(false, ['Backspace', 'Delete'], handleDeleteSelected);
-
-  useEffect(() => {
-    if (!systemId) {
-      setSignatures([]);
-      return;
-    }
-
-    handleGetSignatures();
-  }, [systemId]);
-
-  useMapEventListener(event => {
-    switch (event.name) {
-      case Commands.signaturesUpdated:
-        if (event.data?.toString() !== systemId.toString()) {
-          return;
-        }
-
-        handleGetSignatures();
         return true;
-    }
-  });
-
-  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);
       }
-    };
+
+      return settings[sig.kind];
+    });
+  }, [signatures, hideLinkedSignatures, settings, filterSignature]);
+
+  const onRowMouseEnter = useCallback((e: DataTableRowMouseEvent) => {
+    setHoveredSignature(e.data as SystemSignature);
+    tooltipRef.current?.show(e.originalEvent);
   }, []);
 
-  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 onRowMouseLeave = useCallback(() => {
+    setHoveredSignature(null);
+    tooltipRef.current?.hide();
+  }, []);
+
+  const refVars = useRef({ settings, selectedSignatures, setSortSettings });
+  refVars.current = { settings, selectedSignatures, setSortSettings };
+
+  // @ts-ignore
+  const getRowClassName = useCallback(rowData => {
+    if (!rowData) {
+      return null;
+    }
+
+    return getSignatureRowClass(
+      rowData as ExtendedSystemSignature,
+      refVars.current.selectedSignatures,
+      refVars.current.settings[SETTINGS_KEYS.COLOR_BY_TYPE] as boolean,
     );
-  };
+  }, []);
 
-  const [showSignatureSettings, setShowSignatureSettings] = useState(false);
-
-  const handleRowClick = (e: DataTableRowClickEvent) => {
-    setSelectedSignature(e.data as SystemSignature);
-    setShowSignatureSettings(true);
-  };
+  const handleSortSettings = useCallback(
+    (e: DataTableStateEvent) => refVars.current.setSortSettings({ sortField: e.sortField, sortOrder: e.sortOrder }),
+    [],
+  );
 
   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 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={handleSortSettings}
+          onRowMouseEnter={onRowMouseEnter}
+          onRowMouseLeave={onRowMouseLeave}
+          // @ts-ignore
+          rowClassName={getRowClassName}
+        >
+          <Column
+            field="icon"
+            header=""
+            body={renderColIcon}
+            bodyClassName="p-0 px-1"
+            style={{ maxWidth: 26, minWidth: 26, width: 26 }}
           />
-        )}
-      </div>
-    </>
+          <Column
+            field="eve_id"
+            header="Id"
+            bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+            style={{ maxWidth: 72, minWidth: 72, width: 72 }}
+            sortable
+          />
+          <Column
+            field="group"
+            header="Group"
+            bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+            style={{ maxWidth: 110, minWidth: 110, width: 110 }}
+            body={sig => sig.group ?? ''}
+            hidden={isCompact}
+            sortable
+          />
+          <Column
+            field="info"
+            header="Info"
+            bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+            style={{ maxWidth: nameColumnWidth }}
+            hidden={isCompact || isMedium}
+            body={renderInfoColumn}
+          />
+          {showDescriptionColumn && (
+            <Column
+              field="description"
+              header="Description"
+              bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+              hidden={isCompact}
+              body={renderDescription}
+              sortable
+            />
+          )}
+          <Column
+            field="inserted_at"
+            header="Added"
+            dataType="date"
+            body={renderAddedTimeLeft}
+            style={{ minWidth: 70, maxWidth: 80 }}
+            bodyClassName="ssc-header text-ellipsis overflow-hidden whitespace-nowrap"
+            sortable
+          />
+          {showUpdatedColumn && (
+            <Column
+              field="updated_at"
+              header="Updated"
+              dataType="date"
+              body={renderUpdatedTimeLeft}
+              style={{ minWidth: 70, maxWidth: 80 }}
+              bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+              sortable
+            />
+          )}
+
+          {showCharacterColumn && (
+            <Column
+              field="character_name"
+              header="Character"
+              bodyClassName="w-[70px] text-ellipsis overflow-hidden whitespace-nowrap"
+              sortable
+            ></Column>
+          )}
+
+          {!selectable && (
+            <Column
+              header=""
+              body={() => (
+                <div className="flex justify-end items-center gap-2 mr-[4px]">
+                  <WdTooltipWrapper content="Double-click a row to edit signature">
+                    <span className={PrimeIcons.PENCIL + ' text-[10px]'} />
+                  </WdTooltipWrapper>
+                </div>
+              )}
+              style={{ maxWidth: 26, minWidth: 26, width: 26 }}
+              bodyClassName="p-0 pl-1 pr-2"
+            />
+          )}
+        </DataTable>
+      )}
+
+      <WdTooltip
+        className="bg-stone-900/95 text-slate-50"
+        ref={tooltipRef}
+        content={
+          hoveredSignature ? (
+            <SignatureView signature={hoveredSignature} showCharacterPortrait={showCharacterPortrait} />
+          ) : null
+        }
+      />
+
+      {showSignatureSettings && (
+        <SignatureSettings
+          systemId={systemId}
+          show
+          onHide={() => setShowSignatureSettings(false)}
+          signatureData={selectedSignatureForDialog || undefined}
+        />
+      )}
+    </div>
   );
 };

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

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