chore: release version v1.60.0

* 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,15 +1,30 @@
 {
   "name": "wanderer-dev",
   "dockerComposeFile": ["./docker-compose.yml"],
-  "extensions": ["jakebecker.elixir-ls"],
+  "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

.env.example

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

.github/workflows/build.yml

@@ -1,8 +1,6 @@
 name: Build
 
 on:
-  pull_request:
-    types: [opened, synchronize, reopened, labeled, unlabeled]
   push:
     branches:
       - main
@@ -41,8 +39,28 @@ jobs:
         env:
           FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
 
+  manual-approval:
+    name: Manual Approval
+    runs-on: ubuntu-latest
+    needs: deploy-test
+    if: success()
+
+    permissions:
+      issues: write
+
+    steps:
+      - name: Await Manual Approval
+        uses: trstringer/manual-approval@v1
+        with:
+          secret: ${{ github.TOKEN }}
+          approvers: DmitryPopov
+          minimum-approvals: 1
+          issue-title: "Manual Approval Required for Release"
+          issue-body: "Please approve or deny the deployment."
+
   build:
     name: 🛠 Build
+    needs: manual-approval
     runs-on: ubuntu-22.04
     if: ${{ (github.ref == 'refs/heads/main') && github.event_name == 'push' }}
     permissions:
@@ -78,22 +96,23 @@ jobs:
           fetch-depth: 0
       - name: 😅 Cache deps
         id: cache-deps
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         env:
           cache-name: cache-elixir-deps
         with:
-          path: deps
-          key: ${{ runner.os }}-mix-${{ env.cache-name }}-${{ hashFiles('**/mix.lock') }}
+          path: |
+            deps
+          key: ${{ runner.os }}-mix-${{ matrix.elixir }}-${{ matrix.otp }}-${{ hashFiles('**/mix.lock') }}
           restore-keys: |
-            ${{ runner.os }}-mix-${{ env.cache-name }}-
+            ${{ runner.os }}-mix-${{ matrix.elixir }}-${{ matrix.otp }}-
       - name: 😅 Cache compiled build
         id: cache-build
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         env:
           cache-name: cache-compiled-build
         with:
           path: |
-            **/_build
+            _build
           key: ${{ runner.os }}-build-${{ hashFiles('**/mix.lock') }}-${{ hashFiles( '**/lib/**/*.{ex,eex}', '**/config/*.exs', '**/mix.exs' ) }}
           restore-keys: |
             ${{ runner.os }}-build-${{ hashFiles('**/mix.lock') }}-
@@ -122,6 +141,9 @@ jobs:
     name: 🛠 Build Docker Images
     needs: build
     runs-on: ubuntu-22.04
+    outputs:
+      release-tag: ${{ steps.get-latest-tag.outputs.tag }}
+      release-notes: ${{ steps.get-content.outputs.string }}
     permissions:
       checks: write
       contents: write
@@ -135,6 +157,7 @@ jobs:
       matrix:
         platform:
           - linux/amd64
+          - linux/arm64
     steps:
       - name: Prepare
         run: |
@@ -183,15 +206,28 @@ jobs:
           push: true
           context: .
           file: ./Dockerfile
-          tags: ${{ env.REGISTRY_IMAGE }}:latest,${{ env.REGISTRY_IMAGE }}:${{ steps.get-latest-tag.outputs.tag }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
           labels: ${{ steps.meta.outputs.labels }}
           platforms: ${{ matrix.platform }}
+          outputs: type=image,"name=${{ env.REGISTRY_IMAGE }}",push-by-digest=true,name-canonical=true,push=true
           build-args: |
             MIX_ENV=prod
             BUILD_METADATA=${{ steps.meta.outputs.json }}
 
-      - name: Image digest
-        run: echo ${{ steps.build.outputs.digest }}
+      - name: Export digest
+        run: |
+          mkdir -p /tmp/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "/tmp/digests/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@v4
+        with:
+          name: digests-${{ env.PLATFORM_PAIR }}
+          path: /tmp/digests/*
+          if-no-files-found: error
+          retention-days: 1
 
       - uses: markpatterson27/markdown-to-output@v1
         id: extract-changelog
@@ -211,16 +247,54 @@ jobs:
           maxLength: 500
           truncationSymbol: "…"
 
-      - name: Discord Webhook Action
-        uses: tsickert/discord-webhook@v5.3.0
+  merge:
+    runs-on: ubuntu-latest
+    needs:
+      - docker
+    steps:
+      - name: Download digests
+        uses: actions/download-artifact@v4
         with:
-          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
-          content: ${{ steps.get-content.outputs.string }}
+          path: /tmp/digests
+          pattern: digests-*
+          merge-multiple: true
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.WANDERER_DOCKER_USER }}
+          password: ${{ secrets.WANDERER_DOCKER_PASSWORD }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: |
+            ${{ env.REGISTRY_IMAGE }}
+          tags: |
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{version}},value=${{ needs.docker.outputs.release-tag }}
+
+      - name: Create manifest list and push
+        working-directory: /tmp/digests
+        run: |
+          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf '${{ env.REGISTRY_IMAGE }}@sha256:%s ' *)
+
+      - name: Inspect image
+        run: |
+          docker buildx imagetools inspect ${{ env.REGISTRY_IMAGE }}:${{ steps.meta.outputs.version }}
 
   create-release:
     name: 🏷 Create Release
     runs-on: ubuntu-22.04
-    needs: docker
+    needs: [docker, merge]
     if: ${{ github.ref == 'refs/heads/main' && github.event_name == 'push' }}
     steps:
       - name: ⬇️ Checkout repo
@@ -228,17 +302,11 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Get Release Tag
-        id: get-latest-tag
-        uses: "WyriHaximus/github-action-get-previous-tag@v1"
-        with:
-          fallback: 1.0.0
-
       - name: 🏷 Create Draft Release
         uses: softprops/action-gh-release@v1
         with:
-          tag_name: ${{ steps.get-latest-tag.outputs.tag }}
-          name: Release ${{ steps.get-latest-tag.outputs.tag }}
+          tag_name: ${{ needs.docker.outputs.release-tag }}
+          name: Release ${{ needs.docker.outputs.release-tag }}
           body: |
             ## Info
             Commit ${{ github.sha }} was deployed to `staging`. [See code diff](${{ github.event.compare }}).
@@ -248,3 +316,9 @@ jobs:
             ## How to Promote?
             In order to promote this to prod, edit the draft and press **"Publish release"**.
           draft: true
+
+      - name: Discord Webhook Action
+        uses: tsickert/discord-webhook@v5.3.0
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          content: ${{ needs.docker.outputs.release-notes }}

.gitignore

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

CHANGELOG.md

@@ -2,6 +2,984 @@
 
 <!-- changelog -->
 
+## [v1.60.0](https://github.com/wanderer-industries/wanderer/compare/v1.59.11...v1.60.0) (2025-04-17)
+
+
+
+
+### Features:
+
+* api: api showing character by user and main character (#334)
+
+* Core: force map page reload after 30 mins of user inactivity (switched browser/tab)
+
+* update character activity to use main character (#333)
+
+## [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)
+
+
+
+
+### Bug Fixes:
+
+* fix scroll and size issues with kills widget (#219)
+
+* fix scroll and size issues with kills widget
+
+## [v1.54.0](https://github.com/wanderer-industries/wanderer/compare/v1.53.4...v1.54.0) (2025-03-05)
+
+
+
+
+### Features:
+
+* added auto-refresh timeout for cloud new version updates
+
+* add selectable sig deletion timing, and color options (#208)
+
+## [v1.53.4](https://github.com/wanderer-industries/wanderer/compare/v1.53.3...v1.53.4) (2025-03-04)
+
+
+
+
+### Bug Fixes:
+
+* add retry on kills retrieval (#207)
+
+* add missing masses to wh sizes const (#215)
+
+## [v1.53.3](https://github.com/wanderer-industries/wanderer/compare/v1.53.2...v1.53.3) (2025-02-27)
+
+
+
+
+### Bug Fixes:
+
+* Map: little bit up performance for windows manager
+
+## [v1.53.2](https://github.com/wanderer-industries/wanderer/compare/v1.53.1...v1.53.2) (2025-02-27)
+
+
+
+
+## [v1.53.1](https://github.com/wanderer-industries/wanderer/compare/v1.53.0...v1.53.1) (2025-02-26)
+
+
+
+
+### Bug Fixes:
+
+* Core: Fixed map ACLs add/remove behaviour
+
+## [v1.53.0](https://github.com/wanderer-industries/wanderer/compare/v1.52.8...v1.53.0) (2025-02-26)
+
+
+
+
+### Features:
+
+* Auto-set connection EOL status and ship size when linking/editing signatures (#194)
+
+* Automatically set connection EOL status and ship size type when linking/updating signatures
+
+## [v1.52.8](https://github.com/wanderer-industries/wanderer/compare/v1.52.7...v1.52.8) (2025-02-26)
+
+
+
+
+### Bug Fixes:
+
+* Map: Added delete systems hotkey
+
+## [v1.52.7](https://github.com/wanderer-industries/wanderer/compare/v1.52.6...v1.52.7) (2025-02-24)
+
+
+
+
+### Bug Fixes:
+
+* update news image link (#204)
+
+* Map: Block map events for old client versions
+
+## [v1.52.6](https://github.com/wanderer-industries/wanderer/compare/v1.52.5...v1.52.6) (2025-02-23)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fixed delete systems on map changes
+
+## [v1.52.5](https://github.com/wanderer-industries/wanderer/compare/v1.52.4...v1.52.5) (2025-02-22)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fixed delete system on signature deletion
+
+* Map: Fixed delete system on signature deletion
+
+## [v1.52.4](https://github.com/wanderer-industries/wanderer/compare/v1.52.3...v1.52.4) (2025-02-21)
+
+
+
+
+### Bug Fixes:
+
+* signature paste for russian lang
+
+## [v1.52.3](https://github.com/wanderer-industries/wanderer/compare/v1.52.2...v1.52.3) (2025-02-21)
+
+
+
+
+### Bug Fixes:
+
+* remove signature expiration (#196)
+
+## [v1.52.2](https://github.com/wanderer-industries/wanderer/compare/v1.52.1...v1.52.2) (2025-02-21)
+
+
+
+
+### Bug Fixes:
+
+* prevent constant full signature widget rerender (#195)
+
+## [v1.52.1](https://github.com/wanderer-industries/wanderer/compare/v1.52.0...v1.52.1) (2025-02-20)
+
+
+
+
+### Bug Fixes:
+
+* proper virtual scroller usage (#192)
+
+* restore delete key functionality for nodes (#191)
+
+## [v1.52.0](https://github.com/wanderer-industries/wanderer/compare/v1.51.3...v1.52.0) (2025-02-19)
+
+
+
+
+### Features:
+
+* Map: Added map characters view
+
+## [v1.51.3](https://github.com/wanderer-industries/wanderer/compare/v1.51.2...v1.51.3) (2025-02-19)
+
+
+
+
+### Bug Fixes:
+
+* pending deletion working again (#185)
+
+## [v1.51.2](https://github.com/wanderer-industries/wanderer/compare/v1.51.1...v1.51.2) (2025-02-18)
+
+
+
+
+## [v1.51.1](https://github.com/wanderer-industries/wanderer/compare/v1.51.0...v1.51.1) (2025-02-18)
+
+
+
+
+## [v1.51.0](https://github.com/wanderer-industries/wanderer/compare/v1.50.0...v1.51.0) (2025-02-17)
+
+
+
+
+### Features:
+
+* add undo deletion for signatures (#155)
+
+* add undo for signature deletion and addition
+
+## [v1.50.0](https://github.com/wanderer-industries/wanderer/compare/v1.49.0...v1.50.0) (2025-02-17)
+
+
+
+
+### Features:
+
+* allow addition of characters to acl without preregistration (#176)
+
+## [v1.49.0](https://github.com/wanderer-industries/wanderer/compare/v1.48.1...v1.49.0) (2025-02-15)
+
+
+
+
+### Features:
+
+* add api for acl management (#171)
+
+## [v1.48.1](https://github.com/wanderer-industries/wanderer/compare/v1.48.0...v1.48.1) (2025-02-13)
+
+
+
+
+## [v1.48.0](https://github.com/wanderer-industries/wanderer/compare/v1.47.6...v1.48.0) (2025-02-12)
+
+
+
+
+### Features:
+
+* autosize local character tooltip and increase hover target (#165)
+
+## [v1.47.6](https://github.com/wanderer-industries/wanderer/compare/v1.47.5...v1.47.6) (2025-02-12)
+
+
+
+
+## [v1.47.5](https://github.com/wanderer-industries/wanderer/compare/v1.47.4...v1.47.5) (2025-02-12)
+
+
+
+
+### Bug Fixes:
+
+* sync kills count bookmark and the kills widget (#160)
+
+* lazy load kills widget
+
+## [v1.47.4](https://github.com/wanderer-industries/wanderer/compare/v1.47.3...v1.47.4) (2025-02-11)
+
+
+
+
+## [v1.47.3](https://github.com/wanderer-industries/wanderer/compare/v1.47.2...v1.47.3) (2025-02-11)
+
+
+
+
+## [v1.47.2](https://github.com/wanderer-industries/wanderer/compare/v1.47.1...v1.47.2) (2025-02-11)
+
+
+
+
+### Bug Fixes:
+
+* lazy load kills widget (#157)
+
+* lazy load kills widget
+
+* updates for eslint and pr feedback
+
+## [v1.47.1](https://github.com/wanderer-industries/wanderer/compare/v1.47.0...v1.47.1) (2025-02-09)
+
+
+
+
+### Bug Fixes:
+
+* Connections: Fixed connections auto-refresh after update
+
+## [v1.47.0](https://github.com/wanderer-industries/wanderer/compare/v1.46.1...v1.47.0) (2025-02-09)
+
+
+
+
+### Features:
+
+* Map: Added check for active map subscription to using Map APIs
+
+## [v1.46.1](https://github.com/wanderer-industries/wanderer/compare/v1.46.0...v1.46.1) (2025-02-09)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fixed a lot of design and architect issues after last milli… (#154)
+
+* Map: Fixed a lot of design and architect issues after last million PRs
+
+* Map: removed unnecessary hooks styles
+
+## [v1.46.0](https://github.com/wanderer-industries/wanderer/compare/v1.45.5...v1.46.0) (2025-02-08)
+
+
+
+
+### Features:
+
+* Added WANDERER_RESTRICT_MAPS_CREATION env support
+
+## [v1.45.5](https://github.com/wanderer-industries/wanderer/compare/v1.45.4...v1.45.5) (2025-02-07)
+
+
+
+
+### Bug Fixes:
+
+* restore styling for local characters list (#152)
+
+## [v1.45.4](https://github.com/wanderer-industries/wanderer/compare/v1.45.3...v1.45.4) (2025-02-07)
+
+
+
+
+### Bug Fixes:
+
+* remove snap to grid customization (#153)
+
+## [v1.45.3](https://github.com/wanderer-industries/wanderer/compare/v1.45.2...v1.45.3) (2025-02-05)
+
+
+
+
+### Bug Fixes:
+
+* color and formatting fixes for local character (#150)
+
+## [v1.45.2](https://github.com/wanderer-industries/wanderer/compare/v1.45.1...v1.45.2) (2025-02-05)
+
+
+
+
+### Bug Fixes:
+
+* fix route list hover and on the map character list (#149)
+
+* correct formatting for on the map character list
+
+* fix hover for route list
+
+## [v1.45.1](https://github.com/wanderer-industries/wanderer/compare/v1.45.0...v1.45.1) (2025-02-05)
+
+
+
+
+### Bug Fixes:
+
+* kill count subscript position on firefox, and remove kill filter for single system (#148)
+
+## [v1.45.0](https://github.com/wanderer-industries/wanderer/compare/v1.44.9...v1.45.0) (2025-02-05)
+
+
+
+
+### Features:
+
+* allow filtering of k-space kills (#147)
+
+## [v1.44.9](https://github.com/wanderer-industries/wanderer/compare/v1.44.8...v1.44.9) (2025-02-04)
+
+
+
+
+### Bug Fixes:
+
+* improve local character header shrink behavior (#146)
+
+## [v1.44.8](https://github.com/wanderer-industries/wanderer/compare/v1.44.7...v1.44.8) (2025-02-04)
+
+
+
+
+### Bug Fixes:
+
+* Core: include external libraries in build
+
+## [v1.44.7](https://github.com/wanderer-industries/wanderer/compare/v1.44.6...v1.44.7) (2025-02-04)
+
+
+
+
+### Bug Fixes:
+
+* Core: include external libraries in build
+
+## [v1.44.6](https://github.com/wanderer-industries/wanderer/compare/v1.44.5...v1.44.6) (2025-02-04)
+
+
+
+
+## [v1.44.5](https://github.com/wanderer-industries/wanderer/compare/v1.44.4...v1.44.5) (2025-02-04)
+
+
+
+
+### Bug Fixes:
+
+* include category param in search cache key (#144)
+
+## [v1.44.4](https://github.com/wanderer-industries/wanderer/compare/v1.44.3...v1.44.4) (2025-02-02)
+
+
+
+
+## [v1.44.3](https://github.com/wanderer-industries/wanderer/compare/v1.44.2...v1.44.3) (2025-02-02)
+
+
+
+
+### Bug Fixes:
+
+* restored kills lightning bolt functionality (#143)
+
+## [v1.44.2](https://github.com/wanderer-industries/wanderer/compare/v1.44.1...v1.44.2) (2025-02-02)
+
+
+
+
+## [v1.44.1](https://github.com/wanderer-industries/wanderer/compare/v1.44.0...v1.44.1) (2025-02-01)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fixed problem with windows. (#140)
+
+* Map: Fixed problem with windows.
+
+* Core: Added min heigth for body
+
+## [v1.44.0](https://github.com/wanderer-industries/wanderer/compare/v1.43.9...v1.44.0) (2025-02-01)
+
+
+
+
+### Features:
+
+* add news post for zkill widget
+
+* add zkill widget
+
+### Bug Fixes:
+
+* design feedback patch
+
+* removed unneeded event handler
+
+## [v1.43.9](https://github.com/wanderer-industries/wanderer/compare/v1.43.8...v1.43.9) (2025-01-30)
+
+
+
+
+### Bug Fixes:
+
+* Core: Add discord link to 'Like' icon on main interface
+
+## [v1.43.8](https://github.com/wanderer-industries/wanderer/compare/v1.43.7...v1.43.8) (2025-01-26)
+
+
+
+
+### Bug Fixes:
+
+* Core: Update shuttered constellations (required EVE DB data update on server).
+
+## [v1.43.7](https://github.com/wanderer-industries/wanderer/compare/v1.43.6...v1.43.7) (2025-01-26)
+
+
+
+
+## [v1.43.6](https://github.com/wanderer-industries/wanderer/compare/v1.43.5...v1.43.6) (2025-01-22)
+
+
+
+
+### Bug Fixes:
+
+* Widgets: Fix widgets not visible on map
+
+## [v1.43.5](https://github.com/wanderer-industries/wanderer/compare/v1.43.4...v1.43.5) (2025-01-22)
+
+
+
+
+### Bug Fixes:
+
+* Audit: Fix signature added/removed system name
+
+## [v1.43.4](https://github.com/wanderer-industries/wanderer/compare/v1.43.3...v1.43.4) (2025-01-21)
+
+
+
+
+### Bug Fixes:
+
+* improve structure widget styling (#127)
+
+## [v1.43.3](https://github.com/wanderer-industries/wanderer/compare/v1.43.2...v1.43.3) (2025-01-21)
+
+
+
+
+## [v1.43.2](https://github.com/wanderer-industries/wanderer/compare/v1.43.1...v1.43.2) (2025-01-21)
+
+
+
+
+### Bug Fixes:
+
+* prevent constraint error for follow/toggle (#132)
+
+## [v1.43.1](https://github.com/wanderer-industries/wanderer/compare/v1.43.0...v1.43.1) (2025-01-20)
+
+
+
+
+## [v1.43.0](https://github.com/wanderer-industries/wanderer/compare/v1.42.5...v1.43.0) (2025-01-20)
+
+
+
+
+### Features:
+
+* add news post for structures widget (#131)
+
+## [v1.42.5](https://github.com/wanderer-industries/wanderer/compare/v1.42.4...v1.42.5) (2025-01-20)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fix link signatures on splash. Fix deleting connection on locked system remove.
+
+## [v1.42.4](https://github.com/wanderer-industries/wanderer/compare/v1.42.3...v1.42.4) (2025-01-20)
+
+
+
+
+### Bug Fixes:
+
+* Fix system statics list (required EVE DB data update). Add system name to signature added/removed audit log
+
+## [v1.42.3](https://github.com/wanderer-industries/wanderer/compare/v1.42.2...v1.42.3) (2025-01-17)
+
+
+
+
+### Bug Fixes:
+
+* change structure tooltip to avoid paste confusion (#125)
+
+* change structure tooltip to avoid paste confusion
+
+* clarify use of evetime and use primereact calendar
+
+## [v1.42.2](https://github.com/wanderer-industries/wanderer/compare/v1.42.1...v1.42.2) (2025-01-16)
+
+
+
+
+## [v1.42.1](https://github.com/wanderer-industries/wanderer/compare/v1.42.0...v1.42.1) (2025-01-16)
+
+
+
+
+### Bug Fixes:
+
+* Map: Remove linked sig ID if system containing signature removed from map
+
+## [v1.42.0](https://github.com/wanderer-industries/wanderer/compare/v1.41.0...v1.42.0) (2025-01-16)
+
+
+
+
+### Features:
+
+* Audit: Add 'Signatures added/removed' map audit events
+
+## [v1.41.0](https://github.com/wanderer-industries/wanderer/compare/v1.40.7...v1.41.0) (2025-01-16)
+
+
+
+
+### Features:
+
+* Audit: Add 'ACL added/removed' map audit events
+
+## [v1.40.7](https://github.com/wanderer-industries/wanderer/compare/v1.40.6...v1.40.7) (2025-01-15)
+
+
+
+
+## [v1.40.6](https://github.com/wanderer-industries/wanderer/compare/v1.40.5...v1.40.6) (2025-01-15)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fix follow mode
+
+* center system is not selected text for structures (#122)
+
+* Map: Fix system revert issues
+
+* Map: Fix issues with splashing signatures select & sig ID in temp names
+
+## [v1.40.5](https://github.com/wanderer-industries/wanderer/compare/v1.40.4...v1.40.5) (2025-01-14)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fix follow mode
+
+## [v1.40.4](https://github.com/wanderer-industries/wanderer/compare/v1.40.3...v1.40.4) (2025-01-14)
+
+
+
+
+### Bug Fixes:
+
+* center system is not selected text for structures (#122)
+
+## [v1.40.3](https://github.com/wanderer-industries/wanderer/compare/v1.40.2...v1.40.3) (2025-01-14)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fix system revert issues
+
+## [v1.40.2](https://github.com/wanderer-industries/wanderer/compare/v1.40.1...v1.40.2) (2025-01-14)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fix issues with splashing signatures select & sig ID in temp names
+
+## [v1.40.1](https://github.com/wanderer-industries/wanderer/compare/v1.40.0...v1.40.1) (2025-01-14)
+
+
+
+
+## [v1.40.0](https://github.com/wanderer-industries/wanderer/compare/v1.39.3...v1.40.0) (2025-01-14)
+
+
+
+
+### Features:
+
+* add structure widget with timer and associated api
+
+## [v1.39.3](https://github.com/wanderer-industries/wanderer/compare/v1.39.2...v1.39.3) (2025-01-14)
+
+
+
+
+### Bug Fixes:
+
+* Map: Add style of corners for windows. Add ability to reset widgets. A lot of refactoring
+
+## [v1.39.2](https://github.com/wanderer-industries/wanderer/compare/v1.39.1...v1.39.2) (2025-01-13)
+
+
+
+
+## [v1.39.1](https://github.com/wanderer-industries/wanderer/compare/v1.39.0...v1.39.1) (2025-01-13)
+
+
+
+
+### Bug Fixes:
+
+* Map: New windows systems
+
+* Map: Add new windows system and removed old
+
+* Map: First prototype of windows
+
+## [v1.39.0](https://github.com/wanderer-industries/wanderer/compare/v1.38.7...v1.39.0) (2025-01-13)
+
+
+
+
+### Features:
+
+* Map: Added option to show signature ID as system temporary name part
+
+## [v1.38.7](https://github.com/wanderer-industries/wanderer/compare/v1.38.6...v1.38.7) (2025-01-12)
+
+
+
+
+## [v1.38.6](https://github.com/wanderer-industries/wanderer/compare/v1.38.5...v1.38.6) (2025-01-12)
+
+
+
+
+## [v1.38.5](https://github.com/wanderer-industries/wanderer/compare/v1.38.4...v1.38.5) (2025-01-12)
+
+
+
+
+## [v1.38.4](https://github.com/wanderer-industries/wanderer/compare/v1.38.3...v1.38.4) (2025-01-12)
+
+
+
+
+## [v1.38.3](https://github.com/wanderer-industries/wanderer/compare/v1.38.2...v1.38.3) (2025-01-12)
+
+
+
+
+## [v1.38.2](https://github.com/wanderer-industries/wanderer/compare/v1.38.1...v1.38.2) (2025-01-11)
+
+
+
+
+### Bug Fixes:
+
+* Fix connections remove timeouts
+
 ## [v1.38.1](https://github.com/wanderer-industries/wanderer/compare/v1.38.0...v1.38.1) (2025-01-10)
 
 

Dockerfile

@@ -9,6 +9,9 @@ WORKDIR /app
 # set build ENV
 ENV MIX_ENV="prod"
 
+# Set ERL_FLAGS for ARM compatibility
+ENV ERL_FLAGS="+JPperf true"
+
 # install mix dependencies
 COPY mix.exs mix.lock ./
 RUN rm -Rf _build deps && mix deps.get --only $MIX_ENV

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

README.md

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

assets/app.tsx

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

assets/css/app.css

@@ -25,6 +25,10 @@ body {
   width: 400px; /* As IE6 ignores !important it will set width as 400px; */
 }
 
+body > div:first-of-type {
+  min-height: 500px !important;
+}
+
 .lending-normal {
   font-family: 'Shentox', 'Rogan', sans-serif !important;
   font-weight: 500;
@@ -108,19 +112,19 @@ body {
 }
 
 .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 {
@@ -932,3 +936,66 @@ body {
   width: 16px;
   height: 16px;
 }
+
+.verticalTabsContainer {
+  display: flex;
+  width: 100%;
+  min-height: 300px;
+}
+.verticalTabsContainer .p-tabview {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+}
+.verticalTabsContainer .p-tabview-panels {
+  padding: 6px 1rem !important;
+  flex-grow: 1;
+  height: 100%;
+}
+.verticalTabsContainer .p-tabview-nav-container {
+  border-right: none;
+  height: 100%;
+}
+.verticalTabsContainer .p-tabview-nav {
+  flex-direction: column;
+  width: 150px;
+  min-height: 100%;
+  border: none;
+}
+.verticalTabsContainer .p-tabview-nav li {
+  width: 100%;
+  border-right: 4px solid var(--surface-hover);
+  background-color: var(--surface-card);
+  transition:
+    background-color 200ms,
+    border-right-color 200ms;
+}
+.verticalTabsContainer .p-tabview-nav li:hover {
+  background-color: var(--surface-hover);
+  border-right: 4px solid var(--surface-100);
+}
+.verticalTabsContainer .p-tabview-nav li .p-tabview-nav-link {
+  transition: color 200ms;
+  justify-content: flex-end;
+  padding: 10px;
+  background-color: initial;
+  border: none;
+  color: var(--gray-400);
+  border-radius: initial;
+  font-weight: 400;
+  margin: 0;
+}
+.verticalTabsContainer .p-tabview-nav li.p-tabview-selected {
+  background-color: var(--surface-50);
+  border-right: 4px solid var(--primary-color);
+}
+.verticalTabsContainer .p-tabview-nav li.p-tabview-selected .p-tabview-nav-link {
+  font-weight: 600;
+  color: var(--primary-color);
+}
+.verticalTabsContainer .p-tabview-nav li.p-tabview-selected:hover {
+  border-right: 4px solid var(--primary-color);
+}
+.verticalTabsContainer .p-tabview-panel {
+  flex-grow: 1;
+}

assets/js/hooks/Mapper/MapRoot.tsx

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

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

@@ -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);
 
@@ -112,3 +118,65 @@
 .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
   margin-right: 0 !important;
 }
+
+/* Fixed sizes of Input switch */
+.p-inputswitch {
+  width: 2.0rem;
+  height: 1.15rem;
+
+  .p-inputswitch-slider:before {
+    width: 0.8rem;
+    height: 0.8rem;
+    left: 0.14rem;
+    margin-top: -0.385rem;
+  }
+
+  &.p-highlight .p-inputswitch-slider:before {
+    transform: translateX(0.8rem);
+  }
+
+  &:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: rgb(255 255 255 / 21%);
+  }
+
+  &.p-highlight .p-inputswitch-slider {
+    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/hooks/useLabelsMenu/useLabelsMenu.module.scss

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

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

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

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

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

assets/js/hooks/Mapper/components/contexts/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/contexts/hooks/useWaypointMenu/useWaypointMenu.module.scss

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

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

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

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

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

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

@@ -1,173 +0,0 @@
-// feel free to rename these imports or the file path as you see fit
-import { useMemo } from 'react';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
-import { useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
-import { useDoubleClick } from '@/hooks/Mapper/hooks/useDoubleClick.ts';
-import { REGIONS_MAP, Spaces } from '@/hooks/Mapper/constants';
-import { MapSolarSystemType } from '../../map.types';
-import {
-  LABELS_INFO,
-  LABELS_ORDER,
-  getActivityType,
-} from '@/hooks/Mapper/components/map/constants.ts';
-import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace.ts';
-import { getSystemClassStyles, prepareUnsplashedChunks } from '@/hooks/Mapper/components/map/helpers';
-import { sortWHClasses } from '@/hooks/Mapper/helpers';
-import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager.ts';
-import { OutCommand } from '@/hooks/Mapper/types';
-
-const SpaceToClass: Record<string, string> = {
-  [Spaces.Caldari]: 'Caldaria',
-  [Spaces.Matar]: 'Mataria',
-  [Spaces.Amarr]: 'Amarria',
-  [Spaces.Gallente]: 'Gallente',
-};
-
-const sortedLabels = (labels: string[]) => {
-  if (!labels) return [];
-  return LABELS_ORDER.filter(x => labels.includes(x)).map(x => LABELS_INFO[x]);
-};
-
-interface UseSolarSystemNodeParams {
-  data: MapSolarSystemType;
-  selected: boolean;
-}
-
-export function useSolarSystemNode({ data, selected }: UseSolarSystemNodeParams) {
-  // 1) Bring in relevant global state
-  const { interfaceSettings } = useMapRootState();
-  const { isShowUnsplashedSignatures } = interfaceSettings;
-  const isTempSystemNameEnabled = useMapGetOption('show_temp_system_name') === 'true';
-  
-  const {
-    data: {
-      characters,
-      presentCharacters,
-      wormholesData,
-      hubs,
-      kills,
-      userCharacters,
-      isConnecting,
-      hoverNodeId,
-      visibleNodes,
-      showKSpaceBG,
-      isThickConnections,
-    },
-    outCommand,
-  } = useMapState();
-
-  // 2) Extract data from the node
-  const {
-    system_class,
-    security,
-    class_title,
-    solar_system_id,
-    statics,
-    effect_name,
-    region_name,
-    region_id,
-    is_shattered,
-    solar_system_name,
-  } = data.system_static_info;
-
-  const { locked, name, tag, status, labels, id, temporary_name: temporaryName } = data || {};
-  const signatures = data.system_signatures;
-
-  // 3) Compute derived values
-  const visible = useMemo(() => visibleNodes.has(id), [id, visibleNodes]);
-  
-  const charactersInSystem = useMemo(() => {
-    return characters
-      .filter(c => c.location?.solar_system_id === solar_system_id)
-      .filter(c => c.online);
-  }, [characters, presentCharacters, solar_system_id]);
-
-  const isWormhole = isWormholeSpace(system_class);
-  
-  const classTitleColor = useMemo(
-    () => getSystemClassStyles({ systemClass: system_class, security }),
-    [security, system_class],
-  );
-
-  const sortedStatics = useMemo(
-    () => sortWHClasses(wormholesData, statics),
-    [wormholesData, statics],
-  );
-
-  const labelsManager = useMemo(() => new LabelsManager(labels ?? ''), [labels]);
-  const labelsInfo = useMemo(() => sortedLabels(labelsManager.list), [labelsManager]);
-  const labelCustom = useMemo(() => labelsManager.customLabel, [labelsManager]);
-
-  const killsCount = useMemo(() => {
-    const systemKills = kills[solar_system_id];
-    if (!systemKills) return null;
-    return systemKills;
-  }, [kills, solar_system_id]);
-
-  const hasUserCharacters = useMemo(() => {
-    return charactersInSystem.some(x => userCharacters.includes(x.eve_id));
-  }, [charactersInSystem, userCharacters]);
-
-  const dbClick = useDoubleClick(() => {
-    outCommand({
-      type: OutCommand.openSettings,
-      data: {
-        system_id: solar_system_id.toString(),
-      },
-    });
-  });
-
-  const showHandlers = isConnecting || hoverNodeId === id;
-
-  const space = showKSpaceBG ? REGIONS_MAP[region_id] : '';
-  const regionClass = showKSpaceBG ? SpaceToClass[space] : null;
-
-  const systemName = (isTempSystemNameEnabled && temporaryName) || solar_system_name;
-  const customName = (isTempSystemNameEnabled && temporaryName && name) 
-    || (solar_system_name !== name && name);
-
-  const [unsplashedLeft, unsplashedRight] = useMemo(() => {
-    if (!isShowUnsplashedSignatures) {
-      return [[], []];
-    }
-    return prepareUnsplashedChunks(
-      signatures
-        .filter(s => s.group === 'Wormhole' && !s.linked_system)
-        .map(s => ({
-          eve_id: s.eve_id,
-          type: s.type,
-          custom_info: s.custom_info,
-        })),
-    );
-  }, [isShowUnsplashedSignatures, signatures]);
-
-  return {
-    selected,
-    visible,
-    isWormhole,
-    classTitleColor,
-    killsCount,
-    hasUserCharacters,
-    showHandlers,
-    regionClass,
-    systemName,
-    customName,
-    labelCustom,
-    is_shattered,
-    tag,
-    status,
-    labelsInfo,
-    dbClick,
-    sortedStatics,
-    effect_name,
-    region_name,
-    solar_system_id,
-    locked,
-    hubs,
-    charactersInSystem,
-    unsplashedLeft,
-    unsplashedRight,
-    isThickConnections,
-  };
-}

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

@@ -1,7 +1,6 @@
 import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect, useMemo } from 'react';
 import ReactFlow, {
   Background,
-  ConnectionMode,
   Edge,
   MiniMap,
   Node,
@@ -17,18 +16,16 @@ import ReactFlow, {
 import 'reactflow/dist/style.css';
 import classes from './Map.module.scss';
 import { MapProvider, useMapState } from './MapProvider';
-import { useNodesState, useEdgesState, useMapHandlers, useUpdateNodes } from './hooks';
+import { useEdgesState, useMapHandlers, useNodesState, useUpdateNodes } from './hooks';
 import { MapHandlers, OutCommand, OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers.ts';
 import {
   ContextMenuConnection,
   ContextMenuRoot,
   SolarSystemEdge,
-  SolarSystemNodeDefault,
-  SolarSystemNodeTheme,
   useContextMenuConnectionHandlers,
   useContextMenuRootHandlers,
 } from './components';
-import { wrapNode } from './utils/wrapNode';
+import { getBehaviorForTheme } from './helpers/getThemeBehavior';
 import { OnMapAddSystemCallback, OnMapSelectionChange } from './map.types';
 import { SESSION_KEY } from '@/hooks/Mapper/constants.ts';
 import { SolarSystemConnection, SolarSystemRawType } from '@/hooks/Mapper/types';
@@ -77,18 +74,16 @@ const initialEdges = [
   },
 ];
 
-
-
-
 const edgeTypes = {
   floating: SolarSystemEdge,
 };
 
+export const MAP_ROOT_ID = 'MAP_ROOT_ID';
+
 interface MapCompProps {
   refn: ForwardedRef<MapHandlers>;
   onCommand: OutCommandHandler;
   onSelectionChange: OnMapSelectionChange;
-  onManualDelete(systems: string[]): void;
   onConnectionInfoClick?(e: SolarSystemConnection): void;
   onAddSystem?: OnMapAddSystemCallback;
   onSelectionContextMenu?: NodeSelectionMouseHandler;
@@ -110,7 +105,6 @@ const MapComp = ({
   onSystemContextMenu,
   onConnectionInfoClick,
   onSelectionContextMenu,
-  onManualDelete,
   isShowMinimap,
   showKSpaceBG,
   isThickConnections,
@@ -119,27 +113,23 @@ const MapComp = ({
   theme,
   onAddSystem,
 }: MapCompProps) => {
-  const { getNode, getNodes } = useReactFlow();
+  const { getNodes } = useReactFlow();
   const [nodes, , onNodesChange] = useNodesState<Node<SolarSystemRawType>>(initialNodes);
   const [edges, , onEdgesChange] = useEdgesState<Edge<SolarSystemConnection>>(initialEdges);
 
-
-  const nodeTypes = useMemo(() => {
-    return {
-      custom:
-        theme !== '' && theme !== 'default'
-          ? wrapNode(SolarSystemNodeTheme)
-          : wrapNode(SolarSystemNodeDefault),
-    };
-  }, [theme]);
-  
-
   useMapHandlers(refn, onSelectionChange);
   useUpdateNodes(nodes);
   const { handleRootContext, ...rootCtxProps } = useContextMenuRootHandlers({ onAddSystem });
   const { handleConnectionContext, ...connectionCtxProps } = useContextMenuConnectionHandlers();
   const { update } = useMapState();
   const { variant, gap, size, color } = useBackgroundVars(theme);
+  const { isPanAndDrag, nodeComponent, connectionMode } = getBehaviorForTheme(theme || 'default');
+
+  const nodeTypes = useMemo(() => {
+    return {
+      custom: nodeComponent,
+    };
+  }, [nodeComponent]);
 
   const onConnect: OnConnect = useCallback(
     params => {
@@ -196,8 +186,6 @@ const MapComp = ({
 
   const handleNodesChange = useCallback(
     (changes: NodeChange[]) => {
-      const systemsIdsToRemove: string[] = [];
-
       // prevents single node deselection on background / same node click
       // allows deseletion of all nodes if multiple are currently selected
       if (changes.length === 1 && changes[0].type == 'select' && changes[0].selected === false) {
@@ -205,30 +193,12 @@ const MapComp = ({
       }
 
       const nextChanges = changes.reduce((acc, change) => {
-        if (change.type !== 'remove') {
-          return [...acc, change];
-        }
-
-        const node = getNode(change.id);
-        if (!node) {
-          return [...acc, change];
-        }
-
-        if (node.data.locked) {
-          return acc;
-        }
-
-        systemsIdsToRemove.push(node.data.id);
         return [...acc, change];
       }, [] as NodeChange[]);
 
-      if (systemsIdsToRemove.length > 0) {
-        onManualDelete(systemsIdsToRemove);
-      }
-
       onNodesChange(nextChanges);
     },
-    [getNode, onManualDelete, onNodesChange],
+    [getNodes, onNodesChange],
   );
 
   useEffect(() => {
@@ -241,7 +211,10 @@ const MapComp = ({
 
   return (
     <>
-      <div className={clsx(classes.MapRoot, { [classes.BackgroundAlternateColor]: isSoftBackground })}>
+      <div
+        data-window-id={MAP_ROOT_ID}
+        className={clsx(classes.MapRoot, { [classes.BackgroundAlternateColor]: isSoftBackground })}
+      >
         <ReactFlow
           nodes={nodes}
           edges={edges}
@@ -253,7 +226,7 @@ const MapComp = ({
           defaultViewport={getViewPortFromStore()}
           edgeTypes={edgeTypes}
           nodeTypes={nodeTypes}
-          connectionMode={ConnectionMode.Loose}
+          connectionMode={connectionMode}
           snapToGrid
           nodeDragThreshold={10}
           onNodeDragStop={handleDragStop}
@@ -261,6 +234,10 @@ const MapComp = ({
           onConnectStart={() => update({ isConnecting: true })}
           onConnectEnd={() => update({ isConnecting: false })}
           onNodeMouseEnter={(_, node) => update({ hoverNodeId: node.id })}
+          onPaneClick={event => {
+            event.preventDefault();
+            event.stopPropagation();
+          }}
           // onKeyUp=
           onNodeMouseLeave={() => update({ hoverNodeId: null })}
           onEdgeClick={(_, t) => {
@@ -281,7 +258,13 @@ const MapComp = ({
           minZoom={0.2}
           maxZoom={1.5}
           elevateNodesOnSelect
-          deleteKeyCode={['Delete']}
+          deleteKeyCode={['']}
+          {...(isPanAndDrag
+            ? {
+                selectionOnDrag: true,
+                panOnDrag: [2],
+              }
+            : {})}
           // TODO need create clear example with problem with that flag
           //  if system is not visible edge not drawing (and any render in Custom node is not happening)
           // onlyRenderVisibleElements

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

@@ -1,6 +1,6 @@
 import React, { createContext, useContext } from 'react';
 import { OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers.ts';
-import { MapUnionTypes } from '@/hooks/Mapper/types';
+import { MapUnionTypes, SystemSignature } from '@/hooks/Mapper/types';
 import { ContextStoreDataUpdate, useContextStore } from '@/hooks/Mapper/utils';
 
 export type MapData = MapUnionTypes & {
@@ -9,6 +9,7 @@ export type MapData = MapUnionTypes & {
   visibleNodes: Set<string>;
   showKSpaceBG: boolean;
   isThickConnections: boolean;
+  linkedSigEveId: string;
 };
 
 interface MapProviderProps {
@@ -29,10 +30,14 @@ const INITIAL_DATA: MapData = {
   isConnecting: false,
   connections: [],
   hoverNodeId: null,
+  linkedSigEveId: '',
   visibleNodes: new Set(),
   showKSpaceBG: false,
   isThickConnections: false,
   userPermissions: {},
+  systemSignatures: {} as Record<string, SystemSignature[]>,
+  options: {} as Record<string, string | boolean>,
+  isSubscriptionActive: false,
 };
 
 export interface MapContextProps {
@@ -48,7 +53,7 @@ const MapContext = createContext<MapContextProps>({
   outCommand: async () => void 0,
 });
 
-export const MapProvider: React.FC<MapProviderProps> = ({ children, onCommand }) => {
+export const MapProvider = ({ children, onCommand }: MapProviderProps) => {
   const { update, ref } = useContextStore<MapData>({ ...INITIAL_DATA });
 
   return (

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

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

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

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

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

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

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

@@ -0,0 +1,68 @@
+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 MIN_TOOLTIP_HEIGHT = 40;
+
+type KillsBookmarkTooltipProps = {
+  killsCount: number;
+  killsActivityType: string | null;
+  systemId: string;
+  className?: string;
+  size?: TooltipSize;
+} & WithChildren &
+  WithClassName;
+
+export const KillsCounter = ({
+  killsCount,
+  systemId,
+  className,
+  children,
+  size = TooltipSize.xs,
+}: KillsBookmarkTooltipProps) => {
+  const {
+    isLoading,
+    kills: detailedKills,
+    systemNameMap,
+  } = useKillsCounter({
+    realSystemId: systemId,
+  });
+
+  const limitedKills = useMemo(() => {
+    if (!detailedKills || detailedKills.length === 0) return [];
+    return detailedKills.slice(0, killsCount);
+  }, [detailedKills, killsCount]);
+
+  if (!killsCount || limitedKills.length === 0 || !systemId || isLoading) {
+    return null;
+  }
+
+  // Calculate height based on number of kills, but ensure a minimum height
+  const killsNeededHeight = limitedKills.length * 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));
+
+  return (
+    <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/SolarSystemLocalCounter.module.scss

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

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

@@ -0,0 +1,61 @@
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
+import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit/WdTooltip';
+import { CharItemProps, LocalCharactersList } from '../../../mapInterface/widgets/LocalCharacters/components';
+import { useLocalCharactersItemTemplate } from '../../../mapInterface/widgets/LocalCharacters/hooks/useLocalCharacters';
+import { useLocalCharacterWidgetSettings } from '../../../mapInterface/widgets/LocalCharacters/hooks/useLocalWidgetSettings';
+import classes from './SolarSystemLocalCounter.module.scss';
+import { AvailableThemes } from '@/hooks/Mapper/mapRootProvider';
+import { useTheme } from '@/hooks/Mapper/hooks/useTheme.ts';
+
+interface LocalCounterProps {
+  localCounterCharacters: Array<CharItemProps>;
+  hasUserCharacters: boolean;
+  showIcon?: boolean;
+}
+
+export const LocalCounter = ({ localCounterCharacters, hasUserCharacters, showIcon = true }: LocalCounterProps) => {
+  const [settings] = useLocalCharacterWidgetSettings();
+  const itemTemplate = useLocalCharactersItemTemplate(settings.showShipName);
+  const theme = useTheme();
+
+  const pilotTooltipContent = useMemo(() => {
+    return (
+      <div
+        style={{
+          width: '100%',
+          minWidth: '300px',
+          overflow: 'hidden',
+        }}
+      >
+        <LocalCharactersList items={localCounterCharacters} itemTemplate={itemTemplate} itemSize={26} autoSize={true} />
+      </div>
+    );
+  }, [localCounterCharacters, itemTemplate]);
+
+  if (localCounterCharacters.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className={clsx(classes.TooltipActive, {
+        [classes.Pathfinder]: theme === AvailableThemes.pathfinder,
+      })}
+    >
+      <WdTooltipWrapper content={pilotTooltipContent} position={TooltipPosition.right} offset={0} interactive={true}>
+        <div className={clsx(classes.hoverTarget)}>
+          <div
+            className={clsx(classes.localCounter, {
+              [classes.hasUserCharacters]: hasUserCharacters,
+            })}
+          >
+            {showIcon && <i className="pi pi-users" />}
+            <span>{localCounterCharacters.length}</span>
+          </div>
+        </div>
+      </WdTooltipWrapper>
+    </div>
+  );
+};

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

@@ -2,27 +2,30 @@
 
 $pastel-blue: #5a7d9a;
 $pastel-pink: #d291bc;
-$pastel-green: #88b04b;
-$pastel-yellow: #ffdd59;
 $dark-bg: #2d2d2d;
 $text-color: #ffffff;
-$tooltip-bg: #202020; // Dark background for tooltips
+$tooltip-bg: #202020;
 
 .RootCustomNode {
   display: flex;
   width: 130px;
   height: 34px;
 
+  font-family: var(--rf-node-font-family, inherit) !important;
+  font-weight: var(--rf-node-font-weight, inherit) !important;
+
   flex-direction: column;
   padding: 2px 6px;
   font-size: 10px;
 
-  background-color: $tooltip-bg;
+  background-color: var(--rf-node-bg-color, #202020) !important;
+  color: var(--rf-text-color, #ffffff);
+
   box-shadow: 0 0 5px rgba($dark-bg, 0.5);
   border: 1px solid darken($pastel-blue, 10%);
   border-radius: 5px;
   position: relative;
-  z-index: 1;
+  z-index: 3;
   overflow: hidden;
 
   &.Mataria,
@@ -85,21 +88,9 @@ $tooltip-bg: #202020; // Dark background for tooltips
     box-shadow: 0 0 10px #9a1af1c2;
   }
 
-  &.tooltip {
-    background-color: $tooltip-bg;
-    color: $text-color;
-    padding: 5px 10px;
-    border-radius: 3px;
-    border: 1px solid $pastel-pink;
-  }
-
   &.eve-system-status-home {
     border: 1px solid var(--eve-solar-system-status-color-home-dark30);
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-home),
-      transparent
-    );
+    background-image: linear-gradient(45deg, var(--eve-solar-system-status-color-background), transparent);
     &.selected {
       border-color: var(--eve-solar-system-status-color-home);
     }
@@ -107,11 +98,7 @@ $tooltip-bg: #202020; // Dark background for tooltips
 
   &.eve-system-status-friendly {
     border: 1px solid var(--eve-solar-system-status-color-friendly-dark20);
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-friendly-dark30),
-      transparent
-    );
+    background-image: linear-gradient(275deg, var(--eve-solar-system-status-friendly-dark30), transparent);
     &.selected {
       border-color: var(--eve-solar-system-status-color-friendly-dark5);
     }
@@ -126,27 +113,15 @@ $tooltip-bg: #202020; // Dark background for tooltips
   }
 
   &.eve-system-status-warning {
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-warning),
-      transparent
-    );
+    background-image: linear-gradient(275deg, var(--eve-solar-system-status-warning), transparent);
   }
 
   &.eve-system-status-dangerous {
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-dangerous),
-      transparent
-    );
+    background-image: linear-gradient(275deg, var(--eve-solar-system-status-dangerous), transparent);
   }
 
   &.eve-system-status-target {
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-target),
-      transparent
-    );
+    background-image: linear-gradient(275deg, var(--eve-solar-system-status-target), transparent);
   }
 }
 
@@ -171,8 +146,6 @@ $tooltip-bg: #202020; // Dark background for tooltips
     padding-left: 3px;
     padding-right: 3px;
 
-    //background-color: #833ca4;
-
     &:not(:first-child) {
       box-shadow: inset 4px -3px 4px rgba(0, 0, 0, 0.3);
     }
@@ -259,26 +232,17 @@ $tooltip-bg: #202020; // Dark background for tooltips
 
   .TagTitle {
     font-size: 11px;
-    font-weight: medium;
+    font-weight: 500;
     text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
-
-    color: var(--rf-tag-color, #38BDF8);
+    color: var(--rf-tag-color, #38bdf8);
   }
 
   /* Firefox kostyl */
   @-moz-document url-prefix() {
     .classSystemName {
-      font-family: inherit !important;
       font-weight: bold;
     }
   }
-
-  .classSystemName {
-    //font-weight: bold;
-  }
-
-  .solarSystemName {
-  }
 }
 
 .BottomRow {
@@ -287,22 +251,23 @@ $tooltip-bg: #202020; // Dark background for tooltips
   align-items: center;
   height: 19px;
 
-  .localCounter {
-    display: flex;
-    //align-items: center;
-    gap: 2px;
-
-    & > i {
-      position: relative;
-      top: 1px;
+  .hasLocalCounter {
+    margin-right: 2px;
+    &.countAbove9 {
+      margin-right: 1.5rem;
     }
+  }
 
-    & > span {
-      font-size: 9px;
-      line-height: 9px;
-      font-weight: 500;
-      //margin-top: 1px;
-    }
+  .lockIcon {
+    font-size: 0.45rem;
+    font-weight: bold;
+    position: relative;
+  }
+
+  .mapMarker {
+    font-size: 0.45rem;
+    font-weight: bold;
+    position: relative;
   }
 }
 
@@ -333,7 +298,8 @@ $tooltip-bg: #202020; // Dark background for tooltips
 
 .Handlers {
   position: absolute;
-  z-index: 2;
+  z-index: 4;
+  pointer-events: none;
   top: 0;
   left: 0;
   width: 100%;
@@ -346,6 +312,7 @@ $tooltip-bg: #202020; // Dark background for tooltips
   border: 1px solid $pastel-blue;
   width: 5px;
   height: 5px;
+  pointer-events: auto;
 
   &.selected {
     border-color: $pastel-pink;
@@ -388,3 +355,15 @@ $tooltip-bg: #202020; // Dark background for tooltips
     }
   }
 }
+
+.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

@@ -1,23 +1,26 @@
 import { memo } from 'react';
-import { Handle, Position } from 'reactflow';
+import { MapSolarSystemType } from '../../map.types';
+import { Handle, NodeProps, Position } from 'reactflow';
 import clsx from 'clsx';
-
-import classes from './SolarSystemNodeDefault.module.scss'; 
+import classes from './SolarSystemNodeDefault.module.scss';
 import { PrimeIcons } from 'primereact/api';
-
-import { useSolarSystemNode } from '../../hooks/useSolarSystemNode';
-
+import { useLocalCounter, useNodeKillsCount, useSolarSystemNode } from '../../hooks';
 import {
+  EFFECT_BACKGROUND_STYLES,
   MARKER_BOOKMARK_BG_STYLES,
   STATUS_CLASSES,
-  EFFECT_BACKGROUND_STYLES,
 } from '@/hooks/Mapper/components/map/constants';
 import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/WormholeClassComp';
 import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
+import { LocalCounter } from './SolarSystemLocalCounter';
+import { KillsCounter } from './SolarSystemKillsCounter';
+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) => {
+export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>) => {
   const nodeVars = useSolarSystemNode(props);
+  const { localCounterCharacters } = useLocalCounter(nodeVars);
+  const localKillsCount = useNodeKillsCount(nodeVars.solarSystemId, nodeVars.killsCount);
 
   return (
     <>
@@ -25,37 +28,35 @@ export const SolarSystemNodeDefault = memo((props) => {
         <div className={classes.Bookmarks}>
           {nodeVars.labelCustom !== '' && (
             <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
-              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] ">
-                {nodeVars.labelCustom}
-              </span>
+              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]">{nodeVars.labelCustom}</span>
             </div>
           )}
 
           {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>
           )}
 
-          {nodeVars.killsCount && (
-            <div
-              className={clsx(
-                classes.Bookmark,
-                MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!]
-              )}
+          {localKillsCount && localKillsCount > 0 && nodeVars.solarSystemId && (
+            <KillsCounter
+              killsCount={localKillsCount}
+              systemId={nodeVars.solarSystemId}
+              size={TooltipSize.lg}
+              killsActivityType={nodeVars.killsActivityType}
+              className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!])}
             >
               <div className={clsx(classes.BookmarkWithIcon)}>
                 <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
                 <span className={clsx(classes.text)}>{nodeVars.killsCount}</span>
               </div>
-            </div>
+            </KillsCounter>
           )}
 
           {nodeVars.labelsInfo.map(x => (
-            <div
-              key={x.id}
-              className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}
-            >
+            <div key={x.id} className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}>
               {x.shortName}
             </div>
           ))}
@@ -66,9 +67,10 @@ export const SolarSystemNodeDefault = memo((props) => {
         className={clsx(
           classes.RootCustomNode,
           nodeVars.regionClass && classes[nodeVars.regionClass],
-          classes[STATUS_CLASSES[nodeVars.status]],
+          nodeVars.status !== undefined ? classes[STATUS_CLASSES[nodeVars.status]] : '',
           { [classes.selected]: nodeVars.selected },
         )}
+        onMouseDownCapture={e => nodeVars.dbClick(e)}
       >
         {nodeVars.visible && (
           <>
@@ -84,9 +86,7 @@ export const SolarSystemNodeDefault = memo((props) => {
               </div>
 
               {nodeVars.tag != null && nodeVars.tag !== '' && (
-                <div className={clsx(classes.TagTitle, 'text-sky-400 font-medium')}>
-                  {nodeVars.tag}
-                </div>
+                <div className={clsx(classes.TagTitle, 'text-sky-400 font-medium')}>{nodeVars.tag}</div>
               )}
 
               <div
@@ -101,18 +101,13 @@ export const SolarSystemNodeDefault = memo((props) => {
               {nodeVars.isWormhole && (
                 <div className={classes.statics}>
                   {nodeVars.sortedStatics.map(whClass => (
-                    <WormholeClassComp key={whClass} id={whClass} />
+                    <WormholeClassComp key={String(whClass)} id={String(whClass)} />
                   ))}
                 </div>
               )}
 
               {nodeVars.effectName !== null && nodeVars.isWormhole && (
-                <div
-                  className={clsx(
-                    classes.effect,
-                    EFFECT_BACKGROUND_STYLES[nodeVars.effectName],
-                  )}
-                />
+                <div className={clsx(classes.effect, EFFECT_BACKGROUND_STYLES[nodeVars.effectName])} />
               )}
             </div>
 
@@ -124,44 +119,25 @@ export const SolarSystemNodeDefault = memo((props) => {
               )}
 
               {!nodeVars.isWormhole && !nodeVars.customName && (
-                <div
-                  className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-stone-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5"
-                >
+                <div className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-stone-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5">
                   {nodeVars.regionName}
                 </div>
               )}
 
               {nodeVars.isWormhole && !nodeVars.customName && <div />}
 
-              <div className="flex items-center justify-end">
-                <div className="flex gap-1 items-center">
-                  {nodeVars.locked && (
-                    <i
-                      className={PrimeIcons.LOCK}
-                      style={{ fontSize: '0.45rem', fontWeight: 'bold' }}
-                    />
-                  )}
-
-                  {nodeVars.hubs.includes(nodeVars.solarSystemId.toString()) && (
-                    <i
-                      className={PrimeIcons.MAP_MARKER}
-                      style={{ fontSize: '0.45rem', fontWeight: 'bold' }}
-                    />
-                  )}
-
-                  {nodeVars.charactersInSystem.length > 0 && (
-                    <div
-                      className={clsx(classes.localCounter, {
-                        ['text-amber-300']: nodeVars.hasUserCharacters,
-                      })}
-                    >
-                      <i className="pi pi-users" style={{ fontSize: '0.50rem' }} />
-                      <span className="font-sans">
-                        {nodeVars.charactersInSystem.length}
-                      </span>
-                    </div>
+              <div className="flex items-center gap-1 justify-end">
+                <div className={clsx('flex items-center gap-1')}>
+                  {nodeVars.locked && <i className={clsx(PrimeIcons.LOCK, classes.lockIcon)} />}
+                  {nodeVars.hubs.includes(nodeVars.solarSystemId) && (
+                    <i className={clsx(PrimeIcons.MAP_MARKER, classes.mapMarker)} />
                   )}
                 </div>
+
+                <LocalCounter
+                  hasUserCharacters={nodeVars.hasUserCharacters}
+                  localCounterCharacters={localCounterCharacters}
+                />
               </div>
             </div>
           </>
@@ -173,7 +149,7 @@ export const SolarSystemNodeDefault = memo((props) => {
           {nodeVars.unsplashedLeft.length > 0 && (
             <div className={classes.Unsplashed}>
               {nodeVars.unsplashedLeft.map(sig => (
-                <UnsplashedSignature key={sig.sig_id} signature={sig} />
+                <UnsplashedSignature key={sig.eve_id} signature={sig} />
               ))}
             </div>
           )}
@@ -181,14 +157,14 @@ export const SolarSystemNodeDefault = memo((props) => {
           {nodeVars.unsplashedRight.length > 0 && (
             <div className={clsx(classes.Unsplashed, classes['Unsplashed--right'])}>
               {nodeVars.unsplashedRight.map(sig => (
-                <UnsplashedSignature key={sig.sig_id} signature={sig} />
+                <UnsplashedSignature key={sig.eve_id} signature={sig} />
               ))}
             </div>
           )}
         </>
       )}
 
-      <div onMouseDownCapture={nodeVars.dbClick} className={classes.Handlers}>
+      <div className={classes.Handlers}>
         <Handle
           type="source"
           className={clsx(classes.Handle, classes.HandleTop, {
@@ -233,3 +209,5 @@ export const SolarSystemNodeDefault = memo((props) => {
     </>
   );
 });
+
+SolarSystemNodeDefault.displayName = 'SolarSystemNodeDefault';

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

@@ -1,407 +1,20 @@
-@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
+@import './SolarSystemNodeDefault.module.scss';
 
-$pastel-blue: #5a7d9a;
-$pastel-pink: #d291bc;
-$pastel-green: #88b04b;
-$pastel-yellow: #ffdd59;
-$dark-bg: #2d2d2d;
-$text-color: #ffffff;
-$tooltip-bg: #202020; // Dark background for tooltips
+/* ---------------------------------------------
+   Only override what's different from the base
+   Currently none required
+---------------------------------------------- */
 
 .RootCustomNode {
-  display: flex;
-  width: 130px;
-  height: 34px;
-
-  flex-direction: column;
-  padding: 2px 6px;
-  font-size: 10px;
-
-  background-color: var(--rf-node-bg-color, #202020) !important;
-  color: var(--rf-text-color, #ffffff);
-  font-family: var(--rf-node-font-family, inherit) !important;
-  font-weight: var(--rf-node-font-weight, inherit) !important;
-
-  box-shadow: 0 0 5px rgba($dark-bg, 0.5);
-  border: 1px solid darken($pastel-blue, 10%);
-  border-radius: 5px;
-  position: relative;
-  z-index: 1;
-  overflow: hidden;
-
-  &.Mataria,
-  &.Amarria,
-  &.Gallente,
-  &.Caldaria {
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-size: cover;
-      background-position: 50% 50%;
-      z-index: -1;
-      background-repeat: no-repeat;
-      border-radius: 3px;
-    }
-  }
-
-  &.Mataria {
-    &::before {
-      background-image: url('/images/mataria-180.png');
-      opacity: 0.6;
-      background-position-x: 1px;
-      background-position-y: -14px;
-    }
-  }
-
-  &.Caldaria {
-    &::before {
-      background-image: url('/images/caldaria-180.png');
-      opacity: 0.6;
-      background-position-x: 1px;
-      background-position-y: -10px;
-    }
-  }
-
-  &.Amarria {
-    &::before {
-      opacity: 0.45;
-      background-image: url('/images/amarr-180.png');
-      background-position-x: 0;
-      background-position-y: -13px;
-    }
-  }
-
-  &.Gallente {
-    &::before {
-      opacity: 0.5;
-      background-image: url('/images/gallente-180.png');
-      background-position-x: 1px;
-      background-position-y: 0;
-    }
-  }
-
-  &.selected {
-    border-color: $pastel-pink;
-    box-shadow: 0 0 10px #9a1af1c2;
-  }
-
-  &.tooltip {
-    background-color: $tooltip-bg;
-    color: $text-color;
-    padding: 5px 10px;
-    border-radius: 3px;
-    border: 1px solid $pastel-pink;
-  }
-
   &.eve-system-status-home {
     border: 1px solid var(--eve-solar-system-status-color-home-dark30);
     background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-home),
-      transparent
+        275deg,
+        var(--eve-solar-system-status-home),
+        transparent
     );
     &.selected {
       border-color: var(--eve-solar-system-status-color-home);
     }
   }
-
-  &.eve-system-status-friendly {
-    border: 1px solid var(--eve-solar-system-status-color-friendly-dark20);
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-friendly-dark30),
-      transparent
-    );
-    &.selected {
-      border-color: var(--eve-solar-system-status-color-friendly-dark5);
-    }
-  }
-
-  &.eve-system-status-lookingFor {
-    border: 1px solid var(--eve-solar-system-status-color-lookingFor-dark15);
-    background-image: linear-gradient(275deg, #45ff8f2f, #457fff2f);
-    &.selected {
-      border-color: $pastel-pink;
-    }
-  }
-
-  &.eve-system-status-warning {
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-warning),
-      transparent
-    );
-  }
-
-  &.eve-system-status-dangerous {
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-dangerous),
-      transparent
-    );
-  }
-
-  &.eve-system-status-target {
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-target),
-      transparent
-    );
-  }
-}
-
-.Bookmarks {
-  position: absolute;
-  width: 100%;
-  z-index: 1;
-  display: flex;
-  left: 4px;
-
-  & > .Bookmark {
-    min-width: 13px;
-    height: 22px;
-    position: relative;
-    top: -13px;
-    border-radius: 5px;
-    color: #ffffff;
-    font-size: 8px;
-    text-align: center;
-    padding-top: 2px;
-    font-weight: bolder;
-    padding-left: 3px;
-    padding-right: 3px;
-
-    //background-color: #833ca4;
-
-    &:not(:first-child) {
-      box-shadow: inset 4px -3px 4px rgba(0, 0, 0, 0.3);
-    }
-  }
-
-  .BookmarkWithIcon {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: -2px;
-    text-shadow: 0 0 3px rgba(0, 0, 0, 1);
-    padding-right: 2px;
-
-    & > .icon {
-      width: 8px;
-      height: 8px;
-      font-size: 8px;
-    }
-
-    & > .text {
-      margin-top: 1px;
-      font-size: 9px;
-    }
-  }
-}
-
-.Unsplashed {
-  position: absolute;
-  width: calc(50% - 4px);
-  z-index: -1;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 2px;
-  left: 2px;
-
-  &--right {
-    left: calc(50% + 6px);
-  }
-
-  & > .Signature {
-    width: 13px;
-    height: 4px;
-    position: relative;
-    top: 3px;
-    border-radius: 5px;
-    color: #ffffff;
-    font-size: 8px;
-    text-align: center;
-    padding-top: 2px;
-    font-weight: bolder;
-    padding-left: 3px;
-    padding-right: 3px;
-    display: block;
-
-    background-color: #833ca4;
-
-    &:not(:first-child) {
-      box-shadow: inset 4px -3px 4px rgba(0, 0, 0, 0.3);
-    }
-  }
-}
-
-.icon {
-  width: 8px;
-  height: 8px;
-  font-size: 8px;
-}
-
-.HeadRow {
-  display: flex;
-  align-items: center;
-  gap: 3px;
-  font-size: 11px;
-  line-height: 14px;
-  font-weight: 500;
-  position: relative;
-  top: 1px;
-
-  .classTitle {
-    font-size: 11px;
-    font-weight: bold;
-    text-shadow: 0 0 2px rgb(0 0 0 / 73%);
-  }
-
-  .TagTitle {
-    font-size: 11px;
-    font-weight: medium;
-    text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
-
-    color: var(--rf-tag-color, #38BDF8);
-  }
-
-  /* Firefox kostyl */
-  @-moz-document url-prefix() {
-    .classSystemName {
-      font-family: inherit !important;
-      font-weight: bold;
-    }
-  }
-
-  .classSystemName {
-    font-family: inherit !important;
-    font-weight: bold;
-  }
-
-  .solarSystemName {
-  }
-}
-
-.BottomRow {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 19px;
-
-  .regionName {
-    color: var(--rf-region-name, #D6D3D1)
-  }
-
-  .customName {
-    color: var(--rf-custom-name, #93C5FD)
-  }
-
-  .localCounter {
-    display: flex;
-    //align-items: center;
-    gap: 2px;
-
-    .hasUserCharacters {
-      color: var(--rf-has-user-characters, #fbbf24);
-    }
-
-    & > i {
-      position: relative;
-      top: 1px;
-    }
-
-    & > span {
-      font-size: 9px;
-      line-height: 9px;
-      font-weight: 500;
-      //margin-top: 1px;
-    }
-  }
-}
-
-.effect {
-  width: 8px;
-  height: 8px;
-  margin-top: -2px;
-  box-sizing: border-box;
-  border-radius: 2px;
-  margin-left: 1px;
-}
-
-.statics {
-  display: flex;
-  gap: 2px;
-  font-size: 8px;
-
-  & > * {
-    line-height: 10px;
-  }
-
-  /* Firefox kostyl */
-  @-moz-document url-prefix() {
-    position: relative;
-    top: -1px;
-  }
-}
-
-.Handlers {
-  position: absolute;
-  z-index: 2;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.Handle {
-  min-width: initial;
-  min-height: initial;
-  border: 1px solid $pastel-blue;
-  width: 5px;
-  height: 5px;
-
-  &.selected {
-    border-color: $pastel-pink;
-  }
-
-  &.HandleTop {
-    top: -2px;
-  }
-
-  &.HandleRight {
-    right: -2px;
-  }
-
-  &.HandleBottom {
-    bottom: -2px;
-  }
-
-  &.HandleLeft {
-    left: -2px;
-  }
-
-  &.Tick {
-    width: 7px;
-    height: 7px;
-
-    &.HandleTop {
-      top: -3px;
-    }
-
-    &.HandleRight {
-      right: -3px;
-    }
-
-    &.HandleBottom {
-      bottom: -3px;
-    }
-
-    &.HandleLeft {
-      left: -3px;
-    }
-  }
 }

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

@@ -1,23 +1,26 @@
 import { memo } from 'react';
-import { Handle, Position } from 'reactflow';
+import { MapSolarSystemType } from '../../map.types';
+import { Handle, NodeProps, Position } from 'reactflow';
 import clsx from 'clsx';
-
-import classes from './SolarSystemNodeTheme.module.scss'; 
+import classes from './SolarSystemNodeTheme.module.scss';
 import { PrimeIcons } from 'primereact/api';
-
-import { useSolarSystemNode } from '../../hooks/useSolarSystemNode';
-
+import { useLocalCounter, useNodeKillsCount, useSolarSystemNode } from '../../hooks';
 import {
+  EFFECT_BACKGROUND_STYLES,
   MARKER_BOOKMARK_BG_STYLES,
   STATUS_CLASSES,
-  EFFECT_BACKGROUND_STYLES,
 } from '@/hooks/Mapper/components/map/constants';
 import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/WormholeClassComp';
 import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
+import { LocalCounter } from './SolarSystemLocalCounter';
+import { KillsCounter } from './SolarSystemKillsCounter';
+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) => {
+export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>) => {
   const nodeVars = useSolarSystemNode(props);
+  const { localCounterCharacters } = useLocalCounter(nodeVars);
+  const localKillsCount = useNodeKillsCount(nodeVars.solarSystemId, nodeVars.killsCount);
 
   return (
     <>
@@ -25,37 +28,35 @@ export const SolarSystemNodeTheme = memo((props) => {
         <div className={classes.Bookmarks}>
           {nodeVars.labelCustom !== '' && (
             <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
-              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] ">
-                {nodeVars.labelCustom}
-              </span>
+              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]">{nodeVars.labelCustom}</span>
             </div>
           )}
 
           {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>
           )}
 
-          {nodeVars.killsCount && (
-            <div
-              className={clsx(
-                classes.Bookmark,
-                MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!]
-              )}
+          {localKillsCount && localKillsCount > 0 && nodeVars.solarSystemId && (
+            <KillsCounter
+              killsCount={localKillsCount}
+              systemId={nodeVars.solarSystemId}
+              size={TooltipSize.lg}
+              killsActivityType={nodeVars.killsActivityType}
+              className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!])}
             >
               <div className={clsx(classes.BookmarkWithIcon)}>
                 <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
                 <span className={clsx(classes.text)}>{nodeVars.killsCount}</span>
               </div>
-            </div>
+            </KillsCounter>
           )}
 
           {nodeVars.labelsInfo.map(x => (
-            <div
-              key={x.id}
-              className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}
-            >
+            <div key={x.id} className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}>
               {x.shortName}
             </div>
           ))}
@@ -66,9 +67,10 @@ export const SolarSystemNodeTheme = memo((props) => {
         className={clsx(
           classes.RootCustomNode,
           nodeVars.regionClass && classes[nodeVars.regionClass],
-          classes[STATUS_CLASSES[nodeVars.status]],
+          nodeVars.status !== undefined ? classes[STATUS_CLASSES[nodeVars.status]] : '',
           { [classes.selected]: nodeVars.selected },
         )}
+        onMouseDownCapture={e => nodeVars.dbClick(e)}
       >
         {nodeVars.visible && (
           <>
@@ -84,9 +86,7 @@ export const SolarSystemNodeTheme = memo((props) => {
               </div>
 
               {nodeVars.tag != null && nodeVars.tag !== '' && (
-                <div className={clsx(classes.TagTitle)}>
-                  {nodeVars.tag}
-                </div>
+                <div className={clsx(classes.TagTitle)}>{nodeVars.tag}</div>
               )}
 
               <div
@@ -101,7 +101,7 @@ export const SolarSystemNodeTheme = memo((props) => {
               {nodeVars.isWormhole && (
                 <div className={classes.statics}>
                   {nodeVars.sortedStatics.map(whClass => (
-                    <WormholeClassComp key={whClass} id={whClass} />
+                    <WormholeClassComp key={String(whClass)} id={String(whClass)} />
                   ))}
                 </div>
               )}
@@ -136,33 +136,18 @@ export const SolarSystemNodeTheme = memo((props) => {
 
               {nodeVars.isWormhole && !nodeVars.customName && <div />}
 
-              <div className="flex items-center justify-end">
-                <div className="flex gap-1 items-center">
-                  {nodeVars.locked && (
-                    <i
-                      className={PrimeIcons.LOCK}
-                      style={{ fontSize: '0.45rem', fontWeight: 'bold' }}
-                    />
-                  )}
-
-                  {nodeVars.hubs.includes(nodeVars.solarSystemId.toString()) && (
-                    <i
-                      className={PrimeIcons.MAP_MARKER}
-                      style={{ fontSize: '0.45rem', fontWeight: 'bold' }}
-                    />
-                  )}
-
-                  {nodeVars.charactersInSystem.length > 0 && (
-                    <div
-                      className={clsx(classes.localCounter, {
-                        [classes.hasUserCharacters]: nodeVars.hasUserCharacters,
-                      })}
-                    >
-                      <i className="pi pi-users" style={{ fontSize: '0.50rem' }} />
-                      <span className="font-sans">{nodeVars.charactersInSystem.length}</span>
-                    </div>
+              <div className="flex items-center gap-1 justify-end">
+                <div className={clsx('flex items-center gap-1')}>
+                  {nodeVars.locked && <i className={clsx(PrimeIcons.LOCK, classes.lockIcon)} />}
+                  {nodeVars.hubs.includes(nodeVars.solarSystemId) && (
+                    <i className={clsx(PrimeIcons.MAP_MARKER, classes.mapMarker)} />
                   )}
                 </div>
+
+                <LocalCounter
+                  hasUserCharacters={nodeVars.hasUserCharacters}
+                  localCounterCharacters={localCounterCharacters}
+                />
               </div>
             </div>
           </>
@@ -174,7 +159,7 @@ export const SolarSystemNodeTheme = memo((props) => {
           {nodeVars.unsplashedLeft.length > 0 && (
             <div className={classes.Unsplashed}>
               {nodeVars.unsplashedLeft.map(sig => (
-                <UnsplashedSignature key={sig.sig_id} signature={sig} />
+                <UnsplashedSignature key={sig.eve_id} signature={sig} />
               ))}
             </div>
           )}
@@ -182,14 +167,14 @@ export const SolarSystemNodeTheme = memo((props) => {
           {nodeVars.unsplashedRight.length > 0 && (
             <div className={clsx(classes.Unsplashed, classes['Unsplashed--right'])}>
               {nodeVars.unsplashedRight.map(sig => (
-                <UnsplashedSignature key={sig.sig_id} signature={sig} />
+                <UnsplashedSignature key={sig.eve_id} signature={sig} />
               ))}
             </div>
           )}
         </>
       )}
 
-      <div onMouseDownCapture={nodeVars.dbClick} className={classes.Handlers}>
+      <div className={classes.Handlers}>
         <Handle
           type="source"
           className={clsx(classes.Handle, classes.HandleTop, {
@@ -234,3 +219,5 @@ export const SolarSystemNodeTheme = memo((props) => {
     </>
   );
 });
+
+SolarSystemNodeTheme.displayName = 'SolarSystemNodeTheme';

assets/js/hooks/Mapper/components/map/components/UnsplashedSignature/UnsplashedSignature.module.scss

@@ -15,4 +15,8 @@
     font-weight: bolder;
     display: block;
   }
+
+  & > .Eol {
+    display: block;
+  }
 }

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

@@ -8,8 +8,8 @@ import { WORMHOLE_CLASS_STYLES, WORMHOLES_ADDITIONAL_INFO } from '@/hooks/Mapper
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import { renderInfoColumn } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders';
-
-import { k162Types } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureK162TypeSelect';
+import { K162_TYPES_MAP } from '@/hooks/Mapper/constants.ts';
+import { parseSignatureCustomInfo } from '@/hooks/Mapper/helpers/parseSignatureCustomInfo.ts';
 
 interface UnsplashedSignatureProps {
   signature: SystemSignature;
@@ -22,17 +22,22 @@ export const UnsplashedSignature = ({ signature }: UnsplashedSignatureProps) =>
   const whData = useMemo(() => wormholesData[signature.type], [signature.type, wormholesData]);
   const whClass = useMemo(() => (whData ? WORMHOLES_ADDITIONAL_INFO[whData.dest] : null), [whData]);
 
-  const k162TypeOption = useMemo(() => {
-    if (!signature.custom_info) {
-      return null;
-    }
-    const customInfo = JSON.parse(signature.custom_info);
-    if (!customInfo.k162Type) {
-      return null;
-    }
-    return k162Types.find(x => x.value === customInfo.k162Type);
+  const customInfo = useMemo(() => {
+    return parseSignatureCustomInfo(signature.custom_info);
   }, [signature]);
 
+  const k162TypeOption = useMemo(() => {
+    if (!customInfo?.k162Type) {
+      return null;
+    }
+
+    return K162_TYPES_MAP[customInfo.k162Type];
+  }, [customInfo]);
+
+  const isEOL = useMemo(() => {
+    return customInfo?.isEOL;
+  }, [customInfo]);
+
   const whClassStyle = useMemo(() => {
     if (signature.type === 'K162' && k162TypeOption) {
       const k162Data = wormholesData[k162TypeOption.whClassName];
@@ -45,19 +50,19 @@ export const UnsplashedSignature = ({ signature }: UnsplashedSignatureProps) =>
   return (
     <WdTooltipWrapper
       className={clsx(classes.Signature)}
+      // @ts-ignore
       content={
-        (
-          <div className="flex flex-col gap-1">
-            <InfoDrawer title={<b className="text-slate-50">{signature.eve_id}</b>}>
-              {renderInfoColumn(signature)}
-            </InfoDrawer>
-          </div>
-        ) as React.ReactNode
+        <div className="flex flex-col gap-1">
+          <InfoDrawer title={<b className="text-slate-50">{signature.eve_id}</b>}>
+            {renderInfoColumn(signature)}
+          </InfoDrawer>
+        </div>
       }
     >
       <div className={clsx(classes.Box, whClassStyle)}>
-        <svg width="13" height="4" viewBox="0 0 13 4" xmlns="http://www.w3.org/2000/svg">
-          <rect width="13" height="4" rx="2" className={whClassStyle} fill="currentColor" />
+        <svg width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg">
+          <rect y="1" width="13" height="4" rx="2" className={whClassStyle} fill="currentColor" />
+          {isEOL && <rect x="4" width="5" height="6" rx="1" className={clsx(classes.Eol)} fill="#a153ac" />}
         </svg>
       </div>
     </WdTooltipWrapper>

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

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

assets/js/hooks/Mapper/components/map/helpers/convertSystem2Node.ts

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

assets/js/hooks/Mapper/components/map/helpers/getThemeBehavior.ts

@@ -0,0 +1,32 @@
+import { SolarSystemNodeDefault, SolarSystemNodeTheme } from '../components/SolarSystemNode';
+import type { NodeProps } from 'reactflow';
+import type { ComponentType } from 'react';
+import { MapSolarSystemType } from '../map.types';
+import { ConnectionMode } from 'reactflow';
+
+export type SolarSystemNodeComponent = ComponentType<NodeProps<MapSolarSystemType>>;
+
+interface ThemeBehavior {
+  isPanAndDrag: boolean;
+  nodeComponent: SolarSystemNodeComponent;
+  connectionMode: ConnectionMode;
+}
+
+const THEME_BEHAVIORS: {
+  [key: string]: ThemeBehavior;
+} = {
+  default: {
+    isPanAndDrag: false,
+    nodeComponent: SolarSystemNodeDefault,
+    connectionMode: ConnectionMode.Loose,
+  },
+  pathfinder: {
+    isPanAndDrag: true,
+    nodeComponent: SolarSystemNodeTheme,
+    connectionMode: ConnectionMode.Loose,
+  },
+};
+
+export function getBehaviorForTheme(themeName: string) {
+  return THEME_BEHAVIORS[themeName] ?? THEME_BEHAVIORS.default;
+}

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/api/useMapUpdateSystems.ts

@@ -42,7 +42,7 @@ export const useMapUpdateSystems = () => {
         return newSystem;
       });
 
-      update({ systems: out });
+      update({ systems: out }, true);
     },
     [rf, update],
   );

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

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

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

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

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

@@ -0,0 +1,43 @@
+import { useMemo } from 'react';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useSystemKills } from '@/hooks/Mapper/components/mapInterface/widgets/WSystemKills/hooks/useSystemKills.ts';
+
+interface UseKillsCounterProps {
+  realSystemId: string;
+}
+
+export function useKillsCounter({ realSystemId }: UseKillsCounterProps) {
+  const { data: mapData, outCommand } = useMapRootState();
+  const { systems } = mapData;
+
+  const systemNameMap = useMemo(() => {
+    const m: Record<string, string> = {};
+    systems.forEach(sys => {
+      m[sys.id] = sys.temporary_name || sys.name || '???';
+    });
+    return m;
+  }, [systems]);
+
+  const { kills: allKills, isLoading } = useSystemKills({
+    systemId: realSystemId,
+    outCommand,
+    showAllVisible: false,
+  });
+
+  const filteredKills = useMemo(() => {
+    if (!allKills || allKills.length === 0) return [];
+
+    // Sort kills by time, most recent first, but don't limit the number of kills
+    return [...allKills].sort((a, b) => {
+      const aTime = a.kill_time ? new Date(a.kill_time).getTime() : 0;
+      const bTime = b.kill_time ? new Date(b.kill_time).getTime() : 0;
+      return bTime - aTime;
+    });
+  }, [allKills]);
+
+  return {
+    isLoading,
+    kills: filteredKills,
+    systemNameMap,
+  };
+}

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

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

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

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

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

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

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

@@ -1,18 +1,21 @@
 import { useMemo } from 'react';
-
+import { MapSolarSystemType } from '../map.types';
+import { NodeProps } from 'reactflow';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
 import { useMapState } from '@/hooks/Mapper/components/map/MapProvider';
 import { useDoubleClick } from '@/hooks/Mapper/hooks/useDoubleClick';
 import { REGIONS_MAP, Spaces } from '@/hooks/Mapper/constants';
 import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace';
-import { getSystemClassStyles, prepareUnsplashedChunks } from '@/hooks/Mapper/components/map/helpers';
+import { getSystemClassStyles } from '@/hooks/Mapper/components/map/helpers';
 import { sortWHClasses } from '@/hooks/Mapper/helpers';
-import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager';
-import { OutCommand } from '@/hooks/Mapper/types';
-import { LABELS_INFO, LABELS_ORDER } from '@/hooks/Mapper/components/map/constants';
+import { CharacterTypeRaw, OutCommand, SystemSignature } from '@/hooks/Mapper/types';
+import { useUnsplashedSignatures } from './useUnsplashedSignatures';
+import { useSystemName } from './useSystemName';
+import { LabelInfo, useLabelsInfo } from './useLabelsInfo';
+import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
 
-function getActivityType(count: number) {
+function getActivityType(count: number): string {
   if (count <= 5) return 'activityNormal';
   if (count <= 30) return 'activityWarn';
   return 'activityDanger';
@@ -25,37 +28,59 @@ const SpaceToClass: Record<string, string> = {
   [Spaces.Gallente]: 'Gallente',
 };
 
-function sortedLabels(labels: string[]) {
-  if (!labels) return [];
-  return LABELS_ORDER.filter(x => labels.includes(x)).map(x => LABELS_INFO[x]);
+export function useLocalCounter(nodeVars: SolarSystemNodeVars) {
+  const localCounterCharacters = useMemo(() => {
+    return nodeVars.charactersInSystem
+      .map(char => ({
+        ...char,
+        compact: true,
+        isOwn: nodeVars.userCharacters.includes(char.eve_id),
+      }))
+      .sort((a, b) => a.name.localeCompare(b.name));
+  }, [nodeVars.charactersInSystem, nodeVars.userCharacters]);
+  return { localCounterCharacters };
 }
 
-export function useSolarSystemNode(props: any) {
-  const { data, selected, id } = props;
-  const { system_static_info, system_signatures, locked, name, tag, status, labels, temporary_name } = data;
+export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarSystemNodeVars {
+  const { id, data, selected } = props;
+  const {
+    id: solar_system_id,
+    locked,
+    name,
+    tag,
+    status,
+    labels,
+    temporary_name,
+    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;
+  } = useMemo(() => {
+    return getSystemStaticInfo(parseInt(solar_system_id))!;
+  }, [solar_system_id]);
 
-  // Global map state
-  const { interfaceSettings } = useMapRootState();
   const { isShowUnsplashedSignatures } = interfaceSettings;
   const isTempSystemNameEnabled = useMapGetOption('show_temp_system_name') === 'true';
+  const isShowLinkedSigId = useMapGetOption('show_linked_signature_id') === 'true';
+  const isShowLinkedSigIdTempName = useMapGetOption('show_linked_signature_id_temp_name') === 'true';
 
   const {
     data: {
       characters,
-      presentCharacters,
       wormholesData,
       hubs,
       kills,
@@ -69,13 +94,13 @@ export function useSolarSystemNode(props: any) {
     outCommand,
   } = useMapState();
 
-  // logic
   const visible = useMemo(() => visibleNodes.has(id), [id, visibleNodes]);
 
+  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).filter(c => c.online);
-    // eslint-disable-next-line
-  }, [characters, presentCharacters, solar_system_id]);
+    return characters.filter(c => c.location?.solar_system_id === parseInt(solar_system_id) && c.online);
+  }, [characters, solar_system_id]);
 
   const isWormhole = isWormholeSpace(system_class);
 
@@ -85,17 +110,22 @@ export function useSolarSystemNode(props: any) {
   );
 
   const sortedStatics = useMemo(() => sortWHClasses(wormholesData, statics), [wormholesData, statics]);
-  
-  const labelsManager = useMemo(() => new LabelsManager(labels ?? ''), [labels]);
-  const labelsInfo = useMemo(() => sortedLabels(labelsManager.list), [labelsManager]);
-  const labelCustom = useMemo(() => labelsManager.customLabel, [labelsManager]);
 
-  const killsCount = useMemo(() => kills[solar_system_id] ?? null, [kills, solar_system_id]);
+  const linkedSigPrefix = useMemo(() => (linkedSigEveId ? linkedSigEveId.split('-')[0] : null), [linkedSigEveId]);
+
+  const { labelsInfo, labelCustom } = useLabelsInfo({
+    labels,
+    linkedSigPrefix,
+    isShowLinkedSigId,
+  });
+
+  const killsCount = useMemo(() => kills[parseInt(solar_system_id)] ?? null, [kills, solar_system_id]);
   const killsActivityType = killsCount ? getActivityType(killsCount) : null;
 
-  const hasUserCharacters = useMemo(() => {
-    return charactersInSystem.some(x => userCharacters.includes(x.eve_id));
-  }, [charactersInSystem, userCharacters]);
+  const hasUserCharacters = useMemo(
+    () => charactersInSystem.some(x => userCharacters.includes(x.eve_id)),
+    [charactersInSystem, userCharacters],
+  );
 
   const dbClick = useDoubleClick(() => {
     outCommand({
@@ -107,38 +137,31 @@ export function useSolarSystemNode(props: any) {
   const showHandlers = isConnecting || hoverNodeId === id;
 
   const space = showKSpaceBG ? REGIONS_MAP[region_id] : '';
-  const regionClass = showKSpaceBG ? SpaceToClass[space] : null;
+  const regionClass = showKSpaceBG ? SpaceToClass[space] || null : null;
 
-  const systemName = (isTempSystemNameEnabled && temporary_name) || solar_system_name;
-  const customName =
-    (isTempSystemNameEnabled && temporary_name && name) || (solar_system_name !== name && name);
+  const { systemName, computedTemporaryName, customName } = useSystemName({
+    isTempSystemNameEnabled,
+    temporary_name,
+    solar_system_name: solar_system_name || '',
+    isShowLinkedSigIdTempName,
+    linkedSigPrefix,
+    name,
+  });
 
-  const [unsplashedLeft, unsplashedRight] = useMemo(() => {
-    if (!isShowUnsplashedSignatures) {
-      return [[], []];
-    }
-    return prepareUnsplashedChunks(
-      system_signatures
-        .filter(s => s.group === 'Wormhole' && !s.linked_system)
-        .map(s => ({
-          eve_id: s.eve_id,
-          type: s.type,
-          custom_info: s.custom_info,
-        })),
-    );
-  }, [isShowUnsplashedSignatures, system_signatures]);
+  const { unsplashedLeft, unsplashedRight } = useUnsplashedSignatures(systemSigs, isShowUnsplashedSignatures);
 
-  const nodeVars = {
-    // original props
+  const hubsAsStrings = useMemo(() => hubs.map(item => item.toString()), [hubs]);
+
+  const nodeVars: SolarSystemNodeVars = {
     id,
     selected,
-    // computed
     visible,
     isWormhole,
     classTitleColor,
     killsCount,
     killsActivityType,
     hasUserCharacters,
+    userCharacters,
     showHandlers,
     regionClass,
     systemName,
@@ -151,12 +174,10 @@ export function useSolarSystemNode(props: any) {
     dbClick,
     sortedStatics,
     effectName: effect_name,
-    regionName: region_name,
-    solarSystemId: solar_system_id,
-    solarSystemName: solar_system_name,
+    solarSystemId: solar_system_id.toString(),
     locked,
-    hubs,
-    name: name,
+    hubs: hubsAsStrings,
+    name,
     isConnecting,
     hoverNodeId,
     charactersInSystem,
@@ -164,8 +185,48 @@ export function useSolarSystemNode(props: any) {
     unsplashedRight,
     isThickConnections,
     classTitle: class_title,
-    temporaryName: temporary_name,
+    temporaryName: computedTemporaryName,
+    regionName: region_name,
+    solarSystemName: solar_system_name,
   };
 
   return nodeVars;
 }
+
+export interface SolarSystemNodeVars {
+  id: string;
+  selected: boolean;
+  visible: boolean;
+  isWormhole: boolean;
+  classTitleColor: string | null;
+  killsCount: number | null;
+  killsActivityType: string | null;
+  hasUserCharacters: boolean;
+  showHandlers: boolean;
+  regionClass: string | null;
+  systemName: string;
+  customName?: string | null;
+  labelCustom: string | null;
+  isShattered: boolean;
+  tag?: string | null;
+  status?: number;
+  labelsInfo: LabelInfo[];
+  dbClick: (event: React.MouseEvent<HTMLDivElement>) => void;
+  sortedStatics: Array<string | number>;
+  effectName: string | null;
+  regionName: string | null;
+  solarSystemId: string;
+  solarSystemName: string | null;
+  locked: boolean;
+  hubs: string[];
+  name: string | null;
+  isConnecting: boolean;
+  hoverNodeId: string | null;
+  charactersInSystem: Array<CharacterTypeRaw>;
+  userCharacters: string[];
+  unsplashedLeft: Array<SystemSignature>;
+  unsplashedRight: Array<SystemSignature>;
+  isThickConnections: boolean;
+  classTitle: string | null;
+  temporaryName?: string | null;
+}

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

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

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

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

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

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

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

@@ -11,7 +11,8 @@
   --rf-tag-color:  #38BDF8;
   --rf-region-name: #D6D3D1;
   --rf-custom-name: #93C5FD;
-
+  --rf-node-font-family: 'Shentox', 'Rogan', sans-serif !important;
+  --rf-node-font-weight: 500;
 
   --rf-bg-variant: "dots";
   --rf-bg-gap: 15;
@@ -27,5 +28,9 @@
   --text-color: #ffffff;
   --tooltip-bg: #202020;
 
-  
+  --window-corner: #72716f;
+
+  --rf-local-counter-font-weight: 500;
+  --rf-node-local-counter: inherit;
+  --rf-has-user-characters: #ffc75d;
 }

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

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

assets/js/hooks/Mapper/components/map/styles/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/map/styles/pathfinder-theme.scss

@@ -1,26 +1,32 @@
-
 @import './eve-common-variables';
 @import './eve-common';
 @import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap');
 
+$homeBase: rgb(197, 253, 67);
+$homeAlpha: rgba(197, 253, 67, 0.32);
+$homeDark30: darken($homeBase, 30%);
+
 .pathfinder-theme {
+  /* -- Override values from the default theme -- */
   --rf-bg-color: #000000;
   --rf-soft-bg-color: #282828;
-
-  --rf-node-bg-color: #202020;
   --rf-node-soft-bg-color: #313335;
   --rf-node-font-weight: bold;
   --rf-text-color: #adadad;
   --rf-region-name: var(--rf-text-color);
   --rf-custom-name: var(--rf-text-color);
-
-  --tooltip-bg: #202020;
-
   --rf-bg-variant: "lines";
-  --rf-bg-gap: 32;
-  --rf-bg-size: 1;
+  --rf-bg-gap: 34;
+  --rf-snap-size: 17;
   --rf-bg-pattern-color: #313131;
+  --rf-local-counter-font-weight: 700;
 
+  /* Additional node-specific overrides */
+  --rf-node-line-height: normal;
+  --rf-node-font-family: 'Oxygen', sans-serif;
+  --rf-tag-color: #fbbf24;
+
+  /* -- theme-specific variables -- */
   --eve-effect-pulsar: #428bca;
   --eve-effect-magnetar: #e06fdf;
   --eve-effect-wolfRayet: #e28a0d;
@@ -40,12 +46,9 @@
   --eve-wh-type-color-c13: #7986cb;
   --eve-wh-type-color-drifter: #44aa82;
 
+  --rf-node-local-counter: #5cb85c;
+  --rf-has-user-characters: #ffc75d;
 
-  --rf-node-font-weight: bold;
-  --rf-node-line-height: normal;
-  --rf-node-font-family: 'Oxygen', sans-serif;
-  --rf-node-text-color: var(--pf-text-color);
-
-  --rf-tag-color: #fbbf24;
-  --rf-has-user-characters: #5cb85c;
-}
+  --eve-solar-system-status-home:                #{$homeAlpha};
+  --eve-solar-system-status-color-home:          #{$homeBase};
+}

assets/js/hooks/Mapper/components/map/utils/wrapNode.tsx

@@ -1,11 +0,0 @@
-// wrapNode.ts
-import { NodeProps } from 'reactflow';
-import { SolarSystemNodeProps } from '../components/SolarSystemNode';
-
-export function wrapNode<T>(
-  SolarSystemNode: React.FC<SolarSystemNodeProps<T>>
-): React.FC<NodeProps<T>> {
-  return function NodeAdapter(props) {
-    return <SolarSystemNode {...props} />;
-  };
-}

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

@@ -1,78 +1,30 @@
-import 'react-grid-layout/css/styles.css';
-import 'react-resizable/css/styles.css';
-import { WidgetGridItem, WidgetsGrid } from '@/hooks/Mapper/components/mapInterface/components';
-import {
-  LocalCharacters,
-  RoutesWidget,
-  SystemInfo,
-  SystemSignatures,
-} from '@/hooks/Mapper/components/mapInterface/widgets';
-import { useState } from 'react';
-import { SESSION_KEY } from '@/hooks/Mapper/constants.ts';
-// import { debounce } from 'lodash/debounce';
-
-const DEFAULT_WINDOWS = [
-  {
-    name: 'info',
-    rightOffset: 5,
-    width: 5,
-    height: 4,
-    item: () => <SystemInfo />,
-  },
-  {
-    name: 'local',
-    rightOffset: 5,
-    topOffset: 4,
-    width: 5,
-    height: 4,
-    item: () => <LocalCharacters />,
-  },
-  { name: 'signatures', width: 8, height: 4, topOffset: 8, rightOffset: 12, item: () => <SystemSignatures /> },
-  {
-    name: 'routes',
-    rightOffset: 0,
-    topOffset: 8,
-    width: 5,
-    height: 6,
-    item: () => <RoutesWidget />,
-  },
-];
-
-const saveWindowsToLS = (toSaveItems: WidgetGridItem[]) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const out = toSaveItems.map(({ item, ...rest }) => rest);
-  localStorage.setItem(SESSION_KEY.windows, JSON.stringify(out));
-};
-
-const restoreWindowsFromLS = (): WidgetGridItem[] => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const raw = localStorage.getItem(SESSION_KEY.windows);
-  if (!raw) {
-    console.warn('No windows found in local storage!!');
-    return DEFAULT_WINDOWS;
-  }
-
-  // eslint-disable-next-line no-debugger
-  const out = (JSON.parse(raw) as Omit<WidgetGridItem, 'item'>[])
-    .filter(x => DEFAULT_WINDOWS.find(def => def.name === x.name))
-    .map(x => {
-      const windowItem = DEFAULT_WINDOWS.find(def => def.name === x.name)?.item;
-      return { ...x, item: windowItem! };
-    });
-
-  return out;
-};
+import { useMemo } from 'react';
+import { WindowManager } from '@/hooks/Mapper/components/ui-kit/WindowManager';
+import { DEFAULT_WIDGETS } from '@/hooks/Mapper/components/mapInterface/constants.tsx';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 
 export const MapInterface = () => {
-  const [items, setItems] = useState<WidgetGridItem[]>(restoreWindowsFromLS);
+  // const [items, setItems] = useState<WindowProps[]>(restoreWindowsFromLS);
+  const { windowsSettings, updateWidgetSettings } = useMapRootState();
+
+  const items = useMemo(() => {
+    return windowsSettings.windows
+      .map(x => {
+        const content = DEFAULT_WIDGETS.find(y => y.id === x.id)?.content;
+        return {
+          ...x,
+          content: content!,
+        };
+      })
+      .filter(x => windowsSettings.visible.some(j => x.id === j));
+  }, [windowsSettings]);
 
   return (
-    <WidgetsGrid
-      items={items}
-      onChange={x => {
-        saveWindowsToLS(x);
-        setItems(x);
-      }}
+    <WindowManager
+      windows={items}
+      viewPort={windowsSettings.viewPort}
+      dragSelector=".react-grid-dragHandleExample"
+      onChange={updateWidgetSettings}
     />
   );
 };

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

assets/js/hooks/Mapper/components/mapInterface/components/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,15 +2,18 @@ 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;
-  children?: React.ReactNode;
-}
+  windowId?: string;
+  contentClassName?: string;
+} & WithChildren;
 
-export const Widget = ({ label, children }: WidgetProps) => {
+export const Widget = ({ label, children, windowId, contentClassName }: WidgetProps) => {
   return (
     <div
+      data-window-id={windowId}
       className={clsx(
         classes.root,
         'flex flex-col w-full h-full rounded',
@@ -32,7 +35,7 @@ export const Widget = ({ label, children }: WidgetProps) => {
         {label}
       </div>
       <div
-        className={clsx(classes.Content, 'overflow-auto', 'bg-opacity-5  custom-scrollbar')}
+        className={clsx(classes.Content, 'overflow-auto', 'bg-opacity-5 custom-scrollbar', contentClassName)}
         style={{ flexGrow: 1 }}
         onContextMenu={e => {
           e.preventDefault();

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

@@ -1,37 +0,0 @@
-.GridLayoutWrapper {
-  width: 100%;
-  height: 100% !important;
-}
-
-.GridLayout {
-  width: 100%;
-  height: 100% !important;
-  pointer-events: none;
-
-  & > div {
-    pointer-events: initial;
-  }
-
-  :global {
-    .react-resizable-handle::after {
-      border-color: #696969 !important;
-    }
-
-    .react-grid-placeholder {
-      background-color: rgba(147, 147, 147, 0.3);
-      //filter: blur(5px);
-      border: 2px dashed #b6b6b6;
-    }
-
-    .react-grid-item {
-      transition-property: none !important;
-    }
-
-    .react-grid-item.cssTransforms {
-      transition-property: none !important;
-    }
-  }
-}
-
-
-

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

@@ -1,196 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-
-import classes from './WidgetsGrid.module.scss';
-import { ItemCallback, Layouts, Responsive, WidthProvider } from 'react-grid-layout';
-import clsx from 'clsx';
-import usePageVisibility from '@/hooks/Mapper/hooks/usePageVisibility.ts';
-
-const ResponsiveGridLayout = WidthProvider(Responsive);
-
-const colSize = 50;
-const initState = { breakpoints: 100, cols: 2 };
-
-export type WidgetGridItem = {
-  rightOffset?: number;
-  leftOffset?: number;
-  topOffset?: number;
-  width: number;
-  height: number;
-  name: string;
-  item: () => React.ReactNode;
-};
-
-export interface WidgetsGridProps {
-  items: WidgetGridItem[];
-  onChange: (items: WidgetGridItem[]) => void;
-}
-
-export const WidgetsGrid = ({ items, onChange }: WidgetsGridProps) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [, setKey] = useState(0);
-  const [callRerenderOfGrid, setCallRerenderOfGrid] = useState(0);
-
-  const isTabVisible = usePageVisibility();
-
-  const refAll = useRef({
-    isReady: false,
-    layouts: {
-      lg: [
-        // { i: 'a', w: 4, h: 16, x: 22, y: 0 },
-        // { i: 'b', w: 5, h: 10, x: 17, y: 0 },
-      ],
-    } as Layouts,
-    breakpoints: { lg: 100, md: 0, sm: 0, xs: 0, xxs: 0 },
-    cols: { lg: 26, md: 0, sm: 0, xs: 0, xxs: 0 },
-    containerWidth: 0,
-    colsPrev: 26,
-    needPostProcess: false,
-    items: [...items],
-  });
-
-  // TODO
-  //  1. onLayoutChange (original) not calling when we change x of any widget
-  //  2. setKey need no call rerender for update props
-  const onLayoutChange: ItemCallback = (newItems, _, newItem) => {
-    const updatedItems = newItems.map(item => {
-      const toLeft = (item.x + item.w / 2) / refAll.current.cols.lg <= 0.5;
-      const original = refAll.current.items.find(x => x.name === item.i)!;
-
-      return {
-        ...original,
-        width: item.w,
-        height: item.h,
-        leftOffset: toLeft ? item.x : undefined,
-        rightOffset: !toLeft ? refAll.current.cols.lg - (item.x + item.w) : undefined,
-        topOffset: item.y,
-      };
-    });
-
-    const sortedItems = [
-      ...updatedItems.filter(x => x.name !== newItem.i),
-      updatedItems.find(x => x.name === newItem.i)!,
-    ];
-
-    refAll.current.layouts = {
-      lg: [...newItems.filter(x => x.i !== newItem.i), newItem],
-    };
-
-    onChange(sortedItems);
-    setKey(x => x + 1);
-  };
-
-  useEffect(() => {
-    refAll.current.items = [...items];
-    setKey(x => x + 1);
-  }, [items]);
-
-  // TODO
-  //  1. Unknown why but if we set layout and cols both instantly it not help...
-  //  1.2 it means that we should make report... until we will send new key on window resize
-  useEffect(() => {
-    const updateItems = () => {
-      if (!containerRef.current) {
-        return;
-      }
-
-      const { width } = containerRef.current.getBoundingClientRect();
-      const newColsCount = (width - (width % colSize)) / colSize;
-
-      refAll.current.layouts = {
-        lg: refAll.current.items.map(({ name, width, height, rightOffset, leftOffset, topOffset = 0 }) => {
-          return {
-            i: name,
-            x: rightOffset != null ? newColsCount - width - rightOffset : leftOffset ?? 0,
-            y: topOffset,
-            w: width,
-            h: height,
-          };
-        }),
-      };
-      refAll.current.cols = { lg: newColsCount, md: 0, sm: 0, xs: 0, xxs: 0 };
-    };
-
-    const updateContainerWidth = () => {
-      if (!containerRef.current) {
-        return;
-      }
-
-      const { width } = containerRef.current.getBoundingClientRect();
-
-      refAll.current.containerWidth = width;
-      const newColsCount = (width - (width % colSize)) / colSize;
-
-      if (width <= 100 || refAll.current.cols.lg === newColsCount) {
-        return false;
-      }
-
-      if (!refAll.current.isReady) {
-        updateItems();
-        setCallRerenderOfGrid(x => x + 1);
-        refAll.current.isReady = true;
-        return;
-      }
-
-      refAll.current.layouts = {
-        lg: refAll.current.layouts.lg.map(lgEl => {
-          const toLeft = (lgEl.x + lgEl.w / 2) / refAll.current.cols.lg <= 0.5;
-          const next = {
-            ...lgEl,
-            x: toLeft ? lgEl.x : newColsCount - (refAll.current.cols.lg - lgEl.x),
-          };
-          return next;
-        }),
-      };
-
-      refAll.current.cols = { lg: newColsCount, md: 0, sm: 0, xs: 0, xxs: 0 };
-      setCallRerenderOfGrid(x => x + 1);
-    };
-
-    setTimeout(() => updateContainerWidth(), 100);
-
-    const withRerender = () => {
-      updateContainerWidth();
-      setCallRerenderOfGrid(x => x + 1);
-    };
-
-    window.addEventListener('resize', withRerender);
-    return () => {
-      window.removeEventListener('resize', withRerender);
-    };
-  }, []);
-
-  const isNotSet = initState.cols === refAll.current.cols.lg;
-
-  return (
-    <div ref={containerRef} className={clsx(classes.GridLayoutWrapper, 'relative p-4')}>
-      {!isNotSet && isTabVisible && (
-        <ResponsiveGridLayout
-          key={callRerenderOfGrid}
-          className={classes.GridLayout}
-          layouts={refAll.current.layouts}
-          breakpoints={refAll.current.breakpoints}
-          cols={refAll.current.cols}
-          rowHeight={30}
-          width={refAll.current.containerWidth}
-          preventCollision={true}
-          compactType={null}
-          allowOverlap
-          onDragStop={onLayoutChange}
-          onResizeStop={onLayoutChange}
-          // onResizeStart={onLayoutChange}
-          // onDragStart={onLayoutChange}
-          isBounded
-          containerPadding={[0, 0]}
-          resizeHandles={['sw', 'se']}
-          draggableHandle=".react-grid-dragHandleExample"
-        >
-          {refAll.current.items.map(x => (
-            <div key={x.name} className="grid-item">
-              {x.item()}
-            </div>
-          ))}
-        </ResponsiveGridLayout>
-      )}
-    </div>
-  );
-};

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

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

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

@@ -1,5 +1,4 @@
 export * from './Widget';
-export * from './WidgetsGrid';
 export * from './SystemSettingsDialog';
 export * from './SystemCustomLabelDialog';
 export * from './SystemLinkSignatureDialog';

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

@@ -0,0 +1,118 @@
+import { WindowProps } from '@/hooks/Mapper/components/ui-kit/WindowManager/types.ts';
+import {
+  LocalCharacters,
+  RoutesWidget,
+  SystemInfo,
+  SystemSignatures,
+  SystemStructures,
+  WSystemKills,
+} from '@/hooks/Mapper/components/mapInterface/widgets';
+import { CommentsWidget } from '@/hooks/Mapper/components/mapInterface/widgets/CommentsWidget';
+
+export const CURRENT_WINDOWS_VERSION = 9;
+export const WINDOWS_LOCAL_STORE_KEY = 'windows:settings:v2';
+
+export enum WidgetsIds {
+  info = 'info',
+  signatures = 'signatures',
+  local = 'local',
+  routes = 'routes',
+  structures = 'structures',
+  kills = 'kills',
+  comments = 'comments',
+}
+
+export const STORED_VISIBLE_WIDGETS_DEFAULT = [
+  WidgetsIds.info,
+  WidgetsIds.local,
+  WidgetsIds.routes,
+  WidgetsIds.signatures,
+];
+
+export const DEFAULT_WIDGETS: WindowProps[] = [
+  {
+    id: WidgetsIds.info,
+    position: { x: 10, y: 10 },
+    size: { width: 250, height: 200 },
+    zIndex: 0,
+    content: () => <SystemInfo />,
+  },
+  {
+    id: WidgetsIds.signatures,
+    position: { x: 10, y: 220 },
+    size: { width: 250, height: 300 },
+    zIndex: 0,
+    content: () => <SystemSignatures />,
+  },
+  {
+    id: WidgetsIds.local,
+    position: { x: 270, y: 10 },
+    size: { width: 250, height: 510 },
+    zIndex: 0,
+    content: () => <LocalCharacters />,
+  },
+  {
+    id: WidgetsIds.routes,
+    position: { x: 10, y: 530 },
+    size: { width: 510, height: 200 },
+    zIndex: 0,
+    content: () => <RoutesWidget />,
+  },
+  {
+    id: WidgetsIds.structures,
+    position: { x: 10, y: 730 },
+    size: { width: 510, height: 200 },
+    zIndex: 0,
+    content: () => <SystemStructures />,
+  },
+  {
+    id: WidgetsIds.kills,
+    position: { x: 270, y: 730 },
+    size: { width: 510, height: 200 },
+    zIndex: 0,
+    content: () => <WSystemKills />,
+  },
+  {
+    id: WidgetsIds.comments,
+    position: { x: 10, y: 10 },
+    size: { width: 250, height: 300 },
+    zIndex: 0,
+    content: () => <CommentsWidget />,
+  },
+];
+
+type WidgetsCheckboxesType = {
+  id: WidgetsIds;
+  label: string;
+}[];
+
+export const WIDGETS_CHECKBOXES_PROPS: WidgetsCheckboxesType = [
+  {
+    id: WidgetsIds.info,
+    label: 'System Info',
+  },
+  {
+    id: WidgetsIds.signatures,
+    label: 'Signatures',
+  },
+  {
+    id: WidgetsIds.local,
+    label: 'Local',
+  },
+  {
+    id: WidgetsIds.routes,
+    label: 'Routes',
+  },
+  {
+    id: WidgetsIds.structures,
+    label: 'Structures',
+  },
+  {
+    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/LocalCharacters.module.scss

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

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

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

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

@@ -0,0 +1,76 @@
+import React, { useRef } from 'react';
+import clsx from 'clsx';
+import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth';
+import { LayoutEventBlocker, TooltipPosition, WdCheckbox, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
+
+interface LocalCharactersHeaderProps {
+  sortedCount: number;
+  showList: boolean;
+  showOffline: boolean;
+  settings: {
+    compact: boolean;
+    showOffline: boolean;
+    showShipName: boolean;
+  };
+  setSettings: (fn: (prev: any) => any) => void;
+}
+
+export const LocalCharactersHeader: React.FC<LocalCharactersHeaderProps> = ({
+  sortedCount,
+  showList,
+  showOffline,
+  settings,
+  setSettings,
+}) => {
+  const headerRef = useRef<HTMLDivElement>(null);
+  const compactOffline = useMaxWidth(headerRef, 145);
+  const compactShipName = useMaxWidth(headerRef, 195);
+
+  return (
+    <div className="flex w-full items-center text-xs justify-between" ref={headerRef}>
+      <div className="flex-shrink-0 select-none mr-2">Local{showList ? ` [${sortedCount}]` : ''}</div>
+      <LayoutEventBlocker className="flex items-center gap-2 justify-end">
+        <div className="flex items-center gap-2">
+          {showOffline && (
+            <WdTooltipWrapper content="Show offline characters in system" position={TooltipPosition.top}>
+              <WdCheckbox
+                size="xs"
+                labelSide="left"
+                label={compactOffline ? '' : 'Offline'}
+                value={settings.showOffline}
+                onChange={() => setSettings((prev: any) => ({ ...prev, showOffline: !prev.showOffline }))}
+                classNameLabel={clsx('whitespace-nowrap text-stone-400 hover:text-stone-200 transition duration-300', {
+                  truncate: compactOffline,
+                })}
+              />
+            </WdTooltipWrapper>
+          )}
+
+          {settings.compact && (
+            <WdTooltipWrapper content="Show ship name in compact rows" position={TooltipPosition.top}>
+              <WdCheckbox
+                size="xs"
+                labelSide="left"
+                label={compactShipName ? '' : 'Ship name'}
+                value={settings.showShipName}
+                onChange={() => setSettings((prev: any) => ({ ...prev, showShipName: !prev.showShipName }))}
+                classNameLabel={clsx('whitespace-nowrap text-stone-400 hover:text-stone-200 transition duration-300', {
+                  truncate: compactShipName,
+                })}
+              />
+            </WdTooltipWrapper>
+          )}
+        </div>
+        <WdTooltipWrapper content="Enable compact mode" position={TooltipPosition.top}>
+          <span
+            className={clsx('w-4 h-4 min-w-[1rem] cursor-pointer', {
+              'hero-bars-2': settings.compact,
+              'hero-bars-3': !settings.compact,
+            })}
+            onClick={() => setSettings((prev: any) => ({ ...prev, compact: !prev.compact }))}
+          />
+        </WdTooltipWrapper>
+      </LayoutEventBlocker>
+    </div>
+  );
+};

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

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

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

@@ -0,0 +1,28 @@
+import classes from './LocalCharactersItemTemplate.module.scss';
+import clsx from 'clsx';
+import { CharacterCard } from '@/hooks/Mapper/components/ui-kit';
+import { CharItemProps } from '@/hooks/Mapper/components/mapInterface/widgets/LocalCharacters/components';
+import { VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
+
+export type LocalCharactersItemTemplateProps = { showShipName: boolean } & CharItemProps &
+  VirtualScrollerTemplateOptions;
+
+export const LocalCharactersItemTemplate = ({ showShipName, ...options }: LocalCharactersItemTemplateProps) => {
+  return (
+    <div
+      className={clsx(
+        classes.CharacterRow,
+        'box-border flex items-center w-full whitespace-nowrap overflow-hidden text-ellipsis min-w-[0px]',
+        'px-1',
+        {
+          'surface-hover': options.odd,
+          'border-b border-gray-600 border-opacity-20': !options.last,
+          'bg-green-500 hover:bg-green-700 transition duration-300 bg-opacity-10 hover:bg-opacity-10': options.online,
+        },
+      )}
+      style={{ height: `${options.props.itemSize}px` }}
+    >
+      <CharacterCard showShipName={showShipName} {...options} />
+    </div>
+  );
+};

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

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

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

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

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

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

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

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

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

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

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

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