chore: release version v1.13.7

.devcontainer/Dockerfile

@@ -1,7 +1,12 @@
-FROM elixir:1.17-otp-27
+FROM elixir:1.16-otp-25
 
-RUN apt install -yq curl gnupg
+RUN apt update -yq
+RUN apt install -yq curl gnupg mc inotify-tools
 RUN apt --fix-broken install
+RUN apt remove -y nodejs nodejs-doc
+RUN curl -sL https://deb.nodesource.com/setup_18.x  | bash -
+RUN apt install -y nodejs
+RUN npm install --global yarn
 
 RUN mix local.hex --force
 

.devcontainer/devcontainer.json

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

.devcontainer/docker-compose.yml

@@ -2,7 +2,7 @@ version: "0.1"
 
 services:
   db:
-    image: postgres:13-alpine
+    image: postgres:14.3
     restart: always
     environment:
       POSTGRES_USER: postgres
@@ -10,13 +10,13 @@ services:
     ports:
       - "5432:5432"
     volumes:
-      - db-new:/var/lib/postgresql/data
+      - db:/var/lib/postgresql/data
 
   wanderer:
     environment:
       PORT: 8000
       DB_HOST: db
-      WEB_APP_URL: "http://localhost:8000"
+      WEB_APP_URL: "http://localhost:4444"
       ERL_AFLAGS: "-kernel shell_history enabled"
     build:
       context: .
@@ -33,4 +33,4 @@ services:
 
 volumes:
   elixir-artifacts: {}
-  db-new: {}
+  db: {}

.env.example

@@ -6,6 +6,3 @@ export EVE_CLIENT_WITH_WALLET_ID="<EVE_CLIENT_WITH_WALLET_ID>"
 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,6 +1,8 @@
 name: Build
 
 on:
+  pull_request:
+    types: [opened, synchronize, reopened, labeled, unlabeled]
   push:
     branches:
       - main
@@ -39,28 +41,8 @@ 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:
@@ -96,23 +78,22 @@ jobs:
           fetch-depth: 0
       - name: 😅 Cache deps
         id: cache-deps
-        uses: actions/cache@v4
+        uses: actions/cache@v3
         env:
           cache-name: cache-elixir-deps
         with:
-          path: |
-            deps
-          key: ${{ runner.os }}-mix-${{ matrix.elixir }}-${{ matrix.otp }}-${{ hashFiles('**/mix.lock') }}
+          path: deps
+          key: ${{ runner.os }}-mix-${{ env.cache-name }}-${{ hashFiles('**/mix.lock') }}
           restore-keys: |
-            ${{ runner.os }}-mix-${{ matrix.elixir }}-${{ matrix.otp }}-
+            ${{ runner.os }}-mix-${{ env.cache-name }}-
       - name: 😅 Cache compiled build
         id: cache-build
-        uses: actions/cache@v4
+        uses: actions/cache@v3
         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') }}-
@@ -141,9 +122,6 @@ 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
@@ -157,7 +135,6 @@ jobs:
       matrix:
         platform:
           - linux/amd64
-          - linux/arm64
     steps:
       - name: Prepare
         run: |
@@ -206,28 +183,15 @@ jobs:
           push: true
           context: .
           file: ./Dockerfile
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
+          tags: ${{ env.REGISTRY_IMAGE }}:latest,${{ env.REGISTRY_IMAGE }}:${{ steps.get-latest-tag.outputs.tag }}
           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: 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
+      - name: Image digest
+        run: echo ${{ steps.build.outputs.digest }}
 
       - uses: markpatterson27/markdown-to-output@v1
         id: extract-changelog
@@ -247,54 +211,16 @@ jobs:
           maxLength: 500
           truncationSymbol: "…"
 
-  merge:
-    runs-on: ubuntu-latest
-    needs:
-      - docker
-    steps:
-      - name: Download digests
-        uses: actions/download-artifact@v4
+      - name: Discord Webhook Action
+        uses: tsickert/discord-webhook@v5.3.0
         with:
-          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 }}
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          content: ${{ steps.get-content.outputs.string }}
 
   create-release:
     name: 🏷 Create Release
     runs-on: ubuntu-22.04
-    needs: [docker, merge]
+    needs: docker
     if: ${{ github.ref == 'refs/heads/main' && github.event_name == 'push' }}
     steps:
       - name: ⬇️ Checkout repo
@@ -302,11 +228,17 @@ 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: ${{ needs.docker.outputs.release-tag }}
-          name: Release ${{ needs.docker.outputs.release-tag }}
+          tag_name: ${{ steps.get-latest-tag.outputs.tag }}
+          name: Release ${{ steps.get-latest-tag.outputs.tag }}
           body: |
             ## Info
             Commit ${{ github.sha }} was deployed to `staging`. [See code diff](${{ github.event.compare }}).
@@ -316,9 +248,3 @@ 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 }}

.github/workflows/release_actions.yml

@@ -18,4 +18,4 @@ jobs:
           key: ${{ secrets.SSH_KEY }}
           port: ${{ secrets.PORT }}
           script: |
-            /home/wanderer/app/deploy.sh ${{ github.event.release.tag_name }}
+            /app/release/linux/deploy.sh ${{ github.event.release.tag_name }}

.tool-versions

@@ -1,3 +1,3 @@
-erlang 26.2.5.5
-elixir 1.17.3-otp-26
+erlang 25.3
+elixir 1.16-otp-25
 nodejs 18.0.0

Dockerfile

@@ -9,9 +9,6 @@ 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

README.md

@@ -20,11 +20,11 @@ Interested to learn more? [Check more on our website](https://wanderer.ltd/news)
 
 Wanderer is open source project and we have a free as in beer and self-hosted solution called [Wanderer Community Edition (CE)](https://wanderer.ltd/news/community-edition). Here are the differences between Wanderer and Wanderer CE:
 
-|                               | Wanderer Cloud                                                                                                                                                                                                                                                                                                                              | Wanderer Community Edition                                                                                                                                                                                                                           |
-| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Infrastructure management** | Easy and convenient. It takes 2 minutes to register your character and create a map. We manage everything so you don’t have to worry about anything and can focus on gameplay.                                                                                                                                                              | You do it all yourself. You need to get a server and you need to manage your infrastructure. You are responsible for installation, maintenance, upgrades, server capacity, uptime, backup, security, stability, consistency, loading time and so on. |
-| **Release schedule**          | Continuously developed and improved with new features and updates multiple times per week.                                                                                                                                                                                                                                                  | Latest features and improvements won't be immediately available.                                                                                                                                                                                     |
-| **Server location**           | All visitor data is exclusively processed on EU-owned cloud infrastructure. We keep your site data on a secure, encrypted and green energy powered server in Germany. This ensures that your site data is protected by the strict European Union data privacy laws and ensures compliance with GDPR. Your website data never leaves the EU. | You have full control and can host your instance on any server in any country that you wish. Host it on a server in your basement or host it with any cloud provider wherever you want, even those that are not GDPR compliant.                      |
+|  | Wanderer Cloud  | Wanderer Community Edition |
+| ------------- | ------------- | ------------- |
+| **Infrastructure management** | Easy and convenient. It takes 2 minutes to register your character and create a map. We manage everything so you don’t have to worry about anything and can focus on gameplay. | You do it all yourself. You need to get a server and you need to manage your infrastructure. You are responsible for installation, maintenance, upgrades, server capacity, uptime, backup, security, stability, consistency, loading time and so on.|
+| **Release schedule** | Continuously developed and improved with new features and updates multiple times per week. | Latest features and improvements won't be immediately available.|
+| **Server location** | All visitor data is exclusively processed on EU-owned cloud infrastructure. We keep your site data on a secure, encrypted and green energy powered server in Germany. This ensures that your site data is protected by the strict European Union data privacy laws and ensures compliance with GDPR. Your website data never leaves the EU. | You have full control and can host your instance on any server in any country that you wish. Host it on a server in your basement or host it with any cloud provider wherever you want, even those that are not GDPR compliant.|
 
 Interested in self-hosting Wanderer CE on your server? Take a look at our [Wanderer CE installation instructions](https://github.com/wanderer-industries/community-edition/).
 
@@ -54,14 +54,7 @@ Now you can visit [`localhost:8000`](http://localhost:8000) from your browser.
 #### Using .devcontainer
 
 - Run devcontainer
-- Install additional dependencies inside Dev container
-- `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
+- See how to start server in #setup section
 
 #### Using nix flakes
 

assets/app.tsx

@@ -1,3 +1,6 @@
+// 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

@@ -3,8 +3,6 @@
 @import 'primereact/resources/themes/arya-blue/theme.css' layer(primereact);
 /*@import 'primereact/resources/themes/bootstrap4-dark-blue/theme.css' layer(primereact);*/
 
-@import '../js/hooks/Mapper/components/map/styles/index.scss';
-
 @layer tailwind-base {
   @tailwind base;
 }
@@ -25,10 +23,6 @@ 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;
@@ -472,530 +466,3 @@ body > div:first-of-type {
     transform: rotate(-360deg);
   }
 }
-
-/* Map refresh */
-.socket {
-  scale: 0.5;
-  width: 150px;
-  height: 150px;
-  left: 50%;
-  /* margin-left: -75px; */
-  top: 50%;
-  /* margin-top: -50px; */
-}
-
-.hex-brick {
-  background: #000;
-  width: 30px;
-  height: 17px;
-  position: absolute;
-  top: 5px;
-  animation-name: fade;
-  animation-duration: 2s;
-  animation-iteration-count: infinite;
-  -webkit-animation-name: fade;
-  -webkit-animation-duration: 2s;
-  -webkit-animation-iteration-count: infinite;
-}
-
-.hex-brick--active {
-  animation-name: fade-active;
-  -webkit-animation-name: fade-active;
-}
-
-.h2 {
-  transform: rotate(60deg);
-  -webkit-transform: rotate(60deg);
-}
-
-.h3 {
-  transform: rotate(-60deg);
-  -webkit-transform: rotate(-60deg);
-}
-
-.gel {
-  height: 30px;
-  width: 30px;
-  transition: all 0.3s;
-  -webkit-transition: all 0.3s;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-}
-
-.center-gel {
-  margin-left: -15px;
-  margin-top: -15px;
-
-  animation-name: pulse-version;
-  animation-duration: 2s;
-  animation-iteration-count: infinite;
-  -webkit-animation-name: pulse-version;
-  -webkit-animation-duration: 2s;
-  -webkit-animation-iteration-count: infinite;
-}
-
-.c1 {
-  margin-left: -47px;
-  margin-top: -15px;
-}
-
-.c2 {
-  margin-left: -31px;
-  margin-top: -43px;
-}
-
-.c3 {
-  margin-left: 1px;
-  margin-top: -43px;
-}
-
-.c4 {
-  margin-left: 17px;
-  margin-top: -15px;
-}
-.c5 {
-  margin-left: -31px;
-  margin-top: 13px;
-}
-
-.c6 {
-  margin-left: 1px;
-  margin-top: 13px;
-}
-
-.c7 {
-  margin-left: -63px;
-  margin-top: -43px;
-}
-
-.c8 {
-  margin-left: 33px;
-  margin-top: -43px;
-}
-
-.c9 {
-  margin-left: -15px;
-  margin-top: 41px;
-}
-
-.c10 {
-  margin-left: -63px;
-  margin-top: 13px;
-}
-
-.c11 {
-  margin-left: 33px;
-  margin-top: 13px;
-}
-
-.c12 {
-  margin-left: -15px;
-  margin-top: -71px;
-}
-
-.c13 {
-  margin-left: -47px;
-  margin-top: -71px;
-}
-
-.c14 {
-  margin-left: 17px;
-  margin-top: -71px;
-}
-
-.c15 {
-  margin-left: -47px;
-  margin-top: 41px;
-}
-
-.c16 {
-  margin-left: 17px;
-  margin-top: 41px;
-}
-
-.c17 {
-  margin-left: -79px;
-  margin-top: -15px;
-}
-
-.c18 {
-  margin-left: 49px;
-  margin-top: -15px;
-}
-
-.c19 {
-  margin-left: -63px;
-  margin-top: -99px;
-}
-
-.c20 {
-  margin-left: 33px;
-  margin-top: -99px;
-}
-
-.c21 {
-  margin-left: 1px;
-  margin-top: -99px;
-}
-
-.c22 {
-  margin-left: -31px;
-  margin-top: -99px;
-}
-
-.c23 {
-  margin-left: -63px;
-  margin-top: 69px;
-}
-
-.c24 {
-  margin-left: 33px;
-  margin-top: 69px;
-}
-
-.c25 {
-  margin-left: 1px;
-  margin-top: 69px;
-}
-
-.c26 {
-  margin-left: -31px;
-  margin-top: 69px;
-}
-
-.c27 {
-  margin-left: -79px;
-  margin-top: -15px;
-}
-
-.c28 {
-  margin-left: -95px;
-  margin-top: -43px;
-}
-
-.c29 {
-  margin-left: -95px;
-  margin-top: 13px;
-}
-
-.c30 {
-  margin-left: 49px;
-  margin-top: 41px;
-}
-
-.c31 {
-  margin-left: -79px;
-  margin-top: -71px;
-}
-
-.c32 {
-  margin-left: -111px;
-  margin-top: -15px;
-}
-
-.c33 {
-  margin-left: 65px;
-  margin-top: -43px;
-}
-
-.c34 {
-  margin-left: 65px;
-  margin-top: 13px;
-}
-
-.c35 {
-  margin-left: -79px;
-  margin-top: 41px;
-}
-
-.c36 {
-  margin-left: 49px;
-  margin-top: -71px;
-}
-
-.c37 {
-  margin-left: 81px;
-  margin-top: -15px;
-}
-
-.r1 {
-  animation-name: pulse-version;
-  animation-duration: 2s;
-  animation-iteration-count: infinite;
-  animation-delay: 0.2s;
-  -webkit-animation-name: pulse-version;
-  -webkit-animation-duration: 2s;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-delay: 0.2s;
-}
-
-.r2 {
-  animation-name: pulse-version;
-  animation-duration: 2s;
-  animation-iteration-count: infinite;
-  animation-delay: 0.4s;
-  -webkit-animation-name: pulse-version;
-  -webkit-animation-duration: 2s;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-delay: 0.4s;
-}
-
-.r3 {
-  animation-name: pulse-version;
-  animation-duration: 2s;
-  animation-iteration-count: infinite;
-  animation-delay: 0.6s;
-  -webkit-animation-name: pulse-version;
-  -webkit-animation-duration: 2s;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-delay: 0.6s;
-}
-
-.r1 > .hex-brick {
-  animation-name: fade;
-  animation-duration: 2s;
-  animation-iteration-count: infinite;
-  animation-delay: 0.2s;
-  -webkit-animation-name: fade;
-  -webkit-animation-duration: 2s;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-delay: 0.2s;
-}
-
-.r1 > .hex-brick--active {
-  animation-name: fade-active;
-  -webkit-animation-name: fade-active;
-}
-
-.r2 > .hex-brick {
-  animation-name: fade;
-  animation-duration: 2s;
-  animation-iteration-count: infinite;
-  animation-delay: 0.4s;
-  -webkit-animation-name: fade;
-  -webkit-animation-duration: 2s;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-delay: 0.4s;
-}
-
-.r2 > .hex-brick--active {
-  animation-name: fade-active;
-  -webkit-animation-name: fade-active;
-}
-
-.r3 > .hex-brick {
-  animation-name: fade;
-  animation-duration: 2s;
-  animation-iteration-count: infinite;
-  animation-delay: 0.6s;
-  -webkit-animation-name: fade;
-  -webkit-animation-duration: 2s;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-delay: 0.6s;
-}
-
-.r3 > .hex-brick--active {
-  animation-name: fade-active;
-  -webkit-animation-name: fade-active;
-}
-
-@keyframes pulse-version {
-  0% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-
-  50% {
-    -webkit-transform: scale(0.01);
-    transform: scale(0.01);
-  }
-
-  100% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-}
-
-@keyframes fade {
-  0% {
-    background: #09d0e2;
-  }
-
-  50% {
-    background: #8ae6ee;
-  }
-
-  100% {
-    background: #09d0e2;
-  }
-}
-
-@keyframes fade-active {
-  0% {
-    background: #ff52d9;
-  }
-
-  50% {
-    background: #ff52d9;
-  }
-
-  100% {
-    background: #ff52d9;
-  }
-}
-
-@-webkit-keyframes pulse {
-  0% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-
-  50% {
-    -webkit-transform: scale(0.01);
-    transform: scale(0.01);
-  }
-
-  100% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-}
-
-@-webkit-keyframes fade {
-  0% {
-    background: #abf8ff;
-  }
-
-  50% {
-    background: #389ca6;
-  }
-
-  100% {
-    background: #abf8ff;
-  }
-}
-/* Map refresh END */
-
-.inputContainer {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-}
-.inputContainer > span:nth-child(1),
-.inputContainer > label:nth-child(1) {
-  color: var(--gray-200);
-  font-size: 13px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-.inputContainer > :nth-child(2) {
-  border-bottom: 2px dotted #3f3f3f;
-  height: 1px;
-  margin: 0 12px;
-}
-
-.smallInputSwitch {
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-.smallInputSwitch .p-inputswitch {
-  height: 1rem;
-  width: 2rem;
-}
-.smallInputSwitch .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider::before {
-  transform: translateX(1rem);
-}
-.smallInputSwitch .p-inputswitch.p-highlight .p-inputswitch-slider:before {
-  transform: translateX(1rem);
-}
-.smallInputSwitch .p-inputswitch .p-inputswitch-slider::before {
-  width: 0.8rem;
-  height: 0.8rem;
-  margin-top: -0.4rem;
-  margin-left: -3px;
-}
-
-.checkboxRoot.sizeXS {
-  width: 14px;
-  height: 14px;
-}
-.checkboxRoot.sizeXS .p-checkbox-box,
-.checkboxRoot.sizeXS .p-checkbox-input {
-  width: 14px;
-  height: 14px;
-}
-.checkboxRoot.sizeM {
-  width: 16px;
-  height: 16px;
-}
-.checkboxRoot.sizeM .p-checkbox-box,
-.checkboxRoot.sizeM .p-checkbox-input {
-  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

@@ -15,10 +15,11 @@ const ErrorFallback = () => {
 };
 
 export default function MapRoot({ hooks }) {
+  const mapRef = useRef<MapHandlers>(null);
   const providerRef = useRef<MapHandlers>(null);
   const hooksRef = useRef<any>(hooks);
 
-  const mapperHandlerRefs = useRef([providerRef]);
+  const mapperHandlerRefs = useRef([mapRef, providerRef]);
 
   const { handleCommand, handleMapEvent, handleMapEvents } = useMapperHandlers(mapperHandlerRefs.current, hooksRef);
 
@@ -40,7 +41,7 @@ export default function MapRoot({ hooks }) {
 
   return (
     <PrimeReactProvider>
-      <MapRootProvider fwdRef={providerRef} outCommand={handleCommand}>
+      <MapRootProvider fwdRef={providerRef} outCommand={handleCommand} mapRef={mapRef}>
         <ErrorBoundary FallbackComponent={ErrorFallback} onError={logError}>
           <ReactFlowProvider>
             <MapRootContent />

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

@@ -108,32 +108,3 @@
 .p-dropdown-empty-message {
   padding: 0.25rem 0.5rem;
 }
-
-.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;
-  }
-}

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

@@ -1,19 +1,20 @@
 import { useCallback } from 'react';
 import clsx from 'clsx';
 import { useAutoAnimate } from '@formkit/auto-animate/react';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { Commands } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { CharacterTypeRaw } from '@/hooks/Mapper/types';
-import { emitMapEvent } from '@/hooks/Mapper/events';
 
 const Characters = ({ data }: { data: CharacterTypeRaw[] }) => {
   const [parent] = useAutoAnimate();
+  const { mapRef } = useMapRootState();
 
-  const handleSelect = useCallback((character: CharacterTypeRaw) => {
-    emitMapEvent({
-      name: Commands.centerSystem,
-      data: character?.location?.solar_system_id?.toString(),
-    });
-  }, []);
+  const handleSelect = useCallback(
+    (character: CharacterTypeRaw) => {
+      mapRef.current?.command(Commands.centerSystem, character?.location?.solar_system_id?.toString());
+    },
+    [mapRef],
+  );
 
   const items = data.map(character => (
     <li

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

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

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

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

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

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

assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/useContextMenuSystemHandlers.ts

@@ -88,23 +88,6 @@ export const useContextMenuSystemHandlers = ({ systems, hubs, outCommand }: UseC
     setSystem(undefined);
   }, []);
 
-  const onSystemTemporaryName = useCallback((temporaryName?: string) => {
-    const { system, outCommand } = ref.current;
-    if (!system) {
-      return;
-    }
-
-    outCommand({
-      type: OutCommand.updateSystemTemporaryName,
-      data: {
-        system_id: system,
-        value: temporaryName ?? '',
-      },
-    });
-    setSystem(undefined);
-  }, []);
-
-
   const onSystemStatus = useCallback((status: number) => {
     const { system, outCommand } = ref.current;
     if (!system) {
@@ -178,7 +161,6 @@ export const useContextMenuSystemHandlers = ({ systems, hubs, outCommand }: UseC
     onLockToggle,
     onHubToggle,
     onSystemTag,
-    onSystemTemporaryName,
     onSystemStatus,
     onSystemLabels,
     onOpenSettings,

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

@@ -6,9 +6,6 @@ import { PrimeIcons } from 'primereact/api';
 import { ContextMenuSystemProps } from '@/hooks/Mapper/components/contexts';
 import { useWaypointMenu } from '@/hooks/Mapper/components/contexts/hooks';
 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';
 
 export const useContextMenuSystemItems = ({
   onDeleteSystem,
@@ -28,7 +25,6 @@ export const useContextMenuSystemItems = ({
   const getStatus = useStatusMenu(systems, systemId, onSystemStatus);
   const getLabels = useLabelsMenu(systems, systemId, onSystemLabels, onCustomLabelDialog);
   const getWaypointMenu = useWaypointMenu(onWaypointSet);
-  const canLockSystem = useMapCheckPermissions([UserPermission.LOCK_SYSTEM]);
 
   return useMemo(() => {
     const system = systemId ? getSystemById(systems, systemId) : undefined;
@@ -45,8 +41,6 @@ export const useContextMenuSystemItems = ({
             <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)}
               showEdit
               onOpenSettings={onOpenSettings}
             />
@@ -64,25 +58,19 @@ export const useContextMenuSystemItems = ({
         command: onHubToggle,
       },
       ...(system.locked
-        ? canLockSystem
-          ? [
-              {
-                label: 'Unlock',
-                icon: PrimeIcons.LOCK_OPEN,
-                command: onLockToggle,
-              },
-            ]
-          : []
+        ? [
+            {
+              label: 'Unlock',
+              icon: PrimeIcons.LOCK_OPEN,
+              command: onLockToggle,
+            },
+          ]
         : [
-            ...(canLockSystem
-              ? [
-                  {
-                    label: 'Lock',
-                    icon: PrimeIcons.LOCK,
-                    command: onLockToggle,
-                  },
-                ]
-              : []),
+            {
+              label: 'Lock',
+              icon: PrimeIcons.LOCK,
+              command: onLockToggle,
+            },
             { separator: true },
             {
               label: 'Delete',
@@ -92,7 +80,6 @@ export const useContextMenuSystemItems = ({
           ]),
     ];
   }, [
-    canLockSystem,
     systems,
     systemId,
     getTags,

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

@@ -10,7 +10,6 @@ import { WaypointSetContextHandler } from '@/hooks/Mapper/components/contexts/ty
 import { FastSystemActions } from '@/hooks/Mapper/components/contexts/components';
 import { useJumpPlannerMenu } from '@/hooks/Mapper/components/contexts/hooks';
 import { Route } from '@/hooks/Mapper/types/routes.ts';
-import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace.ts';
 
 export interface ContextMenuSystemInfoProps {
   systemStatics: Map<number, SolarSystemStaticInfoRaw>;
@@ -49,6 +48,7 @@ export const ContextMenuSystemInfo: React.FC<ContextMenuSystemInfoProps> = ({
     if (!systemId || !system) {
       return [];
     }
+
     return [
       {
         className: classes.FastActions,
@@ -57,8 +57,6 @@ export const ContextMenuSystemInfo: React.FC<ContextMenuSystemInfoProps> = ({
             <FastSystemActions
               systemId={systemId}
               systemName={system.solar_system_name}
-              regionName={system.region_name}
-              isWH={isWormholeSpace(system.system_class)}
               onOpenSettings={onOpenSettings}
             />
           );

assets/js/hooks/Mapper/components/contexts/ContextMenuSystemInfo/useContextMenuSystemInfoHandlers.ts

@@ -1,25 +1,25 @@
-import * as React from 'react';
-import { useCallback, useRef, useState } from 'react';
+import { RefObject, useCallback, useRef, useState } from 'react';
 import { ContextMenu } from 'primereact/contextmenu';
-import { Commands, OutCommand, OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers.ts';
+import { Commands, MapHandlers, OutCommand, OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { WaypointSetContextHandler } from '@/hooks/Mapper/components/contexts/types.ts';
 import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
+import * as React from 'react';
 import { SolarSystemStaticInfoRaw } from '@/hooks/Mapper/types';
-import { emitMapEvent } from '@/hooks/Mapper/events';
 
 interface UseContextMenuSystemHandlersProps {
   hubs: string[];
   outCommand: OutCommandHandler;
+  mapRef: RefObject<MapHandlers>;
 }
 
-export const useContextMenuSystemInfoHandlers = ({ hubs, outCommand }: UseContextMenuSystemHandlersProps) => {
+export const useContextMenuSystemInfoHandlers = ({ hubs, outCommand, mapRef }: UseContextMenuSystemHandlersProps) => {
   const contextMenuRef = useRef<ContextMenu | null>(null);
 
   const [system, setSystem] = useState<string>();
   const routeRef = useRef<(SolarSystemStaticInfoRaw | undefined)[]>([]);
 
-  const ref = useRef({ hubs, system, outCommand });
-  ref.current = { hubs, system, outCommand };
+  const ref = useRef({ hubs, system, outCommand, mapRef });
+  ref.current = { hubs, system, outCommand, mapRef };
 
   const open = useCallback(
     (ev: React.SyntheticEvent, systemId: string, route: (SolarSystemStaticInfoRaw | undefined)[]) => {
@@ -48,7 +48,7 @@ export const useContextMenuSystemInfoHandlers = ({ hubs, outCommand }: UseContex
   }, []);
 
   const onAddSystem = useCallback(() => {
-    const { system: solarSystemId, outCommand } = ref.current;
+    const { system: solarSystemId, outCommand, mapRef } = ref.current;
     if (!solarSystemId) {
       return;
     }
@@ -60,11 +60,7 @@ export const useContextMenuSystemInfoHandlers = ({ hubs, outCommand }: UseContex
       },
     });
     setTimeout(() => {
-      emitMapEvent({
-        name: Commands.centerSystem,
-        data: solarSystemId,
-      });
-
+      mapRef.current?.command(Commands.centerSystem, solarSystemId);
       setSystem(undefined);
     }, 200);
   }, []);

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

@@ -9,22 +9,13 @@ import { PrimeIcons } from 'primereact/api';
 export interface FastSystemActionsProps {
   systemId: string;
   systemName: string;
-  regionName: string;
-  isWH: boolean;
   showEdit?: boolean;
   onOpenSettings(): void;
 }
 
-export const FastSystemActions = ({
-  systemId,
-  systemName,
-  regionName,
-  isWH,
-  onOpenSettings,
-  showEdit,
-}: FastSystemActionsProps) => {
-  const ref = useRef({ systemId, systemName, regionName, isWH });
-  ref.current = { systemId, systemName, regionName, isWH };
+export const FastSystemActions = ({ systemId, systemName, onOpenSettings, showEdit }: FastSystemActionsProps) => {
+  const ref = useRef({ systemId, systemName });
+  ref.current = { systemId, systemName };
 
   const handleOpenZKB = useCallback(
     () => window.open(`https://zkillboard.com/system/${ref.current.systemId}`, '_blank'),
@@ -36,17 +27,10 @@ export const FastSystemActions = ({
     [],
   );
 
-  const handleOpenDotlan = useCallback(() => {
-    if (ref.current.isWH) {
-      window.open(`https://evemaps.dotlan.net/system/${ref.current.systemName}`, '_blank');
-      return;
-    }
-
-    return window.open(
-      `https://evemaps.dotlan.net/map/${ref.current.regionName.replace(/ /gim, '_')}/${ref.current.systemName}#jumps`,
-      '_blank',
-    );
-  }, []);
+  const handleOpenDotlan = useCallback(
+    () => window.open(`https://evemaps.dotlan.net/system/${ref.current.systemName}`, '_blank'),
+    [],
+  );
 
   const copySystemNameToClipboard = useCallback(async () => {
     try {
@@ -59,9 +43,9 @@ export const FastSystemActions = ({
   return (
     <LayoutEventBlocker className={clsx('flex px-2 gap-2 justify-between items-center h-full')}>
       <div className={clsx('flex gap-2 items-center h-full', classes.Links)}>
-        <WdImgButton tooltip={{ content: 'Open zkillboard' }} source={ZKB_ICON} onClick={handleOpenZKB} />
-        <WdImgButton tooltip={{ content: 'Open Anoikis' }} source={ANOIK_ICON} onClick={handleOpenAnoikis} />
-        <WdImgButton tooltip={{ content: 'Open Dotlan' }} source={DOTLAN_ICON} onClick={handleOpenDotlan} />
+        <WdImgButton source={ZKB_ICON} onClick={handleOpenZKB} />
+        <WdImgButton source={ANOIK_ICON} onClick={handleOpenAnoikis} />
+        <WdImgButton source={DOTLAN_ICON} onClick={handleOpenDotlan} />
       </div>
 
       <div className="flex gap-2 items-center pl-1">

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

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

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

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

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

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

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

@@ -1,11 +1,4 @@
 .MapRoot {
   width: 100%;
   height: 100%;
-
-  background-color: var(--rf-bg-color, #0C0A09);
-
-  &.BackgroundAlternateColor {
-    background-color: var(--rf-soft-bg-color, #171717);
-    --rf-node-bg-color: var(--rf-node-soft-bg-color, #202020);
-  }
 }

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

@@ -1,39 +1,43 @@
-import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect, useMemo } from 'react';
+import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect, useRef } from 'react';
 import ReactFlow, {
   Background,
+  ConnectionMode,
   Edge,
-  EdgeChange,
   MiniMap,
   Node,
-  NodeChange,
   NodeDragHandler,
   OnConnect,
   OnMoveEnd,
   OnSelectionChangeFunc,
   SelectionDragHandler,
   SelectionMode,
+  useEdgesState,
+  useNodesState,
+  NodeChange,
   useReactFlow,
 } from 'reactflow';
 import 'reactflow/dist/style.css';
 import classes from './Map.module.scss';
+import './styles/neon-theme.scss';
+import './styles/eve-common.scss';
 import { MapProvider, useMapState } from './MapProvider';
-import { useEdgesState, useMapHandlers, useNodesState, useUpdateNodes } from './hooks';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useMapHandlers, useUpdateNodes } from './hooks';
 import { MapHandlers, OutCommand, OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers.ts';
 import {
   ContextMenuConnection,
   ContextMenuRoot,
   SolarSystemEdge,
+  SolarSystemNode,
   useContextMenuConnectionHandlers,
   useContextMenuRootHandlers,
 } from './components';
-import { getBehaviorForTheme } from './helpers/getThemeBehavior';
-import { OnMapAddSystemCallback, OnMapSelectionChange } from './map.types';
+import { OnMapSelectionChange } from './map.types';
 import { SESSION_KEY } from '@/hooks/Mapper/constants.ts';
 import { SolarSystemConnection, SolarSystemRawType } from '@/hooks/Mapper/types';
 import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
 import { NodeSelectionMouseHandler } from '@/hooks/Mapper/components/contexts/types.ts';
-import clsx from 'clsx';
-import { useBackgroundVars } from './hooks/useBackgroundVars';
+import { useDeleteSystems } from '@/hooks/Mapper/components/contexts/hooks';
 
 const DEFAULT_VIEW_PORT = { zoom: 1, x: 0, y: 0 };
 
@@ -75,6 +79,12 @@ const initialEdges = [
   },
 ];
 
+const nodeTypes = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  custom: SolarSystemNode,
+} as never;
+
 const edgeTypes = {
   floating: SolarSystemEdge,
 };
@@ -83,18 +93,12 @@ interface MapCompProps {
   refn: ForwardedRef<MapHandlers>;
   onCommand: OutCommandHandler;
   onSelectionChange: OnMapSelectionChange;
-  onManualDelete(systems: string[]): void;
   onConnectionInfoClick?(e: SolarSystemConnection): void;
-  onAddSystem?: OnMapAddSystemCallback;
   onSelectionContextMenu?: NodeSelectionMouseHandler;
   minimapClasses?: string;
   isShowMinimap?: boolean;
   onSystemContextMenu: (event: MouseEvent<Element>, systemId: string) => void;
   showKSpaceBG?: boolean;
-  isThickConnections?: boolean;
-  isShowBackgroundPattern?: boolean;
-  isSoftBackground?: boolean;
-  theme?: string;
 }
 
 const MapComp = ({
@@ -105,32 +109,26 @@ const MapComp = ({
   onSystemContextMenu,
   onConnectionInfoClick,
   onSelectionContextMenu,
-  onManualDelete,
   isShowMinimap,
   showKSpaceBG,
-  isThickConnections,
-  isShowBackgroundPattern,
-  isSoftBackground,
-  theme,
-  onAddSystem,
 }: MapCompProps) => {
-  const { getNode, getNodes } = useReactFlow();
-  const [nodes, , onNodesChange] = useNodesState<Node<SolarSystemRawType>>(initialNodes);
-  const [edges, , onEdgesChange] = useEdgesState<Edge<SolarSystemConnection>>(initialEdges);
+  const { getNode } = useReactFlow();
+  const [nodes, , onNodesChange] = useNodesState<SolarSystemRawType>(initialNodes);
+  const [edges, , onEdgesChange] = useEdgesState<Edge<SolarSystemConnection>[]>(initialEdges);
 
   useMapHandlers(refn, onSelectionChange);
   useUpdateNodes(nodes);
-  const { handleRootContext, ...rootCtxProps } = useContextMenuRootHandlers({ onAddSystem });
+  const { handleRootContext, ...rootCtxProps } = useContextMenuRootHandlers();
   const { handleConnectionContext, ...connectionCtxProps } = useContextMenuConnectionHandlers();
   const { update } = useMapState();
-  const { variant, gap, size, color } = useBackgroundVars(theme);
-  const { isPanAndDrag, nodeComponent, connectionMode } = getBehaviorForTheme(theme || 'default');
+  const {
+    data: { systems },
+  } = useMapRootState();
 
-  const nodeTypes = useMemo(() => {
-    return {
-      custom: nodeComponent,
-    };
-  }, [nodeComponent]);
+  const { deleteSystems } = useDeleteSystems();
+
+  const systemsRef = useRef({ systems });
+  systemsRef.current = { systems };
 
   const onConnect: OnConnect = useCallback(
     params => {
@@ -188,51 +186,39 @@ const MapComp = ({
   const handleNodesChange = useCallback(
     (changes: NodeChange[]) => {
       const systemsIdsToRemove: string[] = [];
-
-      // prevents single node deselection on background / same node click
-      // allows deseletion of all nodes if multiple are currently selected
-      if (changes.length === 1 && changes[0].type == 'select' && changes[0].selected === false) {
-        changes[0].selected = getNodes().filter(node => node.selected).length === 1;
-      }
-
       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) {
+        if (change.type === 'remove') {
+          const node = getNode(change.id);
+          const { systems = [] } = systemsRef.current;
+          if (node?.data?.id && !systems.map(s => s.id).includes(node?.data?.id)) {
+            return [...acc, change];
+          } else if (!node?.data?.locked) {
+            systemsIdsToRemove.push(node?.data?.id);
+          }
           return acc;
         }
-
-        systemsIdsToRemove.push(node.data.id);
         return [...acc, change];
       }, [] as NodeChange[]);
 
-      if (systemsIdsToRemove.length > 0) {
-        onManualDelete(systemsIdsToRemove);
+      if (systemsIdsToRemove.length) {
+        deleteSystems(systemsIdsToRemove);
       }
 
       onNodesChange(nextChanges);
     },
-    [getNode, getNodes, onManualDelete, onNodesChange],
+    [deleteSystems, getNode, onNodesChange],
   );
 
   useEffect(() => {
     update(x => ({
       ...x,
       showKSpaceBG: showKSpaceBG,
-      isThickConnections: isThickConnections,
     }));
-  }, [showKSpaceBG, isThickConnections, update]);
+  }, [showKSpaceBG, update]);
 
   return (
     <>
-      <div className={clsx(classes.MapRoot, { [classes.BackgroundAlternateColor]: isSoftBackground })}>
+      <div className={classes.MapRoot}>
         <ReactFlow
           nodes={nodes}
           edges={edges}
@@ -244,7 +230,7 @@ const MapComp = ({
           defaultViewport={getViewPortFromStore()}
           edgeTypes={edgeTypes}
           nodeTypes={nodeTypes}
-          connectionMode={connectionMode}
+          connectionMode={ConnectionMode.Loose}
           snapToGrid
           nodeDragThreshold={10}
           onNodeDragStop={handleDragStop}
@@ -252,11 +238,6 @@ 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) => {
             onConnectionInfoClick?.(t.data);
@@ -277,19 +258,13 @@ const MapComp = ({
           maxZoom={1.5}
           elevateNodesOnSelect
           deleteKeyCode={['Delete']}
-          {...(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
           selectionMode={SelectionMode.Partial}
         >
           {isShowMinimap && <MiniMap pannable zoomable ariaLabel="Mini map" className={minimapClasses} />}
-          {isShowBackgroundPattern && <Background variant={variant} gap={gap} size={size} color={color} />}
+          <Background />
         </ReactFlow>
         {/* <button className="z-auto btn btn-primary absolute top-20 right-20" onClick={handleGetPassages}>
           Test // DON NOT REMOVE

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, SystemSignature } from '@/hooks/Mapper/types';
+import { MapUnionTypes } from '@/hooks/Mapper/types';
 import { ContextStoreDataUpdate, useContextStore } from '@/hooks/Mapper/utils';
 
 export type MapData = MapUnionTypes & {
@@ -8,8 +8,6 @@ export type MapData = MapUnionTypes & {
   hoverNodeId: string | null;
   visibleNodes: Set<string>;
   showKSpaceBG: boolean;
-  isThickConnections: boolean;
-  linkedSigEveId: string;
 };
 
 interface MapProviderProps {
@@ -19,7 +17,6 @@ interface MapProviderProps {
 
 const INITIAL_DATA: MapData = {
   wormholesData: {},
-  wormholes: [],
   effects: {},
   characters: [],
   userCharacters: [],
@@ -30,14 +27,8 @@ 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>,
-  is_subscription_active: false,
 };
 
 export interface MapContextProps {

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

@@ -1,17 +1,15 @@
-@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
-
 .ConnectionTimeEOL {
-  background-image: linear-gradient(207deg, transparent, var(--conn-time-eol));
+  background-image: linear-gradient(207deg, transparent, #7452c3e3);
 }
 
 .ConnectionFrigate {
-  background-image: linear-gradient(207deg, transparent, var(--conn-frigate));
+  background-image: linear-gradient(207deg, transparent, #325d88);
 }
 
 .ConnectionSave {
-  background-image: linear-gradient(207deg, transparent, var(--conn-save));
+  background-image: linear-gradient(207deg, transparent, rgba(155, 102, 45, 0.85));
 }
 
 .SelectedItem {
-  background-color: var(--selected-item-bg);
+  background-color: rgba(98, 98, 98, 0.33);
 }

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

@@ -3,17 +3,10 @@ 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 { MassState, ShipSizeStatus, SolarSystemConnection, TimeStatus } from '@/hooks/Mapper/types';
 import clsx from 'clsx';
 import classes from './ContextMenuConnection.module.scss';
-import {
-  MASS_STATE_NAMES,
-  MASS_STATE_NAMES_ORDER,
-  SHIP_SIZES_NAMES,
-  SHIP_SIZES_NAMES_ORDER,
-  SHIP_SIZES_NAMES_SHORT,
-  SHIP_SIZES_SIZE,
-} from '@/hooks/Mapper/components/map/constants.ts';
+import { MASS_STATE_NAMES, MASS_STATE_NAMES_ORDER } from '@/hooks/Mapper/components/map/constants.ts';
 
 export interface ContextMenuConnectionProps {
   contextMenuRef: RefObject<ContextMenu>;
@@ -42,72 +35,46 @@ export const ContextMenuConnection: React.FC<ContextMenuConnectionProps> = ({
     }
 
     const isFrigateSize = edge.data?.ship_size_type === ShipSizeStatus.small;
-    const isWormhole = edge.data?.type !== ConnectionType.gate;
 
     return [
-      ...(isWormhole
+      {
+        label: `EOL`,
+        className: clsx({
+          [classes.ConnectionTimeEOL]: edge.data?.time_status === TimeStatus.eol,
+        }),
+        icon: PrimeIcons.CLOCK,
+        command: onChangeTimeState,
+      },
+      {
+        label: `Frigate`,
+        className: clsx({
+          [classes.ConnectionFrigate]: isFrigateSize,
+        }),
+        icon: PrimeIcons.CLOUD,
+        command: () =>
+          onChangeShipSizeStatus(
+            edge.data?.ship_size_type === ShipSizeStatus.small ? ShipSizeStatus.normal : ShipSizeStatus.small,
+          ),
+      },
+      {
+        label: `Save mass`,
+        className: clsx({
+          [classes.ConnectionSave]: edge.data?.locked,
+        }),
+        icon: PrimeIcons.LOCK,
+        command: () => onToggleMassSave(!edge.data?.locked),
+      },
+      ...(!isFrigateSize
         ? [
             {
-              label: `EOL`,
-              className: clsx({
-                [classes.ConnectionTimeEOL]: edge.data?.time_status === TimeStatus.eol,
-              }),
-              icon: PrimeIcons.CLOCK,
-              command: onChangeTimeState,
-            },
-            {
-              label: `Frigate`,
-              className: clsx({
-                [classes.ConnectionFrigate]: isFrigateSize,
-              }),
-              icon: PrimeIcons.CLOUD,
-              command: () =>
-                onChangeShipSizeStatus(
-                  edge.data?.ship_size_type === ShipSizeStatus.small ? ShipSizeStatus.large : ShipSizeStatus.small,
-                ),
-            },
-            {
-              label: `Save mass`,
-              className: clsx({
-                [classes.ConnectionSave]: edge.data?.locked,
-              }),
-              icon: PrimeIcons.LOCK,
-              command: () => onToggleMassSave(!edge.data?.locked),
-            },
-            ...(!isFrigateSize
-              ? [
-                  {
-                    label: `Mass status`,
-                    icon: PrimeIcons.CHART_PIE,
-                    items: MASS_STATE_NAMES_ORDER.map(x => ({
-                      label: MASS_STATE_NAMES[x],
-                      className: clsx({
-                        [classes.SelectedItem]: edge.data?.mass_status === x,
-                      }),
-                      command: () => onChangeMassState(x),
-                    })),
-                  },
-                ]
-              : []),
-
-            {
-              label: `Ship Size`,
-              icon: PrimeIcons.CLOUD,
-              items: SHIP_SIZES_NAMES_ORDER.map(x => ({
-                label: (
-                  <div className="grid grid-cols-[20px_120px_1fr_40px] gap-2 items-center">
-                    <div className="text-[12px] font-bold text-stone-400">{SHIP_SIZES_NAMES_SHORT[x]}</div>
-                    <div>{SHIP_SIZES_NAMES[x]}</div>
-                    <div></div>
-                    <div className="flex justify-end whitespace-nowrap text-[12px] font-bold text-stone-500">
-                      {SHIP_SIZES_SIZE[x]} t.
-                    </div>
-                  </div>
-                ) as unknown as string, // TODO my lovely kostyl
+              label: `Mass status`,
+              icon: PrimeIcons.CHART_PIE,
+              items: MASS_STATE_NAMES_ORDER.map(x => ({
+                label: MASS_STATE_NAMES[x],
                 className: clsx({
-                  [classes.SelectedItem]: edge.data?.ship_size_type === x,
+                  [classes.SelectedItem]: edge.data?.mass_status === x,
                 }),
-                command: () => onChangeShipSizeStatus(x),
+                command: () => onChangeMassState(x),
               })),
             },
           ]
@@ -118,7 +85,7 @@ export const ContextMenuConnection: React.FC<ContextMenuConnectionProps> = ({
         command: onDeleteConnection,
       },
     ];
-  }, [edge, onChangeTimeState, onDeleteConnection, onChangeShipSizeStatus, onToggleMassSave, onChangeMassState]);
+  }, [edge, onChangeTimeState, onDeleteConnection, onChangeMassState, onChangeShipSizeStatus]);
 
   return (
     <>

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

@@ -4,7 +4,7 @@ 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 { MassState, ShipSizeStatus, SolarSystemConnection, TimeStatus } from '@/hooks/Mapper/types';
 import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
 
 export const useContextMenuConnectionHandlers = () => {
@@ -47,23 +47,6 @@ export const useContextMenuConnectionHandlers = () => {
     setEdge(undefined);
   };
 
-  const onChangeType = useCallback((type: ConnectionType) => {
-    const { edge, outCommand } = ref.current;
-
-    if (!edge) {
-      return;
-    }
-
-    outCommand({
-      type: OutCommand.updateConnectionType,
-      data: {
-        source: edge.source,
-        target: edge.target,
-        value: type,
-      },
-    });
-  }, []);
-
   const onChangeMassState = useCallback((status: MassState) => {
     const { edge, outCommand } = ref.current;
 
@@ -97,16 +80,14 @@ export const useContextMenuConnectionHandlers = () => {
       },
     });
 
-    if (status === ShipSizeStatus.small) {
-      outCommand({
-        type: OutCommand.updateConnectionMassStatus,
-        data: {
-          source: edge.source,
-          target: edge.target,
-          value: MassState.normal,
-        },
-      });
-    }
+    outCommand({
+      type: OutCommand.updateConnectionMassStatus,
+      data: {
+        source: edge.source,
+        target: edge.target,
+        value: MassState.normal,
+      },
+    });
   }, []);
 
   const onToggleMassSave = useCallback((locked: boolean) => {
@@ -137,7 +118,6 @@ export const useContextMenuConnectionHandlers = () => {
     contextMenuRef,
     onDeleteConnection,
     onChangeTimeState,
-    onChangeType,
     onChangeMassState,
     onChangeShipSizeStatus,
     onToggleMassSave,

assets/js/hooks/Mapper/components/map/components/ContextMenuRoot/useContextMenuRootHandlers.ts

@@ -1,16 +1,14 @@
 import { useReactFlow, XYPosition } from 'reactflow';
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { ContextMenu } from 'primereact/contextmenu';
+import { useMapState } from '../../MapProvider.tsx';
+import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
-import { OnMapAddSystemCallback } from '@/hooks/Mapper/components/map/map.types.ts';
 
-type UseContextMenuRootHandlers = {
-  onAddSystem?: OnMapAddSystemCallback;
-};
-
-export const useContextMenuRootHandlers = ({ onAddSystem }: UseContextMenuRootHandlers = {}) => {
+export const useContextMenuRootHandlers = () => {
   const rf = useReactFlow();
   const contextMenuRef = useRef<ContextMenu | null>(null);
+  const { outCommand } = useMapState();
   const [position, setPosition] = useState<XYPosition | null>(null);
 
   const handleRootContext = (e: React.MouseEvent<HTMLDivElement>) => {
@@ -20,17 +18,14 @@ export const useContextMenuRootHandlers = ({ onAddSystem }: UseContextMenuRootHa
     contextMenuRef.current?.show(e);
   };
 
-  const ref = useRef({ onAddSystem, position });
-  ref.current = { onAddSystem, position };
-
-  const onAddSystemCallback = useCallback(() => {
-    ref.current.onAddSystem?.({ coordinates: position });
-  }, [position]);
+  const onAddSystem = () => {
+    outCommand({ type: OutCommand.manualAddSystem, data: { coordinates: position } });
+  };
 
   return {
     handleRootContext,
 
     contextMenuRef,
-    onAddSystem: onAddSystemCallback,
+    onAddSystem,
   };
 };

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

@@ -1,55 +1,27 @@
-@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
+@import "@/hooks/Mapper/components/map/styles/neon-variables";
 
-.EdgePathBack {
-  fill: none;
-  stroke: #80a5c5;
-  stroke-width: 3px;
-
-  &.TimeCrit {
-    stroke: #f11ab2;
-    stroke-width: 4px;
-  }
-
-  &.Hovered {
-    stroke: #b5c8d9;
-
-    &.TimeCrit {
-      stroke: #ef7dce;
-    }
-  }
-
-  &.Tick {
-    stroke-width: 5px;
-
-    &.TimeCrit {
-      stroke-width: 6px;
-    }
-  }
-
-  &.Gate {
-    stroke: #9aff40;
+.react-flow__edge.selected {
+  .EdgePathBack {
+    stroke: $pastel-yellow;
   }
 }
 
 .EdgePathFront {
   fill: none;
+
   stroke: #2c3844;
   stroke-width: 2px;
 
   &.MassVerge:not(&.Frigate) {
-    stroke: #af0000;
+    stroke: #af2900;
   }
 
   &.MassHalf:not(&.Frigate) {
-    stroke: #ffd700;
+    stroke: #a85f00;
   }
 
   &.Frigate {
-    stroke: #d4f0ff;
-  }
-
-  &.Gate {
-    stroke: #1c1e15;
+    stroke: #4e62c9;
   }
 
   &.Hovered {
@@ -65,15 +37,28 @@
     }
 
     &.Frigate {
-      stroke: #d4f0ff;
+      stroke: #41acd7;
     }
+
+  }
+}
+
+.EdgePathBack {
+  fill: none;
+
+  stroke: #80a5c5;
+  stroke-width: 3px;
+
+  &.TimeCrit {
+    stroke: #f11ab2;
+    stroke-width: 4px;
   }
 
-  &.Tick {
-    stroke-width: 3px;
+  &.Hovered {
+    stroke: #b5c8d9;
 
-    &.Hovered {
-      stroke-width: 3px;
+    &.TimeCrit {
+      stroke: #ef7dce;
     }
   }
 }
@@ -84,23 +69,7 @@
   stroke-width: 8px;
 }
 
-.Handle {
-  border: 1px solid var(--pastel-blue);
-  width: 5px;
-  height: 5px;
-  z-index: 1001;
-
-  &.Tick {
-    width: 7px;
-    height: 7px;
-  }
-
-  &.Right {
-    margin-left: 0px;
-  }
-}
-
-.LinkLabel {
+.LinkLabel{
   font-size: 9px;
   line-height: 10px;
   padding: 2px 4px;
@@ -116,3 +85,13 @@
   height: 8px;
   font-size: 8px;
 }
+
+.Handle {
+  min-width: initial;
+  min-height: initial;
+  border: 1px solid #5a7d9a;
+  width: 5px;
+  height: 5px;
+  z-index: 1001;
+}
+

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

@@ -1,73 +1,39 @@
 import { useCallback, useMemo, useState } from 'react';
 
 import classes from './SolarSystemEdge.module.scss';
-import { EdgeLabelRenderer, EdgeProps, getBezierPath, getSmoothStepPath, Position, useStore } from 'reactflow';
+import { EdgeLabelRenderer, EdgeProps, getBezierPath, Position, useStore } from 'reactflow';
 import { getEdgeParams } from '@/hooks/Mapper/components/map/utils.ts';
 import clsx from 'clsx';
-import { ConnectionType, MassState, ShipSizeStatus, SolarSystemConnection, TimeStatus } from '@/hooks/Mapper/types';
+import { MassState, ShipSizeStatus, SolarSystemConnection, TimeStatus } from '@/hooks/Mapper/types';
 import { PrimeIcons } from 'primereact/api';
 import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
-import { useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
-import { SHIP_SIZES_DESCRIPTION, SHIP_SIZES_NAMES_SHORT } from '@/hooks/Mapper/components/map/constants.ts';
 
 const MAP_TRANSLATES: Record<string, string> = {
-  [Position.Top]: 'translate(-48%, 0%)',
+  [Position.Top]: 'translate(-50%, 0%)',
   [Position.Bottom]: 'translate(-50%, -100%)',
   [Position.Left]: 'translate(0%, -50%)',
   [Position.Right]: 'translate(-100%, -50%)',
 };
 
-const MAP_OFFSETS_TICK: Record<string, { x: number; y: number }> = {
-  [Position.Top]: { x: 0, y: 3 },
-  [Position.Bottom]: { x: 0, y: -3 },
-  [Position.Left]: { x: 3, y: 0 },
-  [Position.Right]: { x: -3, y: 0 },
-};
-
-const MAP_OFFSETS: Record<string, { x: number; y: number }> = {
-  [Position.Top]: { x: 0, y: 0 },
-  [Position.Bottom]: { x: 0, y: 0 },
-  [Position.Left]: { x: 0, y: 0 },
-  [Position.Right]: { x: 0, y: 0 },
-};
-
-export const SHIP_SIZES_COLORS = {
-  [ShipSizeStatus.small]: 'bg-indigo-400',
-  [ShipSizeStatus.medium]: 'bg-cyan-500',
-  [ShipSizeStatus.large]: '',
-  [ShipSizeStatus.freight]: 'bg-lime-400',
-  [ShipSizeStatus.capital]: 'bg-red-400',
-};
-
 export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }: EdgeProps<SolarSystemConnection>) => {
   const sourceNode = useStore(useCallback(store => store.nodeInternals.get(source), [source]));
   const targetNode = useStore(useCallback(store => store.nodeInternals.get(target), [target]));
-  const isWormhole = data?.type !== ConnectionType.gate;
-
-  const {
-    data: { isThickConnections },
-  } = useMapState();
 
   const [hovered, setHovered] = useState(false);
 
   const [path, labelX, labelY, sx, sy, tx, ty, sourcePos, targetPos] = useMemo(() => {
     const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
 
-    const offset = isThickConnections ? MAP_OFFSETS_TICK[targetPos] : MAP_OFFSETS[targetPos];
-
-    const method = isWormhole ? getBezierPath : getSmoothStepPath;
-
-    const [edgePath, labelX, labelY] = method({
-      sourceX: sx - offset.x,
-      sourceY: sy - offset.y,
+    const [edgePath, labelX, labelY] = getBezierPath({
+      sourceX: sx,
+      sourceY: sy,
       sourcePosition: sourcePos,
       targetPosition: targetPos,
-      targetX: tx + offset.x,
-      targetY: ty + offset.y,
+      targetX: tx,
+      targetY: ty,
     });
-
     return [edgePath, labelX, labelY, sx, sy, tx, ty, sourcePos, targetPos];
-  }, [isThickConnections, sourceNode, targetNode, isWormhole]);
+  }, [sourceNode, targetNode]);
 
   if (!sourceNode || !targetNode || !data) {
     return null;
@@ -78,10 +44,8 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
       <path
         id={`back_${id}`}
         className={clsx(classes.EdgePathBack, {
-          [classes.Tick]: isThickConnections,
-          [classes.TimeCrit]: isWormhole && data.time_status === TimeStatus.eol,
+          [classes.TimeCrit]: data.time_status === TimeStatus.eol,
           [classes.Hovered]: hovered,
-          [classes.Gate]: !isWormhole,
         })}
         d={path}
         markerEnd={markerEnd}
@@ -90,12 +54,10 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
       <path
         id={`front_${id}`}
         className={clsx(classes.EdgePathFront, {
-          [classes.Tick]: isThickConnections,
           [classes.Hovered]: hovered,
-          [classes.MassVerge]: isWormhole && data.mass_status === MassState.verge,
-          [classes.MassHalf]: isWormhole && data.mass_status === MassState.half,
-          [classes.Frigate]: isWormhole && data.ship_size_type === ShipSizeStatus.small,
-          [classes.Gate]: !isWormhole,
+          [classes.MassVerge]: data.mass_status === MassState.verge,
+          [classes.MassHalf]: data.mass_status === MassState.half,
+          [classes.Frigate]: data.ship_size_type === ShipSizeStatus.small,
         })}
         d={path}
         markerEnd={markerEnd}
@@ -113,29 +75,21 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
 
       <EdgeLabelRenderer>
         <div
-          className={clsx(
-            classes.Handle,
-            { [classes.Tick]: isThickConnections, [classes.Right]: Position.Right === sourcePos },
-            'react-flow__handle absolute nodrag pointer-events-none',
-          )}
+          className={clsx(classes.Handle, 'react-flow__handle absolute nodrag pointer-events-none')}
           style={{ transform: `${MAP_TRANSLATES[sourcePos]} translate(${sx}px,${sy}px)` }}
         />
         <div
-          className={clsx(
-            classes.Handle,
-            { [classes.Tick]: isThickConnections },
-            'react-flow__handle absolute nodrag pointer-events-none',
-          )}
+          className={clsx(classes.Handle, 'react-flow__handle absolute nodrag pointer-events-none')}
           style={{ transform: `${MAP_TRANSLATES[targetPos]} translate(${tx}px,${ty}px)` }}
         />
 
         <div
-          className="absolute flex items-center gap-1 pointer-events-none"
+          className="absolute flex items-center gap-1"
           style={{
             transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
           }}
         >
-          {isWormhole && data.locked && (
+          {data.locked && (
             <WdTooltipWrapper
               content="Save mass"
               className={clsx(
@@ -146,19 +100,6 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
               <span className={clsx(PrimeIcons.LOCK, classes.icon)} />
             </WdTooltipWrapper>
           )}
-
-          {isWormhole && data.ship_size_type !== ShipSizeStatus.large && (
-            <WdTooltipWrapper
-              content={SHIP_SIZES_DESCRIPTION[data.ship_size_type]}
-              className={clsx(
-                classes.LinkLabel,
-                'pointer-events-auto rounded opacity-100 cursor-auto text-neutral-900 font-bold',
-                SHIP_SIZES_COLORS[data.ship_size_type],
-              )}
-            >
-              {SHIP_SIZES_NAMES_SHORT[data.ship_size_type]}
-            </WdTooltipWrapper>
-          )}
         </div>
       </EdgeLabelRenderer>
     </>

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

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

@@ -1,39 +0,0 @@
-import { SystemKillsContent } from '../../../mapInterface/widgets/SystemKills/SystemKillsContent/SystemKillsContent';
-import { useKillsCounter } from '../../hooks/useKillsCounter';
-import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
-import { WithChildren, WithClassName } from '@/hooks/Mapper/types/common';
-
-type TooltipSize = 'xs' | 'sm' | 'md' | 'lg';
-
-type KillsBookmarkTooltipProps = {
-  killsCount: number;
-  killsActivityType: string | null;
-  systemId: string;
-  className?: string;
-  size?: TooltipSize;
-} & WithChildren &
-  WithClassName;
-
-export const KillsCounter = ({ killsCount, systemId, className, children, size = 'xs' }: KillsBookmarkTooltipProps) => {
-  const { isLoading, kills: detailedKills, systemNameMap } = useKillsCounter({ realSystemId: systemId });
-
-  if (!killsCount || detailedKills.length === 0 || !systemId || isLoading) return null;
-
-  const tooltipContent = (
-    <div style={{ width: '100%', minWidth: '300px', overflow: 'hidden' }}>
-      <SystemKillsContent
-        kills={detailedKills}
-        systemNameMap={systemNameMap}
-        onlyOneSystem={true}
-        autoSize={true}
-        limit={killsCount}
-      />
-    </div>
-  );
-
-  return (
-    <WdTooltipWrapper content={tooltipContent} className={className} size={size} interactive={true}>
-      {children}
-    </WdTooltipWrapper>
-  );
-};

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

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

@@ -1,61 +0,0 @@
-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/SolarSystemNode.module.scss

@@ -2,30 +2,27 @@
 
 $pastel-blue: #5a7d9a;
 $pastel-pink: #d291bc;
+$pastel-green: #88b04b;
+$pastel-yellow: #ffdd59;
 $dark-bg: #2d2d2d;
 $text-color: #ffffff;
-$tooltip-bg: #202020;
+$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: var(--rf-node-bg-color, #202020) !important;
-  color: var(--rf-text-color, #ffffff);
-
+  background-color: $tooltip-bg;
   box-shadow: 0 0 5px rgba($dark-bg, 0.5);
   border: 1px solid darken($pastel-blue, 10%);
   border-radius: 5px;
   position: relative;
-  z-index: 3;
+  z-index: 1;
   overflow: hidden;
 
   &.Mataria,
@@ -88,47 +85,58 @@ $tooltip-bg: #202020;
     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(45deg, var(--eve-solar-system-status-color-background), transparent);
+    border: 1px solid darken($eve-solar-system-status-color-home, 30%);
+    background-image: linear-gradient(275deg, $eve-solar-system-status-friendly, transparent);
+
     &.selected {
-      border-color: var(--eve-solar-system-status-color-home);
+      border-color: $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);
+    border: 1px solid darken($eve-solar-system-status-color-friendly, 20%);
+    background-image: linear-gradient(275deg, darken($eve-solar-system-status-friendly, 30%), transparent);
+
     &.selected {
-      border-color: var(--eve-solar-system-status-color-friendly-dark5);
+      border-color: darken($eve-solar-system-status-color-friendly, 5%);
     }
   }
 
   &.eve-system-status-lookingFor {
-    border: 1px solid var(--eve-solar-system-status-color-lookingFor-dark15);
+    border: 1px solid darken($eve-solar-system-status-color-lookingFor, 15%);
     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);
+    background-image: linear-gradient(275deg, $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, $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, $eve-solar-system-status-target, transparent);
   }
 }
 
 .Bookmarks {
   position: absolute;
   width: 100%;
-  z-index: 1;
+  z-index: 0;
   display: flex;
   left: 4px;
 
@@ -146,6 +154,8 @@ $tooltip-bg: #202020;
     padding-left: 3px;
     padding-right: 3px;
 
+    //background-color: #833ca4;
+
     &:not(:first-child) {
       box-shadow: inset 4px -3px 4px rgba(0, 0, 0, 0.3);
     }
@@ -172,42 +182,6 @@ $tooltip-bg: #202020;
   }
 }
 
-.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;
@@ -232,16 +206,17 @@ $tooltip-bg: #202020;
 
   .TagTitle {
     font-size: 11px;
-    font-weight: 500;
+    font-weight: bold;
     text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
-    color: var(--rf-tag-color, #38bdf8);
+
+    color: #ffb01d;
   }
 
-  /* Firefox kostyl */
-  @-moz-document url-prefix() {
-    .classSystemName {
-      font-weight: bold;
-    }
+  .classSystemName {
+    //font-weight: bold;
+  }
+
+  .solarSystemName {
   }
 }
 
@@ -251,23 +226,22 @@ $tooltip-bg: #202020;
   align-items: center;
   height: 19px;
 
-  .hasLocalCounter {
-    margin-right: 2px;
-    &.countAbove9 {
-      margin-right: 1.5rem;
+  .localCounter {
+    display: flex;
+    //align-items: center;
+    gap: 2px;
+
+    & > i {
+      position: relative;
+      top: 1px;
     }
-  }
 
-  .lockIcon {
-    font-size: 0.45rem;
-    font-weight: bold;
-    position: relative;
-  }
-
-  .mapMarker {
-    font-size: 0.45rem;
-    font-weight: bold;
-    position: relative;
+    & > span {
+      font-size: 9px;
+      line-height: 9px;
+      font-weight: 500;
+      //margin-top: 1px;
+    }
   }
 }
 
@@ -288,18 +262,11 @@ $tooltip-bg: #202020;
   & > * {
     line-height: 10px;
   }
-
-  /* Firefox kostyl */
-  @-moz-document url-prefix() {
-    position: relative;
-    top: -1px;
-  }
 }
 
 .Handlers {
   position: absolute;
-  z-index: 4;
-  pointer-events: none;
+  z-index: 2;
   top: 0;
   left: 0;
   width: 100%;
@@ -312,7 +279,6 @@ $tooltip-bg: #202020;
   border: 1px solid $pastel-blue;
   width: 5px;
   height: 5px;
-  pointer-events: auto;
 
   &.selected {
     border-color: $pastel-pink;
@@ -333,25 +299,4 @@ $tooltip-bg: #202020;
   &.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/SolarSystemNode.tsx

@@ -0,0 +1,271 @@
+import { memo, useMemo } from 'react';
+import { Handle, Position, WrapNodeProps } from 'reactflow';
+import { MapSolarSystemType } from '../../map.types';
+import classes from './SolarSystemNode.module.scss';
+import clsx from 'clsx';
+import {
+  EFFECT_BACKGROUND_STYLES,
+  LABELS_INFO,
+  LABELS_ORDER,
+  MARKER_BOOKMARK_BG_STYLES,
+  STATUS_CLASSES,
+} from '@/hooks/Mapper/components/map/constants.ts';
+import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace.ts';
+import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/WormholeClassComp';
+import { useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
+import { getSystemClassStyles } from '@/hooks/Mapper/components/map/helpers';
+import { sortWHClasses } from '@/hooks/Mapper/helpers';
+import { PrimeIcons } from 'primereact/api';
+import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager.ts';
+import { OutCommand } from '@/hooks/Mapper/types';
+import { useDoubleClick } from '@/hooks/Mapper/hooks/useDoubleClick.ts';
+import { REGIONS_MAP, Spaces } from '@/hooks/Mapper/constants';
+
+const SpaceToClass: Record<string, string> = {
+  [Spaces.Caldari]: classes.Caldaria,
+  [Spaces.Matar]: classes.Mataria,
+  [Spaces.Amarr]: classes.Amarria,
+  [Spaces.Gallente]: classes.Gallente,
+};
+
+const sortedLabels = (labels: string[]) => {
+  if (!labels) {
+    return [];
+  }
+
+  return LABELS_ORDER.filter(x => labels.includes(x)).map(x => LABELS_INFO[x]);
+};
+
+export const getActivityType = (count: number) => {
+  if (count <= 5) {
+    return 'activityNormal';
+  }
+
+  if (count <= 30) {
+    return 'activityWarn';
+  }
+
+  return 'activityDanger';
+};
+
+// eslint-disable-next-line react/display-name
+export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarSystemType>) => {
+  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 } = data || {};
+
+  const customName = solar_system_name !== name ? name : undefined;
+
+  const {
+    data: {
+      characters,
+      presentCharacters,
+      wormholesData,
+      hubs,
+      kills,
+      userCharacters,
+      isConnecting,
+      hoverNodeId,
+      visibleNodes,
+      showKSpaceBG,
+    },
+    outCommand,
+  } = useMapState();
+
+  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);
+    // eslint-disable-next-line
+  }, [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 lebM = useMemo(() => new LabelsManager(labels ?? ''), [labels]);
+  const labelsInfo = useMemo(() => sortedLabels(lebM.list), [lebM]);
+  const labelCustom = useMemo(() => lebM.customLabel, [lebM]);
+
+  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;
+
+  return (
+    <>
+      {visible && (
+        <div className={classes.Bookmarks}>
+          {labelCustom !== '' && (
+            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
+              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] ">{labelCustom}</span>
+            </div>
+          )}
+
+          {is_shattered && (
+            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered)}>
+              <span className={clsx('pi pi-chart-pie', classes.icon)} />
+            </div>
+          )}
+
+          {killsCount && (
+            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[getActivityType(killsCount)])}>
+              <div className={clsx(classes.BookmarkWithIcon)}>
+                <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
+                <span className={clsx(classes.text)}>{killsCount}</span>
+              </div>
+            </div>
+          )}
+
+          {labelsInfo.map(x => (
+            <div key={x.id} className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}>
+              {x.shortName}
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div
+        className={clsx(classes.RootCustomNode, regionClass, classes[STATUS_CLASSES[status]], {
+          [classes.selected]: selected,
+        })}
+      >
+        {visible && (
+          <>
+            <div className={classes.HeadRow}>
+              <div className={clsx(classes.classTitle, classTitleColor, '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]')}>
+                {class_title ?? '-'}
+              </div>
+              {tag != null && tag !== '' && (
+                <div className={clsx(classes.TagTitle, 'text-sky-400 font-medium')}>{tag}</div>
+              )}
+              <div
+                className={clsx(
+                  classes.classSystemName,
+                  '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] flex-grow overflow-hidden text-ellipsis whitespace-nowrap font-sans',
+                )}
+              >
+                {solar_system_name}
+              </div>
+
+              {isWormhole && (
+                <div className={classes.statics}>
+                  {sortedStatics.map(x => (
+                    <WormholeClassComp key={x} id={x} />
+                  ))}
+                </div>
+              )}
+
+              {effect_name !== null && isWormhole && (
+                <div className={clsx(classes.effect, EFFECT_BACKGROUND_STYLES[effect_name])}></div>
+              )}
+            </div>
+
+            <div className={clsx(classes.BottomRow, 'flex items-center justify-between')}>
+              {customName && (
+                <div className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-blue-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5">
+                  {customName}
+                </div>
+              )}
+
+              {!isWormhole && !customName && (
+                <div
+                  className={clsx(
+                    '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-stone-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5',
+                  )}
+                >
+                  {region_name}
+                </div>
+              )}
+
+              {isWormhole && !customName && <div />}
+
+              <div className="flex items-center justify-end">
+                <div className="flex gap-1 items-center">
+                  {locked && <i className={PrimeIcons.LOCK} style={{ fontSize: '0.45rem', fontWeight: 'bold' }}></i>}
+
+                  {hubs.includes(solar_system_id.toString()) && (
+                    <i className={PrimeIcons.MAP_MARKER} style={{ fontSize: '0.45rem', fontWeight: 'bold' }}></i>
+                  )}
+
+                  {charactersInSystem.length > 0 && (
+                    <div className={clsx(classes.localCounter, { ['text-amber-300']: hasUserCharacters })}>
+                      <i className="pi pi-users" style={{ fontSize: '0.50rem' }}></i>
+                      <span className="font-sans">{charactersInSystem.length}</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+
+      <div onMouseDownCapture={dbClick} className={classes.Handlers}>
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleTop, { [classes.selected]: selected })}
+          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Top}
+          id="a"
+        />
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleRight, { [classes.selected]: selected })}
+          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Right}
+          id="b"
+        />
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleBottom, { [classes.selected]: selected })}
+          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Bottom}
+          id="c"
+        />
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleLeft, { [classes.selected]: selected })}
+          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Left}
+          id="d"
+        />
+      </div>
+    </>
+  );
+});

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

@@ -1,209 +0,0 @@
-import { memo } from 'react';
-import { MapSolarSystemType } from '../../map.types';
-import { Handle, NodeProps, Position } from 'reactflow';
-import clsx from 'clsx';
-import classes from './SolarSystemNodeDefault.module.scss';
-import { PrimeIcons } from 'primereact/api';
-import { useLocalCounter, useSolarSystemNode, useNodeKillsCount } from '../../hooks/useSolarSystemLogic';
-import {
-  EFFECT_BACKGROUND_STYLES,
-  MARKER_BOOKMARK_BG_STYLES,
-  STATUS_CLASSES,
-} from '@/hooks/Mapper/components/map/constants';
-import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/WormholeClassComp';
-import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
-import { LocalCounter } from './SolarSystemLocalCounter';
-import { KillsCounter } from './SolarSystemKillsCounter';
-
-export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>) => {
-  const nodeVars = useSolarSystemNode(props);
-  const { localCounterCharacters } = useLocalCounter(nodeVars);
-  const localKillsCount = useNodeKillsCount(nodeVars.solarSystemId, nodeVars.killsCount);
-
-  return (
-    <>
-      {nodeVars.visible && (
-        <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>
-            </div>
-          )}
-
-          {nodeVars.isShattered && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered)}>
-              <span className={clsx('pi pi-chart-pie', classes.icon)} />
-            </div>
-          )}
-
-          {localKillsCount && localKillsCount > 0 && nodeVars.solarSystemId && (
-            <KillsCounter
-              killsCount={localKillsCount}
-              systemId={nodeVars.solarSystemId}
-              size="lg"
-              killsActivityType={nodeVars.killsActivityType}
-              className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!])}
-            >
-              <div className={clsx(classes.BookmarkWithIcon)}>
-                <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
-                <span className={clsx(classes.text)}>{nodeVars.killsCount}</span>
-              </div>
-            </KillsCounter>
-          )}
-
-          {nodeVars.labelsInfo.map(x => (
-            <div key={x.id} className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}>
-              {x.shortName}
-            </div>
-          ))}
-        </div>
-      )}
-
-      <div
-        className={clsx(
-          classes.RootCustomNode,
-          nodeVars.regionClass && classes[nodeVars.regionClass],
-          nodeVars.status !== undefined ? classes[STATUS_CLASSES[nodeVars.status]] : '',
-          { [classes.selected]: nodeVars.selected },
-        )}
-        onMouseDownCapture={e => nodeVars.dbClick(e)}
-      >
-        {nodeVars.visible && (
-          <>
-            <div className={classes.HeadRow}>
-              <div
-                className={clsx(
-                  classes.classTitle,
-                  nodeVars.classTitleColor,
-                  '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]',
-                )}
-              >
-                {nodeVars.classTitle ?? '-'}
-              </div>
-
-              {nodeVars.tag != null && nodeVars.tag !== '' && (
-                <div className={clsx(classes.TagTitle, 'text-sky-400 font-medium')}>{nodeVars.tag}</div>
-              )}
-
-              <div
-                className={clsx(
-                  classes.classSystemName,
-                  '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] flex-grow overflow-hidden text-ellipsis whitespace-nowrap font-sans',
-                )}
-              >
-                {nodeVars.systemName}
-              </div>
-
-              {nodeVars.isWormhole && (
-                <div className={classes.statics}>
-                  {nodeVars.sortedStatics.map(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>
-
-            <div className={clsx(classes.BottomRow, 'flex items-center justify-between')}>
-              {nodeVars.customName && (
-                <div className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-blue-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5">
-                  {nodeVars.customName}
-                </div>
-              )}
-
-              {!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">
-                  {nodeVars.regionName}
-                </div>
-              )}
-
-              {nodeVars.isWormhole && !nodeVars.customName && <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>
-          </>
-        )}
-      </div>
-
-      {nodeVars.visible && (
-        <>
-          {nodeVars.unsplashedLeft.length > 0 && (
-            <div className={classes.Unsplashed}>
-              {nodeVars.unsplashedLeft.map(sig => (
-                <UnsplashedSignature key={sig.eve_id} signature={sig} />
-              ))}
-            </div>
-          )}
-
-          {nodeVars.unsplashedRight.length > 0 && (
-            <div className={clsx(classes.Unsplashed, classes['Unsplashed--right'])}>
-              {nodeVars.unsplashedRight.map(sig => (
-                <UnsplashedSignature key={sig.eve_id} signature={sig} />
-              ))}
-            </div>
-          )}
-        </>
-      )}
-
-      <div className={classes.Handlers}>
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleTop, {
-            [classes.selected]: nodeVars.selected,
-            [classes.Tick]: nodeVars.isThickConnections,
-          })}
-          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Top}
-          id="a"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleRight, {
-            [classes.selected]: nodeVars.selected,
-            [classes.Tick]: nodeVars.isThickConnections,
-          })}
-          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Right}
-          id="b"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleBottom, {
-            [classes.selected]: nodeVars.selected,
-            [classes.Tick]: nodeVars.isThickConnections,
-          })}
-          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Bottom}
-          id="c"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleLeft, {
-            [classes.selected]: nodeVars.selected,
-            [classes.Tick]: nodeVars.isThickConnections,
-          })}
-          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Left}
-          id="d"
-        />
-      </div>
-    </>
-  );
-});
-
-SolarSystemNodeDefault.displayName = 'SolarSystemNodeDefault';

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

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

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

@@ -1,219 +0,0 @@
-import { memo } from 'react';
-import { MapSolarSystemType } from '../../map.types';
-import { Handle, NodeProps, Position } from 'reactflow';
-import clsx from 'clsx';
-import classes from './SolarSystemNodeTheme.module.scss';
-import { PrimeIcons } from 'primereact/api';
-import { useLocalCounter, useNodeKillsCount, useSolarSystemNode } from '../../hooks/useSolarSystemLogic';
-import {
-  EFFECT_BACKGROUND_STYLES,
-  MARKER_BOOKMARK_BG_STYLES,
-  STATUS_CLASSES,
-} from '@/hooks/Mapper/components/map/constants';
-import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/WormholeClassComp';
-import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
-import { LocalCounter } from './SolarSystemLocalCounter';
-import { KillsCounter } from './SolarSystemKillsCounter';
-
-export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>) => {
-  const nodeVars = useSolarSystemNode(props);
-  const { localCounterCharacters } = useLocalCounter(nodeVars);
-  const localKillsCount = useNodeKillsCount(nodeVars.solarSystemId, nodeVars.killsCount);
-
-  return (
-    <>
-      {nodeVars.visible && (
-        <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>
-            </div>
-          )}
-
-          {nodeVars.isShattered && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered)}>
-              <span className={clsx('pi pi-chart-pie', classes.icon)} />
-            </div>
-          )}
-
-          {localKillsCount && localKillsCount > 0 && nodeVars.solarSystemId && (
-            <KillsCounter
-              killsCount={localKillsCount}
-              systemId={nodeVars.solarSystemId}
-              size="lg"
-              killsActivityType={nodeVars.killsActivityType}
-              className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!])}
-            >
-              <div className={clsx(classes.BookmarkWithIcon)}>
-                <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
-                <span className={clsx(classes.text)}>{nodeVars.killsCount}</span>
-              </div>
-            </KillsCounter>
-          )}
-
-          {nodeVars.labelsInfo.map(x => (
-            <div key={x.id} className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}>
-              {x.shortName}
-            </div>
-          ))}
-        </div>
-      )}
-
-      <div
-        className={clsx(
-          classes.RootCustomNode,
-          nodeVars.regionClass && classes[nodeVars.regionClass],
-          nodeVars.status !== undefined ? classes[STATUS_CLASSES[nodeVars.status]] : '',
-          { [classes.selected]: nodeVars.selected },
-        )}
-        onMouseDownCapture={e => nodeVars.dbClick(e)}
-      >
-        {nodeVars.visible && (
-          <>
-            <div className={classes.HeadRow}>
-              <div
-                className={clsx(
-                  classes.classTitle,
-                  nodeVars.classTitleColor,
-                  '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]',
-                )}
-              >
-                {nodeVars.classTitle ?? '-'}
-              </div>
-
-              {nodeVars.tag != null && nodeVars.tag !== '' && (
-                <div className={clsx(classes.TagTitle)}>{nodeVars.tag}</div>
-              )}
-
-              <div
-                className={clsx(
-                  classes.classSystemName,
-                  '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] flex-grow overflow-hidden text-ellipsis whitespace-nowrap',
-                )}
-              >
-                {nodeVars.systemName}
-              </div>
-
-              {nodeVars.isWormhole && (
-                <div className={classes.statics}>
-                  {nodeVars.sortedStatics.map(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>
-
-            <div className={clsx(classes.BottomRow, 'flex items-center justify-between')}>
-              {nodeVars.customName && (
-                <div
-                  className={clsx(
-                    classes.CustomName,
-                    '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] whitespace-nowrap overflow-hidden text-ellipsis mr-0.5',
-                  )}
-                >
-                  {nodeVars.customName}
-                </div>
-              )}
-
-              {!nodeVars.isWormhole && !nodeVars.customName && (
-                <div
-                  className={clsx(
-                    classes.RegionName,
-                    '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] whitespace-nowrap overflow-hidden text-ellipsis mr-0.5',
-                  )}
-                >
-                  {nodeVars.regionName}
-                </div>
-              )}
-
-              {nodeVars.isWormhole && !nodeVars.customName && <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>
-          </>
-        )}
-      </div>
-
-      {nodeVars.visible && (
-        <>
-          {nodeVars.unsplashedLeft.length > 0 && (
-            <div className={classes.Unsplashed}>
-              {nodeVars.unsplashedLeft.map(sig => (
-                <UnsplashedSignature key={sig.eve_id} signature={sig} />
-              ))}
-            </div>
-          )}
-
-          {nodeVars.unsplashedRight.length > 0 && (
-            <div className={clsx(classes.Unsplashed, classes['Unsplashed--right'])}>
-              {nodeVars.unsplashedRight.map(sig => (
-                <UnsplashedSignature key={sig.eve_id} signature={sig} />
-              ))}
-            </div>
-          )}
-        </>
-      )}
-
-      <div className={classes.Handlers}>
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleTop, {
-            [classes.selected]: nodeVars.selected,
-            [classes.Tick]: nodeVars.isThickConnections,
-          })}
-          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Top}
-          id="a"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleRight, {
-            [classes.selected]: nodeVars.selected,
-            [classes.Tick]: nodeVars.isThickConnections,
-          })}
-          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Right}
-          id="b"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleBottom, {
-            [classes.selected]: nodeVars.selected,
-            [classes.Tick]: nodeVars.isThickConnections,
-          })}
-          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Bottom}
-          id="c"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleLeft, {
-            [classes.selected]: nodeVars.selected,
-            [classes.Tick]: nodeVars.isThickConnections,
-          })}
-          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Left}
-          id="d"
-        />
-      </div>
-    </>
-  );
-});
-
-SolarSystemNodeTheme.displayName = 'SolarSystemNodeTheme';

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

@@ -1,2 +1 @@
-export * from './SolarSystemNodeDefault';
-export * from './SolarSystemNodeTheme';
+export * from './SolarSystemNode';

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

@@ -1,22 +0,0 @@
-@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
-
-.Signature {
-  position: relative;
-  top: 3px;
-  display: block;
-
-  & > .Box {
-    width: 13px;
-    height: 4px;
-    border-radius: 4px;
-    color: var(--text-color);
-    font-size: 8px;
-    text-align: center;
-    font-weight: bolder;
-    display: block;
-  }
-
-  & > .Eol {
-    display: block;
-  }
-}

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

@@ -1,70 +0,0 @@
-import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
-import { InfoDrawer } from '@/hooks/Mapper/components/ui-kit';
-
-import classes from './UnsplashedSignature.module.scss';
-import { SystemSignature } from '@/hooks/Mapper/types/signatures';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { WORMHOLE_CLASS_STYLES, WORMHOLES_ADDITIONAL_INFO } from '@/hooks/Mapper/components/map/constants.ts';
-import { useMemo } from 'react';
-import clsx from 'clsx';
-import { renderInfoColumn } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders';
-import { K162_TYPES_MAP } from '@/hooks/Mapper/constants.ts';
-import { parseSignatureCustomInfo } from '@/hooks/Mapper/helpers/parseSignatureCustomInfo.ts';
-
-interface UnsplashedSignatureProps {
-  signature: SystemSignature;
-}
-export const UnsplashedSignature = ({ signature }: UnsplashedSignatureProps) => {
-  const {
-    data: { wormholesData },
-  } = useMapRootState();
-
-  const whData = useMemo(() => wormholesData[signature.type], [signature.type, wormholesData]);
-  const whClass = useMemo(() => (whData ? WORMHOLES_ADDITIONAL_INFO[whData.dest] : null), [whData]);
-
-  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];
-      const k162Class = k162Data ? WORMHOLES_ADDITIONAL_INFO[k162Data.dest] : null;
-      return k162Class ? WORMHOLE_CLASS_STYLES[k162Class.wormholeClassID] : '';
-    }
-    return whClass ? WORMHOLE_CLASS_STYLES[whClass.wormholeClassID] : '';
-  }, [signature, whClass, k162TypeOption, wormholesData]);
-
-  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>
-      }
-    >
-      <div className={clsx(classes.Box, whClassStyle)}>
-        <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/components/UnsplashedSignature/index.ts

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

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

@@ -1,4 +1,4 @@
-import { ConnectionType, MassState, ShipSizeStatus } from '@/hooks/Mapper/types';
+import { MassState } from '@/hooks/Mapper/types';
 
 export enum SOLAR_SYSTEM_CLASS_IDS {
   ccp1 = -1,
@@ -712,13 +712,6 @@ export const STATUS_CLASSES: Record<number, string> = {
   [STATUSES.dangerous]: 'eve-system-status-dangerous',
 };
 
-export const TYPE_NAMES_ORDER = [ConnectionType.wormhole, ConnectionType.gate];
-
-export const TYPE_NAMES = {
-  [ConnectionType.wormhole]: 'Wormhole',
-  [ConnectionType.gate]: 'Gate',
-};
-
 export const MASS_STATE_NAMES_ORDER = [MassState.verge, MassState.half, MassState.normal];
 
 export const MASS_STATE_NAMES = {
@@ -727,41 +720,16 @@ export const MASS_STATE_NAMES = {
   [MassState.verge]: 'Verge of collapse',
 };
 
-export const SHIP_SIZES_NAMES_ORDER = [
-  ShipSizeStatus.small,
-  ShipSizeStatus.medium,
-  ShipSizeStatus.large,
-  ShipSizeStatus.freight,
-  ShipSizeStatus.capital,
-];
-
-export const SHIP_SIZES_NAMES = {
-  [ShipSizeStatus.small]: 'Frigate',
-  [ShipSizeStatus.medium]: 'Medium',
-  [ShipSizeStatus.large]: 'Normal',
-  [ShipSizeStatus.freight]: 'Huge',
-  [ShipSizeStatus.capital]: 'Capital',
-};
-export const SHIP_SIZES_SIZE = {
-  [ShipSizeStatus.small]: '5K',
-  [ShipSizeStatus.medium]: '62K',
-  [ShipSizeStatus.large]: '375K',
-  [ShipSizeStatus.freight]: '1M',
-  [ShipSizeStatus.capital]: '2M',
-};
-
-export const SHIP_SIZES_DESCRIPTION = {
-  [ShipSizeStatus.small]: 'Frigate wormhole - up to Destroyer | 5K t.',
-  [ShipSizeStatus.medium]: 'Cruise wormhole - up to Battlecruiser | 62K t.',
-  [ShipSizeStatus.large]: 'Large wormhole - up to Battleship | 375K t.',
-  [ShipSizeStatus.freight]: 'Huge wormhole - up to Freighter | 1M t.',
-  [ShipSizeStatus.capital]: 'Capital wormhole - up to Capital | 2M t.',
-};
-
-export const SHIP_SIZES_NAMES_SHORT = {
-  [ShipSizeStatus.small]: 'S',
-  [ShipSizeStatus.medium]: 'M',
-  [ShipSizeStatus.large]: 'L',
-  [ShipSizeStatus.freight]: 'H',
-  [ShipSizeStatus.capital]: 'XL',
-};
+// export const SHIP_SIZES_NAMES_ORDER = [
+//   ShipSizeStatus.small,
+//   ShipSizeStatus.normal,
+//   // ShipSizeStatus.large,
+//   // ShipSizeStatus.capital,
+// ];
+//
+// export const SHIP_SIZES_NAMES = {
+//   [ShipSizeStatus.small]: 'Frigate',
+//   [ShipSizeStatus.normal]: 'Normal',
+//   // [ShipSizeStatus.large]: 'Normal',
+//   // [ShipSizeStatus.capital]: 'Normal',
+// };

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

@@ -10,6 +10,5 @@ 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

@@ -1,32 +0,0 @@
-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/helpers/index.ts

@@ -3,4 +3,3 @@ export * from './convertSystem2Node';
 export * from './getSystemClassStyles';
 export * from './getShapeClass';
 export * from './getBackgroundClass';
-export * from './prepareUnsplashedChunks';

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

@@ -1,27 +0,0 @@
-// Helper function to split an array into chunks of size
-const chunkArray = (array: any[], size: number) => {
-  const chunks = [];
-  for (let i = 0; i < array.length; i += size) {
-    chunks.push(array.slice(i, i + size));
-  }
-  return chunks;
-};
-
-export const prepareUnsplashedChunks = (items: any[]) => {
-  // Split the items into chunks of 4
-  const chunks = chunkArray(items, 4);
-
-  // Get the column elements
-  const leftColumn: any[] = [];
-  const rightColumn: any[] = [];
-
-  chunks.forEach((chunk, index) => {
-    const column = index % 2 === 0 ? leftColumn : rightColumn;
-
-    chunk.forEach(item => {
-      column.push(item);
-    });
-  });
-
-  return [leftColumn, rightColumn];
-};

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

@@ -12,7 +12,6 @@ export const useMapAddSystems = () => {
   return useCallback((systems: CommandAddSystems) => {
     const { rf } = ref.current;
     const nodes = rf.getNodes();
-
     const prepared: Node[] = systems.filter(x => !nodes.some(y => x.id === y.id)).map(convertSystem2Node);
     rf.addNodes(prepared);
   }, []);

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

@@ -5,21 +5,24 @@ import { OnMapSelectionChange } from '@/hooks/Mapper/components/map/map.types.ts
 
 export const useMapRemoveSystems = (onSelectionChange: OnMapSelectionChange) => {
   const rf = useReactFlow();
-  const ref = useRef({ onSelectionChange, rf });
-  ref.current = { onSelectionChange, rf };
+  const ref = useRef({ onSelectionChange });
+  ref.current = { onSelectionChange };
 
-  return useCallback((systems: CommandRemoveSystems) => {
-    ref.current.rf.deleteElements({ nodes: systems.map(x => ({ id: `${x}` })) });
+  return useCallback(
+    (systems: CommandRemoveSystems) => {
+      rf.deleteElements({ nodes: systems.map(x => ({ id: `${x}` })) });
 
-    const newSelection = ref.current.rf
-      .getNodes()
-      .filter(x => !systems.includes(parseInt(x.id)))
-      .filter(x => x.selected)
-      .map(x => x.id);
+      const newSelection = rf
+        .getNodes()
+        .filter(x => !systems.includes(parseInt(x.id)))
+        .filter(x => x.selected)
+        .map(x => x.id);
 
-    ref.current.onSelectionChange({
-      systems: newSelection,
-      connections: [],
-    });
-  }, []);
+      ref.current.onSelectionChange({
+        systems: newSelection,
+        connections: [],
+      });
+    },
+    [rf],
+  );
 };

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

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

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

@@ -1,3 +1,2 @@
 export * from './useMapHandlers';
 export * from './useUpdateNodes';
-export * from './useNodesEdgesState';

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

@@ -1,48 +0,0 @@
-import { useEffect, useState } from 'react';
-import { BackgroundVariant } from 'reactflow';
-
-export function useBackgroundVars(themeName?: string) {
-  const [variant, setVariant] = useState<BackgroundVariant>(BackgroundVariant.Dots);
-  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"
-    let themeEl = document.querySelector('[class$="-theme"]');
-
-    // If none is found, fall back to the <html> element
-    if (!themeEl) {
-      themeEl = document.documentElement;
-    }
-
-    const style = getComputedStyle(themeEl as HTMLElement);
-
-    const rawVariant = style.getPropertyValue('--rf-bg-variant').replace(/['"]/g, '').trim().toLowerCase();
-    let finalVariant: BackgroundVariant = BackgroundVariant.Dots;
-
-    if (rawVariant === 'lines') {
-      finalVariant = BackgroundVariant.Lines;
-    } else if (rawVariant === 'cross') {
-      finalVariant = BackgroundVariant.Cross;
-    }
-
-    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, snapSize };
-}

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

@@ -1,44 +0,0 @@
-import { useMemo } from 'react';
-import { useSystemKills } from '../../mapInterface/widgets/SystemKills/hooks/useSystemKills';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-
-interface UseKillsCounterProps {
-  realSystemId: string;
-}
-
-export function useKillsCounter({ realSystemId }: UseKillsCounterProps) {
-  const { data: mapData, outCommand } = useMapRootState();
-  const { systems } = mapData;
-
-  const systemNameMap = useMemo(() => {
-    const m: Record<string, string> = {};
-    systems.forEach(sys => {
-      m[sys.id] = sys.temporary_name || sys.name || '???';
-    });
-    return m;
-  }, [systems]);
-
-  const { kills: allKills, isLoading } = useSystemKills({
-    systemId: realSystemId,
-    outCommand,
-    showAllVisible: false,
-  });
-
-  const filteredKills = useMemo(() => {
-    if (!allKills || allKills.length === 0) return [];
-
-    return [...allKills]
-      .sort((a, b) => {
-        const aTime = a.kill_time ? new Date(a.kill_time).getTime() : 0;
-        const bTime = b.kill_time ? new Date(b.kill_time).getTime() : 0;
-        return bTime - aTime;
-      })
-      .slice(0, 10);
-  }, [allKills]);
-
-  return {
-    isLoading,
-    kills: filteredKills,
-    systemNameMap,
-  };
-}

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

@@ -19,6 +19,8 @@ import {
   MapHandlers,
 } from '@/hooks/Mapper/types/mapHandlers.ts';
 
+import { useMapEventListener } from '@/hooks/Mapper/events';
+
 import {
   useCommandsCharacters,
   useCommandsConnections,
@@ -58,19 +60,16 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
               mapInit(data as CommandInit);
               break;
             case Commands.addSystems:
-              setTimeout(() => mapAddSystems(data as CommandAddSystems), 100);
               break;
             case Commands.updateSystems:
               mapUpdateSystems(data as CommandUpdateSystems);
               break;
             case Commands.removeSystems:
-              setTimeout(() => removeSystems(data as CommandRemoveSystems), 100);
               break;
             case Commands.addConnections:
-              setTimeout(() => addConnections(data as CommandAddConnections), 100);
               break;
             case Commands.removeConnections:
-              setTimeout(() => removeConnections(data as CommandRemoveConnections), 100);
+              removeConnections(data as CommandRemoveConnections);
               break;
             case Commands.charactersUpdated:
               charactersUpdated(data as CommandCharactersUpdated);
@@ -112,25 +111,17 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
                   connections: [],
                 });
                 selectSystem(systemId as CommandSelectSystem);
-              }, 500);
+              }, 100);
               break;
 
             case Commands.routes:
               // do nothing here
               break;
 
-            case Commands.signaturesUpdated:
-              // do nothing here
-              break;
-
             case Commands.linkSignatureToSystem:
               // do nothing here
               break;
 
-            case Commands.detailedKillsUpdated:
-              // do nothing here
-              break;
-
             default:
               console.warn(`Map handlers: Unknown command: ${type}`, data);
               break;
@@ -140,4 +131,20 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
     },
     [],
   );
+
+  useMapEventListener(event => {
+    switch (event.name) {
+      case Commands.addConnections:
+        addConnections(event.data as CommandAddConnections);
+        break;
+      case Commands.addSystems:
+        mapAddSystems(event.data as CommandAddSystems);
+        break;
+      case Commands.removeSystems:
+        removeSystems(event.data as CommandRemoveSystems);
+        break;
+      default:
+        break;
+    }
+  });
 };

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

@@ -1,36 +0,0 @@
-import { useState, useCallback, type Dispatch, type SetStateAction } from 'react';
-
-import { applyNodeChanges, applyEdgeChanges } from '../utils/changes';
-import { OnNodesChange, Edge, OnEdgesChange, Node } from 'reactflow';
-
-/**
- * Hook for managing the state of nodes - should only be used for prototyping / simple use cases.
- *
- * @public
- * @param initialNodes
- * @returns an array [nodes, setNodes, onNodesChange]
- */
-export function useNodesState<NodeType extends Node>(
-  initialNodes: NodeType[],
-): [NodeType[], Dispatch<SetStateAction<NodeType[]>>, OnNodesChange] {
-  const [nodes, setNodes] = useState(initialNodes);
-  const onNodesChange: OnNodesChange = useCallback(changes => setNodes(nds => applyNodeChanges(changes, nds)), []);
-
-  return [nodes, setNodes, onNodesChange];
-}
-
-/**
- * Hook for managing the state of edges - should only be used for prototyping / simple use cases.
- *
- * @public
- * @param initialEdges
- * @returns an array [edges, setEdges, onEdgesChange]
- */
-export function useEdgesState<EdgeType extends Edge = Edge>(
-  initialEdges: EdgeType[],
-): [EdgeType[], Dispatch<SetStateAction<EdgeType[]>>, OnEdgesChange] {
-  const [edges, setEdges] = useState(initialEdges);
-  const onEdgesChange: OnEdgesChange = useCallback(changes => setEdges(eds => applyEdgeChanges(changes, eds)), []);
-
-  return [edges, setEdges, onEdgesChange];
-}

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

@@ -1,305 +0,0 @@
-import { useEffect, useMemo, useState } 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 { sortWHClasses } from '@/hooks/Mapper/helpers';
-import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager';
-import { CharacterTypeRaw, Commands, OutCommand, SystemSignature } from '@/hooks/Mapper/types';
-import { LABELS_INFO, LABELS_ORDER } from '@/hooks/Mapper/components/map/constants';
-import { useMapEventListener } from '@/hooks/Mapper/events';
-
-export type LabelInfo = {
-  id: string;
-  shortName: string;
-};
-
-export type UnsplashedSignatureType = SystemSignature & { sig_id: string };
-
-function getActivityType(count: number): string {
-  if (count <= 5) return 'activityNormal';
-  if (count <= 30) return 'activityWarn';
-  return 'activityDanger';
-}
-
-const SpaceToClass: Record<string, string> = {
-  [Spaces.Caldari]: 'Caldaria',
-  [Spaces.Matar]: 'Mataria',
-  [Spaces.Amarr]: 'Amarria',
-  [Spaces.Gallente]: 'Gallente',
-};
-
-function sortedLabels(labels: string[]): LabelInfo[] {
-  if (!labels) return [];
-  return LABELS_ORDER.filter(x => labels.includes(x)).map(x => LABELS_INFO[x] as LabelInfo);
-}
-
-export function useLocalCounter(nodeVars: SolarSystemNodeVars) {
-  const localCounterCharacters = useMemo(() => {
-    return nodeVars.charactersInSystem
-      .map(char => ({
-        ...char,
-        compact: true,
-        isOwn: nodeVars.userCharacters.includes(char.eve_id),
-      }))
-      .sort((a, b) => a.name.localeCompare(b.name));
-  }, [nodeVars.charactersInSystem, nodeVars.userCharacters]);
-  return { localCounterCharacters };
-}
-
-export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>): SolarSystemNodeVars {
-  const { id, data, selected } = props;
-  const {
-    system_static_info,
-    system_signatures,
-    locked,
-    name,
-    tag,
-    status,
-    labels,
-    temporary_name,
-    linked_sig_eve_id: linkedSigEveId = '',
-  } = data;
-
-  const {
-    system_class,
-    security,
-    class_title,
-    solar_system_id,
-    statics,
-    effect_name,
-    region_name,
-    region_id,
-    is_shattered,
-    solar_system_name,
-  } = system_static_info;
-
-  const {
-    interfaceSettings,
-    data: { systemSignatures: mapSystemSignatures },
-  } = useMapRootState();
-
-  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,
-      wormholesData,
-      hubs,
-      kills,
-      userCharacters,
-      isConnecting,
-      hoverNodeId,
-      visibleNodes,
-      showKSpaceBG,
-      isThickConnections,
-    },
-    outCommand,
-  } = useMapState();
-
-  const visible = useMemo(() => visibleNodes.has(id), [id, visibleNodes]);
-
-  const systemSigs = useMemo(
-    () => mapSystemSignatures[solar_system_id] || system_signatures,
-    [system_signatures, solar_system_id, mapSystemSignatures],
-  );
-
-  const charactersInSystem = useMemo(() => {
-    return characters.filter(c => c.location?.solar_system_id === solar_system_id && c.online);
-  }, [characters, 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 linkedSigPrefix = useMemo(() => (linkedSigEveId ? linkedSigEveId.split('-')[0] : null), [linkedSigEveId]);
-
-  const labelsManager = useMemo(() => new LabelsManager(labels ?? ''), [labels]);
-  const labelsInfo = useMemo(() => sortedLabels(labelsManager.list), [labelsManager]);
-  const labelCustom = useMemo(() => {
-    if (isShowLinkedSigId && linkedSigPrefix) {
-      return labelsManager.customLabel ? `${linkedSigPrefix}・${labelsManager.customLabel}` : linkedSigPrefix;
-    }
-    return labelsManager.customLabel;
-  }, [linkedSigPrefix, isShowLinkedSigId, labelsManager]);
-
-  const killsCount = useMemo(() => kills[solar_system_id] ?? null, [kills, solar_system_id]);
-  const killsActivityType = killsCount ? getActivityType(killsCount) : null;
-
-  const hasUserCharacters = useMemo(() => {
-    return charactersInSystem.some(x => userCharacters.includes(x.eve_id));
-  }, [charactersInSystem, userCharacters]);
-
-  const 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 computedTemporaryName = useMemo(() => {
-    if (!isTempSystemNameEnabled) {
-      return '';
-    }
-    if (isShowLinkedSigIdTempName && linkedSigPrefix) {
-      return temporary_name ? `${linkedSigPrefix}・${temporary_name}` : `${linkedSigPrefix}・${solar_system_name}`;
-    }
-    return temporary_name;
-  }, [isShowLinkedSigIdTempName, isTempSystemNameEnabled, linkedSigPrefix, solar_system_name, temporary_name]);
-
-  const systemName = useMemo(() => {
-    if (isTempSystemNameEnabled && computedTemporaryName) {
-      return computedTemporaryName;
-    }
-    return solar_system_name;
-  }, [isTempSystemNameEnabled, solar_system_name, computedTemporaryName]);
-
-  const customName = useMemo(() => {
-    if (isTempSystemNameEnabled && computedTemporaryName && name) {
-      return name;
-    }
-    if (solar_system_name !== name && name) {
-      return name;
-    }
-    return null;
-  }, [isTempSystemNameEnabled, computedTemporaryName, name, solar_system_name]);
-
-  const [unsplashedLeft, unsplashedRight] = useMemo(() => {
-    if (!isShowUnsplashedSignatures) {
-      return [[], []];
-    }
-    return prepareUnsplashedChunks(
-      systemSigs
-        .filter(s => s.group === 'Wormhole' && !s.linked_system)
-        .map(s => ({
-          eve_id: s.eve_id,
-          type: s.type,
-          custom_info: s.custom_info,
-          kind: s.kind,
-          name: s.name,
-          group: s.group,
-        })) as UnsplashedSignatureType[],
-    );
-  }, [isShowUnsplashedSignatures, systemSigs]);
-
-  // Ensure hubs are always strings.
-  const hubsAsStrings = useMemo(() => hubs.map(item => item.toString()), [hubs]);
-
-  const nodeVars: SolarSystemNodeVars = {
-    id,
-    selected,
-    visible,
-    isWormhole,
-    classTitleColor,
-    killsCount,
-    killsActivityType,
-    hasUserCharacters,
-    userCharacters,
-    showHandlers,
-    regionClass,
-    systemName,
-    customName,
-    labelCustom,
-    isShattered: is_shattered,
-    tag,
-    status,
-    labelsInfo,
-    dbClick,
-    sortedStatics,
-    effectName: effect_name,
-    regionName: region_name,
-    solarSystemId: solar_system_id.toString(),
-    solarSystemName: solar_system_name,
-    locked,
-    hubs: hubsAsStrings,
-    name: name,
-    isConnecting,
-    hoverNodeId,
-    charactersInSystem,
-    unsplashedLeft,
-    unsplashedRight,
-    isThickConnections,
-    classTitle: class_title,
-    temporaryName: computedTemporaryName,
-  };
-
-  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;
-}
-
-export function useNodeKillsCount(systemId: number | string, initialKillsCount: number | null): number | null {
-  const [killsCount, setKillsCount] = useState<number | null>(initialKillsCount);
-
-  useEffect(() => {
-    setKillsCount(initialKillsCount);
-  }, [initialKillsCount]);
-
-  useMapEventListener(event => {
-    if (event.name === Commands.killsUpdated && event.data?.toString() === systemId.toString()) {
-      //@ts-ignore
-      if (event.payload && typeof event.payload.kills === 'number') {
-        // @ts-ignore
-        setKillsCount(event.payload.kills);
-      }
-      return true;
-    }
-    return false;
-  });
-
-  return killsCount;
-}

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

@@ -1,6 +1,5 @@
 import { SolarSystemRawType } from '@/hooks/Mapper/types/system';
 import { SolarSystemConnection } from '@/hooks/Mapper/types';
-import { XYPosition } from 'reactflow';
 
 export type MapSolarSystemType = Omit<SolarSystemRawType, 'position'>;
 
@@ -8,5 +7,3 @@ export type OnMapSelectionChange = (event: {
   systems: string[];
   connections: Pick<SolarSystemConnection, 'source' | 'target'>[];
 }) => void;
-
-export type OnMapAddSystemCallback = (props: { coordinates: XYPosition | null }) => void;

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

@@ -1,36 +0,0 @@
-@import './eve-common-variables';
-@import './eve-common';
-
-.default-theme {
-  --rf-bg-color: #0C0A09;
-  --rf-soft-bg-color: #171717;
-
-  --rf-node-bg-color: #202020;
-  --rf-node-soft-bg-color: #202020;
-  --rf-text-color: #ffffff;
-  --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;
-  --rf-bg-size: 1;
-  --rf-bg-pattern-color: #81818a;
-
-  --pastel-blue: #5a7d9a;
-  --pastel-pink: #d291bc;
-  --pastel-green: #88b04b;
-  --pastel-yellow: #ffdd59;
-
-  --dark-bg: #2d2d2d;
-  --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,122 +1,78 @@
+$eve-link-color-default: #333;
+$eve-link-color-top-mass-0: #333;
+$eve-link-color-top-mass-1: #5a4520;
+$eve-link-color-top-mass-2: #672c2c;
+$eve-link-color-middle-mass-0: #333;
+$eve-link-color-middle-mass-1: #333;
+$eve-link-color-middle-mass-2: #333;
+$eve-link-color-middle-time-0: #5c5c5c;
+$eve-link-color-middle-time-1: #ff00cd;
+$eve-link-color-middle-time-1-border: #99f3ff;
 
-$friendlyBase: #3bbd39;
-$friendlyAlpha: #3bbd3952;
-$friendlyDark20: darken($friendlyBase, 20%);
-$friendlyDark30: darken($friendlyBase, 30%);
-$friendlyDark5:  darken($friendlyBase, 5%);
+$eve-link-color-top-mass-1-time-1: #796300;
+$eve-link-color-top-mass-2-time-1: #8c1717;
+$eve-link-color-temp: orange;
 
-$lookingForBase: #43c2fd;
-$lookingForAlpha: rgba(67, 176, 253, 0.48);
-$lookingForDark15: darken($lookingForBase, 15%);
+$eve-effect-pulsar: #40aef5;
+$eve-effect-magnetar: #f058f8;
+$eve-effect-wolfRayet: #ef7843;
+$eve-effect-blackHole: #1b1b1b;
+$eve-effect-cataclysmicVariable: #ffea90;
+$eve-effect-redGiant: #fd3c3c;
+$eve-effect-dazhLiminalityLocus: #ff6464;
+$eve-effect-imperialStellarObservatory: #6991ce;
+$eve-effect-stateStellarObservatory: #6991ce;
+$eve-effect-republicStellarObservatory: #6991ce;
+$eve-effect-federalStellarObservatory: #6991ce;
 
-$homeBase: rgb(179, 253, 67);
-$homeAlpha: rgba(186, 248, 48, 0.32);
-$homeBackground: #a0fa5636;
-$homeDark30: darken($homeBase, 30%);
+$eve-wh-type-color-high: #5dffd2;
+$eve-wh-type-color-low: #f79400;
+$eve-wh-type-color-null: #fc3c3c;
+$eve-wh-type-color-c1: #69bfce;
+$eve-wh-type-color-c2: #6991ce;
+$eve-wh-type-color-c3: #a8cb70;
+$eve-wh-type-color-c4: #e39c68;
+$eve-wh-type-color-c5: #de8686;
+$eve-wh-type-color-c6: #e76363;
+$eve-wh-type-color-c13: #988cb5;
+$eve-wh-type-color-drifter: #ff44f6;
+$eve-wh-type-color-thera: #ffffff;
+$eve-wh-type-color-zarzakh: #212121;
 
-:root {
-  --pastel-blue: #5a7d9a;
-  --pastel-pink: #d291bc;
-  --pastel-green: #88b04b;
-  --pastel-yellow: #ffdd59;
-  --dark-bg: #2d2d2d;
-  --text-color: #ffffff;
-  --tooltip-bg: #202020;
+$eve-security-color-10: #2c74df;
+$eve-security-color-09: #3998e8;
+$eve-security-color-08: #4dcbf5;
+$eve-security-color-07: #60d8a2;
+$eve-security-color-06: #71e454;
+$eve-security-color-05: #f2fc81;
+$eve-security-color-04: #d96c07;
+$eve-security-color-03: #cb440f;
+$eve-security-color-02: #b91117;
+$eve-security-color-01: #732020;
+$eve-security-color-00: #8b3263;
+$eve-security-color-m-01: #8b3263;
+$eve-security-color-m-02: #8b3263;
+$eve-security-color-m-03: #8b3263;
+$eve-security-color-m-04: #8b3263;
+$eve-security-color-m-05: #8b3263;
+$eve-security-color-m-06: #8b3263;
+$eve-security-color-m-07: #8b3263;
+$eve-security-color-m-08: #8b3263;
+$eve-security-color-m-09: #8b3263;
+$eve-security-color-m-10: #8b3263;
 
-  --pastel-blue-darken10: #4f6b86;
-  --pastel-blue-lighten10: #6da3af;
-  --pastel-pink-darken10: #bb7ca9;
-  --pastel-pink-lighten10: #e0a6cb;
-  --pastel-green-darken10: #79a244;
-  --pastel-green-lighten10: #99cf52;
-  --pastel-yellow-darken10: #e6c44f;
-  --pastel-yellow-lighten10: #ffe874;
+$eve-solar-system-status-unknown: transparent;
+$eve-solar-system-status-friendly: #3bbd3952;
+$eve-solar-system-status-warning: #906518a6;
+$eve-solar-system-status-target: #b439ff6b;
+$eve-solar-system-status-dangerous: #d54040;
+$eve-solar-system-status-lookingFor: rgba(67, 176, 253, 0.48);
+$eve-solar-system-status-home: rgb(197, 253, 67);
 
-  --eve-link-color-default: #333;
-  --eve-link-color-top-mass-0: #333;
-  --eve-link-color-top-mass-1: #5a4520;
-  --eve-link-color-top-mass-2: #672c2c;
-  --eve-link-color-middle-mass-0: #333;
-  --eve-link-color-middle-mass-1: #333;
-  --eve-link-color-middle-mass-2: #333;
-  --eve-link-color-middle-time-0: #5c5c5c;
-  --eve-link-color-middle-time-1: #ff00cd;
-  --eve-link-color-middle-time-1-border: #99f3ff;
-  --eve-link-color-top-mass-1-time-1: #796300;
-  --eve-link-color-top-mass-2-time-1: #8c1717;
-  --eve-link-color-temp: orange;
-
-  --eve-effect-pulsar: #40aef5;
-  --eve-effect-magnetar: #f058f8;
-  --eve-effect-wolfRayet: #ef7843;
-  --eve-effect-blackHole: #1b1b1b;
-  --eve-effect-cataclysmicVariable: #ffea90;
-  --eve-effect-redGiant: #fd3c3c;
-  --eve-effect-dazhLiminalityLocus: #ff6464;
-  --eve-effect-imperialStellarObservatory: #6991ce;
-  --eve-effect-stateStellarObservatory: #6991ce;
-  --eve-effect-republicStellarObservatory: #6991ce;
-  --eve-effect-federalStellarObservatory: #6991ce;
-
-  --eve-wh-type-color-high: #5dffd2;
-  --eve-wh-type-color-low: #f79400;
-  --eve-wh-type-color-null: #fc3c3c;
-  --eve-wh-type-color-c1: #69bfce;
-  --eve-wh-type-color-c2: #6991ce;
-  --eve-wh-type-color-c3: #a8cb70;
-  --eve-wh-type-color-c4: #e39c68;
-  --eve-wh-type-color-c5: #de8686;
-  --eve-wh-type-color-c6: #e76363;
-  --eve-wh-type-color-c13: #988cb5;
-  --eve-wh-type-color-drifter: #ff44f6;
-  --eve-wh-type-color-thera: #ffffff;
-  --eve-wh-type-color-zarzakh: #212121;
-
-  --eve-security-color-10: #2c74df;
-  --eve-security-color-09: #3998e8;
-  --eve-security-color-08: #4dcbf5;
-  --eve-security-color-07: #60d8a2;
-  --eve-security-color-06: #71e454;
-  --eve-security-color-05: #f2fc81;
-  --eve-security-color-04: #d96c07;
-  --eve-security-color-03: #cb440f;
-  --eve-security-color-02: #b91117;
-  --eve-security-color-01: #732020;
-  --eve-security-color-00: #8b3263;
-  --eve-security-color-m-01: #8b3263;
-  --eve-security-color-m-02: #8b3263;
-  --eve-security-color-m-03: #8b3263;
-  --eve-security-color-m-04: #8b3263;
-  --eve-security-color-m-05: #8b3263;
-  --eve-security-color-m-06: #8b3263;
-  --eve-security-color-m-07: #8b3263;
-  --eve-security-color-m-08: #8b3263;
-  --eve-security-color-m-09: #8b3263;
-  --eve-security-color-m-10: #8b3263;
-
-  --eve-solar-system-status-unknown: transparent;
-  --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};
-  --eve-solar-system-status-friendly-dark30:     #{$friendlyDark30};
-  --eve-solar-system-status-color-friendly-dark20: #{$friendlyDark20};
-  --eve-solar-system-status-color-friendly-dark5:  #{$friendlyDark5};
-  --eve-solar-system-status-lookingFor:              #{$lookingForAlpha};
-  --eve-solar-system-status-color-lookingFor:        #{$lookingForBase};
-  --eve-solar-system-status-color-lookingFor-dark15: #{$lookingForDark15};
-  --eve-solar-system-status-warning: #906518a6;
-  --eve-solar-system-status-color-warning: #ffb93b;
-  --eve-solar-system-status-target: #b439ff6b;
-  --eve-solar-system-status-color-target: #b439ff;
-  --eve-solar-system-status-dangerous: #d54040;
-  --eve-solar-system-status-color-dangerous: #d54040;
-
-  --conn-time-eol: #7452c3e3;
-  --conn-frigate: #325d88;
-  --conn-save: rgba(155, 102, 45, 0.85);
-  --selected-item-bg: rgba(98, 98, 98, 0.33);
-}
+$eve-solar-system-status-color-unknown: transparent;
+$eve-solar-system-status-color-friendly: #3bbd39;
+$eve-solar-system-status-color-warning: #ffb93b;
+$eve-solar-system-status-color-target: #b439ff;
+$eve-solar-system-status-color-dangerous: #d54040;
+$eve-solar-system-status-color-lookingFor: #43c2fd;
+$eve-solar-system-status-color-home: rgb(197, 253, 67);

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

@@ -1,504 +1,535 @@
-@import './eve-common-variables';
-
+@import "eve-common-variables";
 
 .eve-wh-effect-color-pulsar {
-  fill: var(--eve-effect-pulsar);
-  background-color: var(--eve-effect-pulsar);
+  fill: $eve-effect-pulsar;
+  background-color: $eve-effect-pulsar;
 }
 
 .eve-wh-effect-color-magnetar {
-  fill: var(--eve-effect-magnetar);
-  background-color: var(--eve-effect-magnetar);
+  fill: $eve-effect-magnetar;
+  background-color: $eve-effect-magnetar;
 }
 
 .eve-wh-effect-color-wolfRayet {
-  fill: var(--eve-effect-wolfRayet);
-  background-color: var(--eve-effect-wolfRayet);
+  fill: $eve-effect-wolfRayet;
+  background-color: $eve-effect-wolfRayet;
 }
 
 .eve-wh-effect-color-blackHole {
-  fill: var(--eve-effect-blackHole);
-  background-color: var(--eve-effect-blackHole);
-  box-shadow: 0 0 8px rgba(255, 255, 255, 0.33);
+  fill: $eve-effect-blackHole;
+  background-color: $eve-effect-blackHole;
+  box-shadow: 0 0 8px rgba(255 255 255 / 33);
 }
 
 .eve-wh-effect-color-cataclysmicVariable {
-  fill: var(--eve-effect-cataclysmicVariable);
-  background-color: var(--eve-effect-cataclysmicVariable);
+  fill: $eve-effect-cataclysmicVariable;
+  background-color: $eve-effect-cataclysmicVariable;
 }
 
 .eve-wh-effect-color-redGiant {
-  fill: var(--eve-effect-redGiant);
-  background-color: var(--eve-effect-redGiant);
+  fill: $eve-effect-redGiant;
+  background-color: $eve-effect-redGiant;
 }
 
 .text-eve-wh-effect-color-pulsar {
-  color: var(--eve-effect-pulsar);
+  color: $eve-effect-pulsar;
 }
+
 .text-eve-wh-effect-color-magnetar {
-  color: var(--eve-effect-magnetar);
+  color: $eve-effect-magnetar;
 }
+
 .text-eve-wh-effect-color-wolfRayet {
-  color: var(--eve-effect-wolfRayet);
+  color: $eve-effect-wolfRayet;
 }
+
 .text-eve-wh-effect-color-blackHole {
   color: #fff;
 }
+
 .text-eve-wh-effect-color-cataclysmicVariable {
-  color: var(--eve-effect-cataclysmicVariable);
+  color: $eve-effect-cataclysmicVariable;
 }
+
 .text-eve-wh-effect-color-redGiant {
-  color: var(--eve-effect-redGiant);
+  color: $eve-effect-redGiant;
 }
+
 .text-eve-wh-effect-color-dazhLiminalityLocus {
-  color: var(--eve-effect-dazhLiminalityLocus);
+  color: $eve-effect-dazhLiminalityLocus;
 }
+
 .text-eve-wh-effect-color-imperialStellarObservatory {
-  color: var(--eve-effect-imperialStellarObservatory);
+  color: $eve-effect-imperialStellarObservatory;
 }
+
 .text-eve-wh-effect-color-stateStellarObservatory {
-  color: var(--eve-effect-stateStellarObservatory);
+  color: $eve-effect-stateStellarObservatory;
 }
+
 .text-eve-wh-effect-color-republicStellarObservatory {
-  color: var(--eve-effect-republicStellarObservatory);
+  color: $eve-effect-republicStellarObservatory;
 }
+
 .text-eve-wh-effect-color-federalStellarObservatory {
-  color: var(--eve-effect-federalStellarObservatory);
+  color: $eve-effect-federalStellarObservatory;
 }
 
-/* Security color classes */
 .eve-security-color-10 {
-  color: var(--eve-security-color-10) !important;
-  fill: var(--eve-security-color-10);
+  color: $eve-security-color-10 !important;
+  fill: $eve-security-color-10;
 }
+
 .eve-security-color-09 {
-  color: var(--eve-security-color-09) !important;
-  fill: var(--eve-security-color-09);
+  color: $eve-security-color-09 !important;
+  fill: $eve-security-color-09;
 }
+
 .eve-security-color-08 {
-  color: var(--eve-security-color-08) !important;
-  fill: var(--eve-security-color-08);
+  color: $eve-security-color-08 !important;
+  fill: $eve-security-color-08;
 }
+
 .eve-security-color-07 {
-  color: var(--eve-security-color-07) !important;
-  fill: var(--eve-security-color-07);
+  color: $eve-security-color-07 !important;
+  fill: $eve-security-color-07;
 }
+
 .eve-security-color-06 {
-  color: var(--eve-security-color-06) !important;
-  fill: var(--eve-security-color-06);
+  color: $eve-security-color-06 !important;
+  fill: $eve-security-color-06;
 }
+
 .eve-security-color-05 {
-  color: var(--eve-security-color-05) !important;
-  fill: var(--eve-security-color-05);
+  color: $eve-security-color-05 !important;
+  fill: $eve-security-color-05;
 }
+
 .eve-security-color-04 {
-  color: var(--eve-security-color-04) !important;
-  fill: var(--eve-security-color-04);
+  color: $eve-security-color-04 !important;
+  fill: $eve-security-color-04;
 }
+
 .eve-security-color-03 {
-  color: var(--eve-security-color-03) !important;
-  fill: var(--eve-security-color-03);
+  color: $eve-security-color-03 !important;
+  fill: $eve-security-color-03;
 }
+
 .eve-security-color-02 {
-  color: var(--eve-security-color-02) !important;
-  fill: var(--eve-security-color-02);
+  color: $eve-security-color-02 !important;
+  fill: $eve-security-color-02;
 }
+
 .eve-security-color-01 {
-  color: var(--eve-security-color-01) !important;
-  fill: var(--eve-security-color-01);
+  color: $eve-security-color-01 !important;
+  fill: $eve-security-color-01;
 }
+
 .eve-security-color-00 {
-  color: var(--eve-security-color-00) !important;
-  fill: var(--eve-security-color-00);
+  color: $eve-security-color-00 !important;
+  fill: $eve-security-color-00;
 }
+
 .eve-security-color-m-01 {
-  color: var(--eve-security-color-m-01) !important;
-  fill: var(--eve-security-color-m-01);
+  color: $eve-security-color-m-01 !important;
+  fill: $eve-security-color-m-01;
 }
+
 .eve-security-color-m-02 {
-  color: var(--eve-security-color-m-02) !important;
-  fill: var(--eve-security-color-m-02);
+  color: $eve-security-color-m-02 !important;
+  fill: $eve-security-color-m-02;
 }
+
 .eve-security-color-m-03 {
-  color: var(--eve-security-color-m-03) !important;
-  fill: var(--eve-security-color-m-03);
+  color: $eve-security-color-m-03 !important;
+  fill: $eve-security-color-m-03;
 }
+
 .eve-security-color-m-04 {
-  color: var(--eve-security-color-m-04) !important;
-  fill: var(--eve-security-color-m-04);
+  color: $eve-security-color-m-04 !important;
+  fill: $eve-security-color-m-04;
 }
+
 .eve-security-color-m-05 {
-  color: var(--eve-security-color-m-05) !important;
-  fill: var(--eve-security-color-m-05);
+  color: $eve-security-color-m-05 !important;
+  fill: $eve-security-color-m-05;
 }
+
 .eve-security-color-m-06 {
-  color: var(--eve-security-color-m-06) !important;
-  fill: var(--eve-security-color-m-06);
+  color: $eve-security-color-m-06 !important;
+  fill: $eve-security-color-m-06;
 }
+
 .eve-security-color-m-07 {
-  color: var(--eve-security-color-m-07) !important;
-  fill: var(--eve-security-color-m-07);
+  color: $eve-security-color-m-07 !important;
+  fill: $eve-security-color-m-07;
 }
+
 .eve-security-color-m-08 {
-  color: var(--eve-security-color-m-08) !important;
-  fill: var(--eve-security-color-m-08);
+  color: $eve-security-color-m-08 !important;
+  fill: $eve-security-color-m-08;
 }
+
 .eve-security-color-m-09 {
-  color: var(--eve-security-color-m-09) !important;
-  fill: var(--eve-security-color-m-09);
+  color: $eve-security-color-m-09 !important;
+  fill: $eve-security-color-m-09;
 }
+
 .eve-security-color-m-10 {
-  color: var(--eve-security-color-m-10) !important;
-  fill: var(--eve-security-color-m-10);
+  color: $eve-security-color-m-10 !important;
+  fill: $eve-security-color-m-10;
 }
 
-/* Security backgrounds */
 .eve-security-background-10 {
-  background-color: var(--eve-security-color-10);
-  fill: var(--eve-security-color-10);
+  background-color: $eve-security-color-10;
+  fill: $eve-security-color-10;
 }
+
 .eve-security-background-09 {
-  background-color: var(--eve-security-color-09);
-  fill: var(--eve-security-color-09);
+  background-color: $eve-security-color-09;
+  fill: $eve-security-color-09;
 }
+
 .eve-security-background-08 {
-  background-color: var(--eve-security-color-08);
-  fill: var(--eve-security-color-08);
+  background-color: $eve-security-color-08;
+  fill: $eve-security-color-08;
 }
+
 .eve-security-background-07 {
-  background-color: var(--eve-security-color-07);
-  fill: var(--eve-security-color-07);
+  background-color: $eve-security-color-07;
+  fill: $eve-security-color-07;
 }
+
 .eve-security-background-06 {
-  background-color: var(--eve-security-color-06);
-  fill: var(--eve-security-color-06);
+  background-color: $eve-security-color-06;
+  fill: $eve-security-color-06;
 }
+
 .eve-security-background-05 {
-  background-color: var(--eve-security-color-05);
-  fill: var(--eve-security-color-05);
+  background-color: $eve-security-color-05;
+  fill: $eve-security-color-05;
 }
+
 .eve-security-background-04 {
-  background-color: var(--eve-security-color-04);
-  fill: var(--eve-security-color-04);
+  background-color: $eve-security-color-04;
+  fill: $eve-security-color-04;
 }
+
 .eve-security-background-03 {
-  background-color: var(--eve-security-color-03);
-  fill: var(--eve-security-color-03);
+  background-color: $eve-security-color-03;
+  fill: $eve-security-color-03;
 }
+
 .eve-security-background-02 {
-  background-color: var(--eve-security-color-02);
-  fill: var(--eve-security-color-02);
+  background-color: $eve-security-color-02;
+  fill: $eve-security-color-02;
 }
+
 .eve-security-background-01 {
-  background-color: var(--eve-security-color-01);
-  fill: var(--eve-security-color-01);
+  background-color: $eve-security-color-01;
+  fill: $eve-security-color-01;
 }
+
 .eve-security-background-00 {
-  background-color: var(--eve-security-color-00);
-  fill: var(--eve-security-color-00);
+  background-color: $eve-security-color-00;
+  fill: $eve-security-color-00;
 }
+
 .eve-security-background-m-01 {
-  background-color: var(--eve-security-color-m-01);
-  fill: var(--eve-security-color-m-01);
+  background-color: $eve-security-color-m-01;
+  fill: $eve-security-color-m-01;
 }
+
 .eve-security-background-m-02 {
-  background-color: var(--eve-security-color-m-02);
-  fill: var(--eve-security-color-m-02);
+  background-color: $eve-security-color-m-02;
+  fill: $eve-security-color-m-02;
 }
+
 .eve-security-background-m-03 {
-  background-color: var(--eve-security-color-m-03);
-  fill: var(--eve-security-color-m-03);
+  background-color: $eve-security-color-m-03;
+  fill: $eve-security-color-m-03;
 }
+
 .eve-security-background-m-04 {
-  background-color: var(--eve-security-color-m-04);
-  fill: var(--eve-security-color-m-04);
+  background-color: $eve-security-color-m-04;
+  fill: $eve-security-color-m-04;
 }
+
 .eve-security-background-m-05 {
-  background-color: var(--eve-security-color-m-05);
-  fill: var(--eve-security-color-m-05);
+  background-color: $eve-security-color-m-05;
+  fill: $eve-security-color-m-05;
 }
+
 .eve-security-background-m-06 {
-  background-color: var(--eve-security-color-m-06);
-  fill: var(--eve-security-color-m-06);
+  background-color: $eve-security-color-m-06;
+  fill: $eve-security-color-m-06;
 }
+
 .eve-security-background-m-07 {
-  background-color: var(--eve-security-color-m-07);
-  fill: var(--eve-security-color-m-07);
+  background-color: $eve-security-color-m-07;
+  fill: $eve-security-color-m-07;
 }
+
 .eve-security-background-m-08 {
-  background-color: var(--eve-security-color-m-08);
-  fill: var(--eve-security-color-m-08);
+  background-color: $eve-security-color-m-08;
+  fill: $eve-security-color-m-08;
 }
+
 .eve-security-background-m-09 {
-  background-color: var(--eve-security-color-m-09);
-  fill: var(--eve-security-color-m-09);
+  background-color: $eve-security-color-m-09;
+  fill: $eve-security-color-m-09;
 }
+
 .eve-security-background-m-10 {
-  background-color: var(--eve-security-color-m-10);
-  fill: var(--eve-security-color-m-10);
+  background-color: $eve-security-color-m-10;
+  fill: $eve-security-color-m-10;
 }
 
-/* WH Type color classes */
 .eve-wh-type-color-high {
-  color: var(--eve-wh-type-color-high) !important;
-  fill: var(--eve-wh-type-color-high);
+  color: $eve-wh-type-color-high;
+  fill: $eve-wh-type-color-high;
   font-weight: bold !important;
 }
+
 .eve-wh-type-color-low {
-  color: var(--eve-wh-type-color-low) !important;
-  fill: var(--eve-wh-type-color-low);
+  color: $eve-wh-type-color-low;
+  fill: $eve-wh-type-color-low;
   font-weight: bold !important;
 }
+
 .eve-wh-type-color-null {
-  color: var(--eve-wh-type-color-null) !important;
-  fill: var(--eve-wh-type-color-null);
+  color: $eve-wh-type-color-null;
+  fill: $eve-wh-type-color-null;
   font-weight: bold !important;
 }
+
 .eve-wh-type-color-c1 {
-  color: var(--eve-wh-type-color-c1) !important;
-  fill: var(--eve-wh-type-color-c1);
+  color: $eve-wh-type-color-c1 !important;
+  fill: $eve-wh-type-color-c1;
   font-weight: bold !important;
 }
+
 .eve-wh-type-color-c2 {
-  color: var(--eve-wh-type-color-c2) !important;
-  fill: var(--eve-wh-type-color-c2);
+  color: $eve-wh-type-color-c2 !important;
+  fill: $eve-wh-type-color-c2;
   font-weight: bold !important;
 }
+
 .eve-wh-type-color-c3 {
-  color: var(--eve-wh-type-color-c3) !important;
-  fill: var(--eve-wh-type-color-c3);
+  color: $eve-wh-type-color-c3 !important;
+  fill: $eve-wh-type-color-c3;
   font-weight: bold !important;
 }
+
 .eve-wh-type-color-c4 {
-  color: var(--eve-wh-type-color-c4) !important;
-  fill: var(--eve-wh-type-color-c4);
+  color: $eve-wh-type-color-c4 !important;
+  fill: $eve-wh-type-color-c4;
   font-weight: bold !important;
 }
+
 .eve-wh-type-color-c5 {
-  color: var(--eve-wh-type-color-c5) !important;
-  fill: var(--eve-wh-type-color-c5);
+  color: $eve-wh-type-color-c5 !important;
+  fill: $eve-wh-type-color-c5;
   font-weight: bold !important;
 }
+
 .eve-wh-type-color-c6 {
-  color: var(--eve-wh-type-color-c6) !important;
-  fill: var(--eve-wh-type-color-c6);
+  color: $eve-wh-type-color-c6 !important;
+  fill: $eve-wh-type-color-c6;
   font-weight: bold !important;
 }
+
 .eve-wh-type-color-c13 {
-  color: var(--eve-wh-type-color-c13) !important;
-  fill: var(--eve-wh-type-color-c13);
+  color: $eve-wh-type-color-c13 !important;
+  fill: $eve-wh-type-color-c13;
 }
+
 .eve-wh-type-color-drifter {
-  color: var(--eve-wh-type-color-drifter) !important;
-  fill: var(--eve-wh-type-color-drifter);
+  color: $eve-wh-type-color-drifter !important;
+  fill: $eve-wh-type-color-drifter;
 }
+
 .eve-wh-type-color-thera {
-  color: var(--eve-wh-type-color-thera) !important;
-  fill: var(--eve-wh-type-color-thera);
+  color: $eve-wh-type-color-thera !important;
+  fill: $eve-wh-type-color-thera;
 }
 
-/* WH Type backgrounds */
 .eve-wh-type-background-high {
-  background-color: var(--eve-wh-type-color-high);
-}
-.eve-wh-type-background-low {
-  background-color: var(--eve-wh-type-color-low);
-}
-.eve-wh-type-background-null {
-  background-color: var(--eve-wh-type-color-null);
-}
-.eve-wh-type-background-c1 {
-  background-color: var(--eve-wh-type-color-c1);
-}
-.eve-wh-type-background-c2 {
-  background-color: var(--eve-wh-type-color-c2);
-}
-.eve-wh-type-background-c3 {
-  background-color: var(--eve-wh-type-color-c3);
-}
-.eve-wh-type-background-c4 {
-  background-color: var(--eve-wh-type-color-c4);
-}
-.eve-wh-type-background-c5 {
-  background-color: var(--eve-wh-type-color-c5);
-}
-.eve-wh-type-background-c6 {
-  background-color: var(--eve-wh-type-color-c6);
-}
-.eve-wh-type-background-c13 {
-  background-color: var(--eve-wh-type-color-c13);
-}
-.eve-wh-type-background-drifter {
-  background-color: var(--eve-wh-type-color-drifter);
-}
-.eve-wh-type-background-thera {
-  background-color: var(--eve-wh-type-color-thera);
-}
-.eve-wh-type-background-zarzakh {
-  background-color: var(--eve-wh-type-color-zarzakh);
+  background-color: $eve-wh-type-color-high;
 }
 
-/* Kind color classes */
-.eve-kind-color-high {
-  color: var(--eve-wh-type-color-high);
-  fill: var(--eve-wh-type-color-high);
+.eve-wh-type-background-low {
+  background-color: $eve-wh-type-color-low;
 }
+
+.eve-wh-type-background-null {
+  background-color: $eve-wh-type-color-null;
+}
+
+.eve-wh-type-background-c1 {
+  background-color: $eve-wh-type-color-c1;
+}
+
+.eve-wh-type-background-c2 {
+  background-color: $eve-wh-type-color-c2;
+}
+
+.eve-wh-type-background-c3 {
+  background-color: $eve-wh-type-color-c3;
+}
+
+.eve-wh-type-background-c4 {
+  background-color: $eve-wh-type-color-c4;
+}
+
+.eve-wh-type-background-c5 {
+  background-color: $eve-wh-type-color-c5;
+}
+
+.eve-wh-type-background-c6 {
+  background-color: $eve-wh-type-color-c6;
+}
+
+.eve-wh-type-background-c13 {
+  background-color: $eve-wh-type-color-c13;
+}
+
+.eve-wh-type-background-drifter {
+  background-color: $eve-wh-type-color-drifter;
+}
+
+.eve-wh-type-background-thera {
+  background-color: $eve-wh-type-color-thera;
+}
+
+.eve-wh-type-background-zarzakh {
+  background-color: $eve-wh-type-color-zarzakh;
+}
+
+.eve-kind-color-high {
+  color: $eve-wh-type-color-high;
+  fill: $eve-wh-type-color-high;
+}
+
 .eve-kind-color-low {
-  color: var(--eve-wh-type-color-low);
-  fill: var(--eve-wh-type-color-low);
+  color: $eve-wh-type-color-low;
+  fill: $eve-wh-type-color-low;
   font-weight: bold;
 }
+
 .eve-kind-color-null {
-  color: var(--eve-wh-type-color-null);
-  fill: var(--eve-wh-type-color-null);
+  color: $eve-wh-type-color-null;
+  fill: $eve-wh-type-color-null;
 }
+
 .eve-kind-color-wh {
-  color: var(--eve-wh-type-color-c6);
-  fill: var(--eve-wh-type-color-c6);
+  color: $eve-wh-type-color-c6;
+  fill: $eve-wh-type-color-c6;
 }
+
 .eve-kind-color-thera {
-  color: var(--eve-wh-type-color-thera);
-  fill: var(--eve-wh-type-color-thera);
+  color: $eve-wh-type-color-thera;
+  fill: $eve-wh-type-color-thera;
 }
+
 .eve-kind-color-abyss {
-  color: var(--eve-wh-type-color-c6);
-  fill: var(--eve-wh-type-color-c6);
+  color: $eve-wh-type-color-c6;
+  fill: $eve-wh-type-color-c6;
 }
+
 .eve-kind-color-penalty {
-  color: var(--eve-wh-type-color-c6);
-  fill: var(--eve-wh-type-color-c6);
+  color: $eve-wh-type-color-c6;
+  fill: $eve-wh-type-color-c6;
 }
+
 .eve-kind-color-pochven {
-  color: var(--eve-wh-type-color-c6);
-  fill: var(--eve-wh-type-color-c6);
+  color: $eve-wh-type-color-c6;
+  fill: $eve-wh-type-color-c6;
 }
+
 .eve-kind-color-zarzakh {
-  color: var(--eve-wh-type-color-zarzakh);
-  fill: var(--eve-wh-type-color-zarzakh);
+  color: $eve-wh-type-color-zarzakh;
+  fill: $eve-wh-type-color-zarzakh;
 }
 
-/* Kind backgrounds */
 .eve-kind-background-high {
-  background-color: var(--eve-wh-type-color-high);
+  background-color: $eve-wh-type-color-high;
 }
+
 .eve-kind-background-low {
-  background-color: var(--eve-wh-type-color-low);
+  background-color: $eve-wh-type-color-low;
 }
+
 .eve-kind-background-null {
-  background-color: var(--eve-wh-type-color-null);
+  background-color: $eve-wh-type-color-null;
 }
+
 .eve-kind-background-wh {
-  background-color: var(--eve-wh-type-color-c6);
+  background-color: $eve-wh-type-color-c6;
 }
+
 .eve-kind-background-thera {
-  background-color: var(--eve-wh-type-color-thera);
+  background-color: $eve-wh-type-color-thera;
 }
+
 .eve-kind-background-abyss {
-  background-color: var(--eve-wh-type-color-c6);
+  background-color: $eve-wh-type-color-c6;
 }
+
 .eve-kind-background-penalty {
-  background-color: var(--eve-wh-type-color-c6);
+  background-color: $eve-wh-type-color-c6;
 }
+
 .eve-kind-background-pochven {
-  background-color: var(--eve-wh-type-color-c6);
+  background-color: $eve-wh-type-color-c6;
 }
+
 .eve-kind-background-zarzakh {
-  background-color: var(--eve-wh-type-color-zarzakh);
+  background-color: $eve-wh-type-color-zarzakh;
 }
 
-/* System status color classes */
 .eve-system-status-color-clear {
-  color: var(--eve-solar-system-status-color-unknown);
+  color: $eve-solar-system-status-color-unknown;
 }
+
 .eve-system-status-color-home {
-  color: var(--eve-solar-system-status-color-home);
+  color: $eve-solar-system-status-color-home;
 }
+
 .eve-system-status-color-friendly {
-  color: var(--eve-solar-system-status-color-friendly);
+  color: $eve-solar-system-status-color-friendly;
 }
+
 .eve-system-status-color-lookingFor {
-  color: var(--eve-solar-system-status-color-lookingFor);
+  color: $eve-solar-system-status-color-lookingFor;
 }
+
 .eve-system-status-color-warning {
-  color: var(--eve-solar-system-status-color-warning);
+  color: $eve-solar-system-status-color-warning;
 }
+
 .eve-system-status-color-target {
-  color: var(--eve-solar-system-status-color-target);
+  color: $eve-solar-system-status-color-target;
 }
+
 .eve-system-status-color-dangerous {
-  color: var(--eve-solar-system-status-color-dangerous);
-}
-
-.eve-system-status-clear {
-  background-color: var(--eve-solar-system-status-unknown);
-}
-.eve-system-status-home {
-  background-color: var(--eve-solar-system-status-home);
-}
-.eve-system-status-friendly {
-  background-color: var(--eve-solar-system-status-friendly);
-}
-.eve-system-status-lookingFor {
-  background-color: var(--eve-solar-system-status-lookingFor);
-}
-.eve-system-status-warning {
-  background-color: var(--eve-solar-system-status-warning);
-}
-.eve-system-status-target {
-  background-color: var(--eve-solar-system-status-target);
-}
-.eve-system-status-dangerous {
-  background-color: var(--eve-solar-system-status-dangerous);
-}
-
-.eve-system-status-clear {
-  background-color: var(--eve-solar-system-status-unknown);
-  color: var(--eve-solar-system-status-color-unknown);
-}
-
-.eve-system-status-home {
-  background-color: var(--eve-solar-system-status-home);
-  color: var(--eve-solar-system-status-color-home);
-}
-
-.eve-system-status-friendly {
-  background-color: var(--eve-solar-system-status-friendly);
-  color: var(--eve-solar-system-status-color-friendly);
-}
-
-.eve-system-status-lookingFor {
-  background-color: var(--eve-solar-system-status-lookingFor);
-  color: var(--eve-solar-system-status-color-lookingFor);
-}
-
-.eve-system-status-warning {
-  background-color: var(--eve-solar-system-status-warning);
-  color: var(--eve-solar-system-status-color-warning);
-}
-
-.eve-system-status-target {
-  background-color: var(--eve-solar-system-status-target);
-  color: var(--eve-solar-system-status-color-target);
-}
-
-.eve-system-status-dangerous {
-  background-color: var(--eve-solar-system-status-dangerous);
-  color: var(--eve-solar-system-status-color-dangerous);
+  color: $eve-solar-system-status-color-dangerous;
 }
 
 .wd-route-system-shape-triangle {
   clip-path: polygon(50% 0, 0 100%, 100% 100%);
 }
+
 .wd-route-system-shape-circle {
   border-radius: 40%;
 }
 
-/* Some additional background classes */
 .wd-marker-bookmark-color-shattered {
   background-color: #833ca4;
   margin-top: 1px;
 }
 
+
 .wd-marker-bookmark-color-custom {
   background-color: #282828;
   border: 1px solid #4c4c4c;
@@ -541,49 +572,3 @@
 .wd-marker-bookmark-color-danger {
   background-color: #d10600;
 }
-
-.react-flow {
-  color: var(--text-color);
-
-  &__pane {
-    cursor: auto;
-  }
-
-  &__minimap {
-    background-color: rgba(66, 66, 66, 1);
-    opacity: 0.7;
-    border: 1px solid #2f2f2f;
-    border-radius: 4px;
-    overflow: hidden;
-  }
-
-  &__minimap-mask {
-    fill: rgba(28, 28, 28, 0.75);
-  }
-
-  &__controls {
-    filter: brightness(1.5);
-  }
-
-  &__minimap-node {
-    fill: #ffb03a;
-  }
-}
-
-.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/index.scss

@@ -1,2 +0,0 @@
-@import './default-theme.scss'; 
-@import './pathfinder-theme.scss'; 

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

@@ -0,0 +1,74 @@
+$pastel-blue: #5a7d9a;
+$pastel-pink: #d291bc;
+$pastel-green: #88b04b;
+$pastel-yellow: #ffdd59;
+$dark-bg: #2d2d2d;
+$text-color: #ffffff;
+$tooltip-bg: #202020;
+
+.react-flow {
+  // background-color: $dark-bg;
+  color: $text-color;
+
+  &__node {
+    //cursor: auto;
+  }
+
+  &__pane {
+    cursor: auto;
+  }
+  //&__edge {
+  //  stroke: $pastel-pink;
+  //  stroke-width: 2px;
+  //
+  //  &.selected {
+  //    stroke: $pastel-yellow;
+  //  }
+  //}
+
+  &__handle {
+    //background-color: $pastel-green;
+    //box-shadow: 0 0 5px rgba($pastel-green, 0.5);
+  }
+
+  &__minimap {
+    background-color: rgba(66, 66, 66, 1);
+    opacity: 0.7;
+    //backdrop-filter: blur(5px);
+    border: 1px solid #2f2f2f;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  &__minimap-mask {
+    fill: rgba(28, 28, 28, 0.75);
+  }
+
+  &__controls {
+    filter: brightness(1.5);
+  }
+
+  &__minimap-node {
+    fill: #ffb03a;
+  }
+}
+
+.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/neon-variables.scss

@@ -0,0 +1,7 @@
+$pastel-blue: #5a7d9a;
+$pastel-pink: #d291bc;
+$pastel-green: #88b04b;
+$pastel-yellow: #ffdd59;
+$dark-bg: #2d2d2d;
+$text-color: #ffffff;
+$tooltip-bg: #202020;

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

@@ -1,54 +0,0 @@
-@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-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);
-  --rf-bg-variant: "lines";
-  --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;
-  --eve-effect-blackHole: #000000;
-  --eve-effect-cataclysmicVariable: #ffffbb;
-  --eve-effect-redGiant: #d9534f;
-
-  --eve-wh-type-color-high: #5cb85c;
-  --eve-wh-type-color-low: #e28a0d;
-  --eve-wh-type-color-null: #d9534f;
-  --eve-wh-type-color-c1: #428bca;
-  --eve-wh-type-color-c2: #428bca;
-  --eve-wh-type-color-c3: #e28a0d;
-  --eve-wh-type-color-c4: #e28a0d;
-  --eve-wh-type-color-c5: #d9534f;
-  --eve-wh-type-color-c6: #d9534f;
-  --eve-wh-type-color-c13: #7986cb;
-  --eve-wh-type-color-drifter: #44aa82;
-
-  --rf-node-local-counter: #5cb85c;
-  --rf-has-user-characters: #ffc75d;
-
-  --eve-solar-system-status-home:                #{$homeAlpha};
-  --eve-solar-system-status-color-home:          #{$homeBase};
-}

assets/js/hooks/Mapper/components/map/utils/changes.ts

@@ -1,174 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { EdgeChange, NodeChange, Node, Edge } from 'reactflow';
-
-// This function applies changes to nodes or edges that are triggered by React Flow internally.
-// When you drag a node for example, React Flow will send a position change update.
-// This function then applies the changes and returns the updated elements.
-function applyChanges(changes: any[], elements: any[]): any[] {
-  // we need this hack to handle the setNodes and setEdges function of the useReactFlow hook for controlled flows
-  if (changes.some(c => c.type === 'reset')) {
-    return changes.filter(c => c.type === 'reset').map(c => c.item);
-  }
-
-  const updatedElements: any[] = [];
-  // By storing a map of changes for each element, we can a quick lookup as we
-  // iterate over the elements array!
-  const changesMap = new Map<any, any[]>();
-  const addItemChanges: any[] = [];
-
-  for (const change of changes) {
-    if (change.type === 'add') {
-      addItemChanges.push(change);
-      continue;
-    } else if (change.type === 'remove' || change.type === 'replace') {
-      // For a 'remove' change we can safely ignore any other changes queued for
-      // the same element, it's going to be removed anyway!
-      changesMap.set(change.id, [change]);
-    } else {
-      const elementChanges = changesMap.get(change.id);
-
-      if (elementChanges) {
-        // If we have some changes queued already, we can do a mutable update of
-        // that array and save ourselves some copying.
-        elementChanges.push(change);
-      } else {
-        changesMap.set(change.id, [change]);
-      }
-    }
-  }
-
-  for (const element of elements) {
-    const changes = changesMap.get(element.id);
-
-    // When there are no changes for an element we can just push it unmodified,
-    // no need to copy it.
-    if (!changes) {
-      updatedElements.push(element);
-      continue;
-    }
-
-    // If we have a 'remove' change queued, it'll be the only change in the array
-    if (changes[0].type === 'remove') {
-      continue;
-    }
-
-    if (changes[0].type === 'replace') {
-      updatedElements.push({ ...changes[0].item });
-      continue;
-    }
-
-    // For other types of changes, we want to start with a shallow copy of the
-    // object so React knows this element has changed. Sequential changes will
-    /// each _mutate_ this object, so there's only ever one copy.
-    const updatedElement = { ...element };
-
-    for (const change of changes) {
-      applyChange(change, updatedElement);
-    }
-
-    updatedElements.push(updatedElement);
-  }
-
-  // we need to wait for all changes to be applied before adding new items
-  // to be able to add them at the correct index
-  if (addItemChanges.length) {
-    addItemChanges.forEach(change => {
-      if (change.index !== undefined) {
-        updatedElements.splice(change.index, 0, { ...change.item });
-      } else {
-        updatedElements.push({ ...change.item });
-      }
-    });
-  }
-
-  return updatedElements;
-}
-
-// Applies a single change to an element. This is a *mutable* update.
-function applyChange(change: any, element: any): any {
-  switch (change.type) {
-    case 'select': {
-      element.selected = change.selected;
-      break;
-    }
-
-    case 'position': {
-      if (typeof change.position !== 'undefined') {
-        element.position = change.position;
-      }
-
-      if (typeof change.dragging !== 'undefined') {
-        element.dragging = change.dragging;
-      }
-
-      break;
-    }
-
-    case 'dimensions': {
-      if (typeof change.dimensions !== 'undefined') {
-        element.measured ??= {};
-        element.measured.width = change.dimensions.width;
-        element.measured.height = change.dimensions.height;
-
-        if (change.setAttributes) {
-          element.width = change.dimensions.width;
-          element.height = change.dimensions.height;
-        }
-      }
-
-      if (typeof change.resizing === 'boolean') {
-        element.resizing = change.resizing;
-      }
-
-      break;
-    }
-  }
-}
-
-/**
- * Drop in function that applies node changes to an array of nodes.
- * @public
- * @remarks Various events on the <ReactFlow /> component can produce an {@link NodeChange} that describes how to update the edges of your flow in some way.
- If you don't need any custom behaviour, this util can be used to take an array of these changes and apply them to your edges.
- * @param changes - Array of changes to apply
- * @param nodes - Array of nodes to apply the changes to
- * @returns Array of updated nodes
- * @example
- *  const onNodesChange = useCallback(
-      (changes) => {
-        setNodes((oldNodes) => applyNodeChanges(changes, oldNodes));
-      },
-      [setNodes],
-    );
-
-    return (
-      <ReactFLow nodes={nodes} edges={edges} onNodesChange={onNodesChange} />
-    );
- */
-export function applyNodeChanges<NodeType extends Node = Node>(changes: NodeChange[], nodes: NodeType[]): NodeType[] {
-  return applyChanges(changes, nodes) as NodeType[];
-}
-
-/**
- * Drop in function that applies edge changes to an array of edges.
- * @public
- * @remarks Various events on the <ReactFlow /> component can produce an {@link EdgeChange} that describes how to update the edges of your flow in some way.
- If you don't need any custom behaviour, this util can be used to take an array of these changes and apply them to your edges.
- * @param changes - Array of changes to apply
- * @param edges - Array of edge to apply the changes to
- * @returns Array of updated edges
- * @example
- *  const onEdgesChange = useCallback(
-      (changes) => {
-        setEdges((oldEdges) => applyEdgeChanges(changes, oldEdges));
-      },
-      [setEdges],
-    );
-
-    return (
-      <ReactFlow nodes={nodes} edges={edges} onEdgesChange={onEdgesChange} />
-    );
- */
-export function applyEdgeChanges<EdgeType extends Edge = Edge>(changes: EdgeChange[], edges: EdgeType[]): EdgeType[] {
-  return applyChanges(changes, edges) as EdgeType[];
-}

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

@@ -1,30 +1,77 @@
-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';
+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) {
+    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;
+};
 
 export const MapInterface = () => {
-  // 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]);
+  const [items, setItems] = useState<WidgetGridItem[]>(restoreWindowsFromLS());
 
   return (
-    <WindowManager
-      windows={items}
-      viewPort={windowsSettings.viewPort}
-      dragSelector=".react-grid-dragHandleExample"
-      onChange={updateWidgetSettings}
+    <WidgetsGrid
+      items={items}
+      onChange={x => {
+        saveWindowsToLS(x);
+        setItems(x);
+      }}
     />
   );
 };

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

@@ -1,10 +0,0 @@
-.SearchItem {
-  & > * {
-    font-size: 13px !important;
-  }
-}
-
-.SearchItemEffect {
-  font-weight: initial !important;
-}
-

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

@@ -1,203 +0,0 @@
-import { Dialog } from 'primereact/dialog';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { useCallback, useRef, useState } from 'react';
-import { Button } from 'primereact/button';
-import { IconField } from 'primereact/iconfield';
-import { AutoComplete } from 'primereact/autocomplete';
-import { OutCommand, SearchSystemItem } from '@/hooks/Mapper/types';
-import { SystemViewStandalone, WHClassView, WHEffectView } from '@/hooks/Mapper/components/ui-kit';
-import classes from './AddSystemDialog.module.scss';
-
-import clsx from 'clsx';
-import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace.ts';
-import { sortWHClasses } from '@/hooks/Mapper/helpers';
-
-export type SearchOnSubmitCallback = (item: SearchSystemItem) => void;
-
-interface AddSystemDialogProps {
-  title?: string;
-  visible: boolean;
-  setVisible: (visible: boolean) => void;
-  onSubmit?: SearchOnSubmitCallback;
-  excludedSystems?: number[];
-}
-
-export const AddSystemDialog = ({
-  title = 'Add system',
-  visible,
-  setVisible,
-  onSubmit,
-  excludedSystems = [],
-}: AddSystemDialogProps) => {
-  const {
-    outCommand,
-    data: { wormholesData },
-  } = useMapRootState();
-
-  const inputRef = useRef<any>();
-  const onShow = useCallback(() => {
-    inputRef.current?.focus();
-  }, []);
-
-  const [filteredItems, setFilteredItems] = useState<SearchSystemItem[]>([]);
-  const [selectedItem, setSelectedItem] = useState<SearchSystemItem[] | null>(null);
-
-  const searchItems = useCallback(
-    async (event: { query: string }) => {
-      if (event.query.length < 2) {
-        setFilteredItems([]);
-        return;
-      }
-
-      const query = event.query;
-
-      if (query.length === 0) {
-        setFilteredItems([]);
-      } else {
-        try {
-          const result = await outCommand({
-            type: OutCommand.searchSystems,
-            data: {
-              text: query,
-            },
-          });
-
-          let prepared = (result.systems as SearchSystemItem[]).sort((a, b) => {
-            const amatch = a.label.indexOf(query);
-            const bmatch = b.label.indexOf(query);
-            return amatch - bmatch;
-          });
-
-          if (excludedSystems) {
-            prepared = prepared.filter(x => !excludedSystems.includes(x.system_static_info.solar_system_id));
-          }
-
-          setFilteredItems(prepared);
-        } catch (error) {
-          console.error('Error fetching data:', error);
-          setFilteredItems([]);
-        }
-      }
-    },
-    [excludedSystems, outCommand],
-  );
-
-  const ref = useRef({ onSubmit, selectedItem });
-  ref.current = { onSubmit, selectedItem };
-
-  const handleSubmit = useCallback(() => {
-    const { onSubmit, selectedItem } = ref.current;
-    setFilteredItems([]);
-    setSelectedItem([]);
-
-    if (!selectedItem) {
-      setVisible(false);
-      return;
-    }
-
-    onSubmit?.(selectedItem[0]);
-    setVisible(false);
-  }, [setVisible]);
-
-  return (
-    <Dialog
-      header={title}
-      visible={visible}
-      draggable={false}
-      style={{ width: '520px' }}
-      onShow={onShow}
-      onHide={() => {
-        if (!visible) {
-          return;
-        }
-
-        setVisible(false);
-      }}
-    >
-      <div className="flex flex-col gap-3 px-1.5">
-        <div className="flex flex-col gap-2 py-3.5">
-          <div className="flex flex-col gap-1">
-            <IconField>
-              <AutoComplete
-                ref={inputRef}
-                multiple
-                showEmptyMessage
-                scrollHeight="300px"
-                value={selectedItem}
-                suggestions={filteredItems}
-                completeMethod={searchItems}
-                onChange={e => {
-                  setSelectedItem(e.value.length < 2 ? e.value : [e.value[e.value.length - 1]]);
-                }}
-                emptyMessage="Not found any system..."
-                placeholder="Type here..."
-                field="label"
-                id="value"
-                className="w-full"
-                itemTemplate={(item: SearchSystemItem) => {
-                  const { security, system_class, effect_power, effect_name, statics } = item.system_static_info;
-                  const sortedStatics = sortWHClasses(wormholesData, statics);
-                  const isWH = isWormholeSpace(system_class);
-
-                  return (
-                    <div className={clsx('flex gap-1.5', classes.SearchItem)}>
-                      <SystemViewStandalone
-                        security={security}
-                        system_class={system_class}
-                        solar_system_id={item.value}
-                        class_title={item.class_title}
-                        solar_system_name={item.label}
-                        region_name={item.region_name}
-                      />
-
-                      {effect_name && isWH && (
-                        <WHEffectView
-                          effectName={effect_name}
-                          effectPower={effect_power}
-                          className={classes.SearchItemEffect}
-                        />
-                      )}
-
-                      {isWH && (
-                        <div className="flex gap-1 grow justify-between">
-                          <div></div>
-                          <div className="flex gap-1">
-                            {sortedStatics.map(x => (
-                              <WHClassView key={x} whClassName={x} />
-                            ))}
-                          </div>
-                        </div>
-                      )}
-                    </div>
-                  );
-                }}
-                selectedItemTemplate={(item: SearchSystemItem) => (
-                  <SystemViewStandalone
-                    security={item.system_static_info.security}
-                    system_class={item.system_static_info.system_class}
-                    solar_system_id={item.value}
-                    class_title={item.class_title}
-                    solar_system_name={item.label}
-                    region_name={item.region_name}
-                  />
-                )}
-              />
-            </IconField>
-
-            <span className="text-[12px] text-stone-400 ml-1">*to search type at least 2 symbols.</span>
-          </div>
-        </div>
-
-        <div className="flex gap-2 justify-end">
-          <Button
-            onClick={handleSubmit}
-            outlined
-            disabled={!selectedItem || selectedItem.length !== 1}
-            size="small"
-            label="Submit"
-          />
-        </div>
-      </div>
-    </Dialog>
-  );
-};

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

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

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useRef } from 'react';
 import { Dialog } from 'primereact/dialog';
 
 import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
@@ -6,23 +6,17 @@ import { SystemSignature } from '@/hooks/Mapper/types';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { CommandLinkSignatureToSystem } from '@/hooks/Mapper/types';
 import { SystemSignaturesContent } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent';
-import { SHOW_DESCRIPTION_COLUMN_SETTING } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatures';
 import {
   Setting,
   COSMIC_SIGNATURE,
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog';
-import { SignatureGroup } from '@/hooks/Mapper/types';
 
 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 },
-];
+const signatureSettings: Setting[] = [{ key: COSMIC_SIGNATURE, name: 'Show Cosmic Signatures', value: true }];
 
 export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignatureDialogProps) => {
   const { outCommand } = useMapRootState();
@@ -58,14 +52,13 @@ export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignat
     <Dialog
       header="Select signature to link"
       visible
-      draggable={true}
+      draggable={false}
       style={{ width: '500px' }}
       onHide={handleHide}
       contentClassName="!p-0"
     >
       <SystemSignaturesContent
         systemId={`${data.solar_system_source}`}
-        hideLinkedSignatures
         settings={signatureSettings}
         onSelect={handleSelect}
         selectable={true}

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

@@ -3,7 +3,6 @@ import { InputTextarea } from 'primereact/inputtextarea';
 import { Dialog } from 'primereact/dialog';
 import { getSystemById } from '@/hooks/Mapper/helpers';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Button } from 'primereact/button';
 import { OutCommand } from '@/hooks/Mapper/types';
@@ -23,21 +22,30 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
     outCommand,
   } = useMapRootState();
 
-  const isTempSystemNameEnabled = useMapGetOption('show_temp_system_name') === 'true';
-
   const system = getSystemById(systems, systemId);
 
   const [name, setName] = useState('');
   const [label, setLabel] = useState('');
-  const [temporaryName, setTemporaryName] = useState('');
   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 };
+  useEffect(() => {
+    if (!system) {
+      return;
+    }
+
+    const labels = new LabelsManager(system.labels || '');
+
+    setName(system.name || '');
+    setLabel(labels.customLabel);
+    setDescription(system.description || '');
+  }, [system]);
+
+  const ref = useRef({ name, description, label, outCommand, systemId, system });
+  ref.current = { name, description, label, outCommand, systemId, system };
 
   const handleSave = useCallback(() => {
-    const { name, description, label, temporaryName, outCommand, systemId, system } = ref.current;
+    const { name, description, label, outCommand, systemId, system } = ref.current;
 
     const outLabel = new LabelsManager(system?.labels ?? '');
     outLabel.updateCustomLabel(label);
@@ -50,14 +58,6 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
       },
     });
 
-    outCommand({
-      type: OutCommand.updateSystemTemporaryName,
-      data: {
-        system_id: systemId,
-        value: temporaryName,
-      },
-    });
-
     outCommand({
       type: OutCommand.updateSystemName,
       data: {
@@ -93,21 +93,6 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
     e.target.value = e.target.value.toUpperCase().replace(/[^A-Z0-9\-[\](){}]/g, '');
   }, []);
 
-  // Attention: this effect should be call only on mount.
-  useEffect(() => {
-    const { system } = ref.current;
-    if (!system) {
-      return;
-    }
-
-    const labels = new LabelsManager(system.labels || '');
-
-    setName(system.name || '');
-    setLabel(labels.customLabel);
-    setTemporaryName(system.temporary_name || '');
-    setDescription(system.description || '');
-  }, []);
-
   return (
     <Dialog
       header="System settings"
@@ -182,35 +167,6 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
               </IconField>
             </div>
 
-            {isTempSystemNameEnabled && (
-              <div className="flex flex-col gap-1">
-                <label htmlFor="username">Temporary Name</label>
-
-                <IconField>
-                  {temporaryName !== '' && (
-                    <WdImgButton
-                      className="pi pi-trash text-red-400"
-                      textSize={WdImageSize.large}
-                      tooltip={{
-                        content: 'Remove temporary name',
-                        className: 'pi p-input-icon',
-                        position: TooltipPosition.top,
-                      }}
-                      onClick={() => setTemporaryName('')}
-                    />
-                  )}
-                  <InputText
-                    id="temporaryName"
-                    aria-describedby="temporaryName"
-                    autoComplete="off"
-                    value={temporaryName}
-                    maxLength={10}
-                    onChange={e => setTemporaryName(e.target.value)}
-                  />
-                </IconField>
-              </div>
-            )}
-
             <div className="flex flex-col gap-1">
               <label htmlFor="username">Description</label>
               <InputTextarea

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

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

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

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

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

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

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

@@ -1,105 +0,0 @@
-import { WindowProps } from '@/hooks/Mapper/components/ui-kit/WindowManager/types.ts';
-import {
-  LocalCharacters,
-  RoutesWidget,
-  SystemInfo,
-  SystemSignatures,
-  SystemStructures,
-  SystemKills,
-} from '@/hooks/Mapper/components/mapInterface/widgets';
-
-export const CURRENT_WINDOWS_VERSION = 8;
-export const WINDOWS_LOCAL_STORE_KEY = 'windows:settings:v2';
-
-export enum WidgetsIds {
-  info = 'info',
-  signatures = 'signatures',
-  local = 'local',
-  routes = 'routes',
-  structures = 'structures',
-  kills = 'kills',
-}
-
-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: () => <SystemKills />,
-  },
-];
-
-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',
-  },
-];

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

@@ -1,3 +1,13 @@
 .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,71 +1,111 @@
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-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';
-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 { 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';
+
+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,
+};
 
 export const LocalCharacters = () => {
   const {
-    data: { characters, userCharacters, selectedSystems },
+    data: { characters, userCharacters, selectedSystems, presentCharacters },
   } = useMapRootState();
 
-  const [settings, setSettings] = useLocalCharacterWidgetSettings();
+  const [settings, setSettings] = useLocalStorageState<WindowLocalSettingsType>('window:local:settings', {
+    defaultValue: STORED_DEFAULT_VALUES,
+  });
+
   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 filtered = characters
+    const sorted = characters
       .filter(x => x.location?.solar_system_id?.toString() === systemId)
-      .map(x => ({
-        ...x,
-        isOwn: userCharacters.includes(x.eve_id),
-        compact: settings.compact,
-        showShipName: settings.showShipName,
-      }))
+      .map(x => ({ ...x, isOwn: userCharacters.includes(x.eve_id), compact: settings.compact }))
       .sort(sortCharacters);
 
-    if (!showOffline || !settings.showOffline) {
-      return filtered.filter(c => c.online);
+    if (!settings.showOffline) {
+      return sorted.filter(c => c.online);
     }
-    return filtered;
-  }, [
-    characters,
-    systemId,
-    userCharacters,
-    settings.compact,
-    settings.showOffline,
-    settings.showShipName,
-    showOffline,
-  ]);
+
+    return sorted;
+    // eslint-disable-next-line
+  }, [characters, settings.showOffline, settings.compact, systemId, userCharacters, presentCharacters]);
 
   const isNobodyHere = sorted.length === 0;
   const isNotSelectedSystem = selectedSystems.length !== 1;
   const showList = sorted.length > 0 && selectedSystems.length === 1;
 
-  const itemTemplate = useLocalCharactersItemTemplate(settings.showShipName);
-
   return (
     <Widget
       label={
-        <LocalCharactersHeader
-          sortedCount={sorted.length}
-          showList={showList}
-          showOffline={showOffline}
-          settings={settings}
-          setSettings={setSettings}
-        />
+        <div className="flex justify-between items-center text-xs w-full">
+          <span className="select-none">Local{showList ? ` [${sorted.length}]` : ''}</span>
+          <LayoutEventBlocker className="flex items-center gap-2">
+            <WdCheckbox
+              size="xs"
+              labelSide="left"
+              label={'Show offline'}
+              value={settings.showOffline}
+              classNameLabel="text-stone-400 hover:text-stone-200 transition duration-300"
+              onChange={() => setSettings(() => ({ ...settings, showOffline: !settings.showOffline }))}
+            />
+
+            <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>
       }
     >
       {isNotSelectedSystem && (
@@ -73,20 +113,21 @@ 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>
+        <div className="w-full h-full flex justify-center items-center select-none text-stone-400/80 text-sm">Nobody here</div>
       )}
+
       {showList && (
-        <LocalCharactersList
+        <VirtualScroller
           items={sorted}
           itemSize={settings.compact ? 26 : 41}
           itemTemplate={itemTemplate}
-          containerClassName={clsx(
-            'w-full h-full overflow-x-hidden overflow-y-auto custom-scrollbar select-none',
+          className={clsx(
             classes.VirtualScroller,
+            'w-full h-full overflow-x-hidden overflow-y-auto custom-scrollbar select-none',
           )}
+          autoSize={false}
         />
       )}
     </Widget>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesList/RoutesList.module.scss

@@ -8,6 +8,7 @@
 .RouteSystem {
   width: 8px;
   height: 8px;
+  background: #ffffff;
 
   cursor: pointer;
   transition: opacity 200ms;

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

@@ -1,11 +1,11 @@
 import classes from './RoutesList.module.scss';
 import { Route, SystemStaticInfoShort } from '@/hooks/Mapper/types/routes.ts';
 import clsx from 'clsx';
-import { SystemViewStandalone, TooltipPosition, WdTooltip, WdTooltipHandlers } from '@/hooks/Mapper/components/ui-kit';
+import { SystemViewStandalone, WdTooltip, WdTooltipHandlers } from '@/hooks/Mapper/components/ui-kit';
 import { getBackgroundClass, getShapeClass } from '@/hooks/Mapper/components/map/helpers';
 import { MouseEvent, useCallback, useRef, useState } from 'react';
 import { Commands } from '@/hooks/Mapper/types';
-import { emitMapEvent } from '@/hooks/Mapper/events';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 
 export type RouteSystemProps = {
   destination: number;
@@ -46,11 +46,9 @@ export const RouteSystem = ({
     <>
       <WdTooltip
         ref={tooltipRef}
-        position={TooltipPosition.top}
         // targetSelector={`.tooltip-route-sys_${destination}_${solar_system_id}`}
         content={() => (
           <SystemViewStandalone
-            className="mx-[4px]"
             security={security}
             system_class={system_class}
             class_title={class_title}
@@ -65,8 +63,8 @@ export const RouteSystem = ({
           tooltipRef.current?.show(e);
           onMouseEnter?.(solar_system_id);
         }}
-        onMouseLeave={() => {
-          tooltipRef.current?.hide();
+        onMouseLeave={e => {
+          tooltipRef.current?.hide(e);
           onMouseLeave?.();
         }}
         onContextMenu={handleContext}
@@ -90,10 +88,11 @@ export interface RoutesListProps {
 
 export const RoutesList = ({ data, onContextMenu }: RoutesListProps) => {
   const [selected, setSelected] = useState<number | null>(null);
+  const { mapRef } = useMapRootState();
 
   const handleClick = useCallback(
-    (systemId: number) => emitMapEvent({ name: Commands.centerSystem, data: systemId?.toString() }),
-    [],
+    (systemId: number) => mapRef.current?.command(Commands.centerSystem, systemId.toString()),
+    [mapRef],
   );
 
   if (!data.has_connection) {

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

@@ -1,11 +1,12 @@
 import { Dialog } from 'primereact/dialog';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Button } from 'primereact/button';
+import { WdCheckbox } from '@/hooks/Mapper/components/ui-kit';
 import {
   RoutesType,
   useRouteProvider,
 } from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesProvider.tsx';
-import { PrettySwitchbox } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/components';
+import { CheckboxChangeEvent } from 'primereact/checkbox';
 
 interface RoutesSettingsDialog {
   visible: boolean;
@@ -37,8 +38,8 @@ export const RoutesSettingsDialog = ({ visible, setVisible }: RoutesSettingsDial
   currentData.current = data;
 
   const handleChangeEvent = useCallback(
-    (propName: keyof RoutesType) => (event: boolean) => {
-      optionsRef.current = { ...optionsRef.current, [propName]: event };
+    (propName: keyof RoutesType) => (event: CheckboxChangeEvent) => {
+      optionsRef.current = { ...optionsRef.current, [propName]: event.checked };
       updateKey(x => x + 1);
     },
     [],
@@ -70,14 +71,14 @@ export const RoutesSettingsDialog = ({ visible, setVisible }: RoutesSettingsDial
         setVisible(false);
       }}
     >
-      <div className="flex flex-col gap-3 p-2.5">
-        <div className="flex flex-col gap-2 mb-2">
+      <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-2">
           {checkboxes.map(({ label, propName }) => (
-            <PrettySwitchbox
+            <WdCheckbox
               key={propName}
               label={label}
-              checked={optionsRef.current[propName]}
-              setChecked={handleChangeEvent(propName)}
+              value={optionsRef.current[propName]}
+              onChange={handleChangeEvent(propName)}
             />
           ))}
         </div>

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

@@ -19,13 +19,6 @@ import { PrimeIcons } from 'primereact/api';
 import { RoutesSettingsDialog } from './RoutesSettingsDialog';
 import { RoutesProvider, useRouteProvider } from './RoutesProvider.tsx';
 import { ContextMenuSystemInfo, useContextMenuSystemInfoHandlers } from '@/hooks/Mapper/components/contexts';
-import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
-import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
-import {
-  AddSystemDialog,
-  SearchOnSubmitCallback,
-} from '@/hooks/Mapper/components/mapInterface/components/AddSystemDialog';
-import { OutCommand } from '@/hooks/Mapper/types';
 
 const sortByDist = (a: Route, b: Route) => {
   const distA = a.has_connection ? a.systems?.length || 0 : Infinity;
@@ -37,6 +30,7 @@ const sortByDist = (a: Route, b: Route) => {
 export const RoutesWidgetContent = () => {
   const {
     data: { selectedSystems, hubs = [], systems, routes },
+    mapRef,
     outCommand,
   } = useMapRootState();
 
@@ -48,6 +42,7 @@ export const RoutesWidgetContent = () => {
   const { open, ...systemCtxProps } = useContextMenuSystemInfoHandlers({
     outCommand,
     hubs,
+    mapRef,
   });
 
   const preparedHubs = useMemo(() => {
@@ -168,12 +163,6 @@ export const RoutesWidgetContent = () => {
 export const RoutesWidgetComp = () => {
   const [routeSettingsVisible, setRouteSettingsVisible] = useState(false);
   const { data, update } = useRouteProvider();
-  const {
-    data: { hubs = [] },
-    outCommand,
-  } = useMapRootState();
-
-  const preparedHubs = useMemo(() => hubs.map(x => parseInt(x)), [hubs]);
 
   const isSecure = data.path_type === 'secure';
   const handleSecureChange = useCallback(() => {
@@ -183,70 +172,27 @@ export const RoutesWidgetComp = () => {
     });
   }, [data, update]);
 
-  const ref = useRef<HTMLDivElement>(null);
-  const compact = useMaxWidth(ref, 170);
-  const [openAddSystem, setOpenAddSystem] = useState<boolean>(false);
-
-  const onAddSystem = useCallback(() => setOpenAddSystem(true), []);
-
-  const handleSubmitAddSystem: SearchOnSubmitCallback = useCallback(
-    async item => {
-      if (preparedHubs.includes(item.value)) {
-        return;
-      }
-
-      await outCommand({
-        type: OutCommand.addHub,
-        data: { system_id: item.value },
-      });
-    },
-    [hubs, outCommand],
-  );
-
   return (
     <Widget
       label={
-        <div className="flex justify-between items-center text-xs w-full" ref={ref}>
+        <div className="flex justify-between items-center text-xs w-full">
           <span className="select-none">Routes</span>
           <LayoutEventBlocker className="flex items-center gap-2">
-            <WdImgButton
-              className={PrimeIcons.PLUS_CIRCLE}
-              onClick={onAddSystem}
-              tooltip={{
-                content: 'Click here to add new system to routes',
-              }}
-            />
-
-            <WdTooltipWrapper content="Show shortest route" position={TooltipPosition.top}>
-              <WdCheckbox
-                size="xs"
-                labelSide="left"
-                label={compact ? '' : 'Show shortest'}
-                value={!isSecure}
-                onChange={handleSecureChange}
-                classNameLabel="text-red-400 whitespace-nowrap"
-              />
-            </WdTooltipWrapper>
-            <WdImgButton
-              className={PrimeIcons.SLIDERS_H}
-              onClick={() => setRouteSettingsVisible(true)}
-              tooltip={{
-                content: 'Click here to open Routes settings',
-              }}
+            <WdCheckbox
+              size="xs"
+              labelSide="left"
+              label={'Show shortest'}
+              value={!isSecure}
+              onChange={handleSecureChange}
+              classNameLabel={clsx('text-red-400')}
             />
+            <WdImgButton className={PrimeIcons.SLIDERS_H} onClick={() => setRouteSettingsVisible(true)} />
           </LayoutEventBlocker>
         </div>
       }
     >
       <RoutesWidgetContent />
       <RoutesSettingsDialog visible={routeSettingsVisible} setVisible={setRouteSettingsVisible} />
-
-      <AddSystemDialog
-        title="Add system to routes"
-        visible={openAddSystem}
-        setVisible={() => setOpenAddSystem(false)}
-        onSubmit={handleSubmitAddSystem}
-      />
     </Widget>
   );
 };

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

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

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

@@ -1,14 +0,0 @@
-.wrapper {
-  overflow-x: hidden;
-  box-sizing: border-box;
-}
-
-.scrollerContent {
-  width: 100%;
-  box-sizing: border-box;
-  overflow-x: hidden;
-}
-
-.VirtualScroller {
-  height: 100% !important;
-}

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

@@ -1,91 +0,0 @@
-import React, { useMemo, useRef, useEffect, useState } from 'react';
-import clsx from 'clsx';
-import { DetailedKill } from '@/hooks/Mapper/types/kills';
-import { VirtualScroller } from 'primereact/virtualscroller';
-import { useSystemKillsItemTemplate } from '../hooks/useSystemKillsItemTemplate';
-import classes from './SystemKillsContent.module.scss';
-
-export const ITEM_HEIGHT = 35;
-export const CONTENT_MARGINS = 5;
-
-export interface SystemKillsContentProps {
-  kills: DetailedKill[];
-  systemNameMap: Record<string, string>;
-  onlyOneSystem?: boolean;
-  autoSize?: boolean;
-  timeRange?: number;
-  limit?: number;
-}
-
-export const SystemKillsContent: React.FC<SystemKillsContentProps> = ({
-  kills,
-  systemNameMap,
-  onlyOneSystem = false,
-  autoSize = false,
-  timeRange = 4,
-  limit,
-}) => {
-  const processedKills = useMemo(() => {
-    const sortedKills = kills
-      .filter(k => k.kill_time)
-      .sort((a, b) => new Date(b.kill_time!).getTime() - new Date(a.kill_time!).getTime());
-
-    if (limit !== undefined) {
-      return sortedKills.slice(0, limit);
-    } else {
-      const now = Date.now();
-      const cutoff = now - timeRange * 60 * 60 * 1000;
-      return sortedKills.filter(k => new Date(k.kill_time!).getTime() >= cutoff);
-    }
-  }, [kills, timeRange, limit]);
-
-  const computedHeight = autoSize ? Math.max(processedKills.length, 1) * ITEM_HEIGHT + CONTENT_MARGINS : undefined;
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const scrollerRef = useRef<VirtualScroller | null>(null);
-  const [containerHeight, setContainerHeight] = useState<number>(0);
-
-  useEffect(() => {
-    if (!autoSize && containerRef.current) {
-      const measure = () => {
-        const newHeight = containerRef.current?.clientHeight || 0;
-        setContainerHeight(newHeight);
-      };
-
-      measure();
-      const observer = new ResizeObserver(measure);
-      observer.observe(containerRef.current);
-      window.addEventListener('resize', measure);
-
-      return () => {
-        observer.disconnect();
-        window.removeEventListener('resize', measure);
-      };
-    }
-  }, [autoSize]);
-
-  const itemTemplate = useSystemKillsItemTemplate(systemNameMap, onlyOneSystem);
-  const scrollerHeight = autoSize ? `${computedHeight}px` : containerHeight ? `${containerHeight}px` : '100%';
-
-  return (
-    <div ref={autoSize ? undefined : containerRef} className={clsx('w-full h-full', classes.wrapper)}>
-      <VirtualScroller
-        ref={autoSize ? undefined : scrollerRef}
-        items={processedKills}
-        itemSize={ITEM_HEIGHT}
-        itemTemplate={itemTemplate}
-        autoSize={autoSize}
-        scrollWidth="100%"
-        style={{ height: scrollerHeight }}
-        className={clsx('w-full h-full custom-scrollbar select-none overflow-x-hidden overflow-y-auto', {
-          [classes.VirtualScroller]: !autoSize,
-        })}
-        pt={{
-          content: {
-            className: classes.scrollerContent,
-          },
-        }}
-      />
-    </div>
-  );
-};