chore: release version v1.79.0

Update lifetime

.github/workflows/build.yml

@@ -5,7 +5,7 @@ on:
     branches:
       - main
       - develop
-      - "releases/*"
+
 env:
   MIX_ENV: prod
   GH_TOKEN: ${{ github.token }}
@@ -53,6 +53,7 @@ jobs:
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v3
         with:
+          ssh-key: "${{ secrets.COMMIT_KEY }}"
           fetch-depth: 0
       - name: 😅 Cache deps
         id: cache-deps
@@ -95,9 +96,10 @@ 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
         if: github.ref == 'refs/heads/develop'
@@ -106,11 +108,9 @@ jobs:
 
   docker:
     name: 🛠 Build Docker Images
+    if: github.ref == 'refs/heads/develop'
     needs: build
     runs-on: ubuntu-22.04
-    outputs:
-      release-tag: ${{ steps.get-latest-tag.outputs.tag }}
-      release-notes: ${{ steps.get-content.outputs.string }}
     permissions:
       checks: write
       contents: write
@@ -137,19 +137,6 @@ jobs:
           ref: ${{ needs.build.outputs.commit_hash }}
           fetch-depth: 0
 
-      - name: Prepare Changelog
-        if: github.ref == 'refs/heads/main'
-        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
-        if: github.ref == 'refs/heads/main'
-        uses: "WyriHaximus/github-action-get-previous-tag@v1"
-        with:
-          fallback: 1.0.0
-
       - name: Extract metadata (tags, labels) for Docker
         id: meta
         uses: docker/metadata-action@v5
@@ -198,26 +185,6 @@ jobs:
           if-no-files-found: error
           retention-days: 1
 
-      - uses: markpatterson27/markdown-to-output@v1
-        id: extract-changelog
-        if: github.ref == 'refs/heads/main'
-        with:
-          filepath: CHANGELOG.md
-
-      - name: Get content
-        uses: 2428392/gh-truncate-string-action@v1.3.0
-        id: get-content
-        if: github.ref == 'refs/heads/main'
-        with:
-          stringToTruncate: |
-            📣 Wanderer new release available 🎉
-
-            **Version**: ${{ steps.get-latest-tag.outputs.tag }}
-
-            ${{ steps.extract-changelog.outputs.body }}
-          maxLength: 500
-          truncationSymbol: "…"
-
   merge:
     runs-on: ubuntu-latest
     needs:
@@ -248,9 +215,6 @@ jobs:
           tags: |
             type=ref,event=branch
             type=ref,event=pr
-            type=semver,pattern={{version}},enable=${{ github.ref == 'refs/heads/main' }}
-            type=semver,pattern={{major}}.{{minor}},enable=${{ github.ref == 'refs/heads/main' }}
-            type=semver,pattern={{version}},value=${{ needs.docker.outputs.release-tag }},enable=${{ github.ref == 'refs/heads/main' }}
             type=raw,value=develop,enable=${{ github.ref == 'refs/heads/develop' }}
             type=raw,value=develop-{{sha}},enable=${{ github.ref == 'refs/heads/develop' }}
 
@@ -267,19 +231,25 @@ 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: ${{ needs.docker.outputs.release-tag }}
-          name: Release ${{ needs.docker.outputs.release-tag }}
+          tag_name: ${{ steps.get-latest-tag.outputs.tag }}
+          name: Release ${{ steps.get-latest-tag.outputs.tag }}
           body: |
             ## Info
             Commit ${{ github.sha }} was deployed to `staging`. [See code diff](${{ github.event.compare }}).
@@ -289,10 +259,3 @@ jobs:
             ## How to Promote?
             In order to promote this to prod, edit the draft and press **"Publish release"**.
           draft: true
-
-      - name: Discord Webhook Action
-        uses: tsickert/discord-webhook@v5.3.0
-        if: github.ref == 'refs/heads/main'
-        with:
-          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
-          content: ${{ needs.docker.outputs.release-notes }}

.github/workflows/docker-arm.yml

@@ -0,0 +1,187 @@
+name: Build Docker ARM Image
+
+on:
+  push:
+    tags:
+      - '**'
+
+env:
+  MIX_ENV: prod
+  GH_TOKEN: ${{ github.token }}
+  REGISTRY_IMAGE: wandererltd/community-edition-arm
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: write
+
+jobs:
+  docker:
+    name: 🛠 Build Docker Images
+    runs-on: ubuntu-22.04
+    outputs:
+      release-tag: ${{ steps.get-latest-tag.outputs.tag }}
+      release-notes: ${{ steps.get-content.outputs.string }}
+    permissions:
+      checks: write
+      contents: write
+      packages: write
+      attestations: write
+      id-token: write
+      pull-requests: write
+      repository-projects: write
+    strategy:
+      fail-fast: false
+      matrix:
+        platform:
+          - linux/arm64
+    steps:
+      - name: Prepare
+        run: |
+          platform=${{ matrix.platform }}
+          echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
+
+      - 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: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ steps.get-latest-tag.outputs.tag }}
+          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: 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
+
+      - uses: markpatterson27/markdown-to-output@v1
+        id: extract-changelog
+        with:
+          filepath: CHANGELOG.md
+
+      - name: Get content
+        uses: 2428392/gh-truncate-string-action@v1.3.0
+        id: get-content
+        with:
+          stringToTruncate: |
+            📣 Wanderer **ARM**  release available 🎉
+
+            **Version**: :${{ steps.get-latest-tag.outputs.tag }}
+
+            ${{ steps.extract-changelog.outputs.body }}
+          maxLength: 500
+          truncationSymbol: "…"
+
+  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=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{version}},value=${{ needs.docker.outputs.release-tag }}
+
+      - name: Create manifest list and push
+        working-directory: /tmp/digests
+        run: |
+          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf '${{ env.REGISTRY_IMAGE }}@sha256:%s ' *)
+
+      - name: Inspect image
+        run: |
+          docker buildx imagetools inspect ${{ env.REGISTRY_IMAGE }}:${{ steps.meta.outputs.version }}
+
+  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:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          content: ${{ needs.docker.outputs.release-notes }}

.github/workflows/docker.yml

@@ -0,0 +1,187 @@
+name: Build Docker Image
+
+on:
+  push:
+    tags:
+      - '**'
+
+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:
+  docker:
+    name: 🛠 Build Docker Images
+    runs-on: ubuntu-22.04
+    outputs:
+      release-tag: ${{ steps.get-latest-tag.outputs.tag }}
+      release-notes: ${{ steps.get-content.outputs.string }}
+    permissions:
+      checks: write
+      contents: write
+      packages: write
+      attestations: write
+      id-token: write
+      pull-requests: write
+      repository-projects: write
+    strategy:
+      fail-fast: false
+      matrix:
+        platform:
+          - linux/amd64
+    steps:
+      - name: Prepare
+        run: |
+          platform=${{ matrix.platform }}
+          echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
+
+      - 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: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ steps.get-latest-tag.outputs.tag }}
+          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: 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
+
+      - uses: markpatterson27/markdown-to-output@v1
+        id: extract-changelog
+        with:
+          filepath: CHANGELOG.md
+
+      - name: Get content
+        uses: 2428392/gh-truncate-string-action@v1.3.0
+        id: get-content
+        with:
+          stringToTruncate: |
+            📣 Wanderer new release available 🎉
+
+            **Version**: ${{ steps.get-latest-tag.outputs.tag }}
+
+            ${{ steps.extract-changelog.outputs.body }}
+          maxLength: 500
+          truncationSymbol: "…"
+
+  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=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{version}},value=${{ needs.docker.outputs.release-tag }}
+
+      - name: Create manifest list and push
+        working-directory: /tmp/digests
+        run: |
+          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf '${{ env.REGISTRY_IMAGE }}@sha256:%s ' *)
+
+      - name: Inspect image
+        run: |
+          docker buildx imagetools inspect ${{ env.REGISTRY_IMAGE }}:${{ steps.meta.outputs.version }}
+
+  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:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          content: ${{ needs.docker.outputs.release-notes }}

Dockerfile

@@ -21,21 +21,17 @@ 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 compile
-
 RUN mix assets.deploy
+RUN mix compile
 
 # Changes to config/runtime.exs don't require recompiling the code
 COPY config/runtime.exs config/
-
 COPY rel rel
+
 RUN mix release
 
 # start a new build stage so that the final image will only contain

assets/.eslintrc.cjs

@@ -18,5 +18,28 @@ 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/js/hooks/Mapper/common-styles/main.scss

@@ -1,18 +1,13 @@
 // import './tailwind.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 'primereact/resources/primereact.min.css';
+@use 'primeicons/primeicons.css';
 
 
-@import "fixes";
-@import "prime-fixes";
-@import "custom-scrollbar";
-@import "tooltip";
-@import "context-menu";
+@use "fixes";
+@use "prime-fixes";
+@use "custom-scrollbar";
+@use "tooltip";
+@use "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: 300px;
+  min-height: 400px;
 
   .p-tabview {
     width: 100%;
@@ -68,6 +68,28 @@
         }
 
       }
+
+      &.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,6 +1,3 @@
-@import "fix-dialog";
-@import "fix-popup";
-@import "fix-tabs";
-//@import "fix-input";
-
-//@import "theme";
+@use "fix-dialog";
+@use "fix-popup";
+@use "fix-tabs";

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, hasPing: boolean): void;
+  onTogglePing(type: PingType, solar_system_id: string, ping_id: string | undefined, hasPing: boolean): void;
   onWaypointSet: WaypointSetContextHandler;
 }
 

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

@@ -5,8 +5,7 @@ import { SolarSystemRawType } from '@/hooks/Mapper/types';
 import { getSystemById } from '@/hooks/Mapper/helpers';
 import clsx from 'clsx';
 import { GRADIENT_MENU_ACTIVE_CLASSES } from '@/hooks/Mapper/constants.ts';
-import { LayoutEventBlocker } from '@/hooks/Mapper/components/ui-kit';
-import { Button } from 'primereact/button';
+import { LayoutEventBlocker, WdButton } from '@/hooks/Mapper/components/ui-kit';
 
 const AVAILABLE_TAGS = [
   'A',
@@ -61,7 +60,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 => (
-                    <Button
+                    <WdButton
                       outlined={system?.tag !== x}
                       severity="warning"
                       key={x}
@@ -71,9 +70,9 @@ export const useTagMenu = (
                       onClick={() => system?.tag !== x && onSystemTag(x)}
                     >
                       {x}
-                    </Button>
+                    </WdButton>
                   ))}
-                  <Button
+                  <WdButton
                     disabled={!isSelectedTag}
                     icon="pi pi-ban"
                     size="small"
@@ -81,7 +80,7 @@ export const useTagMenu = (
                     outlined
                     severity="help"
                     onClick={() => onSystemTag()}
-                  ></Button>
+                  ></WdButton>
                 </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, hasPing),
+        command: () => onTogglePing(PingType.Rally, systemId, ping?.id, hasPing),
         disabled: !isShowPingBtn,
         template: () => {
           const iconClasses = clsx({

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

@@ -1,17 +1,24 @@
 import { Node } from 'reactflow';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useMemo, 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';
 
 export const useContextMenuSystemMultipleHandlers = () => {
+  const {
+    data: { pings },
+  } = useMapRootState();
+
   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 handleSystemMultipleContext: NodeSelectionMouseHandler = (ev, systems_) => {
     setSystems(systems_);
     ev.preventDefault();
@@ -24,13 +31,17 @@ export const useContextMenuSystemMultipleHandlers = () => {
       return;
     }
 
-    const sysToDel = systems.filter(x => !x.data.locked).map(x => x.id);
+    const sysToDel = systems
+      .filter(x => !x.data.locked)
+      .filter(x => x.id !== ping?.solar_system_id)
+      .map(x => x.id);
+
     if (sysToDel.length === 0) {
       return;
     }
 
     deleteSystems(sysToDel);
-  }, [deleteSystems, systems]);
+  }, [deleteSystems, systems, ping]);
 
   return {
     handleSystemMultipleContext,

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

@@ -1,6 +1,6 @@
 import { MapUserSettings, SettingsWithVersion } from '@/hooks/Mapper/mapRootProvider/types.ts';
 
-const REQUIRED_KEYS = [
+export const REQUIRED_KEYS = [
   'widgets',
   'interface',
   'onTheMap',

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

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

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

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

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

@@ -1,3 +1,10 @@
+import { NodeSelectionMouseHandler } from '@/hooks/Mapper/components/contexts/types.ts';
+import { SESSION_KEY } from '@/hooks/Mapper/constants.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 } from 'react';
 import ReactFlow, {
   Background,
@@ -16,8 +23,6 @@ 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,
@@ -26,14 +31,9 @@ import {
   useContextMenuRootHandlers,
 } from './components';
 import { getBehaviorForTheme } from './helpers/getThemeBehavior';
-import { OnMapAddSystemCallback, OnMapSelectionChange } from './map.types';
-import { SESSION_KEY } from '@/hooks/Mapper/constants.ts';
-import { PingData, SolarSystemConnection, SolarSystemRawType } from '@/hooks/Mapper/types';
-import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
-import { NodeSelectionMouseHandler } from '@/hooks/Mapper/components/contexts/types.ts';
-import clsx from 'clsx';
+import { useEdgesState, useMapHandlers, useNodesState, useUpdateNodes } from './hooks';
 import { useBackgroundVars } from './hooks/useBackgroundVars';
-import type { PanelPosition } from '@reactflow/core';
+import { OnMapAddSystemCallback, OnMapSelectionChange } from './map.types';
 
 const DEFAULT_VIEW_PORT = { zoom: 1, x: 0, y: 0 };
 

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

@@ -1,4 +1,4 @@
-@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
+@use '@/hooks/Mapper/components/map/styles/eve-common-variables';
 
 .ConnectionTimeEOL {
   background-image: linear-gradient(207deg, transparent, var(--conn-time-eol));
@@ -8,6 +8,10 @@
   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));
 }
@@ -15,3 +19,14 @@
 .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,10 +1,3 @@
-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 classes from './ContextMenuConnection.module.scss';
 import {
   MASS_STATE_NAMES,
   MASS_STATE_NAMES_ORDER,
@@ -13,14 +6,25 @@ import {
   SHIP_SIZES_NAMES_SHORT,
   SHIP_SIZES_SIZE,
 } from '@/hooks/Mapper/components/map/constants.ts';
+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 classes from './ContextMenuConnection.module.scss';
+import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic.ts';
+import { isNullsecSpace } from '@/hooks/Mapper/components/map/helpers/isKnownSpace.ts';
 
 export interface ContextMenuConnectionProps {
   contextMenuRef: RefObject<ContextMenu>;
   onDeleteConnection(): void;
-  onChangeTimeState(): void;
+  onChangeTimeState(lifetime: TimeStatus): void;
   onChangeMassState(state: MassState): void;
   onChangeShipSizeStatus(state: ShipSizeStatus): void;
+  onChangeType(type: ConnectionType): void;
   onToggleMassSave(isLocked: boolean): void;
   onHide(): void;
   edge?: Edge<SolarSystemConnection>;
@@ -32,6 +36,7 @@ export const ContextMenuConnection: React.FC<ContextMenuConnectionProps> = ({
   onChangeTimeState,
   onChangeMassState,
   onChangeShipSizeStatus,
+  onChangeType,
   onToggleMassSave,
   onHide,
   edge,
@@ -41,88 +46,128 @@ 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;
-    const isWormhole = edge.data?.type !== ConnectionType.gate;
+
+    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,
+        },
+      ];
+    }
 
     return [
-      ...(isWormhole
+      {
+        className: clsx(classes.FastActions, '!h-[54px]'),
+        template: () => {
+          return <LifetimeActionsWrapper lifetime={edge.data?.time_status} onChangeLifetime={onChangeTimeState} />;
+        },
+      },
+      {
+        label: `Frigate`,
+        className: clsx({
+          [classes.ConnectionFrigate]: isFrigateSize,
+        }),
+        icon: PrimeIcons.CLOUD,
+        command: () =>
+          onChangeShipSizeStatus(
+            edge.data?.ship_size_type === ShipSizeStatus.small ? ShipSizeStatus.large : ShipSizeStatus.small,
+          ),
+      },
+      {
+        label: `Save mass`,
+        className: clsx({
+          [classes.ConnectionSave]: edge.data?.locked,
+        }),
+        icon: PrimeIcons.LOCK,
+        command: () => onToggleMassSave(!edge.data?.locked),
+      },
+      ...(!isFrigateSize
         ? [
             {
-              label: `EOL`,
-              className: clsx({
-                [classes.ConnectionTimeEOL]: edge.data?.time_status === TimeStatus.eol,
-              }),
-              icon: PrimeIcons.CLOCK,
-              command: onChangeTimeState,
-            },
-            {
-              label: `Frigate`,
-              className: clsx({
-                [classes.ConnectionFrigate]: isFrigateSize,
-              }),
-              icon: PrimeIcons.CLOUD,
-              command: () =>
-                onChangeShipSizeStatus(
-                  edge.data?.ship_size_type === ShipSizeStatus.small ? ShipSizeStatus.large : ShipSizeStatus.small,
-                ),
-            },
-            {
-              label: `Save mass`,
-              className: clsx({
-                [classes.ConnectionSave]: edge.data?.locked,
-              }),
-              icon: PrimeIcons.LOCK,
-              command: () => onToggleMassSave(!edge.data?.locked),
-            },
-            ...(!isFrigateSize
-              ? [
-                  {
-                    label: `Mass status`,
-                    icon: PrimeIcons.CHART_PIE,
-                    items: MASS_STATE_NAMES_ORDER.map(x => ({
-                      label: MASS_STATE_NAMES[x],
-                      className: clsx({
-                        [classes.SelectedItem]: edge.data?.mass_status === x,
-                      }),
-                      command: () => onChangeMassState(x),
-                    })),
-                  },
-                ]
-              : []),
-
-            {
-              label: `Ship Size`,
-              icon: PrimeIcons.CLOUD,
-              items: SHIP_SIZES_NAMES_ORDER.map(x => ({
-                label: (
-                  <div className="grid grid-cols-[20px_120px_1fr_40px] gap-2 items-center">
-                    <div className="text-[12px] font-bold text-stone-400">{SHIP_SIZES_NAMES_SHORT[x]}</div>
-                    <div>{SHIP_SIZES_NAMES[x]}</div>
-                    <div></div>
-                    <div className="flex justify-end whitespace-nowrap text-[12px] font-bold text-stone-500">
-                      {SHIP_SIZES_SIZE[x]} t.
-                    </div>
-                  </div>
-                ) as unknown as string, // TODO my lovely kostyl
+              label: `Mass status`,
+              icon: PrimeIcons.CHART_PIE,
+              items: MASS_STATE_NAMES_ORDER.map(x => ({
+                label: MASS_STATE_NAMES[x],
                 className: clsx({
-                  [classes.SelectedItem]: edge.data?.ship_size_type === x,
+                  [classes.SelectedItem]: edge.data?.mass_status === x,
                 }),
-                command: () => onChangeShipSizeStatus(x),
+                command: () => onChangeMassState(x),
               })),
             },
           ]
         : []),
+      {
+        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),
+        })),
+      },
+      ...(bothNullsec
+        ? [
+            {
+              label: `Set as Bridge`,
+              icon: 'pi hero-forward',
+              command: () => onChangeType(ConnectionType.bridge),
+            },
+          ]
+        : []),
       {
         label: 'Disconnect',
         icon: PrimeIcons.TRASH,
         command: onDeleteConnection,
       },
     ];
-  }, [edge, onChangeTimeState, onDeleteConnection, onChangeShipSizeStatus, onToggleMassSave, onChangeMassState]);
+  }, [
+    edge,
+    onChangeTimeState,
+    onDeleteConnection,
+    onChangeType,
+    onChangeShipSizeStatus,
+    onToggleMassSave,
+    onChangeMassState,
+  ]);
 
   return (
     <>
-      <ContextMenu model={items} ref={contextMenuRef} onHide={onHide} breakpoint="767px" />
+      <ContextMenu model={items} ref={contextMenuRef} onHide={onHide} breakpoint="767px" className="!w-[250px]" />
     </>
   );
 };

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

@@ -0,0 +1,12 @@
+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/useContextMenuConnectionHandlers.ts

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

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

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

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

@@ -46,7 +46,13 @@ export const LocalCounter = ({ localCounterCharacters, hasUserCharacters, showIc
         [classes.Pathfinder]: theme === AvailableThemes.pathfinder,
       })}
     >
-      <WdTooltipWrapper content={pilotTooltipContent} position={TooltipPosition.right} offset={0} interactive={true}>
+      <WdTooltipWrapper
+        content={pilotTooltipContent}
+        position={TooltipPosition.right}
+        offset={0}
+        interactive={true}
+        smallPaddings
+      >
         <div className={clsx(classes.hoverTarget)}>
           <div
             className={clsx(classes.localCounter, {

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

@@ -1,10 +1,20 @@
-@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
+@use '@/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;
@@ -29,6 +39,13 @@
   &.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,6 +9,7 @@ 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%)',
@@ -42,7 +43,9 @@ 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.gate;
+  const isWormhole = data?.type === ConnectionType.wormhole;
+  const isGate = data?.type === ConnectionType.gate;
+  const isBridge = data?.type === ConnectionType.bridge;
 
   const {
     data: { isThickConnections },
@@ -55,9 +58,7 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
 
     const offset = isThickConnections ? MAP_OFFSETS_TICK[targetPos] : MAP_OFFSETS[targetPos];
 
-    const method = isWormhole ? getBezierPath : getBezierPath;
-
-    const [edgePath, labelX, labelY] = method({
+    const [edgePath, labelX, labelY] = getBezierPath({
       sourceX: sx - offset.x,
       sourceY: sy - offset.y,
       sourcePosition: sourcePos,
@@ -67,7 +68,7 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
     });
 
     return [edgePath, labelX, labelY, sx, sy, tx, ty, sourcePos, targetPos];
-  }, [isThickConnections, sourceNode, targetNode, isWormhole]);
+  }, [isThickConnections, sourceNode, targetNode]);
 
   if (!sourceNode || !targetNode || !data) {
     return null;
@@ -79,9 +80,11 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
         id={`back_${id}`}
         className={clsx(classes.EdgePathBack, {
           [classes.Tick]: isThickConnections,
-          [classes.TimeCrit]: isWormhole && data.time_status === TimeStatus.eol,
+          [classes.time1]: isWormhole && data.time_status === TimeStatus._1h,
+          [classes.time4]: isWormhole && data.time_status === TimeStatus._4h,
           [classes.Hovered]: hovered,
-          [classes.Gate]: !isWormhole,
+          [classes.Gate]: isGate,
+          [classes.Bridge]: isBridge,
         })}
         d={path}
         markerEnd={markerEnd}
@@ -95,7 +98,8 @@ 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]: !isWormhole,
+          [classes.Gate]: isGate,
+          [classes.Bridge]: isBridge,
         })}
         d={path}
         markerEnd={markerEnd}
@@ -147,6 +151,19 @@ 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,4 +1,5 @@
-@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
+@use "sass:color";
+@use '@/hooks/Mapper/components/map/styles/eve-common-variables';
 
 $pastel-blue: #5a7d9a;
 $pastel-pink: rgb(30, 161, 255);
@@ -34,7 +35,7 @@ $neon-color-3: rgba(27, 132, 236, 0.40);
   color: var(--rf-text-color, #ffffff);
 
   box-shadow: 0 0 5px rgba($dark-bg, 0.5);
-  border: 1px solid darken($pastel-blue, 10%);
+  border: 1px solid color.adjust($pastel-blue, $lightness: -10%);
   border-radius: 5px;
   position: relative;
   z-index: 3;

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

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

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

@@ -21,7 +21,9 @@ import { KillsCounter } from '@/hooks/Mapper/components/map/components/KillsCoun
 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++);
 

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

@@ -1,4 +1,4 @@
-@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
+@use '@/hooks/Mapper/components/map/styles/eve-common-variables';
 
 .Signature {
   position: relative;

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

@@ -58,6 +58,7 @@ export const UnsplashedSignature = ({ signature }: UnsplashedSignatureProps) =>
           </InfoDrawer>
         </div>
       }
+      smallPaddings
     >
       <div className={clsx(classes.Box, whClassStyle)}>
         <svg width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg">

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

@@ -716,11 +716,12 @@ export const STATUS_CLASSES: Record<number, string> = {
   [STATUSES.dangerous]: 'eve-system-status-dangerous',
 };
 
-export const TYPE_NAMES_ORDER = [ConnectionType.wormhole, ConnectionType.gate];
+export const TYPE_NAMES_ORDER = [ConnectionType.wormhole, ConnectionType.gate, ConnectionType.bridge];
 
 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/isKnownSpace.ts

@@ -15,3 +15,12 @@ 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/hooks/api/index.ts

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

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

@@ -1,4 +1,6 @@
 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';
@@ -11,6 +13,20 @@ 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,
@@ -24,7 +40,6 @@ export const useMapInit = () => {
       hubs,
     }: CommandInit) => {
       const { update } = ref.current;
-      const { rf } = ref.current;
 
       const updateData: Partial<MapData> = {};
 
@@ -63,11 +78,13 @@ export const useMapInit = () => {
       update(updateData);
 
       if (systems) {
-        rf.setNodes(systems.map(convertSystem2Node));
+        handleUpdateSystems(systems);
+        // rf.setNodes(systems.map(convertSystem2Node));
       }
 
       if (connections) {
-        rf.setEdges(connections.map(convertConnection2Edge));
+        handleUpdateConnections(connections);
+        // rf.setEdges(connections.map(convertConnection2Edge));
       }
     },
     [],

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

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

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

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

@@ -1,7 +1,7 @@
-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';
+import { useCallback, useEffect, useRef } from 'react';
+import { Node, useOnViewportChange, useReactFlow } from 'reactflow';
 
 const useThrottle = () => {
   const throttleSeed = useRef<number | null>(null);

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

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

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

@@ -1,18 +1,19 @@
+@use "sass:color";
 
 $friendlyBase: #3bbd39;
 $friendlyAlpha: #3bbd3952;
-$friendlyDark20: darken($friendlyBase, 20%);
-$friendlyDark30: darken($friendlyBase, 30%);
-$friendlyDark5:  darken($friendlyBase, 5%);
+$friendlyDark20: color.adjust($friendlyBase, $lightness: -20%);
+$friendlyDark30: color.adjust($friendlyBase, $lightness: -30%);
+$friendlyDark5:  color.adjust($friendlyBase, $lightness: -5%);
 
 $lookingForBase: #43c2fd;
 $lookingForAlpha: rgba(67, 176, 253, 0.48);
-$lookingForDark15: darken($lookingForBase, 15%);
+$lookingForDark15: color.adjust($lookingForBase, $lightness: -15%);
 
 $homeBase: rgb(179, 253, 67);
 $homeAlpha: rgba(186, 248, 48, 0.32);
 $homeBackground: #a0fa5636;
-$homeDark30: darken($homeBase, 30%);
+$homeDark30: color.adjust($homeBase, $lightness: -30%);
 
 :root {
   --pastel-blue: #5a7d9a;
@@ -117,6 +118,7 @@ $homeDark30: darken($homeBase, 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 @@
-@import './eve-common-variables';
+@use './eve-common-variables';
 
 
 .eve-wh-effect-color-pulsar {

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

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

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

@@ -1,10 +1,11 @@
-@import './eve-common-variables';
-@import './eve-common';
+@use "sass:color";
+@use './eve-common-variables';
+@use './eve-common';
 @import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap');
 
 $homeBase: rgb(197, 253, 67);
 $homeAlpha: rgba(197, 253, 67, 0.32);
-$homeDark30: darken($homeBase, 30%);
+$homeDark30: color.adjust($homeBase, $lightness: -30%);
 
 .pathfinder-theme {
   /* -- Override values from the default theme -- */

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

@@ -1,11 +1,10 @@
 import { Dialog } from 'primereact/dialog';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useCallback, useRef, useState } from 'react';
-import { Button } from 'primereact/button';
 import { IconField } from 'primereact/iconfield';
 import { AutoComplete } from 'primereact/autocomplete';
 import { OutCommand, SearchSystemItem } from '@/hooks/Mapper/types';
-import { SystemViewStandalone, WHClassView, WHEffectView } from '@/hooks/Mapper/components/ui-kit';
+import { SystemViewStandalone, WdButton, WHClassView, WHEffectView } from '@/hooks/Mapper/components/ui-kit';
 import classes from './AddSystemDialog.module.scss';
 
 import clsx from 'clsx';
@@ -34,6 +33,7 @@ export const AddSystemDialog = ({
     data: { wormholesData },
   } = useMapRootState();
 
+  // TODO fix it
   const inputRef = useRef<any>();
   const onShow = useCallback(() => {
     inputRef.current?.focus();
@@ -62,6 +62,7 @@ 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);
@@ -189,7 +190,7 @@ export const AddSystemDialog = ({
         </div>
 
         <div className="flex gap-2 justify-end">
-          <Button
+          <WdButton
             onClick={handleSubmit}
             outlined
             disabled={!selectedItem || selectedItem.length !== 1}

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

@@ -14,6 +14,7 @@ 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,8 +29,7 @@ export const MarkdownComment = ({ text, time, characterEveId, id }: MarkdownComm
   const char = useGetCacheCharacter(characterEveId);
   const [hovered, setHovered] = useState(false);
 
-  const cpRemoveBtnRef = useRef<HTMLElement>();
-  const [cpRemoveVisible, setCpRemoveVisible] = useState(false);
+  const { cfShow, cfHide, cfVisible, cfRef } = useConfirmPopup();
 
   const { outCommand } = useMapRootState();
   const ref = useRef({ outCommand, id });
@@ -45,9 +45,6 @@ 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
@@ -68,11 +65,11 @@ export const MarkdownComment = ({ text, time, characterEveId, id }: MarkdownComm
                 {!hovered && <TimeAgo timestamp={time} />}
                 {hovered && (
                   // @ts-ignore
-                  <div ref={cpRemoveBtnRef}>
+                  <div ref={cfRef}>
                     <WdImgButton
                       className={clsx(PrimeIcons.TRASH, 'hover:text-red-400')}
                       tooltip={TOOLTIP_PROPS}
-                      onClick={handleShowCP}
+                      onClick={cfShow}
                     />
                   </div>
                 )}
@@ -85,9 +82,9 @@ export const MarkdownComment = ({ text, time, characterEveId, id }: MarkdownComm
       </InfoDrawer>
 
       <ConfirmPopup
-        target={cpRemoveBtnRef.current}
-        visible={cpRemoveVisible}
-        onHide={handleHideCP}
+        target={cfRef.current}
+        visible={cfVisible}
+        onHide={cfHide}
         message="Are you sure you want to delete?"
         icon="pi pi-exclamation-triangle"
         accept={handleDelete}

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

@@ -4,6 +4,7 @@ import {
   SystemView,
   TimeAgo,
   TooltipPosition,
+  WdButton,
   WdImgButton,
   WdImgButtonTooltip,
 } from '@/hooks/Mapper/components/ui-kit';
@@ -13,11 +14,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, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import useRefState from 'react-usestateref';
+import { useConfirmPopup } from '@/hooks/Mapper/hooks';
 
 const PING_PLACEMENT_MAP = {
   [PingsPlacement.rightTop]: 'top-right',
@@ -78,9 +79,7 @@ export interface PingsInterfaceProps {
 export const PingsInterface = ({ hasLeftOffset }: PingsInterfaceProps) => {
   const toast = useRef<Toast>(null);
   const [isShow, setIsShow, isShowRef] = useRefState(false);
-
-  const cpRemoveBtnRef = useRef<HTMLElement>();
-  const [cpRemoveVisible, setCpRemoveVisible] = useState(false);
+  const { cfShow, cfHide, cfVisible, cfRef } = useConfirmPopup();
 
   const {
     storedSettings: { interfaceSettings },
@@ -98,9 +97,6 @@ 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;
@@ -242,11 +238,11 @@ export const PingsInterface = ({ hasLeftOffset }: PingsInterfaceProps) => {
               />
 
               {/*@ts-ignore*/}
-              <div ref={cpRemoveBtnRef}>
+              <div ref={cfRef}>
                 <WdImgButton
                   className={clsx('pi-trash', 'text-red-400 hover:text-red-300')}
                   tooltip={DELETE_TOOLTIP_PROPS}
-                  onClick={handleShowCP}
+                  onClick={cfShow}
                 />
               </div>
               {/* TODO ADD solar system menu*/}
@@ -260,7 +256,7 @@ export const PingsInterface = ({ hasLeftOffset }: PingsInterfaceProps) => {
         )}
       ></Toast>
 
-      <Button
+      <WdButton
         icon="pi pi-bell"
         severity="warning"
         aria-label="Notification"
@@ -272,9 +268,9 @@ export const PingsInterface = ({ hasLeftOffset }: PingsInterfaceProps) => {
       />
 
       <ConfirmPopup
-        target={cpRemoveBtnRef.current}
-        visible={cpRemoveVisible}
-        onHide={handleHideCP}
+        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}

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

@@ -3,11 +3,10 @@ import { Dialog } from 'primereact/dialog';
 import { getSystemById } from '@/hooks/Mapper/helpers';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 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';
+import { TooltipPosition, WdButton, WdImageSize, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
 
 interface SystemCustomLabelDialog {
   systemId: string;
@@ -126,7 +125,7 @@ export const SystemCustomLabelDialog = ({ systemId, visible, setVisible }: Syste
           </div>
 
           <div className="flex gap-2 justify-end">
-            <Button onClick={handleSave} outlined size="small" label="Save"></Button>
+            <WdButton onClick={handleSave} outlined size="small" label="Save"></WdButton>
           </div>
         </div>
       </form>

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

@@ -9,10 +9,9 @@ import {
 } 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 { getWhSize } from '@/hooks/Mapper/helpers/getWhSize';
 import { parseSignatureCustomInfo } from '@/hooks/Mapper/helpers/parseSignatureCustomInfo';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { CommandLinkSignatureToSystem, SignatureGroup, SystemSignature, TimeStatus } from '@/hooks/Mapper/types';
+import { CommandLinkSignatureToSystem, SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
 import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { SETTINGS_KEYS, SignatureSettingsType } from '@/hooks/Mapper/constants/signatures';
 
@@ -116,14 +115,14 @@ export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignat
   );
 
   const handleSelect = useCallback(
-    async (signature: SystemSignature) => {
+    (signature: SystemSignature) => {
       if (!signature) {
         return;
       }
 
       const { outCommand } = ref.current;
 
-      await outCommand({
+      outCommand({
         type: OutCommand.linkSignatureToSystem,
         data: {
           ...data,
@@ -131,32 +130,9 @@ 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, wormholes],
+    [data, setVisible],
   );
 
   useEffect(() => {

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

@@ -2,10 +2,9 @@ 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 { SystemView, WdButton } from '@/hooks/Mapper/components/ui-kit';
 import clsx from 'clsx';
 
 const PING_TITLES = {
@@ -92,7 +91,7 @@ export const SystemPingDialog = ({ systemId, type, visible, setVisible }: System
           </div>
 
           <div className="flex gap-2 justify-end">
-            <Button onClick={handleSave} size="small" severity="danger" label="Ping!"></Button>
+            <WdButton onClick={handleSave} size="small" severity="danger" label="Ping!" />
           </div>
         </div>
       </form>

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

@@ -5,10 +5,9 @@ import { getSystemById } from '@/hooks/Mapper/helpers';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Button } from 'primereact/button';
 import { OutCommand } from '@/hooks/Mapper/types';
 import { IconField } from 'primereact/iconfield';
-import { TooltipPosition, WdImageSize, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
+import { TooltipPosition, WdButton, WdImageSize, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
 import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager.ts';
 import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
 
@@ -114,7 +113,7 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
     <Dialog
       header="System settings"
       visible={visible}
-      draggable={false}
+      draggable={true}
       style={{ width: '450px' }}
       onShow={onShow}
       onHide={() => {
@@ -226,7 +225,7 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
           </div>
 
           <div className="flex gap-2 justify-end">
-            <Button onClick={handleSave} outlined size="small" label="Save"></Button>
+            <WdButton onClick={handleSave} outlined size="small" label="Save" />
           </div>
         </div>
       </form>

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

@@ -1,11 +1,9 @@
 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 { 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';
 
 interface RoutesSettingsDialog {
   visible: boolean;
@@ -83,7 +81,7 @@ export const RoutesSettingsDialog = ({ visible, setVisible }: RoutesSettingsDial
         </div>
 
         <div className="flex gap-2 justify-end">
-          <Button onClick={handleSave} outlined size="small" label="Apply"></Button>
+          <WdButton onClick={handleSave} outlined size="small" label="Apply"></WdButton>
         </div>
       </div>
     </Dialog>

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

@@ -3,6 +3,7 @@ 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>();
@@ -64,12 +65,8 @@ export const useLoadRoutes = ({
     systems?.length,
     connections,
     hubs,
-    routesSettings,
-    ...Object.keys(routesSettings)
-      .sort()
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-expect-error
-      .map(x => routesSettings[x]),
+    // we need make it flat recursively
+    ...flattenValues(routesSettings),
     ...deps,
   ]);
 

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

@@ -1,6 +1,5 @@
 import { Dialog } from 'primereact/dialog';
 import { useCallback, useState } from 'react';
-import { Button } from 'primereact/button';
 import { TabPanel, TabView } from 'primereact/tabview';
 import { PrettySwitchbox } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/components';
 import { Dropdown } from 'primereact/dropdown';
@@ -10,6 +9,7 @@ import {
   SIGNATURE_SETTINGS,
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
 import { SignatureSettingsType } from '@/hooks/Mapper/constants/signatures.ts';
+import { WdButton } from '@/hooks/Mapper/components/ui-kit';
 
 interface SystemSignatureSettingsDialogProps {
   settings: SignatureSettingsType;
@@ -92,7 +92,7 @@ export const SystemSignatureSettingsDialog = ({
         </div>
 
         <div className="flex gap-2 justify-end">
-          <Button onClick={handleSave} outlined size="small" label="Save"></Button>
+          <WdButton onClick={handleSave} outlined size="small" label="Save" />
         </div>
       </div>
     </Dialog>

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

@@ -28,12 +28,12 @@ import {
   renderInfoColumn,
   renderUpdatedTimeLeft,
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders';
+import { SETTINGS_KEYS, SIGNATURE_WINDOW_ID, SignatureSettingsType } from '@/hooks/Mapper/constants/signatures.ts';
 import { useClipboard, useHotkey } from '@/hooks/Mapper/hooks';
 import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { getSignatureRowClass } from '../helpers/rowStyles';
 import { useSystemSignaturesData } from '../hooks/useSystemSignaturesData';
-import { SETTINGS_KEYS, SIGNATURE_WINDOW_ID, SignatureSettingsType } from '@/hooks/Mapper/constants/signatures.ts';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 
 const renderColIcon = (sig: SystemSignature) => renderIcon(sig);
 
@@ -157,9 +157,18 @@ export const SystemSignaturesContent = ({
     [onSelect, selectable, setSelectedSignatures, deletedSignatures],
   );
 
-  const { showDescriptionColumn, showUpdatedColumn, showCharacterColumn, showCharacterPortrait } = useMemo(
+  const {
+    showGroupColumn,
+    showDescriptionColumn,
+    showAddedColumn,
+    showUpdatedColumn,
+    showCharacterColumn,
+    showCharacterPortrait,
+  } = useMemo(
     () => ({
+      showGroupColumn: settings[SETTINGS_KEYS.SHOW_GROUP_COLUMN] as boolean,
       showDescriptionColumn: settings[SETTINGS_KEYS.SHOW_DESCRIPTION_COLUMN] as boolean,
+      showAddedColumn: settings[SETTINGS_KEYS.SHOW_ADDED_COLUMN] as boolean,
       showUpdatedColumn: settings[SETTINGS_KEYS.SHOW_UPDATED_COLUMN] as boolean,
       showCharacterColumn: settings[SETTINGS_KEYS.SHOW_CHARACTER_COLUMN] as boolean,
       showCharacterPortrait: settings[SETTINGS_KEYS.SHOW_CHARACTER_PORTRAIT] as boolean,
@@ -309,15 +318,17 @@ export const SystemSignaturesContent = ({
               style={{ maxWidth: 72, minWidth: 72, width: 72 }}
               sortable
             />
-            <Column
-              field="group"
-              header="Group"
-              bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-              style={{ maxWidth: 110, minWidth: 110, width: 110 }}
-              body={sig => sig.group ?? ''}
-              hidden={isCompact}
-              sortable
-            />
+            {showGroupColumn && (
+              <Column
+                field="group"
+                header="Group"
+                bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+                style={{ maxWidth: 110, minWidth: 110, width: 110 }}
+                body={sig => sig.group ?? ''}
+                hidden={isCompact}
+                sortable
+              />
+            )}
             <Column
               field="info"
               header="Info"
@@ -336,15 +347,17 @@ export const SystemSignaturesContent = ({
                 sortable
               />
             )}
-            <Column
-              field="inserted_at"
-              header="Added"
-              dataType="date"
-              body={renderAddedTimeLeft}
-              style={{ minWidth: 70, maxWidth: 80 }}
-              bodyClassName="ssc-header text-ellipsis overflow-hidden whitespace-nowrap"
-              sortable
-            />
+            {showAddedColumn && (
+              <Column
+                field="inserted_at"
+                header="Added"
+                dataType="date"
+                body={renderAddedTimeLeft}
+                style={{ minWidth: 70, maxWidth: 80 }}
+                bodyClassName="ssc-header text-ellipsis overflow-hidden whitespace-nowrap"
+                sortable
+              />
+            )}
             {showUpdatedColumn && (
               <Column
                 field="updated_at"

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

@@ -1,3 +1,4 @@
+import { SETTINGS_KEYS, SIGNATURES_DELETION_TIMING, SignatureSettingsType } from '@/hooks/Mapper/constants/signatures';
 import {
   GroupType,
   SignatureGroup,
@@ -11,7 +12,6 @@ import {
   SignatureKindFR,
   SignatureKindRU,
 } from '@/hooks/Mapper/types';
-import { SETTINGS_KEYS, SIGNATURES_DELETION_TIMING, SignatureSettingsType } from '@/hooks/Mapper/constants/signatures';
 
 export const TIME_ONE_MINUTE = 1000 * 60;
 export const TIME_TEN_MINUTES = TIME_ONE_MINUTE * 10;
@@ -130,6 +130,8 @@ export const SIGNATURE_SETTINGS = {
     { type: SettingsTypes.flag, key: SETTINGS_KEYS.COMBAT_SITE, name: 'Show Combat Sites' },
   ],
   uiFlags: [
+    { type: SettingsTypes.flag, key: SETTINGS_KEYS.SHOW_GROUP_COLUMN, name: 'Show Group Column' },
+    { type: SettingsTypes.flag, key: SETTINGS_KEYS.SHOW_ADDED_COLUMN, name: 'Show Added Column' },
     { type: SettingsTypes.flag, key: SETTINGS_KEYS.SHOW_UPDATED_COLUMN, name: 'Show Updated Column' },
     { type: SettingsTypes.flag, key: SETTINGS_KEYS.SHOW_DESCRIPTION_COLUMN, name: 'Show Description Column' },
     { type: SettingsTypes.flag, key: SETTINGS_KEYS.SHOW_CHARACTER_COLUMN, name: 'Show Character Column' },

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/SystemStructuresDialog/SystemStructuresDialog.tsx

@@ -1,13 +1,13 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Dialog } from 'primereact/dialog';
-import { Button } from 'primereact/button';
 import { AutoComplete } from 'primereact/autocomplete';
 import { Calendar } from 'primereact/calendar';
 import clsx from 'clsx';
 
-import { StructureItem, StructureStatus, statusesRequiringTimer, formatToISO } from '../helpers';
+import { formatToISO, statusesRequiringTimer, StructureItem, StructureStatus } from '../helpers';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { OutCommand } from '@/hooks/Mapper/types';
+import { WdButton } from '@/hooks/Mapper/components/ui-kit';
 
 interface StructuresEditDialogProps {
   visible: boolean;
@@ -54,14 +54,13 @@ export const SystemStructuresDialog: React.FC<StructuresEditDialogProps> = ({
 
       // If user typed more text but we have partial match in prevResults
       if (newQuery.startsWith(prevQuery) && prevResults.length > 0) {
-        const filtered = prevResults.filter(item =>
-          item.label.toLowerCase().includes(newQuery.toLowerCase()),
-        );
+        const filtered = prevResults.filter(item => item.label.toLowerCase().includes(newQuery.toLowerCase()));
         setOwnerSuggestions(filtered);
         return;
       }
 
       try {
+        // TODO fix it
         const { results = [] } = await outCommand({
           type: OutCommand.getCorporationNames,
           data: { search: newQuery },
@@ -96,9 +95,7 @@ export const SystemStructuresDialog: React.FC<StructuresEditDialogProps> = ({
   // when user picks a corp from auto-complete
   const handleSelectOwner = (selected: { label: string; value: string }) => {
     setOwnerInput(selected.label);
-    setEditData(prev =>
-      prev ? { ...prev, ownerName: selected.label, ownerId: selected.value } : null,
-    );
+    setEditData(prev => (prev ? { ...prev, ownerName: selected.label, ownerId: selected.value } : null));
   };
 
   const handleStatusChange = (val: string) => {
@@ -125,6 +122,7 @@ export const SystemStructuresDialog: React.FC<StructuresEditDialogProps> = ({
     // fetch corporation ticker if we have an ownerId
     if (editData.ownerId) {
       try {
+        // TODO fix it
         const { ticker } = await outCommand({
           type: OutCommand.getCorporationTicker,
           data: { corp_id: editData.ownerId },
@@ -157,11 +155,7 @@ export const SystemStructuresDialog: React.FC<StructuresEditDialogProps> = ({
       <div className="flex flex-col gap-2 text-[14px]">
         <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center">
           <span>Type:</span>
-          <input
-            readOnly
-            className="p-inputtext p-component cursor-not-allowed"
-            value={editData.structureType ?? ''}
-          />
+          <input readOnly className="p-inputtext p-component cursor-not-allowed" value={editData.structureType ?? ''} />
         </label>
         <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center">
           <span>Name:</span>
@@ -204,10 +198,12 @@ export const SystemStructuresDialog: React.FC<StructuresEditDialogProps> = ({
 
         {statusesRequiringTimer.includes(editData.status) && (
           <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center">
-            <span>Timer <br /> (Eve Time):</span>
+            <span>
+              Timer <br /> (Eve Time):
+            </span>
             <Calendar
               value={editData.endTime ? new Date(editData.endTime) : undefined}
-              onChange={(e) => handleChange('endTime', e.value ?? '')}
+              onChange={e => handleChange('endTime', e.value ?? '')}
               showTime
               hourFormat="24"
               dateFormat="yy-mm-dd"
@@ -227,8 +223,8 @@ export const SystemStructuresDialog: React.FC<StructuresEditDialogProps> = ({
       </div>
 
       <div className="flex justify-end items-center gap-2 mt-4">
-        <Button label="Delete" severity="danger" className="p-button-sm" onClick={handleDeleteClick} />
-        <Button label="Save" className="p-button-sm" onClick={handleSaveClick} />
+        <WdButton label="Delete" severity="danger" className="p-button-sm" onClick={handleDeleteClick} />
+        <WdButton label="Save" className="p-button-sm" onClick={handleSaveClick} />
       </div>
     </Dialog>
   );

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

@@ -16,8 +16,21 @@ const SystemKillsContent = () => {
   } = useMapRootState();
 
   const [systemId] = selectedSystems || [];
+  const whCacheRef = useMemo(() => new Map<number, boolean>(), []);
 
-  const systemStaticInfo = getSystemStaticInfo(systemId)!;
+  const isWormholeSystem = useCallback(
+    (systemId: number): boolean => {
+      const cached = whCacheRef.get(systemId);
+      if (cached !== undefined) return cached;
+
+      const info = getSystemStaticInfo(systemId);
+      const isWH = info?.system_class != null ? isWormholeSpace(Number(info.system_class)) : false;
+
+      whCacheRef.set(systemId, isWH);
+      return isWH;
+    },
+    [whCacheRef],
+  );
 
   const { kills, isLoading, error } = useSystemKills({
     systemId,
@@ -30,15 +43,9 @@ const SystemKillsContent = () => {
   const showLoading = isLoading && kills.length === 0;
 
   const filteredKills = useMemo(() => {
-    if (!settingsKills.whOnly || !settingsKills.showAll) return kills;
-    return kills.filter(kill => {
-      if (!systemStaticInfo) {
-        console.warn(`System with id ${kill.solar_system_id} not found.`);
-        return false;
-      }
-      return isWormholeSpace(systemStaticInfo.system_class);
-    });
-  }, [kills, settingsKills.whOnly, systemStaticInfo, settingsKills.showAll]);
+    if (!settingsKills.whOnly) return kills;
+    return kills.filter(kill => isWormholeSystem(Number(kill.solar_system_id)));
+  }, [kills, settingsKills.whOnly, isWormholeSystem]);
 
   if (!isSubscriptionActive) {
     return (

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

@@ -1,13 +1,11 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Dialog } from 'primereact/dialog';
-import { Button } from 'primereact/button';
-import { WdImgButton } from '@/hooks/Mapper/components/ui-kit';
+import { SystemView, TooltipPosition, WdButton, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
 import { PrimeIcons } from 'primereact/api';
 import {
   AddSystemDialog,
   SearchOnSubmitCallback,
 } from '@/hooks/Mapper/components/mapInterface/components/AddSystemDialog';
-import { SystemView, TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 
 interface KillsSettingsDialogProps {
@@ -158,7 +156,7 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
         </div>
 
         <div className="flex gap-2 justify-end mt-4">
-          <Button onClick={handleApply} label="Apply" outlined size="small" />
+          <WdButton onClick={handleApply} label="Apply" outlined size="small" />
         </div>
       </div>
 

assets/js/hooks/Mapper/components/mapRootContent/components/Connections/Connections.tsx

@@ -1,22 +1,21 @@
-import classes from './Connections.module.scss';
-import { Sidebar } from 'primereact/sidebar';
-import { useEffect, useMemo, useState, useCallback } from 'react';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
-import clsx from 'clsx';
 import {
-  ConnectionType,
-  ConnectionOutput,
   ConnectionInfoOutput,
+  ConnectionOutput,
+  ConnectionType,
   OutCommand,
   Passage,
   SolarSystemConnection,
 } from '@/hooks/Mapper/types';
+import clsx from 'clsx';
+import { Sidebar } from 'primereact/sidebar';
+import { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import classes from './Connections.module.scss';
 
-import { PassageCard } from './PassageCard';
-import { InfoDrawer, SystemView } from '@/hooks/Mapper/components/ui-kit';
+import { InfoDrawer, SystemView, TimeAgo } from '@/hooks/Mapper/components/ui-kit';
 import { kgToTons } from '@/hooks/Mapper/utils/kgToTons.ts';
-import { TimeAgo } from '@/hooks/Mapper/components/ui-kit';
+import { PassageCard } from './PassageCard';
 
 const sortByDate = (a: string, b: string) => new Date(a).getTime() - new Date(b).getTime();
 
@@ -78,7 +77,7 @@ export const Connections = ({ selectedConnection, onHide }: OnTheMapProps) => {
   }, [connections, selectedConnection]);
 
   const isWormhole = useMemo(() => {
-    return cnInfo?.type !== ConnectionType.gate;
+    return cnInfo?.type === ConnectionType.wormhole;
   }, [cnInfo]);
 
   const [passages, setPassages] = useState<Passage[]>([]);

assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/MapSettings.tsx

@@ -3,7 +3,7 @@ import { Dialog } from 'primereact/dialog';
 import { useCallback, useRef, useState } from 'react';
 import { TabPanel, TabView } from 'primereact/tabview';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { OutCommand } from '@/hooks/Mapper/types';
+import { OutCommand, UserPermission } from '@/hooks/Mapper/types';
 import { CONNECTIONS_CHECKBOXES_PROPS, SIGNATURES_CHECKBOXES_PROPS, SYSTEMS_CHECKBOXES_PROPS } from './constants.ts';
 import {
   MapSettingsProvider,
@@ -12,7 +12,10 @@ import {
 import { WidgetsSettings } from './components/WidgetsSettings';
 import { CommonSettings } from './components/CommonSettings';
 import { SettingsListItem } from './types.ts';
-import { ImportExport } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/components/ImportExport.tsx';
+import { ImportExport } from './components/ImportExport.tsx';
+import { ServerSettings } from './components/ServerSettings.tsx';
+import { AdminSettings } from './components/AdminSettings.tsx';
+import { useMapCheckPermissions } from '@/hooks/Mapper/mapRootProvider/hooks/api';
 
 export interface MapSettingsProps {
   visible: boolean;
@@ -24,6 +27,7 @@ export const MapSettingsComp = ({ visible, onHide }: MapSettingsProps) => {
   const { outCommand } = useMapRootState();
 
   const { renderSettingItem, setUserRemoteSettings } = useMapSettings();
+  const isAdmin = useMapCheckPermissions([UserPermission.ADMIN_MAP]);
 
   const refVars = useRef({ outCommand, onHide, visible });
   refVars.current = { outCommand, onHide, visible };
@@ -58,7 +62,7 @@ export const MapSettingsComp = ({ visible, onHide }: MapSettingsProps) => {
       header="Map user settings"
       visible
       draggable={false}
-      style={{ width: '550px' }}
+      style={{ width: '600px' }}
       onShow={handleShow}
       onHide={handleHide}
     >
@@ -92,6 +96,16 @@ export const MapSettingsComp = ({ visible, onHide }: MapSettingsProps) => {
             <TabPanel header="Import/Export" className="h-full" headerClassName={styles.verticalTabHeader}>
               <ImportExport />
             </TabPanel>
+
+            <TabPanel header="Server Settings" className="h-full" headerClassName="color-warn">
+              <ServerSettings />
+            </TabPanel>
+
+            {isAdmin && (
+              <TabPanel header="Admin Settings" className="h-full" headerClassName="color-warn">
+                <AdminSettings />
+              </TabPanel>
+            )}
           </TabView>
         </div>
       </div>

assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/AdminSettings.tsx

@@ -0,0 +1,128 @@
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Toast } from 'primereact/toast';
+import { callToastError, callToastSuccess, callToastWarn } from '@/hooks/Mapper/helpers';
+import { OutCommand } from '@/hooks/Mapper/types';
+import { ConfirmPopup } from 'primereact/confirmpopup';
+import { useConfirmPopup } from '@/hooks/Mapper/hooks';
+import { MapUserSettings, RemoteAdminSettingsResponse } from '@/hooks/Mapper/mapRootProvider/types.ts';
+import { parseMapUserSettings } from '@/hooks/Mapper/components/helpers';
+import fastDeepEqual from 'fast-deep-equal';
+import { useDetectSettingsChanged } from '@/hooks/Mapper/components/hooks';
+import { WdButton } from '@/hooks/Mapper/components/ui-kit';
+
+export const AdminSettings = () => {
+  const {
+    storedSettings: { getSettingsForExport },
+    outCommand,
+  } = useMapRootState();
+
+  const settingsChanged = useDetectSettingsChanged();
+
+  const [currentRemoteSettings, setCurrentRemoteSettings] = useState<MapUserSettings | null>(null);
+
+  const { cfShow, cfHide, cfVisible, cfRef } = useConfirmPopup();
+  const toast = useRef<Toast | null>(null);
+
+  const hasSettingsForExport = useMemo(() => !!getSettingsForExport(), [getSettingsForExport]);
+
+  const refVars = useRef({ currentRemoteSettings, getSettingsForExport });
+  refVars.current = { currentRemoteSettings, getSettingsForExport };
+
+  useEffect(() => {
+    const load = async () => {
+      let res: RemoteAdminSettingsResponse | undefined;
+      try {
+        res = await outCommand({ type: OutCommand.getDefaultSettings, data: null });
+      } catch (error) {
+        // do nothing
+      }
+
+      if (!res || res.default_settings == null) {
+        return;
+      }
+
+      setCurrentRemoteSettings(parseMapUserSettings(res.default_settings));
+    };
+
+    load();
+  }, [outCommand]);
+
+  const isDirty = useMemo(() => {
+    const { currentRemoteSettings, getSettingsForExport } = refVars.current;
+    const localCurrent = parseMapUserSettings(getSettingsForExport());
+
+    return !fastDeepEqual(currentRemoteSettings, localCurrent);
+    // eslint-disable-next-line
+  }, [settingsChanged, currentRemoteSettings]);
+
+  const handleSync = useCallback(async () => {
+    const settings = getSettingsForExport();
+
+    if (!settings) {
+      callToastWarn(toast.current, 'No settings to save');
+
+      return;
+    }
+
+    let response: { success: boolean } | undefined;
+
+    try {
+      response = await outCommand({
+        type: OutCommand.saveDefaultSettings,
+        data: { settings },
+      });
+    } catch (err) {
+      callToastError(toast.current, 'Something went wrong while saving settings');
+      console.error('ERROR: ', err);
+      return;
+    }
+
+    if (!response || !response.success) {
+      callToastError(toast.current, 'Settings not saved - dont not why it');
+      return;
+    }
+
+    setCurrentRemoteSettings(parseMapUserSettings(settings));
+
+    callToastSuccess(toast.current, 'Settings saved successfully');
+  }, [getSettingsForExport, outCommand]);
+
+  return (
+    <div className="w-full h-full flex flex-col gap-5">
+      <div className="flex flex-col gap-1">
+        <div>
+          <WdButton
+            // @ts-ignore
+            ref={cfRef}
+            onClick={cfShow}
+            icon="pi pi-save"
+            size="small"
+            severity="danger"
+            label="Save as Map Default"
+            className="py-[4px]"
+            disabled={!hasSettingsForExport || !isDirty}
+          />
+        </div>
+
+        {!isDirty && <span className="text-red-500/70 text-[12px]">*Local and remote are identical.</span>}
+
+        <span className="text-stone-500 text-[12px]">
+          *Will save your current settings as the default for all new users of this map. This action will overwrite any
+          existing default settings.
+        </span>
+      </div>
+
+      <Toast ref={toast} />
+
+      <ConfirmPopup
+        target={cfRef.current}
+        visible={cfVisible}
+        onHide={cfHide}
+        message="Your settings will overwrite default. Sure?."
+        icon="pi pi-exclamation-triangle"
+        accept={handleSync}
+      />
+    </div>
+  );
+};

assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/CommonSettings.tsx

@@ -7,9 +7,13 @@ import {
 import { useMapSettings } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/MapSettingsProvider.tsx';
 import { SettingsListItem } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/types.ts';
 import { useCallback } from 'react';
+import { TooltipPosition, WdButton, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
+import { ConfirmPopup } from 'primereact/confirmpopup';
+import { useConfirmPopup } from '@/hooks/Mapper/hooks';
 
 export const CommonSettings = () => {
   const { renderSettingItem } = useMapSettings();
+  const { cfShow, cfHide, cfVisible, cfRef } = useConfirmPopup();
 
   const renderSettingsList = useCallback(
     (list: SettingsListItem[]) => {
@@ -18,6 +22,8 @@ export const CommonSettings = () => {
     [renderSettingItem],
   );
 
+  const handleResetSettings = () => {};
+
   return (
     <div className="flex flex-col h-full gap-1">
       <div>
@@ -29,6 +35,33 @@ export const CommonSettings = () => {
       <div className="grid grid-cols-[1fr_auto]">{renderSettingItem(MINI_MAP_PLACEMENT)}</div>
       <div className="grid grid-cols-[1fr_auto]">{renderSettingItem(PINGS_PLACEMENT)}</div>
       <div className="grid grid-cols-[1fr_auto]">{renderSettingItem(THEME_SETTING)}</div>
+
+      <div className="border-b-2 border-dotted border-stone-700/50 h-px my-3" />
+
+      <div className="grid grid-cols-[1fr_auto]">
+        <div />
+        <WdTooltipWrapper content="This dangerous action. And can not be undone" position={TooltipPosition.top}>
+          <WdButton
+            // @ts-ignore
+            ref={cfRef}
+            className="py-[4px]"
+            onClick={cfShow}
+            outlined
+            size="small"
+            severity="danger"
+            label="Reset Settings"
+          />
+        </WdTooltipWrapper>
+      </div>
+
+      <ConfirmPopup
+        target={cfRef.current}
+        visible={cfVisible}
+        onHide={cfHide}
+        message="All settings for this map will be reset to default."
+        icon="pi pi-exclamation-triangle"
+        accept={handleResetSettings}
+      />
     </div>
   );
 };

assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/DefaultSettings.tsx

@@ -0,0 +1,90 @@
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useCallback, useRef, useState } from 'react';
+import { Toast } from 'primereact/toast';
+import { OutCommand } from '@/hooks/Mapper/types';
+import { Divider } from 'primereact/divider';
+import { callToastError, callToastSuccess, callToastWarn } from '@/hooks/Mapper/helpers';
+import { WdButton } from '@/hooks/Mapper/components/ui-kit';
+
+type SaveDefaultSettingsReturn = { success: boolean; error: string };
+
+export const DefaultSettings = () => {
+  const {
+    outCommand,
+    storedSettings: { getSettingsForExport },
+    data: { userPermissions },
+  } = useMapRootState();
+
+  const [loading, setLoading] = useState(false);
+  const toast = useRef<Toast | null>(null);
+
+  const refVars = useRef({ getSettingsForExport, outCommand });
+  refVars.current = { getSettingsForExport, outCommand };
+
+  const handleSaveAsDefault = useCallback(async () => {
+    const settings = refVars.current.getSettingsForExport();
+    if (!settings) {
+      callToastWarn(toast.current, 'No settings to save');
+      return;
+    }
+
+    setLoading(true);
+
+    let response: SaveDefaultSettingsReturn;
+    try {
+      response = await refVars.current.outCommand({
+        type: OutCommand.saveDefaultSettings,
+        data: { settings },
+      });
+    } catch (error) {
+      console.error('Save default settings error:', error);
+      callToastError(toast.current, 'Failed to save default settings');
+      setLoading(false);
+      return;
+    }
+
+    if (response.success) {
+      callToastSuccess(toast.current, 'Default settings saved successfully');
+      setLoading(false);
+      return;
+    }
+
+    callToastError(toast.current, response.error || 'Failed to save default settings');
+    setLoading(false);
+  }, []);
+
+  if (!userPermissions?.admin_map) {
+    return null;
+  }
+
+  return (
+    <>
+      <Divider />
+      <div className="w-full h-full flex flex-col gap-5">
+        <h3 className="text-lg font-semibold">Default Settings (Admin Only)</h3>
+
+        <div className="flex flex-col gap-1">
+          <div>
+            <WdButton
+              onClick={handleSaveAsDefault}
+              icon="pi pi-save"
+              size="small"
+              severity="danger"
+              label="Save as Map Default"
+              className="py-[4px]"
+              loading={loading}
+              disabled={loading}
+            />
+          </div>
+
+          <span className="text-stone-500 text-[12px]">
+            *Will save your current settings as the default for all new users of this map. This action will overwrite
+            any existing default settings.
+          </span>
+        </div>
+
+        <Toast ref={toast} />
+      </div>
+    </>
+  );
+};

assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/ServerSettings.tsx

@@ -0,0 +1,97 @@
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Toast } from 'primereact/toast';
+import { parseMapUserSettings } from '@/hooks/Mapper/components/helpers';
+import { OutCommand } from '@/hooks/Mapper/types';
+import { createDefaultWidgetSettings } from '@/hooks/Mapper/mapRootProvider/helpers/createDefaultWidgetSettings.ts';
+import { callToastSuccess } from '@/hooks/Mapper/helpers';
+import { ConfirmPopup } from 'primereact/confirmpopup';
+import { useConfirmPopup } from '@/hooks/Mapper/hooks';
+import { RemoteAdminSettingsResponse } from '@/hooks/Mapper/mapRootProvider/types.ts';
+import { WdButton } from '@/hooks/Mapper/components/ui-kit';
+
+export const ServerSettings = () => {
+  const {
+    storedSettings: { applySettings },
+    outCommand,
+  } = useMapRootState();
+
+  const [hasSettings, setHasSettings] = useState(false);
+  const { cfShow, cfHide, cfVisible, cfRef } = useConfirmPopup();
+  const toast = useRef<Toast | null>(null);
+
+  const handleSync = useCallback(async () => {
+    let res: RemoteAdminSettingsResponse | undefined;
+    try {
+      res = await outCommand({ type: OutCommand.getDefaultSettings, data: null });
+    } catch (error) {
+      // do nothing
+    }
+
+    if (res?.default_settings == null) {
+      applySettings(createDefaultWidgetSettings());
+      return;
+    }
+
+    try {
+      applySettings(parseMapUserSettings(res.default_settings));
+      callToastSuccess(toast.current, 'Settings synchronized successfully');
+    } catch (error) {
+      applySettings(createDefaultWidgetSettings());
+    }
+  }, [applySettings, outCommand]);
+
+  useEffect(() => {
+    const load = async () => {
+      let res: RemoteAdminSettingsResponse | undefined;
+      try {
+        res = await outCommand({ type: OutCommand.getDefaultSettings, data: null });
+      } catch (error) {
+        // do nothing
+      }
+
+      if (res?.default_settings == null) {
+        return;
+      }
+
+      setHasSettings(true);
+    };
+
+    load();
+  }, [outCommand]);
+
+  return (
+    <div className="w-full h-full flex flex-col gap-5">
+      <div className="flex flex-col gap-1">
+        <div>
+          <WdButton
+            // @ts-ignore
+            ref={cfRef}
+            onClick={cfShow}
+            icon="pi pi-file-import"
+            size="small"
+            severity="warning"
+            label="Sync with Default Settings"
+            className="py-[4px]"
+            disabled={!hasSettings}
+          />
+        </div>
+        {!hasSettings && (
+          <span className="text-red-500/70 text-[12px]">*Default settings was not set by map administrator.</span>
+        )}
+        <span className="text-stone-500 text-[12px]">*Will apply admin settings which set as Default for map.</span>
+      </div>
+
+      <Toast ref={toast} />
+
+      <ConfirmPopup
+        target={cfRef.current}
+        visible={cfVisible}
+        onHide={cfHide}
+        message="You lost your current settings. Sure?."
+        icon="pi pi-exclamation-triangle"
+        accept={handleSync}
+      />
+    </div>
+  );
+};

assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/WidgetsSettings.tsx

@@ -2,8 +2,7 @@ import { PrettySwitchbox } from '@/hooks/Mapper/components/mapRootContent/compon
 import { WIDGETS_CHECKBOXES_PROPS, WidgetsIds } from '@/hooks/Mapper/components/mapInterface/constants.tsx';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useCallback } from 'react';
-
-import { Button } from 'primereact/button';
+import { WdButton } from '@/hooks/Mapper/components/ui-kit';
 
 export interface WidgetsSettingsProps {}
 
@@ -28,9 +27,12 @@ export const WidgetsSettings = ({}: WidgetsSettingsProps) => {
           />
         ))}
       </div>
+
+      <div className="border-b-2 border-dotted border-stone-700/50 h-px my-3" />
+
       <div className="grid grid-cols-[1fr_auto]">
         <div />
-        <Button className="py-[4px]" onClick={resetWidgets} outlined size="small" label="Reset Widgets"></Button>
+        <WdButton className="py-[4px]" onClick={resetWidgets} outlined size="small" label="Reset Widgets" />
       </div>
     </div>
   );

assets/js/hooks/Mapper/components/mapRootContent/components/OldSettingsDialog.tsx

@@ -1,8 +1,6 @@
-import { Dialog } from 'primereact/dialog';
-import { Button } from 'primereact/button';
-import { ConfirmPopup } from 'primereact/confirmpopup';
-import { useCallback, useRef, useState } from 'react';
-import { MapUserSettings } from '@/hooks/Mapper/mapRootProvider/types.ts';
+import { DEFAULT_SIGNATURE_SETTINGS } from '@/hooks/Mapper/constants/signatures.ts';
+import { useConfirmPopup } from '@/hooks/Mapper/hooks';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import {
   DEFAULT_KILLS_WIDGET_SETTINGS,
   DEFAULT_ON_THE_MAP_SETTINGS,
@@ -11,10 +9,13 @@ import {
   getDefaultWidgetProps,
   STORED_INTERFACE_DEFAULT_VALUES,
 } from '@/hooks/Mapper/mapRootProvider/constants.ts';
-import { DEFAULT_SIGNATURE_SETTINGS } from '@/hooks/Mapper/constants/signatures.ts';
-import { Toast } from 'primereact/toast';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { MapUserSettings } from '@/hooks/Mapper/mapRootProvider/types.ts';
 import { saveTextFile } from '@/hooks/Mapper/utils';
+import { ConfirmPopup } from 'primereact/confirmpopup';
+import { Dialog } from 'primereact/dialog';
+import { Toast } from 'primereact/toast';
+import { useCallback, useRef } from 'react';
+import { WdButton } from '@/hooks/Mapper/components/ui-kit';
 
 const createSettings = function <T>(lsSettings: string | null, defaultValues: T) {
   return {
@@ -24,10 +25,7 @@ const createSettings = function <T>(lsSettings: string | null, defaultValues: T)
 };
 
 export const OldSettingsDialog = () => {
-  const cpRemoveBtnRef = useRef<HTMLElement>();
-  const [cpRemoveVisible, setCpRemoveVisible] = useState(false);
-  const handleShowCP = useCallback(() => setCpRemoveVisible(true), []);
-  const handleHideCP = useCallback(() => setCpRemoveVisible(false), []);
+  const { cfShow, cfHide, cfVisible, cfRef } = useConfirmPopup();
   const toast = useRef<Toast | null>(null);
 
   const {
@@ -43,7 +41,7 @@ export const OldSettingsDialog = () => {
       const widgetKills = localStorage.getItem('kills:widget:settings');
       const onTheMapOld = localStorage.getItem('window:onTheMap:settings');
       const widgetsOld = localStorage.getItem('windows:settings:v2');
-      const signatures = localStorage.getItem('wanderer_system_signature_settings_v6_5');
+      const signatures = localStorage.getItem('wanderer_system_signature_settings_v6_6');
 
       const out: MapUserSettings = {
         killsWidget: createSettings(widgetKills, DEFAULT_KILLS_WIDGET_SETTINGS),
@@ -120,7 +118,7 @@ export const OldSettingsDialog = () => {
     localStorage.removeItem('kills:widget:settings');
     localStorage.removeItem('window:onTheMap:settings');
     localStorage.removeItem('windows:settings:v2');
-    localStorage.removeItem('wanderer_system_signature_settings_v6_5');
+    localStorage.removeItem('wanderer_system_signature_settings_v6_6');
 
     checkOldSettings();
   }, [checkOldSettings]);
@@ -141,10 +139,10 @@ export const OldSettingsDialog = () => {
         className="w-[640px] h-[400px] text-text-color min-h-0"
         footer={
           <div className="flex items-center justify-end">
-            <Button
+            <WdButton
               // @ts-ignore
-              ref={cpRemoveBtnRef}
-              onClick={handleShowCP}
+              ref={cfRef}
+              onClick={cfShow}
               icon="pi pi-exclamation-triangle"
               size="small"
               severity="warning"
@@ -170,7 +168,7 @@ export const OldSettingsDialog = () => {
           <div className="h-[30px]"></div>
 
           <div className="flex items-center gap-3">
-            <Button
+            <WdButton
               onClick={handleExportClipboard}
               icon="pi pi-copy"
               size="small"
@@ -178,7 +176,7 @@ export const OldSettingsDialog = () => {
               label="Export to Clipboard"
             />
 
-            <Button
+            <WdButton
               onClick={handleExportAsFile}
               icon="pi pi-download"
               size="small"
@@ -192,9 +190,9 @@ export const OldSettingsDialog = () => {
       </Dialog>
 
       <ConfirmPopup
-        target={cpRemoveBtnRef.current}
-        visible={cpRemoveVisible}
-        onHide={handleHideCP}
+        target={cfRef.current}
+        visible={cfVisible}
+        onHide={cfHide}
         message="After click dialog will disappear. Ready?"
         icon="pi pi-exclamation-triangle"
         accept={handleProceed}

assets/js/hooks/Mapper/components/mapRootContent/components/OnTheMap/OnTheMap.tsx

@@ -13,6 +13,8 @@ import { InputText } from 'primereact/inputtext';
 import { IconField } from 'primereact/iconfield';
 
 const itemTemplate = (item: CharacterTypeRaw & WithIsOwnCharacter, options: VirtualScrollerTemplateOptions) => {
+  const showAllyLogoPlaceholder = options.props.items?.some(x => x.alliance_id != null);
+
   return (
     <div
       className={clsx(classes.CharacterRow, 'w-full box-border px-2 py-1', {
@@ -22,7 +24,15 @@ const itemTemplate = (item: CharacterTypeRaw & WithIsOwnCharacter, options: Virt
       })}
       style={{ height: options.props.itemSize + 'px' }}
     >
-      <CharacterCard showCorporationLogo showAllyLogo showSystem showTicker showShip {...item} />
+      <CharacterCard
+        showCorporationLogo
+        showAllyLogo
+        showAllyLogoPlaceholder={showAllyLogoPlaceholder}
+        showSystem
+        showTicker
+        showShip
+        {...item}
+      />
     </div>
   );
 };

assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/SignatureSettings.tsx

@@ -8,11 +8,14 @@ import {
 } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components';
 import { InputText } from 'primereact/inputtext';
 import { SystemsSettingsProvider } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/Provider.tsx';
-import { Button } from 'primereact/button';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { getWhSize } from '@/hooks/Mapper/helpers/getWhSize';
+import { WdButton } from '@/hooks/Mapper/components/ui-kit';
 
-type SystemSignaturePrepared = Omit<SystemSignature, 'linked_system'> & { linked_system: string };
+type SystemSignaturePrepared = Omit<SystemSignature, 'linked_system'> & {
+  linked_system: string;
+  k162Type: string;
+  time_status: TimeStatus;
+};
 
 export interface MapSettingsProps {
   systemId: string;
@@ -22,10 +25,7 @@ export interface MapSettingsProps {
 }
 
 export const SignatureSettings = ({ systemId, show, onHide, signatureData }: MapSettingsProps) => {
-  const {
-    outCommand,
-    data: { wormholes },
-  } = useMapRootState();
+  const { outCommand } = useMapRootState();
 
   const handleShow = async () => {};
   const signatureForm = useForm<Partial<SystemSignaturePrepared>>({});
@@ -52,41 +52,13 @@ export const SignatureSettings = ({ systemId, show, onHide, signatureData }: Map
                 solar_system_target: values.linked_system,
               },
             });
-
-            // TODO: need fix
-            if (values.isEOL) {
-              await outCommand({
-                type: OutCommand.updateConnectionTimeStatus,
-                data: {
-                  source: systemId,
-                  target: values.linked_system,
-                  value: TimeStatus.eol,
-                },
-              });
-            }
-
-            if (values.type) {
-              const whShipSize = getWhSize(wormholes, values.type);
-              if (whShipSize !== undefined && whShipSize !== null) {
-                await outCommand({
-                  type: OutCommand.updateConnectionShipSizeType,
-                  data: {
-                    source: systemId,
-                    target: values.linked_system,
-                    value: whShipSize,
-                  },
-                });
-              }
-            }
           }
 
           out = {
             ...out,
             custom_info: JSON.stringify({
-              // TODO: need fix
               k162Type: values.k162Type,
-              // TODO: need fix
-              isEOL: values.isEOL,
+              time_status: values.time_status,
             }),
           };
 
@@ -94,6 +66,10 @@ export const SignatureSettings = ({ systemId, show, onHide, signatureData }: Map
             out = { ...out, type: values.type };
           }
 
+          if (values.temporary_name != null) {
+            out = { ...out, temporary_name: values.temporary_name };
+          }
+
           if (signatureData.group !== SignatureGroup.Wormhole) {
             out = { ...out, name: '' };
           }
@@ -149,7 +125,7 @@ export const SignatureSettings = ({ systemId, show, onHide, signatureData }: Map
       signatureForm.reset();
       onHide();
     },
-    [signatureData, signatureForm, outCommand, systemId, onHide, wormholes],
+    [signatureData, signatureForm, outCommand, systemId, onHide],
   );
 
   useEffect(() => {
@@ -161,18 +137,17 @@ export const SignatureSettings = ({ systemId, show, onHide, signatureData }: Map
     const { linked_system, custom_info, ...rest } = signatureData;
 
     let k162Type = null;
-    let isEOL = false;
+    let time_status = TimeStatus._24h;
     if (custom_info) {
       const customInfo = JSON.parse(custom_info);
       k162Type = customInfo.k162Type;
-      isEOL = customInfo.isEOL;
+      time_status = customInfo.time_status;
     }
 
     signatureForm.reset({
       linked_system: linked_system?.solar_system_id.toString() ?? undefined,
-      // TODO: need fix
       k162Type: k162Type,
-      isEOL: isEOL,
+      time_status: time_status,
       ...rest,
     });
   }, [signatureForm, signatureData]);
@@ -181,7 +156,8 @@ export const SignatureSettings = ({ systemId, show, onHide, signatureData }: Map
     <Dialog
       header={`Signature Edit [${signatureData?.eve_id}]`}
       visible={show}
-      draggable={false}
+      draggable
+      resizable={false}
       style={{ width: '390px' }}
       onShow={handleShow}
       onHide={() => {
@@ -216,8 +192,8 @@ export const SignatureSettings = ({ systemId, show, onHide, signatureData }: Map
                 </label>
               </div>
 
-              <div className="flex gap-2 justify-end">
-                <Button onClick={handleSave} outlined size="small" label="Save"></Button>
+              <div className="flex gap-2 justify-end px-[0.75rem] pb-[0.5rem]">
+                <WdButton type="submit" outlined size="small" label="Save" />
               </div>
             </div>
           </form>

assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureEOLCheckbox/SignatureEOLCheckbox.tsx

@@ -1,24 +0,0 @@
-import { InputSwitch } from 'primereact/inputswitch';
-import { Controller, useFormContext } from 'react-hook-form';
-import { SystemSignature } from '@/hooks/Mapper/types';
-
-export interface SignatureEOLCheckboxProps {
-  name: string;
-  defaultValue?: boolean;
-}
-
-export const SignatureEOLCheckbox = ({ name, defaultValue = false }: SignatureEOLCheckboxProps) => {
-  const { control } = useFormContext<SystemSignature>();
-
-  return (
-    <Controller
-      // @ts-ignore
-      name={name}
-      control={control}
-      defaultValue={defaultValue}
-      render={({ field }) => {
-        return <InputSwitch className="my-1" checked={!!field.value} onChange={e => field.onChange(e.value)} />;
-      }}
-    />
-  );
-};

assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureEOLCheckbox/index.ts

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

assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureGroupContentWormholes.tsx

@@ -3,7 +3,8 @@ import { SystemSignature } from '@/hooks/Mapper/types';
 import { SignatureWormholeTypeSelect } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureWormholeTypeSelect';
 import { SignatureK162TypeSelect } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureK162TypeSelect';
 import { SignatureLeadsToSelect } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureLeadsToSelect';
-import { SignatureEOLCheckbox } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureEOLCheckbox';
+import { SignatureLifetimeSelect } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureLifetimeSelect.tsx';
+import { SignatureTempName } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureTempName.tsx';
 
 export const SignatureGroupContentWormholes = () => {
   const { watch } = useFormContext<SystemSignature>();
@@ -28,9 +29,14 @@ export const SignatureGroupContentWormholes = () => {
         <SignatureLeadsToSelect name="linked_system" />
       </label>
 
+      <div className="grid grid-cols-[100px_250px_1fr] gap-2 items-center text-[14px]">
+        <span>Lifetime:</span>
+        <SignatureLifetimeSelect name="time_status" />
+      </div>
+
       <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center text-[14px]">
-        <span>EOL:</span>
-        <SignatureEOLCheckbox name="isEOL" />
+        <span>Temp. Name:</span>
+        <SignatureTempName />
       </label>
     </>
   );

assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureLifetimeSelect.tsx

@@ -0,0 +1,27 @@
+import { Controller, useFormContext } from 'react-hook-form';
+import { SystemSignature } from '@/hooks/Mapper/types';
+import { WdLifetimeSelector } from '@/hooks/Mapper/components/ui-kit/WdLifetimeSelector.tsx';
+
+export interface SignatureEOLCheckboxProps {
+  name: string;
+  defaultValue?: boolean;
+}
+
+export const SignatureLifetimeSelect = ({ name, defaultValue = false }: SignatureEOLCheckboxProps) => {
+  const { control } = useFormContext<SystemSignature>();
+
+  return (
+    <div className="my-1">
+      <Controller
+        // @ts-ignore
+        name={name}
+        control={control}
+        defaultValue={defaultValue}
+        render={({ field }) => {
+          // @ts-ignore
+          return <WdLifetimeSelector lifetime={field.value} onChangeLifetime={e => field.onChange(e)} />;
+        }}
+      />
+    </div>
+  );
+};

assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureTempName.tsx

@@ -0,0 +1,15 @@
+import { Controller, useFormContext } from 'react-hook-form';
+import { InputText } from 'primereact/inputtext';
+import { SystemSignature } from '@/hooks/Mapper/types';
+
+export const SignatureTempName = () => {
+  const { control } = useFormContext<SystemSignature>();
+
+  return (
+    <Controller
+      name="temporary_name"
+      control={control}
+      render={({ field }) => <InputText placeholder="Temporary Name" value={field.value} onChange={field.onChange} />}
+    />
+  );
+};

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

@@ -1,3 +1,4 @@
 export * from './SignatureGroupSelect';
 export * from './SignatureGroupContent';
 export * from './SignatureK162TypeSelect';
+export * from './SignatureLifetimeSelect';

assets/js/hooks/Mapper/components/mapWrapper/MapWrapper.tsx

@@ -1,6 +1,6 @@
 import { Map, MAP_ROOT_ID } from '@/hooks/Mapper/components/map/Map.tsx';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { OutCommand, OutCommandHandler, SolarSystemConnection } from '@/hooks/Mapper/types';
+import { CommandSelectSystems, OutCommand, OutCommandHandler, SolarSystemConnection } from '@/hooks/Mapper/types';
 import { MapRootData, useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { OnMapAddSystemCallback, OnMapSelectionChange } from '@/hooks/Mapper/components/map/map.types.ts';
 import isEqual from 'lodash.isequal';
@@ -88,6 +88,18 @@ export const MapWrapper = () => {
 
   useMapEventListener(event => {
     runCommand(event);
+
+    if (event.name === Commands.init) {
+      const { selectedSystems } = ref.current;
+      if (selectedSystems.length === 0) {
+        return;
+      }
+
+      runCommand({
+        name: Commands.selectSystems,
+        data: { systems: selectedSystems } as CommandSelectSystems,
+      });
+    }
   });
 
   const onSelectionChange: OnMapSelectionChange = useCallback(
@@ -181,17 +193,20 @@ export const MapWrapper = () => {
     ref.current.systemContextProps.systemId && setOpenSettings(ref.current.systemContextProps.systemId);
   }, []);
 
-  const handleTogglePing = useCallback(async (type: PingType, solar_system_id: string, hasPing: boolean) => {
-    if (hasPing) {
-      await outCommand({
-        type: OutCommand.cancelPing,
-        data: { type, solar_system_id: solar_system_id },
-      });
-      return;
-    }
+  const handleTogglePing = useCallback(
+    async (type: PingType, solar_system_id: string, ping_id: string | undefined, hasPing: boolean) => {
+      if (hasPing) {
+        await outCommand({
+          type: OutCommand.cancelPing,
+          data: { type, id: ping_id },
+        });
+        return;
+      }
 
-    setOpenPing({ type, solar_system_id });
-  }, []);
+      setOpenPing({ type, solar_system_id });
+    },
+    [],
+  );
 
   const handleCustomLabelDialog = useCallback(() => {
     const { systemContextProps } = ref.current;

assets/js/hooks/Mapper/components/ui-kit/CharacterCard/CharacterCard.tsx

@@ -24,6 +24,7 @@ export type CharacterCardProps = {
   useSystemsCache?: boolean;
   showCorporationLogo?: boolean;
   showAllyLogo?: boolean;
+  showAllyLogoPlaceholder?: boolean;
   simpleMode?: boolean;
 } & WithIsOwnCharacter &
   WithClassName;
@@ -47,6 +48,7 @@ export const CharacterCard = ({
   showShipName,
   showCorporationLogo,
   showAllyLogo,
+  showAllyLogoPlaceholder,
   showTicker,
   useSystemsCache,
   className,
@@ -217,6 +219,18 @@ export const CharacterCard = ({
               />
             </WdTooltipWrapper>
           )}
+
+          {showAllyLogo && showAllyLogoPlaceholder && !char.alliance_id && (
+            <WdTooltipWrapper position={TooltipPosition.top} content="No alliance">
+              <span
+                className={clsx(
+                  'min-w-[33px] min-h-[33px] w-[33px] h-[33px]',
+                  'flex transition-[border-color,opacity] duration-250 rounded-none',
+                  'wd-bg-default',
+                )}
+              />
+            </WdTooltipWrapper>
+          )}
         </div>
 
         <div className="flex flex-col flex-grow overflow-hidden  w-[50px]">

assets/js/hooks/Mapper/components/ui-kit/WdButton.tsx

@@ -0,0 +1,7 @@
+// eslint-disable-next-line no-restricted-imports
+import { Button, ButtonProps } from 'primereact/button';
+
+export const WdButton = ({ type = 'button', ...props }: ButtonProps) => {
+  // eslint-disable-next-line react/forbid-elements
+  return <Button {...props} type={type} />;
+};

assets/js/hooks/Mapper/components/ui-kit/WdLifetimeSelector.tsx

@@ -0,0 +1,86 @@
+import { WdButton } from '@/hooks/Mapper/components/ui-kit/WdButton.tsx';
+import { TimeStatus } from '@/hooks/Mapper/types';
+import clsx from 'clsx';
+import { BUILT_IN_TOOLTIP_OPTIONS } from './constants.ts';
+
+const LIFE_TIME = [
+  {
+    id: TimeStatus._1h,
+    label: '1H',
+    className: 'bg-purple-400 hover:!bg-purple-400',
+    inactiveClassName: 'bg-purple-400/30',
+    description: 'Less than one 1 hours remaining',
+  },
+  {
+    id: TimeStatus._4h,
+    label: '4H',
+    className: 'bg-purple-300 hover:!bg-purple-300',
+    inactiveClassName: 'bg-purple-300/30',
+    description: 'Less than one 4 hours remaining',
+  },
+  {
+    id: TimeStatus._4h30m,
+    label: '4.5H',
+    className: 'bg-indigo-300 hover:!bg-indigo-300',
+    inactiveClassName: 'bg-indigo-300/30',
+    description: 'Less than one 4.5 hours remaining. All small holes have such lifetime.',
+  },
+  {
+    id: TimeStatus._16h,
+    label: '16H',
+    className: 'bg-orange-300 hover:!bg-orange-300',
+    inactiveClassName: 'bg-orange-400/30',
+    description: 'Less than one 16 hours remaining',
+  },
+  {
+    id: TimeStatus._24h,
+    label: '24H',
+    className: 'bg-orange-300 hover:!bg-orange-300',
+    inactiveClassName: 'bg-orange-400/30',
+    description: 'Less than one 24 hours remaining',
+  },
+  {
+    id: TimeStatus._48h,
+    label: '48H',
+    className: 'bg-orange-300 hover:!bg-orange-300',
+    inactiveClassName: 'bg-orange-400/30',
+    description: 'Less than one 24 hours remaining. Related only with C6. B041, B520, U319, C391.',
+  },
+];
+
+export interface WdLifetimeSelectorProps {
+  lifetime?: TimeStatus;
+  onChangeLifetime(lifetime: TimeStatus): void;
+  className?: string;
+}
+
+export const WdLifetimeSelector = ({
+  lifetime = TimeStatus._24h,
+  onChangeLifetime,
+  className,
+}: WdLifetimeSelectorProps) => {
+  return (
+    <form>
+      <div className={clsx('grid grid-cols-[1fr_1fr_1fr_1fr_1fr_1fr] gap-1', className)}>
+        {LIFE_TIME.map(x => (
+          <WdButton
+            key={x.id}
+            outlined={false}
+            value={x.label}
+            tooltip={x.description}
+            tooltipOptions={BUILT_IN_TOOLTIP_OPTIONS}
+            size="small"
+            className={clsx(
+              `py-[1px] justify-center min-w-auto w-auto border-0 text-[12px] font-bold leading-[20px]`,
+              { [x.inactiveClassName]: lifetime !== x.id },
+              x.className,
+            )}
+            onClick={() => onChangeLifetime(x.id)}
+          >
+            {x.label}
+          </WdButton>
+        ))}
+      </div>
+    </form>
+  );
+};

assets/js/hooks/Mapper/components/ui-kit/WdTooltip/WdTooltip.tsx

@@ -18,6 +18,7 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   content: (() => React.ReactNode) | React.ReactNode;
   targetSelector?: string;
   interactive?: boolean;
+  smallPaddings?: boolean;
 }
 
 export interface OffsetPosition {
@@ -47,6 +48,7 @@ export const WdTooltip = forwardRef(
       position: tPosition = TooltipPosition.default,
       offset = 5,
       interactive = false,
+      smallPaddings = false,
       className,
       ...restProps
     }: TooltipProps,
@@ -264,10 +266,14 @@ export const WdTooltip = forwardRef(
         ref={tooltipRef}
         className={clsx(
           classes.tooltip,
-          interactive ? 'pointer-events-auto' : 'pointer-events-none',
-          'absolute px-1 py-1',
+          'absolute px-2 py-1',
           'border rounded-sm border-green-300 border-opacity-10 bg-stone-900 bg-opacity-90',
-          pos == null && 'invisible',
+          {
+            'pointer-events-auto': interactive,
+            'pointer-events-none': !interactive,
+            invisible: pos == null,
+            '!px-1': smallPaddings,
+          },
           className,
         )}
         style={{

assets/js/hooks/Mapper/components/ui-kit/WdTooltipWrapper/WdTooltipWrapper.tsx

@@ -8,13 +8,26 @@ export type WdTooltipWrapperProps = {
   content?: (() => ReactNode) | ReactNode;
   size?: TooltipSize;
   interactive?: boolean;
+  smallPaddings?: boolean;
   tooltipClassName?: string;
 } & Omit<HTMLProps<HTMLDivElement>, 'content' | 'size'> &
   Omit<TooltipProps, 'content'>;
 
 export const WdTooltipWrapper = forwardRef<WdTooltipHandlers, WdTooltipWrapperProps>(
   (
-    { className, children, content, offset, position, targetSelector, interactive, size, tooltipClassName, ...props },
+    {
+      className,
+      children,
+      content,
+      offset,
+      position,
+      targetSelector,
+      interactive,
+      smallPaddings,
+      size,
+      tooltipClassName,
+      ...props
+    },
     forwardedRef,
   ) => {
     const suffix = useMemo(() => Math.random().toString(36).slice(2, 7), []);
@@ -31,6 +44,7 @@ export const WdTooltipWrapper = forwardRef<WdTooltipHandlers, WdTooltipWrapperPr
           position={position}
           content={content}
           interactive={interactive}
+          smallPaddings={smallPaddings}
           targetSelector={finalTargetSelector}
           className={clsx(size && sizeClass(size), tooltipClassName)}
         />

assets/js/hooks/Mapper/components/ui-kit/constants.ts

@@ -0,0 +1,6 @@
+export const BUILT_IN_TOOLTIP_OPTIONS = {
+  mouseTrack: true,
+  mouseTrackLeft: 10,
+  className:
+    'rounded-[3px] bg-stone-900/90 px-1 py-1 [&_.p-tooltip-text]:!text-stone-300 text-[13px] [&_.p-tooltip-text]:!p-1',
+};

assets/js/hooks/Mapper/components/ui-kit/index.ts

@@ -21,3 +21,5 @@ export * from './LoadingWrapper';
 export * from './WdMenuItem';
 export * from './MenuItemWithInfo';
 export * from './MarkdownTextViewer.tsx';
+export * from './WdButton.tsx';
+export * from './constants.ts';

assets/js/hooks/Mapper/constants/signatures.ts

@@ -12,14 +12,16 @@ export enum SETTINGS_KEYS {
   SORT_FIELD = 'sortField',
   SORT_ORDER = 'sortOrder',
 
-  SHOW_DESCRIPTION_COLUMN = 'show_description_column',
-  SHOW_UPDATED_COLUMN = 'show_updated_column',
+  SHOW_ADDED_COLUMN = 'show_added_column',
   SHOW_CHARACTER_COLUMN = 'show_character_column',
+  SHOW_CHARACTER_PORTRAIT = 'show_character_portrait',
+  SHOW_DESCRIPTION_COLUMN = 'show_description_column',
+  SHOW_GROUP_COLUMN = 'show_group_column',
+  SHOW_UPDATED_COLUMN = 'show_updated_column',
   LAZY_DELETE_SIGNATURES = 'lazy_delete_signatures',
   KEEP_LAZY_DELETE = 'keep_lazy_delete_enabled',
   DELETION_TIMING = 'deletion_timing',
   COLOR_BY_TYPE = 'color_by_type',
-  SHOW_CHARACTER_PORTRAIT = 'show_character_portrait',
 
   // From SignatureKind
   COSMIC_ANOMALY = SignatureKind.CosmicAnomaly,
@@ -45,6 +47,8 @@ export const DEFAULT_SIGNATURE_SETTINGS: SignatureSettingsType = {
   [SETTINGS_KEYS.SORT_FIELD]: 'inserted_at',
   [SETTINGS_KEYS.SORT_ORDER]: -1,
 
+  [SETTINGS_KEYS.SHOW_GROUP_COLUMN]: true,
+  [SETTINGS_KEYS.SHOW_ADDED_COLUMN]: true,
   [SETTINGS_KEYS.SHOW_UPDATED_COLUMN]: true,
   [SETTINGS_KEYS.SHOW_DESCRIPTION_COLUMN]: true,
   [SETTINGS_KEYS.SHOW_CHARACTER_COLUMN]: true,

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

@@ -2,3 +2,4 @@ export * from './sortWHClasses';
 export * from './parseSignatures';
 export * from './getSystemById';
 export * from './getEveImageUrl';
+export * from './toastHelpers';

assets/js/hooks/Mapper/helpers/toastHelpers.ts

@@ -0,0 +1,28 @@
+import { Toast } from 'primereact/toast';
+
+export const callToastWarn = (toast: Toast | null, msg: string, life = 3000) => {
+  toast?.show({
+    severity: 'warn',
+    summary: 'Warning',
+    detail: msg,
+    life,
+  });
+};
+
+export const callToastError = (toast: Toast | null, msg: string, life = 3000) => {
+  toast?.show({
+    severity: 'error',
+    summary: 'Error',
+    detail: msg,
+    life,
+  });
+};
+
+export const callToastSuccess = (toast: Toast | null, msg: string, life = 3000) => {
+  toast?.show({
+    severity: 'success',
+    summary: 'Success',
+    detail: msg,
+    life,
+  });
+};

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

@@ -1,4 +1,6 @@
 export * from './useClipboard';
+export * from './useConfirmPopup';
+export * from './useEventBuffer';
 export * from './useHotkey';
 export * from './usePageVisibility';
 export * from './useSkipContextMenu';

assets/js/hooks/Mapper/hooks/useConfirmPopup.ts

@@ -0,0 +1,10 @@
+import { useCallback, useRef, useState } from 'react';
+
+export const useConfirmPopup = () => {
+  const cfRef = useRef<HTMLElement>();
+  const [cfVisible, setCfVisible] = useState(false);
+  const cfShow = useCallback(() => setCfVisible(true), []);
+  const cfHide = useCallback(() => setCfVisible(false), []);
+
+  return { cfRef, cfVisible, cfShow, cfHide };
+};

assets/js/hooks/Mapper/hooks/useEventBuffer.ts

@@ -0,0 +1,41 @@
+import debounce from 'lodash.debounce';
+import { useCallback, useRef } from 'react';
+export type UseEventBufferHandler<T> = (event: T) => void;
+
+export const useEventBuffer = <T>(handler: UseEventBufferHandler<T>) => {
+  // @ts-ignore
+  const eventsBufferRef = useRef<T[]>([]);
+
+  const eventTick = useCallback(
+    debounce(() => {
+      if (eventsBufferRef.current.length === 0) {
+        return;
+      }
+
+      const event = eventsBufferRef.current.shift()!;
+      handler(event);
+
+      // TODO - do not delete THIS code it needs for debug
+      // console.log('JOipP', `Tick Buff`, eventsBufferRef.current.length);
+
+      if (eventsBufferRef.current.length > 0) {
+        eventTick();
+      }
+    }, 10),
+    [],
+  );
+  const eventTickRef = useRef(eventTick);
+  eventTickRef.current = eventTick;
+
+  // @ts-ignore
+  const handleEvent = useCallback(event => {
+    if (!eventTickRef.current) {
+      return;
+    }
+
+    eventsBufferRef.current.push(event);
+    eventTickRef.current();
+  }, []);
+
+  return { handleEvent };
+};

assets/js/hooks/Mapper/mapRootProvider/MapRootProvider.tsx

@@ -131,6 +131,7 @@ export interface MapRootContextProps {
     hasOldSettings: boolean;
     getSettingsForExport(): string | undefined;
     applySettings(settings: MapUserSettings): boolean;
+    resetSettings(settings: MapUserSettings): void;
     checkOldSettings(): void;
   };
 }
@@ -175,6 +176,7 @@ const MapRootContext = createContext<MapRootContextProps>({
     hasOldSettings: false,
     getSettingsForExport: () => '',
     applySettings: () => false,
+    resetSettings: () => null,
     checkOldSettings: () => null,
   },
 });
@@ -196,7 +198,7 @@ const MapRootHandlers = forwardRef(({ children }: WithChildren, fwdRef: Forwarde
 export const MapRootProvider = ({ children, fwdRef, outCommand }: MapRootProviderProps) => {
   const { update, ref } = useContextStore<MapRootData>({ ...INITIAL_DATA });
 
-  const storedSettings = useMapUserSettings(ref);
+  const storedSettings = useMapUserSettings(ref, outCommand);
 
   const { windowsSettings, toggleWidgetVisibility, updateWidgetSettings, resetWidgets } =
     useStoreWidgets(storedSettings);

assets/js/hooks/Mapper/mapRootProvider/helpers/createDefaultWidgetSettings.ts

@@ -0,0 +1,30 @@
+import { MapUserSettings } from '@/hooks/Mapper/mapRootProvider/types.ts';
+import {
+  DEFAULT_KILLS_WIDGET_SETTINGS,
+  DEFAULT_ON_THE_MAP_SETTINGS,
+  DEFAULT_ROUTES_SETTINGS,
+  DEFAULT_WIDGET_LOCAL_SETTINGS,
+  getDefaultWidgetProps,
+  STORED_INTERFACE_DEFAULT_VALUES,
+} from '@/hooks/Mapper/mapRootProvider/constants.ts';
+import { DEFAULT_SIGNATURE_SETTINGS } from '@/hooks/Mapper/constants/signatures.ts';
+
+// TODO - we need provide and compare version
+const createWidgetSettingsWithVersion = <T>(settings: T) => {
+  return {
+    version: 0,
+    settings,
+  };
+};
+
+export const createDefaultWidgetSettings = (): MapUserSettings => {
+  return {
+    killsWidget: createWidgetSettingsWithVersion(DEFAULT_KILLS_WIDGET_SETTINGS),
+    localWidget: createWidgetSettingsWithVersion(DEFAULT_WIDGET_LOCAL_SETTINGS),
+    widgets: createWidgetSettingsWithVersion(getDefaultWidgetProps()),
+    routes: createWidgetSettingsWithVersion(DEFAULT_ROUTES_SETTINGS),
+    onTheMap: createWidgetSettingsWithVersion(DEFAULT_ON_THE_MAP_SETTINGS),
+    signaturesWidget: createWidgetSettingsWithVersion(DEFAULT_SIGNATURE_SETTINGS),
+    interface: createWidgetSettingsWithVersion(STORED_INTERFACE_DEFAULT_VALUES),
+  };
+};

assets/js/hooks/Mapper/mapRootProvider/hooks/api/useMapInit.ts

@@ -1,7 +1,7 @@
-import { useCallback } from 'react';
-import { CommandInit } from '@/hooks/Mapper/types';
 import { MapRootData, useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useLoadSystemStatic } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic.ts';
+import { CommandInit } from '@/hooks/Mapper/types';
+import { useCallback } from 'react';
 
 export const useMapInit = () => {
   const { update } = useMapRootState();

assets/js/hooks/Mapper/mapRootProvider/hooks/useActualizeRemoteMapSettings.ts

@@ -0,0 +1,66 @@
+import { OutCommand, OutCommandHandler } from '@/hooks/Mapper/types';
+import { Dispatch, SetStateAction, useCallback, useEffect, useRef } from 'react';
+import {
+  MapUserSettings,
+  MapUserSettingsStructure,
+  RemoteAdminSettingsResponse,
+} from '@/hooks/Mapper/mapRootProvider/types.ts';
+import { createDefaultWidgetSettings } from '@/hooks/Mapper/mapRootProvider/helpers/createDefaultWidgetSettings.ts';
+import { parseMapUserSettings } from '@/hooks/Mapper/components/helpers';
+
+interface UseActualizeRemoteMapSettingsProps {
+  outCommand: OutCommandHandler;
+  mapUserSettings: MapUserSettingsStructure;
+  applySettings: (val: MapUserSettings) => void;
+  setMapUserSettings: Dispatch<SetStateAction<MapUserSettingsStructure>>;
+  map_slug: string | null;
+}
+
+export const useActualizeRemoteMapSettings = ({
+  outCommand,
+  mapUserSettings,
+  setMapUserSettings,
+  applySettings,
+  map_slug,
+}: UseActualizeRemoteMapSettingsProps) => {
+  const refVars = useRef({ applySettings, mapUserSettings, setMapUserSettings, map_slug });
+  refVars.current = { applySettings, mapUserSettings, setMapUserSettings, map_slug };
+
+  const actualizeRemoteMapSettings = useCallback(async () => {
+    const { applySettings } = refVars.current;
+
+    let res: RemoteAdminSettingsResponse | undefined;
+    try {
+      res = await outCommand({ type: OutCommand.getDefaultSettings, data: null });
+    } catch (error) {
+      // do nothing
+    }
+
+    if (res?.default_settings == null) {
+      applySettings(createDefaultWidgetSettings());
+      return;
+    }
+
+    try {
+      applySettings(parseMapUserSettings(res.default_settings));
+    } catch (error) {
+      applySettings(createDefaultWidgetSettings());
+    }
+  }, [outCommand]);
+
+  useEffect(() => {
+    const { mapUserSettings } = refVars.current;
+
+    // INFO: Do nothing if slug is not set
+    if (map_slug == null) {
+      return;
+    }
+
+    // INFO: Do nothing if user have already data
+    if (map_slug in mapUserSettings) {
+      return;
+    }
+
+    actualizeRemoteMapSettings();
+  }, [actualizeRemoteMapSettings, map_slug]);
+};

assets/js/hooks/Mapper/mapRootProvider/hooks/useMapRootHandlers.ts

@@ -1,4 +1,3 @@
-import { ForwardedRef, useImperativeHandle } from 'react';
 import {
   CommandAddConnections,
   CommandAddSystems,
@@ -8,24 +7,25 @@ import {
   CommandCharactersUpdated,
   CommandCharacterUpdated,
   CommandCommentAdd,
+  CommandCommentRemoved,
   CommandInit,
   CommandLinkSignatureToSystem,
   CommandMapUpdated,
+  CommandPingAdded,
+  CommandPingCancelled,
   CommandPresentCharacters,
   CommandRemoveConnections,
   CommandRemoveSystems,
   CommandRoutes,
+  Commands,
   CommandSignaturesUpdated,
   CommandTrackingCharactersData,
   CommandUpdateConnection,
   CommandUpdateSystems,
   CommandUserSettingsUpdated,
-  Commands,
   MapHandlers,
-  CommandCommentRemoved,
-  CommandPingAdded,
-  CommandPingCancelled,
 } from '@/hooks/Mapper/types/mapHandlers.ts';
+import { ForwardedRef, useImperativeHandle } from 'react';
 
 import {
   useCommandComments,
@@ -39,9 +39,9 @@ import {
   useUserRoutes,
 } from './api';
 
-import { useCommandsActivity } from './api/useCommandsActivity';
 import { emitMapEvent } from '@/hooks/Mapper/events';
 import { DetailedKill } from '../../types/kills';
+import { useCommandsActivity } from './api/useCommandsActivity';
 
 export const useMapRootHandlers = (ref: ForwardedRef<MapHandlers>) => {
   const mapInit = useMapInit();
@@ -63,127 +63,123 @@ export const useMapRootHandlers = (ref: ForwardedRef<MapHandlers>) => {
   const { pingAdded, pingCancelled } = useCommandPings();
   const { characterActivityData, trackingCharactersData, userSettingsUpdated } = useCommandsActivity();
 
-  useImperativeHandle(
-    ref,
-    () => {
-      return {
-        command(type, data) {
-          switch (type) {
-            case Commands.init: // USED
-              mapInit(data as CommandInit);
-              break;
-            case Commands.addSystems: // USED
-              addSystems(data as CommandAddSystems);
-              break;
-            case Commands.updateSystems: // USED
-              updateSystems(data as CommandUpdateSystems);
-              break;
-            case Commands.removeSystems: // USED
-              removeSystems(data as CommandRemoveSystems);
-              break;
-            case Commands.addConnections: // USED
-              addConnections(data as CommandAddConnections);
-              break;
-            case Commands.removeConnections: // USED
-              removeConnections(data as CommandRemoveConnections);
-              break;
-            case Commands.updateConnection: // USED
-              updateConnection(data as CommandUpdateConnection);
-              break;
-            case Commands.charactersUpdated: // USED
-              charactersUpdated(data as CommandCharactersUpdated);
-              break;
-            case Commands.characterAdded: // USED
-              characterAdded(data as CommandCharacterAdded);
-              break;
-            case Commands.characterRemoved: // USED
-              characterRemoved(data as CommandCharacterRemoved);
-              break;
-            case Commands.characterUpdated: // USED
-              characterUpdated(data as CommandCharacterUpdated);
-              break;
-            case Commands.presentCharacters: // USED
-              presentCharacters(data as CommandPresentCharacters);
-              break;
-            case Commands.mapUpdated: // USED
-              mapUpdated(data as CommandMapUpdated);
-              break;
-            case Commands.routes:
-              mapRoutes(data as CommandRoutes);
-              break;
-            case Commands.userRoutes:
-              mapUserRoutes(data as CommandRoutes);
-              break;
+  useImperativeHandle(ref, () => {
+    return {
+      command(type, data) {
+        switch (type) {
+          case Commands.init: // USED
+            mapInit(data as CommandInit);
+            break;
+          case Commands.addSystems: // USED
+            addSystems(data as CommandAddSystems);
+            break;
+          case Commands.updateSystems: // USED
+            updateSystems(data as CommandUpdateSystems);
+            break;
+          case Commands.removeSystems: // USED
+            removeSystems(data as CommandRemoveSystems);
+            break;
+          case Commands.addConnections: // USED
+            addConnections(data as CommandAddConnections);
+            break;
+          case Commands.removeConnections: // USED
+            removeConnections(data as CommandRemoveConnections);
+            break;
+          case Commands.updateConnection: // USED
+            updateConnection(data as CommandUpdateConnection);
+            break;
+          case Commands.charactersUpdated: // USED
+            charactersUpdated(data as CommandCharactersUpdated);
+            break;
+          case Commands.characterAdded: // USED
+            characterAdded(data as CommandCharacterAdded);
+            break;
+          case Commands.characterRemoved: // USED
+            characterRemoved(data as CommandCharacterRemoved);
+            break;
+          case Commands.characterUpdated: // USED
+            characterUpdated(data as CommandCharacterUpdated);
+            break;
+          case Commands.presentCharacters: // USED
+            presentCharacters(data as CommandPresentCharacters);
+            break;
+          case Commands.mapUpdated: // USED
+            mapUpdated(data as CommandMapUpdated);
+            break;
+          case Commands.routes:
+            mapRoutes(data as CommandRoutes);
+            break;
+          case Commands.userRoutes:
+            mapUserRoutes(data as CommandRoutes);
+            break;
 
-            case Commands.signaturesUpdated: // USED
-              updateSystemSignatures(data as CommandSignaturesUpdated);
-              break;
+          case Commands.signaturesUpdated: // USED
+            updateSystemSignatures(data as CommandSignaturesUpdated);
+            break;
 
-            case Commands.linkSignatureToSystem: // USED
-              setTimeout(() => {
-                updateLinkSignatureToSystem(data as CommandLinkSignatureToSystem);
-              }, 200);
-              break;
+          case Commands.linkSignatureToSystem: // USED
+            setTimeout(() => {
+              updateLinkSignatureToSystem(data as CommandLinkSignatureToSystem);
+            }, 200);
+            break;
 
-            case Commands.centerSystem: // USED
-              // do nothing here
-              break;
+          case Commands.centerSystem: // USED
+            // do nothing here
+            break;
 
-            case Commands.selectSystem: // USED
-              // do nothing here
-              break;
+          case Commands.selectSystem: // USED
+            // do nothing here
+            break;
 
-            case Commands.killsUpdated:
-              // do nothing here
-              break;
+          case Commands.killsUpdated:
+            // do nothing here
+            break;
 
-            case Commands.detailedKillsUpdated:
-              updateDetailedKills(data as Record<string, DetailedKill[]>);
-              break;
+          case Commands.detailedKillsUpdated:
+            updateDetailedKills(data as Record<string, DetailedKill[]>);
+            break;
 
-            case Commands.characterActivityData:
-              characterActivityData(data as CommandCharacterActivityData);
-              break;
+          case Commands.characterActivityData:
+            characterActivityData(data as CommandCharacterActivityData);
+            break;
 
-            case Commands.trackingCharactersData:
-              trackingCharactersData(data as CommandTrackingCharactersData);
-              break;
+          case Commands.trackingCharactersData:
+            trackingCharactersData(data as CommandTrackingCharactersData);
+            break;
 
-            case Commands.updateActivity:
-              break;
+          case Commands.updateActivity:
+            break;
 
-            case Commands.updateTracking:
-              break;
+          case Commands.updateTracking:
+            break;
 
-            case Commands.userSettingsUpdated:
-              userSettingsUpdated(data as CommandUserSettingsUpdated);
-              break;
+          case Commands.userSettingsUpdated:
+            userSettingsUpdated(data as CommandUserSettingsUpdated);
+            break;
 
-            case Commands.systemCommentAdded:
-              addComment(data as CommandCommentAdd);
-              break;
+          case Commands.systemCommentAdded:
+            addComment(data as CommandCommentAdd);
+            break;
 
-            case Commands.systemCommentRemoved:
-              removeComment(data as CommandCommentRemoved);
-              break;
+          case Commands.systemCommentRemoved:
+            removeComment(data as CommandCommentRemoved);
+            break;
 
-            case Commands.pingAdded:
-              pingAdded(data as CommandPingAdded);
-              break;
+          case Commands.pingAdded:
+            pingAdded(data as CommandPingAdded);
+            break;
 
-            case Commands.pingCancelled:
-              pingCancelled(data as CommandPingCancelled);
-              break;
+          case Commands.pingCancelled:
+            pingCancelled(data as CommandPingCancelled);
+            break;
 
-            default:
-              console.warn(`JOipP Interface handlers: Unknown command: ${type}`, data);
-              break;
-          }
+          default:
+            console.warn(`JOipP Interface handlers: Unknown command: ${type}`, data);
+            break;
+        }
 
-          emitMapEvent({ name: type, data });
-        },
-      };
-    },
-    [],
-  );
+        emitMapEvent({ name: type, data });
+      },
+    };
+  }, []);
 };

assets/js/hooks/Mapper/mapRootProvider/hooks/useMapUserSettings.ts

@@ -1,44 +1,16 @@
 import useLocalStorageState from 'use-local-storage-state';
 import { MapUserSettings, MapUserSettingsStructure } from '@/hooks/Mapper/mapRootProvider/types.ts';
-import {
-  DEFAULT_KILLS_WIDGET_SETTINGS,
-  DEFAULT_ON_THE_MAP_SETTINGS,
-  DEFAULT_ROUTES_SETTINGS,
-  DEFAULT_WIDGET_LOCAL_SETTINGS,
-  getDefaultWidgetProps,
-  STORED_INTERFACE_DEFAULT_VALUES,
-} from '@/hooks/Mapper/mapRootProvider/constants.ts';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { DEFAULT_SIGNATURE_SETTINGS } from '@/hooks/Mapper/constants/signatures';
 import { MapRootData } from '@/hooks/Mapper/mapRootProvider';
 import { useSettingsValueAndSetter } from '@/hooks/Mapper/mapRootProvider/hooks/useSettingsValueAndSetter.ts';
 import fastDeepEqual from 'fast-deep-equal';
-
-// import { actualizeSettings } from '@/hooks/Mapper/mapRootProvider/helpers';
-
-// TODO - we need provide and compare version
-const createWidgetSettingsWithVersion = <T>(settings: T) => {
-  return {
-    version: 0,
-    settings,
-  };
-};
-
-const createDefaultWidgetSettings = (): MapUserSettings => {
-  return {
-    killsWidget: createWidgetSettingsWithVersion(DEFAULT_KILLS_WIDGET_SETTINGS),
-    localWidget: createWidgetSettingsWithVersion(DEFAULT_WIDGET_LOCAL_SETTINGS),
-    widgets: createWidgetSettingsWithVersion(getDefaultWidgetProps()),
-    routes: createWidgetSettingsWithVersion(DEFAULT_ROUTES_SETTINGS),
-    onTheMap: createWidgetSettingsWithVersion(DEFAULT_ON_THE_MAP_SETTINGS),
-    signaturesWidget: createWidgetSettingsWithVersion(DEFAULT_SIGNATURE_SETTINGS),
-    interface: createWidgetSettingsWithVersion(STORED_INTERFACE_DEFAULT_VALUES),
-  };
-};
+import { OutCommandHandler } from '@/hooks/Mapper/types';
+import { useActualizeRemoteMapSettings } from '@/hooks/Mapper/mapRootProvider/hooks/useActualizeRemoteMapSettings.ts';
+import { createDefaultWidgetSettings } from '@/hooks/Mapper/mapRootProvider/helpers/createDefaultWidgetSettings.ts';
 
 const EMPTY_OBJ = {};
 
-export const useMapUserSettings = ({ map_slug }: MapRootData) => {
+export const useMapUserSettings = ({ map_slug }: MapRootData, outCommand: OutCommandHandler) => {
   const [isReady, setIsReady] = useState(false);
   const [hasOldSettings, setHasOldSettings] = useState(false);
 
@@ -49,19 +21,25 @@ export const useMapUserSettings = ({ map_slug }: MapRootData) => {
   const ref = useRef({ mapUserSettings, setMapUserSettings, map_slug });
   ref.current = { mapUserSettings, setMapUserSettings, map_slug };
 
-  useEffect(() => {
-    const { mapUserSettings, setMapUserSettings } = ref.current;
-    if (map_slug === null) {
-      return;
+  const applySettings = useCallback((settings: MapUserSettings) => {
+    const { map_slug, mapUserSettings, setMapUserSettings } = ref.current;
+
+    if (map_slug == null) {
+      return false;
     }
 
-    if (!(map_slug in mapUserSettings)) {
-      setMapUserSettings({
-        ...mapUserSettings,
-        [map_slug]: createDefaultWidgetSettings(),
-      });
+    if (fastDeepEqual(settings, mapUserSettings[map_slug])) {
+      return false;
     }
-  }, [map_slug]);
+
+    setMapUserSettings(old => ({
+      ...old,
+      [map_slug]: settings,
+    }));
+    return true;
+  }, []);
+
+  useActualizeRemoteMapSettings({ outCommand, applySettings, mapUserSettings, setMapUserSettings, map_slug });
 
   const [interfaceSettings, setInterfaceSettings] = useSettingsValueAndSetter(
     mapUserSettings,
@@ -178,23 +156,9 @@ export const useMapUserSettings = ({ map_slug }: MapRootData) => {
     return JSON.stringify(ref.current.mapUserSettings[map_slug]);
   }, []);
 
-  const applySettings = useCallback((settings: MapUserSettings) => {
-    const { map_slug, mapUserSettings, setMapUserSettings } = ref.current;
-
-    if (map_slug == null) {
-      return false;
-    }
-
-    if (fastDeepEqual(settings, mapUserSettings[map_slug])) {
-      return false;
-    }
-
-    setMapUserSettings(old => ({
-      ...old,
-      [map_slug]: settings,
-    }));
-    return true;
-  }, []);
+  const resetSettings = useCallback(() => {
+    applySettings(createDefaultWidgetSettings());
+  }, [applySettings]);
 
   return {
     isReady,
@@ -217,6 +181,7 @@ export const useMapUserSettings = ({ map_slug }: MapRootData) => {
 
     getSettingsForExport,
     applySettings,
+    resetSettings,
     checkOldSettings,
   };
 };

assets/js/hooks/Mapper/mapRootProvider/types.ts

@@ -85,3 +85,7 @@ export type MapUserSettings = {
 export type MapUserSettingsStructure = {
   [mapId: string]: MapUserSettings;
 };
+
+export type WdResponse<T> = T;
+
+export type RemoteAdminSettingsResponse = { default_settings?: string };

assets/js/hooks/Mapper/types/connection.ts

@@ -1,6 +1,7 @@
 export enum ConnectionType {
   wormhole,
   gate,
+  bridge,
 }
 
 export enum MassState {
@@ -10,8 +11,13 @@ export enum MassState {
 }
 
 export enum TimeStatus {
-  default,
-  eol,
+  reserved, // TODO: this reserved for not broke prev solution
+  _1h,
+  _4h,
+  _4h30m,
+  _16h,
+  _24h,
+  _48h,
 }
 
 export enum ShipSizeStatus {

assets/js/hooks/Mapper/types/mapHandlers.ts

@@ -27,6 +27,7 @@ export enum Commands {
   userRoutes = 'user_routes',
   centerSystem = 'center_system',
   selectSystem = 'select_system',
+  selectSystems = 'select_systems',
   linkSignatureToSystem = 'link_signature_to_system',
   signaturesUpdated = 'signatures_updated',
   systemCommentAdded = 'system_comment_added',
@@ -60,6 +61,7 @@ export type Command =
   | Commands.routes
   | Commands.userRoutes
   | Commands.selectSystem
+  | Commands.selectSystems
   | Commands.centerSystem
   | Commands.linkSignatureToSystem
   | Commands.signaturesUpdated
@@ -118,6 +120,10 @@ export type CommandUserRoutes = RoutesList;
 export type CommandKillsUpdated = Kill[];
 export type CommandDetailedKillsUpdated = Record<string, DetailedKill[]>;
 export type CommandSelectSystem = string | undefined;
+export type CommandSelectSystems = {
+  systems: string[];
+  delay?: number;
+};
 export type CommandCenterSystem = string | undefined;
 export type CommandLinkSignatureToSystem = {
   solar_system_source: number;
@@ -187,6 +193,7 @@ export interface CommandData {
   [Commands.killsUpdated]: CommandKillsUpdated;
   [Commands.detailedKillsUpdated]: CommandDetailedKillsUpdated;
   [Commands.selectSystem]: CommandSelectSystem;
+  [Commands.selectSystems]: CommandSelectSystems;
   [Commands.centerSystem]: CommandCenterSystem;
   [Commands.linkSignatureToSystem]: CommandLinkSignatureToSystem;
   [Commands.signaturesUpdated]: CommandLinkSignaturesUpdated;
@@ -269,6 +276,8 @@ export enum OutCommand {
   showTracking = 'show_tracking',
   getUserSettings = 'get_user_settings',
   updateUserSettings = 'update_user_settings',
+  saveDefaultSettings = 'save_default_settings',
+  getDefaultSettings = 'get_default_settings',
   unlinkSignature = 'unlink_signature',
   searchSystems = 'search_systems',
   undoDeleteSignatures = 'undo_delete_signatures',

assets/js/hooks/Mapper/types/signatures.ts

@@ -48,6 +48,7 @@ export type SystemSignature = {
   inserted_at?: string;
   updated_at?: string;
   deleted?: boolean;
+  temporary_name?: string;
 };
 
 export interface ExtendedSystemSignature extends SystemSignature {

assets/js/hooks/Mapper/useMapperHandlers.ts

@@ -1,7 +1,8 @@
+import { useEventBuffer } from '@/hooks/Mapper/hooks';
+import usePageVisibility from '@/hooks/Mapper/hooks/usePageVisibility.ts';
+
 import { MapHandlers } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { RefObject, useCallback, useEffect, useRef } from 'react';
-import debounce from 'lodash.debounce';
-import usePageVisibility from '@/hooks/Mapper/hooks/usePageVisibility.ts';
 
 // const inIndex = 0;
 // const prevEventTime = +new Date();
@@ -10,10 +11,28 @@ const LAST_VERSION_KEY = 'wandererLastVersion';
 // @ts-ignore
 export const useMapperHandlers = (handlerRefs: RefObject<MapHandlers>[], hooksRef: RefObject<any>) => {
   const visible = usePageVisibility();
+
   const wasHiddenOnce = useRef(false);
   const visibleRef = useRef(visible);
   visibleRef.current = visible;
 
+  // @ts-ignore
+  const handleBufferedEvent = useCallback(({ type, body }) => {
+    if (!visibleRef.current) {
+      return;
+    }
+
+    handlerRefs.forEach(ref => {
+      if (!ref.current) {
+        return;
+      }
+
+      ref.current?.command(type, body);
+    });
+  }, []);
+
+  const { handleEvent: handleMapEvent } = useEventBuffer<any>(handleBufferedEvent);
+
   // TODO - do not delete THIS code it needs for debug
   // const [record, setRecord] = useLocalStorageState<boolean>('record', {
   //   defaultValue: false,
@@ -54,52 +73,6 @@ export const useMapperHandlers = (handlerRefs: RefObject<MapHandlers>[], hooksRe
     [hooksRef.current],
   );
 
-  // @ts-ignore
-  const eventsBufferRef = useRef<{ type; body }[]>([]);
-
-  const eventTick = useCallback(
-    debounce(() => {
-      if (eventsBufferRef.current.length === 0) {
-        return;
-      }
-
-      const { type, body } = eventsBufferRef.current.shift()!;
-      handlerRefs.forEach(ref => {
-        if (!ref.current) {
-          return;
-        }
-
-        ref.current?.command(type, body);
-      });
-
-      // TODO - do not delete THIS code it needs for debug
-      // console.log('JOipP', `Tick Buff`, eventsBufferRef.current.length);
-
-      if (eventsBufferRef.current.length > 0) {
-        eventTick();
-      }
-    }, 10),
-    [],
-  );
-  const eventTickRef = useRef(eventTick);
-  eventTickRef.current = eventTick;
-
-  // @ts-ignore
-  const handleMapEvent = useCallback(({ type, body }) => {
-    // TODO - do not delete THIS code it needs for debug
-    // const currentTime = +new Date();
-    // const timeDiff = currentTime - prevEventTime;
-    // prevEventTime = currentTime;
-    // console.log('JOipP', `IN [${inIndex++}] [${timeDiff}] ${getFormattedTime()}`, { type, body });
-
-    if (!eventTickRef.current || !visibleRef.current) {
-      return;
-    }
-
-    eventsBufferRef.current.push({ type, body });
-    eventTickRef.current();
-  }, []);
-
   useEffect(() => {
     if (!visible && !wasHiddenOnce.current) {
       wasHiddenOnce.current = true;

assets/js/hooks/Mapper/utils/flattenValues.ts

@@ -0,0 +1,132 @@
+const TYPE_ORDER = [
+  'undefined',
+  'null',
+  'boolean',
+  'number',
+  'bigint',
+  'string',
+  'symbol',
+  'function',
+  'date',
+  'regexp',
+  'other',
+] as const;
+type TypeTag = (typeof TYPE_ORDER)[number];
+
+const getTypeTag = (v: unknown): TypeTag => {
+  if (v === undefined) return 'undefined';
+  if (v === null) return 'null';
+  const t = typeof v;
+  if (t === 'boolean' || t === 'number' || t === 'bigint' || t === 'string' || t === 'symbol' || t === 'function')
+    return t as TypeTag;
+  const tag = Object.prototype.toString.call(v);
+  if (tag === '[object Date]') return 'date';
+  if (tag === '[object RegExp]') return 'regexp';
+  return 'other';
+};
+
+const cmp = (a: unknown, b: unknown): number => {
+  const ta = getTypeTag(a);
+  const tb = getTypeTag(b);
+  if (ta !== tb) return TYPE_ORDER.indexOf(ta) - TYPE_ORDER.indexOf(tb);
+
+  switch (ta) {
+    case 'undefined':
+    case 'null':
+      return 0;
+    case 'boolean':
+      return (a as boolean) === (b as boolean) ? 0 : a ? 1 : -1;
+    case 'number': {
+      const na = a as number,
+        nb = b as number;
+      const aIsNaN = Number.isNaN(na),
+        bIsNaN = Number.isNaN(nb);
+      if (aIsNaN || bIsNaN) return aIsNaN && bIsNaN ? 0 : aIsNaN ? 1 : -1; // NaN в конец чисел
+      return na === nb ? 0 : na < nb ? -1 : 1;
+    }
+    case 'bigint': {
+      const ba = a as bigint,
+        bb = b as bigint;
+      return ba === bb ? 0 : ba < bb ? -1 : 1;
+    }
+    case 'string':
+      return (a as string).localeCompare(b as string);
+    case 'symbol': {
+      const da = (a as symbol).description ?? '';
+      const db = (b as symbol).description ?? '';
+      return da.localeCompare(db);
+    }
+    case 'function':
+      // @ts-ignore
+      return ((a as Function).name || '').localeCompare((b as Function).name || '');
+    case 'date':
+      return (a as Date).getTime() - (b as Date).getTime();
+    case 'regexp':
+      return a!.toString().localeCompare(b!.toString());
+    default:
+      return String(a).localeCompare(String(b));
+  }
+};
+
+const isIterable = (v: unknown): v is Iterable<unknown> =>
+  v != null && typeof (v as any)[Symbol.iterator] === 'function';
+
+const pushTypedArrayValues = (v: unknown, out: unknown[]) => {
+  if (ArrayBuffer.isView(v) && !(v instanceof DataView)) {
+    // @ts-ignore
+    out.push(...(v as ArrayLike<number> as any));
+    return true;
+  }
+  return false;
+};
+
+/**
+ * Generate this func with ChatGPT 5. Cause it pure func and looks like what i need
+ * May be in net we can find smtng like that
+ * @param input
+ */
+export const flattenValues = (input: unknown): unknown[] => {
+  const out: unknown[] = [];
+  const seen = new WeakSet<object>();
+
+  const visit = (v: unknown): void => {
+    const tag = getTypeTag(v);
+    if (tag !== 'other') {
+      out.push(v);
+      return;
+    }
+
+    if (v && typeof v === 'object') {
+      if (seen.has(v)) return;
+      seen.add(v);
+
+      if (pushTypedArrayValues(v, out)) return;
+
+      if (v instanceof Map) {
+        for (const val of v.values()) visit(val);
+        return;
+      }
+
+      if (v instanceof Set) {
+        for (const val of v.values()) visit(val);
+        return;
+      }
+
+      if (Array.isArray(v) || isIterable(v)) {
+        for (const item of v as Iterable<unknown>) visit(item);
+        return;
+      }
+
+      for (const key of Object.keys(v)) {
+        // @ts-ignore
+        visit((v as never)[key]);
+      }
+      return;
+    }
+
+    out.push(v);
+  };
+
+  visit(input);
+  return out.sort(cmp);
+};