Merge branch 'main' into signature-custom-info

.devcontainer/devcontainer.json

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

.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: |
+          path: deps
-            deps
+          key: ${{ runner.os }}-mix-${{ env.cache-name }}-${{ hashFiles('**/mix.lock') }}
-          key: ${{ runner.os }}-mix-${{ matrix.elixir }}-${{ matrix.otp }}-${{ 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
+          tags: ${{ env.REGISTRY_IMAGE }}:latest,${{ env.REGISTRY_IMAGE }}:${{ steps.get-latest-tag.outputs.tag }}
-          cache-to: type=gha,mode=max
           labels: ${{ steps.meta.outputs.labels }}
           platforms: ${{ matrix.platform }}
-          outputs: type=image,"name=${{ env.REGISTRY_IMAGE }}",push-by-digest=true,name-canonical=true,push=true
           build-args: |
             MIX_ENV=prod
             BUILD_METADATA=${{ steps.meta.outputs.json }}
 
-      - name: Export digest
+      - name: Image digest
-        run: |
+        run: echo ${{ steps.build.outputs.digest }}
-          mkdir -p /tmp/digests
-          digest="${{ steps.build.outputs.digest }}"
-          touch "/tmp/digests/${digest#sha256:}"
-
-      - name: Upload digest
-        uses: actions/upload-artifact@v4
-        with:
-          name: digests-${{ env.PLATFORM_PAIR }}
-          path: /tmp/digests/*
-          if-no-files-found: error
-          retention-days: 1
 
       - uses: markpatterson27/markdown-to-output@v1
         id: extract-changelog
@@ -247,54 +211,16 @@ jobs:
           maxLength: 500
           truncationSymbol: "…"
 
-  merge:
+      - name: Discord Webhook Action
-    runs-on: ubuntu-latest
+        uses: tsickert/discord-webhook@v5.3.0
-    needs:
-      - docker
-    steps:
-      - name: Download digests
-        uses: actions/download-artifact@v4
         with:
-          path: /tmp/digests
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
-          pattern: digests-*
+          content: ${{ steps.get-content.outputs.string }}
-          merge-multiple: true
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.WANDERER_DOCKER_USER }}
-          password: ${{ secrets.WANDERER_DOCKER_PASSWORD }}
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Docker meta
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: |
-            ${{ env.REGISTRY_IMAGE }}
-          tags: |
-            type=ref,event=branch
-            type=ref,event=pr
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-            type=semver,pattern={{version}},value=${{ needs.docker.outputs.release-tag }}
-
-      - name: Create manifest list and push
-        working-directory: /tmp/digests
-        run: |
-          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
-            $(printf '${{ env.REGISTRY_IMAGE }}@sha256:%s ' *)
-
-      - name: Inspect image
-        run: |
-          docker buildx imagetools inspect ${{ env.REGISTRY_IMAGE }}:${{ steps.meta.outputs.version }}
 
   create-release:
     name: 🏷 Create Release
     runs-on: ubuntu-22.04
-    needs: [docker, 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 }}
+          tag_name: ${{ steps.get-latest-tag.outputs.tag }}
-          name: Release ${{ needs.docker.outputs.release-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 }}

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

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

assets/app.tsx

@@ -1,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/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/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',
-                label: 'Unlock',
+              icon: PrimeIcons.LOCK_OPEN,
-                icon: PrimeIcons.LOCK_OPEN,
+              command: onLockToggle,
-                command: onLockToggle,
+            },
-              },
+          ]
-            ]
-          : []
         : [
-            ...(canLockSystem
+            {
-              ? [
+              label: 'Lock',
-                  {
+              icon: PrimeIcons.LOCK,
-                    label: 'Lock',
+              command: onLockToggle,
-                    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/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 = ({
+export const FastSystemActions = ({ systemId, systemName, onOpenSettings, showEdit }: FastSystemActionsProps) => {
-  systemId,
+  const ref = useRef({ systemId, systemName });
-  systemName,
+  ref.current = { systemId, systemName };
-  regionName,
-  isWH,
-  onOpenSettings,
-  showEdit,
-}: FastSystemActionsProps) => {
-  const ref = useRef({ systemId, systemName, regionName, isWH });
-  ref.current = { systemId, systemName, regionName, isWH };
 
   const handleOpenZKB = useCallback(
     () => window.open(`https://zkillboard.com/system/${ref.current.systemId}`, '_blank'),
@@ -36,17 +27,10 @@ export const FastSystemActions = ({
     [],
   );
 
-  const handleOpenDotlan = useCallback(() => {
+  const handleOpenDotlan = useCallback(
-    if (ref.current.isWH) {
+    () => window.open(`https://evemaps.dotlan.net/system/${ref.current.systemName}`, '_blank'),
-      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 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 source={ZKB_ICON} onClick={handleOpenZKB} />
-        <WdImgButton tooltip={{ content: 'Open Anoikis' }} source={ANOIK_ICON} onClick={handleOpenAnoikis} />
+        <WdImgButton source={ANOIK_ICON} onClick={handleOpenAnoikis} />
-        <WdImgButton tooltip={{ content: 'Open Dotlan' }} source={DOTLAN_ICON} onClick={handleOpenDotlan} />
+        <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,8 +1,8 @@
-import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect, useMemo } from 'react';
+import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect } from 'react';
 import ReactFlow, {
   Background,
+  ConnectionMode,
   Edge,
-  EdgeChange,
   MiniMap,
   Node,
   NodeChange,
@@ -16,24 +16,24 @@ import ReactFlow, {
 } 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 { useNodesState, useEdgesState, 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 { OnMapSelectionChange } from './map.types';
-import { OnMapAddSystemCallback, 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';
 
 const DEFAULT_VIEW_PORT = { zoom: 1, x: 0, y: 0 };
 
@@ -75,6 +75,12 @@ const initialEdges = [
   },
 ];
 
+const nodeTypes = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  custom: SolarSystemNode,
+} as never;
+
 const edgeTypes = {
   floating: SolarSystemEdge,
 };
@@ -85,16 +91,12 @@ interface MapCompProps {
   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 = ({
@@ -109,28 +111,16 @@ const MapComp = ({
   isShowMinimap,
   showKSpaceBG,
   isThickConnections,
-  isShowBackgroundPattern,
-  isSoftBackground,
-  theme,
-  onAddSystem,
 }: MapCompProps) => {
-  const { getNode, getNodes } = useReactFlow();
+  const { getNode } = useReactFlow();
   const [nodes, , onNodesChange] = useNodesState<Node<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 nodeTypes = useMemo(() => {
-    return {
-      custom: nodeComponent,
-    };
-  }, [nodeComponent]);
 
   const onConnect: OnConnect = useCallback(
     params => {
@@ -189,12 +179,6 @@ const MapComp = ({
     (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];
@@ -219,7 +203,7 @@ const MapComp = ({
 
       onNodesChange(nextChanges);
     },
-    [getNode, getNodes, onManualDelete, onNodesChange],
+    [getNode, onManualDelete, onNodesChange],
   );
 
   useEffect(() => {
@@ -232,7 +216,7 @@ const MapComp = ({
 
   return (
     <>
-      <div className={clsx(classes.MapRoot, { [classes.BackgroundAlternateColor]: isSoftBackground })}>
+      <div className={classes.MapRoot}>
         <ReactFlow
           nodes={nodes}
           edges={edges}
@@ -244,7 +228,7 @@ const MapComp = ({
           defaultViewport={getViewPortFromStore()}
           edgeTypes={edgeTypes}
           nodeTypes={nodeTypes}
-          connectionMode={connectionMode}
+          connectionMode={ConnectionMode.Loose}
           snapToGrid
           nodeDragThreshold={10}
           onNodeDragStop={handleDragStop}
@@ -252,10 +236,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) => {
@@ -277,19 +257,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 & {
@@ -9,7 +9,6 @@ export type MapData = MapUnionTypes & {
   visibleNodes: Set<string>;
   showKSpaceBG: boolean;
   isThickConnections: boolean;
-  linkedSigEveId: string;
 };
 
 interface MapProviderProps {
@@ -30,14 +29,9 @@ 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 {
+import { MASS_STATE_NAMES, MASS_STATE_NAMES_ORDER } from '@/hooks/Mapper/components/map/constants.ts';
-  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';
 
 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`,
+              label: `Mass status`,
-              className: clsx({
+              icon: PrimeIcons.CHART_PIE,
-                [classes.ConnectionTimeEOL]: edge.data?.time_status === TimeStatus.eol,
+              items: MASS_STATE_NAMES_ORDER.map(x => ({
-              }),
+                label: MASS_STATE_NAMES[x],
-              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
                 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({
-      outCommand({
+      type: OutCommand.updateConnectionMassStatus,
-        type: OutCommand.updateConnectionMassStatus,
+      data: {
-        data: {
+        source: edge.source,
-          source: edge.source,
+        target: edge.target,
-          target: edge.target,
+        value: MassState.normal,
-          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 = {
+export const useContextMenuRootHandlers = () => {
-  onAddSystem?: OnMapAddSystemCallback;
-};
-
-export const useContextMenuRootHandlers = ({ onAddSystem }: 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 });
+  const onAddSystem = () => {
-  ref.current = { onAddSystem, position };
+    outCommand({ type: OutCommand.manualAddSystem, data: { coordinates: position } });
-
+  };
-  const onAddSystemCallback = useCallback(() => {
-    ref.current.onAddSystem?.({ coordinates: position });
-  }, [position]);
 
   return {
     handleRootContext,
 
     contextMenuRef,
-    onAddSystem: onAddSystemCallback,
+    onAddSystem,
   };
 };

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

@@ -1,57 +1,29 @@
-@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
+@import "@/hooks/Mapper/components/map/styles/neon-variables";
 
-.EdgePathBack {
+.react-flow__edge.selected {
-  fill: none;
+  .EdgePathBack {
-  stroke: #80a5c5;
+    stroke: $pastel-yellow;
-  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;
   }
 }
 
 .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;
-  }
-
   &.Hovered {
     stroke: #4e5d6c;
     stroke-width: 2px;
@@ -78,29 +50,41 @@
   }
 }
 
+.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;
+    }
+  }
+}
+
 .ClickPath {
   fill: none;
   stroke: none;
   stroke-width: 8px;
 }
 
-.Handle {
+.LinkLabel{
-  border: 1px solid var(--pastel-blue);
-  width: 5px;
-  height: 5px;
-  z-index: 1001;
-
-  &.Tick {
-    width: 7px;
-    height: 7px;
-  }
-
-  &.Right {
-    margin-left: 0px;
-  }
-}
-
-.LinkLabel {
   font-size: 9px;
   line-height: 10px;
   padding: 2px 4px;
@@ -116,3 +100,22 @@
   height: 8px;
   font-size: 8px;
 }
+
+.Handle {
+  min-width: initial;
+  min-height: initial;
+  border: 1px solid #5a7d9a;
+  width: 5px;
+  height: 5px;
+  z-index: 1001;
+
+  &.Tick {
+    width: 7px;
+    height: 7px;
+
+    &.Right {
+      margin-left: 0px;
+    }
+  }
+}
+

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

@@ -1,14 +1,13 @@
 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%)',
@@ -31,18 +30,9 @@ const MAP_OFFSETS: Record<string, { x: number; y: number }> = {
   [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 },
@@ -55,9 +45,7 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
 
     const offset = isThickConnections ? MAP_OFFSETS_TICK[targetPos] : MAP_OFFSETS[targetPos];
 
-    const method = isWormhole ? getBezierPath : getSmoothStepPath;
+    const [edgePath, labelX, labelY] = getBezierPath({
-
-    const [edgePath, labelX, labelY] = method({
       sourceX: sx - offset.x,
       sourceY: sy - offset.y,
       sourcePosition: sourcePos,
@@ -65,9 +53,8 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
       targetX: tx + offset.x,
       targetY: ty + offset.y,
     });
-
     return [edgePath, labelX, labelY, sx, sy, tx, ty, sourcePos, targetPos];
-  }, [isThickConnections, sourceNode, targetNode, isWormhole]);
+  }, [isThickConnections, sourceNode, targetNode]);
 
   if (!sourceNode || !targetNode || !data) {
     return null;
@@ -79,9 +66,8 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
         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}
@@ -92,10 +78,9 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
         className={clsx(classes.EdgePathFront, {
           [classes.Tick]: isThickConnections,
           [classes.Hovered]: hovered,
-          [classes.MassVerge]: isWormhole && data.mass_status === MassState.verge,
+          [classes.MassVerge]: data.mass_status === MassState.verge,
-          [classes.MassHalf]: isWormhole && data.mass_status === MassState.half,
+          [classes.MassHalf]: data.mass_status === MassState.half,
-          [classes.Frigate]: isWormhole && data.ship_size_type === ShipSizeStatus.small,
+          [classes.Frigate]: data.ship_size_type === ShipSizeStatus.small,
-          [classes.Gate]: !isWormhole,
         })}
         d={path}
         markerEnd={markerEnd}
@@ -130,12 +115,12 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
         />
 
         <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 +131,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;
+  background-color: $tooltip-bg;
-  color: var(--rf-text-color, #ffffff);
-
   box-shadow: 0 0 5px rgba($dark-bg, 0.5);
   border: 1px solid darken($pastel-blue, 10%);
   border-radius: 5px;
   position: relative;
-  z-index: 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);
+    border: 1px solid darken($eve-solar-system-status-color-home, 30%);
-    background-image: linear-gradient(45deg, var(--eve-solar-system-status-color-background), transparent);
+    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);
+    border: 1px solid darken($eve-solar-system-status-color-friendly, 20%);
-    background-image: linear-gradient(275deg, var(--eve-solar-system-status-friendly-dark30), transparent);
+    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,17 +206,26 @@ $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-family: inherit !important;
       font-weight: bold;
     }
   }
+
+  .classSystemName {
+    //font-weight: bold;
+  }
+
+  .solarSystemName {
+  }
 }
 
 .BottomRow {
@@ -251,23 +234,22 @@ $tooltip-bg: #202020;
   align-items: center;
   height: 19px;
 
-  .hasLocalCounter {
+  .localCounter {
-    margin-right: 2px;
+    display: flex;
-    &.countAbove9 {
+    //align-items: center;
-      margin-right: 1.5rem;
+    gap: 2px;
+
+    & > i {
+      position: relative;
+      top: 1px;
     }
-  }
 
-  .lockIcon {
+    & > span {
-    font-size: 0.45rem;
+      font-size: 9px;
-    font-weight: bold;
+      line-height: 9px;
-    position: relative;
+      font-weight: 500;
-  }
+      //margin-top: 1px;
-
+    }
-  .mapMarker {
-    font-size: 0.45rem;
-    font-weight: bold;
-    position: relative;
   }
 }
 
@@ -294,12 +276,12 @@ $tooltip-bg: #202020;
     position: relative;
     top: -1px;
   }
+
 }
 
 .Handlers {
   position: absolute;
-  z-index: 4;
+  z-index: 2;
-  pointer-events: none;
   top: 0;
   left: 0;
   width: 100%;
@@ -312,7 +294,6 @@ $tooltip-bg: #202020;
   border: 1px solid $pastel-blue;
   width: 5px;
   height: 5px;
-  pointer-events: auto;
 
   &.selected {
     border-color: $pastel-pink;

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

@@ -0,0 +1,284 @@
+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,
+      isThickConnections,
+    },
+    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,
+            [classes.Tick]: isThickConnections,
+          })}
+          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Top}
+          id="a"
+        />
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleRight, {
+            [classes.selected]: selected,
+            [classes.Tick]: isThickConnections,
+          })}
+          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Right}
+          id="b"
+        />
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleBottom, {
+            [classes.selected]: selected,
+            [classes.Tick]: isThickConnections,
+          })}
+          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Bottom}
+          id="c"
+        />
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleLeft, {
+            [classes.selected]: selected,
+            [classes.Tick]: isThickConnections,
+          })}
+          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 './SolarSystemNode';
-export * from './SolarSystemNodeTheme';

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 = [
+// export const SHIP_SIZES_NAMES_ORDER = [
-  ShipSizeStatus.small,
+//   ShipSizeStatus.small,
-  ShipSizeStatus.medium,
+//   ShipSizeStatus.normal,
-  ShipSizeStatus.large,
+//   // ShipSizeStatus.large,
-  ShipSizeStatus.freight,
+//   // ShipSizeStatus.capital,
-  ShipSizeStatus.capital,
+// ];
-];
+//
-
+// export const SHIP_SIZES_NAMES = {
-export const SHIP_SIZES_NAMES = {
+//   [ShipSizeStatus.small]: 'Frigate',
-  [ShipSizeStatus.small]: 'Frigate',
+//   [ShipSizeStatus.normal]: 'Normal',
-  [ShipSizeStatus.medium]: 'Medium',
+//   // [ShipSizeStatus.large]: 'Normal',
-  [ShipSizeStatus.large]: 'Normal',
+//   // [ShipSizeStatus.capital]: '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',
-};

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

@@ -70,7 +70,7 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
               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 +112,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;

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;
+$eve-link-color-top-mass-1-time-1: #796300;
-$friendlyAlpha: #3bbd3952;
+$eve-link-color-top-mass-2-time-1: #8c1717;
-$friendlyDark20: darken($friendlyBase, 20%);
+$eve-link-color-temp: orange;
-$friendlyDark30: darken($friendlyBase, 30%);
-$friendlyDark5:  darken($friendlyBase, 5%);
 
-$lookingForBase: #43c2fd;
+$eve-effect-pulsar: #40aef5;
-$lookingForAlpha: rgba(67, 176, 253, 0.48);
+$eve-effect-magnetar: #f058f8;
-$lookingForDark15: darken($lookingForBase, 15%);
+$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);
+$eve-wh-type-color-high: #5dffd2;
-$homeAlpha: rgba(186, 248, 48, 0.32);
+$eve-wh-type-color-low: #f79400;
-$homeBackground: #a0fa5636;
+$eve-wh-type-color-null: #fc3c3c;
-$homeDark30: darken($homeBase, 30%);
+$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 {
+$eve-security-color-10: #2c74df;
-  --pastel-blue: #5a7d9a;
+$eve-security-color-09: #3998e8;
-  --pastel-pink: #d291bc;
+$eve-security-color-08: #4dcbf5;
-  --pastel-green: #88b04b;
+$eve-security-color-07: #60d8a2;
-  --pastel-yellow: #ffdd59;
+$eve-security-color-06: #71e454;
-  --dark-bg: #2d2d2d;
+$eve-security-color-05: #f2fc81;
-  --text-color: #ffffff;
+$eve-security-color-04: #d96c07;
-  --tooltip-bg: #202020;
+$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;
+$eve-solar-system-status-unknown: transparent;
-  --pastel-blue-lighten10: #6da3af;
+$eve-solar-system-status-friendly: #3bbd3952;
-  --pastel-pink-darken10: #bb7ca9;
+$eve-solar-system-status-warning: #906518a6;
-  --pastel-pink-lighten10: #e0a6cb;
+$eve-solar-system-status-target: #b439ff6b;
-  --pastel-green-darken10: #79a244;
+$eve-solar-system-status-dangerous: #d54040;
-  --pastel-green-lighten10: #99cf52;
+$eve-solar-system-status-lookingFor: rgba(67, 176, 253, 0.48);
-  --pastel-yellow-darken10: #e6c44f;
+$eve-solar-system-status-home: rgb(197, 253, 67);
-  --pastel-yellow-lighten10: #ffe874;
 
-  --eve-link-color-default: #333;
+$eve-solar-system-status-color-unknown: transparent;
-  --eve-link-color-top-mass-0: #333;
+$eve-solar-system-status-color-friendly: #3bbd39;
-  --eve-link-color-top-mass-1: #5a4520;
+$eve-solar-system-status-color-warning: #ffb93b;
-  --eve-link-color-top-mass-2: #672c2c;
+$eve-solar-system-status-color-target: #b439ff;
-  --eve-link-color-middle-mass-0: #333;
+$eve-solar-system-status-color-dangerous: #d54040;
-  --eve-link-color-middle-mass-1: #333;
+$eve-solar-system-status-color-lookingFor: #43c2fd;
-  --eve-link-color-middle-mass-2: #333;
+$eve-solar-system-status-color-home: rgb(197, 253, 67);
-  --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);
-}

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);
+  fill: $eve-effect-pulsar;
-  background-color: var(--eve-effect-pulsar);
+  background-color: $eve-effect-pulsar;
 }
 
 .eve-wh-effect-color-magnetar {
-  fill: var(--eve-effect-magnetar);
+  fill: $eve-effect-magnetar;
-  background-color: var(--eve-effect-magnetar);
+  background-color: $eve-effect-magnetar;
 }
 
 .eve-wh-effect-color-wolfRayet {
-  fill: var(--eve-effect-wolfRayet);
+  fill: $eve-effect-wolfRayet;
-  background-color: var(--eve-effect-wolfRayet);
+  background-color: $eve-effect-wolfRayet;
 }
 
 .eve-wh-effect-color-blackHole {
-  fill: var(--eve-effect-blackHole);
+  fill: $eve-effect-blackHole;
-  background-color: var(--eve-effect-blackHole);
+  background-color: $eve-effect-blackHole;
-  box-shadow: 0 0 8px rgba(255, 255, 255, 0.33);
+  box-shadow: 0 0 8px rgba(255 255 255 / 33);
 }
 
 .eve-wh-effect-color-cataclysmicVariable {
-  fill: var(--eve-effect-cataclysmicVariable);
+  fill: $eve-effect-cataclysmicVariable;
-  background-color: var(--eve-effect-cataclysmicVariable);
+  background-color: $eve-effect-cataclysmicVariable;
 }
 
 .eve-wh-effect-color-redGiant {
-  fill: var(--eve-effect-redGiant);
+  fill: $eve-effect-redGiant;
-  background-color: var(--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;
+  color: $eve-security-color-10 !important;
-  fill: var(--eve-security-color-10);
+  fill: $eve-security-color-10;
 }
+
 .eve-security-color-09 {
-  color: var(--eve-security-color-09) !important;
+  color: $eve-security-color-09 !important;
-  fill: var(--eve-security-color-09);
+  fill: $eve-security-color-09;
 }
+
 .eve-security-color-08 {
-  color: var(--eve-security-color-08) !important;
+  color: $eve-security-color-08 !important;
-  fill: var(--eve-security-color-08);
+  fill: $eve-security-color-08;
 }
+
 .eve-security-color-07 {
-  color: var(--eve-security-color-07) !important;
+  color: $eve-security-color-07 !important;
-  fill: var(--eve-security-color-07);
+  fill: $eve-security-color-07;
 }
+
 .eve-security-color-06 {
-  color: var(--eve-security-color-06) !important;
+  color: $eve-security-color-06 !important;
-  fill: var(--eve-security-color-06);
+  fill: $eve-security-color-06;
 }
+
 .eve-security-color-05 {
-  color: var(--eve-security-color-05) !important;
+  color: $eve-security-color-05 !important;
-  fill: var(--eve-security-color-05);
+  fill: $eve-security-color-05;
 }
+
 .eve-security-color-04 {
-  color: var(--eve-security-color-04) !important;
+  color: $eve-security-color-04 !important;
-  fill: var(--eve-security-color-04);
+  fill: $eve-security-color-04;
 }
+
 .eve-security-color-03 {
-  color: var(--eve-security-color-03) !important;
+  color: $eve-security-color-03 !important;
-  fill: var(--eve-security-color-03);
+  fill: $eve-security-color-03;
 }
+
 .eve-security-color-02 {
-  color: var(--eve-security-color-02) !important;
+  color: $eve-security-color-02 !important;
-  fill: var(--eve-security-color-02);
+  fill: $eve-security-color-02;
 }
+
 .eve-security-color-01 {
-  color: var(--eve-security-color-01) !important;
+  color: $eve-security-color-01 !important;
-  fill: var(--eve-security-color-01);
+  fill: $eve-security-color-01;
 }
+
 .eve-security-color-00 {
-  color: var(--eve-security-color-00) !important;
+  color: $eve-security-color-00 !important;
-  fill: var(--eve-security-color-00);
+  fill: $eve-security-color-00;
 }
+
 .eve-security-color-m-01 {
-  color: var(--eve-security-color-m-01) !important;
+  color: $eve-security-color-m-01 !important;
-  fill: var(--eve-security-color-m-01);
+  fill: $eve-security-color-m-01;
 }
+
 .eve-security-color-m-02 {
-  color: var(--eve-security-color-m-02) !important;
+  color: $eve-security-color-m-02 !important;
-  fill: var(--eve-security-color-m-02);
+  fill: $eve-security-color-m-02;
 }
+
 .eve-security-color-m-03 {
-  color: var(--eve-security-color-m-03) !important;
+  color: $eve-security-color-m-03 !important;
-  fill: var(--eve-security-color-m-03);
+  fill: $eve-security-color-m-03;
 }
+
 .eve-security-color-m-04 {
-  color: var(--eve-security-color-m-04) !important;
+  color: $eve-security-color-m-04 !important;
-  fill: var(--eve-security-color-m-04);
+  fill: $eve-security-color-m-04;
 }
+
 .eve-security-color-m-05 {
-  color: var(--eve-security-color-m-05) !important;
+  color: $eve-security-color-m-05 !important;
-  fill: var(--eve-security-color-m-05);
+  fill: $eve-security-color-m-05;
 }
+
 .eve-security-color-m-06 {
-  color: var(--eve-security-color-m-06) !important;
+  color: $eve-security-color-m-06 !important;
-  fill: var(--eve-security-color-m-06);
+  fill: $eve-security-color-m-06;
 }
+
 .eve-security-color-m-07 {
-  color: var(--eve-security-color-m-07) !important;
+  color: $eve-security-color-m-07 !important;
-  fill: var(--eve-security-color-m-07);
+  fill: $eve-security-color-m-07;
 }
+
 .eve-security-color-m-08 {
-  color: var(--eve-security-color-m-08) !important;
+  color: $eve-security-color-m-08 !important;
-  fill: var(--eve-security-color-m-08);
+  fill: $eve-security-color-m-08;
 }
+
 .eve-security-color-m-09 {
-  color: var(--eve-security-color-m-09) !important;
+  color: $eve-security-color-m-09 !important;
-  fill: var(--eve-security-color-m-09);
+  fill: $eve-security-color-m-09;
 }
+
 .eve-security-color-m-10 {
-  color: var(--eve-security-color-m-10) !important;
+  color: $eve-security-color-m-10 !important;
-  fill: var(--eve-security-color-m-10);
+  fill: $eve-security-color-m-10;
 }
 
-/* Security backgrounds */
 .eve-security-background-10 {
-  background-color: var(--eve-security-color-10);
+  background-color: $eve-security-color-10;
-  fill: var(--eve-security-color-10);
+  fill: $eve-security-color-10;
 }
+
 .eve-security-background-09 {
-  background-color: var(--eve-security-color-09);
+  background-color: $eve-security-color-09;
-  fill: var(--eve-security-color-09);
+  fill: $eve-security-color-09;
 }
+
 .eve-security-background-08 {
-  background-color: var(--eve-security-color-08);
+  background-color: $eve-security-color-08;
-  fill: var(--eve-security-color-08);
+  fill: $eve-security-color-08;
 }
+
 .eve-security-background-07 {
-  background-color: var(--eve-security-color-07);
+  background-color: $eve-security-color-07;
-  fill: var(--eve-security-color-07);
+  fill: $eve-security-color-07;
 }
+
 .eve-security-background-06 {
-  background-color: var(--eve-security-color-06);
+  background-color: $eve-security-color-06;
-  fill: var(--eve-security-color-06);
+  fill: $eve-security-color-06;
 }
+
 .eve-security-background-05 {
-  background-color: var(--eve-security-color-05);
+  background-color: $eve-security-color-05;
-  fill: var(--eve-security-color-05);
+  fill: $eve-security-color-05;
 }
+
 .eve-security-background-04 {
-  background-color: var(--eve-security-color-04);
+  background-color: $eve-security-color-04;
-  fill: var(--eve-security-color-04);
+  fill: $eve-security-color-04;
 }
+
 .eve-security-background-03 {
-  background-color: var(--eve-security-color-03);
+  background-color: $eve-security-color-03;
-  fill: var(--eve-security-color-03);
+  fill: $eve-security-color-03;
 }
+
 .eve-security-background-02 {
-  background-color: var(--eve-security-color-02);
+  background-color: $eve-security-color-02;
-  fill: var(--eve-security-color-02);
+  fill: $eve-security-color-02;
 }
+
 .eve-security-background-01 {
-  background-color: var(--eve-security-color-01);
+  background-color: $eve-security-color-01;
-  fill: var(--eve-security-color-01);
+  fill: $eve-security-color-01;
 }
+
 .eve-security-background-00 {
-  background-color: var(--eve-security-color-00);
+  background-color: $eve-security-color-00;
-  fill: var(--eve-security-color-00);
+  fill: $eve-security-color-00;
 }
+
 .eve-security-background-m-01 {
-  background-color: var(--eve-security-color-m-01);
+  background-color: $eve-security-color-m-01;
-  fill: var(--eve-security-color-m-01);
+  fill: $eve-security-color-m-01;
 }
+
 .eve-security-background-m-02 {
-  background-color: var(--eve-security-color-m-02);
+  background-color: $eve-security-color-m-02;
-  fill: var(--eve-security-color-m-02);
+  fill: $eve-security-color-m-02;
 }
+
 .eve-security-background-m-03 {
-  background-color: var(--eve-security-color-m-03);
+  background-color: $eve-security-color-m-03;
-  fill: var(--eve-security-color-m-03);
+  fill: $eve-security-color-m-03;
 }
+
 .eve-security-background-m-04 {
-  background-color: var(--eve-security-color-m-04);
+  background-color: $eve-security-color-m-04;
-  fill: var(--eve-security-color-m-04);
+  fill: $eve-security-color-m-04;
 }
+
 .eve-security-background-m-05 {
-  background-color: var(--eve-security-color-m-05);
+  background-color: $eve-security-color-m-05;
-  fill: var(--eve-security-color-m-05);
+  fill: $eve-security-color-m-05;
 }
+
 .eve-security-background-m-06 {
-  background-color: var(--eve-security-color-m-06);
+  background-color: $eve-security-color-m-06;
-  fill: var(--eve-security-color-m-06);
+  fill: $eve-security-color-m-06;
 }
+
 .eve-security-background-m-07 {
-  background-color: var(--eve-security-color-m-07);
+  background-color: $eve-security-color-m-07;
-  fill: var(--eve-security-color-m-07);
+  fill: $eve-security-color-m-07;
 }
+
 .eve-security-background-m-08 {
-  background-color: var(--eve-security-color-m-08);
+  background-color: $eve-security-color-m-08;
-  fill: var(--eve-security-color-m-08);
+  fill: $eve-security-color-m-08;
 }
+
 .eve-security-background-m-09 {
-  background-color: var(--eve-security-color-m-09);
+  background-color: $eve-security-color-m-09;
-  fill: var(--eve-security-color-m-09);
+  fill: $eve-security-color-m-09;
 }
+
 .eve-security-background-m-10 {
-  background-color: var(--eve-security-color-m-10);
+  background-color: $eve-security-color-m-10;
-  fill: var(--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;
+  color: $eve-wh-type-color-high;
-  fill: var(--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;
+  color: $eve-wh-type-color-low;
-  fill: var(--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;
+  color: $eve-wh-type-color-null;
-  fill: var(--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;
+  color: $eve-wh-type-color-c1 !important;
-  fill: var(--eve-wh-type-color-c1);
+  fill: $eve-wh-type-color-c1;
   font-weight: bold !important;
 }
+
 .eve-wh-type-color-c2 {
-  color: var(--eve-wh-type-color-c2) !important;
+  color: $eve-wh-type-color-c2 !important;
-  fill: var(--eve-wh-type-color-c2);
+  fill: $eve-wh-type-color-c2;
   font-weight: bold !important;
 }
+
 .eve-wh-type-color-c3 {
-  color: var(--eve-wh-type-color-c3) !important;
+  color: $eve-wh-type-color-c3 !important;
-  fill: var(--eve-wh-type-color-c3);
+  fill: $eve-wh-type-color-c3;
   font-weight: bold !important;
 }
+
 .eve-wh-type-color-c4 {
-  color: var(--eve-wh-type-color-c4) !important;
+  color: $eve-wh-type-color-c4 !important;
-  fill: var(--eve-wh-type-color-c4);
+  fill: $eve-wh-type-color-c4;
   font-weight: bold !important;
 }
+
 .eve-wh-type-color-c5 {
-  color: var(--eve-wh-type-color-c5) !important;
+  color: $eve-wh-type-color-c5 !important;
-  fill: var(--eve-wh-type-color-c5);
+  fill: $eve-wh-type-color-c5;
   font-weight: bold !important;
 }
+
 .eve-wh-type-color-c6 {
-  color: var(--eve-wh-type-color-c6) !important;
+  color: $eve-wh-type-color-c6 !important;
-  fill: var(--eve-wh-type-color-c6);
+  fill: $eve-wh-type-color-c6;
   font-weight: bold !important;
 }
+
 .eve-wh-type-color-c13 {
-  color: var(--eve-wh-type-color-c13) !important;
+  color: $eve-wh-type-color-c13 !important;
-  fill: var(--eve-wh-type-color-c13);
+  fill: $eve-wh-type-color-c13;
 }
+
 .eve-wh-type-color-drifter {
-  color: var(--eve-wh-type-color-drifter) !important;
+  color: $eve-wh-type-color-drifter !important;
-  fill: var(--eve-wh-type-color-drifter);
+  fill: $eve-wh-type-color-drifter;
 }
+
 .eve-wh-type-color-thera {
-  color: var(--eve-wh-type-color-thera) !important;
+  color: $eve-wh-type-color-thera !important;
-  fill: var(--eve-wh-type-color-thera);
+  fill: $eve-wh-type-color-thera;
 }
 
-/* WH Type backgrounds */
 .eve-wh-type-background-high {
-  background-color: var(--eve-wh-type-color-high);
+  background-color: $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);
 }
 
-/* Kind color classes */
+.eve-wh-type-background-low {
-.eve-kind-color-high {
+  background-color: $eve-wh-type-color-low;
-  color: var(--eve-wh-type-color-high);
-  fill: var(--eve-wh-type-color-high);
 }
+
+.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);
+  color: $eve-wh-type-color-low;
-  fill: var(--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);
+  color: $eve-wh-type-color-null;
-  fill: var(--eve-wh-type-color-null);
+  fill: $eve-wh-type-color-null;
 }
+
 .eve-kind-color-wh {
-  color: var(--eve-wh-type-color-c6);
+  color: $eve-wh-type-color-c6;
-  fill: var(--eve-wh-type-color-c6);
+  fill: $eve-wh-type-color-c6;
 }
+
 .eve-kind-color-thera {
-  color: var(--eve-wh-type-color-thera);
+  color: $eve-wh-type-color-thera;
-  fill: var(--eve-wh-type-color-thera);
+  fill: $eve-wh-type-color-thera;
 }
+
 .eve-kind-color-abyss {
-  color: var(--eve-wh-type-color-c6);
+  color: $eve-wh-type-color-c6;
-  fill: var(--eve-wh-type-color-c6);
+  fill: $eve-wh-type-color-c6;
 }
+
 .eve-kind-color-penalty {
-  color: var(--eve-wh-type-color-c6);
+  color: $eve-wh-type-color-c6;
-  fill: var(--eve-wh-type-color-c6);
+  fill: $eve-wh-type-color-c6;
 }
+
 .eve-kind-color-pochven {
-  color: var(--eve-wh-type-color-c6);
+  color: $eve-wh-type-color-c6;
-  fill: var(--eve-wh-type-color-c6);
+  fill: $eve-wh-type-color-c6;
 }
+
 .eve-kind-color-zarzakh {
-  color: var(--eve-wh-type-color-zarzakh);
+  color: $eve-wh-type-color-zarzakh;
-  fill: var(--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);
+  color: $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);
 }
 
 .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/mapInterface/MapInterface.tsx

@@ -1,30 +1,77 @@
-import { useMemo } from 'react';
+import 'react-grid-layout/css/styles.css';
-import { WindowManager } from '@/hooks/Mapper/components/ui-kit/WindowManager';
+import 'react-resizable/css/styles.css';
-import { DEFAULT_WIDGETS } from '@/hooks/Mapper/components/mapInterface/constants.tsx';
+import { WidgetGridItem, WidgetsGrid } from '@/hooks/Mapper/components/mapInterface/components';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+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 [items, setItems] = useState<WidgetGridItem[]>(restoreWindowsFromLS());
-  const { windowsSettings, updateWidgetSettings } = useMapRootState();
-
-  const items = useMemo(() => {
-    return windowsSettings.windows
-      .map(x => {
-        const content = DEFAULT_WIDGETS.find(y => y.id === x.id)?.content;
-        return {
-          ...x,
-          content: content!,
-        };
-      })
-      .filter(x => windowsSettings.visible.some(j => x.id === j));
-  }, [windowsSettings]);
 
   return (
-    <WindowManager
+    <WidgetsGrid
-      windows={items}
+      items={items}
-      viewPort={windowsSettings.viewPort}
+      onChange={x => {
-      dragSelector=".react-grid-dragHandleExample"
+        saveWindowsToLS(x);
-      onChange={updateWidgetSettings}
+        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,7 +6,6 @@ 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,
@@ -21,7 +20,6 @@ interface SystemLinkSignatureDialogProps {
 const signatureSettings: Setting[] = [
   { key: COSMIC_SIGNATURE, name: 'Show Cosmic Signatures', value: true },
   { key: SignatureGroup.Wormhole, name: 'Wormhole', value: true },
-  { key: SHOW_DESCRIPTION_COLUMN_SETTING, name: 'Show Description Column', value: true, isFilter: false },
 ];
 
 export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignatureDialogProps) => {
@@ -58,7 +56,7 @@ 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"

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 });
+  useEffect(() => {
-  ref.current = { name, description, label, temporaryName, outCommand, systemId, system };
+    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 { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
-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 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 itemTemplate = useItemTemplate();
-  const showOffline = useMemo(
-    () => !restrictOfflineShowing || isAdminOrManager,
-    [isAdminOrManager, restrictOfflineShowing],
-  );
 
   const sorted = useMemo(() => {
-    const filtered = characters
+    const sorted = characters
       .filter(x => x.location?.solar_system_id?.toString() === systemId)
-      .map(x => ({
+      .map(x => ({ ...x, isOwn: userCharacters.includes(x.eve_id), compact: settings.compact }))
-        ...x,
-        isOwn: userCharacters.includes(x.eve_id),
-        compact: settings.compact,
-        showShipName: settings.showShipName,
-      }))
       .sort(sortCharacters);
 
-    if (!showOffline || !settings.showOffline) {
+    if (!settings.showOffline) {
-      return filtered.filter(c => c.online);
+      return sorted.filter(c => c.online);
     }
-    return filtered;
+
-  }, [
+    return sorted;
-    characters,
+    // eslint-disable-next-line
-    systemId,
+  }, [characters, settings.showOffline, settings.compact, systemId, userCharacters, presentCharacters]);
-    userCharacters,
-    settings.compact,
-    settings.showOffline,
-    settings.showShipName,
-    showOffline,
-  ]);
 
   const isNobodyHere = sorted.length === 0;
   const isNotSelectedSystem = selectedSystems.length !== 1;
   const showList = sorted.length > 0 && selectedSystems.length === 1;
 
-  const itemTemplate = useLocalCharactersItemTemplate(settings.showShipName);
-
   return (
     <Widget
       label={
-        <LocalCharactersHeader
+        <div className="flex justify-between items-center text-xs w-full">
-          sortedCount={sorted.length}
+          <span className="select-none">Local{showList ? ` [${sorted.length}]` : ''}</span>
-          showList={showList}
+          <LayoutEventBlocker className="flex items-center gap-2">
-          showOffline={showOffline}
+            <WdCheckbox
-          settings={settings}
+              size="xs"
-          setSettings={setSettings}
+              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">
+        <div className="w-full h-full flex justify-center items-center select-none text-stone-400/80 text-sm">Nobody here</div>
-          Nobody here
-        </div>
       )}
+
       {showList && (
-        <LocalCharactersList
+        <VirtualScroller
           items={sorted}
           itemSize={settings.compact ? 26 : 41}
           itemTemplate={itemTemplate}
-          containerClassName={clsx(
+          className={clsx(
-            'w-full h-full overflow-x-hidden overflow-y-auto custom-scrollbar select-none',
             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,7 +1,7 @@
 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';
@@ -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={() => {
+        onMouseLeave={e => {
-          tooltipRef.current?.hide();
+          tooltipRef.current?.hide(e);
           onMouseLeave?.();
         }}
         onContextMenu={handleContext}

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) => {
+    (propName: keyof RoutesType) => (event: CheckboxChangeEvent) => {
-      optionsRef.current = { ...optionsRef.current, [propName]: event };
+      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-3">
-        <div className="flex flex-col gap-2 mb-2">
+        <div className="flex flex-col gap-2">
           {checkboxes.map(({ label, propName }) => (
-            <PrettySwitchbox
+            <WdCheckbox
               key={propName}
               label={label}
-              checked={optionsRef.current[propName]}
+              value={optionsRef.current[propName]}
-              setChecked={handleChangeEvent(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;
@@ -168,12 +161,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 +170,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
+            <WdCheckbox
-              className={PrimeIcons.PLUS_CIRCLE}
+              size="xs"
-              onClick={onAddSystem}
+              labelSide="left"
-              tooltip={{
+              label={'Show shortest'}
-                content: 'Click here to add new system to routes',
+              value={!isSecure}
-              }}
+              onChange={handleSecureChange}
-            />
+              classNameLabel={clsx('text-red-400')}
-
-            <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',
-              }}
             />
+            <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>
-  );
-};

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

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

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

@@ -1,30 +0,0 @@
-.killRowContainer {
-  @apply flex items-center whitespace-nowrap overflow-hidden;
-  &:not(:last-child) {
-    @apply border-b border-stone-800;
-  }
-  @apply bg-transparent transition-all hover:bg-stone-900 hover:border-stone-700;
-}
-
-.killRowImage {
-  @apply border border-stone-800 rounded-[4px] object-contain;
-}
-
-.attackerCountLabel {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  font-size: 10px;
-  padding: 0 2px;
-}
-
-.attackerCountLabelCompact {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  font-size: 0.6rem;
-  line-height: 1;
-  background-color: rgba(0, 0, 0, 0.7);
-  padding: 1px 2px;
-  pointer-events: none;
-}

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

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

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

@@ -1,65 +0,0 @@
-import React, { useRef } from 'react';
-import {
-  LayoutEventBlocker,
-  SystemView,
-  TooltipPosition,
-  WdCheckbox,
-  WdImgButton,
-  WdTooltipWrapper,
-} from '@/hooks/Mapper/components/ui-kit';
-import { useKillsWidgetSettings } from '../hooks/useKillsWidgetSettings';
-import { PrimeIcons } from 'primereact/api';
-import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
-
-interface KillsHeaderProps {
-  systemId?: string;
-  onOpenSettings: () => void;
-}
-
-export const KillsHeader: React.FC<KillsHeaderProps> = ({ systemId, onOpenSettings }) => {
-  const [settings, setSettings] = useKillsWidgetSettings();
-  const { showAll } = settings;
-
-  const onToggleShowAllVisible = () => {
-    setSettings(prev => ({ ...prev, showAll: !prev.showAll }));
-  };
-
-  const headerRef = useRef<HTMLDivElement>(null);
-  const compact = useMaxWidth(headerRef, 150);
-
-  return (
-    <div className="flex w-full items-center justify-between text-xs" ref={headerRef}>
-      <div className="flex items-center gap-1">
-        <div className="text-stone-400">
-          Kills
-          {systemId && !showAll && ' in '}
-        </div>
-        {systemId && !showAll && <SystemView systemId={systemId} className="select-none text-center" hideRegion />}
-      </div>
-
-      <LayoutEventBlocker className="flex items-center gap-2 justify-end">
-        <div className="flex items-center gap-2">
-          <WdTooltipWrapper content="Show all systems" position={TooltipPosition.top}>
-            <WdCheckbox
-              size="xs"
-              labelSide="left"
-              label={compact ? 'All' : 'Show all systems'}
-              value={showAll}
-              onChange={onToggleShowAllVisible}
-              classNameLabel="whitespace-nowrap text-stone-400 hover:text-stone-200 transition duration-300"
-            />
-          </WdTooltipWrapper>
-
-          <WdImgButton
-            className={PrimeIcons.SLIDERS_H}
-            onClick={onOpenSettings}
-            tooltip={{
-              content: 'Open Kills Settings',
-              position: TooltipPosition.top,
-            }}
-          />
-        </div>
-      </LayoutEventBlocker>
-    </div>
-  );
-};

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

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

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

@@ -1,163 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Dialog } from 'primereact/dialog';
-import { Button } from 'primereact/button';
-import { WdImgButton } from '@/hooks/Mapper/components/ui-kit';
-import { PrimeIcons } from 'primereact/api';
-import { useKillsWidgetSettings } from '../hooks/useKillsWidgetSettings';
-import {
-  AddSystemDialog,
-  SearchOnSubmitCallback,
-} from '@/hooks/Mapper/components/mapInterface/components/AddSystemDialog';
-import { SystemView, TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
-
-interface KillsSettingsDialogProps {
-  visible: boolean;
-  setVisible: (visible: boolean) => void;
-}
-
-export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visible, setVisible }) => {
-  const [globalSettings, setGlobalSettings] = useKillsWidgetSettings();
-  const localRef = useRef({
-    showAll: globalSettings.showAll,
-    whOnly: globalSettings.whOnly,
-    excludedSystems: globalSettings.excludedSystems || [],
-    timeRange: globalSettings.timeRange,
-  });
-
-  const [, forceRender] = useState(0);
-  const [addSystemDialogVisible, setAddSystemDialogVisible] = useState(false);
-
-  useEffect(() => {
-    if (visible) {
-      localRef.current = {
-        showAll: globalSettings.showAll,
-        whOnly: globalSettings.whOnly,
-        excludedSystems: globalSettings.excludedSystems || [],
-        timeRange: globalSettings.timeRange,
-      };
-      forceRender(n => n + 1);
-    }
-  }, [visible, globalSettings]);
-
-  const handleWHChange = useCallback((checked: boolean) => {
-    localRef.current = {
-      ...localRef.current,
-      whOnly: checked,
-    };
-    forceRender(n => n + 1);
-  }, []);
-
-  const handleTimeRangeChange = useCallback((newTimeRange: number) => {
-    localRef.current = {
-      ...localRef.current,
-      timeRange: newTimeRange,
-    };
-    forceRender(n => n + 1);
-  }, []);
-
-  const handleRemoveSystem = useCallback((sysId: number) => {
-    localRef.current = {
-      ...localRef.current,
-      excludedSystems: localRef.current.excludedSystems.filter(id => id !== sysId),
-    };
-    forceRender(n => n + 1);
-  }, []);
-
-  const handleAddSystemSubmit: SearchOnSubmitCallback = useCallback(item => {
-    if (localRef.current.excludedSystems.includes(item.value)) {
-      return;
-    }
-    localRef.current = {
-      ...localRef.current,
-      excludedSystems: [...localRef.current.excludedSystems, item.value],
-    };
-    forceRender(n => n + 1);
-  }, []);
-
-  const handleApply = useCallback(() => {
-    setGlobalSettings(prev => ({
-      ...prev,
-      ...localRef.current,
-    }));
-    setVisible(false);
-  }, [setGlobalSettings, setVisible]);
-
-  const handleHide = useCallback(() => {
-    setVisible(false);
-  }, [setVisible]);
-
-  const localData = localRef.current;
-  const excluded = localData.excludedSystems || [];
-  const timeRangeOptions = [4, 12, 24];
-
-  return (
-    <Dialog header="Kills Settings" visible={visible} style={{ width: '440px' }} draggable={false} onHide={handleHide}>
-      <div className="flex flex-col gap-3 p-2.5">
-        <div className="flex items-center gap-2">
-          <input
-            type="checkbox"
-            id="kills-wormhole-only-mode"
-            checked={localData.whOnly}
-            onChange={e => handleWHChange(e.target.checked)}
-          />
-          <label htmlFor="kills-wormhole-only-mode" className="cursor-pointer">
-            Only show wormhole kills
-          </label>
-        </div>
-
-        <div className="flex flex-col gap-1">
-          <span className="text-sm">Time Range:</span>
-          <div className="flex flex-wrap gap-2">
-            {timeRangeOptions.map(option => (
-              <label key={option} className="cursor-pointer flex items-center gap-1">
-                <input
-                  type="radio"
-                  name="timeRange"
-                  value={option}
-                  checked={localData.timeRange === option}
-                  onChange={() => handleTimeRangeChange(option)}
-                />
-                <span className="text-sm">{option} Hours</span>
-              </label>
-            ))}
-          </div>
-        </div>
-
-        {/* Excluded Systems */}
-        <div className="flex flex-col gap-1">
-          <div className="flex items-center justify-between">
-            <label className="text-sm text-stone-400">Excluded Systems</label>
-            <WdImgButton
-              className={PrimeIcons.PLUS_CIRCLE}
-              onClick={() => setAddSystemDialogVisible(true)}
-              tooltip={{ content: 'Add system to excluded list' }}
-            />
-          </div>
-          {excluded.length === 0 && <div className="text-stone-500 text-xs italic">No systems excluded.</div>}
-          {excluded.map(sysId => (
-            <div key={sysId} className="flex items-center justify-between border-b border-stone-600 py-1 px-1 text-xs">
-              <SystemView systemId={sysId.toString()} hideRegion />
-              <WdImgButton
-                className={PrimeIcons.TRASH}
-                onClick={() => handleRemoveSystem(sysId)}
-                tooltip={{ content: 'Remove from excluded', position: TooltipPosition.top }}
-              />
-            </div>
-          ))}
-        </div>
-
-        <div className="flex gap-2 justify-end mt-4">
-          <Button onClick={handleApply} label="Apply" outlined size="small" />
-        </div>
-      </div>
-
-      <AddSystemDialog
-        title="Add system to kills exclude list"
-        visible={addSystemDialogVisible}
-        setVisible={() => setAddSystemDialogVisible(false)}
-        onSubmit={handleAddSystemSubmit}
-        excludedSystems={excluded}
-      />
-    </Dialog>
-  );
-};

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

@@ -1,2 +0,0 @@
-export * from './linkHelpers';
-export * from './killRowUtils';

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/helpers/killRowUtils.ts

@@ -1,47 +0,0 @@
-import { DetailedKill } from '@/hooks/Mapper/types/kills';
-
-/** Returns "5m ago", "3h ago", "2.5d ago", etc. */
-export function formatTimeMixed(killTime: string): string {
-  const killDate = new Date(killTime);
-  const diffMs = Date.now() - killDate.getTime();
-  const diffHours = diffMs / (1000 * 60 * 60);
-
-  if (diffHours < 1) {
-    const mins = Math.round(diffHours * 60);
-    return `${mins}m ago`;
-  } else if (diffHours < 24) {
-    const hours = Math.round(diffHours);
-    return `${hours}h ago`;
-  } else {
-    const days = diffHours / 24;
-    const roundedDays = days.toFixed(1);
-    return `${roundedDays}d ago`;
-  }
-}
-
-/** Formats integer ISK values into k/M/B/T. */
-export function formatISK(value: number): string {
-  if (value >= 1_000_000_000_000) {
-    return `${(value / 1_000_000_000_000).toFixed(2)}T`;
-  } else if (value >= 1_000_000_000) {
-    return `${(value / 1_000_000_000).toFixed(2)}B`;
-  } else if (value >= 1_000_000) {
-    return `${(value / 1_000_000).toFixed(2)}M`;
-  } else if (value >= 1_000) {
-    return `${(value / 1_000).toFixed(2)}k`;
-  }
-  return Math.round(value).toString();
-}
-
-export function getAttackerSubscript(kill: DetailedKill) {
-  if (kill.npc) {
-    return { label: 'npc', cssClass: 'text-purple-400' };
-  }
-  const count = kill.attacker_count ?? 0;
-  if (count === 1) {
-    return { label: 'solo', cssClass: 'text-green-400' };
-  } else if (count > 1) {
-    return { label: String(count), cssClass: 'text-white' };
-  }
-  return null;
-}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/helpers/linkHelpers.ts

@@ -1,111 +0,0 @@
-const ZKILL_URL = 'https://zkillboard.com';
-const BASE_IMAGE_URL = 'https://images.evetech.net';
-
-export function zkillLink(type: 'kill' | 'character' | 'corporation' | 'alliance', id?: number | null): string {
-  if (!id) return `${ZKILL_URL}`;
-  if (type === 'kill') return `${ZKILL_URL}/kill/${id}/`;
-  if (type === 'character') return `${ZKILL_URL}/character/${id}/`;
-  if (type === 'corporation') return `${ZKILL_URL}/corporation/${id}/`;
-  if (type === 'alliance') return `${ZKILL_URL}/alliance/${id}/`;
-  return `${ZKILL_URL}`;
-}
-
-export function eveImageUrl(
-  category: 'characters' | 'corporations' | 'alliances' | 'types',
-  id?: number | null,
-  variation: string = 'icon',
-  size?: number,
-): string | null {
-  if (!id || id <= 0) {
-    return null;
-  }
-  let url = `${BASE_IMAGE_URL}/${category}/${id}/${variation}`;
-  if (size) {
-    url += `?size=${size}`;
-  }
-  return url;
-}
-
-export function buildVictimImageUrls(args: {
-  victim_char_id?: number | null;
-  victim_ship_type_id?: number | null;
-  victim_corp_id?: number | null;
-  victim_alliance_id?: number | null;
-}) {
-  const { victim_char_id, victim_ship_type_id, victim_corp_id, victim_alliance_id } = args;
-
-  const victimPortraitUrl = eveImageUrl('characters', victim_char_id, 'portrait', 64);
-  const victimShipUrl = eveImageUrl('types', victim_ship_type_id, 'render', 64);
-  const victimCorpLogoUrl = eveImageUrl('corporations', victim_corp_id, 'logo', 32);
-  const victimAllianceLogoUrl = eveImageUrl('alliances', victim_alliance_id, 'logo', 32);
-
-  return {
-    victimPortraitUrl,
-    victimShipUrl,
-    victimCorpLogoUrl,
-    victimAllianceLogoUrl,
-  };
-}
-
-export function buildAttackerShipUrl(final_blow_ship_type_id?: number | null): string | null {
-  return eveImageUrl('types', final_blow_ship_type_id, 'render', 64);
-}
-
-export function buildAttackerImageUrls(args: {
-  final_blow_char_id?: number | null;
-  final_blow_corp_id?: number | null;
-  final_blow_alliance_id?: number | null;
-}) {
-  const { final_blow_char_id, final_blow_corp_id, final_blow_alliance_id } = args;
-
-  const attackerPortraitUrl = eveImageUrl('characters', final_blow_char_id, 'portrait', 64);
-  const attackerCorpLogoUrl = eveImageUrl('corporations', final_blow_corp_id, 'logo', 32);
-  const attackerAllianceLogoUrl = eveImageUrl('alliances', final_blow_alliance_id, 'logo', 32);
-
-  return {
-    attackerPortraitUrl,
-    attackerCorpLogoUrl,
-    attackerAllianceLogoUrl,
-  };
-}
-
-export function getPrimaryLogoAndTooltip(
-  allianceUrl: string | null,
-  corpUrl: string | null,
-  allianceName: string,
-  corpName: string,
-  fallback: string,
-) {
-  let url: string | null = null;
-  let tooltip = '';
-
-  if (allianceUrl) {
-    url = allianceUrl;
-    tooltip = allianceName || fallback;
-  } else if (corpUrl) {
-    url = corpUrl;
-    tooltip = corpName || fallback;
-  }
-
-  return { url, tooltip };
-}
-
-export function getAttackerPrimaryImageAndTooltip(
-  isNpc: boolean,
-  allianceUrl: string | null,
-  corpUrl: string | null,
-  allianceName: string,
-  corpName: string,
-  finalBlowShipTypeId: number | null,
-  npcFallback: string = 'NPC Attacker',
-) {
-  if (isNpc) {
-    const shipUrl = buildAttackerShipUrl(finalBlowShipTypeId);
-    return {
-      url: shipUrl,
-      tooltip: npcFallback,
-    };
-  }
-
-  return getPrimaryLogoAndTooltip(allianceUrl, corpUrl, allianceName, corpName, 'Attacker');
-}

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

@@ -1,53 +0,0 @@
-import { useMemo, useCallback } from 'react';
-import useLocalStorageState from 'use-local-storage-state';
-
-export interface KillsWidgetSettings {
-  showAll: boolean;
-  whOnly: boolean;
-  excludedSystems: number[];
-  version: number;
-  timeRange: number;
-}
-
-export const DEFAULT_KILLS_WIDGET_SETTINGS: KillsWidgetSettings = {
-  showAll: false,
-  whOnly: true,
-  excludedSystems: [],
-  version: 2,
-  timeRange: 1,
-};
-
-function mergeWithDefaults(settings?: Partial<KillsWidgetSettings>): KillsWidgetSettings {
-  if (!settings) {
-    return DEFAULT_KILLS_WIDGET_SETTINGS;
-  }
-
-  return {
-    ...DEFAULT_KILLS_WIDGET_SETTINGS,
-    ...settings,
-    excludedSystems: Array.isArray(settings.excludedSystems) ? settings.excludedSystems : [],
-  };
-}
-
-export function useKillsWidgetSettings() {
-  const [rawValue, setRawValue] = useLocalStorageState<KillsWidgetSettings | undefined>('kills:widget:settings');
-
-  const value = useMemo<KillsWidgetSettings>(() => {
-    return mergeWithDefaults(rawValue);
-  }, [rawValue]);
-
-  const setValue = useCallback(
-    (newVal: KillsWidgetSettings | ((prev: KillsWidgetSettings) => KillsWidgetSettings)) => {
-      setRawValue(prev => {
-        const mergedPrev = mergeWithDefaults(prev);
-
-        const nextUnmerged = typeof newVal === 'function' ? newVal(mergedPrev) : newVal;
-
-        return mergeWithDefaults(nextUnmerged);
-      });
-    },
-    [setRawValue],
-  );
-
-  return [value, setValue] as const;
-}

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

@@ -1,183 +0,0 @@
-import { useCallback, useMemo, useState, useEffect, useRef } from 'react';
-import debounce from 'lodash.debounce';
-import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
-import { DetailedKill } from '@/hooks/Mapper/types/kills';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { useKillsWidgetSettings } from './useKillsWidgetSettings';
-
-interface UseSystemKillsProps {
-  systemId?: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  outCommand: (payload: any) => Promise<any>;
-  showAllVisible?: boolean;
-  sinceHours?: number;
-}
-
-function combineKills(existing: DetailedKill[], incoming: DetailedKill[], sinceHours: number): DetailedKill[] {
-  const cutoff = Date.now() - sinceHours * 60 * 60 * 1000;
-  const byId: Record<string, DetailedKill> = {};
-
-  for (const kill of [...existing, ...incoming]) {
-    if (!kill.kill_time) {
-      continue;
-    }
-    const killTimeMs = new Date(kill.kill_time).valueOf();
-
-    if (killTimeMs >= cutoff) {
-      byId[kill.killmail_id] = kill;
-    }
-  }
-
-  return Object.values(byId);
-}
-
-export function useSystemKills({ systemId, outCommand, showAllVisible = false, sinceHours = 24 }: UseSystemKillsProps) {
-  const { data, update } = useMapRootState();
-  const { detailedKills = {}, systems = [] } = data;
-
-  const [settings] = useKillsWidgetSettings();
-  const excludedSystems = settings.excludedSystems;
-
-  // When showing all visible kills, filter out excluded systems;
-  // when showAllVisible is false, ignore the exclusion filter.
-  const effectiveSystemIds = useMemo(() => {
-    if (showAllVisible) {
-      return systems.map(s => s.id).filter(id => !excludedSystems.includes(Number(id)));
-    }
-    return systems.map(s => s.id);
-  }, [systems, excludedSystems, showAllVisible]);
-
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const didFallbackFetch = useRef(Object.keys(detailedKills).length !== 0);
-
-  const mergeKillsIntoGlobal = useCallback(
-    (killsMap: Record<string, DetailedKill[]>) => {
-      update(prev => {
-        const oldMap = prev.detailedKills ?? {};
-        const updated: Record<string, DetailedKill[]> = { ...oldMap };
-
-        for (const [sid, newKills] of Object.entries(killsMap)) {
-          const existing = updated[sid] ?? [];
-          const combined = combineKills(existing, newKills, sinceHours);
-          updated[sid] = combined;
-        }
-
-        return {
-          ...prev,
-          detailedKills: updated,
-        };
-      });
-    },
-    [update, sinceHours],
-  );
-
-  const fetchKills = useCallback(
-    async (forceFallback = false) => {
-      setIsLoading(true);
-      setError(null);
-
-      try {
-        let eventType: OutCommand;
-        let requestData: Record<string, unknown>;
-
-        if (showAllVisible || forceFallback) {
-          eventType = OutCommand.getSystemsKills;
-          requestData = {
-            system_ids: effectiveSystemIds,
-            since_hours: sinceHours,
-          };
-        } else if (systemId) {
-          eventType = OutCommand.getSystemKills;
-          requestData = {
-            system_id: systemId,
-            since_hours: sinceHours,
-          };
-        } else {
-          // If there's no system and not showing all, do nothing
-          setIsLoading(false);
-          return;
-        }
-
-        const resp = await outCommand({
-          type: eventType,
-          data: requestData,
-        });
-
-        // Single system => `resp.kills`
-        if (resp?.kills) {
-          const arr = resp.kills as DetailedKill[];
-          const sid = systemId ?? 'unknown';
-          mergeKillsIntoGlobal({ [sid]: arr });
-        }
-        // multiple systems => `resp.systems_kills`
-        else if (resp?.systems_kills) {
-          mergeKillsIntoGlobal(resp.systems_kills as Record<string, DetailedKill[]>);
-        } else {
-          console.warn('[useSystemKills] Unexpected kills response =>', resp);
-        }
-      } catch (err) {
-        console.error('[useSystemKills] Failed to fetch kills:', err);
-        setError(err instanceof Error ? err.message : 'Error fetching kills');
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [showAllVisible, systemId, outCommand, effectiveSystemIds, sinceHours, mergeKillsIntoGlobal],
-  );
-
-  const debouncedFetchKills = useMemo(
-    () =>
-      debounce(fetchKills, 500, {
-        leading: true,
-        trailing: false,
-      }),
-    [fetchKills],
-  );
-
-  const finalKills = useMemo(() => {
-    if (showAllVisible) {
-      return effectiveSystemIds.flatMap(sid => detailedKills[sid] ?? []);
-    } else if (systemId) {
-      return detailedKills[systemId] ?? [];
-    } else if (didFallbackFetch.current) {
-      // if we already did a fallback, we may have data for multiple systems
-      return effectiveSystemIds.flatMap(sid => detailedKills[sid] ?? []);
-    }
-    return [];
-  }, [showAllVisible, systemId, effectiveSystemIds, detailedKills]);
-
-  const effectiveIsLoading = isLoading && finalKills.length === 0;
-
-  useEffect(() => {
-    if (!systemId && !showAllVisible && !didFallbackFetch.current) {
-      didFallbackFetch.current = true;
-      // Cancel any queued debounced calls, then do the fallback.
-      debouncedFetchKills.cancel();
-      fetchKills(true); // forceFallback => fetch as though showAllVisible is true
-    }
-  }, [systemId, showAllVisible, debouncedFetchKills, fetchKills]);
-
-  useEffect(() => {
-    if (effectiveSystemIds.length === 0) return;
-
-    if (showAllVisible || systemId) {
-      debouncedFetchKills();
-      // Clean up the debounce on unmount or changes
-      return () => debouncedFetchKills.cancel();
-    }
-  }, [showAllVisible, systemId, effectiveSystemIds, debouncedFetchKills]);
-
-  const refetch = useCallback(() => {
-    debouncedFetchKills.cancel();
-    fetchKills(); // immediate (non-debounced) call
-  }, [debouncedFetchKills, fetchKills]);
-
-  return {
-    kills: finalKills,
-    isLoading: effectiveIsLoading,
-    error,
-    refetch,
-  };
-}