Merge branch 'develop' into bridges

.env.example

@@ -1,7 +1,5 @@
 export WEB_APP_URL="http://localhost:8000"
 export RELEASE_COOKIE="PDpbnyo6mEI_0T4ZsHH_ESmi1vT1toQ8PTc0vbfg5FIT4Ih-Lh98mw=="
-# Erlang node name for distributed Erlang (optional - defaults to wanderer@hostname)
-# export RELEASE_NODE="wanderer@localhost"
 export EVE_CLIENT_ID="<EVE_CLIENT_ID>"
 export EVE_CLIENT_SECRET="<EVE_CLIENT_SECRET>"
 export EVE_CLIENT_WITH_WALLET_ID="<EVE_CLIENT_WITH_WALLET_ID>"
@@ -15,9 +13,4 @@ export WANDERER_KILLS_BASE_URL="ws://host.docker.internal:4004"
 export WANDERER_SSE_ENABLED="true"
 export WANDERER_WEBHOOKS_ENABLED="true"
 export WANDERER_SSE_MAX_CONNECTIONS="1000"
-export WANDERER_WEBHOOK_TIMEOUT_MS="15000"
-
-# Promo codes for map subscriptions (optional)
-# Format: CODE:DISCOUNT_PERCENT,CODE2:DISCOUNT_PERCENT2
-# Codes are case-insensitive, discounts stack with period discounts
-# export WANDERER_PROMO_CODES="PROMO2025:10,NEWUSER:20"
+export WANDERER_WEBHOOK_TIMEOUT_MS="15000"

.github/workflows/build-develop.yml

@@ -1,234 +0,0 @@
-name: Build Develop
-
-on:
-  push:
-    branches:
-      - develop
-
-env:
-  MIX_ENV: prod
-  GH_TOKEN: ${{ github.token }}
-  REGISTRY_IMAGE: wandererltd/community-edition
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-permissions:
-  contents: write
-
-jobs:
-  build:
-    name: 🛠 Build
-    runs-on: ubuntu-22.04
-    if: ${{ github.ref == 'refs/heads/develop' && github.event_name == 'push' }}
-    permissions:
-      checks: write
-      contents: write
-      packages: write
-      attestations: write
-      id-token: write
-      pull-requests: write
-      repository-projects: write
-    strategy:
-      matrix:
-        otp: ["27"]
-        elixir: ["1.17"]
-        node-version: ["18.x"]
-    outputs:
-      commit_hash: ${{ steps.set-commit-develop.outputs.commit_hash }}
-    steps:
-      - name: Prepare
-        run: |
-          platform=${{ matrix.platform }}
-          echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
-
-      - name: Setup Elixir
-        uses: erlef/setup-beam@v1
-        with:
-          otp-version: ${{matrix.otp}}
-          elixir-version: ${{matrix.elixir}}
-        # nix build would also work here because `todos` is the default package
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v3
-        with:
-          ssh-key: "${{ secrets.COMMIT_KEY }}"
-          fetch-depth: 0
-      - name: 😅 Cache deps
-        id: cache-deps
-        uses: actions/cache@v4
-        env:
-          cache-name: cache-elixir-deps
-        with:
-          path: |
-            deps
-          key: ${{ runner.os }}-mix-${{ matrix.elixir }}-${{ matrix.otp }}-${{ hashFiles('**/mix.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-mix-${{ matrix.elixir }}-${{ matrix.otp }}-
-      - name: 😅 Cache compiled build
-        id: cache-build
-        uses: actions/cache@v4
-        env:
-          cache-name: cache-compiled-build
-        with:
-          path: |
-            _build
-          key: ${{ runner.os }}-build-${{ hashFiles('**/mix.lock') }}-${{ hashFiles( '**/lib/**/*.{ex,eex}', '**/config/*.exs', '**/mix.exs' ) }}
-          restore-keys: |
-            ${{ runner.os }}-build-${{ hashFiles('**/mix.lock') }}-
-            ${{ runner.os }}-build-
-      # Step: Download project dependencies. If unchanged, uses
-      # the cached version.
-      - name: 🌐 Install dependencies
-        run: mix deps.get --only "prod"
-
-      # Step: Compile the project treating any warnings as errors.
-      # Customize this step if a different behavior is desired.
-      - name: 🛠 Compiles without warnings
-        if: steps.cache-build.outputs.cache-hit != 'true'
-        run: mix compile
-
-      - name: Set commit hash for develop
-        id: set-commit-develop
-        run: |
-          echo "commit_hash=$(git rev-parse HEAD)" >> $GITHUB_OUTPUT
-
-  docker:
-    name: 🛠 Build Docker Images
-    needs: build
-    runs-on: ubuntu-22.04
-    permissions:
-      checks: write
-      contents: write
-      packages: write
-      attestations: write
-      id-token: write
-      pull-requests: write
-      repository-projects: write
-    strategy:
-      fail-fast: false
-      matrix:
-        platform:
-          - linux/amd64
-          - linux/arm64
-    steps:
-      - name: Prepare
-        run: |
-          platform=${{ matrix.platform }}
-          echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
-
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v3
-        with:
-          ref: ${{ needs.build.outputs.commit_hash }}
-          fetch-depth: 0
-
-      - name: Extract metadata (tags, labels) for Docker
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ${{ env.REGISTRY_IMAGE }}
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Login to DockerHub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.WANDERER_DOCKER_USER }}
-          password: ${{ secrets.WANDERER_DOCKER_PASSWORD }}
-
-      - name: Build and push
-        id: build
-        uses: docker/build-push-action@v6
-        with:
-          push: true
-          context: .
-          file: ./Dockerfile
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-          labels: ${{ steps.meta.outputs.labels }}
-          platforms: ${{ matrix.platform }}
-          outputs: type=image,"name=${{ env.REGISTRY_IMAGE }}",push-by-digest=true,name-canonical=true,push=true
-          build-args: |
-            MIX_ENV=prod
-            BUILD_METADATA=${{ steps.meta.outputs.json }}
-
-      - name: 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
-
-  merge:
-    runs-on: ubuntu-latest
-    needs:
-      - docker
-    steps:
-      - name: Download digests
-        uses: actions/download-artifact@v4
-        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=raw,value=develop,enable=${{ github.ref == 'refs/heads/develop' }}
-            type=raw,value=develop-{{sha}},enable=${{ github.ref == 'refs/heads/develop' }}
-
-      - 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 }}
-
-  notify:
-    name: 🏷 Notify about develop release
-    runs-on: ubuntu-22.04
-    needs: [docker, merge]
-    steps:
-      - name: Discord Webhook Action
-        uses: tsickert/discord-webhook@v5.3.0
-        with:
-          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL_DEV }}
-          content: |
-            📣 New develop release available 🚀
-
-            **Commit**: `${{ github.sha }}`
-            **Status**: Development/Testing Release
-
-            Docker image: `wandererltd/community-edition:develop`
-
-            ⚠️ This is an unstable development release for testing purposes.

.github/workflows/build.yml

@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - main
-
+      - "releases/*"
 env:
   MIX_ENV: prod
   GH_TOKEN: ${{ github.token }}
@@ -21,7 +21,7 @@ jobs:
   build:
     name: 🛠 Build
     runs-on: ubuntu-22.04
-    if: ${{ github.ref == 'refs/heads/main' && github.event_name == 'push' }}
+    if: ${{ (github.ref == 'refs/heads/main') && github.event_name == 'push' }}
     permissions:
       checks: write
       contents: write
@@ -52,7 +52,6 @@ jobs:
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v3
         with:
-          ssh-key: "${{ secrets.COMMIT_KEY }}"
           fetch-depth: 0
       - name: 😅 Cache deps
         id: cache-deps
@@ -94,15 +93,9 @@ jobs:
           git config --global user.name 'CI'
           git config --global user.email 'ci@users.noreply.github.com'
           mix git_ops.release --force-patch --yes
-          git commit --allow-empty -m 'chore: [skip ci]'
           git push --follow-tags
           echo "commit_hash=$(git rev-parse HEAD)" >> $GITHUB_OUTPUT
 
-      - name: Set commit hash for develop
-        id: set-commit-develop
-        run: |
-          echo "commit_hash=$(git rev-parse HEAD)" >> $GITHUB_OUTPUT
-
   docker:
     name: 🛠 Build Docker Images
     needs: build
@@ -136,17 +129,17 @@ jobs:
           ref: ${{ needs.build.outputs.commit_hash }}
           fetch-depth: 0
 
+      - name: Prepare Changelog
+        run: |
+          yes | cp -rf CHANGELOG.md priv/changelog/CHANGELOG.md
+          sed -i '1i%{title: "Change Log"}\n\n---\n' priv/changelog/CHANGELOG.md
+
       - name: Get Release Tag
         id: get-latest-tag
         uses: "WyriHaximus/github-action-get-previous-tag@v1"
         with:
           fallback: 1.0.0
 
-      - name: Prepare Changelog
-        run: |
-          yes | cp -rf CHANGELOG.md priv/changelog/CHANGELOG.md
-          sed -i '1i%{title: "Change Log"}\n\n---\n' priv/changelog/CHANGELOG.md
-
       - name: Extract metadata (tags, labels) for Docker
         id: meta
         uses: docker/metadata-action@v5
@@ -260,25 +253,19 @@ jobs:
   create-release:
     name: 🏷 Create Release
     runs-on: ubuntu-22.04
+    needs: [docker, merge]
     if: ${{ github.ref == 'refs/heads/main' && github.event_name == 'push' }}
-    needs: build
     steps:
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v3
         with:
           fetch-depth: 0
 
-      - name: Get Release Tag
-        id: get-latest-tag
-        uses: "WyriHaximus/github-action-get-previous-tag@v1"
-        with:
-          fallback: 1.0.0
-
       - name: 🏷 Create Draft Release
         uses: softprops/action-gh-release@v1
         with:
-          tag_name: ${{ steps.get-latest-tag.outputs.tag }}
-          name: Release ${{ steps.get-latest-tag.outputs.tag }}
+          tag_name: ${{ needs.docker.outputs.release-tag }}
+          name: Release ${{ needs.docker.outputs.release-tag }}
           body: |
             ## Info
             Commit ${{ github.sha }} was deployed to `staging`. [See code diff](${{ github.event.compare }}).
@@ -289,11 +276,6 @@ jobs:
             In order to promote this to prod, edit the draft and press **"Publish release"**.
           draft: true
 
-  notify:
-    name: 🏷 Notify about release
-    runs-on: ubuntu-22.04
-    needs: [docker, merge]
-    steps:
       - name: Discord Webhook Action
         uses: tsickert/discord-webhook@v5.3.0
         with:

.github/workflows/test.yml

@@ -21,7 +21,7 @@ jobs:
   test:
     name: Test Suite
     runs-on: ubuntu-latest
-
+    
     services:
       postgres:
         image: postgres:15
@@ -35,17 +35,17 @@ jobs:
           --health-retries 5
         ports:
           - 5432:5432
-
+    
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
-
+        
       - name: Setup Elixir/OTP
         uses: erlef/setup-beam@v1
         with:
           elixir-version: ${{ env.ELIXIR_VERSION }}
           otp-version: ${{ env.OTP_VERSION }}
-
+          
       - name: Cache Elixir dependencies
         uses: actions/cache@v3
         with:
@@ -54,12 +54,12 @@ jobs:
             _build
           key: ${{ runner.os }}-mix-${{ hashFiles('**/mix.lock') }}
           restore-keys: ${{ runner.os }}-mix-
-
+          
       - name: Install Elixir dependencies
         run: |
           mix deps.get
           mix deps.compile
-
+          
       - name: Check code formatting
         id: format
         run: |
@@ -71,42 +71,42 @@ jobs:
             echo "count=1" >> $GITHUB_OUTPUT
           fi
         continue-on-error: true
-
+        
       - name: Compile code and capture warnings
         id: compile
         run: |
           # Capture compilation output
           output=$(mix compile 2>&1 || true)
           echo "$output" > compile_output.txt
-
+          
           # Count warnings
           warning_count=$(echo "$output" | grep -c "warning:" || echo "0")
-
+          
           # Check if compilation succeeded
           if mix compile > /dev/null 2>&1; then
             echo "status=✅ Success" >> $GITHUB_OUTPUT
           else
             echo "status=❌ Failed" >> $GITHUB_OUTPUT
           fi
-
+          
           echo "warnings=$warning_count" >> $GITHUB_OUTPUT
           echo "output<<EOF" >> $GITHUB_OUTPUT
           echo "$output" >> $GITHUB_OUTPUT
           echo "EOF" >> $GITHUB_OUTPUT
         continue-on-error: true
-
+        
       - name: Setup database
         run: |
           mix ecto.create
           mix ecto.migrate
-
+          
       - name: Run tests with coverage
         id: tests
         run: |
           # Run tests with coverage
           output=$(mix test --cover 2>&1 || true)
           echo "$output" > test_output.txt
-
+          
           # Parse test results
           if echo "$output" | grep -q "0 failures"; then
             echo "status=✅ All Passed" >> $GITHUB_OUTPUT
@@ -115,16 +115,16 @@ jobs:
             echo "status=❌ Some Failed" >> $GITHUB_OUTPUT
             test_status="failed"
           fi
-
+          
           # Extract test counts
           test_line=$(echo "$output" | grep -E "[0-9]+ tests?, [0-9]+ failures?" | head -1 || echo "0 tests, 0 failures")
           total_tests=$(echo "$test_line" | grep -o '[0-9]\+ tests\?' | grep -o '[0-9]\+' | head -1 || echo "0")
           failures=$(echo "$test_line" | grep -o '[0-9]\+ failures\?' | grep -o '[0-9]\+' | head -1 || echo "0")
-
+          
           echo "total=$total_tests" >> $GITHUB_OUTPUT
           echo "failures=$failures" >> $GITHUB_OUTPUT
           echo "passed=$((total_tests - failures))" >> $GITHUB_OUTPUT
-
+          
           # Calculate success rate
           if [ "$total_tests" -gt 0 ]; then
             success_rate=$(echo "scale=1; ($total_tests - $failures) * 100 / $total_tests" | bc)
@@ -132,26 +132,26 @@ jobs:
             success_rate="0"
           fi
           echo "success_rate=$success_rate" >> $GITHUB_OUTPUT
-
+          
           exit_code=$?
           echo "exit_code=$exit_code" >> $GITHUB_OUTPUT
         continue-on-error: true
-
+        
       - name: Generate coverage report
         id: coverage
         run: |
           # Generate coverage report with GitHub format
           output=$(mix coveralls.github 2>&1 || true)
           echo "$output" > coverage_output.txt
-
+          
           # Extract coverage percentage
           coverage=$(echo "$output" | grep -o '[0-9]\+\.[0-9]\+%' | head -1 | sed 's/%//' || echo "0")
           if [ -z "$coverage" ]; then
             coverage="0"
           fi
-
+          
           echo "percentage=$coverage" >> $GITHUB_OUTPUT
-
+          
           # Determine status
           if (( $(echo "$coverage >= 80" | bc -l) )); then
             echo "status=✅ Excellent" >> $GITHUB_OUTPUT
@@ -161,14 +161,14 @@ jobs:
             echo "status=❌ Needs Improvement" >> $GITHUB_OUTPUT
           fi
         continue-on-error: true
-
+        
       - name: Run Credo analysis
         id: credo
         run: |
           # Run Credo and capture output
           output=$(mix credo --strict --format=json 2>&1 || true)
           echo "$output" > credo_output.txt
-
+          
           # Try to parse JSON output
           if echo "$output" | jq . > /dev/null 2>&1; then
             issues=$(echo "$output" | jq '.issues | length' 2>/dev/null || echo "0")
@@ -183,12 +183,12 @@ jobs:
             normal_issues="0"
             low_issues="0"
           fi
-
+          
           echo "total_issues=$issues" >> $GITHUB_OUTPUT
           echo "high_issues=$high_issues" >> $GITHUB_OUTPUT
           echo "normal_issues=$normal_issues" >> $GITHUB_OUTPUT
           echo "low_issues=$low_issues" >> $GITHUB_OUTPUT
-
+          
           # Determine status
           if [ "$issues" -eq 0 ]; then
             echo "status=✅ Clean" >> $GITHUB_OUTPUT
@@ -198,24 +198,24 @@ jobs:
             echo "status=❌ Needs Attention" >> $GITHUB_OUTPUT
           fi
         continue-on-error: true
-
+        
       - name: Run Dialyzer analysis
         id: dialyzer
         run: |
           # Ensure PLT is built
           mix dialyzer --plt
-
+          
           # Run Dialyzer and capture output
           output=$(mix dialyzer --format=github 2>&1 || true)
           echo "$output" > dialyzer_output.txt
-
+          
           # Count warnings and errors
           warnings=$(echo "$output" | grep -c "warning:" || echo "0")
           errors=$(echo "$output" | grep -c "error:" || echo "0")
-
+          
           echo "warnings=$warnings" >> $GITHUB_OUTPUT
           echo "errors=$errors" >> $GITHUB_OUTPUT
-
+          
           # Determine status
           if [ "$errors" -eq 0 ] && [ "$warnings" -eq 0 ]; then
             echo "status=✅ Clean" >> $GITHUB_OUTPUT
@@ -225,7 +225,7 @@ jobs:
             echo "status=❌ Has Errors" >> $GITHUB_OUTPUT
           fi
         continue-on-error: true
-
+        
       - name: Create test results summary
         id: summary
         run: |
@@ -236,11 +236,11 @@ jobs:
           coverage_score=${{ steps.coverage.outputs.percentage }}
           credo_score=$(echo "scale=0; (100 - ${{ steps.credo.outputs.total_issues }} * 2)" | bc | sed 's/^-.*$/0/')
           dialyzer_score=$(echo "scale=0; (100 - ${{ steps.dialyzer.outputs.warnings }} * 2 - ${{ steps.dialyzer.outputs.errors }} * 10)" | bc | sed 's/^-.*$/0/')
-
+          
           overall_score=$(echo "scale=1; ($format_score + $compile_score + $test_score + $coverage_score + $credo_score + $dialyzer_score) / 6" | bc)
-
+          
           echo "overall_score=$overall_score" >> $GITHUB_OUTPUT
-
+          
           # Determine overall status
           if (( $(echo "$overall_score >= 90" | bc -l) )); then
             echo "overall_status=🌟 Excellent" >> $GITHUB_OUTPUT
@@ -252,7 +252,7 @@ jobs:
             echo "overall_status=❌ Poor" >> $GITHUB_OUTPUT
           fi
         continue-on-error: true
-
+        
       - name: Find existing PR comment
         if: github.event_name == 'pull_request'
         id: find_comment
@@ -261,7 +261,7 @@ jobs:
           issue-number: ${{ github.event.pull_request.number }}
           comment-author: 'github-actions[bot]'
           body-includes: '## 🧪 Test Results Summary'
-
+          
       - name: Create or update PR comment
         if: github.event_name == 'pull_request'
         uses: peter-evans/create-or-update-comment@v4
@@ -271,11 +271,11 @@ jobs:
           edit-mode: replace
           body: |
             ## 🧪 Test Results Summary
-
+            
             **Overall Quality Score: ${{ steps.summary.outputs.overall_score }}%** ${{ steps.summary.outputs.overall_status }}
-
+            
             ### 📊 Metrics Dashboard
-
+            
             | Category | Status | Count | Details |
             |----------|---------|-------|---------|
             | 📝 **Code Formatting** | ${{ steps.format.outputs.status }} | ${{ steps.format.outputs.count }} issues | `mix format --check-formatted` |
@@ -284,50 +284,50 @@ jobs:
             | 📊 **Coverage** | ${{ steps.coverage.outputs.status }} | ${{ steps.coverage.outputs.percentage }}% | `mix coveralls` |
             | 🎯 **Credo** | ${{ steps.credo.outputs.status }} | ${{ steps.credo.outputs.total_issues }} issues | High: ${{ steps.credo.outputs.high_issues }}, Normal: ${{ steps.credo.outputs.normal_issues }}, Low: ${{ steps.credo.outputs.low_issues }} |
             | 🔍 **Dialyzer** | ${{ steps.dialyzer.outputs.status }} | ${{ steps.dialyzer.outputs.errors }} errors, ${{ steps.dialyzer.outputs.warnings }} warnings | `mix dialyzer` |
-
+            
             ### 🎯 Quality Gates
-
+            
             Based on the project's quality thresholds:
             - **Compilation Warnings**: ${{ steps.compile.outputs.warnings }}/148 (limit: 148)
-            - **Credo Issues**: ${{ steps.credo.outputs.total_issues }}/87 (limit: 87)
+            - **Credo Issues**: ${{ steps.credo.outputs.total_issues }}/87 (limit: 87)  
             - **Dialyzer Warnings**: ${{ steps.dialyzer.outputs.warnings }}/161 (limit: 161)
             - **Test Coverage**: ${{ steps.coverage.outputs.percentage }}%/50% (minimum: 50%)
             - **Test Failures**: ${{ steps.tests.outputs.failures }}/0 (limit: 0)
-
+            
             <details>
             <summary>📈 Progress Toward Goals</summary>
-
+            
             Target goals for the project:
             - ✨ **Zero compilation warnings** (currently: ${{ steps.compile.outputs.warnings }})
             - ✨ **≤10 Credo issues** (currently: ${{ steps.credo.outputs.total_issues }})
             - ✨ **Zero Dialyzer warnings** (currently: ${{ steps.dialyzer.outputs.warnings }})
             - ✨ **≥85% test coverage** (currently: ${{ steps.coverage.outputs.percentage }}%)
             - ✅ **Zero test failures** (currently: ${{ steps.tests.outputs.failures }})
-
+            
             </details>
-
+            
             <details>
             <summary>🔧 Quick Actions</summary>
-
+            
             To improve code quality:
             ```bash
             # Fix formatting issues
             mix format
-
+            
             # View detailed Credo analysis
             mix credo --strict
-
+            
             # Check Dialyzer warnings
             mix dialyzer
-
+            
             # Generate detailed coverage report
             mix coveralls.html
             ```
-
+            
             </details>
-
+            
             ---
-
+            
             🤖 *Auto-generated by GitHub Actions* • Updated: ${{ github.event.head_commit.timestamp }}
-
-            > **Note**: This comment will be updated automatically when new commits are pushed to this PR.
+            
+            > **Note**: This comment will be updated automatically when new commits are pushed to this PR.

.gitignore

@@ -17,9 +17,6 @@ repomix*
 /priv/static/images/
 /priv/static/*.js
 /priv/static/*.css
-/priv/static/*-*.png
-/priv/static/*-*.webp
-/priv/static/*-*.webmanifest
 
 # Dialyzer PLT files
 /priv/plts/

.tool-versions

@@ -1,3 +1,3 @@
-erlang 26.2.5.5
-elixir 1.17.3-otp-26
+erlang 27.0
+elixir 1.17.2-otp-27
 nodejs 18.0.0

Dockerfile

@@ -21,17 +21,21 @@ RUN mkdir config
 # to ensure any relevant config change will trigger the dependencies
 # to be re-compiled.
 COPY config/config.exs config/${MIX_ENV}.exs config/
+
 COPY priv priv
+
 COPY lib lib
+
 COPY assets assets
 
-RUN mix assets.deploy
 RUN mix compile
 
+RUN mix assets.deploy
+
 # Changes to config/runtime.exs don't require recompiling the code
 COPY config/runtime.exs config/
-COPY rel rel
 
+COPY rel rel
 RUN mix release
 
 # start a new build stage so that the final image will only contain

Makefile

@@ -30,60 +30,10 @@ format f:
 	mix format
 
 test t:
-	MIX_ENV=test mix test
-
-# Run tests in 4 parallel partitions (useful for CI or faster local runs)
-test-parallel tp:
-	@echo "Running tests in 4 parallel partitions..."
-	@mkdir -p /tmp/wanderer_test_results
-	@rm -f /tmp/wanderer_test_results/partition_*.txt /tmp/wanderer_test_results/exit_*.txt
-	@for i in 1 2 3 4; do \
-		(MIX_TEST_PARTITION=$$i MIX_ENV=test mix test --partitions 4 2>&1; echo $$? > /tmp/wanderer_test_results/exit_$$i.txt) | \
-		tee /tmp/wanderer_test_results/partition_$$i.txt | sed "s/^/[P$$i] /" & \
-	done; \
-	wait
-	@echo ""
-	@echo "========================================"
-	@echo "        TEST RESULTS SUMMARY"
-	@echo "========================================"
-	@total_tests=0; total_failures=0; total_excluded=0; all_passed=true; \
-	for i in 1 2 3 4; do \
-		exit_code=$$(cat /tmp/wanderer_test_results/exit_$$i.txt 2>/dev/null || echo "1"); \
-		if [ "$$exit_code" != "0" ]; then all_passed=false; fi; \
-		summary=$$(grep -E "^[0-9]+ (tests?|doctest)" /tmp/wanderer_test_results/partition_$$i.txt | tail -1 || echo "No results"); \
-		tests=$$(echo "$$summary" | grep -oE "^[0-9]+" || echo "0"); \
-		failures=$$(echo "$$summary" | grep -oE "[0-9]+ failures?" | grep -oE "^[0-9]+" || echo "0"); \
-		excluded=$$(echo "$$summary" | grep -oE "[0-9]+ excluded" | grep -oE "^[0-9]+" || echo "0"); \
-		total_tests=$$((total_tests + tests)); \
-		total_failures=$$((total_failures + failures)); \
-		total_excluded=$$((total_excluded + excluded)); \
-		if [ "$$exit_code" = "0" ]; then \
-			echo "Partition $$i: ✓ $$summary"; \
-		else \
-			echo "Partition $$i: ✗ $$summary (exit code: $$exit_code)"; \
-		fi; \
-	done; \
-	echo "========================================"; \
-	echo "TOTAL: $$total_tests tests, $$total_failures failures, $$total_excluded excluded"; \
-	echo "========================================"; \
-	if [ "$$all_passed" = "true" ]; then \
-		echo "✓ All partitions passed!"; \
-	else \
-		echo "✗ Some partitions failed. Details below:"; \
-		echo ""; \
-		for i in 1 2 3 4; do \
-			exit_code=$$(cat /tmp/wanderer_test_results/exit_$$i.txt 2>/dev/null || echo "1"); \
-			if [ "$$exit_code" != "0" ]; then \
-				echo "======== PARTITION $$i FAILURES ========"; \
-				grep -A 50 "Failures:" /tmp/wanderer_test_results/partition_$$i.txt 2>/dev/null || cat /tmp/wanderer_test_results/partition_$$i.txt; \
-				echo ""; \
-			fi; \
-		done; \
-		exit 1; \
-	fi
+	mix test
 
 coverage cover co:
-	MIX_ENV=test mix test --cover
+	mix test --cover
 
 unit-tests ut:
 	@echo "Running unit tests..."
@@ -95,3 +45,4 @@ versions v:
 	@cat .tool-versions
 	@cat Aptfile
 	@echo
+

assets/.eslintrc.cjs

@@ -18,28 +18,5 @@ module.exports = {
     'react/react-in-jsx-scope': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',
     "linebreak-style": "off",
-    "no-restricted-imports": [
-      "error",
-      {
-        "paths": [
-          {
-            "name": "primereact/button",
-            "importNames": ["Button"],
-            "message": "Use WdButton instead Button"
-          }
-        ]
-      }
-    ],
-    "react/forbid-elements": [
-      "error",
-      {
-        "forbid": [
-          {
-            "element": "Button",
-            "message": "Use WdButton instead Button"
-          }
-        ]
-      }
-    ]
   },
 };

assets/css/app.css

@@ -73,9 +73,7 @@ body > div:first-of-type {
 }
 
 .maps_bg {
-  /* OLD image */
-  /* background-image: url('../images/maps_bg.webp'); */
-  background-image: url('https://wanderer-industries.github.io/wanderer-assets/images/eve-screen-catalyst-expansion-bg.jpg');
+  background-image: url('../images/maps_bg.webp');
   background-size: cover;
   background-position: center;
   width: 100%;
@@ -1001,27 +999,3 @@ body > div:first-of-type {
 .verticalTabsContainer .p-tabview-panel {
   flex-grow: 1;
 }
-
-/* Blog post CTA links - only in main post content */
-.post-content a {
-  display: inline-block;
-  background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
-  color: white !important;
-  padding: 0.5rem 1.25rem;
-  border-radius: 0.5rem;
-  text-decoration: none !important;
-  font-weight: 600;
-  transition: all 0.3s ease;
-  box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3);
-}
-
-.post-content a:hover {
-  background: linear-gradient(135deg, #db2777 0%, #7c3aed 100%);
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4);
-}
-
-.post-content a:active {
-  transform: translateY(0);
-  box-shadow: 0 2px 10px rgba(236, 72, 153, 0.3);
-}

assets/js/hooks/Mapper/MapRoot.tsx

@@ -9,7 +9,6 @@ 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 { ToastProvider } from '@/hooks/Mapper/ToastProvider.tsx';
 
 const ErrorFallback = () => {
   return <div className="!z-100 absolute w-screen h-screen bg-transparent"></div>;
@@ -40,15 +39,13 @@ export default function MapRoot({ hooks }) {
 
   return (
     <PrimeReactProvider>
-      <ToastProvider>
-        <MapRootProvider fwdRef={providerRef} outCommand={handleCommand}>
-          <ErrorBoundary FallbackComponent={ErrorFallback} onError={logError}>
-            <ReactFlowProvider>
-              <MapRootContent />
-            </ReactFlowProvider>
-          </ErrorBoundary>
-        </MapRootProvider>
-      </ToastProvider>
+      <MapRootProvider fwdRef={providerRef} outCommand={handleCommand}>
+        <ErrorBoundary FallbackComponent={ErrorFallback} onError={logError}>
+          <ReactFlowProvider>
+            <MapRootContent />
+          </ReactFlowProvider>
+        </ErrorBoundary>
+      </MapRootProvider>
     </PrimeReactProvider>
   );
 }

assets/js/hooks/Mapper/ToastProvider.tsx

@@ -1,31 +0,0 @@
-import React, { createContext, useContext, useRef } from 'react';
-import { Toast } from 'primereact/toast';
-import type { ToastMessage } from 'primereact/toast';
-
-interface ToastContextValue {
-  toastRef: React.RefObject<Toast>;
-  show: (message: ToastMessage | ToastMessage[]) => void;
-}
-
-const ToastContext = createContext<ToastContextValue | null>(null);
-
-export const ToastProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const toastRef = useRef<Toast>(null);
-
-  const show = (message: ToastMessage | ToastMessage[]) => {
-    toastRef.current?.show(message);
-  };
-
-  return (
-    <ToastContext.Provider value={{ toastRef, show }}>
-      <Toast ref={toastRef} position="top-right" />
-      {children}
-    </ToastContext.Provider>
-  );
-};
-
-export const useToast = (): ToastContextValue => {
-  const context = useContext(ToastContext);
-  if (!context) throw new Error('useToast must be used within a ToastProvider');
-  return context;
-};

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

@@ -284,7 +284,3 @@
   border-left-color: #e67e22;
 }
 
-.p-dialog-header-icon.p-dialog-header-close.p-link {
-  position: relative;
-  left: 6px;
-}

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

@@ -1,13 +1,18 @@
 // import './tailwind.css';
-@use 'primereact/resources/primereact.min.css';
-@use 'primeicons/primeicons.css';
+//@import 'primereact/resources/themes/bootstrap4-dark-blue/theme.css';
+//@import 'primereact/resources/themes/lara-dark-purple/theme.css';
+//@import "prime-fixes";
+@import 'primereact/resources/primereact.min.css';
+//@import 'primeflex/primeflex.css';
+@import 'primeicons/primeicons.css';
+//@import 'primereact/resources/primereact.css';
 
 
-@use "fixes";
-@use "prime-fixes";
-@use "custom-scrollbar";
-@use "tooltip";
-@use "context-menu";
+@import "fixes";
+@import "prime-fixes";
+@import "custom-scrollbar";
+@import "tooltip";
+@import "context-menu";
 
 
 .fixedImportant {

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

@@ -1,7 +1,7 @@
 .vertical-tabs-container {
   display: flex;
   width: 100%;
-  min-height: 200px;
+  min-height: 300px;
 
   .p-tabview {
     width: 100%;
@@ -68,28 +68,6 @@
         }
 
       }
-
-      &.color-warn {
-        @apply bg-yellow-600/5 border-r-yellow-600/20;
-
-        &:hover {
-          @apply bg-yellow-600/10 border-r-yellow-600/40;
-        }
-
-
-        &.p-tabview-selected {
-          @apply bg-yellow-600/10 border-r-yellow-600;
-
-          .p-tabview-nav-link {
-            @apply text-yellow-600;
-          }
-
-          &:hover {
-            @apply bg-yellow-600/10 border-r-yellow-600;
-          }
-
-        }
-      }
     }
   }
 

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

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

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

@@ -1,18 +1,13 @@
 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 {
-  TooltipPosition,
-  WdEveEntityPortrait,
-  WdEveEntityPortraitSize,
-  WdTooltipWrapper,
-} from '@/hooks/Mapper/components/ui-kit';
-import { WdCharStateWrapper } from '@/hooks/Mapper/components/characters/components/WdCharStateWrapper.tsx';
-
+import classes from './Characters.module.scss';
 interface CharactersProps {
   data: CharacterTypeRaw[];
 }
@@ -22,7 +17,7 @@ export const Characters = ({ data }: CharactersProps) => {
 
   const {
     outCommand,
-    data: { mainCharacterEveId, followingCharacterEveId, expiredCharacters },
+    data: { mainCharacterEveId, followingCharacterEveId },
   } = useMapRootState();
 
   const handleSelect = useCallback(async (character: CharacterTypeRaw) => {
@@ -40,48 +35,73 @@ export const Characters = ({ data }: CharactersProps) => {
     });
   }, []);
 
-  const items = data.map(character => {
-    const isExpired = expiredCharacters.includes(character.eve_id);
-
-    return (
-      <li
-        key={character.eve_id}
-        className="flex flex-col items-center justify-center"
-        onClick={() => handleSelect(character)}
+  const items = data.map(character => (
+    <li
+      key={character.eve_id}
+      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}
       >
-        <WdTooltipWrapper
-          position={TooltipPosition.bottom}
-          content={isExpired ? `Token is expired for ${character.name}` : character.name}
-        >
-          <WdCharStateWrapper
-            eve_id={character.eve_id}
-            location={character.location}
-            isExpired={isExpired}
-            isMain={mainCharacterEveId === character.eve_id}
-            isFollowing={followingCharacterEveId === character.eve_id}
-            isOnline={character.online}
-          >
-            <WdEveEntityPortrait
-              eveId={character.eve_id}
-              size={WdEveEntityPortraitSize.w33}
+        {character.tracking_paused && (
+          <>
+            <span
               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']: !isExpired && !character.online,
-                  ['opacity-100']: !isExpired && character.online,
-                  ['opacity-50']: isExpired,
-                },
-                '!border-0',
+                'absolute flex flex-col  p-[2px]  top-[0px] left-[0px] w-[35px] h-[35px]',
+                'text-yellow-500 text-[9px] z-10 bg-gray-800/40',
+                'pi',
+                PrimeIcons.PAUSE,
               )}
             />
-          </WdCharStateWrapper>
-        </WdTooltipWrapper>
-      </li>
-    );
-  });
+          </>
+        )}
+        {mainCharacterEveId === character.eve_id && (
+          <span
+            className={clsx(
+              'absolute top-[2px] left-[22px] w-[9px] h-[9px]',
+              'text-yellow-500 text-[9px] rounded-[1px] z-10',
+              'pi',
+              PrimeIcons.STAR_FILL,
+            )}
+          />
+        )}
+
+        {followingCharacterEveId === character.eve_id && (
+          <span
+            className={clsx(
+              'absolute top-[23px] left-[22px] w-[10px] h-[10px]',
+              'text-sky-300 text-[10px] rounded-[1px] z-10',
+              'pi pi-angle-double-right',
+            )}
+          />
+        )}
+        {isDocked(character.location) && <div className={classes.Docked} />}
+        <div
+          className={clsx(
+            'flex w-full h-full bg-transparent cursor-pointer',
+            'bg-center bg-no-repeat bg-[length:100%]',
+            'transition-opacity',
+            'shadow-[inset_0_1px_6px_1px_#000000]',
+            {
+              ['opacity-60']: !character.online,
+              ['opacity-100']: character.online,
+            },
+          )}
+          style={{ backgroundImage: `url(https://images.evetech.net/characters/${character.eve_id}/portrait)` }}
+        ></div>
+      </div>
+    </li>
+  ));
 
   return (
     <ul className="flex gap-1 characters" id="characters" ref={parent}>

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

@@ -1,71 +0,0 @@
-import clsx from 'clsx';
-import { PrimeIcons } from 'primereact/api';
-import { isDocked } from '@/hooks/Mapper/helpers/isDocked.ts';
-import classes from './WdCharStateWrapper.module.scss';
-import { WithChildren } from '@/hooks/Mapper/types/common.ts';
-import { LocationRaw } from '@/hooks/Mapper/types';
-
-type WdCharStateWrapperProps = {
-  eve_id: string;
-  isExpired?: boolean;
-  isMain?: boolean;
-  isFollowing?: boolean;
-  location: LocationRaw | null;
-  isOnline: boolean;
-} & WithChildren;
-
-export const WdCharStateWrapper = ({
-  location,
-  isOnline,
-  isMain,
-  isFollowing,
-  isExpired,
-  children,
-}: WdCharStateWrapperProps) => {
-  return (
-    <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']: !isExpired && !isOnline,
-          ['border-lime-600/70']: !isExpired && isOnline,
-          ['border-red-600/70']: isExpired,
-        },
-      )}
-    >
-      {isMain && (
-        <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,
-          )}
-        />
-      )}
-      {isFollowing && (
-        <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(location) && <div className={classes.Docked} />}
-      {isExpired && (
-        <span
-          className={clsx(
-            'absolute top-[4px] left-[4px] w-[10px] h-[10px]',
-            'text-red-400 text-[10px] rounded-[1px] z-10',
-            'pi pi-exclamation-triangle',
-          )}
-        />
-      )}
-
-      {children}
-    </div>
-  );
-};

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

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

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

@@ -19,7 +19,7 @@ export interface ContextMenuSystemProps {
   onSystemStatus(val: number): void;
   onSystemLabels(val: string): void;
   onCustomLabelDialog(): void;
-  onTogglePing(type: PingType, solar_system_id: string, ping_id: string | undefined, hasPing: boolean): void;
+  onTogglePing(type: PingType, solar_system_id: string, hasPing: boolean): void;
   onWaypointSet: WaypointSetContextHandler;
 }
 

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

@@ -5,7 +5,8 @@ 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, WdButton } from '@/hooks/Mapper/components/ui-kit';
+import { LayoutEventBlocker } from '@/hooks/Mapper/components/ui-kit';
+import { Button } from 'primereact/button';
 
 const AVAILABLE_TAGS = [
   'A',
@@ -60,7 +61,7 @@ export const useTagMenu = (
               <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 => (
-                    <WdButton
+                    <Button
                       outlined={system?.tag !== x}
                       severity="warning"
                       key={x}
@@ -70,9 +71,9 @@ export const useTagMenu = (
                       onClick={() => system?.tag !== x && onSystemTag(x)}
                     >
                       {x}
-                    </WdButton>
+                    </Button>
                   ))}
-                  <WdButton
+                  <Button
                     disabled={!isSelectedTag}
                     icon="pi pi-ban"
                     size="small"
@@ -80,7 +81,7 @@ export const useTagMenu = (
                     outlined
                     severity="help"
                     onClick={() => onSystemTag()}
-                  ></WdButton>
+                  ></Button>
                 </div>
               </LayoutEventBlocker>
             );

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

@@ -109,7 +109,7 @@ export const useContextMenuSystemItems = ({
 
       { separator: true },
       {
-        command: () => onTogglePing(PingType.Rally, systemId, ping?.id, hasPing),
+        command: () => onTogglePing(PingType.Rally, systemId, hasPing),
         disabled: !isShowPingBtn,
         template: () => {
           const iconClasses = clsx({
@@ -118,11 +118,7 @@ export const useContextMenuSystemItems = ({
           });
 
           if (isShowPingBtn) {
-            return (
-              <WdMenuItem icon={iconClasses} className="!ml-[-2px]">
-                {!hasPing ? 'Ping: RALLY' : 'Cancel: RALLY'}
-              </WdMenuItem>
-            );
+            return <WdMenuItem icon={iconClasses}>{!hasPing ? 'Ping: RALLY' : 'Cancel: RALLY'}</WdMenuItem>;
           }
 
           return (
@@ -130,7 +126,7 @@ export const useContextMenuSystemItems = ({
               infoTitle="Locked. Ping can be set only for one system."
               infoClass="pi-lock text-stone-500 mr-[12px]"
             >
-              <WdMenuItem disabled icon={iconClasses} className="!ml-[-2px]">
+              <WdMenuItem disabled icon={iconClasses}>
                 {!hasPing ? 'Ping: RALLY' : 'Cancel: RALLY'}
               </WdMenuItem>
             </MenuItemWithInfo>

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

@@ -8,15 +8,3 @@
     }
   }
 }
-
-.ContextMenu {
-  width: max-content;
-  min-width: unset;
-
-  :global {
-    .p-submenu-list {
-      width: max-content;
-      min-width: unset !important;
-    }
-  }
-}

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

@@ -1,23 +1,21 @@
-import React, { RefObject, useCallback, useMemo } from 'react';
+import React, { RefObject, useMemo } from 'react';
 import { ContextMenu } from 'primereact/contextmenu';
 import { PrimeIcons } from 'primereact/api';
 import { MenuItem } from 'primereact/menuitem';
-import { CharacterTypeRaw, SolarSystemRawType, SolarSystemStaticInfoRaw } from '@/hooks/Mapper/types';
+import { SolarSystemRawType, SolarSystemStaticInfoRaw } from '@/hooks/Mapper/types';
 import classes from './ContextMenuSystemInfo.module.scss';
 import { getSystemById } from '@/hooks/Mapper/helpers';
 import { useWaypointMenu } from '@/hooks/Mapper/components/contexts/hooks';
 import { WaypointSetContextHandler } from '@/hooks/Mapper/components/contexts/types.ts';
 import { FastSystemActions } from '@/hooks/Mapper/components/contexts/components';
 import { useJumpPlannerMenu } from '@/hooks/Mapper/components/contexts/hooks';
-import { Route, RouteStationSummary } from '@/hooks/Mapper/types/routes.ts';
+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';
-import { useRouteProvider } from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesProvider.tsx';
-import { useGetOwnOnlineCharacters } from '@/hooks/Mapper/components/hooks/useGetOwnOnlineCharacters.ts';
-import { sortStationsByDistance } from './sortStationsByDistance.ts';
 
 export interface ContextMenuSystemInfoProps {
   systemStatics: Map<number, SolarSystemStaticInfoRaw>;
+  hubs: string[];
   contextMenuRef: RefObject<ContextMenu>;
   systemId: string | undefined;
   systemIdFrom?: string | undefined;
@@ -39,106 +37,11 @@ export const ContextMenuSystemInfo: React.FC<ContextMenuSystemInfoProps> = ({
   onWaypointSet,
   systemId,
   systemIdFrom,
+  hubs,
   routes,
 }) => {
   const getWaypointMenu = useWaypointMenu(onWaypointSet);
   const getJumpPlannerMenu = useJumpPlannerMenu(systems, systemIdFrom);
-  const { toggleHubCommand, hubs } = useRouteProvider();
-  const getOwnOnlineCharacters = useGetOwnOnlineCharacters();
-
-  const getStationWaypointItems = useCallback(
-    (destinationId: string, chars: CharacterTypeRaw[]): MenuItem[] => [
-      {
-        label: 'Set Destination',
-        icon: PrimeIcons.SEND,
-        command: () => {
-          onWaypointSet({
-            fromBeginning: true,
-            clearWay: true,
-            destination: destinationId,
-            charIds: chars.map(char => char.eve_id),
-          });
-        },
-      },
-      {
-        label: 'Add Waypoint',
-        icon: PrimeIcons.DIRECTIONS_ALT,
-        command: () => {
-          onWaypointSet({
-            fromBeginning: false,
-            clearWay: false,
-            destination: destinationId,
-            charIds: chars.map(char => char.eve_id),
-          });
-        },
-      },
-      {
-        label: 'Add Waypoint Front',
-        icon: PrimeIcons.DIRECTIONS,
-        command: () => {
-          onWaypointSet({
-            fromBeginning: true,
-            clearWay: false,
-            destination: destinationId,
-            charIds: chars.map(char => char.eve_id),
-          });
-        },
-      },
-    ],
-    [onWaypointSet],
-  );
-
-  const getStationsMenu = useCallback(
-    (stations: RouteStationSummary[]) => {
-      const chars = getOwnOnlineCharacters().filter(x => x.online);
-      const sortedStations = sortStationsByDistance(stations);
-
-      return [
-        {
-          label: 'Stations',
-          icon: PrimeIcons.MAP_MARKER,
-          items: sortedStations.map(station => {
-            const destinationId = station.station_id.toString();
-            const specialClass = station.special ? '[&_.p-menuitem-text]:text-orange-400' : '';
-
-            if (chars.length === 0) {
-              return {
-                label: station.station_name,
-                className: specialClass || undefined,
-                items: [{ label: 'No online characters', disabled: true }],
-              };
-            }
-
-            if (chars.length === 1) {
-              return {
-                label: station.station_name,
-                className: specialClass || undefined,
-                items: getStationWaypointItems(destinationId, chars.slice(0, 1)),
-              };
-            }
-
-            return {
-              label: station.station_name,
-              className: `${specialClass} w-[500px]`.trim(),
-              items: [
-                {
-                  label: 'All',
-                  icon: PrimeIcons.USERS,
-                  items: getStationWaypointItems(destinationId, chars),
-                },
-                ...chars.map(char => ({
-                  label: char.name,
-                  icon: PrimeIcons.USER,
-                  items: getStationWaypointItems(destinationId, [char]),
-                })),
-              ],
-            };
-          }),
-        },
-      ];
-    },
-    [getOwnOnlineCharacters, getStationWaypointItems],
-  );
 
   const items: MenuItem[] = useMemo(() => {
     const system = systemId ? systemStatics.get(parseInt(systemId)) : undefined;
@@ -147,10 +50,6 @@ export const ContextMenuSystemInfo: React.FC<ContextMenuSystemInfoProps> = ({
     if (!systemId || !system) {
       return [];
     }
-
-    const route = routes.find(x => x.destination?.toString() === systemId);
-    const stationItems = route?.stations?.length ? getStationsMenu(route.stations) : [];
-
     return [
       {
         className: classes.FastActions,
@@ -170,20 +69,15 @@ export const ContextMenuSystemInfo: React.FC<ContextMenuSystemInfoProps> = ({
       { separator: true },
       ...getJumpPlannerMenu(system, routes),
       ...getWaypointMenu(systemId, system.system_class),
-      ...stationItems,
-      ...(toggleHubCommand
-        ? [
-            {
-              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]" />
-              ),
-              command: onHubToggle,
-            },
-          ]
-        : []),
+      {
+        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]" />
+        ),
+        command: onHubToggle,
+      },
       ...(!systemOnMap
         ? [
             {
@@ -200,18 +94,15 @@ export const ContextMenuSystemInfo: React.FC<ContextMenuSystemInfoProps> = ({
     systems,
     getJumpPlannerMenu,
     getWaypointMenu,
-    getStationsMenu,
     hubs,
     onHubToggle,
     onAddSystem,
     onOpenSettings,
-    toggleHubCommand,
-    routes,
   ]);
 
   return (
     <>
-      <ContextMenu className={classes.ContextMenu} model={items} ref={contextMenuRef} breakpoint="767px" />
+      <ContextMenu model={items} ref={contextMenuRef} breakpoint="767px" />
     </>
   );
 };

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

@@ -1,90 +0,0 @@
-import { RouteStationSummary } from '@/hooks/Mapper/types/routes.ts';
-
-const ROMAN_VALUES: Record<string, number> = {
-  I: 1,
-  V: 5,
-  X: 10,
-  L: 50,
-  C: 100,
-  D: 500,
-  M: 1000,
-};
-
-const MAX_DISTANCE = Number.MAX_SAFE_INTEGER;
-
-const romanToInt = (value: string): number | null => {
-  const chars = value.toUpperCase().split('');
-
-  if (chars.length === 0 || chars.some(char => ROMAN_VALUES[char] === undefined)) {
-    return null;
-  }
-
-  let total = 0;
-  let prev = 0;
-
-  for (let i = chars.length - 1; i >= 0; i--) {
-    const current = ROMAN_VALUES[chars[i]];
-    if (current < prev) {
-      total -= current;
-    } else {
-      total += current;
-      prev = current;
-    }
-  }
-
-  return total;
-};
-
-const parseOrbitIndex = (value: string | undefined): number | null => {
-  if (!value) {
-    return null;
-  }
-
-  const trimmed = value.trim();
-  const asInt = Number.parseInt(trimmed, 10);
-
-  if (!Number.isNaN(asInt) && `${asInt}` === trimmed) {
-    return asInt;
-  }
-
-  return romanToInt(trimmed);
-};
-
-const extractPlanetOrbit = (name: string): number | null => {
-  const firstPart = name.split(' - ')[0] ?? '';
-  const match = firstPart.match(/([IVXLCDM]+|\d+)(?:\s*\([^)]*\))?$/i);
-  return parseOrbitIndex(match?.[1]);
-};
-
-const extractMoonOrbit = (name: string): number | null => {
-  const match = name.match(/\bMoon\s+([IVXLCDM]+|\d+)\b/i);
-  return parseOrbitIndex(match?.[1]);
-};
-
-const stationSortKey = (station: RouteStationSummary): [number, number, string, number] => {
-  return [
-    extractPlanetOrbit(station.station_name) ?? MAX_DISTANCE,
-    // If there is no moon in the station name, treat it as closer than moon orbits.
-    extractMoonOrbit(station.station_name) ?? 0,
-    station.station_name.toLowerCase(),
-    station.station_id,
-  ];
-};
-
-export const sortStationsByDistance = (stations: RouteStationSummary[]): RouteStationSummary[] => {
-  return [...stations].sort((a, b) => {
-    const aKey = stationSortKey(a);
-    const bKey = stationSortKey(b);
-
-    for (let i = 0; i < aKey.length; i++) {
-      if (aKey[i] < bKey[i]) {
-        return -1;
-      }
-      if (aKey[i] > bKey[i]) {
-        return 1;
-      }
-    }
-
-    return 0;
-  });
-};

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

@@ -38,7 +38,7 @@ export const useContextMenuSystemInfoHandlers = () => {
       return;
     }
 
-    ref.current.toggleHubCommand?.(system);
+    ref.current.toggleHubCommand(system);
     setSystem(undefined);
   }, []);
 

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

@@ -2,60 +2,25 @@ import React, { RefObject, useMemo } from 'react';
 import { ContextMenu } from 'primereact/contextmenu';
 import { PrimeIcons } from 'primereact/api';
 import { MenuItem } from 'primereact/menuitem';
-import { checkPermissions } from '@/hooks/Mapper/components/map/helpers';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { MenuItemWithInfo, WdMenuItem } from '@/hooks/Mapper/components/ui-kit';
-import clsx from 'clsx';
 
 export interface ContextMenuSystemMultipleProps {
   contextMenuRef: RefObject<ContextMenu>;
   onDeleteSystems(): void;
-  onCopySystems(): void;
 }
 
 export const ContextMenuSystemMultiple: React.FC<ContextMenuSystemMultipleProps> = ({
   contextMenuRef,
   onDeleteSystems,
-  onCopySystems,
 }) => {
-  const {
-    data: { options, userPermissions },
-  } = useMapRootState();
-
   const items: MenuItem[] = useMemo(() => {
-    const allowCopy = checkPermissions(userPermissions, options.allowed_copy_for);
     return [
       {
         label: 'Delete',
-        icon: clsx(PrimeIcons.TRASH, 'text-red-400'),
+        icon: PrimeIcons.TRASH,
         command: onDeleteSystems,
       },
-      { separator: true },
-      {
-        label: 'Copy',
-        icon: PrimeIcons.COPY,
-        command: onCopySystems,
-        disabled: !allowCopy,
-        template: () => {
-          if (allowCopy) {
-            return <WdMenuItem icon="pi pi-copy">Copy</WdMenuItem>;
-          }
-
-          return (
-            <MenuItemWithInfo
-              infoTitle="Action is blocked because you don’t have permission to Copy."
-              infoClass={clsx(PrimeIcons.QUESTION_CIRCLE, 'text-stone-500 mr-[12px]')}
-              tooltipWrapperClassName="flex"
-            >
-              <WdMenuItem disabled icon="pi pi-copy">
-                Copy
-              </WdMenuItem>
-            </MenuItemWithInfo>
-          );
-        },
-      },
     ];
-  }, [onCopySystems, onDeleteSystems, options, userPermissions]);
+  }, [onDeleteSystems]);
 
   return (
     <>

assets/js/hooks/Mapper/components/contexts/ContextMenuSystemMultiple/useContextMenuSystemMultipleHandlers.ts

@@ -1,81 +1,40 @@
 import { Node } from 'reactflow';
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { ContextMenu } from 'primereact/contextmenu';
 import { SolarSystemRawType } from '@/hooks/Mapper/types';
 import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
 import { NodeSelectionMouseHandler } from '@/hooks/Mapper/components/contexts/types.ts';
 import { useDeleteSystems } from '@/hooks/Mapper/components/contexts/hooks';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { encodeJsonToUriBase64 } from '@/hooks/Mapper/utils';
-import { useToast } from '@/hooks/Mapper/ToastProvider.tsx';
 
 export const useContextMenuSystemMultipleHandlers = () => {
-  const {
-    data: { pings, connections },
-  } = useMapRootState();
-
-  const { show } = useToast();
-
   const contextMenuRef = useRef<ContextMenu | null>(null);
   const [systems, setSystems] = useState<Node<SolarSystemRawType>[]>();
 
   const { deleteSystems } = useDeleteSystems();
-  const ping = useMemo(() => (pings.length === 1 ? pings[0] : undefined), [pings]);
-  const refVars = useRef({ systems, ping, connections, deleteSystems });
-  refVars.current = { systems, ping, connections, deleteSystems };
 
-  const handleSystemMultipleContext = useCallback<NodeSelectionMouseHandler>((ev, systems_) => {
+  const handleSystemMultipleContext: NodeSelectionMouseHandler = (ev, systems_) => {
     setSystems(systems_);
     ev.preventDefault();
     ctxManager.next('ctxSysMult', contextMenuRef.current);
     contextMenuRef.current?.show(ev);
-  }, []);
+  };
 
   const onDeleteSystems = useCallback(() => {
-    const { systems, ping, deleteSystems } = refVars.current;
-
     if (!systems) {
       return;
     }
 
-    const sysToDel = systems
-      .filter(x => !x.data.locked)
-      .filter(x => x.id !== ping?.solar_system_id)
-      .map(x => x.id);
-
+    const sysToDel = systems.filter(x => !x.data.locked).map(x => x.id);
     if (sysToDel.length === 0) {
       return;
     }
 
     deleteSystems(sysToDel);
-  }, []);
-
-  const onCopySystems = useCallback(async () => {
-    const { systems, connections } = refVars.current;
-    if (!systems) {
-      return;
-    }
-
-    const connectionToCopy = connections.filter(
-      c => systems.filter(s => [c.target, c.source].includes(s.id)).length == 2,
-    );
-
-    await navigator.clipboard.writeText(
-      encodeJsonToUriBase64({ systems: systems.map(x => x.data), connections: connectionToCopy }),
-    );
-
-    show({
-      severity: 'success',
-      summary: 'Copied to clipboard',
-      detail: `Successfully copied to clipboard - [${systems.length}] systems and [${connectionToCopy.length}] connections`,
-      life: 3000,
-    });
-  }, [show]);
+  }, [deleteSystems, systems]);
 
   return {
     handleSystemMultipleContext,
     contextMenuRef,
     onDeleteSystems,
-    onCopySystems,
   };
 };

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

@@ -1,10 +1,10 @@
+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 { useCallback, useRef } from 'react';
 
+import classes from './FastSystemActions.module.scss';
 import clsx from 'clsx';
 import { PrimeIcons } from 'primereact/api';
-import classes from './FastSystemActions.module.scss';
 
 export interface FastSystemActionsProps {
   systemId: string;
@@ -27,7 +27,7 @@ export const FastSystemActions = ({
   ref.current = { systemId, systemName, regionName, isWH };
 
   const handleOpenZKB = useCallback(
-    () => window.open(`https://zkillboard.com/system/${ref.current.systemId}/`, '_blank'),
+    () => window.open(`https://zkillboard.com/system/${ref.current.systemId}`, '_blank'),
     [],
   );
 

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

@@ -8,4 +8,6 @@ export type WaypointSetContextHandlerProps = {
   destination: string;
 };
 export type WaypointSetContextHandler = (props: WaypointSetContextHandlerProps) => void;
-export type NodeSelectionMouseHandler = (event: React.MouseEvent<Element, MouseEvent>, nodes: Node[]) => void;
+export type NodeSelectionMouseHandler =
+  | ((event: React.MouseEvent<Element, MouseEvent>, nodes: Node[]) => void)
+  | undefined;

assets/js/hooks/Mapper/components/helpers/parseMapUserSettings.ts

@@ -1,6 +1,6 @@
-import { MapUserSettings, SettingsWrapper } from '@/hooks/Mapper/mapRootProvider/types.ts';
+import { MapUserSettings, SettingsWithVersion } from '@/hooks/Mapper/mapRootProvider/types.ts';
 
-export const REQUIRED_KEYS = [
+const REQUIRED_KEYS = [
   'widgets',
   'interface',
   'onTheMap',
@@ -19,8 +19,11 @@ export class MapUserSettingsParseError extends Error {
   }
 }
 
-/** Minimal check that an object matches SettingsWrapper<*> */
-const isSettings = (v: unknown): v is SettingsWrapper<unknown> => typeof v === 'object' && v !== null;
+const isNumber = (v: unknown): v is number => typeof v === 'number' && !Number.isNaN(v);
+
+/** Minimal check that an object matches SettingsWithVersion<*> */
+const isSettingsWithVersion = (v: unknown): v is SettingsWithVersion<unknown> =>
+  typeof v === 'object' && v !== null && isNumber((v as any).version) && 'settings' in (v as any);
 
 /** Ensure every required key is present */
 const hasAllRequiredKeys = (v: unknown): v is Record<RequiredKeys, unknown> =>
@@ -49,8 +52,8 @@ export const parseMapUserSettings = (json: unknown): MapUserSettings => {
   }
 
   for (const key of REQUIRED_KEYS) {
-    if (!isSettings((data as any)[key])) {
-      throw new MapUserSettingsParseError(`"${key}" must match SettingsWrapper<T>`);
+    if (!isSettingsWithVersion((data as any)[key])) {
+      throw new MapUserSettingsParseError(`"${key}" must match SettingsWithVersion<T>`);
     }
   }
 

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

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

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

@@ -1,32 +0,0 @@
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { useEffect, useState } from 'react';
-
-export const useDetectSettingsChanged = () => {
-  const {
-    storedSettings: {
-      interfaceSettings,
-      settingsRoutes,
-      settingsRoutesBy,
-      settingsLocal,
-      settingsSignatures,
-      settingsOnTheMap,
-      settingsKills,
-    },
-  } = useMapRootState();
-  const [counter, setCounter] = useState(0);
-
-  useEffect(
-    () => setCounter(x => x + 1),
-    [
-      interfaceSettings,
-      settingsRoutes,
-      settingsRoutesBy,
-      settingsLocal,
-      settingsSignatures,
-      settingsOnTheMap,
-      settingsKills,
-    ],
-  );
-
-  return counter;
-};

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

@@ -1,26 +0,0 @@
-import { useMemo } from 'react';
-import { CharacterTypeRaw } from '@/hooks/Mapper/types';
-
-export type UseLocalCounterProps = {
-  charactersInSystem: Array<CharacterTypeRaw>;
-  userCharacters: string[];
-};
-
-export const getLocalCharacters = ({ charactersInSystem, userCharacters }: UseLocalCounterProps) => {
-  return charactersInSystem
-    .map(char => ({
-      ...char,
-      compact: true,
-      isOwn: userCharacters.includes(char.eve_id),
-    }))
-    .sort((a, b) => a.name.localeCompare(b.name));
-};
-
-export const useLocalCounter = ({ charactersInSystem, userCharacters }: UseLocalCounterProps) => {
-  const localCounterCharacters = useMemo(
-    () => getLocalCharacters({ charactersInSystem, userCharacters }),
-    [charactersInSystem, userCharacters],
-  );
-
-  return { localCounterCharacters };
-};

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

@@ -1,10 +1,4 @@
-import { NodeSelectionMouseHandler } from '@/hooks/Mapper/components/contexts/types.ts';
-import { PingData, SolarSystemConnection, SolarSystemRawType } from '@/hooks/Mapper/types';
-import { MapHandlers, OutCommand, OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers.ts';
-import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
-import type { PanelPosition } from '@reactflow/core';
-import clsx from 'clsx';
-import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect, useMemo, useRef } from 'react';
+import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect, useMemo } from 'react';
 import ReactFlow, {
   Background,
   Edge,
@@ -22,6 +16,8 @@ import ReactFlow, {
 import 'reactflow/dist/style.css';
 import classes from './Map.module.scss';
 import { MapProvider, useMapState } from './MapProvider';
+import { useEdgesState, useMapHandlers, useNodesState, useUpdateNodes } from './hooks';
+import { MapHandlers, OutCommand, OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers.ts';
 import {
   ContextMenuConnection,
   ContextMenuRoot,
@@ -30,11 +26,26 @@ import {
   useContextMenuRootHandlers,
 } from './components';
 import { getBehaviorForTheme } from './helpers/getThemeBehavior';
-import { useEdgesState, useMapHandlers, useNodesState, useUpdateNodes } from './hooks';
+import { OnMapAddSystemCallback, OnMapSelectionChange } from './map.types';
+import { SESSION_KEY } from '@/hooks/Mapper/constants.ts';
+import { PingData, 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 { MapViewport, OnMapAddSystemCallback, OnMapSelectionChange } from './map.types';
-import type { Viewport } from '@reactflow/core/dist/esm/types';
-import { usePrevious } from 'primereact/hooks';
+import type { PanelPosition } from '@reactflow/core';
+
+const DEFAULT_VIEW_PORT = { zoom: 1, x: 0, y: 0 };
+
+const getViewPortFromStore = () => {
+  const restored = localStorage.getItem(SESSION_KEY.viewPort);
+
+  if (!restored) {
+    return { ...DEFAULT_VIEW_PORT };
+  }
+
+  return JSON.parse(restored);
+};
 
 const initialNodes: Node<SolarSystemRawType>[] = [
   // {
@@ -77,7 +88,6 @@ interface MapCompProps {
   onConnectionInfoClick?(e: SolarSystemConnection): void;
   onAddSystem?: OnMapAddSystemCallback;
   onSelectionContextMenu?: NodeSelectionMouseHandler;
-  onChangeViewport?: (viewport: MapViewport) => void;
   minimapClasses?: string;
   isShowMinimap?: boolean;
   onSystemContextMenu: (event: MouseEvent<Element>, systemId: string) => void;
@@ -89,7 +99,6 @@ interface MapCompProps {
   pings: PingData[];
   minimapPlacement?: PanelPosition;
   localShowShipName?: boolean;
-  defaultViewport?: Viewport;
 }
 
 const MapComp = ({
@@ -110,25 +119,19 @@ const MapComp = ({
   pings,
   minimapPlacement = 'bottom-right',
   localShowShipName = false,
-  onChangeViewport,
-  defaultViewport,
 }: MapCompProps) => {
-  const { getNodes, setViewport } = useReactFlow();
+  const { getNodes } = useReactFlow();
   const [nodes, , onNodesChange] = useNodesState<Node<SolarSystemRawType>>(initialNodes);
   const [edges, , onEdgesChange] = useEdgesState<Edge<SolarSystemConnection>>(initialEdges);
 
   useMapHandlers(refn, onSelectionChange);
   useUpdateNodes(nodes);
-
-  const { handleRootContext, ...rootCtxProps } = useContextMenuRootHandlers({ onAddSystem, onCommand });
+  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 refVars = useRef({ onChangeViewport });
-  refVars.current = { onChangeViewport };
-
   const nodeTypes = useMemo(() => {
     return {
       custom: nodeComponent,
@@ -184,10 +187,9 @@ const MapComp = ({
     [onSelectionChange],
   );
 
-  const handleMoveEnd: OnMoveEnd = useCallback((_, viewport) => {
-    // @ts-ignore
-    refVars.current.onChangeViewport?.(viewport);
-  }, []);
+  const handleMoveEnd: OnMoveEnd = (_, viewport) => {
+    localStorage.setItem(SESSION_KEY.viewPort, JSON.stringify(viewport));
+  };
 
   const handleNodesChange = useCallback(
     (changes: NodeChange[]) => {
@@ -216,19 +218,6 @@ const MapComp = ({
     }));
   }, [showKSpaceBG, isThickConnections, pings, update, localShowShipName]);
 
-  const prevViewport = usePrevious(defaultViewport);
-  useEffect(() => {
-    if (defaultViewport == null) {
-      return;
-    }
-
-    if (prevViewport == null) {
-      return;
-    }
-
-    setViewport(defaultViewport);
-  }, [defaultViewport, prevViewport, setViewport]);
-
   return (
     <>
       <div
@@ -243,7 +232,7 @@ const MapComp = ({
           onConnect={onConnect}
           // TODO we need save into session all of this
           //      and on any action do either
-          defaultViewport={defaultViewport}
+          defaultViewport={getViewPortFromStore()}
           edgeTypes={edgeTypes}
           nodeTypes={nodeTypes}
           connectionMode={connectionMode}

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

@@ -11,7 +11,6 @@ export type MapData = MapUnionTypes & {
   isThickConnections: boolean;
   linkedSigEveId: string;
   localShowShipName: boolean;
-  systemHighlighted: string | undefined;
 };
 
 interface MapProviderProps {
@@ -45,7 +44,6 @@ const INITIAL_DATA: MapData = {
   userHubs: [],
   pings: [],
   localShowShipName: false,
-  systemHighlighted: undefined,
 };
 
 export interface MapContextProps {

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

@@ -1,4 +1,4 @@
-@use '@/hooks/Mapper/components/map/styles/eve-common-variables';
+@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
 
 .ConnectionTimeEOL {
   background-image: linear-gradient(207deg, transparent, var(--conn-time-eol));
@@ -8,10 +8,6 @@
   background-image: linear-gradient(207deg, transparent, var(--conn-frigate));
 }
 
-.ConnectionBridge {
-  background-image: linear-gradient(207deg, transparent, var(--conn-bridge));
-}
-
 .ConnectionSave {
   background-image: linear-gradient(207deg, transparent, var(--conn-save));
 }
@@ -19,14 +15,3 @@
 .SelectedItem {
   background-color: var(--selected-item-bg);
 }
-
-.FastActions {
-  :global {
-    .p-menuitem-content {
-      background-color: initial !important;
-    }
-    .p-menuitem-content:hover {
-      background-color: initial !important;
-    }
-  }
-}

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

@@ -1,24 +1,26 @@
+import React, { RefObject, useMemo } from 'react';
+import { ContextMenu } from 'primereact/contextmenu';
+import { PrimeIcons } from 'primereact/api';
+import { MenuItem } from 'primereact/menuitem';
 import { ConnectionType, MassState, ShipSizeStatus, SolarSystemConnection, TimeStatus } from '@/hooks/Mapper/types';
 import clsx from 'clsx';
-import { PrimeIcons } from 'primereact/api';
-import { ContextMenu } from 'primereact/contextmenu';
-import { MenuItem } from 'primereact/menuitem';
-import React, { RefObject, useMemo } from 'react';
-import { Edge } from 'reactflow';
-import { LifetimeActionsWrapper } from '@/hooks/Mapper/components/map/components/ContextMenuConnection/LifetimeActionsWrapper.tsx';
-import { MassStatusActionsWrapper } from '@/hooks/Mapper/components/map/components/ContextMenuConnection/MassStatusActionsWrapper.tsx';
-import { ShipSizeActionsWrapper } from '@/hooks/Mapper/components/map/components/ContextMenuConnection/ShipSizeActionsWrapper.tsx';
 import classes from './ContextMenuConnection.module.scss';
-import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic.ts';
-import { isNullsecSpace } from '@/hooks/Mapper/components/map/helpers/isKnownSpace.ts';
+import {
+  MASS_STATE_NAMES,
+  MASS_STATE_NAMES_ORDER,
+  SHIP_SIZES_NAMES,
+  SHIP_SIZES_NAMES_ORDER,
+  SHIP_SIZES_NAMES_SHORT,
+  SHIP_SIZES_SIZE,
+} from '@/hooks/Mapper/components/map/constants.ts';
+import { Edge } from 'reactflow';
 
 export interface ContextMenuConnectionProps {
   contextMenuRef: RefObject<ContextMenu>;
   onDeleteConnection(): void;
-  onChangeTimeState(lifetime: TimeStatus): void;
+  onChangeTimeState(): void;
   onChangeMassState(state: MassState): void;
   onChangeShipSizeStatus(state: ShipSizeStatus): void;
-  onChangeType(type: ConnectionType): void;
   onToggleMassSave(isLocked: boolean): void;
   onHide(): void;
   edge?: Edge<SolarSystemConnection>;
@@ -30,7 +32,6 @@ export const ContextMenuConnection: React.FC<ContextMenuConnectionProps> = ({
   onChangeTimeState,
   onChangeMassState,
   onChangeShipSizeStatus,
-  onChangeType,
   onToggleMassSave,
   onHide,
   edge,
@@ -40,83 +41,74 @@ export const ContextMenuConnection: React.FC<ContextMenuConnectionProps> = ({
       return [];
     }
 
-    const sourceInfo = getSystemStaticInfo(edge.data?.source);
-    const targetInfo = getSystemStaticInfo(edge.data?.target);
-
-    const bothNullsec =
-      sourceInfo && targetInfo && isNullsecSpace(sourceInfo.system_class) && isNullsecSpace(targetInfo.system_class);
-
     const isFrigateSize = edge.data?.ship_size_type === ShipSizeStatus.small;
-
-    if (edge.data?.type === ConnectionType.bridge) {
-      return [
-        {
-          label: `Set as Wormhole`,
-          icon: 'pi hero-arrow-uturn-left',
-          command: () => onChangeType(ConnectionType.wormhole),
-        },
-        {
-          label: 'Disconnect',
-          icon: PrimeIcons.TRASH,
-          command: onDeleteConnection,
-        },
-      ];
-    }
-
-    if (edge.data?.type === ConnectionType.gate) {
-      return [
-        {
-          label: 'Disconnect',
-          icon: PrimeIcons.TRASH,
-          command: onDeleteConnection,
-        },
-      ];
-    }
+    const isWormhole = edge.data?.type !== ConnectionType.gate;
 
     return [
-      {
-        className: clsx(classes.FastActions, '!h-[54px]'),
-        template: () => {
-          return <LifetimeActionsWrapper lifetime={edge.data?.time_status} onChangeLifetime={onChangeTimeState} />;
-        },
-      },
-      ...(!isFrigateSize
+      ...(isWormhole
         ? [
             {
-              className: clsx(classes.FastActions, '!h-[54px]'),
-              template: () => {
-                return (
-                  <MassStatusActionsWrapper
-                    massStatus={edge.data?.mass_status}
-                    onChangeMassStatus={onChangeMassState}
-                  />
-                );
-              },
+              label: `EOL`,
+              className: clsx({
+                [classes.ConnectionTimeEOL]: edge.data?.time_status === TimeStatus.eol,
+              }),
+              icon: PrimeIcons.CLOCK,
+              command: onChangeTimeState,
             },
-          ]
-        : []),
-      {
-        className: clsx(classes.FastActions, '!h-[64px]'),
-        template: () => {
-          return (
-            <ShipSizeActionsWrapper shipSize={edge.data?.ship_size_type} onChangeShipSize={onChangeShipSizeStatus} />
-          );
-        },
-      },
-      {
-        label: `Save mass`,
-        className: clsx({
-          [classes.ConnectionSave]: edge.data?.locked,
-        }),
-        icon: PrimeIcons.LOCK,
-        command: () => onToggleMassSave(!edge.data?.locked),
-      },
-      ...(bothNullsec
-        ? [
             {
-              label: `Set as Bridge`,
-              icon: 'pi hero-forward',
-              command: () => onChangeType(ConnectionType.bridge),
+              label: `Frigate`,
+              className: clsx({
+                [classes.ConnectionFrigate]: isFrigateSize,
+              }),
+              icon: PrimeIcons.CLOUD,
+              command: () =>
+                onChangeShipSizeStatus(
+                  edge.data?.ship_size_type === ShipSizeStatus.small ? ShipSizeStatus.large : ShipSizeStatus.small,
+                ),
+            },
+            {
+              label: `Save mass`,
+              className: clsx({
+                [classes.ConnectionSave]: edge.data?.locked,
+              }),
+              icon: PrimeIcons.LOCK,
+              command: () => onToggleMassSave(!edge.data?.locked),
+            },
+            ...(!isFrigateSize
+              ? [
+                  {
+                    label: `Mass status`,
+                    icon: PrimeIcons.CHART_PIE,
+                    items: MASS_STATE_NAMES_ORDER.map(x => ({
+                      label: MASS_STATE_NAMES[x],
+                      className: clsx({
+                        [classes.SelectedItem]: edge.data?.mass_status === x,
+                      }),
+                      command: () => onChangeMassState(x),
+                    })),
+                  },
+                ]
+              : []),
+
+            {
+              label: `Ship Size`,
+              icon: PrimeIcons.CLOUD,
+              items: SHIP_SIZES_NAMES_ORDER.map(x => ({
+                label: (
+                  <div className="grid grid-cols-[20px_120px_1fr_40px] gap-2 items-center">
+                    <div className="text-[12px] font-bold text-stone-400">{SHIP_SIZES_NAMES_SHORT[x]}</div>
+                    <div>{SHIP_SIZES_NAMES[x]}</div>
+                    <div></div>
+                    <div className="flex justify-end whitespace-nowrap text-[12px] font-bold text-stone-500">
+                      {SHIP_SIZES_SIZE[x]} t.
+                    </div>
+                  </div>
+                ) as unknown as string, // TODO my lovely kostyl
+                className: clsx({
+                  [classes.SelectedItem]: edge.data?.ship_size_type === x,
+                }),
+                command: () => onChangeShipSizeStatus(x),
+              })),
             },
           ]
         : []),
@@ -126,19 +118,11 @@ export const ContextMenuConnection: React.FC<ContextMenuConnectionProps> = ({
         command: onDeleteConnection,
       },
     ];
-  }, [
-    edge,
-    onChangeTimeState,
-    onDeleteConnection,
-    onChangeType,
-    onChangeShipSizeStatus,
-    onToggleMassSave,
-    onChangeMassState,
-  ]);
+  }, [edge, onChangeTimeState, onDeleteConnection, onChangeShipSizeStatus, onToggleMassSave, onChangeMassState]);
 
   return (
     <>
-      <ContextMenu model={items} ref={contextMenuRef} onHide={onHide} breakpoint="767px" className="!w-[250px]" />
+      <ContextMenu model={items} ref={contextMenuRef} onHide={onHide} breakpoint="767px" />
     </>
   );
 };

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

@@ -1,12 +0,0 @@
-import { LayoutEventBlocker } from '@/hooks/Mapper/components/ui-kit';
-import { WdLifetimeSelector, WdLifetimeSelectorProps } from '@/hooks/Mapper/components/ui-kit/WdLifetimeSelector.tsx';
-
-export const LifetimeActionsWrapper = (props: WdLifetimeSelectorProps) => {
-  return (
-    <LayoutEventBlocker className="flex flex-col gap-1 w-[100%] h-full px-2 pt-[4px]">
-      <div className="text-[12px] text-stone-500 font-semibold">Life time:</div>
-
-      <WdLifetimeSelector {...props} />
-    </LayoutEventBlocker>
-  );
-};

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

@@ -1,15 +0,0 @@
-import { LayoutEventBlocker } from '@/hooks/Mapper/components/ui-kit';
-import {
-  WdMassStatusSelector,
-  WdMassStatusSelectorProps,
-} from '@/hooks/Mapper/components/ui-kit/WdMassStatusSelector.tsx';
-
-export const MassStatusActionsWrapper = (props: WdMassStatusSelectorProps) => {
-  return (
-    <LayoutEventBlocker className="flex flex-col gap-1 w-[100%] h-full px-2 pt-[4px]">
-      <div className="text-[12px] text-stone-500 font-semibold">Mass status:</div>
-
-      <WdMassStatusSelector {...props} />
-    </LayoutEventBlocker>
-  );
-};

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

@@ -1,12 +0,0 @@
-import { LayoutEventBlocker } from '@/hooks/Mapper/components/ui-kit';
-import { WdShipSizeSelector, WdShipSizeSelectorProps } from '@/hooks/Mapper/components/ui-kit/WdShipSizeSelector.tsx';
-
-export const ShipSizeActionsWrapper = (props: WdShipSizeSelectorProps) => {
-  return (
-    <LayoutEventBlocker className="flex flex-col gap-1 w-[100%] h-full px-2 pt-[4px]">
-      <div className="text-[12px] text-stone-500 font-semibold">Ship size:</div>
-
-      <WdShipSizeSelector {...props} />
-    </LayoutEventBlocker>
-  );
-};

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

@@ -30,7 +30,7 @@ export const useContextMenuConnectionHandlers = () => {
     setEdge(undefined);
   };
 
-  const onChangeTimeState = (lifetime: TimeStatus) => {
+  const onChangeTimeState = () => {
     if (!edge || !edge.data) {
       return;
     }
@@ -40,7 +40,7 @@ export const useContextMenuConnectionHandlers = () => {
       data: {
         source: edge.source,
         target: edge.target,
-        value: lifetime,
+        value: edge.data.time_status === TimeStatus.default ? TimeStatus.eol : TimeStatus.default,
       },
     });
     setEdge(undefined);

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

@@ -2,70 +2,22 @@ import React, { RefObject, useMemo } from 'react';
 import { ContextMenu } from 'primereact/contextmenu';
 import { PrimeIcons } from 'primereact/api';
 import { MenuItem } from 'primereact/menuitem';
-import { PasteSystemsAndConnections } from '@/hooks/Mapper/components/map/components';
-import { useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
-import { checkPermissions } from '@/hooks/Mapper/components/map/helpers';
-import { MenuItemWithInfo, WdMenuItem } from '@/hooks/Mapper/components/ui-kit';
-import clsx from 'clsx';
 
 export interface ContextMenuRootProps {
   contextMenuRef: RefObject<ContextMenu>;
-  pasteSystemsAndConnections: PasteSystemsAndConnections | undefined;
   onAddSystem(): void;
-  onPasteSystemsAnsConnections(): void;
 }
 
-export const ContextMenuRoot: React.FC<ContextMenuRootProps> = ({
-  contextMenuRef,
-  onAddSystem,
-  onPasteSystemsAnsConnections,
-  pasteSystemsAndConnections,
-}) => {
-  const {
-    data: { options, userPermissions },
-  } = useMapState();
-
+export const ContextMenuRoot: React.FC<ContextMenuRootProps> = ({ contextMenuRef, onAddSystem }) => {
   const items: MenuItem[] = useMemo(() => {
-    const allowPaste = checkPermissions(userPermissions, options.allowed_paste_for);
-
     return [
       {
         label: 'Add System',
         icon: PrimeIcons.PLUS,
         command: onAddSystem,
       },
-      ...(pasteSystemsAndConnections != null
-        ? [
-            {
-              icon: 'pi pi-clipboard',
-              disabled: !allowPaste,
-              command: onPasteSystemsAnsConnections,
-              template: () => {
-                if (allowPaste) {
-                  return (
-                    <WdMenuItem icon="pi pi-clipboard">
-                      Paste
-                    </WdMenuItem>
-                  );
-                }
-
-                return (
-                  <MenuItemWithInfo
-                    infoTitle="Action is blocked because you don’t have permission to Paste."
-                    infoClass={clsx(PrimeIcons.QUESTION_CIRCLE, 'text-stone-500 mr-[12px]')}
-                    tooltipWrapperClassName="flex"
-                  >
-                    <WdMenuItem disabled icon="pi pi-clipboard">
-                      Paste
-                    </WdMenuItem>
-                  </MenuItemWithInfo>
-                );
-              },
-            },
-          ]
-        : []),
     ];
-  }, [userPermissions, options, onAddSystem, pasteSystemsAndConnections, onPasteSystemsAnsConnections]);
+  }, [onAddSystem]);
 
   return (
     <>

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

@@ -1,76 +1,36 @@
-import { OnMapAddSystemCallback } from '@/hooks/Mapper/components/map/map.types.ts';
-import { recenterSystemsByBounds } from '@/hooks/Mapper/helpers/recenterSystems.ts';
-import { OutCommand, OutCommandHandler, SolarSystemConnection, SolarSystemRawType } from '@/hooks/Mapper/types';
-import { decodeUriBase64ToJson } from '@/hooks/Mapper/utils';
-import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
-import { ContextMenu } from 'primereact/contextmenu';
-import React, { useCallback, useRef, useState } from 'react';
 import { useReactFlow, XYPosition } from 'reactflow';
-
-export type PasteSystemsAndConnections = {
-  systems: SolarSystemRawType[];
-  connections: SolarSystemConnection[];
-};
+import React, { useCallback, useRef, useState } from 'react';
+import { ContextMenu } from 'primereact/contextmenu';
+import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
+import { OnMapAddSystemCallback } from '@/hooks/Mapper/components/map/map.types.ts';
 
 type UseContextMenuRootHandlers = {
   onAddSystem?: OnMapAddSystemCallback;
-  onCommand?: OutCommandHandler;
 };
 
-export const useContextMenuRootHandlers = ({ onAddSystem, onCommand }: UseContextMenuRootHandlers = {}) => {
+export const useContextMenuRootHandlers = ({ onAddSystem }: UseContextMenuRootHandlers = {}) => {
   const rf = useReactFlow();
   const contextMenuRef = useRef<ContextMenu | null>(null);
   const [position, setPosition] = useState<XYPosition | null>(null);
-  const [pasteSystemsAndConnections, setPasteSystemsAndConnections] = useState<PasteSystemsAndConnections>();
 
-  const handleRootContext = async (e: React.MouseEvent<HTMLDivElement>) => {
+  const handleRootContext = (e: React.MouseEvent<HTMLDivElement>) => {
     setPosition(rf.project({ x: e.clientX, y: e.clientY }));
     e.preventDefault();
     ctxManager.next('ctxRoot', contextMenuRef.current);
     contextMenuRef.current?.show(e);
-
-    try {
-      const text = await navigator.clipboard.readText();
-      const result = decodeUriBase64ToJson(text);
-      setPasteSystemsAndConnections(result as PasteSystemsAndConnections);
-    } catch (err) {
-      setPasteSystemsAndConnections(undefined);
-      // do nothing
-    }
   };
 
-  const ref = useRef({ onAddSystem, position, pasteSystemsAndConnections, onCommand });
-  ref.current = { onAddSystem, position, pasteSystemsAndConnections, onCommand };
+  const ref = useRef({ onAddSystem, position });
+  ref.current = { onAddSystem, position };
 
   const onAddSystemCallback = useCallback(() => {
     ref.current.onAddSystem?.({ coordinates: position });
   }, [position]);
 
-  const onPasteSystemsAnsConnections = useCallback(async () => {
-    const { pasteSystemsAndConnections, onCommand, position } = ref.current;
-    if (!position || !onCommand || !pasteSystemsAndConnections) {
-      return;
-    }
-
-    const { systems } = recenterSystemsByBounds(pasteSystemsAndConnections.systems);
-
-    await onCommand({
-      type: OutCommand.manualPasteSystemsAndConnections,
-      data: {
-        systems: systems.map(({ position: srcPos, ...rest }) => ({
-          position: { x: Math.round(srcPos.x + position.x), y: Math.round(srcPos.y + position.y) },
-          ...rest,
-        })),
-        connections: pasteSystemsAndConnections.connections,
-      },
-    });
-  }, []);
-
   return {
     handleRootContext,
-    pasteSystemsAndConnections,
+
     contextMenuRef,
     onAddSystem: onAddSystemCallback,
-    onPasteSystemsAnsConnections,
   };
 };

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

@@ -56,8 +56,7 @@ export const KillsCounter = ({
       className={className}
       tooltipClassName="!px-0"
       size={size}
-      interactive
-      smallPaddings
+      interactive={true}
     >
       {children}
     </WdTooltipWrapper>

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

@@ -5,8 +5,8 @@
 }
 
 .hoverTarget {
-  padding: 2px;
-  margin: -2px;
+  padding: 0.5rem;
+  margin: -0.5rem;
   display: inline-block;
 }
 

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

@@ -13,19 +13,9 @@ interface LocalCounterProps {
   localCounterCharacters: Array<CharItemProps>;
   hasUserCharacters: boolean;
   showIcon?: boolean;
-  disableInteractive?: boolean;
-  className?: string;
-  contentClassName?: string;
 }
 
-export const LocalCounter = ({
-  className,
-  contentClassName,
-  localCounterCharacters,
-  hasUserCharacters,
-  showIcon = true,
-  disableInteractive,
-}: LocalCounterProps) => {
+export const LocalCounter = ({ localCounterCharacters, hasUserCharacters, showIcon = true }: LocalCounterProps) => {
   const {
     data: { localShowShipName },
   } = useMapState();
@@ -52,30 +42,16 @@ export const LocalCounter = ({
 
   return (
     <div
-      className={clsx(
-        classes.TooltipActive,
-        {
-          [classes.Pathfinder]: theme === AvailableThemes.pathfinder,
-        },
-        className,
-      )}
+      className={clsx(classes.TooltipActive, {
+        [classes.Pathfinder]: theme === AvailableThemes.pathfinder,
+      })}
     >
-      <WdTooltipWrapper
-        content={pilotTooltipContent}
-        position={TooltipPosition.right}
-        offset={0}
-        interactive={!disableInteractive}
-        smallPaddings
-      >
+      <WdTooltipWrapper content={pilotTooltipContent} position={TooltipPosition.right} offset={0} interactive={true}>
         <div className={clsx(classes.hoverTarget)}>
           <div
-            className={clsx(
-              classes.localCounter,
-              {
-                [classes.hasUserCharacters]: hasUserCharacters,
-              },
-              contentClassName,
-            )}
+            className={clsx(classes.localCounter, {
+              [classes.hasUserCharacters]: hasUserCharacters,
+            })}
           >
             {showIcon && <i className="pi pi-users" />}
             <span>{localCounterCharacters.length}</span>

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

@@ -1,20 +1,10 @@
-@use '@/hooks/Mapper/components/map/styles/eve-common-variables';
+@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
 
 .EdgePathBack {
   fill: none;
   stroke: #80a5c5;
   stroke-width: 3px;
 
-  &.time1 {
-    stroke: #f11ab2;
-    stroke-width: 4px;
-  }
-
-  &.time4 {
-    stroke: #a654e3;
-    stroke-width: 4px;
-  }
-
   &.TimeCrit {
     stroke: #f11ab2;
     stroke-width: 4px;
@@ -39,13 +29,6 @@
   &.Gate {
     stroke: #9aff40;
   }
-
-  &.Bridge {
-    stroke: #9aff40;
-
-    stroke-dasharray: 10 5;
-    stroke-linecap: round;
-  }
 }
 
 .EdgePathFront {

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

@@ -9,7 +9,6 @@ import { PrimeIcons } from 'primereact/api';
 import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
 import { useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
 import { SHIP_SIZES_DESCRIPTION, SHIP_SIZES_NAMES_SHORT } from '@/hooks/Mapper/components/map/constants.ts';
-import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
 
 const MAP_TRANSLATES: Record<string, string> = {
   [Position.Top]: 'translate(-48%, 0%)',
@@ -43,9 +42,7 @@ export const SHIP_SIZES_COLORS = {
 export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }: EdgeProps<SolarSystemConnection>) => {
   const sourceNode = useStore(useCallback(store => store.nodeInternals.get(source), [source]));
   const targetNode = useStore(useCallback(store => store.nodeInternals.get(target), [target]));
-  const isWormhole = data?.type === ConnectionType.wormhole;
-  const isGate = data?.type === ConnectionType.gate;
-  const isBridge = data?.type === ConnectionType.bridge;
+  const isWormhole = data?.type !== ConnectionType.gate;
 
   const {
     data: { isThickConnections },
@@ -58,7 +55,9 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
 
     const offset = isThickConnections ? MAP_OFFSETS_TICK[targetPos] : MAP_OFFSETS[targetPos];
 
-    const [edgePath, labelX, labelY] = getBezierPath({
+    const method = isWormhole ? getBezierPath : getBezierPath;
+
+    const [edgePath, labelX, labelY] = method({
       sourceX: sx - offset.x,
       sourceY: sy - offset.y,
       sourcePosition: sourcePos,
@@ -68,7 +67,7 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
     });
 
     return [edgePath, labelX, labelY, sx, sy, tx, ty, sourcePos, targetPos];
-  }, [isThickConnections, sourceNode, targetNode]);
+  }, [isThickConnections, sourceNode, targetNode, isWormhole]);
 
   if (!sourceNode || !targetNode || !data) {
     return null;
@@ -80,11 +79,9 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
         id={`back_${id}`}
         className={clsx(classes.EdgePathBack, {
           [classes.Tick]: isThickConnections,
-          [classes.time1]: isWormhole && data.time_status === TimeStatus._1h,
-          [classes.time4]: isWormhole && data.time_status === TimeStatus._4h,
+          [classes.TimeCrit]: isWormhole && data.time_status === TimeStatus.eol,
           [classes.Hovered]: hovered,
-          [classes.Gate]: isGate,
-          [classes.Bridge]: isBridge,
+          [classes.Gate]: !isWormhole,
         })}
         d={path}
         markerEnd={markerEnd}
@@ -98,8 +95,7 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
           [classes.MassVerge]: isWormhole && data.mass_status === MassState.verge,
           [classes.MassHalf]: isWormhole && data.mass_status === MassState.half,
           [classes.Frigate]: isWormhole && data.ship_size_type === ShipSizeStatus.small,
-          [classes.Gate]: isGate,
-          [classes.Bridge]: isBridge,
+          [classes.Gate]: !isWormhole,
         })}
         d={path}
         markerEnd={markerEnd}
@@ -151,19 +147,6 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
             </WdTooltipWrapper>
           )}
 
-          {isBridge && (
-            <WdTooltipWrapper
-              content="Ansiblex Jump Bridge"
-              position={TooltipPosition.top}
-              className={clsx(
-                classes.LinkLabel,
-                'pointer-events-auto bg-lime-300 rounded opacity-100 cursor-auto text-neutral-900',
-              )}
-            >
-              B
-            </WdTooltipWrapper>
-          )}
-
           {isWormhole && data.ship_size_type !== ShipSizeStatus.large && (
             <WdTooltipWrapper
               content={SHIP_SIZES_DESCRIPTION[data.ship_size_type]}

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

@@ -1,6 +1,13 @@
-@use "sass:color";
-@use '@/hooks/Mapper/components/map/styles/eve-common-variables';
-@use '@/hooks/Mapper/components/map/styles/solar-system-node' as v;
+@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
+
+$pastel-blue: #5a7d9a;
+$pastel-pink: rgb(30, 161, 255);
+$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 {
@@ -26,8 +33,8 @@
   background-color: var(--rf-node-bg-color, #202020) !important;
   color: var(--rf-text-color, #ffffff);
 
-  box-shadow: 0 0 5px rgba(v.$dark-bg, 0.5);
-  border: 1px solid color.adjust(v.$pastel-blue, $lightness: -10%);
+  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;
@@ -99,7 +106,7 @@
   }
 
   &.selected {
-    border-color: v.$pastel-pink;
+    border-color: $pastel-pink;
     box-shadow: 0 0 10px #9a1af1c2;
   }
 
@@ -113,11 +120,11 @@
       bottom: 0;
       z-index: -1;
 
-      border-color: v.$neon-color-1;
+      border-color: $neon-color-1;
       background: repeating-linear-gradient(
           45deg,
-          v.$neon-color-3 0px,
-          v.$neon-color-3 8px,
+          $neon-color-3 0px,
+          $neon-color-3 8px,
           transparent 8px,
           transparent 21px
       );
@@ -146,7 +153,7 @@
     border: 1px solid var(--eve-solar-system-status-color-lookingFor-dark15);
     background-image: linear-gradient(275deg, #45ff8f2f, #457fff2f);
     &.selected {
-      border-color: v.$pastel-pink;
+      border-color: $pastel-pink;
     }
   }
 
@@ -347,13 +354,13 @@
 .Handle {
   min-width: initial;
   min-height: initial;
-  border: 1px solid v.$pastel-blue;
+  border: 1px solid $pastel-blue;
   width: 5px;
   height: 5px;
   pointer-events: auto;
 
   &.selected {
-    border-color: v.$pastel-pink;
+    border-color: $pastel-pink;
   }
 
   &.HandleTop {

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

@@ -4,25 +4,23 @@ import { Handle, NodeProps, Position } from 'reactflow';
 import clsx from 'clsx';
 import classes from './SolarSystemNodeDefault.module.scss';
 import { PrimeIcons } from 'primereact/api';
-import { useNodeKillsCount, useSolarSystemNode } from '../../hooks';
+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 { UnsplashedSignatureColumn } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
+import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
 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';
 import { LocalCounter } from '@/hooks/Mapper/components/map/components/LocalCounter';
 import { KillsCounter } from '@/hooks/Mapper/components/map/components/KillsCounter';
-import { useLocalCounter } from '@/hooks/Mapper/components/hooks/useLocalCounter.ts';
 
 // let render = 0;
 export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>) => {
   const nodeVars = useSolarSystemNode(props);
-
   const { localCounterCharacters } = useLocalCounter(nodeVars);
   const { killsCount: localKillsCount, killsActivityType: localKillsActivityType } = useNodeKillsCount(
     nodeVars.solarSystemId,
@@ -141,26 +139,12 @@ export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>
 
               {nodeVars.isWormhole && !nodeVars.customName && <div />}
 
-              <div className="flex items-center gap-0.5 justify-end">
-                <div className={clsx('flex items-center gap-0.5')}>
+              <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)} />
                   )}
-                  {nodeVars.description != null && nodeVars.description !== '' && (
-                    <WdTooltipWrapper
-                      className="h-[15px] transform -translate-y-[6%]"
-                      position={TooltipPosition.top}
-                      content={`System have description`}
-                    >
-                      <i
-                        className={clsx(
-                          'pi hero-chat-bubble-bottom-center-text w-[10px] h-[10px]',
-                          'text-[8px] relative top-[1px]',
-                        )}
-                      />
-                    </WdTooltipWrapper>
-                  )}
                 </div>
 
                 <LocalCounter
@@ -177,35 +161,22 @@ export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>
         <>
           {nodeVars.unsplashedLeft.length > 0 && (
             <div className={classes.Unsplashed}>
-              <UnsplashedSignatureColumn
-                signatures={nodeVars.unsplashedLeft}
-                wormholesData={nodeVars.wormholesData}
-              />
+              {nodeVars.unsplashedLeft.map(sig => (
+                <UnsplashedSignature key={sig.eve_id} signature={sig} />
+              ))}
             </div>
           )}
 
           {nodeVars.unsplashedRight.length > 0 && (
             <div className={clsx(classes.Unsplashed, classes['Unsplashed--right'])}>
-              <UnsplashedSignatureColumn
-                signatures={nodeVars.unsplashedRight}
-                wormholesData={nodeVars.wormholesData}
-              />
+              {nodeVars.unsplashedRight.map(sig => (
+                <UnsplashedSignature key={sig.eve_id} signature={sig} />
+              ))}
             </div>
           )}
         </>
       )}
 
-      {nodeVars.systemHighlighted === nodeVars.solarSystemId && (
-        <div
-          className={clsx('absolute top-[-4px] left-[-4px]', 'w-[calc(100%+8px)] h-[calc(100%+8px)]', 'animate-pulse')}
-        >
-          <div className="absolute left-0 top-0 w-3 h-2 border-t-2 border-l-2 border-sky-300"></div>
-          <div className="absolute right-0 top-0 w-3 h-2 border-t-2 border-r-2 border-sky-300"></div>
-          <div className="absolute left-0 bottom-0 w-3 h-2 border-b-2 border-l-2 border-sky-300"></div>
-          <div className="absolute right-0 bottom-0 w-3 h-2 border-b-2 border-r-2 border-sky-300"></div>
-        </div>
-      )}
-
       <div className={classes.Handlers}>
         <Handle
           type="source"

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

@@ -1,4 +1,4 @@
-@use './SolarSystemNodeDefault.module.scss';
+@import './SolarSystemNodeDefault.module.scss';
 
 /* ---------------------------------------------
    Only override what's different from the base

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

@@ -4,27 +4,24 @@ import { Handle, NodeProps, Position } from 'reactflow';
 import clsx from 'clsx';
 import classes from './SolarSystemNodeTheme.module.scss';
 import { PrimeIcons } from 'primereact/api';
-import { useNodeKillsCount, useSolarSystemNode } from '../../hooks';
+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 { UnsplashedSignatureColumn } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
+import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
 import { TooltipPosition, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
 import { TooltipSize } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper/utils.ts';
 import { LocalCounter } from '@/hooks/Mapper/components/map/components/LocalCounter';
 import { KillsCounter } from '@/hooks/Mapper/components/map/components/KillsCounter';
-import { useLocalCounter } from '@/hooks/Mapper/components/hooks/useLocalCounter.ts';
 
 // let render = 0;
 export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>) => {
   const nodeVars = useSolarSystemNode(props);
   const { localCounterCharacters } = useLocalCounter(nodeVars);
-  const { killsCount: localKillsCount, killsActivityType: localKillsActivityType } = useNodeKillsCount(
-    nodeVars.solarSystemId,
-  );
+  const { killsCount: localKillsCount, killsActivityType: localKillsActivityType } = useNodeKillsCount(nodeVars.solarSystemId);
 
   // console.log('JOipP', `render ${nodeVars.id}`, render++);
 
@@ -157,35 +154,22 @@ export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>)
         <>
           {nodeVars.unsplashedLeft.length > 0 && (
             <div className={classes.Unsplashed}>
-              <UnsplashedSignatureColumn
-                signatures={nodeVars.unsplashedLeft}
-                wormholesData={nodeVars.wormholesData}
-              />
+              {nodeVars.unsplashedLeft.map(sig => (
+                <UnsplashedSignature key={sig.eve_id} signature={sig} />
+              ))}
             </div>
           )}
 
           {nodeVars.unsplashedRight.length > 0 && (
             <div className={clsx(classes.Unsplashed, classes['Unsplashed--right'])}>
-              <UnsplashedSignatureColumn
-                signatures={nodeVars.unsplashedRight}
-                wormholesData={nodeVars.wormholesData}
-              />
+              {nodeVars.unsplashedRight.map(sig => (
+                <UnsplashedSignature key={sig.eve_id} signature={sig} />
+              ))}
             </div>
           )}
         </>
       )}
 
-      {nodeVars.systemHighlighted === nodeVars.solarSystemId && (
-        <div
-          className={clsx('absolute top-[-4px] left-[-4px]', 'w-[calc(100%+8px)] h-[calc(100%+8px)]', 'animate-pulse')}
-        >
-          <div className="absolute left-0 top-0 w-3 h-2 border-t-2 border-l-2 border-sky-300"></div>
-          <div className="absolute right-0 top-0 w-3 h-2 border-t-2 border-r-2 border-sky-300"></div>
-          <div className="absolute left-0 bottom-0 w-3 h-2 border-b-2 border-l-2 border-sky-300"></div>
-          <div className="absolute right-0 bottom-0 w-3 h-2 border-b-2 border-r-2 border-sky-300"></div>
-        </div>
-      )}
-
       <div className={classes.Handlers}>
         <Handle
           type="source"

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

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

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

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

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

@@ -1,151 +0,0 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { InfoDrawer } from '@/hooks/Mapper/components/ui-kit';
-import { renderInfoColumn } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders';
-import { parseSignatureCustomInfo } from '@/hooks/Mapper/helpers/parseSignatureCustomInfo';
-import { resolveSignatureFillVar } from '@/hooks/Mapper/components/map/helpers/wormholeClassFillVars';
-import { MassState, TimeStatus } from '@/hooks/Mapper/types';
-import { SystemSignature } from '@/hooks/Mapper/types/signatures';
-import { WormholeDataRaw } from '@/hooks/Mapper/types/wormholes';
-
-interface PillData {
-  signature: SystemSignature;
-  fill: string;
-  isEOL: boolean;
-  is4H: boolean;
-  isVerge: boolean;
-  isHalf: boolean;
-}
-
-const PILL_W = 13;
-const PILL_H = 8;
-const GAP = 2;
-const COLS = 4;
-
-interface UnsplashedSignatureColumnProps {
-  signatures: SystemSignature[];
-  wormholesData: Record<string, WormholeDataRaw>;
-}
-
-export const UnsplashedSignatureColumn = ({ signatures, wormholesData }: UnsplashedSignatureColumnProps) => {
-  const svgRef = useRef<SVGSVGElement>(null);
-  const [hoveredIndex, setHoveredIndex] = useState(-1);
-
-  const pills: PillData[] = useMemo(() => {
-    return signatures.map(sig => {
-      const customInfo = parseSignatureCustomInfo(sig.custom_info);
-      return {
-        signature: sig,
-        fill: resolveSignatureFillVar(sig, wormholesData),
-        isEOL: customInfo.time_status === TimeStatus._1h,
-        is4H: customInfo.time_status === TimeStatus._4h,
-        isVerge: customInfo.mass_status === MassState.verge,
-        isHalf: customInfo.mass_status === MassState.half,
-      };
-    });
-  }, [signatures, wormholesData]);
-
-  const count = pills.length;
-  if (count === 0) return null;
-
-  const cols = Math.min(count, COLS);
-  const rows = Math.ceil(count / COLS);
-  const svgWidth = cols * (PILL_W + GAP) - GAP;
-  const svgHeight = rows * (PILL_H + GAP) - GAP;
-
-  const onMouseMove = useCallback(
-    (e: React.MouseEvent<SVGSVGElement>) => {
-      const svg = svgRef.current;
-      if (!svg) return;
-      const rect = svg.getBoundingClientRect();
-      const localX = e.clientX - rect.left;
-      const localY = e.clientY - rect.top;
-
-      const col = Math.floor(localX / (PILL_W + GAP));
-      const row = Math.floor(localY / (PILL_H + GAP));
-
-      const withinPill =
-        localX - col * (PILL_W + GAP) <= PILL_W && localY - row * (PILL_H + GAP) <= PILL_H;
-
-      const idx = withinPill ? row * COLS + col : -1;
-      setHoveredIndex(idx < count ? idx : -1);
-    },
-    [count],
-  );
-
-  const onMouseLeave = useCallback(() => setHoveredIndex(-1), []);
-
-  // Compute tooltip position relative to viewport
-  let tooltipX = 0;
-  let tooltipY = 0;
-  if (hoveredIndex >= 0 && svgRef.current) {
-    const svgRect = svgRef.current.getBoundingClientRect();
-    const col = hoveredIndex % COLS;
-    const row = Math.floor(hoveredIndex / COLS);
-    tooltipX = svgRect.left + col * (PILL_W + GAP) + PILL_W / 2;
-    tooltipY = svgRect.top + row * (PILL_H + GAP) - 4;
-  }
-
-  return (
-    <>
-      <svg
-        ref={svgRef}
-        width={svgWidth}
-        height={svgHeight}
-        viewBox={`0 0 ${svgWidth} ${svgHeight}`}
-        xmlns="http://www.w3.org/2000/svg"
-        style={{ display: 'block', position: 'relative', top: 3 }}
-        onMouseMove={onMouseMove}
-        onMouseLeave={onMouseLeave}
-      >
-        {pills.map((pill, i) => {
-          const col = i % COLS;
-          const row = Math.floor(i / COLS);
-          const x = col * (PILL_W + GAP);
-          const y = row * (PILL_H + GAP);
-          return (
-            <g key={pill.signature.eve_id} transform={`translate(${x},${y})`}>
-              <rect y="1" width="13" height="4" rx="2" fill={pill.fill} />
-              {pill.isEOL && <rect x="4" width="5" height="6" rx="1" fill="#a153ac" />}
-              {pill.is4H && <rect x="4" width="5" height="6" rx="1" fill="#d8b4fe" />}
-              {pill.isVerge && <rect x="0" width="5" height="6" rx="1" fill="#af0000" />}
-              {pill.isHalf && <rect x="0" width="5" height="6" rx="1" fill="#ffd700" />}
-            </g>
-          );
-        })}
-      </svg>
-
-      {hoveredIndex >= 0 &&
-        pills[hoveredIndex] &&
-        createPortal(
-          <div
-            style={{
-              position: 'fixed',
-              left: tooltipX,
-              top: tooltipY,
-              transform: 'translate(-50%, -100%)',
-              zIndex: 9999,
-              pointerEvents: 'none',
-            }}
-          >
-            <div
-              style={{
-                background: 'var(--surface-card, #1e1e2e)',
-                border: '1px solid var(--surface-border, #333)',
-                borderRadius: 6,
-                padding: '4px 6px',
-                boxShadow: '0 2px 8px rgba(0,0,0,0.4)',
-              }}
-            >
-              <div className="flex flex-col gap-1">
-                <InfoDrawer title={<b className="text-slate-50">{pills[hoveredIndex].signature.eve_id}</b>}>
-                  {renderInfoColumn(pills[hoveredIndex].signature)}
-                </InfoDrawer>
-              </div>
-            </div>
-          </div>,
-          document.body,
-        )}
-    </>
-  );
-};

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

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

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

@@ -716,12 +716,11 @@ export const STATUS_CLASSES: Record<number, string> = {
   [STATUSES.dangerous]: 'eve-system-status-dangerous',
 };
 
-export const TYPE_NAMES_ORDER = [ConnectionType.wormhole, ConnectionType.gate, ConnectionType.bridge];
+export const TYPE_NAMES_ORDER = [ConnectionType.wormhole, ConnectionType.gate];
 
 export const TYPE_NAMES = {
   [ConnectionType.wormhole]: 'Wormhole',
   [ConnectionType.gate]: 'Gate',
-  [ConnectionType.bridge]: 'Jumpgate',
 };
 
 export const MASS_STATE_NAMES_ORDER = [MassState.verge, MassState.half, MassState.normal];

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

@@ -1,5 +0,0 @@
-import { UserPermission, UserPermissions } from '@/hooks/Mapper/types';
-
-export const checkPermissions = (permissions: Partial<UserPermissions>, targetPermission: UserPermission) => {
-  return targetPermission != null && permissions[targetPermission];
-};

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

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

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

@@ -15,12 +15,3 @@ export const isKnownSpace = (wormholeClassID: number) => {
 export const isPossibleSpace = (spaces: number[], wormholeClassID: number) => {
   return spaces.includes(wormholeClassID);
 };
-
-export const isNullsecSpace = (wormholeClassID: number) => {
-  switch (wormholeClassID) {
-    case SOLAR_SYSTEM_CLASS_IDS.ns:
-      return true;
-  }
-
-  return false;
-};

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

@@ -1,63 +0,0 @@
-import { WORMHOLE_CLASS_STYLES, WORMHOLES_ADDITIONAL_INFO } from '@/hooks/Mapper/components/map/constants';
-import { K162_TYPES_MAP } from '@/hooks/Mapper/constants';
-import { parseSignatureCustomInfo } from '@/hooks/Mapper/helpers/parseSignatureCustomInfo';
-import { WormholeDataRaw } from '@/hooks/Mapper/types/wormholes';
-import { SystemSignature } from '@/hooks/Mapper/types/signatures';
-
-// Maps WORMHOLE_CLASS_STYLES CSS class names → CSS variable references for inline SVG fill.
-// The CSS classes set `color: var(--eve-wh-type-color-*)`, but SVG `fill` needs an explicit value.
-const CLASS_NAME_TO_CSS_VAR: Record<string, string> = {
-  'eve-wh-type-color-c1': 'var(--eve-wh-type-color-c1)',
-  'eve-wh-type-color-c2': 'var(--eve-wh-type-color-c2)',
-  'eve-wh-type-color-c3': 'var(--eve-wh-type-color-c3)',
-  'eve-wh-type-color-c4': 'var(--eve-wh-type-color-c4)',
-  'eve-wh-type-color-c5': 'var(--eve-wh-type-color-c5)',
-  'eve-wh-type-color-c6': 'var(--eve-wh-type-color-c6)',
-  'eve-wh-type-color-high': 'var(--eve-wh-type-color-high)',
-  'eve-wh-type-color-low': 'var(--eve-wh-type-color-low)',
-  'eve-wh-type-color-null': 'var(--eve-wh-type-color-null)',
-  'eve-wh-type-color-thera': 'var(--eve-wh-type-color-thera)',
-  'eve-wh-type-color-c13': 'var(--eve-wh-type-color-c13)',
-  'eve-wh-type-color-drifter': 'var(--eve-wh-type-color-drifter)',
-  'eve-wh-type-color-zarzakh': 'var(--eve-wh-type-color-zarzakh)',
-  // eve-kind-color-abyss and eve-kind-color-penalty both resolve to --eve-wh-type-color-c6
-  'eve-kind-color-abyss': 'var(--eve-wh-type-color-c6)',
-  'eve-kind-color-penalty': 'var(--eve-wh-type-color-c6)',
-};
-
-const DEFAULT_FILL = '#833ca4';
-
-export function resolveSignatureFillVar(
-  signature: SystemSignature,
-  wormholesData: Record<string, WormholeDataRaw>,
-): string {
-  const customInfo = parseSignatureCustomInfo(signature.custom_info);
-
-  // K162 override: use the k162Type to look up the real destination class
-  if (signature.type === 'K162' && customInfo.k162Type) {
-    const k162Option = K162_TYPES_MAP[customInfo.k162Type];
-    if (k162Option) {
-      const k162Data = wormholesData[k162Option.whClassName];
-      const k162Class = k162Data ? WORMHOLES_ADDITIONAL_INFO[k162Data.dest] : null;
-      if (k162Class) {
-        const className = WORMHOLE_CLASS_STYLES[k162Class.wormholeClassID];
-        if (className && CLASS_NAME_TO_CSS_VAR[className]) {
-          return CLASS_NAME_TO_CSS_VAR[className];
-        }
-      }
-    }
-    return DEFAULT_FILL;
-  }
-
-  // Normal type lookup
-  const whData = wormholesData[signature.type];
-  if (!whData) return DEFAULT_FILL;
-
-  const whClass = WORMHOLES_ADDITIONAL_INFO[whData.dest];
-  if (!whClass) return DEFAULT_FILL;
-
-  const className = WORMHOLE_CLASS_STYLES[whClass.wormholeClassID];
-  if (!className) return DEFAULT_FILL;
-
-  return CLASS_NAME_TO_CSS_VAR[className] || DEFAULT_FILL;
-}

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

@@ -6,5 +6,5 @@ export * from './useCommandsCharacters';
 export * from './useCommandsConnections';
 export * from './useCommandsConnections';
 export * from './useCenterSystem';
-export * from './useSelectSystems';
+export * from './useSelectSystem';
 export * from './useMapCommands';

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

@@ -1,18 +1,12 @@
 import { useReactFlow } from 'reactflow';
 import { useCallback, useRef } from 'react';
 import { CommandCenterSystem } from '@/hooks/Mapper/types';
-import { useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
-import { SYSTEM_FOCUSED_LIFETIME } from '@/hooks/Mapper/constants.ts';
 
 export const useCenterSystem = () => {
   const rf = useReactFlow();
 
-  const { update } = useMapState();
-
-  const ref = useRef({ rf, update });
-  ref.current = { rf, update };
-
-  const highlightTimeout = useRef<number>();
+  const ref = useRef({ rf });
+  ref.current = { rf };
 
   return useCallback((systemId: CommandCenterSystem) => {
     const systemNode = ref.current.rf.getNodes().find(x => x.data.id === systemId);
@@ -20,16 +14,5 @@ export const useCenterSystem = () => {
       return;
     }
     ref.current.rf.setCenter(systemNode.position.x, systemNode.position.y, { duration: 1000 });
-
-    ref.current.update({ systemHighlighted: systemId });
-
-    if (highlightTimeout.current !== undefined) {
-      clearTimeout(highlightTimeout.current);
-    }
-
-    highlightTimeout.current = setTimeout(() => {
-      highlightTimeout.current = undefined;
-      ref.current.update({ systemHighlighted: undefined });
-    }, SYSTEM_FOCUSED_LIFETIME);
   }, []);
 };

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

@@ -14,27 +14,8 @@ export const useCommandsCharacters = () => {
   const ref = useRef({ update });
   ref.current = { update };
 
-  const charactersUpdated = useCallback((updatedCharacters: CommandCharactersUpdated) => {
-    ref.current.update(state => {
-      const existing = state.characters ?? [];
-      // Put updatedCharacters into a map keyed by ID
-      const updatedMap = new Map(updatedCharacters.map(c => [c.eve_id, c]));
-
-      // 1. Update existing characters when possible
-      const merged = existing.map(character => {
-        const updated = updatedMap.get(character.eve_id);
-        if (updated) {
-          updatedMap.delete(character.eve_id); // Mark as processed
-          return { ...character, ...updated };
-        }
-        return character;
-      });
-
-      // 2. Any remaining items in updatedMap are NEW characters → add them
-      const newCharacters = Array.from(updatedMap.values());
-
-      return { characters: [...merged, ...newCharacters] };
-    });
+  const charactersUpdated = useCallback((characters: CommandCharactersUpdated) => {
+    ref.current.update(() => ({ characters: characters.slice() }));
   }, []);
 
   const characterAdded = useCallback((value: CommandCharacterAdded) => {

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

@@ -1,6 +1,4 @@
 import { MapData, useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
-import { useEventBuffer } from '@/hooks/Mapper/hooks';
-import { SolarSystemConnection, SolarSystemRawType } from '@/hooks/Mapper/types';
 import { CommandInit } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { useCallback, useRef } from 'react';
 import { useReactFlow } from 'reactflow';
@@ -13,20 +11,6 @@ export const useMapInit = () => {
   const ref = useRef({ rf, data, update });
   ref.current = { update, data, rf };
 
-  const updateSystems = useCallback((systems: SolarSystemRawType[]) => {
-    const { rf } = ref.current;
-    rf.setNodes(systems.map(convertSystem2Node));
-  }, []);
-
-  const { handleEvent: handleUpdateSystems } = useEventBuffer<any>(updateSystems);
-
-  const updateEdges = useCallback((connections: SolarSystemConnection[]) => {
-    const { rf } = ref.current;
-    rf.setEdges(connections.map(convertConnection2Edge));
-  }, []);
-
-  const { handleEvent: handleUpdateConnections } = useEventBuffer<any>(updateEdges);
-
   return useCallback(
     ({
       systems,
@@ -38,10 +22,9 @@ export const useMapInit = () => {
       user_characters,
       present_characters,
       hubs,
-      options,
-      user_permissions,
     }: CommandInit) => {
       const { update } = ref.current;
+      const { rf } = ref.current;
 
       const updateData: Partial<MapData> = {};
 
@@ -65,14 +48,6 @@ export const useMapInit = () => {
         updateData.hubs = hubs;
       }
 
-      if (options) {
-        updateData.options = options;
-      }
-
-      if (options) {
-        updateData.userPermissions = user_permissions;
-      }
-
       if (systems) {
         updateData.systems = systems;
       }
@@ -88,13 +63,11 @@ export const useMapInit = () => {
       update(updateData);
 
       if (systems) {
-        handleUpdateSystems(systems);
-        // rf.setNodes(systems.map(convertSystem2Node));
+        rf.setNodes(systems.map(convertSystem2Node));
       }
 
       if (connections) {
-        handleUpdateConnections(connections);
-        // rf.setEdges(connections.map(convertConnection2Edge));
+        rf.setEdges(connections.map(convertConnection2Edge));
       }
     },
     [],

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

@@ -0,0 +1,21 @@
+import { useReactFlow } from 'reactflow';
+import { useCallback, useRef } from 'react';
+import { CommandSelectSystem } from '@/hooks/Mapper/types';
+
+export const useSelectSystem = () => {
+  const rf = useReactFlow();
+
+  const ref = useRef({ rf });
+  ref.current = { rf };
+
+  return useCallback((systemId: CommandSelectSystem) => {
+    ref.current.rf.setNodes(nds =>
+      nds.map(node => {
+        return {
+          ...node,
+          selected: node.id === systemId,
+        };
+      }),
+    );
+  }, []);
+};

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

@@ -1,31 +0,0 @@
-import { OnMapSelectionChange } from '@/hooks/Mapper/components/map/map.types.ts';
-import { CommandSelectSystems } from '@/hooks/Mapper/types';
-import { useCallback, useRef } from 'react';
-import { useReactFlow } from 'reactflow';
-
-export const useSelectSystems = (onSelectionChange: OnMapSelectionChange) => {
-  const rf = useReactFlow();
-
-  const ref = useRef({ rf, onSelectionChange });
-  ref.current = { rf, onSelectionChange };
-
-  return useCallback(({ systems, delay }: CommandSelectSystems) => {
-    const run = () => {
-      ref.current.rf.setNodes(nds =>
-        nds.map(node => {
-          return {
-            ...node,
-            selected: systems.includes(node.id),
-          };
-        }),
-      );
-    };
-
-    if (delay == null || delay === 0) {
-      run();
-      return;
-    }
-
-    setTimeout(run, delay);
-  }, []);
-};

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

@@ -1,3 +1,4 @@
+import { ForwardedRef, useImperativeHandle, useRef } from 'react';
 import {
   CommandAddConnections,
   CommandAddSystems,
@@ -13,16 +14,12 @@ import {
   CommandRemoveSystems,
   Commands,
   CommandSelectSystem,
-  CommandSelectSystems,
   CommandUpdateConnection,
   CommandUpdateSystems,
   MapHandlers,
 } from '@/hooks/Mapper/types/mapHandlers.ts';
-import { ForwardedRef, useImperativeHandle, useRef } from 'react';
 
-import { OnMapSelectionChange } from '@/hooks/Mapper/components/map/map.types.ts';
 import {
-  useCenterSystem,
   useCommandsCharacters,
   useCommandsConnections,
   useMapAddSystems,
@@ -30,8 +27,10 @@ import {
   useMapInit,
   useMapRemoveSystems,
   useMapUpdateSystems,
-  useSelectSystems,
+  useCenterSystem,
+  useSelectSystem,
 } from './api';
+import { OnMapSelectionChange } from '@/hooks/Mapper/components/map/map.types.ts';
 
 export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange: OnMapSelectionChange) => {
   const mapInit = useMapInit();
@@ -39,7 +38,7 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
   const mapUpdateSystems = useMapUpdateSystems();
   const removeSystems = useMapRemoveSystems(onSelectionChange);
   const centerSystem = useCenterSystem();
-  const selectSystems = useSelectSystems(onSelectionChange);
+  const selectSystem = useSelectSystem();
 
   const selectRef = useRef({ onSelectionChange });
   selectRef.current = { onSelectionChange };
@@ -106,11 +105,14 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
               break;
 
             case Commands.selectSystem:
-              selectSystems({ systems: [data as string], delay: 500 });
-              break;
-
-            case Commands.selectSystems:
-              selectSystems(data as CommandSelectSystems);
+              setTimeout(() => {
+                const systemId = `${data}`;
+                selectRef.current.onSelectionChange({
+                  systems: [systemId],
+                  connections: [],
+                });
+                selectSystem(systemId as CommandSelectSystem);
+              }, 500);
               break;
 
             case Commands.pingAdded:

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

@@ -5,11 +5,11 @@ 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, REGIONS_MAP, SPACE_TO_CLASS } from '@/hooks/Mapper/constants';
+import { Regions, 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, WormholeDataRaw } from '@/hooks/Mapper/types';
+import { CharacterTypeRaw, OutCommand, PingType, SystemSignature } from '@/hooks/Mapper/types';
 import { useUnsplashedSignatures } from './useUnsplashedSignatures';
 import { useSystemName } from './useSystemName';
 import { LabelInfo, useLabelsInfo } from './useLabelsInfo';
@@ -46,14 +46,31 @@ export interface SolarSystemNodeVars {
   userCharacters: string[];
   unsplashedLeft: Array<SystemSignature>;
   unsplashedRight: Array<SystemSignature>;
-  wormholesData: Record<string, WormholeDataRaw>;
   isThickConnections: boolean;
   isRally: boolean;
   classTitle: string | null;
   temporaryName?: string | null;
-  description: string | null;
-  comments_count: number | null;
-  systemHighlighted: string | undefined;
+}
+
+const SpaceToClass: Record<string, string> = {
+  [Spaces.Caldari]: 'Caldaria',
+  [Spaces.Matar]: 'Mataria',
+  [Spaces.Amarr]: 'Amarria',
+  [Spaces.Gallente]: 'Gallente',
+  [Spaces.Pochven]: 'Pochven',
+};
+
+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 => {
@@ -67,13 +84,11 @@ export const useSolarSystemNode = (props: NodeProps<MapSolarSystemType>): SolarS
     labels,
     temporary_name,
     linked_sig_eve_id: linkedSigEveId = '',
-    description,
-    comments_count,
   } = data;
 
   const {
     storedSettings: { interfaceSettings },
-    data: { systemSignatures: mapSystemSignatures, pings },
+    data: { systemSignatures: mapSystemSignatures },
   } = useMapRootState();
 
   const systemStaticInfo = useMemo(() => {
@@ -109,7 +124,7 @@ export const useSolarSystemNode = (props: NodeProps<MapSolarSystemType>): SolarS
       visibleNodes,
       showKSpaceBG,
       isThickConnections,
-      systemHighlighted,
+      pings,
     },
     outCommand,
   } = useMapState();
@@ -154,7 +169,7 @@ export const useSolarSystemNode = (props: NodeProps<MapSolarSystemType>): SolarS
   const showHandlers = isConnecting || hoverNodeId === id;
 
   const space = showKSpaceBG ? REGIONS_MAP[region_id] : '';
-  const regionClass = showKSpaceBG ? SPACE_TO_CLASS[space] || null : null;
+  const regionClass = showKSpaceBG ? SpaceToClass[space] || null : null;
 
   const { systemName, computedTemporaryName, customName } = useSystemName({
     isTempSystemNameEnabled,
@@ -211,16 +226,12 @@ export const useSolarSystemNode = (props: NodeProps<MapSolarSystemType>): SolarS
     charactersInSystem,
     unsplashedLeft,
     unsplashedRight,
-    wormholesData,
     isThickConnections,
     classTitle: class_title,
     temporaryName: computedTemporaryName,
     regionName,
     solarSystemName: solar_system_name,
     isRally,
-    description,
-    comments_count,
-    systemHighlighted,
   };
 
   return nodeVars;

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

@@ -1,7 +1,7 @@
-import { useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
-import { SolarSystemRawType } from '@/hooks/Mapper/types';
 import { useCallback, useEffect, useRef } from 'react';
 import { Node, useOnViewportChange, useReactFlow } from 'reactflow';
+import { useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
+import { SolarSystemRawType } from '@/hooks/Mapper/types';
 
 const useThrottle = () => {
   const throttleSeed = useRef<number | null>(null);

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

@@ -10,5 +10,3 @@ export type OnMapSelectionChange = (event: {
 }) => void;
 
 export type OnMapAddSystemCallback = (props: { coordinates: XYPosition | null }) => void;
-
-export type MapViewport = { zoom: 1; x: 0; y: 0 };

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

@@ -1,5 +1,5 @@
-@use './eve-common-variables';
-@use './eve-common';
+@import './eve-common-variables';
+@import './eve-common';
 
 .default-theme {
   --rf-bg-color: #0C0A09;

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

@@ -1,19 +1,18 @@
-@use "sass:color";
 
 $friendlyBase: #3bbd39;
 $friendlyAlpha: #3bbd3952;
-$friendlyDark20: color.adjust($friendlyBase, $lightness: -20%);
-$friendlyDark30: color.adjust($friendlyBase, $lightness: -30%);
-$friendlyDark5:  color.adjust($friendlyBase, $lightness: -5%);
+$friendlyDark20: darken($friendlyBase, 20%);
+$friendlyDark30: darken($friendlyBase, 30%);
+$friendlyDark5:  darken($friendlyBase, 5%);
 
 $lookingForBase: #43c2fd;
 $lookingForAlpha: rgba(67, 176, 253, 0.48);
-$lookingForDark15: color.adjust($lookingForBase, $lightness: -15%);
+$lookingForDark15: darken($lookingForBase, 15%);
 
 $homeBase: rgb(179, 253, 67);
 $homeAlpha: rgba(186, 248, 48, 0.32);
 $homeBackground: #a0fa5636;
-$homeDark30: color.adjust($homeBase, $lightness: -30%);
+$homeDark30: darken($homeBase, 30%);
 
 :root {
   --pastel-blue: #5a7d9a;
@@ -118,7 +117,6 @@ $homeDark30: color.adjust($homeBase, $lightness: -30%);
 
   --conn-time-eol: #7452c3e3;
   --conn-frigate: #325d88;
-  --conn-bridge: rgba(135, 185, 93, 0.85);
   --conn-save: rgba(155, 102, 45, 0.85);
   --selected-item-bg: rgba(98, 98, 98, 0.33);
 }

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

@@ -1,4 +1,4 @@
-@use './eve-common-variables';
+@import './eve-common-variables';
 
 
 .eve-wh-effect-color-pulsar {

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

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

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

@@ -1,11 +1,10 @@
-@use "sass:color";
-@use './eve-common-variables';
-@use './eve-common';
+@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: color.adjust($homeBase, $lightness: -30%);
+$homeDark30: darken($homeBase, 30%);
 
 .pathfinder-theme {
   /* -- Override values from the default theme -- */

assets/js/hooks/Mapper/components/map/styles/solar-system-node.scss

@@ -1,8 +0,0 @@
-$pastel-blue: #5a7d9a;
-$pastel-pink: rgb(30, 161, 255);
-$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);

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

@@ -4,13 +4,10 @@ import { DEFAULT_WIDGETS } from '@/hooks/Mapper/components/mapInterface/constant
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 
 export const MapInterface = () => {
+  // const [items, setItems] = useState<WindowProps[]>(restoreWindowsFromLS);
   const { windowsSettings, updateWidgetSettings } = useMapRootState();
 
   const items = useMemo(() => {
-    if (Object.keys(windowsSettings).length === 0) {
-      return [];
-    }
-
     return windowsSettings.windows
       .map(x => {
         const content = DEFAULT_WIDGETS.find(y => y.id === x.id)?.content;

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

@@ -1,15 +1,16 @@
-import { SystemViewStandalone, WdButton, WHClassView, WHEffectView } from '@/hooks/Mapper/components/ui-kit';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { OutCommand, SearchSystemItem } from '@/hooks/Mapper/types';
-import { AutoComplete } from 'primereact/autocomplete';
 import { Dialog } from 'primereact/dialog';
-import { IconField } from 'primereact/iconfield';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useCallback, useRef, useState } from 'react';
+import { Button } from 'primereact/button';
+import { IconField } from 'primereact/iconfield';
+import { AutoComplete } from 'primereact/autocomplete';
+import { OutCommand, SearchSystemItem } from '@/hooks/Mapper/types';
+import { SystemViewStandalone, WHClassView, WHEffectView } from '@/hooks/Mapper/components/ui-kit';
 import classes from './AddSystemDialog.module.scss';
 
+import clsx from 'clsx';
 import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace.ts';
 import { sortWHClasses } from '@/hooks/Mapper/helpers';
-import clsx from 'clsx';
 
 export type SearchOnSubmitCallback = (item: SearchSystemItem) => void;
 
@@ -33,7 +34,6 @@ export const AddSystemDialog = ({
     data: { wormholesData },
   } = useMapRootState();
 
-  // TODO fix it
   const inputRef = useRef<any>();
   const onShow = useCallback(() => {
     inputRef.current?.focus();
@@ -62,7 +62,6 @@ export const AddSystemDialog = ({
             },
           });
 
-          // TODO fix it
           let prepared = (result.systems as SearchSystemItem[]).sort((a, b) => {
             const amatch = a.label.indexOf(query);
             const bmatch = b.label.indexOf(query);
@@ -115,93 +114,90 @@ export const AddSystemDialog = ({
         setVisible(false);
       }}
     >
-      <form onSubmit={handleSubmit}>
-        <div className="flex flex-col gap-3 px-1.5">
-          <div className="flex flex-col gap-2 py-3.5">
-            <div className="flex flex-col gap-1">
-              <IconField>
-                <AutoComplete
-                  ref={inputRef}
-                  multiple
-                  showEmptyMessage
-                  scrollHeight="300px"
-                  value={selectedItem}
-                  suggestions={filteredItems}
-                  completeMethod={searchItems}
-                  onChange={e => {
-                    setSelectedItem(e.value.length < 2 ? e.value : [e.value[e.value.length - 1]]);
-                  }}
-                  emptyMessage="Not found any system..."
-                  placeholder="Type here..."
-                  field="label"
-                  id="value"
-                  className="w-full"
-                  itemTemplate={(item: SearchSystemItem) => {
-                    const { security, system_class, effect_power, effect_name, statics } = item.system_static_info;
-                    const sortedStatics = sortWHClasses(wormholesData, statics);
-                    const isWH = isWormholeSpace(system_class);
+      <div className="flex flex-col gap-3 px-1.5">
+        <div className="flex flex-col gap-2 py-3.5">
+          <div className="flex flex-col gap-1">
+            <IconField>
+              <AutoComplete
+                ref={inputRef}
+                multiple
+                showEmptyMessage
+                scrollHeight="300px"
+                value={selectedItem}
+                suggestions={filteredItems}
+                completeMethod={searchItems}
+                onChange={e => {
+                  setSelectedItem(e.value.length < 2 ? e.value : [e.value[e.value.length - 1]]);
+                }}
+                emptyMessage="Not found any system..."
+                placeholder="Type here..."
+                field="label"
+                id="value"
+                className="w-full"
+                itemTemplate={(item: SearchSystemItem) => {
+                  const { security, system_class, effect_power, effect_name, statics } = item.system_static_info;
+                  const sortedStatics = sortWHClasses(wormholesData, statics);
+                  const isWH = isWormholeSpace(system_class);
 
-                    return (
-                      <div className={clsx('flex gap-1.5', classes.SearchItem)}>
-                        <SystemViewStandalone
-                          security={security}
-                          system_class={system_class}
-                          solar_system_id={item.value}
-                          class_title={item.class_title}
-                          solar_system_name={item.label}
-                          region_name={item.region_name}
+                  return (
+                    <div className={clsx('flex gap-1.5', classes.SearchItem)}>
+                      <SystemViewStandalone
+                        security={security}
+                        system_class={system_class}
+                        solar_system_id={item.value}
+                        class_title={item.class_title}
+                        solar_system_name={item.label}
+                        region_name={item.region_name}
+                      />
+
+                      {effect_name && isWH && (
+                        <WHEffectView
+                          effectName={effect_name}
+                          effectPower={effect_power}
+                          className={classes.SearchItemEffect}
                         />
+                      )}
 
-                        {effect_name && isWH && (
-                          <WHEffectView
-                            effectName={effect_name}
-                            effectPower={effect_power}
-                            className={classes.SearchItemEffect}
-                          />
-                        )}
-
-                        {isWH && (
-                          <div className="flex gap-1 grow justify-between">
-                            <div></div>
-                            <div className="flex gap-1">
-                              {sortedStatics.map(x => (
-                                <WHClassView key={x} whClassName={x} />
-                              ))}
-                            </div>
+                      {isWH && (
+                        <div className="flex gap-1 grow justify-between">
+                          <div></div>
+                          <div className="flex gap-1">
+                            {sortedStatics.map(x => (
+                              <WHClassView key={x} whClassName={x} />
+                            ))}
                           </div>
-                        )}
-                      </div>
-                    );
-                  }}
-                  selectedItemTemplate={(item: SearchSystemItem) => (
-                    <SystemViewStandalone
-                      security={item.system_static_info.security}
-                      system_class={item.system_static_info.system_class}
-                      solar_system_id={item.value}
-                      class_title={item.class_title}
-                      solar_system_name={item.label}
-                      region_name={item.region_name}
-                    />
-                  )}
-                />
-              </IconField>
+                        </div>
+                      )}
+                    </div>
+                  );
+                }}
+                selectedItemTemplate={(item: SearchSystemItem) => (
+                  <SystemViewStandalone
+                    security={item.system_static_info.security}
+                    system_class={item.system_static_info.system_class}
+                    solar_system_id={item.value}
+                    class_title={item.class_title}
+                    solar_system_name={item.label}
+                    region_name={item.region_name}
+                  />
+                )}
+              />
+            </IconField>
 
-              <span className="text-[12px] text-stone-400 ml-1">*to search type at least 2 symbols.</span>
-            </div>
-          </div>
-
-          <div className="flex gap-2 justify-end">
-            <WdButton
-              type="submit"
-              onClick={handleSubmit}
-              outlined
-              disabled={!selectedItem || selectedItem.length !== 1}
-              size="small"
-              label="Submit"
-            />
+            <span className="text-[12px] text-stone-400 ml-1">*to search type at least 2 symbols.</span>
           </div>
         </div>
-      </form>
+
+        <div className="flex gap-2 justify-end">
+          <Button
+            onClick={handleSubmit}
+            outlined
+            disabled={!selectedItem || selectedItem.length !== 1}
+            size="small"
+            label="Submit"
+          />
+        </div>
+      </div>
     </Dialog>
   );
 };

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

@@ -1,7 +1,7 @@
 import { MarkdownComment } from '@/hooks/Mapper/components/mapInterface/components/Comments/components';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useEffect, useRef, useState } from 'react';
 import { CommentType } from '@/hooks/Mapper/types';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 
 export interface CommentsProps {}
 
@@ -14,9 +14,7 @@ export const Comments = ({}: CommentsProps) => {
     comments: { loadComments, comments, lastUpdateKey },
   } = useMapRootState();
 
-  const systemId = useMemo(() => {
-    return +selectedSystems[0];
-  }, [selectedSystems]);
+  const [systemId] = selectedSystems;
 
   const ref = useRef({ loadComments, systemId });
   ref.current = { loadComments, systemId };

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

@@ -1,5 +1,8 @@
-.MarkdownTextViewer {
+.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;
@@ -53,10 +56,6 @@
     @apply font-bold text-green-400 break-words whitespace-normal;
   }
 
-  strong {
-    font-weight: bold;
-  }
-
   i, em {
     @apply italic text-pink-400 break-words whitespace-normal;
   }

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

@@ -1,3 +1,4 @@
+import classes from './MarkdownComment.module.scss';
 import clsx from 'clsx';
 import {
   InfoDrawer,
@@ -13,7 +14,6 @@ import { PrimeIcons } from 'primereact/api';
 import { ConfirmPopup } from 'primereact/confirmpopup';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { OutCommand } from '@/hooks/Mapper/types';
-import { useConfirmPopup } from '@/hooks/Mapper/hooks';
 
 const TOOLTIP_PROPS = { content: 'Remove comment', position: TooltipPosition.top };
 
@@ -28,7 +28,8 @@ export const MarkdownComment = ({ text, time, characterEveId, id }: MarkdownComm
   const char = useGetCacheCharacter(characterEveId);
   const [hovered, setHovered] = useState(false);
 
-  const { cfShow, cfHide, cfVisible, cfRef } = useConfirmPopup();
+  const cpRemoveBtnRef = useRef<HTMLElement>();
+  const [cpRemoveVisible, setCpRemoveVisible] = useState(false);
 
   const { outCommand } = useMapRootState();
   const ref = useRef({ outCommand, id });
@@ -44,15 +45,14 @@ export const MarkdownComment = ({ text, time, characterEveId, id }: MarkdownComm
   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(
-          'p-1 bg-stone-700/20',
-          'text-[12px] leading-[1.2] text-stone-300 break-words',
-          'bg-gradient-to-r from-stone-600/40 via-stone-600/10 to-stone-600/0',
-        )}
+        className={clsx(classes.MarkdownCommentRoot, 'p-1 bg-stone-700/20 ')}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
         title={
@@ -68,11 +68,11 @@ export const MarkdownComment = ({ text, time, characterEveId, id }: MarkdownComm
                 {!hovered && <TimeAgo timestamp={time} />}
                 {hovered && (
                   // @ts-ignore
-                  <div ref={cfRef}>
+                  <div ref={cpRemoveBtnRef}>
                     <WdImgButton
                       className={clsx(PrimeIcons.TRASH, 'hover:text-red-400')}
                       tooltip={TOOLTIP_PROPS}
-                      onClick={cfShow}
+                      onClick={handleShowCP}
                     />
                   </div>
                 )}
@@ -85,9 +85,9 @@ export const MarkdownComment = ({ text, time, characterEveId, id }: MarkdownComm
       </InfoDrawer>
 
       <ConfirmPopup
-        target={cfRef.current}
-        visible={cfVisible}
-        onHide={cfHide}
+        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/CommentsEditor/CommentsEditor.module.scss

@@ -1,9 +0,0 @@
-.CERoot {
-  @apply border border-stone-400/30 rounded-[2px];
-
-  :global {
-    .cm-content {
-      @apply bg-stone-600/40;
-    }
-  }
-}

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

@@ -3,10 +3,9 @@ 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, useMemo, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { OutCommand } from '@/hooks/Mapper/types';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import classes from './CommentsEditor.module.scss';
 
 export interface CommentsEditorProps {}
 
@@ -19,9 +18,7 @@ export const CommentsEditor = ({}: CommentsEditorProps) => {
     outCommand,
   } = useMapRootState();
 
-  const systemId = useMemo(() => {
-    return +selectedSystems[0];
-  }, [selectedSystems]);
+  const [systemId] = selectedSystems;
 
   const ref = useRef({ outCommand, systemId, textVal });
   ref.current = { outCommand, systemId, textVal };
@@ -51,7 +48,6 @@ export const CommentsEditor = ({}: CommentsEditorProps) => {
 
   return (
     <MarkdownEditor
-      className={classes.CERoot}
       value={textVal}
       onChange={setTextVal}
       overlayContent={

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

@@ -1,9 +1,9 @@
 .CERoot {
-  @apply border border-stone-500/30 rounded-[2px];
+  @apply border border-stone-400/30 rounded-[2px];
 
   :global {
     .cm-content {
-      @apply bg-stone-950/70;
+      @apply bg-stone-600/40;
     }
 
     .cm-scroller {

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

@@ -44,17 +44,9 @@ export interface MarkdownEditorProps {
   overlayContent?: ReactNode;
   value: string;
   onChange: (value: string) => void;
-  height?: string;
-  className?: string;
 }
 
-export const MarkdownEditor = ({
-  value,
-  onChange,
-  overlayContent,
-  height = '70px',
-  className,
-}: MarkdownEditorProps) => {
+export const MarkdownEditor = ({ value, onChange, overlayContent }: MarkdownEditorProps) => {
   const [hasShift, setHasShift] = useState(false);
 
   const refData = useRef({ onChange });
@@ -74,9 +66,9 @@ export const MarkdownEditor = ({
     <div className={clsx(classes.MarkdownEditor, 'relative')}>
       <CodeMirror
         value={value}
-        height={height}
+        height="70px"
         extensions={CODE_MIRROR_EXTENSIONS}
-        className={clsx(classes.CERoot, className)}
+        className={classes.CERoot}
         theme={oneDark}
         onChange={handleOnChange}
         placeholder="Start typing..."

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

@@ -4,7 +4,6 @@ import {
   SystemView,
   TimeAgo,
   TooltipPosition,
-  WdButton,
   WdImgButton,
   WdImgButtonTooltip,
 } from '@/hooks/Mapper/components/ui-kit';
@@ -14,11 +13,11 @@ import { PingsPlacement } from '@/hooks/Mapper/mapRootProvider/types.ts';
 import { Commands, OutCommand, PingType } from '@/hooks/Mapper/types';
 import clsx from 'clsx';
 import { PrimeIcons } from 'primereact/api';
+import { Button } from 'primereact/button';
 import { ConfirmPopup } from 'primereact/confirmpopup';
 import { Toast } from 'primereact/toast';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import useRefState from 'react-usestateref';
-import { useConfirmPopup } from '@/hooks/Mapper/hooks';
 
 const PING_PLACEMENT_MAP = {
   [PingsPlacement.rightTop]: 'top-right',
@@ -79,7 +78,9 @@ export interface PingsInterfaceProps {
 export const PingsInterface = ({ hasLeftOffset }: PingsInterfaceProps) => {
   const toast = useRef<Toast>(null);
   const [isShow, setIsShow, isShowRef] = useRefState(false);
-  const { cfShow, cfHide, cfVisible, cfRef } = useConfirmPopup();
+
+  const cpRemoveBtnRef = useRef<HTMLElement>();
+  const [cpRemoveVisible, setCpRemoveVisible] = useState(false);
 
   const {
     storedSettings: { interfaceSettings },
@@ -97,6 +98,9 @@ export const PingsInterface = ({ hasLeftOffset }: PingsInterfaceProps) => {
 
   const ping = useMemo(() => (pings.length === 1 ? pings[0] : null), [pings]);
 
+  const handleShowCP = useCallback(() => setCpRemoveVisible(true), []);
+  const handleHideCP = useCallback(() => setCpRemoveVisible(false), []);
+
   const navigateTo = useCallback(() => {
     if (!ping) {
       return;
@@ -121,7 +125,6 @@ export const PingsInterface = ({ hasLeftOffset }: PingsInterfaceProps) => {
 
   useEffect(() => {
     if (!ping) {
-      setIsShow(false);
       return;
     }
 
@@ -162,26 +165,27 @@ export const PingsInterface = ({ hasLeftOffset }: PingsInterfaceProps) => {
     };
   }, [interfaceSettings]);
 
-  const isShowSelectedSystem = ping && selectedSystem != null && selectedSystem !== ping.solar_system_id;
+  if (!ping) {
+    return null;
+  }
+
+  const isShowSelectedSystem = selectedSystem != null && selectedSystem !== ping.solar_system_id;
 
-  // Only render Toast when there's a ping
   return (
     <>
-      {ping && (
-        <Toast
-          key={ping.id}
-          position={placement as never}
-          className={clsx('!max-w-[initial] w-[500px]', hasLeftOffset ? offsets.withLeftMenu : offsets.default)}
-          ref={toast}
-          content={({ message }) => (
-            <section
-              className={clsx(
-                'flex flex-col p-3 w-full border border-stone-800 shadow-md animate-fadeInDown rounded-[5px]',
-                'bg-gradient-to-tr from-transparent to-sky-700/60 bg-stone-900/70',
-              )}
-            >
-              <div className="flex gap-3">
-                <i className={clsx('pi text-yellow-500 text-2xl', 'relative top-[2px]', ICONS[ping.type])}></i>
+      <Toast
+        position={placement as never}
+        className={clsx('!max-w-[initial] w-[500px]', hasLeftOffset ? offsets.withLeftMenu : offsets.default)}
+        ref={toast}
+        content={({ message }) => (
+          <section
+            className={clsx(
+              'flex flex-col p-3 w-full border border-stone-800 shadow-md animate-fadeInDown rounded-[5px]',
+              'bg-gradient-to-tr from-transparent to-sky-700/60 bg-stone-900/70',
+            )}
+          >
+            <div className="flex gap-3">
+              <i className={clsx('pi text-yellow-500 text-2xl', 'relative top-[2px]', ICONS[ping.type])}></i>
               <div className="flex flex-col gap-1 w-full">
                 <div className="flex justify-between">
                   <div>
@@ -238,11 +242,11 @@ export const PingsInterface = ({ hasLeftOffset }: PingsInterfaceProps) => {
               />
 
               {/*@ts-ignore*/}
-              <div ref={cfRef}>
+              <div ref={cpRemoveBtnRef}>
                 <WdImgButton
                   className={clsx('pi-trash', 'text-red-400 hover:text-red-300')}
                   tooltip={DELETE_TOOLTIP_PROPS}
-                  onClick={cfShow}
+                  onClick={handleShowCP}
                 />
               </div>
               {/* TODO ADD solar system menu*/}
@@ -253,33 +257,28 @@ export const PingsInterface = ({ hasLeftOffset }: PingsInterfaceProps) => {
               {/*/>*/}
             </div>
           </section>
-          )}
-        ></Toast>
-      )}
+        )}
+      ></Toast>
 
-      {ping && (
-        <>
-          <WdButton
-            icon="pi pi-bell"
-            severity="warning"
-            aria-label="Notification"
-            size="small"
-            className="w-[33px] h-[33px]"
-            outlined
-            onClick={handleClickShow}
-            disabled={isShow}
-          />
+      <Button
+        icon="pi pi-bell"
+        severity="warning"
+        aria-label="Notification"
+        size="small"
+        className="w-[33px] h-[33px]"
+        outlined
+        onClick={handleClickShow}
+        disabled={isShow}
+      />
 
-          <ConfirmPopup
-            target={cfRef.current}
-            visible={cfVisible}
-            onHide={cfHide}
-            message="Are you sure you want to delete ping?"
-            icon="pi pi-exclamation-triangle text-orange-400"
-            accept={removePing}
-          />
-        </>
-      )}
+      <ConfirmPopup
+        target={cpRemoveBtnRef.current}
+        visible={cpRemoveVisible}
+        onHide={handleHideCP}
+        message="Are you sure you want to delete ping?"
+        icon="pi pi-exclamation-triangle text-orange-400"
+        accept={removePing}
+      />
     </>
   );
 };

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

@@ -1,12 +1,13 @@
-import { TooltipPosition, WdButton, WdImageSize, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
+import { InputText } from 'primereact/inputtext';
+import { Dialog } from 'primereact/dialog';
 import { getSystemById } from '@/hooks/Mapper/helpers';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { OutCommand } from '@/hooks/Mapper/types';
-import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager.ts';
-import { Dialog } from 'primereact/dialog';
-import { IconField } from 'primereact/iconfield';
-import { InputText } from 'primereact/inputtext';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { Button } from 'primereact/button';
+import { OutCommand } from '@/hooks/Mapper/types';
+import { IconField } from 'primereact/iconfield';
+import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager.ts';
+import { WdImageSize, WdImgButton, TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
 
 interface SystemCustomLabelDialog {
   systemId: string;
@@ -125,7 +126,7 @@ export const SystemCustomLabelDialog = ({ systemId, visible, setVisible }: Syste
           </div>
 
           <div className="flex gap-2 justify-end">
-            <WdButton type="submit" onClick={handleSave} outlined size="small" label="Save"></WdButton>
+            <Button onClick={handleSave} outlined size="small" label="Save"></Button>
           </div>
         </div>
       </form>

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

@@ -3,18 +3,18 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { useSystemInfo } from '@/hooks/Mapper/components/hooks';
 import {
-    SOLAR_SYSTEM_CLASS_IDS,
-    SOLAR_SYSTEM_CLASSES_TO_CLASS_GROUPS,
-    WORMHOLES_ADDITIONAL_INFO_BY_SHORT_NAME,
+  SOLAR_SYSTEM_CLASS_IDS,
+  SOLAR_SYSTEM_CLASSES_TO_CLASS_GROUPS,
+  WORMHOLES_ADDITIONAL_INFO_BY_SHORT_NAME,
 } from '@/hooks/Mapper/components/map/constants.ts';
 import { SystemSignaturesContent } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent';
 import { K162_TYPES_MAP } from '@/hooks/Mapper/constants.ts';
-import { SETTINGS_KEYS, SignatureSettingsType } from '@/hooks/Mapper/constants/signatures';
+import { getWhSize } from '@/hooks/Mapper/helpers/getWhSize';
 import { parseSignatureCustomInfo } from '@/hooks/Mapper/helpers/parseSignatureCustomInfo';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { CommandLinkSignatureToSystem, SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
+import { CommandLinkSignatureToSystem, SignatureGroup, SystemSignature, TimeStatus } from '@/hooks/Mapper/types';
 import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
-import { useSystemSignaturesData } from '../../widgets/SystemSignatures/hooks/useSystemSignaturesData';
+import { SETTINGS_KEYS, SignatureSettingsType } from '@/hooks/Mapper/constants/signatures';
 
 const K162_SIGNATURE_TYPE = WORMHOLES_ADDITIONAL_INFO_BY_SHORT_NAME['K162'].shortName;
 
@@ -91,7 +91,7 @@ export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignat
 
           if (k162TypeInfo) {
             // Check if the k162Type matches our target system class
-            return k162TypeInfo.value.includes(targetSystemClassGroup);
+            return customInfo.k162Type === targetSystemClassGroup;
           }
         }
 
@@ -116,14 +116,14 @@ export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignat
   );
 
   const handleSelect = useCallback(
-    (signature: SystemSignature) => {
+    async (signature: SystemSignature) => {
       if (!signature) {
         return;
       }
 
       const { outCommand } = ref.current;
 
-      outCommand({
+      await outCommand({
         type: OutCommand.linkSignatureToSystem,
         data: {
           ...data,
@@ -131,16 +131,34 @@ export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignat
         },
       });
 
+      if (parseSignatureCustomInfo(signature.custom_info).isEOL === true) {
+        await outCommand({
+          type: OutCommand.updateConnectionTimeStatus,
+          data: {
+            source: data.solar_system_source,
+            target: data.solar_system_target,
+            value: TimeStatus.eol,
+          },
+        });
+      }
+
+      const whShipSize = getWhSize(wormholes, signature.type);
+      if (whShipSize !== undefined && whShipSize !== null) {
+        await outCommand({
+          type: OutCommand.updateConnectionShipSizeType,
+          data: {
+            source: data.solar_system_source,
+            target: data.solar_system_target,
+            value: whShipSize,
+          },
+        });
+      }
+
       setVisible(false);
     },
-    [data, setVisible],
+    [data, setVisible, wormholes],
   );
 
-  const { signatures } = useSystemSignaturesData({
-    systemId: `${data.solar_system_source}`,
-    settings: LINK_SIGNTATURE_SETTINGS,
-  });
-
   useEffect(() => {
     if (!targetSystemDynamicInfo) {
       handleHide();
@@ -158,12 +176,10 @@ export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignat
     >
       <SystemSignaturesContent
         systemId={`${data.solar_system_source}`}
-        signatures={signatures}
-        hasUnsupportedLanguage={false}
-        settings={LINK_SIGNTATURE_SETTINGS}
         hideLinkedSignatures
-        selectable
+        settings={LINK_SIGNTATURE_SETTINGS}
         onSelect={handleSelect}
+        selectable={true}
         filterSignature={filterSignature}
       />
     </Dialog>

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

@@ -1,11 +1,12 @@
-import { SystemView, WdButton } from '@/hooks/Mapper/components/ui-kit';
+import { InputTextarea } from 'primereact/inputtextarea';
+import { Dialog } from 'primereact/dialog';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useCallback, useRef, useState } from 'react';
+import { Button } from 'primereact/button';
 import { OutCommand } from '@/hooks/Mapper/types';
 import { PingType } from '@/hooks/Mapper/types/ping.ts';
+import { SystemView } from '@/hooks/Mapper/components/ui-kit';
 import clsx from 'clsx';
-import { Dialog } from 'primereact/dialog';
-import { InputTextarea } from 'primereact/inputtextarea';
-import { useCallback, useRef, useState } from 'react';
 
 const PING_TITLES = {
   [PingType.Rally]: 'RALLY',
@@ -62,7 +63,7 @@ export const SystemPingDialog = ({ systemId, type, visible, setVisible }: System
         </div>
       }
       visible={visible}
-      draggable={true}
+      draggable={false}
       style={{ width: '450px' }}
       onShow={onShow}
       onHide={() => {
@@ -91,7 +92,7 @@ export const SystemPingDialog = ({ systemId, type, visible, setVisible }: System
           </div>
 
           <div className="flex gap-2 justify-end">
-            <WdButton type="submit" onClick={handleSave} size="small" severity="danger" label="Ping!" />
+            <Button onClick={handleSave} size="small" severity="danger" label="Ping!"></Button>
           </div>
         </div>
       </form>

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

@@ -1,15 +1,16 @@
-import { TooltipPosition, WdButton, WdImageSize, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
+import { InputText } from 'primereact/inputtext';
+import { InputTextarea } from 'primereact/inputtextarea';
+import { Dialog } from 'primereact/dialog';
 import { getSystemById } from '@/hooks/Mapper/helpers';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
-import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
-import { OutCommand } from '@/hooks/Mapper/types';
-import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager.ts';
-import { Dialog } from 'primereact/dialog';
-import { IconField } from 'primereact/iconfield';
-import { InputText } from 'primereact/inputtext';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { MarkdownEditor } from '@/hooks/Mapper/components/mapInterface/components/MarkdownEditor';
+import { Button } from 'primereact/button';
+import { OutCommand } from '@/hooks/Mapper/types';
+import { IconField } from 'primereact/iconfield';
+import { TooltipPosition, WdImageSize, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
+import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager.ts';
+import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
 
 interface SystemSettingsDialog {
   systemId: string;
@@ -113,7 +114,7 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
     <Dialog
       header="System settings"
       visible={visible}
-      draggable={true}
+      draggable={false}
       style={{ width: '450px' }}
       onShow={onShow}
       onHide={() => {
@@ -125,7 +126,7 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
       }}
     >
       <form onSubmit={handleSave}>
-        <div className="flex flex-col gap-3 px-2">
+        <div className="flex flex-col gap-3">
           <div className="flex flex-col gap-2">
             <div className="flex flex-col gap-1">
               <label htmlFor="username">Custom name</label>
@@ -214,14 +215,18 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
 
             <div className="flex flex-col gap-1">
               <label htmlFor="username">Description</label>
-              <div className="h-[200px]">
-                <MarkdownEditor value={description} onChange={e => setDescription(e)} height="180px" />
-              </div>
+              <InputTextarea
+                autoResize
+                rows={5}
+                cols={30}
+                value={description}
+                onChange={e => setDescription(e.target.value)}
+              />
             </div>
           </div>
 
           <div className="flex gap-2 justify-end">
-            <WdButton onClick={handleSave} outlined size="small" label="Save" type="submit" />
+            <Button onClick={handleSave} outlined size="small" label="Save"></Button>
           </div>
         </div>
       </form>

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

@@ -7,7 +7,6 @@ import {
   SystemStructures,
   WRoutesPublic,
   WRoutesUser,
-  WRoutesBy,
   WSystemKills,
 } from '@/hooks/Mapper/components/mapInterface/widgets';
 
@@ -19,7 +18,6 @@ export enum WidgetsIds {
   signatures = 'signatures',
   local = 'local',
   routes = 'routes',
-  routesBy = 'routesBy',
   structures = 'structures',
   kills = 'kills',
   comments = 'comments',
@@ -62,13 +60,6 @@ export const DEFAULT_WIDGETS: WindowProps[] = [
     zIndex: 0,
     content: () => <WRoutesPublic />,
   },
-  {
-    id: WidgetsIds.routesBy,
-    position: { x: 10, y: 740 },
-    size: { width: 510, height: 200 },
-    zIndex: 0,
-    content: () => <WRoutesBy />,
-  },
   {
     id: WidgetsIds.userRoutes,
     position: { x: 10, y: 10 },
@@ -121,10 +112,6 @@ export const WIDGETS_CHECKBOXES_PROPS: WidgetsCheckboxesType = [
     id: WidgetsIds.routes,
     label: 'Routes',
   },
-  {
-    id: WidgetsIds.routesBy,
-    label: 'Routes By',
-  },
   {
     id: WidgetsIds.userRoutes,
     label: 'User Routes',

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

@@ -1,9 +1,11 @@
-import { useRouteProvider } from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesProvider.tsx';
-import { PrettySwitchbox } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/components';
-import { WdButton } from '@/hooks/Mapper/components/ui-kit';
-import { RoutesType } from '@/hooks/Mapper/mapRootProvider/types.ts';
 import { Dialog } from 'primereact/dialog';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { Button } from 'primereact/button';
+import {
+  RoutesType,
+  useRouteProvider,
+} from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesProvider.tsx';
+import { PrettySwitchbox } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/components';
 
 interface RoutesSettingsDialog {
   visible: boolean;
@@ -81,7 +83,7 @@ export const RoutesSettingsDialog = ({ visible, setVisible }: RoutesSettingsDial
         </div>
 
         <div className="flex gap-2 justify-end">
-          <WdButton onClick={handleSave} outlined size="small" label="Apply"></WdButton>
+          <Button onClick={handleSave} outlined size="small" label="Apply"></Button>
         </div>
       </div>
     </Dialog>

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

@@ -41,7 +41,7 @@ export const RoutesWidgetContent = () => {
   const {
     data: { selectedSystems, systems, isSubscriptionActive },
   } = useMapRootState();
-  const { hubs = [], routesList, isRestricted, loading, nohubsPlaceholder } = useRouteProvider();
+  const { hubs = [], routesList, isRestricted, loading } = useRouteProvider();
 
   const [systemId] = selectedSystems;
 
@@ -105,11 +105,7 @@ export const RoutesWidgetContent = () => {
   }
 
   if (hubs.length === 0) {
-    return (
-      <div className="w-full h-full flex justify-center items-center select-none">
-        {nohubsPlaceholder ?? 'Routes not set'}
-      </div>
-    );
+    return <div className="w-full h-full flex justify-center items-center select-none">Routes not set</div>;
   }
 
   return (
@@ -133,6 +129,7 @@ export const RoutesWidgetContent = () => {
                       offset: 10,
                     }}
                   />
+
                   <SystemView
                     systemId={route.destination.toString()}
                     className={clsx('select-none text-center cursor-context-menu')}
@@ -141,7 +138,7 @@ export const RoutesWidgetContent = () => {
                     showCustomName
                   />
                 </div>
-                <div className="text-right pl-1">{route.has_connection ? (route.systems?.length ?? 2) : ''}</div>
+                <div className="text-right pl-1">{route.has_connection ? route.systems?.length ?? 2 : ''}</div>
                 <div className="pl-2 pb-0.5">
                   <RoutesList data={route} onContextMenu={handleContextMenu} />
                 </div>
@@ -150,7 +147,9 @@ export const RoutesWidgetContent = () => {
           })}
         </div>
       </LoadingWrapper>
+
       <ContextMenuSystemInfo
+        hubs={hubs}
         routes={preparedRoutes}
         systems={systems}
         systemStatics={systemStatics}
@@ -163,10 +162,9 @@ export const RoutesWidgetContent = () => {
 
 type RoutesWidgetCompProps = {
   title: ReactNode | string;
-  renderContent?: (content: ReactNode, compact: boolean) => ReactNode;
 };
 
-export const RoutesWidgetComp = ({ title, renderContent }: RoutesWidgetCompProps) => {
+export const RoutesWidgetComp = ({ title }: RoutesWidgetCompProps) => {
   const [routeSettingsVisible, setRouteSettingsVisible] = useState(false);
   const { data, update, addHubCommand } = useRouteProvider();
 
@@ -185,7 +183,7 @@ export const RoutesWidgetComp = ({ title, renderContent }: RoutesWidgetCompProps
   const onAddSystem = useCallback(() => setOpenAddSystem(true), []);
 
   const handleSubmitAddSystem: SearchOnSubmitCallback = useCallback(
-    async item => addHubCommand?.(item.value.toString()),
+    async item => addHubCommand(item.value.toString()),
     [addHubCommand],
   );
 
@@ -193,17 +191,15 @@ export const RoutesWidgetComp = ({ title, renderContent }: RoutesWidgetCompProps
     <Widget
       label={
         <div className="flex justify-between items-center text-xs w-full" ref={ref}>
-          <div className="select-none flex items-center gap-2">{title}</div>
+          <span className="select-none">{title}</span>
           <LayoutEventBlocker className="flex items-center gap-2">
-            {addHubCommand && (
-              <WdImgButton
-                className={PrimeIcons.PLUS_CIRCLE}
-                onClick={onAddSystem}
-                tooltip={{
-                  content: 'Click here to add new system to routes',
-                }}
-              />
-            )}
+            <WdImgButton
+              className={PrimeIcons.PLUS_CIRCLE}
+              onClick={onAddSystem}
+              tooltip={{
+                content: 'Click here to add new system to routes',
+              }}
+            />
 
             <WdTooltipWrapper content="Show shortest route" position={TooltipPosition.top}>
               <WdCheckbox
@@ -227,38 +223,24 @@ export const RoutesWidgetComp = ({ title, renderContent }: RoutesWidgetCompProps
         </div>
       }
     >
-      {renderContent ? (
-        renderContent(
-          <div className="h-full overflow-auto bg-opacity-5 custom-scrollbar">
-            <RoutesWidgetContent />
-          </div>,
-          compact,
-        )
-      ) : (
-        <div className="h-full overflow-auto bg-opacity-5 custom-scrollbar">
-          <RoutesWidgetContent />
-        </div>
-      )}
-
+      <RoutesWidgetContent />
       <RoutesSettingsDialog visible={routeSettingsVisible} setVisible={setRouteSettingsVisible} />
 
-      {addHubCommand && (
-        <AddSystemDialog
-          title="Add system to routes"
-          visible={openAddSystem}
-          setVisible={() => setOpenAddSystem(false)}
-          onSubmit={handleSubmitAddSystem}
-        />
-      )}
+      <AddSystemDialog
+        title="Add system to routes"
+        visible={openAddSystem}
+        setVisible={() => setOpenAddSystem(false)}
+        onSubmit={handleSubmitAddSystem}
+      />
     </Widget>
   );
 };
 
 export const RoutesWidget = forwardRef<RoutesImperativeHandle, RoutesWidgetProps & RoutesWidgetCompProps>(
-  ({ title, renderContent, ...props }, ref) => {
+  ({ title, ...props }, ref) => {
     return (
       <RoutesProvider {...props} ref={ref}>
-        <RoutesWidgetComp title={title} renderContent={renderContent} />
+        <RoutesWidgetComp title={title} />
       </RoutesProvider>
     );
   },

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

@@ -1,2 +1 @@
 export * from './useLoadRoutes';
-export * from './useLoadRoutesBy';

assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/hooks/useLoadRoutes.ts

@@ -3,7 +3,6 @@ import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { RoutesType } from '@/hooks/Mapper/mapRootProvider/types.ts';
 import { LoadRoutesCommand } from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/types.ts';
 import { RoutesList } from '@/hooks/Mapper/types/routes.ts';
-import { flattenValues } from '@/hooks/Mapper/utils/flattenValues.ts';
 
 function usePrevious<T>(value: T): T | undefined {
   const ref = useRef<T>();
@@ -65,8 +64,12 @@ export const useLoadRoutes = ({
     systems?.length,
     connections,
     hubs,
-    // we need make it flat recursively
-    ...flattenValues(routesSettings),
+    routesSettings,
+    ...Object.keys(routesSettings)
+      .sort()
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      .map(x => routesSettings[x]),
     ...deps,
   ]);
 

assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/hooks/useLoadRoutesBy.ts

@@ -1,71 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { RoutesType } from '@/hooks/Mapper/mapRootProvider/types.ts';
-import { LoadRoutesCommand } from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/types.ts';
-import { RoutesList } from '@/hooks/Mapper/types/routes.ts';
-import { flattenValues } from '@/hooks/Mapper/utils/flattenValues.ts';
-import { useMapEventListener } from '@/hooks/Mapper/events';
-import { Commands } from '@/hooks/Mapper/types';
-
-function usePrevious<T>(value: T): T | undefined {
-  const ref = useRef<T>();
-
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-
-  return ref.current;
-}
-
-type UseLoadRoutesByProps = {
-  loadRoutesCommand: LoadRoutesCommand;
-  routesList: RoutesList | undefined;
-  data: RoutesType;
-  deps?: unknown[];
-};
-
-export const useLoadRoutesBy = ({
-  data: routesSettings,
-  loadRoutesCommand,
-  routesList,
-  deps = [],
-}: UseLoadRoutesByProps) => {
-  const [loading, setLoading] = useState(false);
-
-  const {
-    data: { selectedSystems },
-  } = useMapRootState();
-
-  const prevSys = usePrevious(selectedSystems);
-  const ref = useRef({ prevSys, selectedSystems });
-  ref.current = { prevSys, selectedSystems };
-
-  const loadRoutes = useCallback(
-    (systemId: string, settings: RoutesType) => {
-      loadRoutesCommand(systemId, settings);
-      setLoading(true);
-    },
-    [loadRoutesCommand],
-  );
-
-  useMapEventListener(event => {
-    if (event.name === Commands.routesListBy) {
-      setLoading(false);
-    }
-  });
-
-  useEffect(() => {
-    setLoading(false);
-  }, [routesList]);
-
-  useEffect(() => {
-    if (selectedSystems.length !== 1) {
-      return;
-    }
-
-    const [systemId] = selectedSystems;
-    loadRoutes(systemId, routesSettings);
-  }, [loadRoutes, selectedSystems, ...flattenValues(routesSettings), ...deps]);
-
-  return { loading, loadRoutes, setLoading };
-};