chore: release version v1.13.7

.devcontainer/Dockerfile

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

.devcontainer/docker-compose.yml

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

.env.example

@@ -6,5 +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_ZKILL_PRELOAD_DISABLED="false"

.github/workflows/build.yml

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

.github/workflows/release_actions.yml

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

.tool-versions

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

Dockerfile

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

README.md

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

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,467 +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;
-}

assets/js/hooks/Mapper/MapRoot.tsx

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

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

@@ -108,32 +108,3 @@
 .p-dropdown-empty-message {
   padding: 0.25rem 0.5rem;
 }
-
-.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
-  margin-right: 0 !important;
-}
-
-/* Fixed sizes of Input switch */
-.p-inputswitch {
-  width: 2.0rem;
-  height: 1.15rem;
-
-  .p-inputswitch-slider:before {
-    width: 0.8rem;
-    height: 0.8rem;
-    left: 0.14rem;
-    margin-top: -0.385rem;
-  }
-
-  &.p-highlight .p-inputswitch-slider:before {
-    transform: translateX(0.8rem);
-  }
-
-  &:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
-    background: rgb(255 255 255 / 21%);
-  }
-
-  &.p-highlight .p-inputswitch-slider {
-    background: #966d3d;
-  }
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,39 +1,43 @@
-import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect, useMemo } from 'react';
+import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect, useRef } from 'react';
 import ReactFlow, {
   Background,
+  ConnectionMode,
   Edge,
-  EdgeChange,
   MiniMap,
   Node,
-  NodeChange,
   NodeDragHandler,
   OnConnect,
   OnMoveEnd,
   OnSelectionChangeFunc,
   SelectionDragHandler,
   SelectionMode,
+  useEdgesState,
+  useNodesState,
+  NodeChange,
   useReactFlow,
 } from 'reactflow';
 import 'reactflow/dist/style.css';
 import classes from './Map.module.scss';
+import './styles/neon-theme.scss';
+import './styles/eve-common.scss';
 import { MapProvider, useMapState } from './MapProvider';
-import { useEdgesState, useMapHandlers, useNodesState, useUpdateNodes } from './hooks';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useMapHandlers, useUpdateNodes } from './hooks';
 import { MapHandlers, OutCommand, OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers.ts';
 import {
   ContextMenuConnection,
   ContextMenuRoot,
   SolarSystemEdge,
+  SolarSystemNode,
   useContextMenuConnectionHandlers,
   useContextMenuRootHandlers,
 } from './components';
-import { getBehaviorForTheme } from './helpers/getThemeBehavior';
-import { OnMapAddSystemCallback, OnMapSelectionChange } from './map.types';
+import { OnMapSelectionChange } from './map.types';
 import { SESSION_KEY } from '@/hooks/Mapper/constants.ts';
 import { SolarSystemConnection, SolarSystemRawType } from '@/hooks/Mapper/types';
 import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
 import { NodeSelectionMouseHandler } from '@/hooks/Mapper/components/contexts/types.ts';
-import clsx from 'clsx';
-import { useBackgroundVars } from './hooks/useBackgroundVars';
+import { useDeleteSystems } from '@/hooks/Mapper/components/contexts/hooks';
 
 const DEFAULT_VIEW_PORT = { zoom: 1, x: 0, y: 0 };
 
@@ -75,6 +79,12 @@ const initialEdges = [
   },
 ];
 
+const nodeTypes = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  custom: SolarSystemNode,
+} as never;
+
 const edgeTypes = {
   floating: SolarSystemEdge,
 };
@@ -83,19 +93,12 @@ interface MapCompProps {
   refn: ForwardedRef<MapHandlers>;
   onCommand: OutCommandHandler;
   onSelectionChange: OnMapSelectionChange;
-  onManualDelete(systems: string[]): void;
-  canRemoveConnection?(connectionId: string): boolean;
   onConnectionInfoClick?(e: SolarSystemConnection): void;
-  onAddSystem?: OnMapAddSystemCallback;
   onSelectionContextMenu?: NodeSelectionMouseHandler;
   minimapClasses?: string;
   isShowMinimap?: boolean;
   onSystemContextMenu: (event: MouseEvent<Element>, systemId: string) => void;
   showKSpaceBG?: boolean;
-  isThickConnections?: boolean;
-  isShowBackgroundPattern?: boolean;
-  isSoftBackground?: boolean;
-  theme?: string;
 }
 
 const MapComp = ({
@@ -106,34 +109,26 @@ const MapComp = ({
   onSystemContextMenu,
   onConnectionInfoClick,
   onSelectionContextMenu,
-  onManualDelete,
   isShowMinimap,
   showKSpaceBG,
-  isThickConnections,
-  isShowBackgroundPattern,
-  isSoftBackground,
-  theme,
-  onAddSystem,
-  canRemoveConnection,
 }: MapCompProps) => {
-  const { getEdge, getNode, getNodes } = useReactFlow();
-  const [nodes, , onNodesChange] = useNodesState<Node<SolarSystemRawType>>(initialNodes);
-  const [edges, , onEdgesChange] = useEdgesState<Edge<SolarSystemConnection>>(initialEdges);
+  const { getNode } = useReactFlow();
+  const [nodes, , onNodesChange] = useNodesState<SolarSystemRawType>(initialNodes);
+  const [edges, , onEdgesChange] = useEdgesState<Edge<SolarSystemConnection>[]>(initialEdges);
 
   useMapHandlers(refn, onSelectionChange);
   useUpdateNodes(nodes);
-  const { handleRootContext, ...rootCtxProps } = useContextMenuRootHandlers({ onAddSystem });
+  const { handleRootContext, ...rootCtxProps } = useContextMenuRootHandlers();
   const { handleConnectionContext, ...connectionCtxProps } = useContextMenuConnectionHandlers();
   const { update } = useMapState();
-  const { variant, gap, size, color } = useBackgroundVars(theme);
-  const { isPanAndDrag, nodeComponent, connectionMode } = getBehaviorForTheme(theme || 'default');
+  const {
+    data: { systems },
+  } = useMapRootState();
 
-  // You can create nodeTypes dynamically based on the node component
-  const nodeTypes = useMemo(() => {
-    return {
-      custom: nodeComponent,
-    };
-  }, [nodeComponent]);
+  const { deleteSystems } = useDeleteSystems();
+
+  const systemsRef = useRef({ systems });
+  systemsRef.current = { systems };
 
   const onConnect: OnConnect = useCallback(
     params => {
@@ -191,97 +186,51 @@ const MapComp = ({
   const handleNodesChange = useCallback(
     (changes: NodeChange[]) => {
       const systemsIdsToRemove: string[] = [];
-
-      // prevents single node deselection on background / same node click
-      // allows deseletion of all nodes if multiple are currently selected
-      if (changes.length === 1 && changes[0].type == 'select' && changes[0].selected === false) {
-        changes[0].selected = getNodes().filter(node => node.selected).length === 1;
-      }
-
       const nextChanges = changes.reduce((acc, change) => {
-        if (change.type !== 'remove') {
-          return [...acc, change];
-        }
-
-        const node = getNode(change.id);
-        if (!node) {
-          return [...acc, change];
-        }
-
-        if (node.data.locked) {
+        if (change.type === 'remove') {
+          const node = getNode(change.id);
+          const { systems = [] } = systemsRef.current;
+          if (node?.data?.id && !systems.map(s => s.id).includes(node?.data?.id)) {
+            return [...acc, change];
+          } else if (!node?.data?.locked) {
+            systemsIdsToRemove.push(node?.data?.id);
+          }
           return acc;
         }
-
-        systemsIdsToRemove.push(node.data.id);
         return [...acc, change];
       }, [] as NodeChange[]);
 
-      if (systemsIdsToRemove.length > 0) {
-        onManualDelete(systemsIdsToRemove);
+      if (systemsIdsToRemove.length) {
+        deleteSystems(systemsIdsToRemove);
       }
 
       onNodesChange(nextChanges);
     },
-    [getNode, getNodes, onManualDelete, onNodesChange],
-  );
-
-  const handleEdgesChange = useCallback(
-    (changes: EdgeChange[]) => {
-      const nextChanges = changes.reduce((acc, change) => {
-        if (change.type !== 'remove') {
-          return [...acc, change];
-        }
-
-        if (canRemoveConnection?.(change.id)) {
-          return [...acc, change];
-        }
-
-        const edge = getEdge(change.id);
-        if (!edge) {
-          return [...acc, change];
-        }
-
-        const sourceNode = getNode(edge.source);
-        const targetNode = getNode(edge.target);
-        if (!sourceNode || !targetNode) {
-          return [...acc, change];
-        }
-
-        if (sourceNode.data.locked || targetNode.data.locked) {
-          return acc;
-        }
-
-        return [...acc, change];
-      }, [] as EdgeChange[]);
-
-      onEdgesChange(nextChanges);
-    },
-    [getEdge, getNode, onEdgesChange],
+    [deleteSystems, getNode, onNodesChange],
   );
 
   useEffect(() => {
     update(x => ({
       ...x,
       showKSpaceBG: showKSpaceBG,
-      isThickConnections: isThickConnections,
     }));
-  }, [showKSpaceBG, isThickConnections, update]);
+  }, [showKSpaceBG, update]);
 
   return (
     <>
-      <div className={clsx(classes.MapRoot, { [classes.BackgroundAlternateColor]: isSoftBackground })}>
+      <div className={classes.MapRoot}>
         <ReactFlow
           nodes={nodes}
           edges={edges}
           onNodesChange={handleNodesChange}
-          onEdgesChange={handleEdgesChange}
+          onEdgesChange={onEdgesChange}
           onConnect={onConnect}
           // TODO we need save into session all of this
           //      and on any action do either
           defaultViewport={getViewPortFromStore()}
           edgeTypes={edgeTypes}
           nodeTypes={nodeTypes}
-          connectionMode={connectionMode}
+          connectionMode={ConnectionMode.Loose}
           snapToGrid
           nodeDragThreshold={10}
           onNodeDragStop={handleDragStop}
@@ -289,11 +238,6 @@ const MapComp = ({
           onConnectStart={() => update({ isConnecting: true })}
           onConnectEnd={() => update({ isConnecting: false })}
           onNodeMouseEnter={(_, node) => update({ hoverNodeId: node.id })}
-          onPaneClick={event => {
-            event.preventDefault();
-            event.stopPropagation();
-          }}
-          // onKeyUp=
           onNodeMouseLeave={() => update({ hoverNodeId: null })}
           onEdgeClick={(_, t) => {
             onConnectionInfoClick?.(t.data);
@@ -314,19 +258,13 @@ const MapComp = ({
           maxZoom={1.5}
           elevateNodesOnSelect
           deleteKeyCode={['Delete']}
-          {...(isPanAndDrag
-            ? {
-                selectionOnDrag: true,
-                panOnDrag: [2],
-              }
-            : {})}
           // TODO need create clear example with problem with that flag
           //  if system is not visible edge not drawing (and any render in Custom node is not happening)
           // onlyRenderVisibleElements
           selectionMode={SelectionMode.Partial}
         >
           {isShowMinimap && <MiniMap pannable zoomable ariaLabel="Mini map" className={minimapClasses} />}
-          {isShowBackgroundPattern && <Background variant={variant} gap={gap} size={size} color={color} />}
+          <Background />
         </ReactFlow>
         {/* <button className="z-auto btn btn-primary absolute top-20 right-20" onClick={handleGetPassages}>
           Test // DON NOT REMOVE

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

@@ -1,6 +1,6 @@
 import React, { createContext, useContext } from 'react';
 import { OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers.ts';
-import { MapUnionTypes, SystemSignature } from '@/hooks/Mapper/types';
+import { MapUnionTypes } from '@/hooks/Mapper/types';
 import { ContextStoreDataUpdate, useContextStore } from '@/hooks/Mapper/utils';
 
 export type MapData = MapUnionTypes & {
@@ -8,8 +8,6 @@ export type MapData = MapUnionTypes & {
   hoverNodeId: string | null;
   visibleNodes: Set<string>;
   showKSpaceBG: boolean;
-  isThickConnections: boolean;
-  linkedSigEveId: string;
 };
 
 interface MapProviderProps {
@@ -19,7 +17,6 @@ interface MapProviderProps {
 
 const INITIAL_DATA: MapData = {
   wormholesData: {},
-  wormholes: [],
   effects: {},
   characters: [],
   userCharacters: [],
@@ -30,13 +27,8 @@ const INITIAL_DATA: MapData = {
   isConnecting: false,
   connections: [],
   hoverNodeId: null,
-  linkedSigEveId: '',
   visibleNodes: new Set(),
   showKSpaceBG: false,
-  isThickConnections: false,
-  userPermissions: {},
-  systemSignatures: {} as Record<string, SystemSignature[]>,
-  options: {} as Record<string, string | boolean>,
 };
 
 export interface MapContextProps {

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -6,14 +6,7 @@ $pastel-green: #88b04b;
 $pastel-yellow: #ffdd59;
 $dark-bg: #2d2d2d;
 $text-color: #ffffff;
-$tooltip-bg: #202020;
-
-$node-bg-color: #202020;
-$node-soft-bg-color: #202020;
-$text-color: #ffffff;
-$tag-color:  #38BDF8;
-$region-name: #D6D3D1;
-$custom-name: #93C5FD;
+$tooltip-bg: #202020; // Темный фон для подсказок
 
 .RootCustomNode {
   display: flex;
@@ -92,7 +85,7 @@ $custom-name: #93C5FD;
     box-shadow: 0 0 10px #9a1af1c2;
   }
 
-  &.tooltip {
+  .tooltip {
     background-color: $tooltip-bg;
     color: $text-color;
     padding: 5px 10px;
@@ -101,66 +94,49 @@ $custom-name: #93C5FD;
   }
 
   &.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
-    );
+    border: 1px solid darken($eve-solar-system-status-color-home, 30%);
+    background-image: linear-gradient(275deg, $eve-solar-system-status-friendly, transparent);
+
     &.selected {
-      border-color: var(--eve-solar-system-status-color-home);
+      border-color: $eve-solar-system-status-color-home;
     }
   }
 
   &.eve-system-status-friendly {
-    border: 1px solid var(--eve-solar-system-status-color-friendly-dark20);
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-friendly-dark30),
-      transparent
-    );
+    border: 1px solid darken($eve-solar-system-status-color-friendly, 20%);
+    background-image: linear-gradient(275deg, darken($eve-solar-system-status-friendly, 30%), transparent);
+
     &.selected {
-      border-color: var(--eve-solar-system-status-color-friendly-dark5);
+      border-color: darken($eve-solar-system-status-color-friendly, 5%);
     }
   }
 
   &.eve-system-status-lookingFor {
-    border: 1px solid var(--eve-solar-system-status-color-lookingFor-dark15);
+    border: 1px solid darken($eve-solar-system-status-color-lookingFor, 15%);
     background-image: linear-gradient(275deg, #45ff8f2f, #457fff2f);
+
     &.selected {
       border-color: $pastel-pink;
     }
   }
 
   &.eve-system-status-warning {
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-warning),
-      transparent
-    );
+    background-image: linear-gradient(275deg, $eve-solar-system-status-warning, transparent);
   }
 
   &.eve-system-status-dangerous {
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-dangerous),
-      transparent
-    );
+    background-image: linear-gradient(275deg, $eve-solar-system-status-dangerous, transparent);
   }
 
   &.eve-system-status-target {
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-target),
-      transparent
-    );
+    background-image: linear-gradient(275deg, $eve-solar-system-status-target, transparent);
   }
 }
 
 .Bookmarks {
   position: absolute;
   width: 100%;
-  z-index: 1;
+  z-index: 0;
   display: flex;
   left: 4px;
 
@@ -206,42 +182,6 @@ $custom-name: #93C5FD;
   }
 }
 
-.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;
@@ -266,18 +206,10 @@ $custom-name: #93C5FD;
 
   .TagTitle {
     font-size: 11px;
-    font-weight: medium;
+    font-weight: bold;
     text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
 
-    color: var(--rf-tag-color, #38BDF8);
-  }
-
-  /* Firefox kostyl */
-  @-moz-document url-prefix() {
-    .classSystemName {
-      font-family: inherit !important;
-      font-weight: bold;
-    }
+    color: #ffb01d;
   }
 
   .classSystemName {
@@ -330,12 +262,6 @@ $custom-name: #93C5FD;
   & > * {
     line-height: 10px;
   }
-
-  /* Firefox kostyl */
-  @-moz-document url-prefix() {
-    position: relative;
-    top: -1px;
-  }
 }
 
 .Handlers {
@@ -373,25 +299,4 @@ $custom-name: #93C5FD;
   &.HandleLeft {
     left: -2px;
   }
-
-  &.Tick {
-    width: 7px;
-    height: 7px;
-
-    &.HandleTop {
-      top: -3px;
-    }
-
-    &.HandleRight {
-      right: -3px;
-    }
-
-    &.HandleBottom {
-      bottom: -3px;
-    }
-
-    &.HandleLeft {
-      left: -3px;
-    }
-  }
 }

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

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

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

@@ -1,209 +0,0 @@
-import { memo } from 'react';
-import { MapSolarSystemType } from '../../map.types';
-import { Handle, Position, NodeProps } from 'reactflow';
-import clsx from 'clsx';
-import classes from './SolarSystemNodeDefault.module.scss';
-import { PrimeIcons } from 'primereact/api';
-import { useSolarSystemNode } from '../../hooks/useSolarSystemNode';
-import {
-  MARKER_BOOKMARK_BG_STYLES,
-  STATUS_CLASSES,
-  EFFECT_BACKGROUND_STYLES,
-} from '@/hooks/Mapper/components/map/constants';
-import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/WormholeClassComp';
-import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
-
-export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>) => {
-  const nodeVars = useSolarSystemNode(props);
-
-  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>
-          )}
-
-          {nodeVars.killsCount && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!])}>
-              <div className={clsx(classes.BookmarkWithIcon)}>
-                <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
-                <span className={clsx(classes.text)}>{nodeVars.killsCount}</span>
-              </div>
-            </div>
-          )}
-
-          {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],
-          classes[STATUS_CLASSES[nodeVars.status]],
-          {
-            [classes.selected]: nodeVars.selected,
-          },
-        )}
-      >
-        {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={whClass} id={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 justify-end">
-                <div className="flex gap-1 items-center">
-                  {nodeVars.locked && (
-                    <i className={PrimeIcons.LOCK} style={{ fontSize: '0.45rem', fontWeight: 'bold' }} />
-                  )}
-
-                  {nodeVars.hubs.includes(nodeVars.solarSystemId.toString()) && (
-                    <i className={PrimeIcons.MAP_MARKER} style={{ fontSize: '0.45rem', fontWeight: 'bold' }} />
-                  )}
-
-                  {nodeVars.charactersInSystem.length > 0 && (
-                    <div
-                      className={clsx(classes.localCounter, {
-                        ['text-amber-300']: nodeVars.hasUserCharacters,
-                      })}
-                    >
-                      <i className="pi pi-users" style={{ fontSize: '0.50rem' }} />
-                      <span className="font-sans">{nodeVars.charactersInSystem.length}</span>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-
-      {nodeVars.visible && (
-        <>
-          {nodeVars.unsplashedLeft.length > 0 && (
-            <div className={classes.Unsplashed}>
-              {nodeVars.unsplashedLeft.map(sig => (
-                <UnsplashedSignature key={sig.sig_id} signature={sig} />
-              ))}
-            </div>
-          )}
-
-          {nodeVars.unsplashedRight.length > 0 && (
-            <div className={clsx(classes.Unsplashed, classes['Unsplashed--right'])}>
-              {nodeVars.unsplashedRight.map(sig => (
-                <UnsplashedSignature key={sig.sig_id} signature={sig} />
-              ))}
-            </div>
-          )}
-        </>
-      )}
-
-      <div onMouseDownCapture={nodeVars.dbClick} 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,91 +0,0 @@
-@import './SolarSystemNodeDefault.module.scss';
-
-/* ---------------------------
-   Only override what's different
---------------------------- */
-
-/* 1) .RootCustomNode:
-   - new background-color using CSS var
-   - plus color, font-family, and font-weight */
-.RootCustomNode {
-  background-color: var(--rf-node-bg-color, #202020) !important;
-  color: var(--rf-text-color, #ffffff);
-  font-family: var(--rf-node-font-family, inherit) !important;
-  font-weight: var(--rf-node-font-weight, inherit) !important;
-}
-
-/* 2) .Bookmarks:
-   - add var-based font family/weight
-*/
-.Bookmarks {
-  font-family: var(--rf-node-font-family, inherit) !important;
-  font-weight: var(--rf-node-font-weight, inherit) !important;
-}
-
-/* 3) .HeadRow, .classTitle, .classSystemName:
-   - add new references to var-based font family/weight
-*/
-.HeadRow {
-  font-family: var(--rf-node-font-family, inherit) !important;
-  font-weight: var(--rf-node-font-weight, inherit) !important;
-
-  .classTitle {
-    font-family: var(--rf-node-font-family, inherit) !important;
-    font-weight: var(--rf-node-font-weight, inherit) !important;
-  }
-
-  @-moz-document url-prefix() {
-    .classSystemName {
-      font-family: var(--rf-node-font-family, inherit) !important;
-      font-weight: var(--rf-node-font-weight, inherit) !important;
-    }
-  }
-
-  .classSystemName {
-    font-family: var(--rf-node-font-family, inherit) !important;
-    font-weight: var(--rf-node-font-weight, inherit) !important;
-  }
-}
-
-/* 4) .BottomRow:
-   - introduces .tagTitle, .regionName, .customName, .localCounter
-     referencing new CSS variables */
-.BottomRow {
-  font-family: var(--rf-node-font-family, inherit) !important;
-  font-weight: var(--rf-node-font-weight, inherit) !important;
-
-  .tagTitle {
-    font-size: 11px;
-    font-weight: medium;
-    text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
-    font-family: var(--rf-node-font-family, inherit) !important;
-    font-weight: var(--rf-node-font-weight, inherit) !important;
-    color: var(--rf-tag-color, #38BDF8);
-  }
-
-  .regionName {
-    color: var(--rf-region-name, #D6D3D1);
-    font-family: var(--rf-node-font-family, inherit) !important;
-    font-weight: var(--rf-node-font-weight, inherit) !important;
-  }
-
-  .customName {
-    color: var(--rf-custom-name, #93C5FD);
-    font-family: var(--rf-node-font-family, inherit) !important;
-    font-weight: var(--rf-node-font-weight, inherit) !important;
-  }
-
-  .localCounter {
-    display: flex;
-    color: var(--rf-has-user-characters, #fbbf24);
-    font-family: var(--rf-node-font-family, inherit) !important;
-    font-weight: var(--rf-node-font-weight, inherit) !important;
-    gap: 2px;
-
-    .hasUserCharacters {
-      color: var(--rf-has-user-characters, #fbbf24);
-      font-family: var(--rf-node-font-family, inherit) !important;
-      font-weight: var(--rf-node-font-weight, inherit) !important;
-    }
-  }
-}

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, Position, NodeProps } from 'reactflow';
-import clsx from 'clsx';
-import classes from './SolarSystemNodeTheme.module.scss';
-import { PrimeIcons } from 'primereact/api';
-import { useSolarSystemNode } from '../../hooks/useSolarSystemNode';
-import {
-  MARKER_BOOKMARK_BG_STYLES,
-  STATUS_CLASSES,
-  EFFECT_BACKGROUND_STYLES,
-} from '@/hooks/Mapper/components/map/constants';
-import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/WormholeClassComp';
-import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
-
-export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>) => {
-  const nodeVars = useSolarSystemNode(props);
-
-  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>
-          )}
-
-          {nodeVars.killsCount && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!])}>
-              <div className={clsx(classes.BookmarkWithIcon)}>
-                <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
-                <span className={clsx(classes.text)}>{nodeVars.killsCount}</span>
-              </div>
-            </div>
-          )}
-
-          {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],
-          classes[STATUS_CLASSES[nodeVars.status]],
-          {
-            [classes.selected]: nodeVars.selected,
-          },
-        )}
-      >
-        {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={whClass} id={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 justify-end">
-                <div className="flex gap-1 items-center">
-                  {nodeVars.locked && (
-                    <i className={PrimeIcons.LOCK} style={{ fontSize: '0.45rem', fontWeight: 'bold' }} />
-                  )}
-
-                  {nodeVars.hubs.includes(nodeVars.solarSystemId.toString()) && (
-                    <i className={PrimeIcons.MAP_MARKER} style={{ fontSize: '0.45rem', fontWeight: 'bold' }} />
-                  )}
-
-                  {nodeVars.charactersInSystem.length > 0 && (
-                    <div
-                      className={clsx(classes.localCounter, {
-                        [classes.hasUserCharacters]: nodeVars.hasUserCharacters,
-                      })}
-                    >
-                      <i className="pi pi-users" style={{ fontSize: '0.50rem' }} />
-                      <span className="font-sans">{nodeVars.charactersInSystem.length}</span>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-
-      {nodeVars.visible && (
-        <>
-          {nodeVars.unsplashedLeft.length > 0 && (
-            <div className={classes.Unsplashed}>
-              {nodeVars.unsplashedLeft.map(sig => (
-                <UnsplashedSignature key={sig.sig_id} signature={sig} />
-              ))}
-            </div>
-          )}
-
-          {nodeVars.unsplashedRight.length > 0 && (
-            <div className={clsx(classes.Unsplashed, classes['Unsplashed--right'])}>
-              {nodeVars.unsplashedRight.map(sig => (
-                <UnsplashedSignature key={sig.sig_id} signature={sig} />
-              ))}
-            </div>
-          )}
-        </>
-      )}
-
-      <div onMouseDownCapture={nodeVars.dbClick} className={classes.Handlers}>
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleTop, {
-            [classes.selected]: nodeVars.selected,
-            [classes.Tick]: nodeVars.isThickConnections,
-          })}
-          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Top}
-          id="a"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleRight, {
-            [classes.selected]: nodeVars.selected,
-            [classes.Tick]: nodeVars.isThickConnections,
-          })}
-          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Right}
-          id="b"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleBottom, {
-            [classes.selected]: nodeVars.selected,
-            [classes.Tick]: nodeVars.isThickConnections,
-          })}
-          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Bottom}
-          id="c"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleLeft, {
-            [classes.selected]: nodeVars.selected,
-            [classes.Tick]: nodeVars.isThickConnections,
-          })}
-          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Left}
-          id="d"
-        />
-      </div>
-    </>
-  );
-});
-
-SolarSystemNodeTheme.displayName = 'SolarSystemNodeTheme';

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

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

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

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

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

@@ -1,70 +0,0 @@
-import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
-import { InfoDrawer } from '@/hooks/Mapper/components/ui-kit';
-
-import classes from './UnsplashedSignature.module.scss';
-import { SystemSignature } from '@/hooks/Mapper/types/signatures';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { WORMHOLE_CLASS_STYLES, WORMHOLES_ADDITIONAL_INFO } from '@/hooks/Mapper/components/map/constants.ts';
-import { useMemo } from 'react';
-import clsx from 'clsx';
-import { renderInfoColumn } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders';
-import { K162_TYPES_MAP } from '@/hooks/Mapper/constants.ts';
-import { parseSignatureCustomInfo } from '@/hooks/Mapper/helpers/parseSignatureCustomInfo.ts';
-
-interface UnsplashedSignatureProps {
-  signature: SystemSignature;
-}
-export const UnsplashedSignature = ({ signature }: UnsplashedSignatureProps) => {
-  const {
-    data: { wormholesData },
-  } = useMapRootState();
-
-  const whData = useMemo(() => wormholesData[signature.type], [signature.type, wormholesData]);
-  const whClass = useMemo(() => (whData ? WORMHOLES_ADDITIONAL_INFO[whData.dest] : null), [whData]);
-
-  const customInfo = useMemo(() => {
-    return parseSignatureCustomInfo(signature.custom_info);
-  }, [signature]);
-
-  const k162TypeOption = useMemo(() => {
-    if (!customInfo?.k162Type) {
-      return null;
-    }
-
-    return K162_TYPES_MAP[customInfo.k162Type];
-  }, [customInfo]);
-
-  const isEOL = useMemo(() => {
-    return customInfo?.isEOL;
-  }, [customInfo]);
-
-  const whClassStyle = useMemo(() => {
-    if (signature.type === 'K162' && k162TypeOption) {
-      const k162Data = wormholesData[k162TypeOption.whClassName];
-      const k162Class = k162Data ? WORMHOLES_ADDITIONAL_INFO[k162Data.dest] : null;
-      return k162Class ? WORMHOLE_CLASS_STYLES[k162Class.wormholeClassID] : '';
-    }
-    return whClass ? WORMHOLE_CLASS_STYLES[whClass.wormholeClassID] : '';
-  }, [signature, whClass, k162TypeOption, wormholesData]);
-
-  return (
-    <WdTooltipWrapper
-      className={clsx(classes.Signature)}
-      // @ts-ignore
-      content={
-        <div className="flex flex-col gap-1">
-          <InfoDrawer title={<b className="text-slate-50">{signature.eve_id}</b>}>
-            {renderInfoColumn(signature)}
-          </InfoDrawer>
-        </div>
-      }
-    >
-      <div className={clsx(classes.Box, whClassStyle)}>
-        <svg width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg">
-          <rect y="1" width="13" height="4" rx="2" className={whClassStyle} fill="currentColor" />
-          {isEOL && <rect x="4" width="5" height="6" rx="1" className={clsx(classes.Eol)} fill="#a153ac" />}
-        </svg>
-      </div>
-    </WdTooltipWrapper>
-  );
-};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,44 +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');
-
-  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 cssColor = style.getPropertyValue('--rf-bg-pattern-color');
-
-    const gapNum = parseInt(cssVarGap, 10) || 16;
-    const sizeNum = parseInt(cssVarSize, 10) || 1;
-
-    setVariant(finalVariant);
-    setGap(gapNum);
-    setSize(sizeNum);
-    setColor(cssColor);
-  }, [themeName]);
-
-  return { variant, gap, size, color };
-}

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

@@ -19,6 +19,8 @@ import {
   MapHandlers,
 } from '@/hooks/Mapper/types/mapHandlers.ts';
 
+import { useMapEventListener } from '@/hooks/Mapper/events';
+
 import {
   useCommandsCharacters,
   useCommandsConnections,
@@ -58,19 +60,16 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
               mapInit(data as CommandInit);
               break;
             case Commands.addSystems:
-              setTimeout(() => mapAddSystems(data as CommandAddSystems), 100);
               break;
             case Commands.updateSystems:
               mapUpdateSystems(data as CommandUpdateSystems);
               break;
             case Commands.removeSystems:
-              setTimeout(() => removeSystems(data as CommandRemoveSystems), 100);
               break;
             case Commands.addConnections:
-              setTimeout(() => addConnections(data as CommandAddConnections), 100);
               break;
             case Commands.removeConnections:
-              setTimeout(() => removeConnections(data as CommandRemoveConnections), 100);
+              removeConnections(data as CommandRemoveConnections);
               break;
             case Commands.charactersUpdated:
               charactersUpdated(data as CommandCharactersUpdated);
@@ -112,17 +111,13 @@ 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;
@@ -136,4 +131,20 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
     },
     [],
   );
+
+  useMapEventListener(event => {
+    switch (event.name) {
+      case Commands.addConnections:
+        addConnections(event.data as CommandAddConnections);
+        break;
+      case Commands.addSystems:
+        mapAddSystems(event.data as CommandAddSystems);
+        break;
+      case Commands.removeSystems:
+        removeSystems(event.data as CommandRemoveSystems);
+        break;
+      default:
+        break;
+    }
+  });
 };

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

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

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

@@ -1,254 +0,0 @@
-import { useMemo } from 'react';
-import { MapSolarSystemType } from '../map.types';
-import { NodeProps } from 'reactflow';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
-import { useMapState } from '@/hooks/Mapper/components/map/MapProvider';
-import { useDoubleClick } from '@/hooks/Mapper/hooks/useDoubleClick';
-import { REGIONS_MAP, Spaces } from '@/hooks/Mapper/constants';
-import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace';
-import { getSystemClassStyles, prepareUnsplashedChunks } from '@/hooks/Mapper/components/map/helpers';
-import { sortWHClasses } from '@/hooks/Mapper/helpers';
-import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager';
-import { CharacterTypeRaw, OutCommand } from '@/hooks/Mapper/types';
-import { LABELS_INFO, LABELS_ORDER } from '@/hooks/Mapper/components/map/constants';
-
-function getActivityType(count: number) {
-  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[]) {
-  if (!labels) return [];
-  return LABELS_ORDER.filter(x => labels.includes(x)).map(x => LABELS_INFO[x]);
-}
-
-export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>) {
-  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,
-      presentCharacters,
-      wormholesData,
-      hubs,
-      kills,
-      userCharacters,
-      isConnecting,
-      hoverNodeId,
-      visibleNodes,
-      showKSpaceBG,
-      isThickConnections,
-    },
-    outCommand,
-  } = useMapState();
-
-  const visible = useMemo(() => visibleNodes.has(id), [id, visibleNodes]);
-
-  const systemSignatures = useMemo(
-    () => mapSystemSignatures[solar_system_id] || system_signatures,
-    [system_signatures, solar_system_id, mapSystemSignatures],
-  );
-
-  const charactersInSystem = useMemo(() => {
-    return characters.filter(c => c.location?.solar_system_id === solar_system_id).filter(c => c.online);
-    // eslint-disable-next-line
-  }, [characters, presentCharacters, solar_system_id]);
-
-  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 temporaryName = 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 && temporaryName) {
-      return temporaryName;
-    }
-    return solar_system_name;
-  }, [isTempSystemNameEnabled, solar_system_name, temporaryName]);
-
-  const customName = (isTempSystemNameEnabled && temporaryName && name) || (solar_system_name !== name && name) || null;
-
-  const [unsplashedLeft, unsplashedRight] = useMemo(() => {
-    if (!isShowUnsplashedSignatures) {
-      return [[], []];
-    }
-    return prepareUnsplashedChunks(
-      systemSignatures
-        .filter(s => s.group === 'Wormhole' && !s.linked_system)
-        .map(s => ({
-          eve_id: s.eve_id,
-          type: s.type,
-          custom_info: s.custom_info,
-        })),
-    );
-  }, [isShowUnsplashedSignatures, systemSignatures]);
-
-  const nodeVars = {
-    id,
-    selected,
-
-    visible,
-    isWormhole,
-    classTitleColor,
-    killsCount,
-    killsActivityType,
-    hasUserCharacters,
-    showHandlers,
-    regionClass,
-    systemName,
-    customName,
-    labelCustom,
-    isShattered: is_shattered,
-    tag,
-    status,
-    labelsInfo,
-    dbClick,
-    sortedStatics,
-    effectName: effect_name,
-    regionName: region_name,
-    solarSystemId: solar_system_id,
-    solarSystemName: solar_system_name,
-    locked,
-    hubs,
-    name: name,
-    isConnecting,
-    hoverNodeId,
-    charactersInSystem,
-    unsplashedLeft,
-    unsplashedRight,
-    isThickConnections,
-    classTitle: class_title,
-    temporaryName: temporary_name,
-  };
-
-  return nodeVars;
-}
-
-export interface SolarSystemNodeVars {
-  id: string;
-  selected: boolean;
-  visible: boolean;
-  isWormhole: boolean;
-  classTitleColor: string | null;
-  killsCount: number | null;
-  killsActivityType: string | null;
-  hasUserCharacters: boolean;
-  showHandlers: boolean;
-  regionClass: string | null;
-  systemName: string;
-  customName?: string | null;
-  labelCustom: string | null;
-  isShattered: boolean;
-  tag?: string | null;
-  status?: number;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  labelsInfo: Array<any>;
-  dbClick: (event?: void) => void;
-  sortedStatics: Array<string | number>;
-  effectName: string | null;
-  regionName: string | null;
-  solarSystemId: number;
-  solarSystemName: string | null;
-  locked: boolean;
-  hubs: string[] | number[];
-  name: string | null;
-  isConnecting: boolean;
-  hoverNodeId: string | null;
-  charactersInSystem: Array<CharacterTypeRaw>;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  unsplashedLeft: Array<any>;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  unsplashedRight: Array<any>;
-  isThickConnections: boolean;
-  classTitle: string | null;
-  temporaryName?: string | null;
-}

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,31 +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-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;
-}

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

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

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

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

assets/js/hooks/Mapper/components/map/styles/index.scss

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

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

@@ -0,0 +1,74 @@
+$pastel-blue: #5a7d9a;
+$pastel-pink: #d291bc;
+$pastel-green: #88b04b;
+$pastel-yellow: #ffdd59;
+$dark-bg: #2d2d2d;
+$text-color: #ffffff;
+$tooltip-bg: #202020;
+
+.react-flow {
+  // background-color: $dark-bg;
+  color: $text-color;
+
+  &__node {
+    //cursor: auto;
+  }
+
+  &__pane {
+    cursor: auto;
+  }
+  //&__edge {
+  //  stroke: $pastel-pink;
+  //  stroke-width: 2px;
+  //
+  //  &.selected {
+  //    stroke: $pastel-yellow;
+  //  }
+  //}
+
+  &__handle {
+    //background-color: $pastel-green;
+    //box-shadow: 0 0 5px rgba($pastel-green, 0.5);
+  }
+
+  &__minimap {
+    background-color: rgba(66, 66, 66, 1);
+    opacity: 0.7;
+    //backdrop-filter: blur(5px);
+    border: 1px solid #2f2f2f;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  &__minimap-mask {
+    fill: rgba(28, 28, 28, 0.75);
+  }
+
+  &__controls {
+    filter: brightness(1.5);
+  }
+
+  &__minimap-node {
+    fill: #ffb03a;
+  }
+}
+
+.context-menu-active {
+  background-color: rgba(131, 131, 131, 0.33);
+}
+
+.p-dialog {
+  .p-dialog-header {
+    height: 40px;
+    padding: 1rem;
+    padding-right: 10px !important;
+  }
+
+  .p-dialog-title {
+    font-size: 1rem !important;
+  }
+
+  .p-dialog-header-icons {
+    align-self: initial !important;
+  }
+}

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

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

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

@@ -1,51 +0,0 @@
-@import './eve-common-variables';
-@import './eve-common';
-@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap');
-
-.pathfinder-theme {
-  --rf-bg-color: #000000;
-  --rf-soft-bg-color: #282828;
-
-  --rf-node-bg-color: #202020;
-  --rf-node-soft-bg-color: #313335;
-  --rf-node-font-weight: bold;
-  --rf-text-color: #adadad;
-  --rf-region-name: var(--rf-text-color);
-  --rf-custom-name: var(--rf-text-color);
-
-  --tooltip-bg: #202020;
-
-  --rf-bg-variant: "lines";
-  --rf-bg-gap: 32;
-  --rf-bg-size: 1;
-  --rf-bg-pattern-color: #313131;
-
-  --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-font-weight: bold;
-  --rf-node-line-height: normal;
-  --rf-node-font-family: 'Oxygen', sans-serif;
-  --rf-node-text-color: var(--pf-text-color);
-
-  --rf-tag-color: #fbbf24;
-  --rf-has-user-characters: #5cb85c;
-
-  --window-corner: #72716f;
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,115 +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',
-  },
-];
-
-export function getWidgetsCheckboxesProps(detailedKillsDisabled: boolean): WidgetsCheckboxesType {
-  return filterOutKills(WIDGETS_CHECKBOXES_PROPS, detailedKillsDisabled);
-}
-
-
-function filterOutKills<T extends { id: WidgetsIds }>(items: T[], shouldFilter: boolean) {
-  if (!shouldFilter) return items;
-  return items.filter((w) => w.id !== WidgetsIds.kills);
-}

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useMemo } from 'react';
 import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
@@ -8,10 +8,6 @@ import { CharacterTypeRaw, WithIsOwnCharacter } from '@/hooks/Mapper/types';
 import { CharacterCard, LayoutEventBlocker, WdCheckbox } from '@/hooks/Mapper/components/ui-kit';
 import { sortCharacters } from '@/hooks/Mapper/components/mapInterface/helpers/sortCharacters.ts';
 import useLocalStorageState from 'use-local-storage-state';
-import { useMapCheckPermissions, useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
-import { UserPermission } from '@/hooks/Mapper/types/permissions.ts';
-import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
-import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
 
 type CharItemProps = {
   compact: boolean;
@@ -66,14 +62,6 @@ export const LocalCharacters = () => {
 
   const [systemId] = selectedSystems;
 
-  const restrictOfflineShowing = useMapGetOption('restrict_offline_showing');
-  const isAdminOrManager = useMapCheckPermissions([UserPermission.MANAGE_MAP]);
-
-  const showOffline = useMemo(
-    () => !restrictOfflineShowing || isAdminOrManager,
-    [isAdminOrManager, restrictOfflineShowing],
-  );
-
   const itemTemplate = useItemTemplate();
 
   const sorted = useMemo(() => {
@@ -82,39 +70,32 @@ export const LocalCharacters = () => {
       .map(x => ({ ...x, isOwn: userCharacters.includes(x.eve_id), compact: settings.compact }))
       .sort(sortCharacters);
 
-    if (!showOffline || !settings.showOffline) {
+    if (!settings.showOffline) {
       return sorted.filter(c => c.online);
     }
 
     return sorted;
     // eslint-disable-next-line
-  }, [showOffline, characters, settings.showOffline, settings.compact, systemId, userCharacters, presentCharacters]);
+  }, [characters, settings.showOffline, settings.compact, systemId, userCharacters, presentCharacters]);
 
   const isNobodyHere = sorted.length === 0;
   const isNotSelectedSystem = selectedSystems.length !== 1;
   const showList = sorted.length > 0 && selectedSystems.length === 1;
 
-  const ref = useRef<HTMLDivElement>(null);
-  const compact = useMaxWidth(ref, 145);
-
   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">Local{showList ? ` [${sorted.length}]` : ''}</span>
           <LayoutEventBlocker className="flex items-center gap-2">
-            {showOffline && (
-              <WdTooltipWrapper content="Show offline characters in system">
-                <WdCheckbox
-                  size="xs"
-                  labelSide="left"
-                  label={compact ? '' : 'Show offline'}
-                  value={settings.showOffline}
-                  classNameLabel="text-stone-400 hover:text-stone-200 transition duration-300"
-                  onChange={() => setSettings(() => ({ ...settings, showOffline: !settings.showOffline }))}
-                />
-              </WdTooltipWrapper>
-            )}
+            <WdCheckbox
+              size="xs"
+              labelSide="left"
+              label={'Show offline'}
+              value={settings.showOffline}
+              classNameLabel="text-stone-400 hover:text-stone-200 transition duration-300"
+              onChange={() => setSettings(() => ({ ...settings, showOffline: !settings.showOffline }))}
+            />
 
             <span
               className={clsx('w-4 h-4 cursor-pointer', {
@@ -134,9 +115,7 @@ export const LocalCharacters = () => {
       )}
 
       {isNobodyHere && !isNotSelectedSystem && (
-        <div className="w-full h-full flex justify-center items-center select-none text-stone-400/80 text-sm">
-          Nobody here
-        </div>
+        <div className="w-full h-full flex justify-center items-center select-none text-stone-400/80 text-sm">Nobody here</div>
       )}
 
       {showList && (

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

@@ -5,7 +5,7 @@ import { SystemViewStandalone, WdTooltip, WdTooltipHandlers } from '@/hooks/Mapp
 import { getBackgroundClass, getShapeClass } from '@/hooks/Mapper/components/map/helpers';
 import { MouseEvent, useCallback, useRef, useState } from 'react';
 import { Commands } from '@/hooks/Mapper/types';
-import { emitMapEvent } from '@/hooks/Mapper/events';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 
 export type RouteSystemProps = {
   destination: number;
@@ -88,10 +88,11 @@ export interface RoutesListProps {
 
 export const RoutesList = ({ data, onContextMenu }: RoutesListProps) => {
   const [selected, setSelected] = useState<number | null>(null);
+  const { mapRef } = useMapRootState();
 
   const handleClick = useCallback(
-    (systemId: number) => emitMapEvent({ name: Commands.centerSystem, data: systemId?.toString() }),
-    [],
+    (systemId: number) => mapRef.current?.command(Commands.centerSystem, systemId.toString()),
+    [mapRef],
   );
 
   if (!data.has_connection) {

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

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

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

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

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

@@ -1,85 +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';
-
-export const SystemKills: React.FC = () => {
-  const {
-    data: { selectedSystems, systems },
-    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 [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;
-
-  return (
-    <div className="h-full flex flex-col min-h-0">
-      <div className="flex flex-col flex-1 min-h-0">
-        <Widget label={<KillsHeader systemId={systemId} onOpenSettings={() => setSettingsDialogVisible(true)} />}>
-          {isNothingSelected && (
-            <div className="w-full h-full flex justify-center items-center select-none text-center text-stone-400/80 text-sm">
-              No system selected (or toggle “Show all systems”)
-            </div>
-          )}
-
-          {!isNothingSelected && showLoading && (
-            <div className="w-full h-full flex justify-center items-center select-none text-center text-stone-400/80 text-sm">
-              Loading Kills...
-            </div>
-          )}
-
-          {!isNothingSelected && !showLoading && error && (
-            <div className="w-full h-full flex justify-center items-center select-none text-center text-red-400 text-sm">
-              {error}
-            </div>
-          )}
-
-          {!isNothingSelected && !showLoading && !error && (!kills || kills.length === 0) && (
-            <div className="w-full h-full flex justify-center items-center select-none text-center text-stone-400/80 text-sm">
-              No kills found
-            </div>
-          )}
-
-          {!isNothingSelected && !showLoading && !error && (
-            <div className="flex-1 flex flex-col overflow-y-auto">
-              <SystemKillsContent
-                key={settings.compact ? 'compact' : 'normal'}
-                kills={kills}
-                systemNameMap={systemNameMap}
-                compact={settings.compact}
-                onlyOneSystem={!visible}
-              />
-            </div>
-          )}
-        </Widget>
-      </div>
-
-      <KillsSettingsDialog visible={settingsDialogVisible} setVisible={setSettingsDialogVisible} />
-    </div>
-  );
-};

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

@@ -1,16 +0,0 @@
-.TableRowCompact {
-  height: 8px;
-  max-height: 8px;
-  font-size: 12px !important;
-  line-height: 8px;
-}
-
-.Table {
-  font-size: 12px;
-  border-collapse: collapse;
-}
-
-.Tooltip {
-  white-space: pre-line;
-  line-height: 1.2rem;
-}

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

@@ -1,50 +0,0 @@
-import React, { useMemo } from 'react';
-import clsx from 'clsx';
-import { DetailedKill } from '@/hooks/Mapper/types/kills';
-import { KillRow } from '../components/SystemKillsRow';
-
-interface SystemKillsContentProps {
-  kills: DetailedKill[];
-  systemNameMap: Record<string, string>;
-  compact?: boolean;
-  onlyOneSystem?: boolean;
-}
-
-export const SystemKillsContent: React.FC<SystemKillsContentProps> = ({
-  kills,
-  systemNameMap,
-  compact = false,
-  onlyOneSystem = false,
-}) => {
-  const sortedKills = useMemo(() => {
-    return [...kills].sort((a, b) => {
-      const timeA = a.kill_time ? new Date(a.kill_time).getTime() : 0;
-      const timeB = b.kill_time ? new Date(b.kill_time).getTime() : 0;
-      return timeB - timeA;
-    });
-  }, [kills]);
-
-  return (
-    <div
-      className={clsx(
-        'flex flex-col w-full text-stone-200 text-xs transition-all duration-300',
-        compact ? 'p-1' : 'p-1',
-      )}
-    >
-      {sortedKills.map(kill => {
-        const systemIdStr = String(kill.solar_system_id);
-        const systemName = systemNameMap[systemIdStr] || `System ${systemIdStr}`;
-
-        return (
-          <KillRow
-            key={kill.killmail_id}
-            killDetails={kill}
-            systemName={systemName}
-            isCompact={compact}
-            onlyOneSystem={onlyOneSystem}
-          />
-        );
-      })}
-    </div>
-  );
-};

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

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

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

@@ -1,180 +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 '../../../../ui-kit/WdTooltipWrapper';
-import classes from './SystemKillRow.module.scss';
-import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
-
-export interface CompactKillRowProps {
-  killDetails: DetailedKill;
-  systemName: string;
-  onlyOneSystem: boolean;
-}
-
-export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, systemName, onlyOneSystem }) => {
-  const {
-    killmail_id = 0,
-
-    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,
-
-    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;
-  const victimAffiliationTicker = victim_alliance_ticker || victim_corp_ticker || 'No Ticker';
-  const killValueFormatted = total_value != null && total_value > 0 ? `${formatISK(total_value)} ISK` : null;
-  const attackerName = attackerIsNpc ? '' : final_blow_char_name;
-  const attackerTicker = attackerIsNpc ? '' : final_blow_alliance_ticker || final_blow_corp_ticker || '';
-  const killTimeAgo = kill_time ? formatTimeMixed(kill_time) : '0h ago';
-  const attackerSubscript = getAttackerSubscript(killDetails);
-
-  const { victimCorpLogoUrl, victimAllianceLogoUrl } = buildVictimImageUrls({
-    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 || 0,
-  );
-
-  return (
-    <div
-      className={clsx(
-        'h-10 flex items-center border-b border-stone-800',
-        'text-xs whitespace-nowrap overflow-hidden leading-none',
-      )}
-    >
-      {victimPrimaryLogoUrl && (
-        <WdTooltipWrapper content={victimPrimaryTooltip} position={TooltipPosition.top}>
-          <a
-            href={zkillLink('kill', killmail_id)}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="relative shrink-0 w-8 h-8 overflow-hidden"
-          >
-            <img
-              src={victimPrimaryLogoUrl}
-              alt="VictimPrimaryLogo"
-              className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
-            />
-          </a>
-        </WdTooltipWrapper>
-      )}
-
-      <div className="flex flex-col ml-2 min-w-0 overflow-hidden leading-[1rem]">
-        <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 min-w-0 overflow-hidden text-right leading-[1rem]">
-          {!attackerIsNpc && (attackerName || attackerTicker) && (
-            <div className="truncate text-stone-200">
-              {attackerName}
-              {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={zkillLink('kill', killmail_id)}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="relative shrink-0 w-8 h-8 overflow-hidden"
-            >
-              <img
-                src={attackerPrimaryImageUrl}
-                alt={attackerIsNpc ? 'NpcShip' : 'AttackerPrimaryLogo'}
-                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]',
-                  )}
-                  style={{ bottom: 0, right: 0 }}
-                >
-                  {attackerSubscript.label}
-                </span>
-              )}
-            </a>
-          </WdTooltipWrapper>
-        )}
-      </div>
-    </div>
-  );
-};

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

@@ -1,197 +0,0 @@
-// FullKillRow.tsx
-import React from 'react';
-import clsx from 'clsx';
-import { DetailedKill } from '@/hooks/Mapper/types/kills';
-import {
-  formatISK,
-  formatTimeMixed,
-  zkillLink,
-  getAttackerSubscript,
-  buildVictimImageUrls,
-  buildAttackerImageUrls,
-  getPrimaryLogoAndTooltip,
-  getAttackerPrimaryImageAndTooltip,
-} from '../helpers';
-import { VictimRowSubInfo } from './VictimRowSubInfo';
-import { WdTooltipWrapper } from '../../../../ui-kit/WdTooltipWrapper';
-import classes from './SystemKillRow.module.scss';
-import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
-
-export interface FullKillRowProps {
-  killDetails: DetailedKill;
-  systemName: string;
-  onlyOneSystem: boolean;
-}
-
-export const FullKillRow: React.FC<FullKillRowProps> = ({ killDetails, systemName, onlyOneSystem }) => {
-  const {
-    killmail_id = 0,
-
-    victim_char_name = '',
-    victim_alliance_ticker = '',
-    victim_corp_ticker = '',
-    victim_ship_name = '',
-    victim_char_id = 0,
-    victim_corp_id = 0,
-    victim_alliance_id = 0,
-    victim_ship_type_id = 0,
-    victim_corp_name = '',
-    victim_alliance_name = '',
-
-    final_blow_char_id = 0,
-    final_blow_char_name = '',
-    final_blow_alliance_ticker = '',
-    final_blow_corp_ticker = '',
-    final_blow_corp_name = '',
-    final_blow_alliance_name = '',
-    final_blow_corp_id = 0,
-    final_blow_alliance_id = 0,
-    final_blow_ship_name = '',
-    final_blow_ship_type_id = 0,
-
-    total_value = 0,
-    kill_time = '',
-  } = killDetails || {};
-
-  const attackerIsNpc = final_blow_char_id === 0;
-  const victimAffiliation = victim_alliance_ticker || victim_corp_ticker;
-  const attackerAffiliation = attackerIsNpc ? '' : final_blow_alliance_ticker || final_blow_corp_ticker || '';
-
-  const killValueFormatted = total_value !== null && total_value > 0 ? `${formatISK(total_value)} ISK` : null;
-  const killTimeAgo = kill_time ? formatTimeMixed(kill_time) : '0h ago';
-
-  const { victimPortraitUrl, victimCorpLogoUrl, victimAllianceLogoUrl } = buildVictimImageUrls({
-    victim_char_id,
-    victim_ship_type_id,
-    victim_corp_id,
-    victim_alliance_id,
-  });
-  const { attackerPortraitUrl, attackerCorpLogoUrl, attackerAllianceLogoUrl } = buildAttackerImageUrls({
-    final_blow_char_id,
-    final_blow_corp_id,
-    final_blow_alliance_id,
-  });
-
-  const { url: victimPrimaryImageUrl, tooltip: victimPrimaryTooltip } = getPrimaryLogoAndTooltip(
-    victimAllianceLogoUrl,
-    victimCorpLogoUrl,
-    victim_alliance_name,
-    victim_corp_name,
-    'Victim',
-  );
-
-  const { url: attackerPrimaryImageUrl, tooltip: attackerPrimaryTooltip } = getAttackerPrimaryImageAndTooltip(
-    attackerIsNpc,
-    attackerAllianceLogoUrl,
-    attackerCorpLogoUrl,
-    final_blow_alliance_name,
-    final_blow_corp_name,
-    final_blow_ship_type_id || 0,
-  );
-
-  const attackerSubscript = getAttackerSubscript(killDetails);
-
-  return (
-    <div className={clsx(classes.killRowContainer, 'h-18 w-full justify-between items-start text-sm py-[4px]')}>
-      {/* ---------------- Victim Side ---------------- */}
-      <div className="flex items-start gap-1 min-w-0 h-full">
-        {/* Victim top-level logo (corp or alliance), with tooltip */}
-        {victimPrimaryImageUrl && (
-          <WdTooltipWrapper content={victimPrimaryTooltip} position={TooltipPosition.top}>
-            <div className="relative shrink-0 w-14 h-14 overflow-hidden">
-              <a
-                href={zkillLink('kill', killmail_id)}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="block w-full h-full"
-              >
-                <img
-                  src={victimPrimaryImageUrl}
-                  alt="VictimPrimaryLogo"
-                  className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
-                />
-              </a>
-            </div>
-          </WdTooltipWrapper>
-        )}
-        <VictimRowSubInfo
-          victimCharName={victim_char_name}
-          victimCharacterId={victim_char_id}
-          victimPortraitUrl={victimPortraitUrl}
-        />
-        <div className="flex flex-col text-stone-200 leading-4 min-w-0 overflow-hidden">
-          <div className="truncate">
-            <span className="font-semibold">{victim_char_name}</span>
-            {victimAffiliation && <span className="ml-1 text-stone-400">/ {victimAffiliation}</span>}
-          </div>
-          <div className="truncate text-stone-300">
-            {victim_ship_name}
-            {killValueFormatted && (
-              <>
-                <span className="ml-1 text-stone-400">/</span>
-                <span className="ml-1 text-green-400">{killValueFormatted}</span>
-              </>
-            )}
-          </div>
-          <div className="truncate text-stone-400">{!onlyOneSystem && systemName && <span>{systemName}</span>}</div>
-        </div>
-      </div>
-
-      <div className="flex items-start gap-1 min-w-0 h-full">
-        <div className="flex flex-col items-end leading-4 min-w-0 overflow-hidden text-right">
-          {!attackerIsNpc && (
-            <div className="truncate font-semibold">
-              {final_blow_char_name}
-              {attackerAffiliation && <span className="ml-1 text-stone-400">/ {attackerAffiliation}</span>}
-            </div>
-          )}
-          {!attackerIsNpc && final_blow_ship_name && (
-            <div className="truncate text-stone-300">{final_blow_ship_name}</div>
-          )}
-          <div className="truncate text-red-400">{killTimeAgo}</div>
-        </div>
-
-        {!attackerIsNpc && attackerPortraitUrl && final_blow_char_id !== null && final_blow_char_id > 0 && (
-          <div className="relative shrink-0 w-14 h-14 overflow-hidden">
-            <a
-              href={zkillLink('character', final_blow_char_id)}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="block w-full h-full"
-            >
-              <img
-                src={attackerPortraitUrl}
-                alt="AttackerPortrait"
-                className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
-              />
-            </a>
-          </div>
-        )}
-
-        {attackerPrimaryImageUrl && (
-          <WdTooltipWrapper content={attackerPrimaryTooltip} position={TooltipPosition.top}>
-            <div className="relative shrink-0 w-14 h-14 overflow-hidden">
-              <a
-                href={zkillLink('kill', killmail_id)}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="block w-full h-full"
-              >
-                <img
-                  src={attackerPrimaryImageUrl}
-                  alt={attackerIsNpc ? 'NpcShip' : 'AttackerPrimaryLogo'}
-                  className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
-                />
-                {attackerSubscript && (
-                  <span className={clsx(attackerSubscript.cssClass, classes.attackerCountLabel)}>
-                    {attackerSubscript.label}
-                  </span>
-                )}
-              </a>
-            </div>
-          </WdTooltipWrapper>
-        )}
-      </div>
-    </div>
-  );
-};

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

@@ -1,56 +0,0 @@
-import React from 'react';
-import {
-  LayoutEventBlocker,
-  WdCheckbox,
-  WdImgButton,
-  TooltipPosition,
-  SystemView,
-} from '@/hooks/Mapper/components/ui-kit';
-import { useKillsWidgetSettings } from '../hooks/useKillsWidgetSettings';
-import { PrimeIcons } from 'primereact/api';
-
-interface KillsWidgetHeaderProps {
-  systemId?: string;
-  onOpenSettings: () => void;
-}
-
-export const KillsHeader: React.FC<KillsWidgetHeaderProps> = ({ systemId, onOpenSettings }) => {
-  const [settings, setSettings] = useKillsWidgetSettings();
-  const { showAll } = settings;
-
-  const onToggleShowAllVisible = () => {
-    setSettings(prev => ({ ...prev, showAll: !prev.showAll }));
-  };
-
-  return (
-    <div className="flex justify-between items-center text-xs w-full">
-      <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 gap-2 items-center">
-        <WdCheckbox
-          size="xs"
-          labelSide="left"
-          label="Show all systems"
-          value={showAll}
-          classNameLabel="text-stone-400 hover:text-stone-200 transition duration-300"
-          onChange={onToggleShowAllVisible}
-        />
-
-        <WdImgButton
-          className={PrimeIcons.SLIDERS_H}
-          onClick={onOpenSettings}
-          tooltip={{
-            content: 'Open Kills Settings',
-            position: TooltipPosition.left,
-          }}
-        />
-      </LayoutEventBlocker>
-    </div>
-  );
-};

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

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

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

@@ -1,136 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Dialog } from 'primereact/dialog';
-import { Button } from 'primereact/button';
-import { WdImgButton, SystemView, TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
-import { PrimeIcons } from 'primereact/api';
-import { useKillsWidgetSettings } from '../hooks/useKillsWidgetSettings';
-import {
-  AddSystemDialog,
-  SearchOnSubmitCallback,
-} from '@/hooks/Mapper/components/mapInterface/components/AddSystemDialog';
-
-interface KillsSettingsDialogProps {
-  visible: boolean;
-  setVisible: (visible: boolean) => void;
-}
-
-export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visible, setVisible }) => {
-  const [globalSettings, setGlobalSettings] = useKillsWidgetSettings();
-  const localRef = useRef({
-    compact: globalSettings.compact,
-    showAll: globalSettings.showAll,
-    excludedSystems: globalSettings.excludedSystems || [],
-  });
-
-  const [, forceRender] = useState(0);
-
-  const [addSystemDialogVisible, setAddSystemDialogVisible] = useState(false);
-
-  useEffect(() => {
-    if (visible) {
-      localRef.current = {
-        compact: globalSettings.compact,
-        showAll: globalSettings.showAll,
-        excludedSystems: globalSettings.excludedSystems || [],
-      };
-      forceRender(n => n + 1);
-    }
-  }, [visible, globalSettings]);
-
-  const handleCompactChange = useCallback((checked: boolean) => {
-    localRef.current = {
-      ...localRef.current,
-      compact: checked,
-    };
-    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 || [];
-
-  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-compact-mode"
-            checked={localData.compact}
-            onChange={e => handleCompactChange(e.target.checked)}
-          />
-          <label htmlFor="kills-compact-mode" className="cursor-pointer">
-            Use compact mode
-          </label>
-        </div>
-
-        <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 compact />
-
-              <WdImgButton
-                className={PrimeIcons.TRASH}
-                onClick={() => handleRemoveSystem(sysId)}
-                tooltip={{ content: 'Remove from excluded', position: TooltipPosition.top }}
-              />
-            </div>
-          ))}
-        </div>
-
-        {/* Apply + Close button row */}
-        <div className="flex gap-2 justify-end mt-4">
-          <Button onClick={handleApply} label="Apply" outlined size="small" />
-        </div>
-      </div>
-
-      {/* AddSystemDialog for picking new systems to exclude */}
-      <AddSystemDialog
-        title="Add system to kills exclude list"
-        visible={addSystemDialogVisible}
-        setVisible={() => setAddSystemDialogVisible(false)}
-        onSubmit={handleAddSystemSubmit}
-        excludedSystems={excluded}
-      />
-    </Dialog>
-  );
-};

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

@@ -1,40 +0,0 @@
-// VictimSubRowInfo.tsx
-import React from 'react';
-import clsx from 'clsx';
-import { zkillLink } from '../helpers';
-import classes from './SystemKillRow.module.scss';
-
-interface VictimRowSubInfoProps {
-  victimCharacterId: number | null;
-  victimPortraitUrl: string | null;
-  victimCharName?: string;
-}
-
-export const VictimRowSubInfo: React.FC<VictimRowSubInfoProps> = ({
-  victimCharacterId = 0,
-  victimPortraitUrl,
-  victimCharName,
-}) => {
-  if (!victimPortraitUrl || victimCharacterId === null || victimCharacterId <= 0) {
-    return null;
-  }
-
-  return (
-    <div className="flex items-start gap-1 h-14">
-      <div className="relative shrink-0 w-14 h-14 overflow-hidden">
-        <a
-          href={zkillLink('character', victimCharacterId)}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="block w-full h-full"
-        >
-          <img
-            src={victimPortraitUrl}
-            alt={victimCharName || 'Victim Portrait'}
-            className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
-          />
-        </a>
-      </div>
-    </div>
-  );
-};

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/helpers/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,
-  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,51 +0,0 @@
-import { useMemo, useCallback } from 'react';
-import useLocalStorageState from 'use-local-storage-state';
-
-export interface KillsWidgetSettings {
-  compact: boolean;
-  showAll: boolean;
-  excludedSystems: number[];
-  version: number;
-}
-
-export const DEFAULT_KILLS_WIDGET_SETTINGS: KillsWidgetSettings = {
-  compact: false,
-  showAll: false,
-  excludedSystems: [],
-  version: 0,
-};
-
-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,178 +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;
-
-  const visibleSystemIds = useMemo(() => {
-    return systems.map(s => s.id).filter(id => !excludedSystems.includes(Number(id)));
-  }, [systems, excludedSystems]);
-
-  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: visibleSystemIds,
-            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 => `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, visibleSystemIds, sinceHours, mergeKillsIntoGlobal],
-  );
-
-  const debouncedFetchKills = useMemo(
-    () =>
-      debounce(fetchKills, 500, {
-        leading: true,
-        trailing: false,
-      }),
-    [fetchKills],
-  );
-
-  const finalKills = useMemo(() => {
-    if (showAllVisible) {
-      return visibleSystemIds.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 visibleSystemIds.flatMap(sid => detailedKills[sid] ?? []);
-    }
-    return [];
-  }, [showAllVisible, systemId, didFallbackFetch, visibleSystemIds, 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 showAll
-    }
-  }, [systemId, showAllVisible, debouncedFetchKills, fetchKills, didFallbackFetch]);
-
-  useEffect(() => {
-    if (visibleSystemIds.length === 0) return;
-
-    if (showAllVisible || systemId) {
-      debouncedFetchKills();
-      // Clean up the debounce on unmount or changes
-      return () => debouncedFetchKills.cancel();
-    }
-  }, [showAllVisible, systemId, visibleSystemIds, debouncedFetchKills]);
-
-  const refetch = useCallback(() => {
-    debouncedFetchKills.cancel();
-    fetchKills(); // immediate (non-debounced) call
-  }, [debouncedFetchKills, fetchKills]);
-
-  return {
-    kills: finalKills,
-    isLoading: effectiveIsLoading,
-    error,
-    refetch,
-  };
-}

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

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

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

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

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

@@ -1,11 +1,9 @@
 import { Dialog } from 'primereact/dialog';
 import { useCallback, useState } from 'react';
 import { Button } from 'primereact/button';
-import { TabPanel, TabView } from 'primereact/tabview';
-import styles from './SystemSignatureSettingsDialog.module.scss';
-import { PrettySwitchbox } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/components';
+import { Checkbox } from 'primereact/checkbox';
 
-export type Setting = { key: string; name: string; value: boolean; isFilter?: boolean };
+export type Setting = { key: string; name: string; value: boolean };
 
 export const COSMIC_SIGNATURE = 'Cosmic Signature';
 export const COSMIC_ANOMALY = 'Cosmic Anomaly';
@@ -26,12 +24,8 @@ export const SystemSignatureSettingsDialog = ({
   onSave,
   onCancel,
 }: SystemSignatureSettingsDialogProps) => {
-  const [activeIndex, setActiveIndex] = useState(0);
   const [settings, setSettings] = useState<Setting[]>(defaultSettings);
 
-  const filterSettings = settings.filter(setting => setting.isFilter);
-  const userSettings = settings.filter(setting => !setting.isFilter);
-
   const handleSettingsChange = (key: string) => {
     setSettings(prevState => prevState.map(item => (item.key === key ? { ...item, value: !item.value } : item)));
   };
@@ -41,45 +35,23 @@ export const SystemSignatureSettingsDialog = ({
   }, [onSave, settings]);
 
   return (
-    <Dialog header="System Signatures Settings" visible={true} onHide={onCancel} className="w-full max-w-lg h-[500px]">
-      <div className="flex flex-col gap-3 justify-between h-full">
+    <Dialog header="Filter signatures" visible draggable={false} style={{ width: '300px' }} onHide={onCancel}>
+      <div className="flex flex-col gap-3">
         <div className="flex flex-col gap-2">
-          <div className={styles.verticalTabsContainer}>
-            <TabView
-              activeIndex={activeIndex}
-              onTabChange={e => setActiveIndex(e.index)}
-              className={styles.verticalTabView}
-            >
-              <TabPanel header="Filters" headerClassName={styles.verticalTabHeader}>
-                <div className="w-full h-full flex flex-col gap-1">
-                  {filterSettings.map(setting => {
-                    return (
-                      <PrettySwitchbox
-                        key={setting.key}
-                        label={setting.name}
-                        checked={setting.value}
-                        setChecked={() => handleSettingsChange(setting.key)}
-                      />
-                    );
-                  })}
-                </div>
-              </TabPanel>
-              <TabPanel header="User Interface" headerClassName={styles.verticalTabHeader}>
-                <div className="w-full h-full flex flex-col gap-1">
-                  {userSettings.map(setting => {
-                    return (
-                      <PrettySwitchbox
-                        key={setting.key}
-                        label={setting.name}
-                        checked={setting.value}
-                        setChecked={() => handleSettingsChange(setting.key)}
-                      />
-                    );
-                  })}
-                </div>
-              </TabPanel>
-            </TabView>
-          </div>
+          {settings.map(setting => {
+            return (
+              <div key={setting.key} className="flex items-center">
+                <Checkbox
+                  inputId={setting.key}
+                  checked={setting.value}
+                  onChange={() => handleSettingsChange(setting.key)}
+                />
+                <label htmlFor={setting.key} className="ml-2">
+                  {setting.name}
+                </label>
+              </div>
+            );
+          })}
         </div>
 
         <div className="flex gap-2 justify-end">

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

@@ -1,61 +1,36 @@
 import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
-import {
-  InfoDrawer,
-  LayoutEventBlocker,
-  SystemView,
-  TooltipPosition,
-  WdCheckbox,
-  WdImgButton,
-} from '@/hooks/Mapper/components/ui-kit';
+import { InfoDrawer, LayoutEventBlocker, TooltipPosition, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
 import { SystemSignaturesContent } from './SystemSignaturesContent';
 import {
-  COSMIC_ANOMALY,
-  COSMIC_SIGNATURE,
-  DEPLOYABLE,
-  DRONE,
   Setting,
-  SHIP,
-  STARBASE,
-  STRUCTURE,
   SystemSignatureSettingsDialog,
+  COSMIC_SIGNATURE,
+  COSMIC_ANOMALY,
+  DEPLOYABLE,
+  STRUCTURE,
+  STARBASE,
+  SHIP,
+  DRONE,
 } from './SystemSignatureSettingsDialog';
-import { SignatureGroup } from '@/hooks/Mapper/types';
 
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { PrimeIcons } from 'primereact/api';
 
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { CheckboxChangeEvent } from 'primereact/checkbox';
-import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
-import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
-
-const SIGNATURE_SETTINGS_KEY = 'wanderer_system_signature_settings_v5_2';
-export const SHOW_DESCRIPTION_COLUMN_SETTING = 'show_description_column_setting';
-export const SHOW_UPDATED_COLUMN_SETTING = 'SHOW_UPDATED_COLUMN_SETTING';
-export const LAZY_DELETE_SIGNATURES_SETTING = 'LAZY_DELETE_SIGNATURES_SETTING';
-export const KEEP_LAZY_DELETE_SETTING = 'KEEP_LAZY_DELETE_ENABLED_SETTING';
 
 const settings: Setting[] = [
-  { key: SHOW_UPDATED_COLUMN_SETTING, name: 'Show Updated Column', value: false, isFilter: false },
-  { key: SHOW_DESCRIPTION_COLUMN_SETTING, name: 'Show Description Column', value: false, isFilter: false },
-  { key: LAZY_DELETE_SIGNATURES_SETTING, name: 'Lazy Delete Signatures', value: false, isFilter: false },
-  { key: KEEP_LAZY_DELETE_SETTING, name: 'Keep "Lazy Delete" Enabled', value: false, isFilter: false },
-  { key: COSMIC_ANOMALY, name: 'Show Anomalies', value: true, isFilter: true },
-  { key: COSMIC_SIGNATURE, name: 'Show Cosmic Signatures', value: true, isFilter: true },
-  { key: DEPLOYABLE, name: 'Show Deployables', value: true, isFilter: true },
-  { key: STRUCTURE, name: 'Show Structures', value: true, isFilter: true },
-  { key: STARBASE, name: 'Show Starbase', value: true, isFilter: true },
-  { key: SHIP, name: 'Show Ships', value: true, isFilter: true },
-  { key: DRONE, name: 'Show Drones And Charges', value: true, isFilter: true },
-  { key: SignatureGroup.Wormhole, name: 'Show Wormholes', value: true, isFilter: true },
-  { key: SignatureGroup.RelicSite, name: 'Show Relic Sites', value: true, isFilter: true },
-  { key: SignatureGroup.DataSite, name: 'Show Data Sites', value: true, isFilter: true },
-  { key: SignatureGroup.OreSite, name: 'Show Ore Sites', value: true, isFilter: true },
-  { key: SignatureGroup.GasSite, name: 'Show Gas Sites', value: true, isFilter: true },
-  { key: SignatureGroup.CombatSite, name: 'Show Combat Sites', value: true, isFilter: true },
+  { key: COSMIC_ANOMALY, name: 'Show Anomalies', value: true },
+  { key: COSMIC_SIGNATURE, name: 'Show Cosmic Signatures', value: true },
+  { key: DEPLOYABLE, name: 'Show Deployables', value: true },
+  { key: STRUCTURE, name: 'Show Structures', value: true },
+  { key: STARBASE, name: 'Show Starbase', value: true },
+  { key: SHIP, name: 'Show Ships', value: true },
+  { key: DRONE, name: 'Show Drones And Charges', value: true },
 ];
 
+const SIGNATURE_SETTINGS_KEY = 'wanderer_system_signature_settings';
+
 const defaultSettings = () => {
   return [...settings];
 };
@@ -72,25 +47,12 @@ export const SystemSignatures = () => {
 
   const isNotSelectedSystem = selectedSystems.length !== 1;
 
-  const lazyDeleteValue = useMemo(() => {
-    return settings.find(setting => setting.key === LAZY_DELETE_SIGNATURES_SETTING)!.value;
-  }, [settings]);
-
   const handleSettingsChange = useCallback((settings: Setting[]) => {
     setSettings(settings);
     localStorage.setItem(SIGNATURE_SETTINGS_KEY, JSON.stringify(settings));
     setVisible(false);
   }, []);
 
-  const handleLazyDeleteChange = useCallback((value: boolean) => {
-    setSettings(settings => {
-      const lazyDelete = settings.find(setting => setting.key === LAZY_DELETE_SIGNATURES_SETTING)!;
-      lazyDelete.value = value;
-      localStorage.setItem(SIGNATURE_SETTINGS_KEY, JSON.stringify(settings));
-      return [...settings];
-    });
-  }, []);
-
   useEffect(() => {
     const restoredSettings = localStorage.getItem(SIGNATURE_SETTINGS_KEY);
 
@@ -99,34 +61,13 @@ export const SystemSignatures = () => {
     }
   }, []);
 
-  const ref = useRef<HTMLDivElement>(null);
-  const compact = useMaxWidth(ref, 260);
-
   return (
     <Widget
       label={
-        <div className="flex justify-between items-center text-xs w-full h-full" ref={ref}>
-          <div className="flex justify-between items-center gap-1">
-            {!compact && (
-              <div className="flex whitespace-nowrap text-ellipsis overflow-hidden text-stone-400">
-                Signatures {isNotSelectedSystem ? '' : 'in'}
-              </div>
-            )}
-            {!isNotSelectedSystem && <SystemView systemId={systemId} className="select-none text-center" hideRegion />}
-          </div>
+        <div className="flex justify-between items-center text-xs w-full h-full">
+          <div className="flex gap-1">System Signatures</div>
 
           <LayoutEventBlocker className="flex gap-2.5">
-            <WdTooltipWrapper content="Enable Lazy delete">
-              <WdCheckbox
-                size="xs"
-                labelSide="left"
-                label={compact ? '' : 'Lazy delete'}
-                value={lazyDeleteValue}
-                classNameLabel="text-stone-400 hover:text-stone-200 transition duration-300 whitespace-nowrap text-ellipsis overflow-hidden"
-                onChange={(event: CheckboxChangeEvent) => handleLazyDeleteChange(!!event.checked)}
-              />
-            </WdTooltipWrapper>
-
             <WdImgButton
               className={PrimeIcons.QUESTION_CIRCLE}
               tooltip={{
@@ -150,7 +91,8 @@ export const SystemSignatures = () => {
                     </InfoDrawer>
                     <InfoDrawer title={<b className="text-slate-50">How to delete?</b>}>
                       For delete any signature first of all you need select before
-                      <br /> and then use <b className="text-sky-500">Del</b>
+                      <br /> and then use <b className="text-sky-500">Del</b> or{' '}
+                      <b className="text-sky-500">Backspace</b>
                     </InfoDrawer>
                   </div>
                 ) as React.ReactNode,
@@ -166,7 +108,7 @@ export const SystemSignatures = () => {
           System is not selected
         </div>
       ) : (
-        <SystemSignaturesContent systemId={systemId} settings={settings} onLazyDeleteChange={handleLazyDeleteChange} />
+        <SystemSignaturesContent systemId={systemId} settings={settings} />
       )}
       {visible && (
         <SystemSignatureSettingsDialog

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

@@ -1,11 +1,8 @@
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useClipboard } from '@/hooks/Mapper/hooks/useClipboard';
 import { parseSignatures } from '@/hooks/Mapper/helpers';
 import { Commands, OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { WdTooltip, WdTooltipHandlers } from '@/hooks/Mapper/components/ui-kit';
-import {
-  getGroupIdByRawGroup,
-  GROUPS_LIST,
-} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
 
 import { DataTable, DataTableRowClickEvent, DataTableRowMouseEvent, SortOrder } from 'primereact/datatable';
 import { Column } from 'primereact/column';
@@ -14,7 +11,6 @@ import useRefState from 'react-usestateref';
 import { Setting } from '../SystemSignatureSettingsDialog';
 import { useHotkey } from '@/hooks/Mapper/hooks';
 import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
-import { useClipboard } from '@/hooks/Mapper/hooks/useClipboard';
 
 import classes from './SystemSignaturesContent.module.scss';
 import clsx from 'clsx';
@@ -25,55 +21,40 @@ import {
   getRowColorByTimeLeft,
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers';
 import {
-  renderAddedTimeLeft,
-  renderDescription,
   renderIcon,
   renderInfoColumn,
-  renderUpdatedTimeLeft,
+  renderTimeLeft,
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders';
 import useLocalStorageState from 'use-local-storage-state';
 import { PrimeIcons } from 'primereact/api';
 import { SignatureSettings } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings';
 import { useMapEventListener } from '@/hooks/Mapper/events';
 import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
-import { COSMIC_SIGNATURE } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog';
-import {
-  SHOW_DESCRIPTION_COLUMN_SETTING,
-  SHOW_UPDATED_COLUMN_SETTING,
-  LAZY_DELETE_SIGNATURES_SETTING,
-  KEEP_LAZY_DELETE_SETTING,
-} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures';
+
 type SystemSignaturesSortSettings = {
   sortField: string;
   sortOrder: SortOrder;
 };
 
 const SORT_DEFAULT_VALUES: SystemSignaturesSortSettings = {
-  sortField: 'inserted_at',
+  sortField: 'updated_at',
   sortOrder: -1,
 };
 
 interface SystemSignaturesContentProps {
   systemId: string;
   settings: Setting[];
-  hideLinkedSignatures?: boolean;
   selectable?: boolean;
   onSelect?: (signature: SystemSignature) => void;
-  onLazyDeleteChange?: (value: boolean) => void;
 }
-export const SystemSignaturesContent = ({
-  systemId,
-  settings,
-  hideLinkedSignatures,
-  selectable,
-  onSelect,
-  onLazyDeleteChange,
-}: SystemSignaturesContentProps) => {
+export const SystemSignaturesContent = ({ systemId, settings, selectable, onSelect }: SystemSignaturesContentProps) => {
   const { outCommand } = useMapRootState();
 
   const [signatures, setSignatures, signaturesRef] = useRefState<SystemSignature[]>([]);
   const [selectedSignatures, setSelectedSignatures] = useState<SystemSignature[]>([]);
   const [nameColumnWidth, setNameColumnWidth] = useState('auto');
+  const [parsedSignatures, setParsedSignatures] = useState<SystemSignature[]>([]);
+  const [askUser, setAskUser] = useState(false);
   const [selectedSignature, setSelectedSignature] = useState<SystemSignature | null>(null);
 
   const [hoveredSig, setHoveredSig] = useState<SystemSignature | null>(null);
@@ -85,20 +66,10 @@ export const SystemSignaturesContent = ({
   const tableRef = useRef<HTMLDivElement>(null);
   const compact = useMaxWidth(tableRef, 260);
   const medium = useMaxWidth(tableRef, 380);
-  const refData = useRef({ selectable });
-  refData.current = { selectable };
 
   const tooltipRef = useRef<WdTooltipHandlers>(null);
 
-  const { clipboardContent, setClipboardContent } = useClipboard();
-
-  const lazyDeleteValue = useMemo(() => {
-    return settings.find(setting => setting.key === LAZY_DELETE_SIGNATURES_SETTING)?.value ?? false;
-  }, [settings]);
-
-  const keepLazyDeleteValue = useMemo(() => {
-    return settings.find(setting => setting.key === KEEP_LAZY_DELETE_SETTING)?.value ?? false;
-  }, [settings]);
+  const { clipboardContent } = useClipboard();
 
   const handleResize = useCallback(() => {
     if (tableRef.current) {
@@ -109,39 +80,13 @@ export const SystemSignaturesContent = ({
     }
   }, []);
 
-  const groupSettings = useMemo(() => settings.filter(s => (GROUPS_LIST as string[]).includes(s.key)), [settings]);
-  const showDescriptionColumn = useMemo(
-    () => settings.find(s => s.key === SHOW_DESCRIPTION_COLUMN_SETTING)?.value,
-    [settings],
-  );
-
-  const showUpdatedColumn = useMemo(() => settings.find(s => s.key === SHOW_UPDATED_COLUMN_SETTING)?.value, [settings]);
-
   const filteredSignatures = useMemo(() => {
     return signatures
-      .filter(x => {
-        if (hideLinkedSignatures && !!x.linked_system) {
-          return false;
-        }
-
-        const isCosmicSignature = x.kind === COSMIC_SIGNATURE;
-        const preparedGroup = getGroupIdByRawGroup(x.group);
-
-        if (isCosmicSignature) {
-          const showCosmicSignatures = settings.find(y => y.key === COSMIC_SIGNATURE)?.value;
-          if (showCosmicSignatures) {
-            return !x.group || groupSettings.find(y => y.key === preparedGroup)?.value;
-          } else {
-            return !!x.group && groupSettings.find(y => y.key === preparedGroup)?.value;
-          }
-        }
-
-        return settings.find(y => y.key === x.kind)?.value;
-      })
+      .filter(x => settings.find(y => y.key === x.kind)?.value)
       .sort((a, b) => {
         return new Date(b.updated_at || 0).getTime() - new Date(a.updated_at || 0).getTime();
       });
-  }, [signatures, settings, groupSettings, hideLinkedSignatures]);
+  }, [signatures, settings]);
 
   const handleGetSignatures = useCallback(async () => {
     const { signatures } = await outCommand({
@@ -149,17 +94,33 @@ export const SystemSignaturesContent = ({
       data: { system_id: systemId },
     });
 
+    setAskUser(false);
     setSignatures(signatures);
   }, [outCommand, systemId]);
 
+  // const updateSignatures = useCallback(
+  //   async (newSignatures: SystemSignature[], updateOnly: boolean) => {
+  //     const { added, updated, removed } = getActualSigs(signaturesRef.current, newSignatures, updateOnly);
+
+  //     const { signatures: updatedSignatures } = await outCommand({
+  //       type: OutCommand.updateSignatures,
+  //       data: {
+  //         system_id: systemId,
+  //         added,
+  //         updated,
+  //         removed,
+  //       },
+  //     });
+
+  //     setSignatures(() => updatedSignatures);
+  //     setSelectedSignatures([]);
+  //   },
+  //   [outCommand, systemId],
+  // );
+
   const handleUpdateSignatures = useCallback(
-    async (newSignatures: SystemSignature[], updateOnly: boolean, skipUpdateUntouched?: boolean) => {
-      const { added, updated, removed } = getActualSigs(
-        signaturesRef.current,
-        newSignatures,
-        updateOnly,
-        skipUpdateUntouched,
-      );
+    async (newSignatures: SystemSignature[], updateOnly: boolean) => {
+      const { added, updated, removed } = getActualSigs(signaturesRef.current, newSignatures, updateOnly);
 
       const { signatures: updatedSignatures } = await outCommand({
         type: OutCommand.updateSignatures,
@@ -177,32 +138,34 @@ export const SystemSignaturesContent = ({
     [outCommand, systemId],
   );
 
-  const handleDeleteSelected = useCallback(
-    async (e: KeyboardEvent) => {
-      if (selectable) {
-        return;
-      }
-      if (selectedSignatures.length === 0) {
-        return;
-      }
-
-      e.preventDefault();
-      e.stopPropagation();
-
-      const selectedSignaturesEveIds = selectedSignatures.map(x => x.eve_id);
-      await handleUpdateSignatures(
-        signatures.filter(x => !selectedSignaturesEveIds.includes(x.eve_id)),
-        false,
-        true,
-      );
-    },
-    [handleUpdateSignatures, selectable, signatures, selectedSignatures],
-  );
+  const handleDeleteSelected = useCallback(async () => {
+    if (selectable) {
+      return;
+    }
+    if (selectedSignatures.length === 0) {
+      return;
+    }
+    const selectedSignaturesEveIds = selectedSignatures.map(x => x.eve_id);
+    await handleUpdateSignatures(
+      signatures.filter(x => !selectedSignaturesEveIds.includes(x.eve_id)),
+      false,
+    );
+  }, [handleUpdateSignatures, selectable, signatures, selectedSignatures]);
 
   const handleSelectAll = useCallback(() => {
     setSelectedSignatures(signatures);
   }, [signatures]);
 
+  const handleReplaceAll = useCallback(() => {
+    handleUpdateSignatures(parsedSignatures, false);
+    setAskUser(false);
+  }, [parsedSignatures, handleUpdateSignatures]);
+
+  const handleUpdateOnly = useCallback(() => {
+    handleUpdateSignatures(parsedSignatures, true);
+    setAskUser(false);
+  }, [parsedSignatures, handleUpdateSignatures]);
+
   const handleSelectSignatures = useCallback(
     // TODO still will be good to define types if we use typescript
     // @ts-ignore
@@ -216,51 +179,38 @@ export const SystemSignaturesContent = ({
     [onSelect, selectable],
   );
 
-  const handlePaste = async (clipboardContent: string) => {
+  useHotkey(true, ['a'], handleSelectAll);
+
+  useHotkey(false, ['Backspace', 'Delete'], handleDeleteSelected);
+
+  useEffect(() => {
+    if (selectable) {
+      return;
+    }
+
+    if (!clipboardContent) {
+      return;
+    }
+
     const newSignatures = parseSignatures(
       clipboardContent,
       settings.map(x => x.key),
     );
 
-    handleUpdateSignatures(newSignatures, !lazyDeleteValue);
+    const { removed } = getActualSigs(signaturesRef.current, newSignatures, false);
 
-    if (lazyDeleteValue && !keepLazyDeleteValue) {
-      onLazyDeleteChange?.(false);
+    if (!signaturesRef.current || !signaturesRef.current.length || !removed.length) {
+      handleUpdateSignatures(newSignatures, false);
+    } else {
+      setParsedSignatures(newSignatures);
+      setAskUser(true);
     }
-  };
-
-  const handleEnterRow = useCallback(
-    (e: DataTableRowMouseEvent) => {
-      setHoveredSig(filteredSignatures[e.index]);
-      tooltipRef.current?.show(e.originalEvent);
-    },
-    [filteredSignatures],
-  );
-
-  const handleLeaveRow = useCallback((e: DataTableRowMouseEvent) => {
-    tooltipRef.current?.hide(e.originalEvent);
-    setHoveredSig(null);
-  }, []);
-
-  useEffect(() => {
-    if (refData.current.selectable) {
-      return;
-    }
-
-    if (!clipboardContent?.text) {
-      return;
-    }
-
-    handlePaste(clipboardContent.text);
-    setClipboardContent(null);
-  }, [clipboardContent, selectable, lazyDeleteValue, keepLazyDeleteValue]);
-
-  useHotkey(true, ['a'], handleSelectAll);
-  useHotkey(false, ['Backspace', 'Delete'], handleDeleteSelected);
+  }, [clipboardContent, selectable]);
 
   useEffect(() => {
     if (!systemId) {
       setSignatures([]);
+      setAskUser(false);
       return;
     }
 
@@ -294,6 +244,19 @@ export const SystemSignaturesContent = ({
     };
   }, []);
 
+  const handleEnterRow = useCallback(
+    (e: DataTableRowMouseEvent) => {
+      setHoveredSig(filteredSignatures[e.index]);
+      tooltipRef.current?.show(e.originalEvent);
+    },
+    [filteredSignatures],
+  );
+
+  const handleLeaveRow = useCallback((e: DataTableRowMouseEvent) => {
+    tooltipRef.current?.hide(e.originalEvent);
+    setHoveredSig(null);
+  }, []);
+
   const renderToolbar = (/*row: SystemSignature*/) => {
     return (
       <div className="flex justify-end items-center gap-2 mr-[4px]">
@@ -345,7 +308,7 @@ export const SystemSignaturesContent = ({
                   return clsx(classes.TableRowCompact, 'bg-amber-500/50 hover:bg-amber-500/70 transition duration-200');
                 }
 
-                const dateClass = getRowColorByTimeLeft(row.inserted_at ? new Date(row.inserted_at) : undefined);
+                const dateClass = getRowColorByTimeLeft(row.updated_at ? new Date(row.updated_at) : undefined);
                 if (!dateClass) {
                   return clsx(classes.TableRowCompact, 'hover:bg-purple-400/20 transition duration-200');
                 }
@@ -372,56 +335,32 @@ export const SystemSignaturesContent = ({
                 header="Group"
                 bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
                 hidden={compact}
-                style={{ maxWidth: 110, minWidth: 110, width: 110 }}
                 sortable
               ></Column>
               <Column
                 field="info"
+                // header="Info"
                 bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
                 body={renderInfoColumn}
                 style={{ maxWidth: nameColumnWidth }}
                 hidden={compact || medium}
               ></Column>
-              {showDescriptionColumn && (
-                <Column
-                  field="description"
-                  header="Description"
-                  bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-                  body={renderDescription}
-                  hidden={compact}
-                  sortable
-                ></Column>
-              )}
-
               <Column
-                field="inserted_at"
-                header="Added"
+                field="updated_at"
+                header="Updated"
                 dataType="date"
                 bodyClassName="w-[70px] text-ellipsis overflow-hidden whitespace-nowrap"
-                body={renderAddedTimeLeft}
+                body={renderTimeLeft}
                 sortable
               ></Column>
 
-              {showUpdatedColumn && (
-                <Column
-                  field="updated_at"
-                  header="Updated"
-                  dataType="date"
-                  bodyClassName="w-[70px] text-ellipsis overflow-hidden whitespace-nowrap"
-                  body={renderUpdatedTimeLeft}
-                  sortable
-                ></Column>
-              )}
-
-              {!selectable && (
-                <Column
-                  bodyClassName="p-0 pl-1 pr-2"
-                  field="group"
-                  body={renderToolbar}
-                  // headerClassName={headerClasses}
-                  style={{ maxWidth: 26, minWidth: 26, width: 26 }}
-                ></Column>
-              )}
+              <Column
+                bodyClassName="p-0 pl-1 pr-2"
+                field="group"
+                body={renderToolbar}
+                // headerClassName={headerClasses}
+                style={{ maxWidth: 26, minWidth: 26, width: 26 }}
+              ></Column>
             </DataTable>
           </>
         )}
@@ -431,13 +370,32 @@ export const SystemSignaturesContent = ({
           content={hoveredSig ? <SignatureView {...hoveredSig} /> : null}
         />
 
-        {showSignatureSettings && (
-          <SignatureSettings
-            systemId={systemId}
-            show
-            onHide={() => setShowSignatureSettings(false)}
-            signatureData={selectedSignature}
-          />
+        <SignatureSettings
+          systemId={systemId}
+          show={showSignatureSettings}
+          onHide={() => setShowSignatureSettings(false)}
+          signatureData={selectedSignature}
+        />
+
+        {askUser && (
+          <div className="absolute left-[1px] top-[29px] h-[calc(100%-30px)] w-[calc(100%-3px)] bg-stone-900/10 backdrop-blur-sm">
+            <div className="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center">
+              <div className="text-stone-400/80 text-sm">
+                <div className="flex flex-col text-center gap-2">
+                  <button className="p-button p-component p-button-outlined p-button-sm btn-wide">
+                    <span className="p-button-label p-c" onClick={handleUpdateOnly}>
+                      Update
+                    </span>
+                  </button>
+                  <button className="p-button p-component p-button-outlined p-button-sm btn-wide">
+                    <span className="p-button-label p-c" onClick={handleReplaceAll}>
+                      Update & Delete missing
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
         )}
       </div>
     </>

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

@@ -1,12 +1,4 @@
-import {
-  GroupType,
-  SignatureGroup,
-  SignatureGroupENG,
-  SignatureGroupRU,
-  SignatureKind,
-  SignatureKindENG,
-  SignatureKindRU,
-} from '@/hooks/Mapper/types';
+import { GroupType, SignatureGroup } from '@/hooks/Mapper/types';
 
 export const TIME_ONE_MINUTE = 1000 * 60;
 export const TIME_TEN_MINUTES = 1000 * 60 * 10;
@@ -32,43 +24,3 @@ export const GROUPS: Record<SignatureGroup, GroupType> = {
   [SignatureGroup.Wormhole]: { id: SignatureGroup.Wormhole, icon: '/icons/brackets/wormhole.png', ...wh },
   [SignatureGroup.CosmicSignature]: { id: SignatureGroup.CosmicSignature, icon: '/icons/x_close14.png', w: 9, h: 9 },
 };
-
-export const MAPPING_GROUP_TO_ENG = {
-  // ENGLISH
-  [SignatureGroupENG.GasSite]: SignatureGroup.GasSite,
-  [SignatureGroupENG.RelicSite]: SignatureGroup.RelicSite,
-  [SignatureGroupENG.DataSite]: SignatureGroup.DataSite,
-  [SignatureGroupENG.OreSite]: SignatureGroup.OreSite,
-  [SignatureGroupENG.CombatSite]: SignatureGroup.CombatSite,
-  [SignatureGroupENG.Wormhole]: SignatureGroup.Wormhole,
-  [SignatureGroupENG.CosmicSignature]: SignatureGroup.CosmicSignature,
-
-  // RUSSIAN
-  [SignatureGroupRU.GasSite]: SignatureGroup.GasSite,
-  [SignatureGroupRU.RelicSite]: SignatureGroup.RelicSite,
-  [SignatureGroupRU.DataSite]: SignatureGroup.DataSite,
-  [SignatureGroupRU.OreSite]: SignatureGroup.OreSite,
-  [SignatureGroupRU.CombatSite]: SignatureGroup.CombatSite,
-  [SignatureGroupRU.Wormhole]: SignatureGroup.Wormhole,
-  [SignatureGroupRU.CosmicSignature]: SignatureGroup.CosmicSignature,
-};
-
-export const MAPPING_TYPE_TO_ENG = {
-  // ENGLISH
-  [SignatureKindENG.CosmicSignature]: SignatureKind.CosmicSignature,
-  [SignatureKindENG.CosmicAnomaly]: SignatureKind.CosmicAnomaly,
-  [SignatureKindENG.Structure]: SignatureKind.Structure,
-  [SignatureKindENG.Ship]: SignatureKind.Ship,
-  [SignatureKindENG.Deployable]: SignatureKind.Deployable,
-  [SignatureKindENG.Drone]: SignatureKind.Drone,
-
-  // RUSSIAN
-  [SignatureKindRU.CosmicSignature]: SignatureKind.CosmicSignature,
-  [SignatureKindRU.CosmicAnomaly]: SignatureKind.CosmicAnomaly,
-  [SignatureKindRU.Structure]: SignatureKind.Structure,
-  [SignatureKindRU.Ship]: SignatureKind.Ship,
-  [SignatureKindRU.Deployable]: SignatureKind.Deployable,
-  [SignatureKindRU.Drone]: SignatureKind.Drone,
-};
-
-export const getGroupIdByRawGroup = (val: string) => MAPPING_GROUP_TO_ENG[val as SignatureGroup];

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

@@ -6,7 +6,6 @@ export const getActualSigs = (
   oldSignatures: SystemSignature[],
   newSignatures: SystemSignature[],
   updateOnly: boolean,
-  skipUpdateUntouched?: boolean,
 ): { added: SystemSignature[]; updated: SystemSignature[]; removed: SystemSignature[] } => {
   const updated: SystemSignature[] = [];
   const removed: SystemSignature[] = [];
@@ -20,8 +19,6 @@ export const getActualSigs = (
       const isNeedUpgrade = getState(GROUPS_LIST, newSig) > getState(GROUPS_LIST, oldSig);
       if (isNeedUpgrade) {
         updated.push({ ...oldSig, group: newSig.group, name: newSig.name });
-      } else if (!skipUpdateUntouched) {
-        updated.push({ ...oldSig });
       }
     } else {
       if (!updateOnly) {

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

@@ -1,7 +1,5 @@
 export * from './renderIcon';
-export * from './renderDescription';
 export * from './renderName';
-export * from './renderAddedTimeLeft';
-export * from './renderUpdatedTimeLeft';
+export * from './renderTimeLeft';
 export * from './renderLinkedSystem';
 export * from './renderInfoColumn';

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

@@ -1,10 +0,0 @@
-import { SystemSignature } from '@/hooks/Mapper/types';
-import { TimeLeft } from '@/hooks/Mapper/components/ui-kit';
-
-export const renderAddedTimeLeft = (row: SystemSignature) => {
-  return (
-    <div className="flex w-full items-center">
-      <TimeLeft cDate={row.inserted_at ? new Date(row.inserted_at) : undefined} />
-    </div>
-  );
-};

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

@@ -1,5 +0,0 @@
-import { SystemSignature } from '@/hooks/Mapper/types';
-
-export const renderDescription = (row: SystemSignature) => {
-  return <span title={row?.description}>{row?.description}</span>;
-};

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

@@ -0,0 +1,3 @@
+.whFontSize {
+  font-size: 11px !important;
+}