chore: release version v1.59.11

* fix(Map): fix design of kills widget, fix design of signatures widget - refactor a lot of code, fixed problem with tooltip blinking

* fix(Map): refactor Tracking dialog, refactor Activity tracker, refactor codebase and some styles

* fix(Core): don't count character passage on manual add connection

* refactor(Core): improved characters tracking API

* fix(Core): fixed link signature to system on 'leads to' set

* fix(Map): Refactor map settings and prepared it to easier using

* fix(Map): Add support new command for following update

* fix(Map): Add support new command for main update

* refactor(Core): Reduce map init data by using cached system static data

* refactor(Core): Reduce map init data by extract signatures loading to a separate event

* fix(Core): adjusted IP rate limits

* fix(Map): Update design of tracking characters. Added icons for following and main. Added ability to see that character on the station or structure

---------

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

.devcontainer/Dockerfile

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

.devcontainer/devcontainer.json

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

.devcontainer/docker-compose.yml

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

CHANGELOG.md

@@ -2,6 +2,247 @@
 
 <!-- changelog -->
 
+## [v1.59.11](https://github.com/wanderer-industries/wanderer/compare/v1.59.10...v1.59.11) (2025-04-16)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fixed lifetime for A009 from 16h to 4.5h. Fixed problem with no appearing icon of shattered for Drifter wormholes. Fixed wanderings for Drifter wormholes. For system J011355 added static K346. For system J011824 added static K346. (#329)
+
+## [v1.59.10](https://github.com/wanderer-industries/wanderer/compare/v1.59.9...v1.59.10) (2025-04-15)
+
+
+
+
+## [v1.59.9](https://github.com/wanderer-industries/wanderer/compare/v1.59.8...v1.59.9) (2025-04-15)
+
+
+
+
+### Bug Fixes:
+
+* Core: Fixed issues with map server manager
+
+## [v1.59.8](https://github.com/wanderer-industries/wanderer/compare/v1.59.7...v1.59.8) (2025-04-15)
+
+
+
+
+### Bug Fixes:
+
+* Core: Fixed issues with main character & tracking
+
+## [v1.59.7](https://github.com/wanderer-industries/wanderer/compare/v1.59.6...v1.59.7) (2025-04-14)
+
+
+
+
+### Bug Fixes:
+
+* Core: Fixed auto-select splashed systems
+
+## [v1.59.6](https://github.com/wanderer-industries/wanderer/compare/v1.59.5...v1.59.6) (2025-04-13)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fix icons of main, follow and shattered (#321)
+
+## [v1.59.5](https://github.com/wanderer-industries/wanderer/compare/v1.59.4...v1.59.5) (2025-04-12)
+
+
+
+
+### Bug Fixes:
+
+* Signatures: avoid signatures delete on wrong buffer
+
+## [v1.59.4](https://github.com/wanderer-industries/wanderer/compare/v1.59.3...v1.59.4) (2025-04-10)
+
+
+
+
+## [v1.59.3](https://github.com/wanderer-industries/wanderer/compare/v1.59.2...v1.59.3) (2025-04-10)
+
+
+
+
+## [v1.59.2](https://github.com/wanderer-industries/wanderer/compare/v1.59.1...v1.59.2) (2025-04-10)
+
+
+
+
+### Bug Fixes:
+
+* Core: fixed connection validation
+
+## [v1.59.1](https://github.com/wanderer-industries/wanderer/compare/v1.59.0...v1.59.1) (2025-03-26)
+
+
+
+
+### Bug Fixes:
+
+* doc: improve bot setup instructions (#309)
+
+## [v1.59.0](https://github.com/wanderer-industries/wanderer/compare/v1.58.0...v1.59.0) (2025-03-23)
+
+
+
+
+### Features:
+
+* Core: added handling cases when wrong connections created
+
+## [v1.58.0](https://github.com/wanderer-industries/wanderer/compare/v1.57.1...v1.58.0) (2025-03-22)
+
+
+
+
+### Features:
+
+* Core: Show online state on map characters page
+
+* api: update character activity and api to allow date range (#299)
+
+* api: update character activity and api to allow date range
+
+## [v1.57.1](https://github.com/wanderer-industries/wanderer/compare/v1.57.0...v1.57.1) (2025-03-20)
+
+
+
+
+## [v1.57.0](https://github.com/wanderer-industries/wanderer/compare/v1.56.6...v1.57.0) (2025-03-19)
+
+
+
+
+### Features:
+
+* doc: update bot news (#294)
+
+## [v1.56.6](https://github.com/wanderer-industries/wanderer/compare/v1.56.5...v1.56.6) (2025-03-19)
+
+
+
+
+## [v1.56.5](https://github.com/wanderer-industries/wanderer/compare/v1.56.4...v1.56.5) (2025-03-19)
+
+
+
+
+## [v1.56.4](https://github.com/wanderer-industries/wanderer/compare/v1.56.3...v1.56.4) (2025-03-19)
+
+
+
+
+## [v1.56.3](https://github.com/wanderer-industries/wanderer/compare/v1.56.2...v1.56.3) (2025-03-19)
+
+
+
+
+### Bug Fixes:
+
+* cloak key error behavior (#288)
+
+## [v1.56.2](https://github.com/wanderer-industries/wanderer/compare/v1.56.1...v1.56.2) (2025-03-18)
+
+
+
+
+### Bug Fixes:
+
+* show signature tooltip on top
+
+## [v1.56.1](https://github.com/wanderer-industries/wanderer/compare/v1.56.0...v1.56.1) (2025-03-18)
+
+
+
+
+### Bug Fixes:
+
+* update activity api (#284)
+
+* qol updates for dev (#283)
+
+## [v1.56.0](https://github.com/wanderer-industries/wanderer/compare/v1.55.2...v1.56.0) (2025-03-17)
+
+
+
+
+### Features:
+
+* add static wh info (#262)
+
+* add static wh info
+
+* api: add character activity api (#263)
+
+* api: add character activity api
+
+### Bug Fixes:
+
+* character activity hide error
+
+* character added to map on follow (#272)
+
+## [v1.55.2](https://github.com/wanderer-industries/wanderer/compare/v1.55.1...v1.55.2) (2025-03-16)
+
+
+
+
+### Bug Fixes:
+
+* Core: fixed lazy delete reset state
+
+## [v1.55.1](https://github.com/wanderer-industries/wanderer/compare/v1.55.0...v1.55.1) (2025-03-16)
+
+
+
+
+### Bug Fixes:
+
+* Core: fixed lazy delete timeouts
+
+* Core: fixed lazy delete settings
+
+* keep character api off by default (#258)
+
+## [v1.55.0](https://github.com/wanderer-industries/wanderer/compare/v1.54.1...v1.55.0) (2025-03-15)
+
+
+
+
+### Features:
+
+* News: added map subscription news
+
+* Api: added map audit base API. Added comments server validations.
+
+* enhance character activty and summmarize by user (#206)
+
+* enhance character activty and summmarize by user (#206)
+
+### Bug Fixes:
+
+* Core: updated balance top up instructions
+
+* updated connections cleanup logic
+
+* removed placeholder favicon (#240)
+
+* fixed activity aggregation and new user tracking (#230)
+
+* fixed activity aggregation and new user tracking (#230)
+
+* fixed activity aggregation and new user tracking (#230)
+
+* fixed activity aggregation and new user tracking (#230)
+
 ## [v1.54.1](https://github.com/wanderer-industries/wanderer/compare/v1.54.0...v1.54.1) (2025-03-06)
 
 

Makefile

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

assets/css/app.css

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

assets/js/hooks/Mapper/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);
 
@@ -137,3 +143,40 @@
     background: #966d3d;
   }
 }
+
+.p-datatable-wrapper {
+  height: 100%;
+  & {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
+  }
+
+  &::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.5);
+    border-radius: 5px;
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(255, 255, 255, 0.7);
+  }
+
+  &::-webkit-scrollbar-button {
+    display: none;
+    height: 0;
+    width: 0;
+  }
+}
+
+.p-datatable .p-datatable-tbody > tr.p-highlight {
+  background: initial;
+}

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

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

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

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

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

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

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

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

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

@@ -4,10 +4,22 @@ import { useAutoAnimate } from '@formkit/auto-animate/react';
 import { Commands } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { CharacterTypeRaw } from '@/hooks/Mapper/types';
 import { emitMapEvent } from '@/hooks/Mapper/events';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import classes from './Characters.module.scss';
+import { isDocked } from '@/hooks/Mapper/helpers/isDocked.ts';
+import { PrimeIcons } from 'primereact/api';
 
-const Characters = ({ data }: { data: CharacterTypeRaw[] }) => {
+interface CharactersProps {
+  data: CharacterTypeRaw[];
+}
+
+export const Characters = ({ data }: CharactersProps) => {
   const [parent] = useAutoAnimate();
 
+  const {
+    data: { mainCharacterEveId, followingCharacterEveId },
+  } = useMapRootState();
+
   const handleSelect = useCallback((character: CharacterTypeRaw) => {
     emitMapEvent({
       name: Commands.centerSystem,
@@ -21,21 +33,58 @@ const Characters = ({ data }: { data: CharacterTypeRaw[] }) => {
       className="flex flex-col items-center justify-center"
       onClick={() => handleSelect(character)}
     >
-      <div className="tooltip tooltip-bottom" title={character.name}>
-        <a
-          className={clsx('wd-characters-icons wd-bg-default', { ['character-online']: character.online })}
+      <div
+        className={clsx(
+          'overflow-hidden relative',
+          'flex w-[35px] h-[35px] rounded-[4px] border-[1px] border-solid bg-transparent cursor-pointer',
+          'transition-colors duration-250',
+          {
+            ['border-stone-800/90']: !character.online,
+            ['border-lime-600/70']: character.online,
+          },
+        )}
+        title={character.name}
+      >
+        {mainCharacterEveId === character.eve_id && (
+          <span
+            className={clsx(
+              'absolute top-[2px] left-[22px] w-[9px] h-[9px]',
+              'text-yellow-500 text-[9px] rounded-[1px] z-10',
+              'pi',
+              PrimeIcons.STAR_FILL,
+            )}
+          />
+        )}
+        {followingCharacterEveId === character.eve_id && (
+          <span
+            className={clsx(
+              'absolute top-[23px] left-[22px] w-[10px] h-[10px]',
+              'text-sky-300 text-[10px] rounded-[1px] z-10',
+              'pi pi-angle-double-right',
+            )}
+          />
+        )}
+        {isDocked(character.location) && <div className={classes.Docked} />}
+        <div
+          className={clsx(
+            'flex w-full h-full bg-transparent cursor-pointer',
+            'bg-center bg-no-repeat bg-[length:100%]',
+            'transition-opacity',
+            'shadow-[inset_0_1px_6px_1px_#000000]',
+            {
+              ['opacity-60']: !character.online,
+              ['opacity-100']: character.online,
+            },
+          )}
           style={{ backgroundImage: `url(https://images.evetech.net/characters/${character.eve_id}/portrait)` }}
-        ></a>
+        ></div>
       </div>
     </li>
   ));
 
   return (
-    <ul className="flex characters" id="characters" ref={parent}>
+    <ul className="flex gap-1 characters" id="characters" ref={parent}>
       {items}
     </ul>
   );
 };
-
-// eslint-disable-next-line react/display-name
-export default Characters;

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

@@ -9,6 +9,7 @@ import { FastSystemActions } from '@/hooks/Mapper/components/contexts/components
 import { useMapCheckPermissions } from '@/hooks/Mapper/mapRootProvider/hooks/api';
 import { UserPermission } from '@/hooks/Mapper/types/permissions.ts';
 import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace.ts';
+import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
 
 export const useContextMenuSystemItems = ({
   onDeleteSystem,
@@ -32,6 +33,7 @@ export const useContextMenuSystemItems = ({
 
   return useMemo(() => {
     const system = systemId ? getSystemById(systems, systemId) : undefined;
+    const systemStaticInfo = getSystemStaticInfo(systemId)!;
 
     if (!system || !systemId) {
       return [];
@@ -44,9 +46,9 @@ export const useContextMenuSystemItems = ({
           return (
             <FastSystemActions
               systemId={systemId}
-              systemName={system.system_static_info.solar_system_name}
-              regionName={system.system_static_info.region_name}
-              isWH={isWormholeSpace(system.system_static_info.system_class)}
+              systemName={systemStaticInfo.solar_system_name}
+              regionName={systemStaticInfo.region_name}
+              isWH={isWormholeSpace(systemStaticInfo.system_class)}
               showEdit
               onOpenSettings={onOpenSettings}
             />
@@ -57,7 +59,7 @@ export const useContextMenuSystemItems = ({
       getTags(),
       getStatus(),
       ...getLabels(),
-      ...getWaypointMenu(systemId, system.system_static_info.system_class),
+      ...getWaypointMenu(systemId, systemStaticInfo.system_class),
       {
         label: !hubs.includes(systemId) ? 'Add in Routes' : 'Remove from Routes',
         icon: PrimeIcons.MAP_MARKER,

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

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

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

@@ -1,7 +1,7 @@
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useMemo } from 'react';
 import { getSystemById } from '@/hooks/Mapper/helpers';
-import { useLoadSystemStatic } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic.ts';
+import { getSystemStaticInfo } from '../../mapRootProvider/hooks/useLoadSystemStatic';
 
 interface UseSystemInfoProps {
   systemId: string;
@@ -12,10 +12,8 @@ export const useSystemInfo = ({ systemId }: UseSystemInfoProps) => {
     data: { systems, connections },
   } = useMapRootState();
 
-  const { systems: systemStatics } = useLoadSystemStatic({ systems: [systemId] });
-
   return useMemo(() => {
-    const staticInfo = systemStatics.get(parseInt(systemId));
+    const staticInfo = getSystemStaticInfo(parseInt(systemId));
     const dynamicInfo = getSystemById(systems, systemId);
 
     if (!staticInfo || !dynamicInfo) {
@@ -29,5 +27,5 @@ export const useSystemInfo = ({ systemId }: UseSystemInfoProps) => {
       .filter(x => x !== systemId);
 
     return { dynamicInfo, staticInfo, leadsTo };
-  }, [systemStatics, systemId, systems, connections]);
+  }, [systemId, systems, connections]);
 };

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

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

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

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

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

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

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

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

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

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

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

@@ -4,7 +4,7 @@ import { Handle, NodeProps, Position } from 'reactflow';
 import clsx from 'clsx';
 import classes from './SolarSystemNodeDefault.module.scss';
 import { PrimeIcons } from 'primereact/api';
-import { useLocalCounter, useSolarSystemNode, useNodeKillsCount } from '../../hooks';
+import { useLocalCounter, useNodeKillsCount, useSolarSystemNode } from '../../hooks';
 import {
   EFFECT_BACKGROUND_STYLES,
   MARKER_BOOKMARK_BG_STYLES,
@@ -14,6 +14,8 @@ import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/Worm
 import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
 import { LocalCounter } from './SolarSystemLocalCounter';
 import { KillsCounter } from './SolarSystemKillsCounter';
+import { TooltipSize } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper/utils.ts';
+import { TooltipPosition, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
 
 export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>) => {
   const nodeVars = useSolarSystemNode(props);
@@ -31,8 +33,10 @@ export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>
           )}
 
           {nodeVars.isShattered && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered)}>
-              <span className={clsx('pi pi-chart-pie', classes.icon)} />
+            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered, '!pr-[2px]')}>
+              <WdTooltipWrapper content="Shattered" position={TooltipPosition.top}>
+                <span className={clsx('block w-[10px] h-[10px]', classes.ShatteredIcon)} />
+              </WdTooltipWrapper>
             </div>
           )}
 
@@ -40,7 +44,7 @@ export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>
             <KillsCounter
               killsCount={localKillsCount}
               systemId={nodeVars.solarSystemId}
-              size="lg"
+              size={TooltipSize.lg}
               killsActivityType={nodeVars.killsActivityType}
               className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!])}
             >

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

@@ -14,6 +14,8 @@ import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/Worm
 import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
 import { LocalCounter } from './SolarSystemLocalCounter';
 import { KillsCounter } from './SolarSystemKillsCounter';
+import { TooltipPosition, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
+import { TooltipSize } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper/utils.ts';
 
 export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>) => {
   const nodeVars = useSolarSystemNode(props);
@@ -31,8 +33,10 @@ export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>)
           )}
 
           {nodeVars.isShattered && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered)}>
-              <span className={clsx('pi pi-chart-pie', classes.icon)} />
+            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered, '!pr-[2px]')}>
+              <WdTooltipWrapper content="Shattered" position={TooltipPosition.top}>
+                <span className={clsx('block w-[10px] h-[10px]', classes.ShatteredIcon)} />
+              </WdTooltipWrapper>
             </div>
           )}
 
@@ -40,7 +44,7 @@ export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>)
             <KillsCounter
               killsCount={localKillsCount}
               systemId={nodeVars.solarSystemId}
-              size="lg"
+              size={TooltipSize.lg}
               killsActivityType={nodeVars.killsActivityType}
               className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!])}
             >

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import { useSystemKills } from '../../mapInterface/widgets/SystemKills/hooks/useSystemKills';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useSystemKills } from '@/hooks/Mapper/components/mapInterface/widgets/WSystemKills/hooks/useSystemKills.ts';
 
 interface UseKillsCounterProps {
   realSystemId: string;

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

@@ -13,6 +13,7 @@ import { CharacterTypeRaw, OutCommand, SystemSignature } from '@/hooks/Mapper/ty
 import { useUnsplashedSignatures } from './useUnsplashedSignatures';
 import { useSystemName } from './useSystemName';
 import { LabelInfo, useLabelsInfo } from './useLabelsInfo';
+import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
 
 function getActivityType(count: number): string {
   if (count <= 5) return 'activityNormal';
@@ -43,8 +44,7 @@ export function useLocalCounter(nodeVars: SolarSystemNodeVars) {
 export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarSystemNodeVars {
   const { id, data, selected } = props;
   const {
-    system_static_info,
-    system_signatures,
+    id: solar_system_id,
     locked,
     name,
     tag,
@@ -54,23 +54,24 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarS
     linked_sig_eve_id: linkedSigEveId = '',
   } = data;
 
+  const {
+    interfaceSettings,
+    data: { systemSignatures: mapSystemSignatures },
+  } = useMapRootState();
+
   const {
     system_class,
     security,
     class_title,
-    solar_system_id,
     statics,
     effect_name,
     region_name,
     region_id,
     is_shattered,
     solar_system_name,
-  } = system_static_info;
-
-  const {
-    interfaceSettings,
-    data: { systemSignatures: mapSystemSignatures },
-  } = useMapRootState();
+  } = useMemo(() => {
+    return getSystemStaticInfo(parseInt(solar_system_id))!;
+  }, [solar_system_id]);
 
   const { isShowUnsplashedSignatures } = interfaceSettings;
   const isTempSystemNameEnabled = useMapGetOption('show_temp_system_name') === 'true';
@@ -95,13 +96,10 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarS
 
   const visible = useMemo(() => visibleNodes.has(id), [id, visibleNodes]);
 
-  const systemSigs = useMemo(
-    () => mapSystemSignatures[solar_system_id] || system_signatures,
-    [system_signatures, solar_system_id, mapSystemSignatures],
-  );
+  const systemSigs = useMemo(() => mapSystemSignatures[solar_system_id] || [], [solar_system_id, mapSystemSignatures]);
 
   const charactersInSystem = useMemo(() => {
-    return characters.filter(c => c.location?.solar_system_id === solar_system_id && c.online);
+    return characters.filter(c => c.location?.solar_system_id === parseInt(solar_system_id) && c.online);
   }, [characters, solar_system_id]);
 
   const isWormhole = isWormholeSpace(system_class);
@@ -121,7 +119,7 @@ export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarS
     isShowLinkedSigId,
   });
 
-  const killsCount = useMemo(() => kills[solar_system_id] ?? null, [kills, solar_system_id]);
+  const killsCount = useMemo(() => kills[parseInt(solar_system_id)] ?? null, [kills, solar_system_id]);
   const killsActivityType = killsCount ? getActivityType(killsCount) : null;
 
   const hasUserCharacters = useMemo(

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

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

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

@@ -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 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,86 @@
+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) => {
+        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,17 +1,10 @@
-import { useCallback, useRef, useMemo } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { Dialog } from 'primereact/dialog';
 
 import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
-import { SystemSignature, TimeStatus } 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 {
-  Setting,
-  COSMIC_SIGNATURE,
-} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog';
-import { SignatureGroup } from '@/hooks/Mapper/types';
 import { parseSignatureCustomInfo } from '@/hooks/Mapper/helpers/parseSignatureCustomInfo';
 import { getWhSize } from '@/hooks/Mapper/helpers/getWhSize';
 import { useSystemInfo } from '@/hooks/Mapper/components/hooks';
@@ -21,6 +14,10 @@ import {
   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;
 
@@ -29,11 +26,11 @@ interface SystemLinkSignatureDialogProps {
   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 {
@@ -175,7 +172,7 @@ 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}

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

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

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

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

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

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

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

@@ -5,10 +5,11 @@ import {
   SystemInfo,
   SystemSignatures,
   SystemStructures,
-  SystemKills,
+  WSystemKills,
 } 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 = [
@@ -68,7 +70,14 @@ export const DEFAULT_WIDGETS: WindowProps[] = [
     position: { x: 270, y: 730 },
     size: { width: 510, height: 200 },
     zIndex: 0,
-    content: () => <SystemKills />,
+    content: () => <WSystemKills />,
+  },
+  {
+    id: WidgetsIds.comments,
+    position: { x: 10, y: 10 },
+    size: { width: 250, height: 300 },
+    zIndex: 0,
+    content: () => <CommentsWidget />,
   },
 ];
 
@@ -102,4 +111,8 @@ export const WIDGETS_CHECKBOXES_PROPS: WidgetsCheckboxesType = [
     id: WidgetsIds.kills,
     label: 'Kills',
   },
+  {
+    id: WidgetsIds.comments,
+    label: 'Comments',
+  },
 ];

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

@@ -0,0 +1,83 @@
+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
+      contentClassName="my-1"
+      label={
+        <div ref={containerRef} className="flex justify-between items-center gap-1 text-xs w-full">
+          <div className="flex items-center gap-1">
+            {!isCompact && (
+              <div className="flex whitespace-nowrap text-ellipsis overflow-hidden text-stone-400">
+                Comments {isNotSelectedSystem ? '' : 'in'}
+              </div>
+            )}
+            {!isNotSelectedSystem && <SystemView systemId={systemId} className="select-none text-center" hideRegion />}
+          </div>
+          <WdImgButton
+            className={PrimeIcons.QUESTION_CIRCLE}
+            tooltip={{
+              position: TooltipPosition.left,
+              content: (
+                <div className="flex flex-col gap-1">
+                  <InfoDrawer title={<b className="text-slate-50">How to add/delete comment?</b>}>
+                    It is possible to use markdown formating. <br />
+                    Only users with tracking permission can add/delete comments. <br />
+                  </InfoDrawer>
+                  <InfoDrawer title={<b className="text-slate-50">Limitations</b>}>
+                    Each comment length is limited to <b>500</b> characters. <br />
+                    No more than <b>{isSubscriptionActive ? '500' : '30'}</b> comments are allowed per system*. <br />
+                    <small>* based on active map subscription.</small>
+                  </InfoDrawer>
+                </div>
+              ),
+            }}
+          />
+        </div>
+      }
+    >
+      <CommentsWidgetContent />
+    </Widget>
+  );
+};

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

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

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

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

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

@@ -5,20 +5,20 @@ import { SystemInfoContent } from './SystemInfoContent';
 import { PrimeIcons } from 'primereact/api';
 import { useState, useCallback } from 'react';
 import { SystemSettingsDialog } from '@/hooks/Mapper/components/mapInterface/components/SystemSettingsDialog/SystemSettingsDialog.tsx';
-import { getSystemById } from '@/hooks/Mapper/helpers';
 import { ANOIK_ICON, DOTLAN_ICON, ZKB_ICON } from '@/hooks/Mapper/icons';
+import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
 
 export const SystemInfo = () => {
   const [visible, setVisible] = useState(false);
 
   const {
-    data: { selectedSystems, systems },
+    data: { selectedSystems },
   } = useMapRootState();
 
   const [systemId] = selectedSystems;
 
-  const sys = getSystemById(systems, systemId)!;
-  const { solar_system_name: solarSystemName } = sys?.system_static_info || {};
+  const systemStaticInfo = getSystemStaticInfo(systemId)!;
+  const { solar_system_name: solarSystemName } = systemStaticInfo || {};
 
   const isNotSelectedSystem = selectedSystems.length !== 1;
 

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -10,12 +10,12 @@ export interface SignatureViewProps {
 export const SignatureView = ({ signature, showCharacterPortrait = false }: SignatureViewProps) => {
   const isWormhole = signature?.group === SignatureGroup.Wormhole;
   const hasCharacterInfo = showCharacterPortrait && signature.character_eve_id;
-  const groupDisplay = isWormhole ? SignatureGroup.Wormhole : signature?.group ?? SignatureGroup.CosmicSignature;
+  const groupDisplay = isWormhole ? SignatureGroup.Wormhole : (signature?.group ?? SignatureGroup.CosmicSignature);
   const characterName = signature.character_name || 'Unknown character';
 
   return (
     <div className="flex flex-col gap-2">
-      <div className="flex gap-2 items-center">
+      <div className="flex gap-2 items-center px-2">
         {renderIcon(signature)}
         <div>{signature?.eve_id}</div>
         <div>{groupDisplay}</div>

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

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

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

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

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

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

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

@@ -2,29 +2,18 @@ import { Dialog } from 'primereact/dialog';
 import { useCallback, useState } from 'react';
 import { Button } from 'primereact/button';
 import { TabPanel, TabView } from 'primereact/tabview';
-import styles from './SystemSignatureSettingsDialog.module.scss';
 import { PrettySwitchbox } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/components';
 import { Dropdown } from 'primereact/dropdown';
-
-export type Setting = {
-  key: string;
-  name: string;
-  value: boolean | number;
-  isFilter?: boolean;
-  options?: { label: string; value: number }[];
-};
-
-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 {
+  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;
 }
 
@@ -34,21 +23,18 @@ 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: typeof item.value === 'boolean' ? !item.value : item.value } : item,
-      ),
-    );
-  };
-
-  const handleDropdownChange = (key: string, value: number) => {
-    setSettings(prevState => prevState.map(item => (item.key === key ? { ...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(() => {
@@ -56,17 +42,15 @@ export const SystemSignatureSettingsDialog = ({
   }, [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={setting.value}
-            options={setting.options.map(opt => ({
-              ...opt,
-              label: opt.label.split(' ')[0], // Just take the first part (e.g., "0s" from "Immediate (0s)")
-            }))}
-            onChange={e => handleDropdownChange(setting.key, e.value)}
+            value={val}
+            options={setting.options}
+            onChange={e => handleSettingsChange(setting, e.value)}
             className="w-40"
           />
         </div>
@@ -77,8 +61,8 @@ export const SystemSignatureSettingsDialog = ({
       <PrettySwitchbox
         key={setting.key}
         label={setting.name}
-        checked={!!setting.value}
-        setChecked={() => handleSettingsChange(setting.key)}
+        checked={!!val}
+        setChecked={() => handleSettingsChange(setting)}
       />
     );
   };
@@ -87,26 +71,24 @@ export const SystemSignatureSettingsDialog = ({
     <Dialog header="System Signatures Settings" visible={true} onHide={onCancel} className="w-full max-w-lg h-[500px]">
       <div className="flex flex-col gap-3 justify-between h-full">
         <div className="flex flex-col gap-2">
-          <div className={styles.verticalTabsContainer}>
-            <TabView
-              activeIndex={activeIndex}
-              onTabChange={e => setActiveIndex(e.index)}
-              className={styles.verticalTabView}
-            >
-              <TabPanel header="Filters" headerClassName={styles.verticalTabHeader}>
-                <div className="w-full h-full flex flex-col gap-1">{filterSettings.map(renderSetting)}</div>
-              </TabPanel>
-              <TabPanel header="User Interface" headerClassName={styles.verticalTabHeader}>
-                <div className="w-full h-full flex flex-col gap-1">
-                  {userSettings.filter(setting => !setting.options).map(renderSetting)}
-                  {userSettings.some(setting => setting.options) && (
-                    <div className="my-2 border-t border-stone-700/50"></div>
-                  )}
-                  {userSettings.filter(setting => setting.options).map(renderSetting)}
-                </div>
-              </TabPanel>
-            </TabView>
-          </div>
+          <TabView
+            activeIndex={activeIndex}
+            onTabChange={e => setActiveIndex(e.index)}
+            className="vertical-tabs-container"
+          >
+            <TabPanel header="Filters">
+              <div className="w-full h-full flex flex-col gap-1">
+                {SIGNATURE_SETTINGS.filterFlags.map(renderSetting)}
+              </div>
+            </TabPanel>
+            <TabPanel header="User Interface">
+              <div className="w-full h-full flex flex-col gap-1">
+                {SIGNATURE_SETTINGS.uiFlags.map(renderSetting)}
+                <div className="my-2 border-t border-stone-700/50"></div>
+                {SIGNATURE_SETTINGS.uiOther.map(renderSetting)}
+              </div>
+            </TabPanel>
+          </TabView>
         </div>
 
         <div className="flex gap-2 justify-end">

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

@@ -1,130 +1,37 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
 import { SystemSignaturesContent } from './SystemSignaturesContent';
-import {
-  COSMIC_ANOMALY,
-  COSMIC_SIGNATURE,
-  DEPLOYABLE,
-  DRONE,
-  Setting,
-  SHIP,
-  STARBASE,
-  STRUCTURE,
-  SystemSignatureSettingsDialog,
-} from './SystemSignatureSettingsDialog';
-import { SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
+import { SystemSignatureSettingsDialog } from './SystemSignatureSettingsDialog';
+import { ExtendedSystemSignature, SystemSignature } from '@/hooks/Mapper/types';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth';
 import { useHotkey } from '@/hooks/Mapper/hooks';
+import { SystemSignaturesHeader } from './SystemSignatureHeader';
+import useLocalStorageState from 'use-local-storage-state';
 import {
-  COMPACT_MAX_WIDTH,
-  DELETION_TIMING_DEFAULT,
-  DELETION_TIMING_EXTENDED,
-  DELETION_TIMING_IMMEDIATE,
-  DELETION_TIMING_SETTING_KEY,
-} from './constants';
-import { renderHeaderLabel } from './renders';
+  SETTINGS_KEYS,
+  SETTINGS_VALUES,
+  SIGNATURE_DELETION_TIMEOUTS,
+  SIGNATURE_SETTING_STORE_KEY,
+  SIGNATURE_WINDOW_ID,
+  SIGNATURES_DELETION_TIMING,
+  SignatureSettingsType,
+} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
+import { calculateTimeRemaining } from './helpers';
 
-const SIGNATURE_SETTINGS_KEY = 'wanderer_system_signature_settings_v5_5';
-export const SIGNATURE_WINDOW_ID = 'system_signatures_window';
-export const SHOW_DESCRIPTION_COLUMN_SETTING = 'show_description_column_setting';
-export const SHOW_UPDATED_COLUMN_SETTING = 'SHOW_UPDATED_COLUMN_SETTING';
-export const SHOW_CHARACTER_COLUMN_SETTING = 'SHOW_CHARACTER_COLUMN_SETTING';
-export const LAZY_DELETE_SIGNATURES_SETTING = 'LAZY_DELETE_SIGNATURES_SETTING';
-export const KEEP_LAZY_DELETE_SETTING = 'KEEP_LAZY_DELETE_ENABLED_SETTING';
-// eslint-disable-next-line react-refresh/only-export-components
-export const DELETION_TIMING_SETTING = DELETION_TIMING_SETTING_KEY;
-export const COLOR_BY_TYPE_SETTING = 'COLOR_BY_TYPE_SETTING';
-export const SHOW_CHARACTER_PORTRAIT_SETTING = 'SHOW_CHARACTER_PORTRAIT_SETTING';
+export const SystemSignatures = () => {
+  const [visible, setVisible] = useState(false);
+  const [sigCount, setSigCount] = useState<number>(0);
+  const [pendingSigs, setPendingSigs] = useState<SystemSignature[]>([]);
+  const [pendingTimeRemaining, setPendingTimeRemaining] = useState<number | undefined>();
+  const undoPendingFnRef = useRef<() => void>(() => {});
 
-// Extend the Setting type to include options for dropdown settings
-type ExtendedSetting = Setting & {
-  options?: { label: string; value: number }[];
-};
-
-const SETTINGS: ExtendedSetting[] = [
-  { key: SHOW_UPDATED_COLUMN_SETTING, name: 'Show Updated Column', value: false, isFilter: false },
-  { key: SHOW_DESCRIPTION_COLUMN_SETTING, name: 'Show Description Column', value: false, isFilter: false },
-  { key: SHOW_CHARACTER_COLUMN_SETTING, name: 'Show Character Column', value: false, isFilter: false },
-  { key: SHOW_CHARACTER_PORTRAIT_SETTING, name: 'Show Character Portrait in Tooltip', 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: COLOR_BY_TYPE_SETTING, name: 'Color Signatures by Type', value: false, isFilter: false },
-  {
-    key: DELETION_TIMING_SETTING,
-    name: 'Deletion Timing',
-    value: DELETION_TIMING_DEFAULT,
-    isFilter: false,
-    options: [
-      { label: '0s', value: DELETION_TIMING_IMMEDIATE },
-      { label: '10s', value: DELETION_TIMING_DEFAULT },
-      { label: '30s', value: DELETION_TIMING_EXTENDED },
-    ],
-  },
-
-  { key: COSMIC_ANOMALY, name: 'Show Anomalies', value: true, isFilter: true },
-  { key: COSMIC_SIGNATURE, name: 'Show Cosmic Signatures', value: true, isFilter: true },
-  { key: DEPLOYABLE, name: 'Show Deployables', value: true, isFilter: true },
-  { key: STRUCTURE, name: 'Show Structures', value: true, isFilter: true },
-  { key: STARBASE, name: 'Show Starbase', value: true, isFilter: true },
-  { key: SHIP, name: 'Show Ships', value: true, isFilter: true },
-  { key: DRONE, name: 'Show Drones And Charges', value: true, isFilter: true },
-  { key: SignatureGroup.Wormhole, name: 'Show Wormholes', value: true, isFilter: true },
-  { key: SignatureGroup.RelicSite, name: 'Show Relic Sites', value: true, isFilter: true },
-  { key: SignatureGroup.DataSite, name: 'Show Data Sites', value: true, isFilter: true },
-  { key: SignatureGroup.OreSite, name: 'Show Ore Sites', value: true, isFilter: true },
-  { key: SignatureGroup.GasSite, name: 'Show Gas Sites', value: true, isFilter: true },
-  { key: SignatureGroup.CombatSite, name: 'Show Combat Sites', value: true, isFilter: true },
-];
-
-function getDefaultSettings(): ExtendedSetting[] {
-  return [...SETTINGS];
-}
-
-function getInitialSettings(): ExtendedSetting[] {
-  const stored = localStorage.getItem(SIGNATURE_SETTINGS_KEY);
-  if (stored) {
-    try {
-      const parsedSettings = JSON.parse(stored) as ExtendedSetting[];
-      // Merge stored settings with default settings to ensure new settings are included
-      const defaultSettings = getDefaultSettings();
-      const mergedSettings = defaultSettings.map(defaultSetting => {
-        const storedSetting = parsedSettings.find(s => s.key === defaultSetting.key);
-        if (storedSetting) {
-          // Keep the stored value but ensure options are from default settings
-          return {
-            ...defaultSetting,
-            value: storedSetting.value,
-          };
-        }
-        return defaultSetting;
-      });
-      return mergedSettings;
-    } catch (error) {
-      console.error('Error parsing stored settings', error);
-    }
-  }
-  return getDefaultSettings();
-}
-
-export const SystemSignatures: React.FC = () => {
   const {
     data: { selectedSystems },
   } = useMapRootState();
 
-  const [visible, setVisible] = useState(false);
-
-  const [currentSettings, setCurrentSettings] = useState<ExtendedSetting[]>(getInitialSettings);
-
-  useEffect(() => {
-    localStorage.setItem(SIGNATURE_SETTINGS_KEY, JSON.stringify(currentSettings));
-  }, [currentSettings]);
-
-  const [sigCount, setSigCount] = useState<number>(0);
-  const [pendingSigs, setPendingSigs] = useState<SystemSignature[]>([]);
-  const [minPendingTimeRemaining, setMinPendingTimeRemaining] = useState<number | undefined>(undefined);
-
-  const undoPendingFnRef = useRef<() => void>(() => {});
+  const [currentSettings, setCurrentSettings] = useLocalStorageState(SIGNATURE_SETTING_STORE_KEY, {
+    defaultValue: SETTINGS_VALUES,
+  });
 
   const handleSigCountChange = useCallback((count: number) => {
     setSigCount(count);
@@ -133,108 +40,73 @@ export const SystemSignatures: React.FC = () => {
   const [systemId] = selectedSystems;
   const isNotSelectedSystem = selectedSystems.length !== 1;
 
-  const lazyDeleteValue = useMemo(() => {
-    const setting = currentSettings.find(setting => setting.key === LAZY_DELETE_SIGNATURES_SETTING);
-    return typeof setting?.value === 'boolean' ? setting.value : false;
-  }, [currentSettings]);
-
-  const deletionTimingValue = useMemo(() => {
-    const setting = currentSettings.find(setting => setting.key === DELETION_TIMING_SETTING);
-    return typeof setting?.value === 'number' ? setting.value : DELETION_TIMING_IMMEDIATE;
-  }, [currentSettings]);
-
-  const colorByTypeValue = useMemo(() => {
-    const setting = currentSettings.find(setting => setting.key === COLOR_BY_TYPE_SETTING);
-    return typeof setting?.value === 'boolean' ? setting.value : false;
-  }, [currentSettings]);
-
-  const handleSettingsChange = useCallback((newSettings: Setting[]) => {
-    setCurrentSettings(newSettings as ExtendedSetting[]);
+  const handleSettingsChange = useCallback((newSettings: SignatureSettingsType) => {
+    setCurrentSettings(newSettings);
     setVisible(false);
   }, []);
 
   const handleLazyDeleteChange = useCallback((value: boolean) => {
-    setCurrentSettings(prevSettings =>
-      prevSettings.map(setting => (setting.key === LAZY_DELETE_SIGNATURES_SETTING ? { ...setting, value } : setting)),
-    );
+    setCurrentSettings(prev => ({ ...prev, [SETTINGS_KEYS.LAZY_DELETE_SIGNATURES]: value }));
   }, []);
 
-  const containerRef = useRef<HTMLDivElement>(null);
-  const isCompact = useMaxWidth(containerRef, COMPACT_MAX_WIDTH);
-
   useHotkey(true, ['z'], event => {
     if (pendingSigs.length > 0) {
       event.preventDefault();
       event.stopPropagation();
       undoPendingFnRef.current();
       setPendingSigs([]);
-      setMinPendingTimeRemaining(undefined);
+      setPendingTimeRemaining(undefined);
     }
   });
 
   const handleUndoClick = useCallback(() => {
     undoPendingFnRef.current();
     setPendingSigs([]);
-    setMinPendingTimeRemaining(undefined);
+    setPendingTimeRemaining(undefined);
   }, []);
 
   const handleSettingsButtonClick = useCallback(() => {
     setVisible(true);
   }, []);
 
-  const handlePendingChange = useCallback((newPending: SystemSignature[], newUndo: () => void) => {
-    setPendingSigs(prev => {
-      if (newPending.length === prev.length && newPending.every(np => prev.some(pp => pp.eve_id === np.eve_id))) {
-        return prev;
-      }
-      return newPending;
-    });
-    undoPendingFnRef.current = newUndo;
-  }, []);
+  const handlePendingChange = useCallback(
+    (pending: React.MutableRefObject<Record<string, ExtendedSystemSignature>>, newUndo: () => void) => {
+      setPendingSigs(() => {
+        return Object.values(pending.current).filter(sig => sig.pendingDeletion);
+      });
+      undoPendingFnRef.current = newUndo;
+    },
+    [],
+  );
 
   // Calculate the minimum time remaining for any pending signature
   useEffect(() => {
     if (pendingSigs.length === 0) {
-      setMinPendingTimeRemaining(undefined);
+      setPendingTimeRemaining(undefined);
       return;
     }
 
-    const calculateTimeRemaining = () => {
-      const now = Date.now();
-      let minTime: number | undefined = undefined;
-
-      pendingSigs.forEach(sig => {
-        const extendedSig = sig as unknown as { pendingUntil?: number };
-        if (extendedSig.pendingUntil && (minTime === undefined || extendedSig.pendingUntil - now < minTime)) {
-          minTime = extendedSig.pendingUntil - now;
-        }
-      });
-
-      setMinPendingTimeRemaining(minTime && minTime > 0 ? minTime : undefined);
+    const calculate = () => {
+      setPendingTimeRemaining(() => calculateTimeRemaining(pendingSigs));
     };
 
-    calculateTimeRemaining();
-    const interval = setInterval(calculateTimeRemaining, 1000);
+    calculate();
+    const interval = setInterval(calculate, 1000);
     return () => clearInterval(interval);
   }, [pendingSigs]);
 
   return (
     <Widget
       label={
-        <div ref={containerRef} className="w-full">
-          {renderHeaderLabel({
-            systemId,
-            isNotSelectedSystem,
-            isCompact,
-            sigCount,
-            lazyDeleteValue,
-            pendingCount: pendingSigs.length,
-            pendingTimeRemaining: minPendingTimeRemaining,
-            onLazyDeleteChange: handleLazyDeleteChange,
-            onUndoClick: handleUndoClick,
-            onSettingsClick: handleSettingsButtonClick,
-          })}
-        </div>
+        <SystemSignaturesHeader
+          sigCount={sigCount}
+          lazyDeleteValue={currentSettings[SETTINGS_KEYS.LAZY_DELETE_SIGNATURES] as boolean}
+          pendingCount={pendingSigs.length}
+          pendingTimeRemaining={pendingTimeRemaining}
+          onLazyDeleteChange={handleLazyDeleteChange}
+          onUndoClick={handleUndoClick}
+          onSettingsClick={handleSettingsButtonClick}
+        />
       }
       windowId={SIGNATURE_WINDOW_ID}
     >
@@ -246,11 +118,15 @@ export const SystemSignatures: React.FC = () => {
         <SystemSignaturesContent
           systemId={systemId}
           settings={currentSettings}
+          deletionTiming={
+            SIGNATURE_DELETION_TIMEOUTS[
+              (currentSettings[SETTINGS_KEYS.DELETION_TIMING] as keyof typeof SIGNATURE_DELETION_TIMEOUTS) ||
+                SIGNATURES_DELETION_TIMING.DEFAULT
+            ] as number
+          }
           onLazyDeleteChange={handleLazyDeleteChange}
           onCountChange={handleSigCountChange}
           onPendingChange={handlePendingChange}
-          deletionTiming={deletionTimingValue}
-          colorByType={colorByTypeValue}
         />
       )}
       {visible && (

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

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

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

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

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

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

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

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

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

@@ -1,36 +1,4 @@
-.pendingDeletion {
-  background-color: rgba(248, 113, 113, 0.4);
-  transition: background-color 0.2s ease;
-}
-
-.pendingDeletion td {
-  background-color: rgba(248, 113, 113, 0.4);
-  transition: background-color 0.2s ease;
-}
-
-.pendingDeletion:hover {
-  background-color: rgba(248, 113, 113, 0.5);
-}
-
-.pendingDeletion:hover td {
-  background-color: rgba(248, 113, 113, 0.5);
-}
-
-.Table thead tr {
-  font-size: 12px !important;    
-  line-height: 1.333;     
-}
-
 .TableRowCompact {
   font-size: 12px !important;
   line-height: 1.333;
 }
-
-.Table td {
-  padding: 2px;
-  height: 25px;  
-  border: 1px solid #383838;
-  box-sizing: border-box;
-}
-
-

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

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

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

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

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

@@ -1,69 +0,0 @@
-import { useState, useCallback, useRef } from 'react';
-import { ExtendedSystemSignature, schedulePendingAdditionForSig } from '../helpers/contentHelpers';
-import { UsePendingAdditionParams } from './types';
-import { FINAL_DURATION_MS } from '../constants';
-
-export function usePendingAdditions({ setSignatures, deletionTiming }: UsePendingAdditionParams) {
-  const [pendingUndoAdditions, setPendingUndoAdditions] = useState<ExtendedSystemSignature[]>([]);
-  const pendingAdditionMapRef = useRef<Record<string, { finalUntil: number; finalTimeoutId: number }>>({});
-
-  // Use the provided deletion timing or fall back to the default
-  const finalDuration = deletionTiming !== undefined ? deletionTiming : FINAL_DURATION_MS;
-
-  const processAddedSignatures = useCallback(
-    (added: ExtendedSystemSignature[]) => {
-      if (!added.length) return;
-
-      // If duration is 0, don't show pending state
-      if (finalDuration === 0) {
-        setSignatures(prev => [
-          ...prev,
-          ...added.map(sig => ({
-            ...sig,
-            pendingAddition: false,
-          })),
-        ]);
-        return;
-      }
-
-      const now = Date.now();
-      setSignatures(prev => [
-        ...prev,
-        ...added.map(sig => ({
-          ...sig,
-          pendingAddition: true,
-          pendingUntil: now + finalDuration,
-        })),
-      ]);
-      added.forEach(sig => {
-        schedulePendingAdditionForSig(
-          sig,
-          finalDuration,
-          setSignatures,
-          pendingAdditionMapRef,
-          setPendingUndoAdditions,
-        );
-      });
-    },
-    [setSignatures, finalDuration],
-  );
-
-  const clearPendingAdditions = useCallback(() => {
-    Object.values(pendingAdditionMapRef.current).forEach(({ finalTimeoutId }) => {
-      clearTimeout(finalTimeoutId);
-    });
-    pendingAdditionMapRef.current = {};
-    setSignatures(prev =>
-      prev.map(x => (x.pendingAddition ? { ...x, pendingAddition: false, pendingUntil: undefined } : x)),
-    );
-    setPendingUndoAdditions([]);
-  }, [setSignatures]);
-
-  return {
-    pendingUndoAdditions,
-    setPendingUndoAdditions,
-    pendingAdditionMapRef,
-    processAddedSignatures,
-    clearPendingAdditions,
-  };
-}

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

@@ -1,16 +1,19 @@
-import { useState, useCallback } from 'react';
+import { useCallback, useRef, useEffect } from 'react';
 import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
-import { ExtendedSystemSignature, prepareUpdatePayload, scheduleLazyDeletionTimers } from '../helpers';
+import { prepareUpdatePayload, scheduleLazyTimers } from '../helpers';
 import { UsePendingDeletionParams } from './types';
 import { FINAL_DURATION_MS } from '../constants';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { ExtendedSystemSignature } from '@/hooks/Mapper/types';
 
-export function usePendingDeletions({ systemId, setSignatures, deletionTiming }: UsePendingDeletionParams) {
+export function usePendingDeletions({
+  systemId,
+  setSignatures,
+  deletionTiming,
+  onPendingChange,
+}: UsePendingDeletionParams) {
   const { outCommand } = useMapRootState();
-  const [localPendingDeletions, setLocalPendingDeletions] = useState<ExtendedSystemSignature[]>([]);
-  const [pendingDeletionMap, setPendingDeletionMap] = useState<
-    Record<string, { finalUntil: number; finalTimeoutId: number }>
-  >({});
+  const pendingDeletionMapRef = useRef<Record<string, ExtendedSystemSignature>>({});
 
   // Use the provided deletion timing or fall back to the default
   const finalDuration = deletionTiming !== undefined ? deletionTiming : FINAL_DURATION_MS;
@@ -36,15 +39,17 @@ export function usePendingDeletions({ systemId, setSignatures, deletionTiming }:
       const processedRemoved = removed.map(r => ({
         ...r,
         pendingDeletion: true,
-        pendingAddition: false,
         pendingUntil: now + finalDuration,
       }));
-      setLocalPendingDeletions(prev => [...prev, ...processedRemoved]);
+      pendingDeletionMapRef.current = {
+        ...pendingDeletionMapRef.current,
+        ...processedRemoved.reduce((acc: any, sig) => {
+          acc[sig.eve_id] = sig;
+          return acc;
+        }, {}),
+      };
 
-      outCommand({
-        type: OutCommand.updateSignatures,
-        data: prepareUpdatePayload(systemId, added, updated, []),
-      });
+      onPendingChange?.(pendingDeletionMapRef, clearPendingDeletions);
 
       setSignatures(prev =>
         prev.map(sig => {
@@ -55,37 +60,35 @@ export function usePendingDeletions({ systemId, setSignatures, deletionTiming }:
         }),
       );
 
-      scheduleLazyDeletionTimers(
+      scheduleLazyTimers(
         processedRemoved,
-        setPendingDeletionMap,
+        pendingDeletionMapRef,
         async sig => {
           await outCommand({
             type: OutCommand.updateSignatures,
             data: prepareUpdatePayload(systemId, [], [], [sig]),
           });
-          setLocalPendingDeletions(prev => prev.filter(x => x.eve_id !== sig.eve_id));
+          delete pendingDeletionMapRef.current[sig.eve_id];
           setSignatures(prev => prev.filter(x => x.eve_id !== sig.eve_id));
+          onPendingChange?.(pendingDeletionMapRef, clearPendingDeletions);
         },
         finalDuration,
       );
     },
-    [systemId, outCommand, setSignatures, finalDuration],
+    [systemId, outCommand, finalDuration],
   );
 
   const clearPendingDeletions = useCallback(() => {
-    Object.values(pendingDeletionMap).forEach(({ finalTimeoutId }) => clearTimeout(finalTimeoutId));
-    setPendingDeletionMap({});
-    setSignatures(prev =>
-      prev.map(x => (x.pendingDeletion ? { ...x, pendingDeletion: false, pendingUntil: undefined } : x)),
-    );
-    setLocalPendingDeletions([]);
-  }, [pendingDeletionMap, setSignatures]);
+    Object.values(pendingDeletionMapRef.current).forEach(({ finalTimeoutId }) => {
+      clearTimeout(finalTimeoutId);
+    });
+    pendingDeletionMapRef.current = {};
+    setSignatures(prev => prev.map(x => (x.pendingDeletion ? { ...x, pendingDeletion: false } : x)));
+    onPendingChange?.(pendingDeletionMapRef, clearPendingDeletions);
+  }, []);
 
   return {
-    localPendingDeletions,
-    setLocalPendingDeletions,
-    pendingDeletionMap,
-    setPendingDeletionMap,
+    pendingDeletionMapRef,
     processRemovedSignatures,
     clearPendingDeletions,
   };

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

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

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

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

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

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

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

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

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/helpers/parserHelper.ts

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useMemo } from 'react';
 import clsx from 'clsx';
 import { DetailedKill } from '@/hooks/Mapper/types/kills';
 import {
@@ -14,14 +14,15 @@ import {
 import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
 import classes from './KillRowDetail.module.scss';
 import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
+import { WithClassName } from '@/hooks/Mapper/types/common.ts';
 
-export interface CompactKillRowProps {
+export type CompactKillRowProps = {
   killDetails: DetailedKill;
   systemName: string;
   onlyOneSystem: boolean;
-}
+} & WithClassName;
 
-export const KillRowDetail: React.FC<CompactKillRowProps> = ({ killDetails, systemName, onlyOneSystem }) => {
+export const KillRowDetail = ({ killDetails, systemName, onlyOneSystem, className }: CompactKillRowProps) => {
   const {
     killmail_id = 0,
     // Victim data
@@ -80,13 +81,24 @@ export const KillRowDetail: React.FC<CompactKillRowProps> = ({ killDetails, syst
     'Victim',
   );
 
-  const { url: attackerPrimaryImageUrl, tooltip: attackerPrimaryTooltip } = getAttackerPrimaryImageAndTooltip(
-    attackerIsNpc,
-    attackerAllianceLogoUrl,
-    attackerCorpLogoUrl,
-    final_blow_alliance_name,
-    final_blow_corp_name,
-    final_blow_ship_type_id,
+  const { url: attackerPrimaryImageUrl, tooltip: attackerPrimaryTooltip } = useMemo(
+    () =>
+      getAttackerPrimaryImageAndTooltip(
+        attackerIsNpc,
+        attackerAllianceLogoUrl,
+        attackerCorpLogoUrl,
+        final_blow_alliance_name,
+        final_blow_corp_name,
+        final_blow_ship_type_id,
+      ),
+    [
+      attackerAllianceLogoUrl,
+      attackerCorpLogoUrl,
+      attackerIsNpc,
+      final_blow_alliance_name,
+      final_blow_corp_name,
+      final_blow_ship_type_id,
+    ],
   );
 
   // Define attackerTicker to use the alliance ticker if available, otherwise the corp ticker.
@@ -100,6 +112,8 @@ export const KillRowDetail: React.FC<CompactKillRowProps> = ({ killDetails, syst
       className={clsx(
         'h-10 flex items-center border-b border-stone-800',
         'text-xs whitespace-nowrap overflow-hidden leading-none',
+        'px-1',
+        className,
       )}
     >
       {/* Victim Section */}
@@ -142,12 +156,14 @@ export const KillRowDetail: React.FC<CompactKillRowProps> = ({ killDetails, syst
           {victim_char_name}
           <span className="text-stone-400"> / {victimAffiliationTicker}</span>
         </div>
-        <div className="truncate text-stone-300">
-          {victim_ship_name}
+        <div className="truncate text-stone-300 flex items-center gap-1">
+          <span className="text-stone-400 overflow-hidden text-ellipsis whitespace-nowrap max-w-[140px]">
+            {victim_ship_name}
+          </span>
           {killValueFormatted && (
             <>
-              <span className="ml-1 text-stone-400">/</span>
-              <span className="ml-1 text-green-400">{killValueFormatted}</span>
+              <span className="text-stone-400">/</span>
+              <span className="text-green-400">{killValueFormatted}</span>
             </>
           )}
         </div>

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

@@ -1,10 +1,9 @@
 import { useCallback, useMemo, useState, useEffect, useRef } from 'react';
 import debounce from 'lodash.debounce';
-import { Commands, OutCommand } from '@/hooks/Mapper/types/mapHandlers';
+import { 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;
@@ -29,10 +28,6 @@ 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;
@@ -41,32 +36,6 @@ export function useSystemKills({ systemId, outCommand, showAllVisible = false, s
 
   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)));

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

@@ -4,10 +4,9 @@ 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) {
+export function useSystemKillsItemTemplate(onlyOneSystem: boolean) {
   return useCallback(
-    (kill: DetailedKill, options: VirtualScrollerTemplateOptions) =>
-      KillItemTemplate(systemNameMap, onlyOneSystem, kill, options),
-    [systemNameMap, onlyOneSystem],
+    (kill: DetailedKill, options: VirtualScrollerTemplateOptions) => KillItemTemplate(onlyOneSystem, kill, options),
+    [onlyOneSystem],
   );
 }

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

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

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

@@ -3,4 +3,4 @@ export * from './SystemInfo';
 export * from './RoutesWidget';
 export * from './SystemSignatures';
 export * from './SystemStructures';
-export * from './SystemKills';
+export * from './WSystemKills';

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

@@ -8,10 +8,11 @@ import { OnTheMap, RightBar } from '@/hooks/Mapper/components/mapRootContent/com
 import { MapContextMenu } from '@/hooks/Mapper/components/mapRootContent/components/MapContextMenu/MapContextMenu.tsx';
 import { useSkipContextMenu } from '@/hooks/Mapper/hooks/useSkipContextMenu';
 import { MapSettings } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings';
-import { CharacterActivity } from '@/hooks/Mapper/components/mapRootContent/components/CharacterActivity/CharacterActivity';
-import { TrackAndFollow } from '@/hooks/Mapper/components/mapRootContent/components/TrackAndFollow/TrackAndFollow';
+import { CharacterActivity } from '@/hooks/Mapper/components/mapRootContent/components/CharacterActivity';
 import { useCharacterActivityHandlers } from './hooks/useCharacterActivityHandlers';
-import { useTrackAndFollowHandlers } from './hooks/useTrackAndFollowHandlers';
+import { TrackingDialog } from '@/hooks/Mapper/components/mapRootContent/components/TrackingDialog';
+import { useMapEventListener } from '@/hooks/Mapper/events';
+import { Commands } from '@/hooks/Mapper/types';
 
 export interface MapRootContentProps {}
 
@@ -19,18 +20,28 @@ export interface MapRootContentProps {}
 export const MapRootContent = ({}: MapRootContentProps) => {
   const { interfaceSettings, data } = useMapRootState();
   const { isShowMenu } = interfaceSettings;
-  const { showCharacterActivity, showTrackAndFollow } = data;
+  const { showCharacterActivity } = data;
   const { handleHideCharacterActivity } = useCharacterActivityHandlers();
-  const { handleHideTracking } = useTrackAndFollowHandlers();
 
   const themeClass = `${interfaceSettings.theme ?? 'default'}-theme`;
 
   const [showOnTheMap, setShowOnTheMap] = useState(false);
   const [showMapSettings, setShowMapSettings] = useState(false);
+  const [showTrackingDialog, setShowTrackingDialog] = useState(false);
+
+  /* Important Notice - this solution needs for use one instance of MapInterface */
   const mapInterface = <MapInterface />;
 
   const handleShowOnTheMap = useCallback(() => setShowOnTheMap(true), []);
   const handleShowMapSettings = useCallback(() => setShowMapSettings(true), []);
+  const handleShowTrackingDialog = useCallback(() => setShowTrackingDialog(true), []);
+
+  useMapEventListener(event => {
+    if (event.name === Commands.showTracking) {
+      setShowTrackingDialog(true);
+      return true;
+    }
+  });
 
   useSkipContextMenu();
 
@@ -44,13 +55,21 @@ export const MapRootContent = ({}: MapRootContentProps) => {
               {mapInterface}
             </div>
             <div className="absolute top-0 right-0 w-14 h-[calc(100%+3.5rem)] pointer-events-auto">
-              <RightBar onShowOnTheMap={handleShowOnTheMap} onShowMapSettings={handleShowMapSettings} />
+              <RightBar
+                onShowOnTheMap={handleShowOnTheMap}
+                onShowMapSettings={handleShowMapSettings}
+                onShowTrackingDialog={handleShowTrackingDialog}
+              />
             </div>
           </div>
         ) : (
           <div className="absolute top-0 left-14 w-[calc(100%-3.5rem)] h-[calc(100%-3.5rem)] pointer-events-none">
             <Topbar>
-              <MapContextMenu onShowOnTheMap={handleShowOnTheMap} onShowMapSettings={handleShowMapSettings} />
+              <MapContextMenu
+                onShowOnTheMap={handleShowOnTheMap}
+                onShowMapSettings={handleShowMapSettings}
+                onShowTrackingDialog={handleShowTrackingDialog}
+              />
             </Topbar>
             {mapInterface}
           </div>
@@ -60,7 +79,9 @@ export const MapRootContent = ({}: MapRootContentProps) => {
         {showCharacterActivity && (
           <CharacterActivity visible={showCharacterActivity} onHide={handleHideCharacterActivity} />
         )}
-        {showTrackAndFollow && <TrackAndFollow visible={showTrackAndFollow} onHide={handleHideTracking} />}
+        {showTrackingDialog && (
+          <TrackingDialog visible={showTrackingDialog} onHide={() => setShowTrackingDialog(false)} />
+        )}
       </Layout>
     </div>
   );

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

@@ -1,58 +0,0 @@
-:global {
-  .p-datatable .p-datatable-thead > tr > th {
-    text-align: center;
-    white-space: normal;
-    overflow: visible;
-    height: auto;
-  }
-
-  .p-datatable .p-datatable-tbody > tr > td {
-    padding: 2px;
-  }
-
-  .p-datatable {
-    width: 100%;
-    border: none;
-  }
-
-  .p-datatable-wrapper {
-    border: none !important;
-  }
-}
-
-.spinnerContainer {
-  width: 50px;
-  height: 50px;
-}
-
-.columnHeader {
-  text-align: center;
-  font-weight: 600;
-  font-size: 0.75rem; /* text-xs */
-  white-space: normal !important;
-  overflow: visible !important;
-}
-
-.numericColumnHeader {
-  padding: 2px !important;
-}
-
-.dataTable {
-  width: 100%;
-  border: none;
-}
-
-.cellContent {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  overflow: hidden;
-  padding: 2px;
-}
-
-.numericValueCell {
-  text-align: center;
-  font-size: 0.75rem; /* text-xs */
-  font-weight: 500;
-  white-space: nowrap;
-}

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

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

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

@@ -0,0 +1,71 @@
+import { ProgressSpinner } from 'primereact/progressspinner';
+import { DataTable } from 'primereact/datatable';
+import {
+  getRowClassName,
+  renderCharacterTemplate,
+  renderValueTemplate,
+} from '@/hooks/Mapper/components/mapRootContent/components/CharacterActivity/helpers.tsx';
+import { Column } from 'primereact/column';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useMemo } from 'react';
+
+export const CharacterActivityContent = () => {
+  const {
+    data: { characterActivityData },
+  } = useMapRootState();
+
+  const activity = useMemo(() => characterActivityData?.activity || [], [characterActivityData]);
+  const loading = useMemo(() => characterActivityData?.loading !== false, [characterActivityData]);
+
+  if (loading) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full w-full">
+        <ProgressSpinner className="w-[50px] h-[50px]" strokeWidth="4" />
+        <div className="mt-4 text-text-color-secondary text-sm">Loading character activity data...</div>
+      </div>
+    );
+  }
+
+  if (activity.length === 0) {
+    return <div className="p-8 text-center text-text-color-secondary italic">No character activity data available</div>;
+  }
+
+  return (
+    <DataTable
+      value={activity}
+      scrollable
+      className="w-full"
+      tableClassName="w-full border-0"
+      emptyMessage="No character activity data available"
+      sortField="passages"
+      sortOrder={-1}
+      size="small"
+      rowClassName={getRowClassName}
+      rowHover
+    >
+      <Column field="character_name" header="Character" body={renderCharacterTemplate} sortable className="!py-[6px]" />
+
+      <Column
+        field="passages"
+        header="Passages"
+        headerClassName="[&_.p-column-header-content]:justify-center"
+        body={rowData => renderValueTemplate(rowData, 'passages')}
+        sortable
+      />
+      <Column
+        field="connections"
+        header="Connections"
+        headerClassName="[&_.p-column-header-content]:justify-center"
+        body={rowData => renderValueTemplate(rowData, 'connections')}
+        sortable
+      />
+      <Column
+        field="signatures"
+        header="Signatures"
+        headerClassName="[&_.p-column-header-content]:justify-center"
+        body={rowData => renderValueTemplate(rowData, 'signatures')}
+        sortable
+      />
+    </DataTable>
+  );
+};

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

@@ -0,0 +1,12 @@
+import { CharacterCard } from '@/hooks/Mapper/components/ui-kit';
+import { ActivitySummary } from '@/hooks/Mapper/types';
+
+export const getRowClassName = () => ['text-xs', 'leading-tight'];
+
+export const renderCharacterTemplate = (rowData: ActivitySummary) => {
+  return <CharacterCard compact isOwn {...rowData.character} />;
+};
+
+export const renderValueTemplate = (rowData: ActivitySummary, field: keyof ActivitySummary) => {
+  return <div className="tabular-nums w-full flex justify-center">{rowData[field] as number}</div>;
+};

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

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

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

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

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

@@ -11,22 +11,16 @@ import { UserPermission } from '@/hooks/Mapper/types/permissions.ts';
 export interface MapContextMenuProps {
   onShowOnTheMap?: () => void;
   onShowMapSettings?: () => void;
+  onShowTrackingDialog?: () => void;
 }
 
-export const MapContextMenu = ({ onShowOnTheMap, onShowMapSettings }: MapContextMenuProps) => {
+export const MapContextMenu = ({ onShowOnTheMap, onShowMapSettings, onShowTrackingDialog }: MapContextMenuProps) => {
   const { outCommand, setInterfaceSettings } = useMapRootState();
 
   const canTrackCharacters = useMapCheckPermissions([UserPermission.TRACK_CHARACTER]);
 
   const menuRight = useRef<Menu>(null);
 
-  const handleAddCharacter = useCallback(() => {
-    outCommand({
-      type: OutCommand.showTracking,
-      data: {},
-    });
-  }, [outCommand]);
-
   const handleShowActivity = useCallback(() => {
     outCommand({
       type: OutCommand.showActivity,
@@ -40,8 +34,8 @@ export const MapContextMenu = ({ onShowOnTheMap, onShowMapSettings }: MapContext
         {
           label: 'Tracking',
           icon: 'pi pi-user-plus',
-          command: handleAddCharacter,
-          visible: true,
+          command: onShowTrackingDialog,
+          visible: canTrackCharacters,
         },
         {
           label: 'Character Activity',
@@ -76,7 +70,7 @@ export const MapContextMenu = ({ onShowOnTheMap, onShowMapSettings }: MapContext
     ).filter(item => item.visible);
   }, [
     canTrackCharacters,
-    handleAddCharacter,
+    onShowTrackingDialog,
     handleShowActivity,
     onShowMapSettings,
     onShowOnTheMap,