Revert "hotfix: add ARM64 compatible Docker image (#94)"

This reverts commit f85317983c.

.devcontainer/Dockerfile

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

.devcontainer/devcontainer.json

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

.devcontainer/docker-compose.yml

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

.env.example

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

.github/workflows/build.yml

@@ -1,6 +1,8 @@
 name: Build
 
 on:
+  pull_request:
+    types: [opened, synchronize, reopened, labeled, unlabeled]
   push:
     branches:
       - main
@@ -18,6 +20,27 @@ permissions:
   contents: write
 
 jobs:
+  deploy-test:
+    name: 🚀 Deploy to test env (fly.io)
+    runs-on: ubuntu-latest
+    if: ${{ github.base_ref == 'main' || (github.ref == 'refs/heads/main' && github.event_name == 'push') }}
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+      - uses: superfly/flyctl-actions/setup-flyctl@master
+
+      - name: 👀 Read app name
+        uses: SebRollen/toml-action@v1.0.0
+        id: app_name
+        with:
+          file: "fly.toml"
+          field: "app"
+
+      - name: 🚀 Deploy Test
+        run: flyctl deploy --remote-only --wait-timeout=300 --ha=false
+        env:
+          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
+
   build:
     name: 🛠 Build
     runs-on: ubuntu-22.04
@@ -55,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') }}-
@@ -100,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
@@ -116,7 +135,6 @@ jobs:
       matrix:
         platform:
           - linux/amd64
-          - linux/arm64
     steps:
       - name: Prepare
         run: |
@@ -165,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
@@ -206,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
@@ -261,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 }}).
@@ -275,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 }}

.gitignore

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

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

Makefile

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

README.md

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

assets/.eslintrc.cjs

@@ -17,6 +17,5 @@ module.exports = {
     'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
     'react/react-in-jsx-scope': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',
-    "linebreak-style": "off",
   },
 };

assets/.prettierrc

@@ -7,5 +7,5 @@
   "semi": true,
   "tabWidth": 2,
   "useTabs": false,
-  "endOfLine": "auto"
+  "endOfLine": "lf"
 }

assets/app.tsx

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

assets/css/app.css

@@ -3,8 +3,6 @@
 @import 'primereact/resources/themes/arya-blue/theme.css' layer(primereact);
 /*@import 'primereact/resources/themes/bootstrap4-dark-blue/theme.css' layer(primereact);*/
 
-@import '../js/hooks/Mapper/components/map/styles/index.scss';
-
 @layer tailwind-base {
   @tailwind base;
 }
@@ -25,10 +23,6 @@ body {
   width: 400px; /* As IE6 ignores !important it will set width as 400px; */
 }
 
-body > div:first-of-type {
-  min-height: 500px !important;
-}
-
 .lending-normal {
   font-family: 'Shentox', 'Rogan', sans-serif !important;
   font-weight: 500;
@@ -112,19 +106,19 @@ body > div:first-of-type {
 }
 
 .wd-characters-icons {
-  /*display: flex;*/
-  /*transition:*/
-  /*  border-color 250ms,*/
-  /*  opacity 250ms;*/
-  /*width: 35px;*/
-  /*height: 35px;*/
-  /*border-radius: 50%;*/
-  /*border-width: 2px;*/
-  /*border-style: solid;*/
-  /*border-color: #5a5a5a;*/
-  /*background-color: rgba(0, 0, 0, 0);*/
-  /*cursor: pointer;*/
-  /*opacity: 0.6;*/
+  display: flex;
+  transition:
+    border-color 250ms,
+    opacity 250ms;
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #5a5a5a;
+  background-color: rgba(0, 0, 0, 0);
+  cursor: pointer;
+  opacity: 0.6;
 }
 
 .wd-bg-default {
@@ -936,66 +930,3 @@ body > div:first-of-type {
   width: 16px;
   height: 16px;
 }
-
-.verticalTabsContainer {
-  display: flex;
-  width: 100%;
-  min-height: 300px;
-}
-.verticalTabsContainer .p-tabview {
-  width: 100%;
-  display: flex;
-  align-items: flex-start;
-}
-.verticalTabsContainer .p-tabview-panels {
-  padding: 6px 1rem !important;
-  flex-grow: 1;
-  height: 100%;
-}
-.verticalTabsContainer .p-tabview-nav-container {
-  border-right: none;
-  height: 100%;
-}
-.verticalTabsContainer .p-tabview-nav {
-  flex-direction: column;
-  width: 150px;
-  min-height: 100%;
-  border: none;
-}
-.verticalTabsContainer .p-tabview-nav li {
-  width: 100%;
-  border-right: 4px solid var(--surface-hover);
-  background-color: var(--surface-card);
-  transition:
-    background-color 200ms,
-    border-right-color 200ms;
-}
-.verticalTabsContainer .p-tabview-nav li:hover {
-  background-color: var(--surface-hover);
-  border-right: 4px solid var(--surface-100);
-}
-.verticalTabsContainer .p-tabview-nav li .p-tabview-nav-link {
-  transition: color 200ms;
-  justify-content: flex-end;
-  padding: 10px;
-  background-color: initial;
-  border: none;
-  color: var(--gray-400);
-  border-radius: initial;
-  font-weight: 400;
-  margin: 0;
-}
-.verticalTabsContainer .p-tabview-nav li.p-tabview-selected {
-  background-color: var(--surface-50);
-  border-right: 4px solid var(--primary-color);
-}
-.verticalTabsContainer .p-tabview-nav li.p-tabview-selected .p-tabview-nav-link {
-  font-weight: 600;
-  color: var(--primary-color);
-}
-.verticalTabsContainer .p-tabview-nav li.p-tabview-selected:hover {
-  border-right: 4px solid var(--primary-color);
-}
-.verticalTabsContainer .p-tabview-panel {
-  flex-grow: 1;
-}

assets/js/hooks/Mapper/MapRoot.tsx

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

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

@@ -67,22 +67,16 @@
   }
 }
 
-.p-datatable-thead {
-  th, th.p-sortable-column {
-    font-size: 12px;
-    font-weight: bold;
-    padding: 3px 4px;
-  }
+.p-sortable-column {
+  font-size: 12px;
+  font-weight: bold;
+  padding: 3px 4px;
 }
 
 .p-selectable-row td {
   padding: 4px 4px;
 }
 
-.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
-  padding: 3px 4px;
-}
-
 .p-sortable-column > .p-column-header-content > span:last-child {
   transform: scale(0.7);
 
@@ -99,11 +93,6 @@
 .p-dropdown-item {
   padding: 0.25rem 0.5rem;
   font-size: 14px;
-  width: 100%;
-
-  .p-dropdown-item-label {
-    width: 100%;
-  }
 }
 
 .p-dropdown-item-group {
@@ -123,92 +112,3 @@
 .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
   margin-right: 0 !important;
 }
-
-/* Fixed sizes of Input switch */
-.p-inputswitch {
-  width: 2.0rem;
-  height: 1.15rem;
-
-  .p-inputswitch-slider:before {
-    width: 0.8rem;
-    height: 0.8rem;
-    left: 0.14rem;
-    margin-top: -0.385rem;
-  }
-
-  &.p-highlight .p-inputswitch-slider:before {
-    transform: translateX(0.8rem);
-  }
-
-  &:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
-    background: rgb(255 255 255 / 21%);
-  }
-
-  &.p-highlight .p-inputswitch-slider {
-    background: #966d3d;
-  }
-}
-
-.p-datatable-wrapper {
-  height: 100%;
-  & {
-    scrollbar-width: thin;
-    scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
-  }
-
-  &::-webkit-scrollbar {
-    width: 10px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0.5);
-    border-radius: 5px;
-    border: 2px solid transparent;
-    background-clip: content-box;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(255, 255, 255, 0.7);
-  }
-
-  &::-webkit-scrollbar-button {
-    display: none;
-    height: 0;
-    width: 0;
-  }
-}
-
-.p-datatable .p-datatable-tbody > tr.p-highlight {
-  background: initial;
-}
-
-.suppress-menu-behaviour {
-  pointer-events: none;
-
-  .p-menuitem-content {
-    pointer-events: initial;
-    background-color: initial !important;
-  }
-  .p-menuitem-content:hover {
-    background-color: initial !important;
-  }
-}
-
-
-.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
-  box-shadow: 0 0 0 1px #335c7e;
-  border-color: #335c7e;
-}
-
-.p-inputtext:enabled:focus {
-  box-shadow: 0 0 0 1px #335c7e;
-  border-color: #335c7e;
-}
-
-.p-inputtext:enabled:hover {
-  border-color: #335c7e;
-}

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

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

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

@@ -1,45 +0,0 @@
-.p-confirm-popup {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  @apply p-[12px];
-
-  &::before, &::after {
-    display: none;
-  }
-
-  .p-confirm-popup-content, .p-confirm-popup-footer {
-    @apply p-0 m-0;
-  }
-
-  .p-confirm-popup-content {
-    display: flex;
-    gap: 6px;
-  }
-
-  .p-confirm-popup-footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: 4px;
-  }
-
-  .p-confirm-popup-icon {
-    font-size: 14px;
-  }
-
-  .p-confirm-popup-message {
-    @apply m-0;
-    font-size: 12px;
-  }
-
-  .p-confirm-popup-reject.p-button-sm,
-  .p-confirm-popup-accept.p-button-sm {
-    @apply px-1.5 py-1 m-0;
-
-    & > span {
-      font-size: 12px;
-      line-height: 12px;
-    }
-  }
-
-}

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

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

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

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

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

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

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

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

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

@@ -1,12 +1,11 @@
 import React, { RefObject } from 'react';
 import { ContextMenu } from 'primereact/contextmenu';
-import { PingType, SolarSystemRawType } from '@/hooks/Mapper/types';
+import { SolarSystemRawType } from '@/hooks/Mapper/types';
 import { useContextMenuSystemItems } from '@/hooks/Mapper/components/contexts/ContextMenuSystem/useContextMenuSystemItems.tsx';
 import { WaypointSetContextHandler } from '@/hooks/Mapper/components/contexts/types.ts';
 
 export interface ContextMenuSystemProps {
   hubs: string[];
-  userHubs: string[];
   contextMenuRef: RefObject<ContextMenu>;
   systemId: string | undefined;
   systems: SolarSystemRawType[];
@@ -14,12 +13,10 @@ export interface ContextMenuSystemProps {
   onLockToggle(): void;
   onOpenSettings(): void;
   onHubToggle(): void;
-  onUserHubToggle(): void;
   onSystemTag(val?: string): void;
   onSystemStatus(val: number): void;
   onSystemLabels(val: string): void;
   onCustomLabelDialog(): void;
-  onTogglePing(type: PingType, solar_system_id: string, hasPing: boolean): void;
   onWaypointSet: WaypointSetContextHandler;
 }
 
@@ -28,7 +25,7 @@ export const ContextMenuSystem: React.FC<ContextMenuSystemProps> = ({ contextMen
 
   return (
     <>
-      <ContextMenu className="min-w-[200px]" model={items} ref={contextMenuRef} breakpoint="767px" />
+      <ContextMenu model={items} ref={contextMenuRef} breakpoint="767px" />
     </>
   );
 };

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

@@ -1,4 +1,3 @@
 export * from './useTagMenu';
 export * from './useStatusMenu';
 export * from './useLabelsMenu';
-export * from './useUserRoute';

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

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

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

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

assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/index.ts

@@ -1 +1 @@
-export * from './useTagMenu.tsx';
+export * from './useTagMenu.ts';

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

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

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

@@ -0,0 +1,68 @@
+import { MenuItem } from 'primereact/menuitem';
+import { PrimeIcons } from 'primereact/api';
+import { useCallback, useRef } from 'react';
+import { SolarSystemRawType } from '@/hooks/Mapper/types';
+import { getSystemById } from '@/hooks/Mapper/helpers';
+import clsx from 'clsx';
+import { GRADIENT_MENU_ACTIVE_CLASSES } from '@/hooks/Mapper/constants.ts';
+
+const AVAILABLE_LETTERS = ['A', 'B', 'C', 'D', 'E', 'F', 'X', 'Y', 'Z'];
+const AVAILABLE_NUMBERS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+
+export const useTagMenu = (
+  systems: SolarSystemRawType[],
+  systemId: string | undefined,
+  onSystemTag: (val?: string) => void,
+): (() => MenuItem) => {
+  const ref = useRef({ onSystemTag, systems, systemId });
+  ref.current = { onSystemTag, systems, systemId };
+
+  return useCallback(() => {
+    const { onSystemTag, systemId, systems } = ref.current;
+    const system = systemId ? getSystemById(systems, systemId) : undefined;
+
+    const isSelectedLetters = AVAILABLE_LETTERS.includes(system?.tag ?? '');
+    const isSelectedNumbers = AVAILABLE_NUMBERS.includes(system?.tag ?? '');
+
+    const menuItem: MenuItem = {
+      label: 'Tag',
+      icon: PrimeIcons.HASHTAG,
+      className: clsx({ [GRADIENT_MENU_ACTIVE_CLASSES]: isSelectedLetters || isSelectedNumbers }),
+      items: [
+        ...(system?.tag !== '' && system?.tag !== null
+          ? [
+              {
+                label: 'Clear',
+                icon: PrimeIcons.BAN,
+                command: () => onSystemTag(),
+              },
+            ]
+          : []),
+        {
+          label: 'Letter',
+          icon: PrimeIcons.TAGS,
+          className: clsx({ [GRADIENT_MENU_ACTIVE_CLASSES]: isSelectedLetters }),
+          items: AVAILABLE_LETTERS.map(x => ({
+            label: x,
+            icon: PrimeIcons.TAG,
+            command: () => onSystemTag(x),
+            className: clsx({ [GRADIENT_MENU_ACTIVE_CLASSES]: system?.tag === x }),
+          })),
+        },
+        {
+          label: 'Digit',
+          icon: PrimeIcons.TAGS,
+          className: clsx({ [GRADIENT_MENU_ACTIVE_CLASSES]: isSelectedNumbers }),
+          items: AVAILABLE_NUMBERS.map(x => ({
+            label: x,
+            icon: PrimeIcons.TAG,
+            command: () => onSystemTag(x),
+            className: clsx({ [GRADIENT_MENU_ACTIVE_CLASSES]: system?.tag === x }),
+          })),
+        },
+      ],
+    };
+
+    return menuItem;
+  }, []);
+};

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

@@ -1,95 +0,0 @@
-import { MenuItem } from 'primereact/menuitem';
-import { PrimeIcons } from 'primereact/api';
-import { useCallback, useRef } from 'react';
-import { SolarSystemRawType } from '@/hooks/Mapper/types';
-import { getSystemById } from '@/hooks/Mapper/helpers';
-import clsx from 'clsx';
-import { GRADIENT_MENU_ACTIVE_CLASSES } from '@/hooks/Mapper/constants.ts';
-import { LayoutEventBlocker } from '@/hooks/Mapper/components/ui-kit';
-import { Button } from 'primereact/button';
-
-const AVAILABLE_TAGS = [
-  'A',
-  'B',
-  'C',
-  'D',
-  'E',
-  'F',
-  'G',
-  'H',
-  'I',
-  'X',
-  'Y',
-  'Z',
-  '0',
-  '1',
-  '2',
-  '3',
-  '4',
-  '5',
-  '6',
-  '7',
-  '8',
-  '9',
-];
-
-export const useTagMenu = (
-  systems: SolarSystemRawType[],
-  systemId: string | undefined,
-  onSystemTag: (val?: string) => void,
-): (() => MenuItem) => {
-  const ref = useRef({ onSystemTag, systems, systemId });
-  ref.current = { onSystemTag, systems, systemId };
-
-  return useCallback(() => {
-    const { onSystemTag, systemId, systems } = ref.current;
-    const system = systemId ? getSystemById(systems, systemId) : undefined;
-
-    const isSelectedTag = AVAILABLE_TAGS.includes(system?.tag ?? '');
-
-    const menuItem: MenuItem = {
-      label: 'Tag',
-      icon: PrimeIcons.HASHTAG,
-      className: clsx({ [GRADIENT_MENU_ACTIVE_CLASSES]: isSelectedTag }),
-      items: [
-        {
-          label: 'Digit',
-          icon: PrimeIcons.TAGS,
-          className: '!h-[128px] suppress-menu-behaviour',
-          template: () => {
-            return (
-              <LayoutEventBlocker className="flex flex-col gap-1 w-[200px] h-full px-2">
-                <div className="grid grid-cols-[auto_auto_auto_auto_auto_auto] gap-1">
-                  {AVAILABLE_TAGS.map(x => (
-                    <Button
-                      outlined={system?.tag !== x}
-                      severity="warning"
-                      key={x}
-                      value={x}
-                      size="small"
-                      className="p-[3px] justify-center"
-                      onClick={() => system?.tag !== x && onSystemTag(x)}
-                    >
-                      {x}
-                    </Button>
-                  ))}
-                  <Button
-                    disabled={!isSelectedTag}
-                    icon="pi pi-ban"
-                    size="small"
-                    className="!p-0 !w-[initial] justify-center"
-                    outlined
-                    severity="help"
-                    onClick={() => onSystemTag()}
-                  ></Button>
-                </div>
-              </LayoutEventBlocker>
-            );
-          },
-        },
-      ],
-    };
-
-    return menuItem;
-  }, []);
-};

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

@@ -1,42 +0,0 @@
-import { MapUserAddIcon, MapUserDeleteIcon } from '@/hooks/Mapper/icons';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { useCallback, useRef } from 'react';
-import { WidgetsIds } from '@/hooks/Mapper/components/mapInterface/constants.tsx';
-
-interface UseUserRouteProps {
-  systemId: string | undefined;
-  userHubs: string[];
-  onUserHubToggle(): void;
-}
-
-export const useUserRoute = ({ userHubs, systemId, onUserHubToggle }: UseUserRouteProps) => {
-  const {
-    data: { isSubscriptionActive },
-    windowsSettings,
-  } = useMapRootState();
-
-  const ref = useRef({ userHubs, systemId, onUserHubToggle, isSubscriptionActive, windowsSettings });
-  ref.current = { userHubs, systemId, onUserHubToggle, isSubscriptionActive, windowsSettings };
-
-  return useCallback(() => {
-    const { userHubs, systemId, onUserHubToggle, isSubscriptionActive, windowsSettings } = ref.current;
-
-    const isVisibleUserRoutes = windowsSettings.visible.some(x => x === WidgetsIds.userRoutes);
-
-    if (!isSubscriptionActive || !isVisibleUserRoutes || !systemId) {
-      return [];
-    }
-
-    return [
-      {
-        label: !userHubs.includes(systemId) ? 'Add User Route' : 'Remove User Route',
-        icon: !userHubs.includes(systemId) ? (
-          <MapUserAddIcon className="mr-1 relative left-[-2px]" />
-        ) : (
-          <MapUserDeleteIcon className="mr-1 relative left-[-2px]" />
-        ),
-        command: onUserHubToggle,
-      },
-    ];
-  }, [windowsSettings]);
-};

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

@@ -5,29 +5,22 @@ import { SolarSystemRawType } from '@/hooks/Mapper/types';
 import { WaypointSetContextHandler } from '@/hooks/Mapper/components/contexts/types.ts';
 import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
 import { useDeleteSystems } from '@/hooks/Mapper/components/contexts/hooks';
-// import { PingType } from '@/hooks/Mapper/types/ping.ts';
 
 interface UseContextMenuSystemHandlersProps {
   hubs: string[];
-  userHubs: string[];
   systems: SolarSystemRawType[];
   outCommand: OutCommandHandler;
 }
 
-export const useContextMenuSystemHandlers = ({
-  systems,
-  hubs,
-  userHubs,
-  outCommand,
-}: UseContextMenuSystemHandlersProps) => {
+export const useContextMenuSystemHandlers = ({ systems, hubs, outCommand }: UseContextMenuSystemHandlersProps) => {
   const contextMenuRef = useRef<ContextMenu | null>(null);
 
   const [system, setSystem] = useState<string>();
 
   const { deleteSystems } = useDeleteSystems();
 
-  const ref = useRef({ hubs, userHubs, system, systems, outCommand, deleteSystems });
-  ref.current = { hubs, userHubs, system, systems, outCommand, deleteSystems };
+  const ref = useRef({ hubs, system, systems, outCommand, deleteSystems });
+  ref.current = { hubs, system, systems, outCommand, deleteSystems };
 
   const open = useCallback((ev: any, systemId: string) => {
     setSystem(systemId);
@@ -79,37 +72,6 @@ export const useContextMenuSystemHandlers = ({
     setSystem(undefined);
   }, []);
 
-  const onUserHubToggle = useCallback(() => {
-    const { userHubs, system, outCommand } = ref.current;
-    if (!system) {
-      return;
-    }
-
-    outCommand({
-      type: !userHubs.includes(system) ? OutCommand.addUserHub : OutCommand.deleteUserHub,
-      data: {
-        system_id: system,
-      },
-    });
-    setSystem(undefined);
-  }, []);
-
-  // const onTogglePingRally = useCallback(() => {
-  //   const { userHubs, system, outCommand } = ref.current;
-  //   if (!system) {
-  //     return;
-  //   }
-  //
-  //   outCommand({
-  //     type: OutCommand.openPing,
-  //     data: {
-  //       solar_system_id: system,
-  //       type: PingType.Rally,
-  //     },
-  //   });
-  //   setSystem(undefined);
-  // }, []);
-
   const onSystemTag = useCallback((tag?: string) => {
     const { system, outCommand } = ref.current;
     if (!system) {
@@ -126,22 +88,6 @@ export const useContextMenuSystemHandlers = ({
     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) {
@@ -214,10 +160,7 @@ export const useContextMenuSystemHandlers = ({
     onDeleteSystem,
     onLockToggle,
     onHubToggle,
-    onUserHubToggle,
-    // onTogglePingRally,
     onSystemTag,
-    onSystemTemporaryName,
     onSystemStatus,
     onSystemLabels,
     onOpenSettings,

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

@@ -1,9 +1,4 @@
-import {
-  useLabelsMenu,
-  useStatusMenu,
-  useTagMenu,
-  useUserRoute,
-} from '@/hooks/Mapper/components/contexts/ContextMenuSystem/hooks';
+import { useLabelsMenu, useStatusMenu, useTagMenu } from '@/hooks/Mapper/components/contexts/ContextMenuSystem/hooks';
 import { useMemo } from 'react';
 import { getSystemById } from '@/hooks/Mapper/helpers';
 import classes from './ContextMenuSystem.module.scss';
@@ -14,20 +9,11 @@ import { FastSystemActions } from '@/hooks/Mapper/components/contexts/components
 import { useMapCheckPermissions } from '@/hooks/Mapper/mapRootProvider/hooks/api';
 import { UserPermission } from '@/hooks/Mapper/types/permissions.ts';
 import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace.ts';
-import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
-import { MapAddIcon, MapDeleteIcon } from '@/hooks/Mapper/icons';
-import { PingType } from '@/hooks/Mapper/types';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import clsx from 'clsx';
-import { MenuItem } from 'primereact/menuitem';
-import { MenuItemWithInfo, WdMenuItem } from '@/hooks/Mapper/components/ui-kit';
 
 export const useContextMenuSystemItems = ({
   onDeleteSystem,
   onLockToggle,
   onHubToggle,
-  onUserHubToggle,
-  onTogglePing,
   onSystemTag,
   onSystemStatus,
   onSystemLabels,
@@ -36,7 +22,6 @@ export const useContextMenuSystemItems = ({
   onWaypointSet,
   systemId,
   hubs,
-  userHubs,
   systems,
 }: Omit<ContextMenuSystemProps, 'contextMenuRef'>) => {
   const getTags = useTagMenu(systems, systemId, onSystemTag);
@@ -44,32 +29,9 @@ export const useContextMenuSystemItems = ({
   const getLabels = useLabelsMenu(systems, systemId, onSystemLabels, onCustomLabelDialog);
   const getWaypointMenu = useWaypointMenu(onWaypointSet);
   const canLockSystem = useMapCheckPermissions([UserPermission.LOCK_SYSTEM]);
-  const canManageSystem = useMapCheckPermissions([UserPermission.UPDATE_SYSTEM]);
-  const canDeleteSystem = useMapCheckPermissions([UserPermission.DELETE_SYSTEM]);
-  const getUserRoutes = useUserRoute({ userHubs, systemId, onUserHubToggle });
 
-  const {
-    data: { pings, isSubscriptionActive },
-  } = useMapRootState();
-
-  const ping = useMemo(() => (pings.length === 1 ? pings[0] : undefined), [pings]);
-  const isShowPingBtn = useMemo(() => {
-    if (!isSubscriptionActive) {
-      return false;
-    }
-
-    if (pings.length === 0) {
-      return true;
-    }
-
-    return pings[0].solar_system_id === systemId;
-  }, [isSubscriptionActive, pings, systemId]);
-
-  return useMemo((): MenuItem[] => {
+  return useMemo(() => {
     const system = systemId ? getSystemById(systems, systemId) : undefined;
-    const systemStaticInfo = getSystemStaticInfo(systemId)!;
-
-    const hasPing = ping?.solar_system_id === systemId;
 
     if (!system || !systemId) {
       return [];
@@ -82,9 +44,9 @@ export const useContextMenuSystemItems = ({
           return (
             <FastSystemActions
               systemId={systemId}
-              systemName={systemStaticInfo.solar_system_name}
-              regionName={systemStaticInfo.region_name}
-              isWH={isWormholeSpace(systemStaticInfo.system_class)}
+              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}
             />
@@ -95,106 +57,52 @@ export const useContextMenuSystemItems = ({
       getTags(),
       getStatus(),
       ...getLabels(),
-      ...getWaypointMenu(systemId, systemStaticInfo.system_class),
+      ...getWaypointMenu(systemId, system.system_static_info.system_class),
       {
-        label: !hubs.includes(systemId) ? 'Add Route' : 'Remove Route',
-        icon: !hubs.includes(systemId) ? (
-          <MapAddIcon className="mr-1 relative left-[-2px]" />
-        ) : (
-          <MapDeleteIcon className="mr-1 relative left-[-2px]" />
-        ),
+        label: !hubs.includes(systemId) ? 'Add in Routes' : 'Remove from Routes',
+        icon: PrimeIcons.MAP_MARKER,
         command: onHubToggle,
       },
-      ...getUserRoutes(),
-
-      { separator: true },
-      {
-        command: () => onTogglePing(PingType.Rally, systemId, hasPing),
-        disabled: !isShowPingBtn,
-        template: () => {
-          const iconClasses = clsx({
-            'pi text-cyan-400 hero-signal': !hasPing,
-            'pi text-red-400 hero-signal-slash': hasPing,
-          });
-
-          if (isShowPingBtn) {
-            return <WdMenuItem icon={iconClasses}>{!hasPing ? 'Ping: RALLY' : 'Cancel: RALLY'}</WdMenuItem>;
-          }
-
-          return (
-            <MenuItemWithInfo
-              infoTitle="Locked. Ping can be set only for one system."
-              infoClass="pi-lock text-stone-500 mr-[12px]"
-            >
-              <WdMenuItem disabled icon={iconClasses}>
-                {!hasPing ? 'Ping: RALLY' : 'Cancel: RALLY'}
-              </WdMenuItem>
-            </MenuItemWithInfo>
-          );
-        },
-      },
-      ...(system.locked && canLockSystem
-        ? [
-            {
-              label: 'Unlock',
-              icon: PrimeIcons.LOCK_OPEN,
-              command: onLockToggle,
-            },
-          ]
-        : []),
-      ...(!system.locked && canManageSystem
-        ? [
-            {
-              label: 'Lock',
-              icon: PrimeIcons.LOCK,
-              command: onLockToggle,
-            },
-          ]
-        : []),
-
-      ...(canDeleteSystem && !system.locked
-        ? [
+      ...(system.locked
+        ? canLockSystem
+          ? [
+              {
+                label: 'Unlock',
+                icon: PrimeIcons.LOCK_OPEN,
+                command: onLockToggle,
+              },
+            ]
+          : []
+        : [
+            ...(canLockSystem
+              ? [
+                  {
+                    label: 'Lock',
+                    icon: PrimeIcons.LOCK,
+                    command: onLockToggle,
+                  },
+                ]
+              : []),
             { separator: true },
             {
+              label: 'Delete',
+              icon: PrimeIcons.TRASH,
               command: onDeleteSystem,
-              disabled: hasPing,
-              template: () => {
-                if (!hasPing) {
-                  return <WdMenuItem icon="text-red-400 pi pi-trash">Delete</WdMenuItem>;
-                }
-
-                return (
-                  <MenuItemWithInfo
-                    infoTitle="Locked. System can not be deleted until ping set."
-                    infoClass="pi-lock text-stone-500 mr-[12px]"
-                  >
-                    <WdMenuItem disabled icon="text-red-400 pi pi-trash">
-                      Delete
-                    </WdMenuItem>
-                  </MenuItemWithInfo>
-                );
-              },
             },
-          ]
-        : []),
+          ]),
     ];
   }, [
-    systemId,
+    canLockSystem,
     systems,
+    systemId,
     getTags,
     getStatus,
     getLabels,
     getWaypointMenu,
-    getUserRoutes,
     hubs,
     onHubToggle,
-    canLockSystem,
-    onLockToggle,
-    canDeleteSystem,
-    onDeleteSystem,
     onOpenSettings,
-    onTogglePing,
-    ping,
-    isShowPingBtn,
+    onLockToggle,
+    onDeleteSystem,
   ]);
 };

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

@@ -11,7 +11,6 @@ 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';
-import { MapAddIcon, MapDeleteIcon } from '@/hooks/Mapper/icons';
 
 export interface ContextMenuSystemInfoProps {
   systemStatics: Map<number, SolarSystemStaticInfoRaw>;
@@ -70,12 +69,8 @@ export const ContextMenuSystemInfo: React.FC<ContextMenuSystemInfoProps> = ({
       ...getJumpPlannerMenu(system, routes),
       ...getWaypointMenu(systemId, system.system_class),
       {
-        label: !hubs.includes(systemId) ? 'Add Route' : 'Remove Route',
-        icon: !hubs.includes(systemId) ? (
-          <MapAddIcon className="mr-1 relative left-[-2px]" />
-        ) : (
-          <MapDeleteIcon className="mr-1 relative left-[-2px]" />
-        ),
+        label: !hubs.includes(systemId) ? 'Add in Routes' : 'Remove from Routes',
+        icon: PrimeIcons.MAP_MARKER,
         command: onHubToggle,
       },
       ...(!systemOnMap

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 { ContextMenu } from 'primereact/contextmenu';
-import { Commands, OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
+import { Commands, 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 { SolarSystemStaticInfoRaw } from '@/hooks/Mapper/types';
 import { emitMapEvent } from '@/hooks/Mapper/events';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { useRouteProvider } from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesProvider.tsx';
 
-export const useContextMenuSystemInfoHandlers = () => {
-  const { outCommand } = useMapRootState();
-  const { hubs = [], toggleHubCommand } = useRouteProvider();
+interface UseContextMenuSystemHandlersProps {
+  hubs: string[];
+  outCommand: OutCommandHandler;
+}
 
+export const useContextMenuSystemInfoHandlers = ({ hubs, outCommand }: UseContextMenuSystemHandlersProps) => {
   const contextMenuRef = useRef<ContextMenu | null>(null);
 
   const [system, setSystem] = useState<string>();
   const routeRef = useRef<(SolarSystemStaticInfoRaw | undefined)[]>([]);
 
-  const ref = useRef({ hubs, system, outCommand, toggleHubCommand });
-  ref.current = { hubs, system, outCommand, toggleHubCommand };
+  const ref = useRef({ hubs, system, outCommand });
+  ref.current = { hubs, system, outCommand };
 
   const open = useCallback(
     (ev: React.SyntheticEvent, systemId: string, route: (SolarSystemStaticInfoRaw | undefined)[]) => {
@@ -33,12 +33,17 @@ export const useContextMenuSystemInfoHandlers = () => {
   );
 
   const onHubToggle = useCallback(() => {
-    const { system } = ref.current;
+    const { hubs, system, outCommand } = ref.current;
     if (!system) {
       return;
     }
 
-    ref.current.toggleHubCommand(system);
+    outCommand({
+      type: !hubs.includes(system) ? OutCommand.addHub : OutCommand.deleteHub,
+      data: {
+        system_id: system,
+      },
+    });
     setSystem(undefined);
   }, []);
 
@@ -54,8 +59,6 @@ export const useContextMenuSystemInfoHandlers = () => {
         system_id: solarSystemId,
       },
     });
-
-    // TODO add it to some queue
     setTimeout(() => {
       emitMapEvent({
         name: Commands.centerSystem,

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

@@ -1,6 +1,6 @@
 import { useCallback, useRef } from 'react';
-import { LayoutEventBlocker, TooltipPosition, WdImageSize, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
-import { ANOIK_ICON, DOTLAN_ICON, ZKB_ICON } from '@/hooks/Mapper/icons';
+import { LayoutEventBlocker, WdImageSize, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
+import { ANOIK_ICON, DOTLAN_ICON, ZKB_ICON } from '@/hooks/Mapper/icons.ts';
 
 import classes from './FastSystemActions.module.scss';
 import clsx from 'clsx';
@@ -59,21 +59,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={{ position: TooltipPosition.top, content: 'Open zkillboard' }}
-          source={ZKB_ICON}
-          onClick={handleOpenZKB}
-        />
-        <WdImgButton
-          tooltip={{ position: TooltipPosition.top, content: 'Open Anoikis' }}
-          source={ANOIK_ICON}
-          onClick={handleOpenAnoikis}
-        />
-        <WdImgButton
-          tooltip={{ position: TooltipPosition.top, content: 'Open Dotlan' }}
-          source={DOTLAN_ICON}
-          onClick={handleOpenDotlan}
-        />
+        <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} />
       </div>
 
       <div className="flex gap-2 items-center pl-1">
@@ -81,14 +69,14 @@ export const FastSystemActions = ({
           textSize={WdImageSize.off}
           className={PrimeIcons.COPY}
           onClick={copySystemNameToClipboard}
-          tooltip={{ position: TooltipPosition.top, content: 'Copy system name' }}
+          tooltip={{ content: 'Copy system name' }}
         />
         {showEdit && (
           <WdImgButton
             textSize={WdImageSize.off}
             className="pi pi-pen-to-square text-base"
             onClick={onOpenSettings}
-            tooltip={{ position: TooltipPosition.top, content: 'Edit system name and description' }}
+            tooltip={{ content: 'Edit system name and description' }}
           />
         )}
       </div>

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

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

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

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

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

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

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

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

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

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

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

@@ -1,11 +1,8 @@
 .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);
-  }
+}
+
+.BackgroundAlternateColor {
+
 }

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

@@ -1,6 +1,7 @@
-import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect, useMemo } from 'react';
+import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect } from 'react';
 import ReactFlow, {
   Background,
+  ConnectionMode,
   Edge,
   MiniMap,
   Node,
@@ -15,25 +16,25 @@ import ReactFlow, {
 } from 'reactflow';
 import 'reactflow/dist/style.css';
 import classes from './Map.module.scss';
+import './styles/neon-theme.scss';
+import './styles/eve-common.scss';
 import { MapProvider, useMapState } from './MapProvider';
-import { useEdgesState, useMapHandlers, useNodesState, useUpdateNodes } from './hooks';
+import { useNodesState, useEdgesState, useMapHandlers, useUpdateNodes } from './hooks';
 import { MapHandlers, OutCommand, OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers.ts';
 import {
   ContextMenuConnection,
   ContextMenuRoot,
   SolarSystemEdge,
+  SolarSystemNode,
   useContextMenuConnectionHandlers,
   useContextMenuRootHandlers,
 } from './components';
-import { getBehaviorForTheme } from './helpers/getThemeBehavior';
 import { OnMapAddSystemCallback, OnMapSelectionChange } from './map.types';
 import { SESSION_KEY } from '@/hooks/Mapper/constants.ts';
-import { PingData, SolarSystemConnection, SolarSystemRawType } from '@/hooks/Mapper/types';
+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 type { PanelPosition } from '@reactflow/core';
 
 const DEFAULT_VIEW_PORT = { zoom: 1, x: 0, y: 0 };
 
@@ -75,16 +76,21 @@ const initialEdges = [
   },
 ];
 
+const nodeTypes = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  custom: SolarSystemNode,
+} as never;
+
 const edgeTypes = {
   floating: SolarSystemEdge,
 };
 
-export const MAP_ROOT_ID = 'MAP_ROOT_ID';
-
 interface MapCompProps {
   refn: ForwardedRef<MapHandlers>;
   onCommand: OutCommandHandler;
   onSelectionChange: OnMapSelectionChange;
+  onManualDelete(systems: string[]): void;
   onConnectionInfoClick?(e: SolarSystemConnection): void;
   onAddSystem?: OnMapAddSystemCallback;
   onSelectionContextMenu?: NodeSelectionMouseHandler;
@@ -95,9 +101,6 @@ interface MapCompProps {
   isThickConnections?: boolean;
   isShowBackgroundPattern?: boolean;
   isSoftBackground?: boolean;
-  theme?: string;
-  pings: PingData[];
-  minimapPlacement?: PanelPosition;
 }
 
 const MapComp = ({
@@ -108,17 +111,15 @@ const MapComp = ({
   onSystemContextMenu,
   onConnectionInfoClick,
   onSelectionContextMenu,
+  onManualDelete,
   isShowMinimap,
   showKSpaceBG,
   isThickConnections,
   isShowBackgroundPattern,
   isSoftBackground,
-  theme,
   onAddSystem,
-  pings,
-  minimapPlacement = 'bottom-right',
 }: MapCompProps) => {
-  const { getNodes } = useReactFlow();
+  const { getNode, getNodes } = useReactFlow();
   const [nodes, , onNodesChange] = useNodesState<Node<SolarSystemRawType>>(initialNodes);
   const [edges, , onEdgesChange] = useEdgesState<Edge<SolarSystemConnection>>(initialEdges);
 
@@ -127,14 +128,6 @@ const MapComp = ({
   const { handleRootContext, ...rootCtxProps } = useContextMenuRootHandlers({ onAddSystem });
   const { handleConnectionContext, ...connectionCtxProps } = useContextMenuConnectionHandlers();
   const { update } = useMapState();
-  const { variant, gap, size, color } = useBackgroundVars(theme);
-  const { isPanAndDrag, nodeComponent, connectionMode } = getBehaviorForTheme(theme || 'default');
-
-  const nodeTypes = useMemo(() => {
-    return {
-      custom: nodeComponent,
-    };
-  }, [nodeComponent]);
 
   const onConnect: OnConnect = useCallback(
     params => {
@@ -191,6 +184,8 @@ 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) {
@@ -198,12 +193,30 @@ const MapComp = ({
       }
 
       const nextChanges = changes.reduce((acc, change) => {
+        if (change.type !== 'remove') {
+          return [...acc, change];
+        }
+
+        const node = getNode(change.id);
+        if (!node) {
+          return [...acc, change];
+        }
+
+        if (node.data.locked) {
+          return acc;
+        }
+
+        systemsIdsToRemove.push(node.data.id);
         return [...acc, change];
       }, [] as NodeChange[]);
 
+      if (systemsIdsToRemove.length > 0) {
+        onManualDelete(systemsIdsToRemove);
+      }
+
       onNodesChange(nextChanges);
     },
-    [getNodes, onNodesChange],
+    [getNode, onManualDelete, onNodesChange],
   );
 
   useEffect(() => {
@@ -211,16 +224,12 @@ const MapComp = ({
       ...x,
       showKSpaceBG: showKSpaceBG,
       isThickConnections: isThickConnections,
-      pings,
     }));
-  }, [showKSpaceBG, isThickConnections, pings, update]);
+  }, [showKSpaceBG, isThickConnections, update]);
 
   return (
     <>
-      <div
-        data-window-id={MAP_ROOT_ID}
-        className={clsx(classes.MapRoot, { [classes.BackgroundAlternateColor]: isSoftBackground })}
-      >
+      <div className={clsx(classes.MapRoot, { ['bg-neutral-900']: isSoftBackground })}>
         <ReactFlow
           nodes={nodes}
           edges={edges}
@@ -232,7 +241,7 @@ const MapComp = ({
           defaultViewport={getViewPortFromStore()}
           edgeTypes={edgeTypes}
           nodeTypes={nodeTypes}
-          connectionMode={connectionMode}
+          connectionMode={ConnectionMode.Loose}
           snapToGrid
           nodeDragThreshold={10}
           onNodeDragStop={handleDragStop}
@@ -240,10 +249,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) => {
@@ -264,22 +269,14 @@ const MapComp = ({
           minZoom={0.2}
           maxZoom={1.5}
           elevateNodesOnSelect
-          deleteKeyCode={['']}
-          {...(isPanAndDrag
-            ? {
-                selectionOnDrag: true,
-                panOnDrag: [2],
-              }
-            : {})}
+          deleteKeyCode={['Delete']}
           // 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} position={minimapPlacement} />
-          )}
-          {isShowBackgroundPattern && <Background variant={variant} gap={gap} size={size} color={color} />}
+          {isShowMinimap && <MiniMap pannable zoomable ariaLabel="Mini map" className={minimapClasses} />}
+          {isShowBackgroundPattern && <Background />}
         </ReactFlow>
         {/* <button className="z-auto btn btn-primary absolute top-20 right-20" onClick={handleGetPassages}>
           Test // DON NOT REMOVE

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

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

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

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

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

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

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

@@ -1,38 +1,14 @@
-@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;
 
@@ -78,29 +54,46 @@
   }
 }
 
+.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;
+  }
+
+}
+
 .ClickPath {
   fill: none;
   stroke: none;
   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 +109,22 @@
   height: 8px;
   font-size: 8px;
 }
+
+.Handle {
+  min-width: initial;
+  min-height: initial;
+  border: 1px solid #5a7d9a;
+  width: 5px;
+  height: 5px;
+  z-index: 1001;
+
+  &.Tick {
+    width: 7px;
+    height: 7px;
+
+    &.Right {
+      margin-left: 0px;
+    }
+  }
+}
+

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

@@ -130,7 +130,7 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
         />
 
         <div
-          className="absolute flex items-center gap-1 pointer-events-none"
+          className="absolute flex items-center gap-1"
           style={{
             transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
           }}

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

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

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

@@ -1,64 +0,0 @@
-import { useMemo } from 'react';
-import { useKillsCounter } from '../../hooks/useKillsCounter';
-import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
-import { WithChildren, WithClassName } from '@/hooks/Mapper/types/common';
-import {
-  KILLS_ROW_HEIGHT,
-  SystemKillsList,
-} from '@/hooks/Mapper/components/mapInterface/widgets/WSystemKills/SystemKillsList';
-import { TooltipSize } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper/utils.ts';
-
-const MIN_TOOLTIP_HEIGHT = 40;
-
-type KillsBookmarkTooltipProps = {
-  killsCount: number;
-  killsActivityType: string | null;
-  systemId: string;
-  className?: string;
-  size?: TooltipSize;
-} & WithChildren &
-  WithClassName;
-
-export const KillsCounter = ({
-  killsCount,
-  systemId,
-  className,
-  children,
-  size = TooltipSize.xs,
-}: KillsBookmarkTooltipProps) => {
-  const { isLoading, kills: detailedKills } = useKillsCounter({
-    realSystemId: systemId,
-  });
-
-  const limitedKills = useMemo(() => {
-    if (!detailedKills || detailedKills.length === 0) return [];
-    return detailedKills.slice(0, killsCount);
-  }, [detailedKills, killsCount]);
-
-  if (!killsCount || limitedKills.length === 0 || !systemId || isLoading) {
-    return null;
-  }
-
-  // Calculate height based on number of kills, but ensure a minimum height
-  const killsNeededHeight = limitedKills.length * KILLS_ROW_HEIGHT;
-  // Add a small buffer (10px) to prevent scrollbar from appearing unnecessarily
-  const tooltipHeight = Math.max(MIN_TOOLTIP_HEIGHT, Math.min(killsNeededHeight + 10, 500));
-
-  return (
-    <WdTooltipWrapper
-      content={
-        <div className="overflow-hidden flex w-[450px] flex-col" style={{ height: `${tooltipHeight}px` }}>
-          <div className="flex-1 h-full">
-            <SystemKillsList kills={limitedKills} onlyOneSystem />
-          </div>
-        </div>
-      }
-      className={className}
-      tooltipClassName="!px-0"
-      size={size}
-      interactive={true}
-    >
-      {children}
-    </WdTooltipWrapper>
-  );
-};

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

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

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

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

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

@@ -1,50 +1,35 @@
 @import '@/hooks/Mapper/components/map/styles/eve-common-variables';
 
 $pastel-blue: #5a7d9a;
-$pastel-pink: rgb(30, 161, 255);
+$pastel-pink: #d291bc;
+$pastel-green: #88b04b;
+$pastel-yellow: #ffdd59;
 $dark-bg: #2d2d2d;
 $text-color: #ffffff;
-$tooltip-bg: #202020;
-
-$neon-color-1: rgb(27, 132, 236);
-$neon-color-3: rgba(27, 132, 236, 0.40);
-
-@keyframes move-stripes {
-  from {
-    background-position: 0 0;
-  }
-  to {
-    background-position: 30px 0;
-  }
-}
+$tooltip-bg: #202020; // Dark background for tooltips
 
 .RootCustomNode {
   display: flex;
   width: 130px;
   height: 34px;
 
-  font-family: var(--rf-node-font-family, inherit) !important;
-  font-weight: var(--rf-node-font-weight, inherit) !important;
-
   flex-direction: column;
   padding: 2px 6px;
   font-size: 10px;
 
-  background-color: var(--rf-node-bg-color, #202020) !important;
-  color: var(--rf-text-color, #ffffff);
-
+  background-color: $tooltip-bg;
   box-shadow: 0 0 5px rgba($dark-bg, 0.5);
   border: 1px solid darken($pastel-blue, 10%);
   border-radius: 5px;
   position: relative;
-  z-index: 3;
+  z-index: 1;
   overflow: hidden;
 
   &.Mataria,
   &.Amarria,
   &.Gallente,
   &.Caldaria {
-    &::after {
+    &::before {
       content: '';
       position: absolute;
       top: 0;
@@ -60,7 +45,7 @@ $neon-color-3: rgba(27, 132, 236, 0.40);
   }
 
   &.Mataria {
-    &::after {
+    &::before {
       background-image: url('/images/mataria-180.png');
       opacity: 0.6;
       background-position-x: 1px;
@@ -69,7 +54,7 @@ $neon-color-3: rgba(27, 132, 236, 0.40);
   }
 
   &.Caldaria {
-    &::after {
+    &::before {
       background-image: url('/images/caldaria-180.png');
       opacity: 0.6;
       background-position-x: 1px;
@@ -78,7 +63,7 @@ $neon-color-3: rgba(27, 132, 236, 0.40);
   }
 
   &.Amarria {
-    &::after {
+    &::before {
       opacity: 0.45;
       background-image: url('/images/amarr-180.png');
       background-position-x: 0;
@@ -87,7 +72,7 @@ $neon-color-3: rgba(27, 132, 236, 0.40);
   }
 
   &.Gallente {
-    &::after {
+    &::before {
       opacity: 0.5;
       background-image: url('/images/gallente-180.png');
       background-position-x: 1px;
@@ -100,63 +85,51 @@ $neon-color-3: rgba(27, 132, 236, 0.40);
     box-shadow: 0 0 10px #9a1af1c2;
   }
 
-  &.rally {
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: -1;
-
-      border-color: $neon-color-1;
-      background: repeating-linear-gradient(
-          45deg,
-          $neon-color-3 0px,
-          $neon-color-3 8px,
-          transparent 8px,
-          transparent 21px
-      );
-      background-size: 30px 30px;
-      animation: move-stripes 3s linear infinite;
-    }
+  .tooltip {
+    background-color: $tooltip-bg;
+    color: $text-color;
+    padding: 5px 10px;
+    border-radius: 3px;
+    border: 1px solid $pastel-pink;
   }
 
   &.eve-system-status-home {
-    border: 1px solid var(--eve-solar-system-status-color-home-dark30);
-    background-image: linear-gradient(45deg, var(--eve-solar-system-status-color-background), transparent);
+    border: 1px solid darken($eve-solar-system-status-color-home, 30%);
+    background-image: linear-gradient(275deg, $eve-solar-system-status-friendly, transparent);
+
     &.selected {
-      border-color: var(--eve-solar-system-status-color-home);
+      border-color: $eve-solar-system-status-color-home;
     }
   }
 
   &.eve-system-status-friendly {
-    border: 1px solid var(--eve-solar-system-status-color-friendly-dark20);
-    background-image: linear-gradient(275deg, var(--eve-solar-system-status-friendly-dark30), transparent);
+    border: 1px solid darken($eve-solar-system-status-color-friendly, 20%);
+    background-image: linear-gradient(275deg, darken($eve-solar-system-status-friendly, 30%), transparent);
+
     &.selected {
-      border-color: var(--eve-solar-system-status-color-friendly-dark5);
+      border-color: darken($eve-solar-system-status-color-friendly, 5%);
     }
   }
 
   &.eve-system-status-lookingFor {
-    border: 1px solid var(--eve-solar-system-status-color-lookingFor-dark15);
+    border: 1px solid darken($eve-solar-system-status-color-lookingFor, 15%);
     background-image: linear-gradient(275deg, #45ff8f2f, #457fff2f);
+
     &.selected {
       border-color: $pastel-pink;
     }
   }
 
   &.eve-system-status-warning {
-    background-image: linear-gradient(275deg, var(--eve-solar-system-status-warning), transparent);
+    background-image: linear-gradient(275deg, $eve-solar-system-status-warning, transparent);
   }
 
   &.eve-system-status-dangerous {
-    background-image: linear-gradient(275deg, var(--eve-solar-system-status-dangerous), transparent);
+    background-image: linear-gradient(275deg, $eve-solar-system-status-dangerous, transparent);
   }
 
   &.eve-system-status-target {
-    background-image: linear-gradient(275deg, var(--eve-solar-system-status-target), transparent);
+    background-image: linear-gradient(275deg, $eve-solar-system-status-target, transparent);
   }
 }
 
@@ -181,6 +154,8 @@ $neon-color-3: rgba(27, 132, 236, 0.40);
     padding-left: 3px;
     padding-right: 3px;
 
+    //background-color: #833ca4;
+
     &:not(:first-child) {
       box-shadow: inset 4px -3px 4px rgba(0, 0, 0, 0.3);
     }
@@ -267,17 +242,26 @@ $neon-color-3: rgba(27, 132, 236, 0.40);
 
   .TagTitle {
     font-size: 11px;
-    font-weight: 500;
+    font-weight: bold;
     text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
-    color: var(--rf-tag-color, #38bdf8);
+
+    color: #ffb01d;
   }
 
   /* Firefox kostyl */
   @-moz-document url-prefix() {
     .classSystemName {
+      font-family: inherit !important;
       font-weight: bold;
     }
   }
+
+  .classSystemName {
+    //font-weight: bold;
+  }
+
+  .solarSystemName {
+  }
 }
 
 .BottomRow {
@@ -286,23 +270,22 @@ $neon-color-3: rgba(27, 132, 236, 0.40);
   align-items: center;
   height: 19px;
 
-  .hasLocalCounter {
-    margin-right: 2px;
-    &.countAbove9 {
-      margin-right: 1.5rem;
+  .localCounter {
+    display: flex;
+    //align-items: center;
+    gap: 2px;
+
+    & > i {
+      position: relative;
+      top: 1px;
     }
-  }
 
-  .lockIcon {
-    font-size: 0.45rem;
-    font-weight: bold;
-    position: relative;
-  }
-
-  .mapMarker {
-    font-size: 0.45rem;
-    font-weight: bold;
-    position: relative;
+    & > span {
+      font-size: 9px;
+      line-height: 9px;
+      font-weight: 500;
+      //margin-top: 1px;
+    }
   }
 }
 
@@ -333,8 +316,7 @@ $neon-color-3: rgba(27, 132, 236, 0.40);
 
 .Handlers {
   position: absolute;
-  z-index: 4;
-  pointer-events: none;
+  z-index: 2;
   top: 0;
   left: 0;
   width: 100%;
@@ -347,7 +329,6 @@ $neon-color-3: rgba(27, 132, 236, 0.40);
   border: 1px solid $pastel-blue;
   width: 5px;
   height: 5px;
-  pointer-events: auto;
 
   &.selected {
     border-color: $pastel-pink;
@@ -390,15 +371,3 @@ $neon-color-3: rgba(27, 132, 236, 0.40);
     }
   }
 }
-
-.ShatteredIcon {
-  position: relative;
-  //top: -1px;
-  left: -1px;
-
-  background-size: 100%;
-  background-repeat: no-repeat;
-  background-position: center;
-
-  background-image: url(/images/chart-network-svgrepo-com.svg)
-}

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

@@ -0,0 +1,324 @@
+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 { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+
+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 { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
+import { useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
+import { getSystemClassStyles, prepareUnsplashedChunks } 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 { interfaceSettings } = useMapRootState();
+  const { isShowUnsplashedSignatures } = interfaceSettings;
+
+  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 signatures = data.system_signatures;
+
+  const { locked, name, tag, status, labels, id } = data || {};
+
+  const customName = solar_system_name !== name ? name : undefined;
+
+  const {
+    data: {
+      characters,
+      presentCharacters,
+      wormholesData,
+      hubs,
+      kills,
+      userCharacters,
+      isConnecting,
+      hoverNodeId,
+      visibleNodes,
+      showKSpaceBG,
+      isThickConnections,
+    },
+    outCommand,
+  } = useMapState();
+
+  const visible = useMemo(() => visibleNodes.has(id), [id, visibleNodes]);
+
+  const charactersInSystem = useMemo(() => {
+    return characters.filter(c => c.location?.solar_system_id === solar_system_id).filter(c => c.online);
+    // eslint-disable-next-line
+  }, [characters, presentCharacters, solar_system_id]);
+
+  const isWormhole = isWormholeSpace(system_class);
+  const classTitleColor = useMemo(
+    () => getSystemClassStyles({ systemClass: system_class, security }),
+    [security, system_class],
+  );
+  const sortedStatics = useMemo(() => sortWHClasses(wormholesData, statics), [wormholesData, statics]);
+  const lebM = useMemo(() => new LabelsManager(labels ?? ''), [labels]);
+  const labelsInfo = useMemo(() => sortedLabels(lebM.list), [lebM]);
+  const labelCustom = useMemo(() => lebM.customLabel, [lebM]);
+
+  const killsCount = useMemo(() => {
+    const systemKills = kills[solar_system_id];
+    if (!systemKills) {
+      return null;
+    }
+
+    return systemKills;
+  }, [kills, solar_system_id]);
+
+  const hasUserCharacters = useMemo(() => {
+    return charactersInSystem.some(x => userCharacters.includes(x.eve_id));
+  }, [charactersInSystem, userCharacters]);
+
+  const dbClick = useDoubleClick(() => {
+    outCommand({
+      type: OutCommand.openSettings,
+      data: {
+        system_id: solar_system_id.toString(),
+      },
+    });
+  });
+
+  const showHandlers = isConnecting || hoverNodeId === id;
+
+  const space = showKSpaceBG ? REGIONS_MAP[region_id] : '';
+  const regionClass = showKSpaceBG ? SpaceToClass[space] : null;
+
+  const [unsplashedLeft, unsplashedRight] = useMemo(() => {
+    if (!isShowUnsplashedSignatures) {
+      return [[], []];
+    }
+
+    return prepareUnsplashedChunks(
+      signatures
+        .filter(s => s.group === 'Wormhole' && !s.linked_system)
+        .map(s => ({
+          eve_id: s.eve_id,
+          type: s.type,
+          custom_info: s.custom_info,
+        })),
+    );
+  }, [isShowUnsplashedSignatures, signatures]);
+
+  return (
+    <>
+      {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>
+
+      {visible && isShowUnsplashedSignatures && (
+        <div className={classes.Unsplashed}>
+          {unsplashedLeft.map(x => (
+            <UnsplashedSignature key={x.sig_id} signature={x} />
+          ))}
+        </div>
+      )}
+
+      {visible && isShowUnsplashedSignatures && (
+        <div className={clsx([classes.Unsplashed, classes['Unsplashed--right']])}>
+          {unsplashedRight.map(x => (
+            <UnsplashedSignature key={x.sig_id} signature={x} />
+          ))}
+        </div>
+      )}
+
+      <div onMouseDownCapture={dbClick} className={classes.Handlers}>
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleTop, {
+            [classes.selected]: selected,
+            [classes.Tick]: isThickConnections,
+          })}
+          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Top}
+          id="a"
+        />
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleRight, {
+            [classes.selected]: selected,
+            [classes.Tick]: isThickConnections,
+          })}
+          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Right}
+          id="b"
+        />
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleBottom, {
+            [classes.selected]: selected,
+            [classes.Tick]: isThickConnections,
+          })}
+          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Bottom}
+          id="c"
+        />
+        <Handle
+          type="source"
+          className={clsx(classes.Handle, classes.HandleLeft, {
+            [classes.selected]: selected,
+            [classes.Tick]: isThickConnections,
+          })}
+          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
+          position={Position.Left}
+          id="d"
+        />
+      </div>
+    </>
+  );
+});

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

@@ -1,224 +0,0 @@
-import { memo } from 'react';
-import { MapSolarSystemType } from '../../map.types';
-import { Handle, NodeProps, Position } from 'reactflow';
-import clsx from 'clsx';
-import classes from './SolarSystemNodeDefault.module.scss';
-import { PrimeIcons } from 'primereact/api';
-import { useLocalCounter, useNodeKillsCount, useSolarSystemNode } from '../../hooks';
-import {
-  EFFECT_BACKGROUND_STYLES,
-  MARKER_BOOKMARK_BG_STYLES,
-  STATUS_CLASSES,
-} from '@/hooks/Mapper/components/map/constants';
-import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/WormholeClassComp';
-import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
-import { LocalCounter } from './SolarSystemLocalCounter';
-import { KillsCounter } from './SolarSystemKillsCounter';
-import { TooltipSize } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper/utils.ts';
-import { TooltipPosition, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
-import { Tag } from 'primereact/tag';
-
-// let render = 0;
-export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>) => {
-  const nodeVars = useSolarSystemNode(props);
-  const { localCounterCharacters } = useLocalCounter(nodeVars);
-  const localKillsCount = useNodeKillsCount(nodeVars.solarSystemId, nodeVars.killsCount);
-
-  // console.log('JOipP', `render ${nodeVars.id}`, render++);
-
-  return (
-    <>
-      {nodeVars.visible && (
-        <div className={classes.Bookmarks}>
-          {nodeVars.isShattered && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered, '!pr-[2px]')}>
-              <WdTooltipWrapper content="Shattered" position={TooltipPosition.top}>
-                <span className={clsx('block w-[10px] h-[10px]', classes.ShatteredIcon)} />
-              </WdTooltipWrapper>
-            </div>
-          )}
-
-          {localKillsCount && localKillsCount > 0 && nodeVars.solarSystemId && (
-            <KillsCounter
-              killsCount={localKillsCount}
-              systemId={nodeVars.solarSystemId}
-              size={TooltipSize.lg}
-              killsActivityType={nodeVars.killsActivityType}
-              className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!])}
-            >
-              <div className={clsx(classes.BookmarkWithIcon)}>
-                <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
-                <span className={clsx(classes.text)}>{nodeVars.killsCount}</span>
-              </div>
-            </KillsCounter>
-          )}
-
-          {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.labelsInfo.map(x => (
-            <div key={x.id} className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}>
-              {x.shortName}
-            </div>
-          ))}
-        </div>
-      )}
-
-      <div
-        className={clsx(
-          classes.RootCustomNode,
-          nodeVars.regionClass && classes[nodeVars.regionClass],
-          nodeVars.status !== undefined && classes[STATUS_CLASSES[nodeVars.status]],
-          {
-            [classes.selected]: nodeVars.selected,
-            [classes.rally]: nodeVars.isRally,
-          },
-        )}
-        onMouseDownCapture={e => nodeVars.dbClick(e)}
-      >
-        {nodeVars.visible && (
-          <>
-            <div className={classes.HeadRow}>
-              <div
-                className={clsx(
-                  classes.classTitle,
-                  nodeVars.classTitleColor,
-                  '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]',
-                )}
-              >
-                {nodeVars.classTitle ?? '-'}
-              </div>
-
-              {nodeVars.tag != null && nodeVars.tag !== '' && (
-                <Tag
-                  value={nodeVars.tag}
-                  severity="warning"
-                  className="py-0 px-[2px] text-[9px] [&_.p-tag-value]:leading-[1.3]"
-                ></Tag>
-              )}
-
-              <div
-                className={clsx(
-                  classes.classSystemName,
-                  '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] flex-grow overflow-hidden text-ellipsis whitespace-nowrap font-sans',
-                )}
-              >
-                {nodeVars.systemName}
-              </div>
-
-              {nodeVars.isWormhole && (
-                <div className={classes.statics}>
-                  {nodeVars.sortedStatics.map(whClass => (
-                    <WormholeClassComp key={String(whClass)} id={String(whClass)} />
-                  ))}
-                </div>
-              )}
-
-              {nodeVars.effectName !== null && nodeVars.isWormhole && (
-                <div className={clsx(classes.effect, EFFECT_BACKGROUND_STYLES[nodeVars.effectName])} />
-              )}
-            </div>
-
-            <div className={clsx(classes.BottomRow, 'flex items-center justify-between')}>
-              {nodeVars.customName && (
-                <div className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-blue-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5">
-                  {nodeVars.customName}
-                </div>
-              )}
-
-              {!nodeVars.isWormhole && !nodeVars.customName && (
-                <div className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-stone-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5">
-                  {nodeVars.regionName}
-                </div>
-              )}
-
-              {nodeVars.isWormhole && !nodeVars.customName && <div />}
-
-              <div className="flex items-center gap-1 justify-end">
-                <div className={clsx('flex items-center gap-1')}>
-                  {nodeVars.locked && <i className={clsx(PrimeIcons.LOCK, classes.lockIcon)} />}
-                  {nodeVars.hubs.includes(nodeVars.solarSystemId) && (
-                    <i className={clsx(PrimeIcons.MAP_MARKER, classes.mapMarker)} />
-                  )}
-                </div>
-
-                <LocalCounter
-                  hasUserCharacters={nodeVars.hasUserCharacters}
-                  localCounterCharacters={localCounterCharacters}
-                />
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-
-      {nodeVars.visible && (
-        <>
-          {nodeVars.unsplashedLeft.length > 0 && (
-            <div className={classes.Unsplashed}>
-              {nodeVars.unsplashedLeft.map(sig => (
-                <UnsplashedSignature key={sig.eve_id} signature={sig} />
-              ))}
-            </div>
-          )}
-
-          {nodeVars.unsplashedRight.length > 0 && (
-            <div className={clsx(classes.Unsplashed, classes['Unsplashed--right'])}>
-              {nodeVars.unsplashedRight.map(sig => (
-                <UnsplashedSignature key={sig.eve_id} signature={sig} />
-              ))}
-            </div>
-          )}
-        </>
-      )}
-
-      <div className={classes.Handlers}>
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleTop, {
-            [classes.selected]: nodeVars.selected,
-            [classes.Tick]: nodeVars.isThickConnections,
-          })}
-          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Top}
-          id="a"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleRight, {
-            [classes.selected]: nodeVars.selected,
-            [classes.Tick]: nodeVars.isThickConnections,
-          })}
-          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Right}
-          id="b"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleBottom, {
-            [classes.selected]: nodeVars.selected,
-            [classes.Tick]: nodeVars.isThickConnections,
-          })}
-          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Bottom}
-          id="c"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleLeft, {
-            [classes.selected]: nodeVars.selected,
-            [classes.Tick]: nodeVars.isThickConnections,
-          })}
-          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Left}
-          id="d"
-        />
-      </div>
-    </>
-  );
-});
-
-SolarSystemNodeDefault.displayName = 'SolarSystemNodeDefault';

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

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

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

@@ -1,219 +0,0 @@
-import { memo } from 'react';
-import { MapSolarSystemType } from '../../map.types';
-import { Handle, NodeProps, Position } from 'reactflow';
-import clsx from 'clsx';
-import classes from './SolarSystemNodeTheme.module.scss';
-import { PrimeIcons } from 'primereact/api';
-import { useLocalCounter, useNodeKillsCount, useSolarSystemNode } from '../../hooks';
-import {
-  EFFECT_BACKGROUND_STYLES,
-  MARKER_BOOKMARK_BG_STYLES,
-  STATUS_CLASSES,
-} from '@/hooks/Mapper/components/map/constants';
-import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/WormholeClassComp';
-import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
-import { LocalCounter } from './SolarSystemLocalCounter';
-import { KillsCounter } from './SolarSystemKillsCounter';
-import { TooltipPosition, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
-import { TooltipSize } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper/utils.ts';
-
-// let render = 0;
-export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>) => {
-  const nodeVars = useSolarSystemNode(props);
-  const { localCounterCharacters } = useLocalCounter(nodeVars);
-  const localKillsCount = useNodeKillsCount(nodeVars.solarSystemId, nodeVars.killsCount);
-
-  // console.log('JOipP', `render ${nodeVars.id}`, render++);
-
-  return (
-    <>
-      {nodeVars.visible && (
-        <div className={classes.Bookmarks}>
-          {nodeVars.isShattered && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered, '!pr-[2px]')}>
-              <WdTooltipWrapper content="Shattered" position={TooltipPosition.top}>
-                <span className={clsx('block w-[10px] h-[10px]', classes.ShatteredIcon)} />
-              </WdTooltipWrapper>
-            </div>
-          )}
-
-          {localKillsCount && localKillsCount > 0 && nodeVars.solarSystemId && (
-            <KillsCounter
-              killsCount={localKillsCount}
-              systemId={nodeVars.solarSystemId}
-              size={TooltipSize.lg}
-              killsActivityType={nodeVars.killsActivityType}
-              className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!])}
-            >
-              <div className={clsx(classes.BookmarkWithIcon)}>
-                <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
-                <span className={clsx(classes.text)}>{nodeVars.killsCount}</span>
-              </div>
-            </KillsCounter>
-          )}
-
-          {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.labelsInfo.map(x => (
-            <div key={x.id} className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}>
-              {x.shortName}
-            </div>
-          ))}
-        </div>
-      )}
-
-      <div
-        className={clsx(
-          classes.RootCustomNode,
-          nodeVars.regionClass && classes[nodeVars.regionClass],
-          nodeVars.status !== undefined ? classes[STATUS_CLASSES[nodeVars.status]] : '',
-          {
-            [classes.selected]: nodeVars.selected,
-            [classes.rally]: nodeVars.isRally,
-          },
-        )}
-        onMouseDownCapture={e => nodeVars.dbClick(e)}
-      >
-        {nodeVars.visible && (
-          <>
-            <div className={classes.HeadRow}>
-              <div
-                className={clsx(
-                  classes.classTitle,
-                  nodeVars.classTitleColor,
-                  '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]',
-                )}
-              >
-                {nodeVars.classTitle ?? '-'}
-              </div>
-
-              {nodeVars.tag != null && nodeVars.tag !== '' && (
-                <div className={clsx(classes.TagTitle)}>{nodeVars.tag}</div>
-              )}
-
-              <div
-                className={clsx(
-                  classes.classSystemName,
-                  '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] flex-grow overflow-hidden text-ellipsis whitespace-nowrap',
-                )}
-              >
-                {nodeVars.systemName}
-              </div>
-
-              {nodeVars.isWormhole && (
-                <div className={classes.statics}>
-                  {nodeVars.sortedStatics.map(whClass => (
-                    <WormholeClassComp key={String(whClass)} id={String(whClass)} />
-                  ))}
-                </div>
-              )}
-
-              {nodeVars.effectName !== null && nodeVars.isWormhole && (
-                <div className={clsx(classes.effect, EFFECT_BACKGROUND_STYLES[nodeVars.effectName])} />
-              )}
-            </div>
-
-            <div className={clsx(classes.BottomRow, 'flex items-center justify-between')}>
-              {nodeVars.customName && (
-                <div className="[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="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] whitespace-nowrap overflow-hidden text-ellipsis mr-0.5">
-                  {nodeVars.regionName}
-                </div>
-              )}
-
-              {nodeVars.isWormhole && !nodeVars.customName && <div />}
-
-              <div className="flex items-center gap-1 justify-end">
-                <div className={clsx('flex items-center gap-1')}>
-                  {nodeVars.locked && <i className={clsx(PrimeIcons.LOCK, classes.lockIcon)} />}
-                  {nodeVars.hubs.includes(nodeVars.solarSystemId) && (
-                    <i className={clsx(PrimeIcons.MAP_MARKER, classes.mapMarker)} />
-                  )}
-                </div>
-
-                <LocalCounter
-                  hasUserCharacters={nodeVars.hasUserCharacters}
-                  localCounterCharacters={localCounterCharacters}
-                />
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-
-      {nodeVars.visible && (
-        <>
-          {nodeVars.unsplashedLeft.length > 0 && (
-            <div className={classes.Unsplashed}>
-              {nodeVars.unsplashedLeft.map(sig => (
-                <UnsplashedSignature key={sig.eve_id} signature={sig} />
-              ))}
-            </div>
-          )}
-
-          {nodeVars.unsplashedRight.length > 0 && (
-            <div className={clsx(classes.Unsplashed, classes['Unsplashed--right'])}>
-              {nodeVars.unsplashedRight.map(sig => (
-                <UnsplashedSignature key={sig.eve_id} signature={sig} />
-              ))}
-            </div>
-          )}
-        </>
-      )}
-
-      <div className={classes.Handlers}>
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleTop, {
-            [classes.selected]: nodeVars.selected,
-            [classes.Tick]: nodeVars.isThickConnections,
-          })}
-          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Top}
-          id="a"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleRight, {
-            [classes.selected]: nodeVars.selected,
-            [classes.Tick]: nodeVars.isThickConnections,
-          })}
-          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Right}
-          id="b"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleBottom, {
-            [classes.selected]: nodeVars.selected,
-            [classes.Tick]: nodeVars.isThickConnections,
-          })}
-          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Bottom}
-          id="c"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleLeft, {
-            [classes.selected]: nodeVars.selected,
-            [classes.Tick]: nodeVars.isThickConnections,
-          })}
-          style={{ visibility: nodeVars.showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Left}
-          id="d"
-        />
-      </div>
-    </>
-  );
-});
-
-SolarSystemNodeTheme.displayName = 'SolarSystemNodeTheme';

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

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

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

@@ -9,14 +9,10 @@
     width: 13px;
     height: 4px;
     border-radius: 4px;
-    color: var(--text-color);
+    color: #ffffff;
     font-size: 8px;
     text-align: center;
     font-weight: bolder;
     display: block;
   }
-
-  & > .Eol {
-    display: block;
-  }
 }

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

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

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

@@ -16,7 +16,7 @@ export enum SOLAR_SYSTEM_CLASS_IDS {
   thera = 12,
   c13 = 13,
   sentinel = 14,
-  barbican = 15,
+  baribican = 15,
   vidette = 16,
   conflux = 17,
   redoubt = 18,
@@ -82,7 +82,7 @@ export const SOLAR_SYSTEM_CLASSES_TO_CLASS_GROUPS = {
   thera: SOLAR_SYSTEM_CLASS_GROUPS.thera,
   c13: SOLAR_SYSTEM_CLASS_GROUPS.c13,
   sentinel: SOLAR_SYSTEM_CLASS_GROUPS.drifter,
-  barbican: SOLAR_SYSTEM_CLASS_GROUPS.drifter,
+  baribican: SOLAR_SYSTEM_CLASS_GROUPS.drifter,
   vidette: SOLAR_SYSTEM_CLASS_GROUPS.drifter,
   conflux: SOLAR_SYSTEM_CLASS_GROUPS.drifter,
   redoubt: SOLAR_SYSTEM_CLASS_GROUPS.drifter,
@@ -217,7 +217,7 @@ export const WORMHOLES_ADDITIONAL_INFO_RAW: WormholesAdditionalInfoType[] = [
     wormholeClassID: 14,
     effectPower: 2,
     title: 'Class 14 (Sentinel Drifter)',
-    shortTitle: 'Sentinel MZ',
+    shortTitle: 'Sentinel',
   },
   {
     id: 'barbican',
@@ -225,7 +225,7 @@ export const WORMHOLES_ADDITIONAL_INFO_RAW: WormholesAdditionalInfoType[] = [
     wormholeClassID: 15,
     effectPower: 2,
     title: 'Class 15 (Barbican Drifter)',
-    shortTitle: 'Liberated Barbican',
+    shortTitle: 'Barbican',
   },
   {
     id: 'vidette',
@@ -233,7 +233,7 @@ export const WORMHOLES_ADDITIONAL_INFO_RAW: WormholesAdditionalInfoType[] = [
     wormholeClassID: 16,
     effectPower: 2,
     title: 'Class 16 (Vidette Drifter)',
-    shortTitle: 'Sanctified Vidette',
+    shortTitle: 'Vidette',
   },
   {
     id: 'conflux',
@@ -241,7 +241,7 @@ export const WORMHOLES_ADDITIONAL_INFO_RAW: WormholesAdditionalInfoType[] = [
     wormholeClassID: 17,
     effectPower: 2,
     title: 'Class 17 (Conflux Drifter)',
-    shortTitle: 'Conflux Eyrie',
+    shortTitle: 'Conflux',
   },
   {
     id: 'redoubt',
@@ -249,7 +249,7 @@ export const WORMHOLES_ADDITIONAL_INFO_RAW: WormholesAdditionalInfoType[] = [
     wormholeClassID: 18,
     effectPower: 2,
     title: 'Class 18 (Redoubt Drifter)',
-    shortTitle: 'Azdaja Redoubt',
+    shortTitle: 'Redoubt',
   },
   {
     id: 'a1',
@@ -322,9 +322,6 @@ export const WORMHOLES_ADDITIONAL_INFO: Record<string, WormholesAdditionalInfoTy
 export const WORMHOLES_ADDITIONAL_INFO_BY_CLASS_ID: Record<string, WormholesAdditionalInfoType> =
   WORMHOLES_ADDITIONAL_INFO_RAW.reduce((acc, x) => ({ ...acc, [x.wormholeClassID]: x }), {});
 
-export const WORMHOLES_ADDITIONAL_INFO_BY_SHORT_NAME: Record<string, WormholesAdditionalInfoType> =
-  WORMHOLES_ADDITIONAL_INFO_RAW.reduce((acc, x) => ({ ...acc, [x.shortName]: x }), {});
-
 // export const SOLAR_SYSTEM_CLASS_NAMES = {
 //   ccp1 =  ,
 //   c1 = ,
@@ -653,7 +650,6 @@ export enum LABELS {
   l3 = '3',
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const LABELS_INFO: Record<string, any> = {
   [LABELS.clear]: { id: 'clear', name: 'Clear', shortName: '', icon: '' },
   [LABELS.la]: { id: 'la', name: 'Label A', shortName: 'A', icon: '' },
@@ -754,17 +750,6 @@ export const SHIP_SIZES_SIZE = {
   [ShipSizeStatus.capital]: '2M',
 };
 
-export const SHIP_MASSES_SIZE: Record<number, ShipSizeStatus> = {
-  5_000_000: ShipSizeStatus.small,
-  62_000_000: ShipSizeStatus.medium,
-  300_000_000: ShipSizeStatus.large,
-  375_000_000: ShipSizeStatus.large,
-  1_000_000_000: ShipSizeStatus.freight,
-  1_350_000_000: ShipSizeStatus.capital,
-  1_800_000_000: ShipSizeStatus.capital,
-  2_000_000_000: ShipSizeStatus.capital,
-};
-
 export const SHIP_SIZES_DESCRIPTION = {
   [ShipSizeStatus.small]: 'Frigate wormhole - up to Destroyer | 5K t.',
   [ShipSizeStatus.medium]: 'Cruise wormhole - up to Battlecruiser | 62K t.',

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

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

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

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

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

@@ -10,7 +10,7 @@ export const isWormholeSpace = (wormholeClassID: number) => {
     case SOLAR_SYSTEM_CLASS_IDS.c6:
     case SOLAR_SYSTEM_CLASS_IDS.c13:
     case SOLAR_SYSTEM_CLASS_IDS.thera:
-    case SOLAR_SYSTEM_CLASS_IDS.barbican:
+    case SOLAR_SYSTEM_CLASS_IDS.baribican:
     case SOLAR_SYSTEM_CLASS_IDS.vidette:
     case SOLAR_SYSTEM_CLASS_IDS.conflux:
     case SOLAR_SYSTEM_CLASS_IDS.redoubt:

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

@@ -1,4 +1,5 @@
 import { useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
+import { useCallback, useRef } from 'react';
 import {
   CommandCharacterAdded,
   CommandCharacterRemoved,
@@ -6,7 +7,6 @@ import {
   CommandCharacterUpdated,
   CommandPresentCharacters,
 } from '@/hooks/Mapper/types';
-import { useCallback, useRef } from 'react';
 
 export const useCommandsCharacters = () => {
   const { update } = useMapState();

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

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

@@ -1,6 +1,6 @@
 import { MapData, useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
-import { CommandKillsUpdated, CommandMapUpdated } from '@/hooks/Mapper/types';
 import { useCallback, useRef } from 'react';
+import { CommandKillsUpdated, CommandMapUpdated } from '@/hooks/Mapper/types';
 
 export const useMapCommands = () => {
   const { update } = useMapState();
@@ -8,21 +8,13 @@ export const useMapCommands = () => {
   const ref = useRef({ update });
   ref.current = { update };
 
-  const mapUpdated = useCallback(({ hubs, system_signatures, kills }: CommandMapUpdated) => {
+  const mapUpdated = useCallback(({ hubs }: CommandMapUpdated) => {
     const out: Partial<MapData> = {};
 
     if (hubs) {
       out.hubs = hubs;
     }
 
-    if (system_signatures) {
-      out.systemSignatures = system_signatures;
-    }
-
-    if (kills) {
-      out.kills = kills.reduce((acc, x) => ({ ...acc, [x.solar_system_id]: x.kills }), {});
-    }
-
     ref.current.update(out);
   }, []);
 

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

@@ -1,8 +1,8 @@
-import { MapData, useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
-import { CommandInit } from '@/hooks/Mapper/types/mapHandlers.ts';
-import { useCallback, useRef } from 'react';
 import { useReactFlow } from 'reactflow';
+import { useCallback, useRef } from 'react';
+import { CommandInit } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { convertConnection2Edge, convertSystem2Node } from '../../helpers';
+import { MapData, useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
 
 export const useMapInit = () => {
   const rf = useReactFlow();
@@ -14,7 +14,6 @@ export const useMapInit = () => {
   return useCallback(
     ({
       systems,
-      system_signatures,
       kills,
       connections,
       wormholes,
@@ -52,10 +51,6 @@ export const useMapInit = () => {
         updateData.systems = systems;
       }
 
-      if (system_signatures) {
-        updateData.systemSignatures = system_signatures;
-      }
-
       if (kills) {
         updateData.kills = kills.reduce((acc, x) => ({ ...acc, [x.solar_system_id]: x.kills }), {});
       }

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

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

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

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

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

@@ -1,48 +0,0 @@
-import { useEffect, useState } from 'react';
-import { BackgroundVariant } from 'reactflow';
-
-export function useBackgroundVars(themeName?: string) {
-  const [variant, setVariant] = useState<BackgroundVariant>(BackgroundVariant.Dots);
-  const [gap, setGap] = useState<number>(16);
-  const [size, setSize] = useState<number>(1);
-  const [color, setColor] = useState('#81818b');
-  const [snapSize, setSnapSize] = useState<number>(25);
-
-  useEffect(() => {
-    // match any element whose entire `class` attribute ends with "-theme"
-    let themeEl = document.querySelector('[class$="-theme"]');
-
-    // If none is found, fall back to the <html> element
-    if (!themeEl) {
-      themeEl = document.documentElement;
-    }
-
-    const style = getComputedStyle(themeEl as HTMLElement);
-
-    const rawVariant = style.getPropertyValue('--rf-bg-variant').replace(/['"]/g, '').trim().toLowerCase();
-    let finalVariant: BackgroundVariant = BackgroundVariant.Dots;
-
-    if (rawVariant === 'lines') {
-      finalVariant = BackgroundVariant.Lines;
-    } else if (rawVariant === 'cross') {
-      finalVariant = BackgroundVariant.Cross;
-    }
-
-    const cssVarGap = style.getPropertyValue('--rf-bg-gap');
-    const cssVarSize = style.getPropertyValue('--rf-bg-size');
-    const cssVarSnapSize = style.getPropertyValue('--rf-snap-size');
-    const cssColor = style.getPropertyValue('--rf-bg-pattern-color');
-
-    const gapNum = parseInt(cssVarGap, 10) || 16;
-    const sizeNum = parseInt(cssVarSize, 10) || 1;
-    const snapSize = parseInt(cssVarSnapSize, 10) || 25; //react-flow default
-
-    setVariant(finalVariant);
-    setGap(gapNum);
-    setSize(sizeNum);
-    setColor(cssColor);
-    setSnapSize(snapSize);
-  }, [themeName]);
-
-  return { variant, gap, size, color, snapSize };
-}

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

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

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

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

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

@@ -70,7 +70,7 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
               setTimeout(() => addConnections(data as CommandAddConnections), 100);
               break;
             case Commands.removeConnections:
-              setTimeout(() => removeConnections(data as CommandRemoveConnections), 100);
+              removeConnections(data as CommandRemoveConnections);
               break;
             case Commands.charactersUpdated:
               charactersUpdated(data as CommandCharactersUpdated);
@@ -115,18 +115,16 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
               }, 500);
               break;
 
-            case Commands.pingAdded:
-            case Commands.pingCancelled:
             case Commands.routes:
+              // do nothing here
+              break;
+
             case Commands.signaturesUpdated:
+              // do nothing here
+              break;
+
             case Commands.linkSignatureToSystem:
-            case Commands.detailedKillsUpdated:
-            case Commands.characterActivityData:
-            case Commands.trackingCharactersData:
-            case Commands.updateActivity:
-            case Commands.updateTracking:
-            case Commands.userSettingsUpdated:
-              // do nothing
+              // do nothing here
               break;
 
             default:

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

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

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

@@ -1,242 +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 } from '@/hooks/Mapper/components/map/helpers';
-import { sortWHClasses } from '@/hooks/Mapper/helpers';
-import { CharacterTypeRaw, OutCommand, PingType, SystemSignature } from '@/hooks/Mapper/types';
-import { useUnsplashedSignatures } from './useUnsplashedSignatures';
-import { useSystemName } from './useSystemName';
-import { LabelInfo, useLabelsInfo } from './useLabelsInfo';
-import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
-
-function getActivityType(count: number): string {
-  if (count <= 5) return 'activityNormal';
-  if (count <= 30) return 'activityWarn';
-  return 'activityDanger';
-}
-
-export interface SolarSystemNodeVars {
-  id: string;
-  selected: boolean;
-  visible: boolean;
-  isWormhole: boolean;
-  classTitleColor: string | null;
-  killsCount: number | null;
-  killsActivityType: string | null;
-  hasUserCharacters: boolean;
-  showHandlers: boolean;
-  regionClass: string | null;
-  systemName: string;
-  customName?: string | null;
-  labelCustom: string | null;
-  isShattered: boolean;
-  tag?: string | null;
-  status?: number;
-  labelsInfo: LabelInfo[];
-  dbClick: (event: React.MouseEvent<HTMLDivElement>) => void;
-  sortedStatics: Array<string | number>;
-  effectName: string | null;
-  regionName: string | null;
-  solarSystemId: string;
-  solarSystemName: string | null;
-  locked: boolean;
-  hubs: string[];
-  name: string | null;
-  isConnecting: boolean;
-  hoverNodeId: string | null;
-  charactersInSystem: Array<CharacterTypeRaw>;
-  userCharacters: string[];
-  unsplashedLeft: Array<SystemSignature>;
-  unsplashedRight: Array<SystemSignature>;
-  isThickConnections: boolean;
-  isRally: boolean;
-  classTitle: string | null;
-  temporaryName?: string | null;
-}
-
-const SpaceToClass: Record<string, string> = {
-  [Spaces.Caldari]: 'Caldaria',
-  [Spaces.Matar]: 'Mataria',
-  [Spaces.Amarr]: 'Amarria',
-  [Spaces.Gallente]: 'Gallente',
-};
-
-export function useLocalCounter(nodeVars: SolarSystemNodeVars) {
-  const localCounterCharacters = useMemo(() => {
-    return nodeVars.charactersInSystem
-      .map(char => ({
-        ...char,
-        compact: true,
-        isOwn: nodeVars.userCharacters.includes(char.eve_id),
-      }))
-      .sort((a, b) => a.name.localeCompare(b.name));
-  }, [nodeVars.charactersInSystem, nodeVars.userCharacters]);
-  return { localCounterCharacters };
-}
-
-export const useSolarSystemNode = (props: NodeProps<MapSolarSystemType>): SolarSystemNodeVars => {
-  const { id, data, selected } = props;
-  const {
-    id: solar_system_id,
-    locked,
-    name,
-    tag,
-    status,
-    labels,
-    temporary_name,
-    linked_sig_eve_id: linkedSigEveId = '',
-  } = data;
-
-  const {
-    storedSettings: { interfaceSettings },
-    data: { systemSignatures: mapSystemSignatures },
-  } = useMapRootState();
-
-  const systemStaticInfo = useMemo(() => {
-    return getSystemStaticInfo(solar_system_id)!;
-  }, [solar_system_id]);
-
-  const {
-    system_class,
-    security,
-    class_title,
-    statics,
-    effect_name,
-    region_name,
-    region_id,
-    is_shattered,
-    solar_system_name,
-  } = systemStaticInfo;
-
-  const { isShowUnsplashedSignatures } = interfaceSettings;
-  const isTempSystemNameEnabled = useMapGetOption('show_temp_system_name') === 'true';
-  const isShowLinkedSigId = useMapGetOption('show_linked_signature_id') === 'true';
-  const isShowLinkedSigIdTempName = useMapGetOption('show_linked_signature_id_temp_name') === 'true';
-
-  const {
-    data: {
-      characters,
-      wormholesData,
-      hubs,
-      kills,
-      userCharacters,
-      isConnecting,
-      hoverNodeId,
-      visibleNodes,
-      showKSpaceBG,
-      isThickConnections,
-      pings,
-    },
-    outCommand,
-  } = useMapState();
-
-  const visible = useMemo(() => visibleNodes.has(id), [id, visibleNodes]);
-
-  const systemSigs = useMemo(() => mapSystemSignatures[solar_system_id] || [], [solar_system_id, mapSystemSignatures]);
-
-  const charactersInSystem = useMemo(() => {
-    return characters.filter(c => c.location?.solar_system_id === parseInt(solar_system_id) && c.online);
-  }, [characters, solar_system_id]);
-
-  const isWormhole = isWormholeSpace(system_class);
-
-  const classTitleColor = useMemo(
-    () => getSystemClassStyles({ systemClass: system_class, security }),
-    [security, system_class],
-  );
-
-  const sortedStatics = useMemo(() => sortWHClasses(wormholesData, statics), [wormholesData, statics]);
-
-  const linkedSigPrefix = useMemo(() => (linkedSigEveId ? linkedSigEveId.split('-')[0] : null), [linkedSigEveId]);
-
-  const { labelsInfo, labelCustom } = useLabelsInfo({
-    labels,
-    linkedSigPrefix,
-    isShowLinkedSigId,
-  });
-
-  const killsCount = useMemo(() => kills[parseInt(solar_system_id)] ?? null, [kills, solar_system_id]);
-  const killsActivityType = killsCount ? getActivityType(killsCount) : null;
-
-  const hasUserCharacters = useMemo(
-    () => charactersInSystem.some(x => userCharacters.includes(x.eve_id)),
-    [charactersInSystem, userCharacters],
-  );
-
-  const dbClick = useDoubleClick(() => {
-    outCommand({
-      type: OutCommand.openSettings,
-      data: { system_id: solar_system_id },
-    });
-  });
-
-  const showHandlers = isConnecting || hoverNodeId === id;
-
-  const space = showKSpaceBG ? REGIONS_MAP[region_id] : '';
-  const regionClass = showKSpaceBG ? SpaceToClass[space] || null : null;
-
-  const { systemName, computedTemporaryName, customName } = useSystemName({
-    isTempSystemNameEnabled,
-    temporary_name,
-    isShowLinkedSigIdTempName,
-    linkedSigPrefix,
-    name,
-    systemStaticInfo,
-  });
-
-  const { unsplashedLeft, unsplashedRight } = useUnsplashedSignatures(systemSigs, isShowUnsplashedSignatures);
-
-  const hubsAsStrings = useMemo(() => hubs.map(item => item.toString()), [hubs]);
-
-  const isRally = useMemo(
-    () => pings.find(x => x.solar_system_id === solar_system_id && x.type === PingType.Rally),
-    [pings, solar_system_id],
-  );
-
-  const nodeVars: SolarSystemNodeVars = {
-    id,
-    selected,
-    visible,
-    isWormhole,
-    classTitleColor,
-    killsCount,
-    killsActivityType,
-    hasUserCharacters,
-    userCharacters,
-    showHandlers,
-    regionClass,
-    systemName,
-    customName,
-    labelCustom,
-    isShattered: is_shattered,
-    tag,
-    status,
-    labelsInfo,
-    dbClick,
-    sortedStatics,
-    effectName: effect_name,
-    solarSystemId: solar_system_id.toString(),
-    locked,
-    hubs: hubsAsStrings,
-    name,
-    isConnecting,
-    hoverNodeId,
-    charactersInSystem,
-    unsplashedLeft,
-    unsplashedRight,
-    isThickConnections,
-    classTitle: class_title,
-    temporaryName: computedTemporaryName,
-    regionName: region_name,
-    solarSystemName: solar_system_name,
-    isRally,
-  };
-
-  return nodeVars;
-};

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

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

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

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

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

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

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

@@ -1,36 +0,0 @@
-@import './eve-common-variables';
-@import './eve-common';
-
-.default-theme {
-  --rf-bg-color: #0C0A09;
-  --rf-soft-bg-color: #171717;
-
-  --rf-node-bg-color: #202020;
-  --rf-node-soft-bg-color: #202020;
-  --rf-text-color: #ffffff;
-  --rf-tag-color:  #38BDF8;
-  --rf-region-name: #D6D3D1;
-  --rf-custom-name: #93C5FD;
-  --rf-node-font-family: 'Shentox', 'Rogan', sans-serif !important;
-  --rf-node-font-weight: 500;
-
-  --rf-bg-variant: "dots";
-  --rf-bg-gap: 15;
-  --rf-bg-size: 1;
-  --rf-bg-pattern-color: #81818a;
-
-  --pastel-blue: #5a7d9a;
-  --pastel-pink: #d291bc;
-  --pastel-green: #88b04b;
-  --pastel-yellow: #ffdd59;
-
-  --dark-bg: #2d2d2d;
-  --text-color: #ffffff;
-  --tooltip-bg: #202020;
-
-  --window-corner: #72716f;
-
-  --rf-local-counter-font-weight: 500;
-  --rf-node-local-counter: inherit;
-  --rf-has-user-characters: #ffc75d;
-}

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

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

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

@@ -1,504 +1,535 @@
-@import './eve-common-variables';
-
+@import "eve-common-variables";
 
 .eve-wh-effect-color-pulsar {
-  fill: var(--eve-effect-pulsar);
-  background-color: var(--eve-effect-pulsar);
+  fill: $eve-effect-pulsar;
+  background-color: $eve-effect-pulsar;
 }
 
 .eve-wh-effect-color-magnetar {
-  fill: var(--eve-effect-magnetar);
-  background-color: var(--eve-effect-magnetar);
+  fill: $eve-effect-magnetar;
+  background-color: $eve-effect-magnetar;
 }
 
 .eve-wh-effect-color-wolfRayet {
-  fill: var(--eve-effect-wolfRayet);
-  background-color: var(--eve-effect-wolfRayet);
+  fill: $eve-effect-wolfRayet;
+  background-color: $eve-effect-wolfRayet;
 }
 
 .eve-wh-effect-color-blackHole {
-  fill: var(--eve-effect-blackHole);
-  background-color: var(--eve-effect-blackHole);
-  box-shadow: 0 0 8px rgba(255, 255, 255, 0.33);
+  fill: $eve-effect-blackHole;
+  background-color: $eve-effect-blackHole;
+  box-shadow: 0 0 8px rgba(255 255 255 / 33);
 }
 
 .eve-wh-effect-color-cataclysmicVariable {
-  fill: var(--eve-effect-cataclysmicVariable);
-  background-color: var(--eve-effect-cataclysmicVariable);
+  fill: $eve-effect-cataclysmicVariable;
+  background-color: $eve-effect-cataclysmicVariable;
 }
 
 .eve-wh-effect-color-redGiant {
-  fill: var(--eve-effect-redGiant);
-  background-color: var(--eve-effect-redGiant);
+  fill: $eve-effect-redGiant;
+  background-color: $eve-effect-redGiant;
 }
 
 .text-eve-wh-effect-color-pulsar {
-  color: var(--eve-effect-pulsar);
+  color: $eve-effect-pulsar;
 }
+
 .text-eve-wh-effect-color-magnetar {
-  color: var(--eve-effect-magnetar);
+  color: $eve-effect-magnetar;
 }
+
 .text-eve-wh-effect-color-wolfRayet {
-  color: var(--eve-effect-wolfRayet);
+  color: $eve-effect-wolfRayet;
 }
+
 .text-eve-wh-effect-color-blackHole {
   color: #fff;
 }
+
 .text-eve-wh-effect-color-cataclysmicVariable {
-  color: var(--eve-effect-cataclysmicVariable);
+  color: $eve-effect-cataclysmicVariable;
 }
+
 .text-eve-wh-effect-color-redGiant {
-  color: var(--eve-effect-redGiant);
+  color: $eve-effect-redGiant;
 }
+
 .text-eve-wh-effect-color-dazhLiminalityLocus {
-  color: var(--eve-effect-dazhLiminalityLocus);
+  color: $eve-effect-dazhLiminalityLocus;
 }
+
 .text-eve-wh-effect-color-imperialStellarObservatory {
-  color: var(--eve-effect-imperialStellarObservatory);
+  color: $eve-effect-imperialStellarObservatory;
 }
+
 .text-eve-wh-effect-color-stateStellarObservatory {
-  color: var(--eve-effect-stateStellarObservatory);
+  color: $eve-effect-stateStellarObservatory;
 }
+
 .text-eve-wh-effect-color-republicStellarObservatory {
-  color: var(--eve-effect-republicStellarObservatory);
+  color: $eve-effect-republicStellarObservatory;
 }
+
 .text-eve-wh-effect-color-federalStellarObservatory {
-  color: var(--eve-effect-federalStellarObservatory);
+  color: $eve-effect-federalStellarObservatory;
 }
 
-/* Security color classes */
 .eve-security-color-10 {
-  color: var(--eve-security-color-10) !important;
-  fill: var(--eve-security-color-10);
+  color: $eve-security-color-10 !important;
+  fill: $eve-security-color-10;
 }
+
 .eve-security-color-09 {
-  color: var(--eve-security-color-09) !important;
-  fill: var(--eve-security-color-09);
+  color: $eve-security-color-09 !important;
+  fill: $eve-security-color-09;
 }
+
 .eve-security-color-08 {
-  color: var(--eve-security-color-08) !important;
-  fill: var(--eve-security-color-08);
+  color: $eve-security-color-08 !important;
+  fill: $eve-security-color-08;
 }
+
 .eve-security-color-07 {
-  color: var(--eve-security-color-07) !important;
-  fill: var(--eve-security-color-07);
+  color: $eve-security-color-07 !important;
+  fill: $eve-security-color-07;
 }
+
 .eve-security-color-06 {
-  color: var(--eve-security-color-06) !important;
-  fill: var(--eve-security-color-06);
+  color: $eve-security-color-06 !important;
+  fill: $eve-security-color-06;
 }
+
 .eve-security-color-05 {
-  color: var(--eve-security-color-05) !important;
-  fill: var(--eve-security-color-05);
+  color: $eve-security-color-05 !important;
+  fill: $eve-security-color-05;
 }
+
 .eve-security-color-04 {
-  color: var(--eve-security-color-04) !important;
-  fill: var(--eve-security-color-04);
+  color: $eve-security-color-04 !important;
+  fill: $eve-security-color-04;
 }
+
 .eve-security-color-03 {
-  color: var(--eve-security-color-03) !important;
-  fill: var(--eve-security-color-03);
+  color: $eve-security-color-03 !important;
+  fill: $eve-security-color-03;
 }
+
 .eve-security-color-02 {
-  color: var(--eve-security-color-02) !important;
-  fill: var(--eve-security-color-02);
+  color: $eve-security-color-02 !important;
+  fill: $eve-security-color-02;
 }
+
 .eve-security-color-01 {
-  color: var(--eve-security-color-01) !important;
-  fill: var(--eve-security-color-01);
+  color: $eve-security-color-01 !important;
+  fill: $eve-security-color-01;
 }
+
 .eve-security-color-00 {
-  color: var(--eve-security-color-00) !important;
-  fill: var(--eve-security-color-00);
+  color: $eve-security-color-00 !important;
+  fill: $eve-security-color-00;
 }
+
 .eve-security-color-m-01 {
-  color: var(--eve-security-color-m-01) !important;
-  fill: var(--eve-security-color-m-01);
+  color: $eve-security-color-m-01 !important;
+  fill: $eve-security-color-m-01;
 }
+
 .eve-security-color-m-02 {
-  color: var(--eve-security-color-m-02) !important;
-  fill: var(--eve-security-color-m-02);
+  color: $eve-security-color-m-02 !important;
+  fill: $eve-security-color-m-02;
 }
+
 .eve-security-color-m-03 {
-  color: var(--eve-security-color-m-03) !important;
-  fill: var(--eve-security-color-m-03);
+  color: $eve-security-color-m-03 !important;
+  fill: $eve-security-color-m-03;
 }
+
 .eve-security-color-m-04 {
-  color: var(--eve-security-color-m-04) !important;
-  fill: var(--eve-security-color-m-04);
+  color: $eve-security-color-m-04 !important;
+  fill: $eve-security-color-m-04;
 }
+
 .eve-security-color-m-05 {
-  color: var(--eve-security-color-m-05) !important;
-  fill: var(--eve-security-color-m-05);
+  color: $eve-security-color-m-05 !important;
+  fill: $eve-security-color-m-05;
 }
+
 .eve-security-color-m-06 {
-  color: var(--eve-security-color-m-06) !important;
-  fill: var(--eve-security-color-m-06);
+  color: $eve-security-color-m-06 !important;
+  fill: $eve-security-color-m-06;
 }
+
 .eve-security-color-m-07 {
-  color: var(--eve-security-color-m-07) !important;
-  fill: var(--eve-security-color-m-07);
+  color: $eve-security-color-m-07 !important;
+  fill: $eve-security-color-m-07;
 }
+
 .eve-security-color-m-08 {
-  color: var(--eve-security-color-m-08) !important;
-  fill: var(--eve-security-color-m-08);
+  color: $eve-security-color-m-08 !important;
+  fill: $eve-security-color-m-08;
 }
+
 .eve-security-color-m-09 {
-  color: var(--eve-security-color-m-09) !important;
-  fill: var(--eve-security-color-m-09);
+  color: $eve-security-color-m-09 !important;
+  fill: $eve-security-color-m-09;
 }
+
 .eve-security-color-m-10 {
-  color: var(--eve-security-color-m-10) !important;
-  fill: var(--eve-security-color-m-10);
+  color: $eve-security-color-m-10 !important;
+  fill: $eve-security-color-m-10;
 }
 
-/* Security backgrounds */
 .eve-security-background-10 {
-  background-color: var(--eve-security-color-10);
-  fill: var(--eve-security-color-10);
+  background-color: $eve-security-color-10;
+  fill: $eve-security-color-10;
 }
+
 .eve-security-background-09 {
-  background-color: var(--eve-security-color-09);
-  fill: var(--eve-security-color-09);
+  background-color: $eve-security-color-09;
+  fill: $eve-security-color-09;
 }
+
 .eve-security-background-08 {
-  background-color: var(--eve-security-color-08);
-  fill: var(--eve-security-color-08);
+  background-color: $eve-security-color-08;
+  fill: $eve-security-color-08;
 }
+
 .eve-security-background-07 {
-  background-color: var(--eve-security-color-07);
-  fill: var(--eve-security-color-07);
+  background-color: $eve-security-color-07;
+  fill: $eve-security-color-07;
 }
+
 .eve-security-background-06 {
-  background-color: var(--eve-security-color-06);
-  fill: var(--eve-security-color-06);
+  background-color: $eve-security-color-06;
+  fill: $eve-security-color-06;
 }
+
 .eve-security-background-05 {
-  background-color: var(--eve-security-color-05);
-  fill: var(--eve-security-color-05);
+  background-color: $eve-security-color-05;
+  fill: $eve-security-color-05;
 }
+
 .eve-security-background-04 {
-  background-color: var(--eve-security-color-04);
-  fill: var(--eve-security-color-04);
+  background-color: $eve-security-color-04;
+  fill: $eve-security-color-04;
 }
+
 .eve-security-background-03 {
-  background-color: var(--eve-security-color-03);
-  fill: var(--eve-security-color-03);
+  background-color: $eve-security-color-03;
+  fill: $eve-security-color-03;
 }
+
 .eve-security-background-02 {
-  background-color: var(--eve-security-color-02);
-  fill: var(--eve-security-color-02);
+  background-color: $eve-security-color-02;
+  fill: $eve-security-color-02;
 }
+
 .eve-security-background-01 {
-  background-color: var(--eve-security-color-01);
-  fill: var(--eve-security-color-01);
+  background-color: $eve-security-color-01;
+  fill: $eve-security-color-01;
 }
+
 .eve-security-background-00 {
-  background-color: var(--eve-security-color-00);
-  fill: var(--eve-security-color-00);
+  background-color: $eve-security-color-00;
+  fill: $eve-security-color-00;
 }
+
 .eve-security-background-m-01 {
-  background-color: var(--eve-security-color-m-01);
-  fill: var(--eve-security-color-m-01);
+  background-color: $eve-security-color-m-01;
+  fill: $eve-security-color-m-01;
 }
+
 .eve-security-background-m-02 {
-  background-color: var(--eve-security-color-m-02);
-  fill: var(--eve-security-color-m-02);
+  background-color: $eve-security-color-m-02;
+  fill: $eve-security-color-m-02;
 }
+
 .eve-security-background-m-03 {
-  background-color: var(--eve-security-color-m-03);
-  fill: var(--eve-security-color-m-03);
+  background-color: $eve-security-color-m-03;
+  fill: $eve-security-color-m-03;
 }
+
 .eve-security-background-m-04 {
-  background-color: var(--eve-security-color-m-04);
-  fill: var(--eve-security-color-m-04);
+  background-color: $eve-security-color-m-04;
+  fill: $eve-security-color-m-04;
 }
+
 .eve-security-background-m-05 {
-  background-color: var(--eve-security-color-m-05);
-  fill: var(--eve-security-color-m-05);
+  background-color: $eve-security-color-m-05;
+  fill: $eve-security-color-m-05;
 }
+
 .eve-security-background-m-06 {
-  background-color: var(--eve-security-color-m-06);
-  fill: var(--eve-security-color-m-06);
+  background-color: $eve-security-color-m-06;
+  fill: $eve-security-color-m-06;
 }
+
 .eve-security-background-m-07 {
-  background-color: var(--eve-security-color-m-07);
-  fill: var(--eve-security-color-m-07);
+  background-color: $eve-security-color-m-07;
+  fill: $eve-security-color-m-07;
 }
+
 .eve-security-background-m-08 {
-  background-color: var(--eve-security-color-m-08);
-  fill: var(--eve-security-color-m-08);
+  background-color: $eve-security-color-m-08;
+  fill: $eve-security-color-m-08;
 }
+
 .eve-security-background-m-09 {
-  background-color: var(--eve-security-color-m-09);
-  fill: var(--eve-security-color-m-09);
+  background-color: $eve-security-color-m-09;
+  fill: $eve-security-color-m-09;
 }
+
 .eve-security-background-m-10 {
-  background-color: var(--eve-security-color-m-10);
-  fill: var(--eve-security-color-m-10);
+  background-color: $eve-security-color-m-10;
+  fill: $eve-security-color-m-10;
 }
 
-/* WH Type color classes */
 .eve-wh-type-color-high {
-  color: var(--eve-wh-type-color-high) !important;
-  fill: var(--eve-wh-type-color-high);
+  color: $eve-wh-type-color-high;
+  fill: $eve-wh-type-color-high;
   font-weight: bold !important;
 }
+
 .eve-wh-type-color-low {
-  color: var(--eve-wh-type-color-low) !important;
-  fill: var(--eve-wh-type-color-low);
+  color: $eve-wh-type-color-low;
+  fill: $eve-wh-type-color-low;
   font-weight: bold !important;
 }
+
 .eve-wh-type-color-null {
-  color: var(--eve-wh-type-color-null) !important;
-  fill: var(--eve-wh-type-color-null);
+  color: $eve-wh-type-color-null;
+  fill: $eve-wh-type-color-null;
   font-weight: bold !important;
 }
+
 .eve-wh-type-color-c1 {
-  color: var(--eve-wh-type-color-c1) !important;
-  fill: var(--eve-wh-type-color-c1);
+  color: $eve-wh-type-color-c1 !important;
+  fill: $eve-wh-type-color-c1;
   font-weight: bold !important;
 }
+
 .eve-wh-type-color-c2 {
-  color: var(--eve-wh-type-color-c2) !important;
-  fill: var(--eve-wh-type-color-c2);
+  color: $eve-wh-type-color-c2 !important;
+  fill: $eve-wh-type-color-c2;
   font-weight: bold !important;
 }
+
 .eve-wh-type-color-c3 {
-  color: var(--eve-wh-type-color-c3) !important;
-  fill: var(--eve-wh-type-color-c3);
+  color: $eve-wh-type-color-c3 !important;
+  fill: $eve-wh-type-color-c3;
   font-weight: bold !important;
 }
+
 .eve-wh-type-color-c4 {
-  color: var(--eve-wh-type-color-c4) !important;
-  fill: var(--eve-wh-type-color-c4);
+  color: $eve-wh-type-color-c4 !important;
+  fill: $eve-wh-type-color-c4;
   font-weight: bold !important;
 }
+
 .eve-wh-type-color-c5 {
-  color: var(--eve-wh-type-color-c5) !important;
-  fill: var(--eve-wh-type-color-c5);
+  color: $eve-wh-type-color-c5 !important;
+  fill: $eve-wh-type-color-c5;
   font-weight: bold !important;
 }
+
 .eve-wh-type-color-c6 {
-  color: var(--eve-wh-type-color-c6) !important;
-  fill: var(--eve-wh-type-color-c6);
+  color: $eve-wh-type-color-c6 !important;
+  fill: $eve-wh-type-color-c6;
   font-weight: bold !important;
 }
+
 .eve-wh-type-color-c13 {
-  color: var(--eve-wh-type-color-c13) !important;
-  fill: var(--eve-wh-type-color-c13);
+  color: $eve-wh-type-color-c13 !important;
+  fill: $eve-wh-type-color-c13;
 }
+
 .eve-wh-type-color-drifter {
-  color: var(--eve-wh-type-color-drifter) !important;
-  fill: var(--eve-wh-type-color-drifter);
+  color: $eve-wh-type-color-drifter !important;
+  fill: $eve-wh-type-color-drifter;
 }
+
 .eve-wh-type-color-thera {
-  color: var(--eve-wh-type-color-thera) !important;
-  fill: var(--eve-wh-type-color-thera);
+  color: $eve-wh-type-color-thera !important;
+  fill: $eve-wh-type-color-thera;
 }
 
-/* WH Type backgrounds */
 .eve-wh-type-background-high {
-  background-color: var(--eve-wh-type-color-high);
-}
-.eve-wh-type-background-low {
-  background-color: var(--eve-wh-type-color-low);
-}
-.eve-wh-type-background-null {
-  background-color: var(--eve-wh-type-color-null);
-}
-.eve-wh-type-background-c1 {
-  background-color: var(--eve-wh-type-color-c1);
-}
-.eve-wh-type-background-c2 {
-  background-color: var(--eve-wh-type-color-c2);
-}
-.eve-wh-type-background-c3 {
-  background-color: var(--eve-wh-type-color-c3);
-}
-.eve-wh-type-background-c4 {
-  background-color: var(--eve-wh-type-color-c4);
-}
-.eve-wh-type-background-c5 {
-  background-color: var(--eve-wh-type-color-c5);
-}
-.eve-wh-type-background-c6 {
-  background-color: var(--eve-wh-type-color-c6);
-}
-.eve-wh-type-background-c13 {
-  background-color: var(--eve-wh-type-color-c13);
-}
-.eve-wh-type-background-drifter {
-  background-color: var(--eve-wh-type-color-drifter);
-}
-.eve-wh-type-background-thera {
-  background-color: var(--eve-wh-type-color-thera);
-}
-.eve-wh-type-background-zarzakh {
-  background-color: var(--eve-wh-type-color-zarzakh);
+  background-color: $eve-wh-type-color-high;
 }
 
-/* Kind color classes */
-.eve-kind-color-high {
-  color: var(--eve-wh-type-color-high);
-  fill: var(--eve-wh-type-color-high);
+.eve-wh-type-background-low {
+  background-color: $eve-wh-type-color-low;
 }
+
+.eve-wh-type-background-null {
+  background-color: $eve-wh-type-color-null;
+}
+
+.eve-wh-type-background-c1 {
+  background-color: $eve-wh-type-color-c1;
+}
+
+.eve-wh-type-background-c2 {
+  background-color: $eve-wh-type-color-c2;
+}
+
+.eve-wh-type-background-c3 {
+  background-color: $eve-wh-type-color-c3;
+}
+
+.eve-wh-type-background-c4 {
+  background-color: $eve-wh-type-color-c4;
+}
+
+.eve-wh-type-background-c5 {
+  background-color: $eve-wh-type-color-c5;
+}
+
+.eve-wh-type-background-c6 {
+  background-color: $eve-wh-type-color-c6;
+}
+
+.eve-wh-type-background-c13 {
+  background-color: $eve-wh-type-color-c13;
+}
+
+.eve-wh-type-background-drifter {
+  background-color: $eve-wh-type-color-drifter;
+}
+
+.eve-wh-type-background-thera {
+  background-color: $eve-wh-type-color-thera;
+}
+
+.eve-wh-type-background-zarzakh {
+  background-color: $eve-wh-type-color-zarzakh;
+}
+
+.eve-kind-color-high {
+  color: $eve-wh-type-color-high;
+  fill: $eve-wh-type-color-high;
+}
+
 .eve-kind-color-low {
-  color: var(--eve-wh-type-color-low);
-  fill: var(--eve-wh-type-color-low);
+  color: $eve-wh-type-color-low;
+  fill: $eve-wh-type-color-low;
   font-weight: bold;
 }
+
 .eve-kind-color-null {
-  color: var(--eve-wh-type-color-null);
-  fill: var(--eve-wh-type-color-null);
+  color: $eve-wh-type-color-null;
+  fill: $eve-wh-type-color-null;
 }
+
 .eve-kind-color-wh {
-  color: var(--eve-wh-type-color-c6);
-  fill: var(--eve-wh-type-color-c6);
+  color: $eve-wh-type-color-c6;
+  fill: $eve-wh-type-color-c6;
 }
+
 .eve-kind-color-thera {
-  color: var(--eve-wh-type-color-thera);
-  fill: var(--eve-wh-type-color-thera);
+  color: $eve-wh-type-color-thera;
+  fill: $eve-wh-type-color-thera;
 }
+
 .eve-kind-color-abyss {
-  color: var(--eve-wh-type-color-c6);
-  fill: var(--eve-wh-type-color-c6);
+  color: $eve-wh-type-color-c6;
+  fill: $eve-wh-type-color-c6;
 }
+
 .eve-kind-color-penalty {
-  color: var(--eve-wh-type-color-c6);
-  fill: var(--eve-wh-type-color-c6);
+  color: $eve-wh-type-color-c6;
+  fill: $eve-wh-type-color-c6;
 }
+
 .eve-kind-color-pochven {
-  color: var(--eve-wh-type-color-c6);
-  fill: var(--eve-wh-type-color-c6);
+  color: $eve-wh-type-color-c6;
+  fill: $eve-wh-type-color-c6;
 }
+
 .eve-kind-color-zarzakh {
-  color: var(--eve-wh-type-color-zarzakh);
-  fill: var(--eve-wh-type-color-zarzakh);
+  color: $eve-wh-type-color-zarzakh;
+  fill: $eve-wh-type-color-zarzakh;
 }
 
-/* Kind backgrounds */
 .eve-kind-background-high {
-  background-color: var(--eve-wh-type-color-high);
+  background-color: $eve-wh-type-color-high;
 }
+
 .eve-kind-background-low {
-  background-color: var(--eve-wh-type-color-low);
+  background-color: $eve-wh-type-color-low;
 }
+
 .eve-kind-background-null {
-  background-color: var(--eve-wh-type-color-null);
+  background-color: $eve-wh-type-color-null;
 }
+
 .eve-kind-background-wh {
-  background-color: var(--eve-wh-type-color-c6);
+  background-color: $eve-wh-type-color-c6;
 }
+
 .eve-kind-background-thera {
-  background-color: var(--eve-wh-type-color-thera);
+  background-color: $eve-wh-type-color-thera;
 }
+
 .eve-kind-background-abyss {
-  background-color: var(--eve-wh-type-color-c6);
+  background-color: $eve-wh-type-color-c6;
 }
+
 .eve-kind-background-penalty {
-  background-color: var(--eve-wh-type-color-c6);
+  background-color: $eve-wh-type-color-c6;
 }
+
 .eve-kind-background-pochven {
-  background-color: var(--eve-wh-type-color-c6);
+  background-color: $eve-wh-type-color-c6;
 }
+
 .eve-kind-background-zarzakh {
-  background-color: var(--eve-wh-type-color-zarzakh);
+  background-color: $eve-wh-type-color-zarzakh;
 }
 
-/* System status color classes */
 .eve-system-status-color-clear {
-  color: var(--eve-solar-system-status-color-unknown);
+  color: $eve-solar-system-status-color-unknown;
 }
+
 .eve-system-status-color-home {
-  color: var(--eve-solar-system-status-color-home);
+  color: $eve-solar-system-status-color-home;
 }
+
 .eve-system-status-color-friendly {
-  color: var(--eve-solar-system-status-color-friendly);
+  color: $eve-solar-system-status-color-friendly;
 }
+
 .eve-system-status-color-lookingFor {
-  color: var(--eve-solar-system-status-color-lookingFor);
+  color: $eve-solar-system-status-color-lookingFor;
 }
+
 .eve-system-status-color-warning {
-  color: var(--eve-solar-system-status-color-warning);
+  color: $eve-solar-system-status-color-warning;
 }
+
 .eve-system-status-color-target {
-  color: var(--eve-solar-system-status-color-target);
+  color: $eve-solar-system-status-color-target;
 }
+
 .eve-system-status-color-dangerous {
-  color: var(--eve-solar-system-status-color-dangerous);
-}
-
-.eve-system-status-clear {
-  background-color: var(--eve-solar-system-status-unknown);
-}
-.eve-system-status-home {
-  background-color: var(--eve-solar-system-status-home);
-}
-.eve-system-status-friendly {
-  background-color: var(--eve-solar-system-status-friendly);
-}
-.eve-system-status-lookingFor {
-  background-color: var(--eve-solar-system-status-lookingFor);
-}
-.eve-system-status-warning {
-  background-color: var(--eve-solar-system-status-warning);
-}
-.eve-system-status-target {
-  background-color: var(--eve-solar-system-status-target);
-}
-.eve-system-status-dangerous {
-  background-color: var(--eve-solar-system-status-dangerous);
-}
-
-.eve-system-status-clear {
-  background-color: var(--eve-solar-system-status-unknown);
-  color: var(--eve-solar-system-status-color-unknown);
-}
-
-.eve-system-status-home {
-  background-color: var(--eve-solar-system-status-home);
-  color: var(--eve-solar-system-status-color-home);
-}
-
-.eve-system-status-friendly {
-  background-color: var(--eve-solar-system-status-friendly);
-  color: var(--eve-solar-system-status-color-friendly);
-}
-
-.eve-system-status-lookingFor {
-  background-color: var(--eve-solar-system-status-lookingFor);
-  color: var(--eve-solar-system-status-color-lookingFor);
-}
-
-.eve-system-status-warning {
-  background-color: var(--eve-solar-system-status-warning);
-  color: var(--eve-solar-system-status-color-warning);
-}
-
-.eve-system-status-target {
-  background-color: var(--eve-solar-system-status-target);
-  color: var(--eve-solar-system-status-color-target);
-}
-
-.eve-system-status-dangerous {
-  background-color: var(--eve-solar-system-status-dangerous);
-  color: var(--eve-solar-system-status-color-dangerous);
+  color: $eve-solar-system-status-color-dangerous;
 }
 
 .wd-route-system-shape-triangle {
   clip-path: polygon(50% 0, 0 100%, 100% 100%);
 }
+
 .wd-route-system-shape-circle {
   border-radius: 40%;
 }
 
-/* Some additional background classes */
 .wd-marker-bookmark-color-shattered {
   background-color: #833ca4;
   margin-top: 1px;
 }
 
+
 .wd-marker-bookmark-color-custom {
   background-color: #282828;
   border: 1px solid #4c4c4c;
@@ -541,33 +572,3 @@
 .wd-marker-bookmark-color-danger {
   background-color: #d10600;
 }
-
-
-.react-flow__minimap-node {
-  fill: #ffb03a;
-}
-
-.react-flow__minimap {
-  border: 1px solid #282828;
-  border-radius: 4px;
-  background-color: rgb(47 37 37) !important;
-  overflow: hidden;
-}
-
-.react-flow__minimap-mask {
-  stroke-width: 2px;
-  fill: rgba(0, 0, 0, 0.5);
-  mix-blend-mode: overlay;
-}
-
-.react-flow__minimap-mask {
-  stroke-width: 2px;
-  fill: rgb(0 0 0 / 50%) !important;
-  mix-blend-mode: inherit;
-  opacity: 1;
-  stroke: #fff;
-}
-
-.context-menu-active {
-  background-color: rgba(131, 131, 131, 0.33);
-}

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

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

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

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

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

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

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

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

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

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

@@ -1,52 +0,0 @@
-import { MarkdownComment } from '@/hooks/Mapper/components/mapInterface/components/Comments/components';
-import { useEffect, useRef, useState } from 'react';
-import { CommentType } from '@/hooks/Mapper/types';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-
-export interface CommentsProps {}
-
-// eslint-disable-next-line no-empty-pattern
-export const Comments = ({}: CommentsProps) => {
-  const [commentsList, setCommentsList] = useState<CommentType[]>([]);
-
-  const {
-    data: { selectedSystems },
-    comments: { loadComments, comments, lastUpdateKey },
-  } = useMapRootState();
-
-  const [systemId] = selectedSystems;
-
-  const ref = useRef({ loadComments, systemId });
-  ref.current = { loadComments, systemId };
-
-  useEffect(() => {
-    const commentsBySystem = comments.get(systemId);
-    if (!commentsBySystem) {
-      return;
-    }
-
-    const els = [...commentsBySystem.comments].sort((a, b) => +new Date(b.updated_at) - +new Date(a.updated_at));
-
-    setCommentsList(els);
-  }, [systemId, lastUpdateKey, comments]);
-
-  useEffect(() => {
-    ref.current.loadComments(systemId);
-  }, [systemId]);
-
-  if (commentsList.length === 0) {
-    return (
-      <div className="w-full h-full flex justify-center items-center select-none text-stone-400/80 text-sm">
-        Not comments found here
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-1 whitespace-nowrap overflow-auto text-ellipsis custom-scrollbar">
-      {commentsList.map(({ id, text, updated_at, characterEveId }) => (
-        <MarkdownComment key={id} text={text} time={updated_at} characterEveId={characterEveId} id={id} />
-      ))}
-    </div>
-  );
-};

assets/js/hooks/Mapper/components/mapInterface/components/Comments/components/MarkdownComment/MarkdownComment.module.scss

@@ -1,70 +0,0 @@
-.MarkdownCommentRoot {
-  border-left-width: 3px;
-
-  @apply text-[12px] leading-[1.2] text-stone-300 break-words;
-  @apply bg-gradient-to-r from-stone-600/40 via-stone-600/10 to-stone-600/0;
-
-  .h1 {
-    @apply text-[12px] font-normal m-0 p-0 border-none break-words whitespace-normal;
-  }
-
-  .h2 {
-    @apply text-[12px] font-normal m-0 p-0 border-none break-words whitespace-normal;
-  }
-
-  .h3 {
-    @apply text-[12px] font-normal m-0 p-0 border-none break-words whitespace-normal;
-  }
-
-  .h4 {
-    @apply text-[12px] font-normal m-0 p-0 border-none break-words whitespace-normal;
-  }
-
-  .h5 {
-    @apply text-[12px] font-normal m-0 p-0 border-none break-words whitespace-normal;
-  }
-
-  .h6 {
-    @apply text-[12px] font-normal m-0 p-0 border-none break-words whitespace-normal;
-  }
-
-  p {
-    @apply m-0 p-0 break-words whitespace-normal;
-  }
-
-  ul, ol {
-    @apply m-0 p-0 list-none;
-  }
-
-  li {
-    @apply m-0 break-words whitespace-normal;
-  }
-
-  blockquote {
-    @apply border-l-4 border-cyan-400 p-2 m-0 font-normal text-stone-300 italic break-words whitespace-normal;
-  }
-
-  a {
-    @apply text-violet-400 cursor-pointer transition-colors duration-200 break-words whitespace-normal;
-
-    &:hover {
-      @apply underline;
-    }
-  }
-
-  b, strong {
-    @apply font-bold text-green-400 break-words whitespace-normal;
-  }
-
-  i, em {
-    @apply italic text-pink-400 break-words whitespace-normal;
-  }
-
-  del {
-    @apply line-through text-stone-500 break-words whitespace-normal;
-  }
-
-  hr {
-    @apply border-none h-[1px] bg-cyan-400 opacity-50 my-2;
-  }
-}

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

@@ -1,97 +0,0 @@
-import classes from './MarkdownComment.module.scss';
-import clsx from 'clsx';
-import {
-  InfoDrawer,
-  MarkdownTextViewer,
-  TimeAgo,
-  TooltipPosition,
-  WdImgButton,
-} from '@/hooks/Mapper/components/ui-kit';
-import { useGetCacheCharacter } from '@/hooks/Mapper/mapRootProvider/hooks/api';
-import { useCallback, useRef, useState } from 'react';
-import { WdTransition } from '@/hooks/Mapper/components/ui-kit/WdTransition/WdTransition.tsx';
-import { PrimeIcons } from 'primereact/api';
-import { ConfirmPopup } from 'primereact/confirmpopup';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { OutCommand } from '@/hooks/Mapper/types';
-
-const TOOLTIP_PROPS = { content: 'Remove comment', position: TooltipPosition.top };
-
-export interface MarkdownCommentProps {
-  text: string;
-  time: string;
-  characterEveId: string;
-  id: string;
-}
-
-export const MarkdownComment = ({ text, time, characterEveId, id }: MarkdownCommentProps) => {
-  const char = useGetCacheCharacter(characterEveId);
-  const [hovered, setHovered] = useState(false);
-
-  const cpRemoveBtnRef = useRef<HTMLElement>();
-  const [cpRemoveVisible, setCpRemoveVisible] = useState(false);
-
-  const { outCommand } = useMapRootState();
-  const ref = useRef({ outCommand, id });
-  ref.current = { outCommand, id };
-
-  const handleDelete = useCallback(async () => {
-    await ref.current.outCommand({
-      type: OutCommand.deleteSystemComment,
-      data: ref.current.id,
-    });
-  }, []);
-
-  const handleMouseEnter = useCallback(() => setHovered(true), []);
-  const handleMouseLeave = useCallback(() => setHovered(false), []);
-
-  const handleShowCP = useCallback(() => setCpRemoveVisible(true), []);
-  const handleHideCP = useCallback(() => setCpRemoveVisible(false), []);
-
-  return (
-    <>
-      <InfoDrawer
-        labelClassName="mb-[3px]"
-        className={clsx(classes.MarkdownCommentRoot, 'p-1 bg-stone-700/20 ')}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        title={
-          <div className="flex items-center justify-between">
-            <div>
-              <span className="text-stone-500">
-                by <span className="text-orange-300/70">{char?.data?.name ?? ''}</span>
-              </span>
-            </div>
-
-            <WdTransition active={hovered} timeout={100}>
-              <div className="text-stone-500 max-h-[12px]">
-                {!hovered && <TimeAgo timestamp={time} />}
-                {hovered && (
-                  // @ts-ignore
-                  <div ref={cpRemoveBtnRef}>
-                    <WdImgButton
-                      className={clsx(PrimeIcons.TRASH, 'hover:text-red-400')}
-                      tooltip={TOOLTIP_PROPS}
-                      onClick={handleShowCP}
-                    />
-                  </div>
-                )}
-              </div>
-            </WdTransition>
-          </div>
-        }
-      >
-        <MarkdownTextViewer>{text}</MarkdownTextViewer>
-      </InfoDrawer>
-
-      <ConfirmPopup
-        target={cpRemoveBtnRef.current}
-        visible={cpRemoveVisible}
-        onHide={handleHideCP}
-        message="Are you sure you want to delete?"
-        icon="pi pi-exclamation-triangle"
-        accept={handleDelete}
-      />
-    </>
-  );
-};

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

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

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

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

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

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

assets/js/hooks/Mapper/components/mapInterface/components/Comments/markdownexample.ts

@@ -1,26 +0,0 @@
-export const markdown = `
-  # Heading 1
-  ## Heading 2
-  ### Heading 3
-  #### Heading 4
-  ##### Heading 5
-  ###### Heading 6
-
-  ---
-
-  ## Paragraphs
-  This is a regular text paragraph.
-
-  Another paragraph, but with **bold** and *italic* text, as well as ~~strikethrough~~.
-
-  > This is a block quote.
-  > Second line of the quote.
-
-  ## Links
-  [Link to Google](https://www.google.com)
-
-  ## Horizontal Line
-  A block quote with ~strikethrough~ and a URL: https://reactjs.org.
-  ---
-
-  `;

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

@@ -1,73 +0,0 @@
-import { TooltipPosition, WdImageSize, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
-import clsx from 'clsx';
-import { PrimeIcons } from 'primereact/api';
-import { MarkdownEditor } from '@/hooks/Mapper/components/mapInterface/components/MarkdownEditor';
-import { useHotkey } from '@/hooks/Mapper/hooks';
-import { useCallback, useRef, useState } from 'react';
-import { OutCommand } from '@/hooks/Mapper/types';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-
-export interface CommentsEditorProps {}
-
-// eslint-disable-next-line no-empty-pattern
-export const CommentsEditor = ({}: CommentsEditorProps) => {
-  const [textVal, setTextVal] = useState('');
-
-  const {
-    data: { selectedSystems },
-    outCommand,
-  } = useMapRootState();
-
-  const [systemId] = selectedSystems;
-
-  const ref = useRef({ outCommand, systemId, textVal });
-  ref.current = { outCommand, systemId, textVal };
-
-  const handleFinishEdit = useCallback(async () => {
-    if (ref.current.textVal === '') {
-      return;
-    }
-
-    await ref.current.outCommand({
-      type: OutCommand.addSystemComment,
-      data: {
-        solarSystemId: ref.current.systemId,
-        value: ref.current.textVal,
-      },
-    });
-    setTextVal('');
-  }, []);
-
-  const handleClick = async () => {
-    await handleFinishEdit();
-  };
-
-  useHotkey(true, ['Enter'], async () => {
-    await handleFinishEdit();
-  });
-
-  return (
-    <MarkdownEditor
-      value={textVal}
-      onChange={setTextVal}
-      overlayContent={
-        <div className="w-full h-full flex justify-end items-end pointer-events-none pb-[1px] pr-[8px]">
-          <WdImgButton
-            disabled={textVal.length === 0}
-            tooltip={{
-              position: TooltipPosition.bottom,
-              content: (
-                <span>
-                  Also you may use <span className="text-cyan-400">Meta + Enter</span> hotkey.
-                </span>
-              ),
-            }}
-            textSize={WdImageSize.large}
-            className={clsx(PrimeIcons.SEND, 'text-[14px]')}
-            onClick={handleClick}
-          />
-        </div>
-      }
-    />
-  );
-};

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

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

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

@@ -1,40 +0,0 @@
-.CERoot {
-  @apply border border-stone-400/30 rounded-[2px];
-
-  :global {
-    .cm-content {
-      @apply bg-stone-600/40;
-    }
-
-    .cm-scroller {
-      scrollbar-width: thin;
-      scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
-    }
-
-    .cm-scroller::-webkit-scrollbar {
-      width: 10px;
-    }
-
-    .cm-scroller::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    .cm-scroller::-webkit-scrollbar-thumb {
-      background-color: rgba(255, 255, 255, 0.5);
-      border-radius: 5px;
-      border: 2px solid transparent;
-      background-clip: content-box;
-    }
-
-    .cm-scroller::-webkit-scrollbar-thumb:hover {
-      background-color: rgba(255, 255, 255, 0.7);
-    }
-
-    .cm-scroller::-webkit-scrollbar-button {
-      display: none;
-      height: 0;
-      width: 0;
-    }
-
-  }
-}

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

@@ -1,86 +0,0 @@
-import { ReactNode, useCallback, useRef, useState } from 'react';
-import CodeMirror, { ViewPlugin } from '@uiw/react-codemirror';
-import { markdown } from '@codemirror/lang-markdown';
-import { oneDark } from '@codemirror/theme-one-dark';
-import { EditorView, type ViewUpdate } from '@codemirror/view';
-
-import classes from './MarkdownEditor.module.scss';
-import clsx from 'clsx';
-
-// TODO special plugin which force CodeMirror using capture for paste event
-const stopEventPropagationPlugin = ViewPlugin.fromClass(
-  class {
-    constructor(view: EditorView) {
-      // @ts-ignore
-      this.view = view;
-
-      // @ts-ignore
-      this.pasteHandler = (event: Event) => {
-        event.stopPropagation();
-      };
-
-      // @ts-ignore
-      view.dom.addEventListener('paste', this.pasteHandler);
-    }
-
-    destroy() {
-      // @ts-ignore
-      this.view.dom.removeEventListener('paste', this.pasteHandler);
-    }
-  },
-);
-
-const CODE_MIRROR_EXTENSIONS = [
-  markdown(),
-  EditorView.lineWrapping,
-  EditorView.theme({
-    '&': { backgroundColor: 'transparent !important' },
-    '& .cm-gutterElement': { display: 'none' },
-  }),
-  stopEventPropagationPlugin,
-];
-
-export interface MarkdownEditorProps {
-  overlayContent?: ReactNode;
-  value: string;
-  onChange: (value: string) => void;
-}
-
-export const MarkdownEditor = ({ value, onChange, overlayContent }: MarkdownEditorProps) => {
-  const [hasShift, setHasShift] = useState(false);
-
-  const refData = useRef({ onChange });
-  refData.current = { onChange };
-
-  const handleOnChange = useCallback((value: string, viewUpdate: ViewUpdate) => {
-    // Rerender happens after change
-    setTimeout(() => {
-      const scrollDOM = viewUpdate.view.scrollDOM;
-      setHasShift(scrollDOM.scrollHeight > scrollDOM.clientHeight);
-    }, 0);
-
-    refData.current.onChange(value);
-  }, []);
-
-  return (
-    <div className={clsx(classes.MarkdownEditor, 'relative')}>
-      <CodeMirror
-        value={value}
-        height="70px"
-        extensions={CODE_MIRROR_EXTENSIONS}
-        className={classes.CERoot}
-        theme={oneDark}
-        onChange={handleOnChange}
-        placeholder="Start typing..."
-      />
-      <div
-        className={clsx('absolute top-0 left-0 h-full pointer-events-none', {
-          'w-full': !hasShift,
-          'w-[calc(100%-10px)]': hasShift,
-        })}
-      >
-        {overlayContent}
-      </div>
-    </div>
-  );
-};

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

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