chore: release version v1.43.0

* fix: change structure tooltip to avoid paste confusion

* fix: clarify use of evetime and use primereact calendar

.github/workflows/build.yml

@@ -78,22 +78,23 @@ jobs:
           fetch-depth: 0
       - name: 😅 Cache deps
         id: cache-deps
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         env:
           cache-name: cache-elixir-deps
         with:
-          path: deps
-          key: ${{ runner.os }}-mix-${{ env.cache-name }}-${{ hashFiles('**/mix.lock') }}
+          path: |
+            deps
+          key: ${{ runner.os }}-mix-${{ matrix.elixir }}-${{ matrix.otp }}-${{ hashFiles('**/mix.lock') }}
           restore-keys: |
-            ${{ runner.os }}-mix-${{ env.cache-name }}-
+            ${{ runner.os }}-mix-${{ matrix.elixir }}-${{ matrix.otp }}-
       - name: 😅 Cache compiled build
         id: cache-build
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         env:
           cache-name: cache-compiled-build
         with:
           path: |
-            **/_build
+            _build
           key: ${{ runner.os }}-build-${{ hashFiles('**/mix.lock') }}-${{ hashFiles( '**/lib/**/*.{ex,eex}', '**/config/*.exs', '**/mix.exs' ) }}
           restore-keys: |
             ${{ runner.os }}-build-${{ hashFiles('**/mix.lock') }}-
@@ -122,6 +123,9 @@ jobs:
     name: 🛠 Build Docker Images
     needs: build
     runs-on: ubuntu-22.04
+    outputs:
+      release-tag: ${{ steps.get-latest-tag.outputs.tag }}
+      release-notes: ${{ steps.get-content.outputs.string }}
     permissions:
       checks: write
       contents: write
@@ -135,6 +139,7 @@ jobs:
       matrix:
         platform:
           - linux/amd64
+          - linux/arm64
     steps:
       - name: Prepare
         run: |
@@ -183,15 +188,28 @@ jobs:
           push: true
           context: .
           file: ./Dockerfile
-          tags: ${{ env.REGISTRY_IMAGE }}:latest,${{ env.REGISTRY_IMAGE }}:${{ steps.get-latest-tag.outputs.tag }}
+          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: Image digest
-        run: echo ${{ steps.build.outputs.digest }}
+      - 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
@@ -211,16 +229,54 @@ jobs:
           maxLength: 500
           truncationSymbol: "…"
 
-      - name: Discord Webhook Action
-        uses: tsickert/discord-webhook@v5.3.0
+  merge:
+    runs-on: ubuntu-latest
+    needs:
+      - docker
+    steps:
+      - name: Download digests
+        uses: actions/download-artifact@v4
         with:
-          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
-          content: ${{ steps.get-content.outputs.string }}
+          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 }}
 
   create-release:
     name: 🏷 Create Release
     runs-on: ubuntu-22.04
-    needs: docker
+    needs: [docker, merge]
     if: ${{ github.ref == 'refs/heads/main' && github.event_name == 'push' }}
     steps:
       - name: ⬇️ Checkout repo
@@ -228,17 +284,11 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Get Release Tag
-        id: get-latest-tag
-        uses: "WyriHaximus/github-action-get-previous-tag@v1"
-        with:
-          fallback: 1.0.0
-
       - name: 🏷 Create Draft Release
         uses: softprops/action-gh-release@v1
         with:
-          tag_name: ${{ steps.get-latest-tag.outputs.tag }}
-          name: Release ${{ steps.get-latest-tag.outputs.tag }}
+          tag_name: ${{ needs.docker.outputs.release-tag }}
+          name: Release ${{ needs.docker.outputs.release-tag }}
           body: |
             ## Info
             Commit ${{ github.sha }} was deployed to `staging`. [See code diff](${{ github.event.compare }}).
@@ -248,3 +298,9 @@ jobs:
             ## How to Promote?
             In order to promote this to prod, edit the draft and press **"Publish release"**.
           draft: true
+
+      - name: Discord Webhook Action
+        uses: tsickert/discord-webhook@v5.3.0
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          content: ${{ needs.docker.outputs.release-notes }}

CHANGELOG.md

@@ -2,6 +2,249 @@
 
 <!-- changelog -->
 
+## [v1.43.0](https://github.com/wanderer-industries/wanderer/compare/v1.42.5...v1.43.0) (2025-01-20)
+
+
+
+
+### Features:
+
+* add news post for structures widget (#131)
+
+## [v1.42.5](https://github.com/wanderer-industries/wanderer/compare/v1.42.4...v1.42.5) (2025-01-20)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fix link signatures on splash. Fix deleting connection on locked system remove.
+
+## [v1.42.4](https://github.com/wanderer-industries/wanderer/compare/v1.42.3...v1.42.4) (2025-01-20)
+
+
+
+
+### Bug Fixes:
+
+* Fix system statics list (required EVE DB data update). Add system name to signature added/removed audit log
+
+## [v1.42.3](https://github.com/wanderer-industries/wanderer/compare/v1.42.2...v1.42.3) (2025-01-17)
+
+
+
+
+### Bug Fixes:
+
+* change structure tooltip to avoid paste confusion (#125)
+
+* change structure tooltip to avoid paste confusion
+
+* clarify use of evetime and use primereact calendar
+
+## [v1.42.2](https://github.com/wanderer-industries/wanderer/compare/v1.42.1...v1.42.2) (2025-01-16)
+
+
+
+
+## [v1.42.1](https://github.com/wanderer-industries/wanderer/compare/v1.42.0...v1.42.1) (2025-01-16)
+
+
+
+
+### Bug Fixes:
+
+* Map: Remove linked sig ID if system containing signature removed from map
+
+## [v1.42.0](https://github.com/wanderer-industries/wanderer/compare/v1.41.0...v1.42.0) (2025-01-16)
+
+
+
+
+### Features:
+
+* Audit: Add 'Signatures added/removed' map audit events
+
+## [v1.41.0](https://github.com/wanderer-industries/wanderer/compare/v1.40.7...v1.41.0) (2025-01-16)
+
+
+
+
+### Features:
+
+* Audit: Add 'ACL added/removed' map audit events
+
+## [v1.40.7](https://github.com/wanderer-industries/wanderer/compare/v1.40.6...v1.40.7) (2025-01-15)
+
+
+
+
+## [v1.40.6](https://github.com/wanderer-industries/wanderer/compare/v1.40.5...v1.40.6) (2025-01-15)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fix follow mode
+
+* center system is not selected text for structures (#122)
+
+* Map: Fix system revert issues
+
+* Map: Fix issues with splashing signatures select & sig ID in temp names
+
+## [v1.40.5](https://github.com/wanderer-industries/wanderer/compare/v1.40.4...v1.40.5) (2025-01-14)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fix follow mode
+
+## [v1.40.4](https://github.com/wanderer-industries/wanderer/compare/v1.40.3...v1.40.4) (2025-01-14)
+
+
+
+
+### Bug Fixes:
+
+* center system is not selected text for structures (#122)
+
+## [v1.40.3](https://github.com/wanderer-industries/wanderer/compare/v1.40.2...v1.40.3) (2025-01-14)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fix system revert issues
+
+## [v1.40.2](https://github.com/wanderer-industries/wanderer/compare/v1.40.1...v1.40.2) (2025-01-14)
+
+
+
+
+### Bug Fixes:
+
+* Map: Fix issues with splashing signatures select & sig ID in temp names
+
+## [v1.40.1](https://github.com/wanderer-industries/wanderer/compare/v1.40.0...v1.40.1) (2025-01-14)
+
+
+
+
+## [v1.40.0](https://github.com/wanderer-industries/wanderer/compare/v1.39.3...v1.40.0) (2025-01-14)
+
+
+
+
+### Features:
+
+* add structure widget with timer and associated api
+
+## [v1.39.3](https://github.com/wanderer-industries/wanderer/compare/v1.39.2...v1.39.3) (2025-01-14)
+
+
+
+
+### Bug Fixes:
+
+* Map: Add style of corners for windows. Add ability to reset widgets. A lot of refactoring
+
+## [v1.39.2](https://github.com/wanderer-industries/wanderer/compare/v1.39.1...v1.39.2) (2025-01-13)
+
+
+
+
+## [v1.39.1](https://github.com/wanderer-industries/wanderer/compare/v1.39.0...v1.39.1) (2025-01-13)
+
+
+
+
+### Bug Fixes:
+
+* Map: New windows systems
+
+* Map: Add new windows system and removed old
+
+* Map: First prototype of windows
+
+## [v1.39.0](https://github.com/wanderer-industries/wanderer/compare/v1.38.7...v1.39.0) (2025-01-13)
+
+
+
+
+### Features:
+
+* Map: Added option to show signature ID as system temporary name part
+
+## [v1.38.7](https://github.com/wanderer-industries/wanderer/compare/v1.38.6...v1.38.7) (2025-01-12)
+
+
+
+
+## [v1.38.6](https://github.com/wanderer-industries/wanderer/compare/v1.38.5...v1.38.6) (2025-01-12)
+
+
+
+
+## [v1.38.5](https://github.com/wanderer-industries/wanderer/compare/v1.38.4...v1.38.5) (2025-01-12)
+
+
+
+
+## [v1.38.4](https://github.com/wanderer-industries/wanderer/compare/v1.38.3...v1.38.4) (2025-01-12)
+
+
+
+
+## [v1.38.3](https://github.com/wanderer-industries/wanderer/compare/v1.38.2...v1.38.3) (2025-01-12)
+
+
+
+
+## [v1.38.2](https://github.com/wanderer-industries/wanderer/compare/v1.38.1...v1.38.2) (2025-01-11)
+
+
+
+
+### Bug Fixes:
+
+* Fix connections remove timeouts
+
+## [v1.38.1](https://github.com/wanderer-industries/wanderer/compare/v1.38.0...v1.38.1) (2025-01-10)
+
+
+
+
+### Bug Fixes:
+
+* restored default theme colors (#115)
+
+## [v1.38.0](https://github.com/wanderer-industries/wanderer/compare/v1.37.9...v1.38.0) (2025-01-10)
+
+
+
+
+### Features:
+
+* Map: Ability to store/view audit logs up to 3 months
+
+* Map: Inroduced Env settings for connection auto EOL/remove timeouts
+
+## [v1.37.9](https://github.com/wanderer-industries/wanderer/compare/v1.37.8...v1.37.9) (2025-01-10)
+
+
+
+
+### Bug Fixes:
+
+* restore system status colors (#112)
+
+* restore system status colors
+
 ## [v1.37.8](https://github.com/wanderer-industries/wanderer/compare/v1.37.7...v1.37.8) (2025-01-10)
 
 

Dockerfile

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

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

@@ -1,173 +0,0 @@
-// feel free to rename these imports or the file path as you see fit
-import { useMemo } from 'react';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
-import { useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
-import { useDoubleClick } from '@/hooks/Mapper/hooks/useDoubleClick.ts';
-import { REGIONS_MAP, Spaces } from '@/hooks/Mapper/constants';
-import { MapSolarSystemType } from '../../map.types';
-import {
-  LABELS_INFO,
-  LABELS_ORDER,
-  getActivityType,
-} from '@/hooks/Mapper/components/map/constants.ts';
-import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace.ts';
-import { getSystemClassStyles, prepareUnsplashedChunks } from '@/hooks/Mapper/components/map/helpers';
-import { sortWHClasses } from '@/hooks/Mapper/helpers';
-import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager.ts';
-import { OutCommand } from '@/hooks/Mapper/types';
-
-const SpaceToClass: Record<string, string> = {
-  [Spaces.Caldari]: 'Caldaria',
-  [Spaces.Matar]: 'Mataria',
-  [Spaces.Amarr]: 'Amarria',
-  [Spaces.Gallente]: 'Gallente',
-};
-
-const sortedLabels = (labels: string[]) => {
-  if (!labels) return [];
-  return LABELS_ORDER.filter(x => labels.includes(x)).map(x => LABELS_INFO[x]);
-};
-
-interface UseSolarSystemNodeParams {
-  data: MapSolarSystemType;
-  selected: boolean;
-}
-
-export function useSolarSystemNode({ data, selected }: UseSolarSystemNodeParams) {
-  // 1) Bring in relevant global state
-  const { interfaceSettings } = useMapRootState();
-  const { isShowUnsplashedSignatures } = interfaceSettings;
-  const isTempSystemNameEnabled = useMapGetOption('show_temp_system_name') === 'true';
-  
-  const {
-    data: {
-      characters,
-      presentCharacters,
-      wormholesData,
-      hubs,
-      kills,
-      userCharacters,
-      isConnecting,
-      hoverNodeId,
-      visibleNodes,
-      showKSpaceBG,
-      isThickConnections,
-    },
-    outCommand,
-  } = useMapState();
-
-  // 2) Extract data from the node
-  const {
-    system_class,
-    security,
-    class_title,
-    solar_system_id,
-    statics,
-    effect_name,
-    region_name,
-    region_id,
-    is_shattered,
-    solar_system_name,
-  } = data.system_static_info;
-
-  const { locked, name, tag, status, labels, id, temporary_name: temporaryName } = data || {};
-  const signatures = data.system_signatures;
-
-  // 3) Compute derived values
-  const visible = useMemo(() => visibleNodes.has(id), [id, visibleNodes]);
-  
-  const charactersInSystem = useMemo(() => {
-    return characters
-      .filter(c => c.location?.solar_system_id === solar_system_id)
-      .filter(c => c.online);
-  }, [characters, presentCharacters, solar_system_id]);
-
-  const isWormhole = isWormholeSpace(system_class);
-  
-  const classTitleColor = useMemo(
-    () => getSystemClassStyles({ systemClass: system_class, security }),
-    [security, system_class],
-  );
-
-  const sortedStatics = useMemo(
-    () => sortWHClasses(wormholesData, statics),
-    [wormholesData, statics],
-  );
-
-  const labelsManager = useMemo(() => new LabelsManager(labels ?? ''), [labels]);
-  const labelsInfo = useMemo(() => sortedLabels(labelsManager.list), [labelsManager]);
-  const labelCustom = useMemo(() => labelsManager.customLabel, [labelsManager]);
-
-  const killsCount = useMemo(() => {
-    const systemKills = kills[solar_system_id];
-    if (!systemKills) return null;
-    return systemKills;
-  }, [kills, solar_system_id]);
-
-  const hasUserCharacters = useMemo(() => {
-    return charactersInSystem.some(x => userCharacters.includes(x.eve_id));
-  }, [charactersInSystem, userCharacters]);
-
-  const dbClick = useDoubleClick(() => {
-    outCommand({
-      type: OutCommand.openSettings,
-      data: {
-        system_id: solar_system_id.toString(),
-      },
-    });
-  });
-
-  const showHandlers = isConnecting || hoverNodeId === id;
-
-  const space = showKSpaceBG ? REGIONS_MAP[region_id] : '';
-  const regionClass = showKSpaceBG ? SpaceToClass[space] : null;
-
-  const systemName = (isTempSystemNameEnabled && temporaryName) || solar_system_name;
-  const customName = (isTempSystemNameEnabled && temporaryName && name) 
-    || (solar_system_name !== name && name);
-
-  const [unsplashedLeft, unsplashedRight] = useMemo(() => {
-    if (!isShowUnsplashedSignatures) {
-      return [[], []];
-    }
-    return prepareUnsplashedChunks(
-      signatures
-        .filter(s => s.group === 'Wormhole' && !s.linked_system)
-        .map(s => ({
-          eve_id: s.eve_id,
-          type: s.type,
-          custom_info: s.custom_info,
-        })),
-    );
-  }, [isShowUnsplashedSignatures, signatures]);
-
-  return {
-    selected,
-    visible,
-    isWormhole,
-    classTitleColor,
-    killsCount,
-    hasUserCharacters,
-    showHandlers,
-    regionClass,
-    systemName,
-    customName,
-    labelCustom,
-    is_shattered,
-    tag,
-    status,
-    labelsInfo,
-    dbClick,
-    sortedStatics,
-    effect_name,
-    region_name,
-    solar_system_id,
-    locked,
-    hubs,
-    charactersInSystem,
-    unsplashedLeft,
-    unsplashedRight,
-    isThickConnections,
-  };
-}

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

@@ -2,10 +2,10 @@
   width: 100%;
   height: 100%;
 
-  background-color: var(--rf-bg-color, #000000);
+  background-color: var(--rf-bg-color, #0C0A09);
 
   &.BackgroundAlternateColor {
     background-color: var(--rf-soft-bg-color, #171717);
-    --rf-node-bg-color: var(--rf-node-soft-bg-color, #2b2b2b);
+    --rf-node-bg-color: var(--rf-node-soft-bg-color, #202020);
   }
 }

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

@@ -1,8 +1,8 @@
 import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect, useMemo } from 'react';
 import ReactFlow, {
   Background,
-  ConnectionMode,
   Edge,
+  EdgeChange,
   MiniMap,
   Node,
   NodeChange,
@@ -17,18 +17,16 @@ import ReactFlow, {
 import 'reactflow/dist/style.css';
 import classes from './Map.module.scss';
 import { MapProvider, useMapState } from './MapProvider';
-import { useNodesState, useEdgesState, useMapHandlers, useUpdateNodes } from './hooks';
+import { useEdgesState, useMapHandlers, useNodesState, useUpdateNodes } from './hooks';
 import { MapHandlers, OutCommand, OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers.ts';
 import {
   ContextMenuConnection,
   ContextMenuRoot,
   SolarSystemEdge,
-  SolarSystemNodeDefault,
-  SolarSystemNodeTheme,
   useContextMenuConnectionHandlers,
   useContextMenuRootHandlers,
 } from './components';
-import { wrapNode } from './utils/wrapNode';
+import { getBehaviorForTheme } from './helpers/getThemeBehavior';
 import { OnMapAddSystemCallback, OnMapSelectionChange } from './map.types';
 import { SESSION_KEY } from '@/hooks/Mapper/constants.ts';
 import { SolarSystemConnection, SolarSystemRawType } from '@/hooks/Mapper/types';
@@ -77,9 +75,6 @@ const initialEdges = [
   },
 ];
 
-
-
-
 const edgeTypes = {
   floating: SolarSystemEdge,
 };
@@ -89,6 +84,7 @@ interface MapCompProps {
   onCommand: OutCommandHandler;
   onSelectionChange: OnMapSelectionChange;
   onManualDelete(systems: string[]): void;
+  canRemoveConnection?(connectionId: string): boolean;
   onConnectionInfoClick?(e: SolarSystemConnection): void;
   onAddSystem?: OnMapAddSystemCallback;
   onSelectionContextMenu?: NodeSelectionMouseHandler;
@@ -118,28 +114,26 @@ const MapComp = ({
   isSoftBackground,
   theme,
   onAddSystem,
+  canRemoveConnection,
 }: MapCompProps) => {
-  const { getNode, getNodes } = useReactFlow();
+  const { getEdge, getNode, getNodes } = useReactFlow();
   const [nodes, , onNodesChange] = useNodesState<Node<SolarSystemRawType>>(initialNodes);
   const [edges, , onEdgesChange] = useEdgesState<Edge<SolarSystemConnection>>(initialEdges);
 
-
-  const nodeTypes = useMemo(() => {
-    return {
-      custom:
-        theme !== '' && theme !== 'default'
-          ? wrapNode(SolarSystemNodeTheme)
-          : wrapNode(SolarSystemNodeDefault),
-    };
-  }, [theme]);
-  
-
   useMapHandlers(refn, onSelectionChange);
   useUpdateNodes(nodes);
   const { handleRootContext, ...rootCtxProps } = useContextMenuRootHandlers({ onAddSystem });
   const { handleConnectionContext, ...connectionCtxProps } = useContextMenuConnectionHandlers();
   const { update } = useMapState();
   const { variant, gap, size, color } = useBackgroundVars(theme);
+  const { isPanAndDrag, nodeComponent, connectionMode } = getBehaviorForTheme(theme || 'default');
+
+  // You can create nodeTypes dynamically based on the node component
+  const nodeTypes = useMemo(() => {
+    return {
+      custom: nodeComponent,
+    };
+  }, [nodeComponent]);
 
   const onConnect: OnConnect = useCallback(
     params => {
@@ -228,7 +222,41 @@ const MapComp = ({
 
       onNodesChange(nextChanges);
     },
-    [getNode, onManualDelete, onNodesChange],
+    [getNode, getNodes, onManualDelete, onNodesChange],
+  );
+
+  const handleEdgesChange = useCallback(
+    (changes: EdgeChange[]) => {
+      const nextChanges = changes.reduce((acc, change) => {
+        if (change.type !== 'remove') {
+          return [...acc, change];
+        }
+
+        if (canRemoveConnection?.(change.id)) {
+          return [...acc, change];
+        }
+
+        const edge = getEdge(change.id);
+        if (!edge) {
+          return [...acc, change];
+        }
+
+        const sourceNode = getNode(edge.source);
+        const targetNode = getNode(edge.target);
+        if (!sourceNode || !targetNode) {
+          return [...acc, change];
+        }
+
+        if (sourceNode.data.locked || targetNode.data.locked) {
+          return acc;
+        }
+
+        return [...acc, change];
+      }, [] as EdgeChange[]);
+
+      onEdgesChange(nextChanges);
+    },
+    [getEdge, getNode, onEdgesChange],
   );
 
   useEffect(() => {
@@ -246,14 +274,14 @@ const MapComp = ({
           nodes={nodes}
           edges={edges}
           onNodesChange={handleNodesChange}
-          onEdgesChange={onEdgesChange}
+          onEdgesChange={handleEdgesChange}
           onConnect={onConnect}
           // TODO we need save into session all of this
           //      and on any action do either
           defaultViewport={getViewPortFromStore()}
           edgeTypes={edgeTypes}
           nodeTypes={nodeTypes}
-          connectionMode={ConnectionMode.Loose}
+          connectionMode={connectionMode}
           snapToGrid
           nodeDragThreshold={10}
           onNodeDragStop={handleDragStop}
@@ -261,6 +289,10 @@ const MapComp = ({
           onConnectStart={() => update({ isConnecting: true })}
           onConnectEnd={() => update({ isConnecting: false })}
           onNodeMouseEnter={(_, node) => update({ hoverNodeId: node.id })}
+          onPaneClick={event => {
+            event.preventDefault();
+            event.stopPropagation();
+          }}
           // onKeyUp=
           onNodeMouseLeave={() => update({ hoverNodeId: null })}
           onEdgeClick={(_, t) => {
@@ -282,6 +314,12 @@ const MapComp = ({
           maxZoom={1.5}
           elevateNodesOnSelect
           deleteKeyCode={['Delete']}
+          {...(isPanAndDrag
+            ? {
+                selectionOnDrag: true,
+                panOnDrag: [2],
+              }
+            : {})}
           // TODO need create clear example with problem with that flag
           //  if system is not visible edge not drawing (and any render in Custom node is not happening)
           // onlyRenderVisibleElements

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

@@ -9,6 +9,7 @@ export type MapData = MapUnionTypes & {
   visibleNodes: Set<string>;
   showKSpaceBG: boolean;
   isThickConnections: boolean;
+  linkedSigEveId: string;
 };
 
 interface MapProviderProps {

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

@@ -1,377 +0,0 @@
-import { memo, useMemo } from 'react';
-import { Handle, Position, WrapNodeProps } from 'reactflow';
-import { MapSolarSystemType } from '../../map.types';
-import classes from './SolarSystemNode.module.scss';
-import clsx from 'clsx';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
-
-import {
-  EFFECT_BACKGROUND_STYLES,
-  LABELS_INFO,
-  LABELS_ORDER,
-  MARKER_BOOKMARK_BG_STYLES,
-  STATUS_CLASSES,
-} from '@/hooks/Mapper/components/map/constants.ts';
-import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace.ts';
-import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/WormholeClassComp';
-import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
-import { useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
-import { getSystemClassStyles, prepareUnsplashedChunks } from '@/hooks/Mapper/components/map/helpers';
-import { sortWHClasses } from '@/hooks/Mapper/helpers';
-import { PrimeIcons } from 'primereact/api';
-import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager.ts';
-import { OutCommand } from '@/hooks/Mapper/types';
-import { useDoubleClick } from '@/hooks/Mapper/hooks/useDoubleClick.ts';
-import { REGIONS_MAP, Spaces } from '@/hooks/Mapper/constants';
-
-const SpaceToClass: Record<string, string> = {
-  [Spaces.Caldari]: classes.Caldaria,
-  [Spaces.Matar]: classes.Mataria,
-  [Spaces.Amarr]: classes.Amarria,
-  [Spaces.Gallente]: classes.Gallente,
-};
-
-const sortedLabels = (labels: string[]) => {
-  if (!labels) {
-    return [];
-  }
-
-  return LABELS_ORDER.filter(x => labels.includes(x)).map(x => LABELS_INFO[x]);
-};
-
-export const getActivityType = (count: number) => {
-  if (count <= 5) {
-    return 'activityNormal';
-  }
-
-  if (count <= 30) {
-    return 'activityWarn';
-  }
-
-  return 'activityDanger';
-};
-
-// eslint-disable-next-line react/display-name
-export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarSystemType>) => {
-  const { interfaceSettings } = useMapRootState();
-  const { isShowUnsplashedSignatures } = interfaceSettings;
-
-  const isTempSystemNameEnabled = useMapGetOption('show_temp_system_name') === 'true';
-
-  const {
-    system_class,
-    security,
-    class_title,
-    solar_system_id,
-    statics,
-    effect_name,
-    region_name,
-    region_id,
-    is_shattered,
-    solar_system_name,
-  } = data.system_static_info;
-
-  const signatures = data.system_signatures;
-
-  const { locked, name, tag, status, labels, id, temporary_name: temporaryName } = data || {};
-
-  const {
-    data: {
-      characters,
-      wormholesData,
-      hubs,
-      kills,
-      isConnecting,
-      hoverNodeId,
-      visibleNodes,
-      showKSpaceBG,
-      isThickConnections,
-    },
-    outCommand,
-  } = useMapState();
-
-  const visible = useMemo(() => visibleNodes.has(id), [id, visibleNodes]);
-
-  const charactersInSystem = useMemo(() => {
-    return characters.filter(c => c.location?.solar_system_id === solar_system_id).filter(c => c.online);
-  }, [characters, solar_system_id]);
-
-  const isWormhole = isWormholeSpace(system_class);
-  const classTitleColor = useMemo(
-    () => getSystemClassStyles({ systemClass: system_class, security }),
-    [security, system_class],
-  );
-  const sortedStatics = useMemo(() => sortWHClasses(wormholesData, statics), [wormholesData, statics]);
-  const lebM = useMemo(() => new LabelsManager(labels ?? ''), [labels]);
-  const labelsInfo = useMemo(() => sortedLabels(lebM.list), [lebM]);
-  const labelCustom = useMemo(() => lebM.customLabel, [lebM]);
-
-  const killsCount = useMemo(() => {
-    const systemKills = kills[solar_system_id];
-    if (!systemKills) {
-      return null;
-    }
-    return systemKills;
-  }, [kills, solar_system_id]);
-
-  const dbClick = useDoubleClick(() => {
-    outCommand({
-      type: OutCommand.openSettings,
-      data: {
-        system_id: solar_system_id.toString(),
-      },
-    });
-  });
-
-
-  const showHandlers = isConnecting || hoverNodeId === id;
-  const dropHandler =  isConnecting ? 'all' : 'none';
-
-  const space = showKSpaceBG ? REGIONS_MAP[region_id] : '';
-  const regionClass = showKSpaceBG ? SpaceToClass[space] : null;
-
-  const hasTempName = isTempSystemNameEnabled && temporaryName;
-
-  // systemName: if temporary name is enabled and present, use it; otherwise use solar_system_name
-  const systemName = hasTempName
-    ? temporaryName
-    : solar_system_name;
-
-  // hsCustomLabel: if temporary name is enabled and present, show region_name, otherwise labelCustom
-  const hsCustomLabel = hasTempName
-    ? region_name
-    : labelCustom;
-
-  // whCustomLabel: default to solar_system_name; if that's falsy, use labelCustom
-  const whCustomLabel = solar_system_name || labelCustom;
-
-  // customLabel: if wormhole, use whCustomLabel; otherwise hsCustomLabel
-  const customLabel = isWormhole
-    ? whCustomLabel
-    : hsCustomLabel;
-
-  // whCustomName: if name differs from solar_system_name, use name; otherwise blank
-  const whCustomName = (name !== solar_system_name)
-    ? name
-    : '';
-
-  // hsSuffix: if name differs from solar_system_name, append name; otherwise blank
-  const needsHsSuffix = (name !== solar_system_name);
-  const hsSuffix = needsHsSuffix
-    ? name
-    : '';
-
-  // hsCustomName: if there's a temp name, show "solar_system_name + suffix", otherwise "region_name + suffix"
-  const hsCustomName = hasTempName
-    ? `${solar_system_name} ${hsSuffix}`
-    : `${region_name} ${hsSuffix}`;
-
-  // customName: if wormhole, use whCustomName; otherwise hsCustomName
-  const customName = isWormhole
-    ? whCustomName
-    : hsCustomName;
-
-  const [unsplashedLeft, unsplashedRight] = useMemo(() => {
-    if (!isShowUnsplashedSignatures) {
-      return [[], []];
-    }
-    return prepareUnsplashedChunks(
-      signatures
-        .filter(s => s.group === 'Wormhole' && !s.linked_system)
-        .map(s => ({
-          eve_id: s.eve_id,
-          type: s.type,
-          custom_info: s.custom_info,
-        })),
-    );
-  }, [isShowUnsplashedSignatures, signatures]);
-
-  return (
-    <>
-      {visible && (
-        <div className={classes.Bookmarks}>
-          {customLabel !== '' && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
-              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] ">{customLabel}</span>
-            </div>
-          )}
-
-          {is_shattered && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered)}>
-              <span className={clsx('pi pi-chart-pie text-[0.55rem]')} />
-            </div>
-          )}
-
-          {killsCount && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[getActivityType(killsCount)])}>
-              <div className={clsx(classes.BookmarkWithIcon)}>
-                <span className={clsx(PrimeIcons.BOLT, 'text-[0.65rem]')} />
-                <span className={clsx(classes.text)}>{killsCount}</span>
-              </div>
-            </div>
-          )}
-
-          {labelsInfo.map(x => (
-            <div key={x.id} className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}>
-              {x.shortName}
-            </div>
-          ))}
-        </div>
-      )}
-      <div
-        className={clsx(
-          classes.RootCustomNode,
-          regionClass,
-          classes[STATUS_CLASSES[status]],
-          { [classes.selected]: selected },
-          'flex flex-col w-[130px] h-[34px]',
-          'px-[6px] pt-[2px] pb-[3px] text-[10px]',
-          'leading-[1] space-y-[1px]',
-          'shadow-[0_0_5px_rgba(45,45,45,0.5)]',
-          'border border-[var(--pastel-blue-darken10)] rounded-[5px]',
-        )}
-      >
-        {visible && (
-          <>
-            <div className={clsx(classes.HeadRow, 'flex items-center gap-[3px]')}>
-              <div className={clsx(classes.classTitle, classTitleColor, '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]')}>
-                {class_title ?? '-'}
-              </div>
-
-              <div
-                className={clsx(
-                  classes.classSystemName,
-                  'flex-grow overflow-hidden text-ellipsis whitespace-nowrap font-sans',
-                )}
-              >
-                {systemName}
-              </div>
-
-              {isWormhole && (
-                <div className={clsx(classes.statics, 'flex gap-[2px] text-[8px]')}>
-                  {sortedStatics.map(x => (
-                    <WormholeClassComp key={x} id={x} />
-                  ))}
-                </div>
-              )}
-
-              {effect_name !== null && isWormhole && (
-                <div className={clsx(classes.effect, EFFECT_BACKGROUND_STYLES[effect_name])}></div>
-              )}
-            </div>
-
-            <div className={clsx(classes.BottomRow, 'flex items-center gap-[3px]')}>
-              <div className="flex items-center gap-2">
-                {tag != null && tag !== '' && (
-                    <div className={clsx(classes.TagTitle, 'font-medium')}>{`[${tag}]`}</div>
-                )}
-                <div
-                  className={clsx(classes.customName)}
-                  title={`${customName ?? ''} ${labelCustom ?? ''}`}
-                >
-                  {customName} {labelCustom}
-                </div>
-              </div>
-
-              <div className="flex items-center ml-auto gap-[2px]">
-                {locked && <i className={clsx(PrimeIcons.LOCK, 'text-[0.45rem] font-bold')} />}
-                {hubs.includes(solar_system_id.toString()) && (
-                  <i className={clsx(PrimeIcons.MAP_MARKER, 'text-[0.45rem] font-bold')} />
-                )}
-                {charactersInSystem.length > 0 && (
-                  <div
-                    className={clsx(
-                      classes.localCounter,
-                      'flex gap-[2px]'
-                    )}
-                  >
-                    <span className="font-sans text-[0.65rem]">{charactersInSystem.length}</span>
-                  </div>
-                )}
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-
-      {visible && isShowUnsplashedSignatures && (
-        <div className={classes.Unsplashed}>
-          {unsplashedLeft.map(x => (
-            <UnsplashedSignature key={x.sig_id} signature={x} />
-          ))}
-        </div>
-      )}
-      {visible && isShowUnsplashedSignatures && (
-        <div className={clsx(classes.Unsplashed, classes['Unsplashed--right'])}>
-          {unsplashedRight.map(x => (
-            <UnsplashedSignature key={x.sig_id} signature={x} />
-          ))}
-        </div>
-      )}
-
-      <div onMouseDownCapture={dbClick} className={classes.Handlers}>
-      <Handle
-          type="target"
-          position={Position.Bottom}
-          style={{
-            width: '100%',
-            height: '100%',
-            background: 'none',
-            cursor: 'cell',
-            pointerEvents: dropHandler,
-            opacity: 0,
-            borderRadius: 0 }}
-          id="whole-node-target"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleTop, {
-            [classes.selected]: selected,
-            [classes.Tick]: isThickConnections,
-          })}
-          style={{
-            width: '100%',
-            height: '55%',
-            background: 'none',
-            cursor: 'cell',
-            opacity: 0,
-            borderRadius: 0,
-            visibility: showHandlers ? 'visible' : 'hidden',}}
-          position={Position.Top}
-          id="a"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleRight, {
-            [classes.selected]: selected,
-            [classes.Tick]: isThickConnections,
-          })}
-          style={{ visibility: showHandlers ? 'visible' : 'hidden', cursor: 'cell',  zIndex: 10  }}
-          position={Position.Right}
-          id="b"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleBottom, {
-            [classes.selected]: selected,
-            [classes.Tick]: isThickConnections,
-          })}
-          style={{ visibility: 'hidden', cursor: 'cell' }}
-          position={Position.Bottom}
-          id="c"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleLeft, {
-            [classes.selected]: selected,
-            [classes.Tick]: isThickConnections,
-          })}
-          style={{ visibility: showHandlers ? 'visible' : 'hidden', cursor: 'cell',  zIndex: 10  }}
-          position={Position.Left}
-          id="d"
-        />
-      </div>
-    </>
-  );
-});

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

@@ -6,7 +6,14 @@ $pastel-green: #88b04b;
 $pastel-yellow: #ffdd59;
 $dark-bg: #2d2d2d;
 $text-color: #ffffff;
-$tooltip-bg: #202020; // Dark background for tooltips
+$tooltip-bg: #202020;
+
+$node-bg-color: #202020;
+$node-soft-bg-color: #202020;
+$text-color: #ffffff;
+$tag-color:  #38BDF8;
+$region-name: #D6D3D1;
+$custom-name: #93C5FD;
 
 .RootCustomNode {
   display: flex;
@@ -80,12 +87,12 @@ $tooltip-bg: #202020; // Dark background for tooltips
     }
   }
 
-  .selected {
-    border-color: var($pastel-pink, #d291bc);
+  &.selected {
+    border-color: $pastel-pink;
     box-shadow: 0 0 10px #9a1af1c2;
   }
 
-  .tooltip {
+  &.tooltip {
     background-color: $tooltip-bg;
     color: $text-color;
     padding: 5px 10px;
@@ -93,18 +100,19 @@ $tooltip-bg: #202020; // Dark background for tooltips
     border: 1px solid $pastel-pink;
   }
 
- .eve-system-status-home {
+  &.eve-system-status-home {
     border: 1px solid var(--eve-solar-system-status-color-home-dark30);
     background-image: linear-gradient(
       275deg,
-      var(--eve-solar-system-status-friendly),
+      var(--eve-solar-system-status-home),
       transparent
     );
     &.selected {
       border-color: var(--eve-solar-system-status-color-home);
     }
   }
-  .eve-system-status-friendly {
+
+  &.eve-system-status-friendly {
     border: 1px solid var(--eve-solar-system-status-color-friendly-dark20);
     background-image: linear-gradient(
       275deg,
@@ -115,28 +123,32 @@ $tooltip-bg: #202020; // Dark background for tooltips
       border-color: var(--eve-solar-system-status-color-friendly-dark5);
     }
   }
-  .eve-system-status-lookingFor {
+
+  &.eve-system-status-lookingFor {
     border: 1px solid var(--eve-solar-system-status-color-lookingFor-dark15);
     background-image: linear-gradient(275deg, #45ff8f2f, #457fff2f);
     &.selected {
-      border-color: var(--pastel-pink, #d291bc);
+      border-color: $pastel-pink;
     }
   }
-  .eve-system-status-warning {
+
+  &.eve-system-status-warning {
     background-image: linear-gradient(
       275deg,
       var(--eve-solar-system-status-warning),
       transparent
     );
   }
-  .eve-system-status-dangerous {
+
+  &.eve-system-status-dangerous {
     background-image: linear-gradient(
       275deg,
       var(--eve-solar-system-status-dangerous),
       transparent
     );
   }
-  .eve-system-status-target {
+
+  &.eve-system-status-target {
     background-image: linear-gradient(
       275deg,
       var(--eve-solar-system-status-target),

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

@@ -1,12 +1,10 @@
 import { memo } from 'react';
-import { Handle, Position } from 'reactflow';
+import { MapSolarSystemType } from '../../map.types';
+import { Handle, Position, NodeProps } from 'reactflow';
 import clsx from 'clsx';
-
-import classes from './SolarSystemNodeDefault.module.scss'; 
+import classes from './SolarSystemNodeDefault.module.scss';
 import { PrimeIcons } from 'primereact/api';
-
 import { useSolarSystemNode } from '../../hooks/useSolarSystemNode';
-
 import {
   MARKER_BOOKMARK_BG_STYLES,
   STATUS_CLASSES,
@@ -15,8 +13,7 @@ import {
 import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/WormholeClassComp';
 import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
 
-
-export const SolarSystemNodeDefault = memo((props) => {
+export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>) => {
   const nodeVars = useSolarSystemNode(props);
 
   return (
@@ -25,9 +22,7 @@ export const SolarSystemNodeDefault = memo((props) => {
         <div className={classes.Bookmarks}>
           {nodeVars.labelCustom !== '' && (
             <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
-              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] ">
-                {nodeVars.labelCustom}
-              </span>
+              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] ">{nodeVars.labelCustom}</span>
             </div>
           )}
 
@@ -38,12 +33,7 @@ export const SolarSystemNodeDefault = memo((props) => {
           )}
 
           {nodeVars.killsCount && (
-            <div
-              className={clsx(
-                classes.Bookmark,
-                MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!]
-              )}
-            >
+            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!])}>
               <div className={clsx(classes.BookmarkWithIcon)}>
                 <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
                 <span className={clsx(classes.text)}>{nodeVars.killsCount}</span>
@@ -52,10 +42,7 @@ export const SolarSystemNodeDefault = memo((props) => {
           )}
 
           {nodeVars.labelsInfo.map(x => (
-            <div
-              key={x.id}
-              className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}
-            >
+            <div key={x.id} className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}>
               {x.shortName}
             </div>
           ))}
@@ -67,7 +54,9 @@ export const SolarSystemNodeDefault = memo((props) => {
           classes.RootCustomNode,
           nodeVars.regionClass && classes[nodeVars.regionClass],
           classes[STATUS_CLASSES[nodeVars.status]],
-          { [classes.selected]: nodeVars.selected },
+          {
+            [classes.selected]: nodeVars.selected,
+          },
         )}
       >
         {nodeVars.visible && (
@@ -84,9 +73,7 @@ export const SolarSystemNodeDefault = memo((props) => {
               </div>
 
               {nodeVars.tag != null && nodeVars.tag !== '' && (
-                <div className={clsx(classes.TagTitle, 'text-sky-400 font-medium')}>
-                  {nodeVars.tag}
-                </div>
+                <div className={clsx(classes.TagTitle, 'text-sky-400 font-medium')}>{nodeVars.tag}</div>
               )}
 
               <div
@@ -107,12 +94,7 @@ export const SolarSystemNodeDefault = memo((props) => {
               )}
 
               {nodeVars.effectName !== null && nodeVars.isWormhole && (
-                <div
-                  className={clsx(
-                    classes.effect,
-                    EFFECT_BACKGROUND_STYLES[nodeVars.effectName],
-                  )}
-                />
+                <div className={clsx(classes.effect, EFFECT_BACKGROUND_STYLES[nodeVars.effectName])} />
               )}
             </div>
 
@@ -124,9 +106,7 @@ export const SolarSystemNodeDefault = memo((props) => {
               )}
 
               {!nodeVars.isWormhole && !nodeVars.customName && (
-                <div
-                  className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-stone-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5"
-                >
+                <div className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-stone-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5">
                   {nodeVars.regionName}
                 </div>
               )}
@@ -136,17 +116,11 @@ export const SolarSystemNodeDefault = memo((props) => {
               <div className="flex items-center justify-end">
                 <div className="flex gap-1 items-center">
                   {nodeVars.locked && (
-                    <i
-                      className={PrimeIcons.LOCK}
-                      style={{ fontSize: '0.45rem', fontWeight: 'bold' }}
-                    />
+                    <i className={PrimeIcons.LOCK} style={{ fontSize: '0.45rem', fontWeight: 'bold' }} />
                   )}
 
                   {nodeVars.hubs.includes(nodeVars.solarSystemId.toString()) && (
-                    <i
-                      className={PrimeIcons.MAP_MARKER}
-                      style={{ fontSize: '0.45rem', fontWeight: 'bold' }}
-                    />
+                    <i className={PrimeIcons.MAP_MARKER} style={{ fontSize: '0.45rem', fontWeight: 'bold' }} />
                   )}
 
                   {nodeVars.charactersInSystem.length > 0 && (
@@ -156,9 +130,7 @@ export const SolarSystemNodeDefault = memo((props) => {
                       })}
                     >
                       <i className="pi pi-users" style={{ fontSize: '0.50rem' }} />
-                      <span className="font-sans">
-                        {nodeVars.charactersInSystem.length}
-                      </span>
+                      <span className="font-sans">{nodeVars.charactersInSystem.length}</span>
                     </div>
                   )}
                 </div>
@@ -233,3 +205,5 @@ export const SolarSystemNodeDefault = memo((props) => {
     </>
   );
 });
+
+SolarSystemNodeDefault.displayName = 'SolarSystemNodeDefault';

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

@@ -1,402 +1,91 @@
-@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
+@import './SolarSystemNodeDefault.module.scss';
 
-$pastel-blue: #5a7d9a;
-$pastel-pink: #d291bc;
-$pastel-green: #88b04b;
-$pastel-yellow: #ffdd59;
-$dark-bg: #2d2d2d;
-$text-color: #ffffff;
-$tooltip-bg: #202020; // Dark background for tooltips
+/* ---------------------------
+   Only override what's different
+--------------------------- */
 
+/* 1) .RootCustomNode:
+   - new background-color using CSS var
+   - plus color, font-family, and font-weight */
 .RootCustomNode {
-  display: flex;
-  width: 130px;
-  height: 34px;
-
-  flex-direction: column;
-  padding: 2px 6px;
-  font-size: 10px;
-
   background-color: var(--rf-node-bg-color, #202020) !important;
   color: var(--rf-text-color, #ffffff);
   font-family: var(--rf-node-font-family, inherit) !important;
   font-weight: var(--rf-node-font-weight, inherit) !important;
-
-  box-shadow: 0 0 5px rgba($dark-bg, 0.5);
-  border: 1px solid darken($pastel-blue, 10%);
-  border-radius: 5px;
-  position: relative;
-  z-index: 1;
-  overflow: hidden;
-
-  &.Mataria,
-  &.Amarria,
-  &.Gallente,
-  &.Caldaria {
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-size: cover;
-      background-position: 50% 50%;
-      z-index: -1;
-      background-repeat: no-repeat;
-      border-radius: 3px;
-    }
-  }
-
-  &.Mataria {
-    &::before {
-      background-image: url('/images/mataria-180.png');
-      opacity: 0.6;
-      background-position-x: 1px;
-      background-position-y: -14px;
-    }
-  }
-
-  &.Caldaria {
-    &::before {
-      background-image: url('/images/caldaria-180.png');
-      opacity: 0.6;
-      background-position-x: 1px;
-      background-position-y: -10px;
-    }
-  }
-
-  &.Amarria {
-    &::before {
-      opacity: 0.45;
-      background-image: url('/images/amarr-180.png');
-      background-position-x: 0;
-      background-position-y: -13px;
-    }
-  }
-
-  &.Gallente {
-    &::before {
-      opacity: 0.5;
-      background-image: url('/images/gallente-180.png');
-      background-position-x: 1px;
-      background-position-y: 0;
-    }
-  }
-
-  .selected {
-    border-color: var($pastel-pink, #d291bc);
-    box-shadow: 0 0 10px #9a1af1c2;
-  }
-
-  .tooltip {
-    background-color: $tooltip-bg;
-    color: $text-color;
-    padding: 5px 10px;
-    border-radius: 3px;
-    border: 1px solid $pastel-pink;
-  }
-
- .eve-system-status-home {
-    border: 1px solid var(--eve-solar-system-status-color-home-dark30);
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-friendly),
-      transparent
-    );
-    &.selected {
-      border-color: var(--eve-solar-system-status-color-home);
-    }
-  }
-  .eve-system-status-friendly {
-    border: 1px solid var(--eve-solar-system-status-color-friendly-dark20);
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-friendly-dark30),
-      transparent
-    );
-    &.selected {
-      border-color: var(--eve-solar-system-status-color-friendly-dark5);
-    }
-  }
-  .eve-system-status-lookingFor {
-    border: 1px solid var(--eve-solar-system-status-color-lookingFor-dark15);
-    background-image: linear-gradient(275deg, #45ff8f2f, #457fff2f);
-    &.selected {
-      border-color: var(--pastel-pink, #d291bc);
-    }
-  }
-  .eve-system-status-warning {
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-warning),
-      transparent
-    );
-  }
-  .eve-system-status-dangerous {
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-dangerous),
-      transparent
-    );
-  }
-  .eve-system-status-target {
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-target),
-      transparent
-    );
-  }
 }
 
+/* 2) .Bookmarks:
+   - add var-based font family/weight
+*/
 .Bookmarks {
-  position: absolute;
-  width: 100%;
-  z-index: 1;
-  display: flex;
-  left: 4px;
-
-  & > .Bookmark {
-    min-width: 13px;
-    height: 22px;
-    position: relative;
-    top: -13px;
-    border-radius: 5px;
-    color: #ffffff;
-    font-size: 8px;
-    text-align: center;
-    padding-top: 2px;
-    font-weight: bolder;
-    padding-left: 3px;
-    padding-right: 3px;
-
-    //background-color: #833ca4;
-
-    &:not(:first-child) {
-      box-shadow: inset 4px -3px 4px rgba(0, 0, 0, 0.3);
-    }
-  }
-
-  .BookmarkWithIcon {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: -2px;
-    text-shadow: 0 0 3px rgba(0, 0, 0, 1);
-    padding-right: 2px;
-
-    & > .icon {
-      width: 8px;
-      height: 8px;
-      font-size: 8px;
-    }
-
-    & > .text {
-      margin-top: 1px;
-      font-size: 9px;
-    }
-  }
-}
-
-.Unsplashed {
-  position: absolute;
-  width: calc(50% - 4px);
-  z-index: -1;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 2px;
-  left: 2px;
-
-  &--right {
-    left: calc(50% + 6px);
-  }
-
-  & > .Signature {
-    width: 13px;
-    height: 4px;
-    position: relative;
-    top: 3px;
-    border-radius: 5px;
-    color: #ffffff;
-    font-size: 8px;
-    text-align: center;
-    padding-top: 2px;
-    font-weight: bolder;
-    padding-left: 3px;
-    padding-right: 3px;
-    display: block;
-
-    background-color: #833ca4;
-
-    &:not(:first-child) {
-      box-shadow: inset 4px -3px 4px rgba(0, 0, 0, 0.3);
-    }
-  }
-}
-
-.icon {
-  width: 8px;
-  height: 8px;
-  font-size: 8px;
+  font-family: var(--rf-node-font-family, inherit) !important;
+  font-weight: var(--rf-node-font-weight, inherit) !important;
 }
 
+/* 3) .HeadRow, .classTitle, .classSystemName:
+   - add new references to var-based font family/weight
+*/
 .HeadRow {
-  display: flex;
-  align-items: center;
-  gap: 3px;
-  font-size: 11px;
-  line-height: 14px;
-  font-weight: 500;
-  position: relative;
-  top: 1px;
+  font-family: var(--rf-node-font-family, inherit) !important;
+  font-weight: var(--rf-node-font-weight, inherit) !important;
 
   .classTitle {
-    font-size: 11px;
-    font-weight: bold;
-    text-shadow: 0 0 2px rgb(0 0 0 / 73%);
+    font-family: var(--rf-node-font-family, inherit) !important;
+    font-weight: var(--rf-node-font-weight, inherit) !important;
   }
 
-  .TagTitle {
-    font-size: 11px;
-    font-weight: medium;
-    text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
-
-    color: var(--rf-tag-color, #38BDF8);
-  }
-
-  /* Firefox kostyl */
   @-moz-document url-prefix() {
     .classSystemName {
-      font-family: inherit !important;
-      font-weight: bold;
+      font-family: var(--rf-node-font-family, inherit) !important;
+      font-weight: var(--rf-node-font-weight, inherit) !important;
     }
   }
 
   .classSystemName {
-    font-family: inherit !important;
-    font-weight: bold;
-  }
-
-  .solarSystemName {
+    font-family: var(--rf-node-font-family, inherit) !important;
+    font-weight: var(--rf-node-font-weight, inherit) !important;
   }
 }
 
+/* 4) .BottomRow:
+   - introduces .tagTitle, .regionName, .customName, .localCounter
+     referencing new CSS variables */
 .BottomRow {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 19px;
+  font-family: var(--rf-node-font-family, inherit) !important;
+  font-weight: var(--rf-node-font-weight, inherit) !important;
+
+  .tagTitle {
+    font-size: 11px;
+    font-weight: medium;
+    text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
+    font-family: var(--rf-node-font-family, inherit) !important;
+    font-weight: var(--rf-node-font-weight, inherit) !important;
+    color: var(--rf-tag-color, #38BDF8);
+  }
 
   .regionName {
-    color: var(--rf-region-name, #D6D3D1)
+    color: var(--rf-region-name, #D6D3D1);
+    font-family: var(--rf-node-font-family, inherit) !important;
+    font-weight: var(--rf-node-font-weight, inherit) !important;
   }
 
   .customName {
-    color: var(--rf-custom-name, #93C5FD)
+    color: var(--rf-custom-name, #93C5FD);
+    font-family: var(--rf-node-font-family, inherit) !important;
+    font-weight: var(--rf-node-font-weight, inherit) !important;
   }
 
   .localCounter {
     display: flex;
-    //align-items: center;
+    color: var(--rf-has-user-characters, #fbbf24);
+    font-family: var(--rf-node-font-family, inherit) !important;
+    font-weight: var(--rf-node-font-weight, inherit) !important;
     gap: 2px;
 
     .hasUserCharacters {
       color: var(--rf-has-user-characters, #fbbf24);
-    }
-
-    & > i {
-      position: relative;
-      top: 1px;
-    }
-
-    & > span {
-      font-size: 9px;
-      line-height: 9px;
-      font-weight: 500;
-      //margin-top: 1px;
-    }
-  }
-}
-
-.effect {
-  width: 8px;
-  height: 8px;
-  margin-top: -2px;
-  box-sizing: border-box;
-  border-radius: 2px;
-  margin-left: 1px;
-}
-
-.statics {
-  display: flex;
-  gap: 2px;
-  font-size: 8px;
-
-  & > * {
-    line-height: 10px;
-  }
-
-  /* Firefox kostyl */
-  @-moz-document url-prefix() {
-    position: relative;
-    top: -1px;
-  }
-}
-
-.Handlers {
-  position: absolute;
-  z-index: 2;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.Handle {
-  min-width: initial;
-  min-height: initial;
-  border: 1px solid $pastel-blue;
-  width: 5px;
-  height: 5px;
-
-  &.selected {
-    border-color: $pastel-pink;
-  }
-
-  &.HandleTop {
-    top: -2px;
-  }
-
-  &.HandleRight {
-    right: -2px;
-  }
-
-  &.HandleBottom {
-    bottom: -2px;
-  }
-
-  &.HandleLeft {
-    left: -2px;
-  }
-
-  &.Tick {
-    width: 7px;
-    height: 7px;
-
-    &.HandleTop {
-      top: -3px;
-    }
-
-    &.HandleRight {
-      right: -3px;
-    }
-
-    &.HandleBottom {
-      bottom: -3px;
-    }
-
-    &.HandleLeft {
-      left: -3px;
+      font-family: var(--rf-node-font-family, inherit) !important;
+      font-weight: var(--rf-node-font-weight, inherit) !important;
     }
   }
 }

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

@@ -1,12 +1,10 @@
 import { memo } from 'react';
-import { Handle, Position } from 'reactflow';
+import { MapSolarSystemType } from '../../map.types';
+import { Handle, Position, NodeProps } from 'reactflow';
 import clsx from 'clsx';
-
-import classes from './SolarSystemNodeTheme.module.scss'; 
+import classes from './SolarSystemNodeTheme.module.scss';
 import { PrimeIcons } from 'primereact/api';
-
 import { useSolarSystemNode } from '../../hooks/useSolarSystemNode';
-
 import {
   MARKER_BOOKMARK_BG_STYLES,
   STATUS_CLASSES,
@@ -15,8 +13,7 @@ import {
 import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/WormholeClassComp';
 import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
 
-
-export const SolarSystemNodeTheme = memo((props) => {
+export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>) => {
   const nodeVars = useSolarSystemNode(props);
 
   return (
@@ -25,9 +22,7 @@ export const SolarSystemNodeTheme = memo((props) => {
         <div className={classes.Bookmarks}>
           {nodeVars.labelCustom !== '' && (
             <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
-              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] ">
-                {nodeVars.labelCustom}
-              </span>
+              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] ">{nodeVars.labelCustom}</span>
             </div>
           )}
 
@@ -38,12 +33,7 @@ export const SolarSystemNodeTheme = memo((props) => {
           )}
 
           {nodeVars.killsCount && (
-            <div
-              className={clsx(
-                classes.Bookmark,
-                MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!]
-              )}
-            >
+            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!])}>
               <div className={clsx(classes.BookmarkWithIcon)}>
                 <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
                 <span className={clsx(classes.text)}>{nodeVars.killsCount}</span>
@@ -52,10 +42,7 @@ export const SolarSystemNodeTheme = memo((props) => {
           )}
 
           {nodeVars.labelsInfo.map(x => (
-            <div
-              key={x.id}
-              className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}
-            >
+            <div key={x.id} className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}>
               {x.shortName}
             </div>
           ))}
@@ -67,7 +54,9 @@ export const SolarSystemNodeTheme = memo((props) => {
           classes.RootCustomNode,
           nodeVars.regionClass && classes[nodeVars.regionClass],
           classes[STATUS_CLASSES[nodeVars.status]],
-          { [classes.selected]: nodeVars.selected },
+          {
+            [classes.selected]: nodeVars.selected,
+          },
         )}
       >
         {nodeVars.visible && (
@@ -84,9 +73,7 @@ export const SolarSystemNodeTheme = memo((props) => {
               </div>
 
               {nodeVars.tag != null && nodeVars.tag !== '' && (
-                <div className={clsx(classes.TagTitle)}>
-                  {nodeVars.tag}
-                </div>
+                <div className={clsx(classes.TagTitle)}>{nodeVars.tag}</div>
               )}
 
               <div
@@ -139,17 +126,11 @@ export const SolarSystemNodeTheme = memo((props) => {
               <div className="flex items-center justify-end">
                 <div className="flex gap-1 items-center">
                   {nodeVars.locked && (
-                    <i
-                      className={PrimeIcons.LOCK}
-                      style={{ fontSize: '0.45rem', fontWeight: 'bold' }}
-                    />
+                    <i className={PrimeIcons.LOCK} style={{ fontSize: '0.45rem', fontWeight: 'bold' }} />
                   )}
 
                   {nodeVars.hubs.includes(nodeVars.solarSystemId.toString()) && (
-                    <i
-                      className={PrimeIcons.MAP_MARKER}
-                      style={{ fontSize: '0.45rem', fontWeight: 'bold' }}
-                    />
+                    <i className={PrimeIcons.MAP_MARKER} style={{ fontSize: '0.45rem', fontWeight: 'bold' }} />
                   )}
 
                   {nodeVars.charactersInSystem.length > 0 && (
@@ -234,3 +215,5 @@ export const SolarSystemNodeTheme = memo((props) => {
     </>
   );
 });
+
+SolarSystemNodeTheme.displayName = 'SolarSystemNodeTheme';

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

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

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

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

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

@@ -70,7 +70,7 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
               setTimeout(() => addConnections(data as CommandAddConnections), 100);
               break;
             case Commands.removeConnections:
-              removeConnections(data as CommandRemoveConnections);
+              setTimeout(() => removeConnections(data as CommandRemoveConnections), 100);
               break;
             case Commands.charactersUpdated:
               charactersUpdated(data as CommandCharactersUpdated);

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

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-
+import { MapSolarSystemType } from '../map.types';
+import { NodeProps } from 'reactflow';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
 import { useMapState } from '@/hooks/Mapper/components/map/MapProvider';
@@ -9,7 +10,7 @@ import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormhol
 import { getSystemClassStyles, prepareUnsplashedChunks } from '@/hooks/Mapper/components/map/helpers';
 import { sortWHClasses } from '@/hooks/Mapper/helpers';
 import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager';
-import { OutCommand } from '@/hooks/Mapper/types';
+import { CharacterTypeRaw, OutCommand } from '@/hooks/Mapper/types';
 import { LABELS_INFO, LABELS_ORDER } from '@/hooks/Mapper/components/map/constants';
 
 function getActivityType(count: number) {
@@ -30,9 +31,19 @@ function sortedLabels(labels: string[]) {
   return LABELS_ORDER.filter(x => labels.includes(x)).map(x => LABELS_INFO[x]);
 }
 
-export function useSolarSystemNode(props: any) {
-  const { data, selected, id } = props;
-  const { system_static_info, system_signatures, locked, name, tag, status, labels, temporary_name } = data;
+export function useSolarSystemNode(props: NodeProps<MapSolarSystemType>) {
+  const { id, data, selected } = props;
+  const {
+    system_static_info,
+    system_signatures,
+    locked,
+    name,
+    tag,
+    status,
+    labels,
+    temporary_name,
+    linked_sig_eve_id: linkedSigEveId = '',
+  } = data;
 
   const {
     system_class,
@@ -47,10 +58,15 @@ export function useSolarSystemNode(props: any) {
     solar_system_name,
   } = system_static_info;
 
-  // Global map state
-  const { interfaceSettings } = useMapRootState();
+  const {
+    interfaceSettings,
+    data: { systemSignatures: mapSystemSignatures },
+  } = useMapRootState();
+
   const { isShowUnsplashedSignatures } = interfaceSettings;
   const isTempSystemNameEnabled = useMapGetOption('show_temp_system_name') === 'true';
+  const isShowLinkedSigId = useMapGetOption('show_linked_signature_id') === 'true';
+  const isShowLinkedSigIdTempName = useMapGetOption('show_linked_signature_id_temp_name') === 'true';
 
   const {
     data: {
@@ -69,9 +85,13 @@ export function useSolarSystemNode(props: any) {
     outCommand,
   } = useMapState();
 
-  // logic
   const visible = useMemo(() => visibleNodes.has(id), [id, visibleNodes]);
 
+  const systemSignatures = useMemo(
+    () => mapSystemSignatures[solar_system_id] || system_signatures,
+    [system_signatures, solar_system_id, mapSystemSignatures],
+  );
+
   const charactersInSystem = useMemo(() => {
     return characters.filter(c => c.location?.solar_system_id === solar_system_id).filter(c => c.online);
     // eslint-disable-next-line
@@ -85,10 +105,17 @@ export function useSolarSystemNode(props: any) {
   );
 
   const sortedStatics = useMemo(() => sortWHClasses(wormholesData, statics), [wormholesData, statics]);
-  
+
+  const linkedSigPrefix = useMemo(() => (linkedSigEveId ? linkedSigEveId.split('-')[0] : null), [linkedSigEveId]);
+
   const labelsManager = useMemo(() => new LabelsManager(labels ?? ''), [labels]);
   const labelsInfo = useMemo(() => sortedLabels(labelsManager.list), [labelsManager]);
-  const labelCustom = useMemo(() => labelsManager.customLabel, [labelsManager]);
+  const labelCustom = useMemo(() => {
+    if (isShowLinkedSigId && linkedSigPrefix) {
+      return labelsManager.customLabel ? `${linkedSigPrefix}・${labelsManager.customLabel}` : linkedSigPrefix;
+    }
+    return labelsManager.customLabel;
+  }, [linkedSigPrefix, isShowLinkedSigId, labelsManager]);
 
   const killsCount = useMemo(() => kills[solar_system_id] ?? null, [kills, solar_system_id]);
   const killsActivityType = killsCount ? getActivityType(killsCount) : null;
@@ -109,16 +136,33 @@ export function useSolarSystemNode(props: any) {
   const space = showKSpaceBG ? REGIONS_MAP[region_id] : '';
   const regionClass = showKSpaceBG ? SpaceToClass[space] : null;
 
-  const systemName = (isTempSystemNameEnabled && temporary_name) || solar_system_name;
-  const customName =
-    (isTempSystemNameEnabled && temporary_name && name) || (solar_system_name !== name && name);
+  const temporaryName = useMemo(() => {
+    if (!isTempSystemNameEnabled) {
+      return '';
+    }
+
+    if (isShowLinkedSigIdTempName && linkedSigPrefix) {
+      return temporary_name ? `${linkedSigPrefix}・${temporary_name}` : `${linkedSigPrefix}・${solar_system_name}`;
+    }
+
+    return temporary_name;
+  }, [isShowLinkedSigIdTempName, isTempSystemNameEnabled, linkedSigPrefix, solar_system_name, temporary_name]);
+
+  const systemName = useMemo(() => {
+    if (isTempSystemNameEnabled && temporaryName) {
+      return temporaryName;
+    }
+    return solar_system_name;
+  }, [isTempSystemNameEnabled, solar_system_name, temporaryName]);
+
+  const customName = (isTempSystemNameEnabled && temporaryName && name) || (solar_system_name !== name && name) || null;
 
   const [unsplashedLeft, unsplashedRight] = useMemo(() => {
     if (!isShowUnsplashedSignatures) {
       return [[], []];
     }
     return prepareUnsplashedChunks(
-      system_signatures
+      systemSignatures
         .filter(s => s.group === 'Wormhole' && !s.linked_system)
         .map(s => ({
           eve_id: s.eve_id,
@@ -126,13 +170,12 @@ export function useSolarSystemNode(props: any) {
           custom_info: s.custom_info,
         })),
     );
-  }, [isShowUnsplashedSignatures, system_signatures]);
+  }, [isShowUnsplashedSignatures, systemSignatures]);
 
   const nodeVars = {
-    // original props
     id,
     selected,
-    // computed
+
     visible,
     isWormhole,
     classTitleColor,
@@ -169,3 +212,43 @@ export function useSolarSystemNode(props: any) {
 
   return nodeVars;
 }
+
+export interface SolarSystemNodeVars {
+  id: string;
+  selected: boolean;
+  visible: boolean;
+  isWormhole: boolean;
+  classTitleColor: string | null;
+  killsCount: number | null;
+  killsActivityType: string | null;
+  hasUserCharacters: boolean;
+  showHandlers: boolean;
+  regionClass: string | null;
+  systemName: string;
+  customName?: string | null;
+  labelCustom: string | null;
+  isShattered: boolean;
+  tag?: string | null;
+  status?: number;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  labelsInfo: Array<any>;
+  dbClick: (event?: void) => void;
+  sortedStatics: Array<string | number>;
+  effectName: string | null;
+  regionName: string | null;
+  solarSystemId: number;
+  solarSystemName: string | null;
+  locked: boolean;
+  hubs: string[] | number[];
+  name: string | null;
+  isConnecting: boolean;
+  hoverNodeId: string | null;
+  charactersInSystem: Array<CharacterTypeRaw>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  unsplashedLeft: Array<any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  unsplashedRight: Array<any>;
+  isThickConnections: boolean;
+  classTitle: string | null;
+  temporaryName?: string | null;
+}

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

@@ -2,11 +2,11 @@
 @import './eve-common';
 
 .default-theme {
-  --rf-bg-color: #000000;
+  --rf-bg-color: #0C0A09;
   --rf-soft-bg-color: #171717;
 
   --rf-node-bg-color: #202020;
-  --rf-node-soft-bg-color: #2b2b2b;
+  --rf-node-soft-bg-color: #202020;
   --rf-text-color: #ffffff;
   --rf-tag-color:  #38BDF8;
   --rf-region-name: #D6D3D1;
@@ -14,7 +14,7 @@
 
 
   --rf-bg-variant: "dots";
-  --rf-bg-gap: 16;
+  --rf-bg-gap: 15;
   --rf-bg-size: 1;
   --rf-bg-pattern-color: #81818a;
 
@@ -27,5 +27,5 @@
   --text-color: #ffffff;
   --tooltip-bg: #202020;
 
-  
+  --window-corner: #72716f;
 }

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

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

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

@@ -429,7 +429,63 @@
   color: var(--eve-solar-system-status-color-dangerous);
 }
 
-/* Shapes */
+.eve-system-status-clear {
+  background-color: var(--eve-solar-system-status-unknown);
+}
+.eve-system-status-home {
+  background-color: var(--eve-solar-system-status-home);
+}
+.eve-system-status-friendly {
+  background-color: var(--eve-solar-system-status-friendly);
+}
+.eve-system-status-lookingFor {
+  background-color: var(--eve-solar-system-status-lookingFor);
+}
+.eve-system-status-warning {
+  background-color: var(--eve-solar-system-status-warning);
+}
+.eve-system-status-target {
+  background-color: var(--eve-solar-system-status-target);
+}
+.eve-system-status-dangerous {
+  background-color: var(--eve-solar-system-status-dangerous);
+}
+
+.eve-system-status-clear {
+  background-color: var(--eve-solar-system-status-unknown);
+  color: var(--eve-solar-system-status-color-unknown);
+}
+
+.eve-system-status-home {
+  background-color: var(--eve-solar-system-status-home);
+  color: var(--eve-solar-system-status-color-home);
+}
+
+.eve-system-status-friendly {
+  background-color: var(--eve-solar-system-status-friendly);
+  color: var(--eve-solar-system-status-color-friendly);
+}
+
+.eve-system-status-lookingFor {
+  background-color: var(--eve-solar-system-status-lookingFor);
+  color: var(--eve-solar-system-status-color-lookingFor);
+}
+
+.eve-system-status-warning {
+  background-color: var(--eve-solar-system-status-warning);
+  color: var(--eve-solar-system-status-color-warning);
+}
+
+.eve-system-status-target {
+  background-color: var(--eve-solar-system-status-target);
+  color: var(--eve-solar-system-status-color-target);
+}
+
+.eve-system-status-dangerous {
+  background-color: var(--eve-solar-system-status-dangerous);
+  color: var(--eve-solar-system-status-color-dangerous);
+}
+
 .wd-route-system-shape-triangle {
   clip-path: polygon(50% 0, 0 100%, 100% 100%);
 }

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

@@ -1,4 +1,3 @@
-
 @import './eve-common-variables';
 @import './eve-common';
 @import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap');
@@ -40,7 +39,6 @@
   --eve-wh-type-color-c13: #7986cb;
   --eve-wh-type-color-drifter: #44aa82;
 
-
   --rf-node-font-weight: bold;
   --rf-node-line-height: normal;
   --rf-node-font-family: 'Oxygen', sans-serif;
@@ -48,4 +46,6 @@
 
   --rf-tag-color: #fbbf24;
   --rf-has-user-characters: #5cb85c;
-}
+
+  --window-corner: #72716f;
+}

assets/js/hooks/Mapper/components/map/utils/wrapNode.tsx

@@ -1,11 +0,0 @@
-// wrapNode.ts
-import { NodeProps } from 'reactflow';
-import { SolarSystemNodeProps } from '../components/SolarSystemNode';
-
-export function wrapNode<T>(
-  SolarSystemNode: React.FC<SolarSystemNodeProps<T>>
-): React.FC<NodeProps<T>> {
-  return function NodeAdapter(props) {
-    return <SolarSystemNode {...props} />;
-  };
-}

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

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

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

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { Dialog } from 'primereact/dialog';
 
 import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
@@ -58,7 +58,7 @@ export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignat
     <Dialog
       header="Select signature to link"
       visible
-      draggable={false}
+      draggable={true}
       style={{ width: '500px' }}
       onHide={handleHide}
       contentClassName="!p-0"

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,92 @@
+import { WindowProps } from '@/hooks/Mapper/components/ui-kit/WindowManager/types.ts';
+import {
+  LocalCharacters,
+  RoutesWidget,
+  SystemInfo,
+  SystemSignatures,
+  SystemStructures,
+} from '@/hooks/Mapper/components/mapInterface/widgets';
+
+export const CURRENT_WINDOWS_VERSION = 8;
+export const WINDOWS_LOCAL_STORE_KEY = 'windows:settings:v2';
+
+export enum WidgetsIds {
+  info = 'info',
+  signatures = 'signatures',
+  local = 'local',
+  routes = 'routes',
+  structures = 'structures',
+}
+
+export const STORED_VISIBLE_WIDGETS_DEFAULT = [
+  WidgetsIds.info,
+  WidgetsIds.local,
+  WidgetsIds.routes,
+  WidgetsIds.signatures,
+];
+
+export const DEFAULT_WIDGETS: WindowProps[] = [
+  {
+    id: WidgetsIds.info,
+    position: { x: 10, y: 10 },
+    size: { width: 250, height: 200 },
+    zIndex: 0,
+    content: () => <SystemInfo />,
+  },
+  {
+    id: WidgetsIds.signatures,
+    position: { x: 10, y: 220 },
+    size: { width: 250, height: 300 },
+    zIndex: 0,
+    content: () => <SystemSignatures />,
+  },
+  {
+    id: WidgetsIds.local,
+    position: { x: 270, y: 10 },
+    size: { width: 250, height: 510 },
+    zIndex: 0,
+    content: () => <LocalCharacters />,
+  },
+  {
+    id: WidgetsIds.routes,
+    position: { x: 10, y: 530 },
+    size: { width: 510, height: 200 },
+    zIndex: 0,
+    content: () => <RoutesWidget />,
+  },
+  {
+    id: WidgetsIds.structures,
+    position: { x: 10, y: 730 },
+    size: { width: 510, height: 200 },
+    zIndex: 0,
+    content: () => <SystemStructures />,
+  },
+];
+
+type WidgetsCheckboxesType = {
+  id: WidgetsIds;
+  label: string;
+}[];
+
+export const WIDGETS_CHECKBOXES_PROPS: WidgetsCheckboxesType = [
+  {
+    id: WidgetsIds.info,
+    label: 'System Info',
+  },
+  {
+    id: WidgetsIds.signatures,
+    label: 'Signatures',
+  },
+  {
+    id: WidgetsIds.local,
+    label: 'Local',
+  },
+  {
+    id: WidgetsIds.routes,
+    label: 'Routes',
+  },
+  {
+    id: WidgetsIds.structures,
+    label: 'Structures',
+  },
+];

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

@@ -0,0 +1,113 @@
+import React, { useCallback, ClipboardEvent, useRef } from 'react';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth';
+import {
+  LayoutEventBlocker,
+  WdImgButton,
+  TooltipPosition,
+  InfoDrawer,
+  SystemView,
+} from '@/hooks/Mapper/components/ui-kit';
+import { PrimeIcons } from 'primereact/api';
+import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
+
+import { SystemStructuresContent } from './SystemStructuresContent/SystemStructuresContent';
+import { useSystemStructures } from './hooks/useSystemStructures';
+import { processSnippetText } from './helpers';
+
+export const SystemStructures: React.FC = () => {
+  const {
+    data: { selectedSystems },
+    outCommand,
+  } = useMapRootState();
+  const [systemId] = selectedSystems;
+  const isNotSelectedSystem = selectedSystems.length !== 1;
+
+  const { structures, handleUpdateStructures } = useSystemStructures({ systemId, outCommand });
+
+  const labelRef = useRef<HTMLDivElement>(null);
+  const isCompact = useMaxWidth(labelRef, 260);
+
+  const processClipboard = useCallback(
+    (text: string) => {
+      const updated = processSnippetText(text, structures);
+      handleUpdateStructures(updated);
+    },
+    [structures, handleUpdateStructures],
+  );
+
+  const handlePaste = useCallback(
+    (e: ClipboardEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      processClipboard(e.clipboardData.getData('text'));
+    },
+    [processClipboard],
+  );
+
+  const handlePasteTimer = useCallback(async () => {
+    try {
+      const text = await navigator.clipboard.readText();
+      processClipboard(text);
+    } catch (err) {
+      console.error('Clipboard read error:', err);
+    }
+  }, [processClipboard]);
+
+  function renderWidgetLabel() {
+    return (
+      <div className="flex justify-between items-center text-xs w-full h-full" ref={labelRef}>
+        <div className="flex justify-between items-center gap-1">
+          {!isCompact && (
+            <div className="flex whitespace-nowrap text-ellipsis overflow-hidden text-stone-400">
+              Structures
+              {!isNotSelectedSystem && ' in'}
+            </div>
+          )}
+          {!isNotSelectedSystem && <SystemView systemId={systemId} className="select-none text-center" hideRegion />}
+        </div>
+
+        <LayoutEventBlocker className="flex gap-2.5">
+          <WdImgButton
+            className={`${PrimeIcons.CLOCK} text-sky-400 hover:text-sky-200 transition duration-300`}
+            onClick={handlePasteTimer}
+          />
+          <WdImgButton
+            className={PrimeIcons.QUESTION_CIRCLE}
+            tooltip={{
+              position: TooltipPosition.left,
+              // @ts-ignore
+              content: (
+                <div className="flex flex-col gap-1">
+                  <InfoDrawer title={<b className="text-slate-50">How to add/update structures?</b>}>
+                    In game, select one or more structures in D-Scan and then
+                    <br />
+                    use the blue add structure data button
+                  </InfoDrawer>
+                  <InfoDrawer title={<b className="text-slate-50">How to add a timer?</b>}>
+                    In game, select a structure with an active timer, right click to copy, and then
+                    <span className="text-blue-500"> blue </span>
+                    use the blue add structure data button
+                  </InfoDrawer>
+                </div>
+              ),
+            }}
+          />
+        </LayoutEventBlocker>
+      </div>
+    );
+  }
+
+  return (
+    <div tabIndex={0} onPaste={handlePaste} className="h-full flex flex-col" style={{ outline: 'none' }}>
+      <Widget label={renderWidgetLabel()}>
+        {isNotSelectedSystem ? (
+          <div className="w-full h-full flex justify-center items-center select-none text-center text-stone-400/80 text-sm">
+            System is not selected
+          </div>
+        ) : (
+          <SystemStructuresContent structures={structures} onUpdateStructures={handleUpdateStructures} />
+        )}
+      </Widget>
+    </div>
+  );
+};

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/SystemStructuresContent/SystemStructuresContent.module.scss

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

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

@@ -0,0 +1,118 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import { DataTable, DataTableRowClickEvent } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { PrimeIcons } from 'primereact/api';
+import clsx from 'clsx';
+
+import { SystemStructuresDialog } from '../SystemStructuresDialog/SystemStructuresDialog';
+import { StructureItem } from '../helpers/structureTypes';
+import { useHotkey } from '@/hooks/Mapper/hooks';
+import classes from './SystemStructuresContent.module.scss';
+import { renderOwnerCell, renderTypeCell, renderTimerCell } from '../renders/cellRenders';
+
+interface SystemStructuresContentProps {
+  structures: StructureItem[];
+  onUpdateStructures: (newList: StructureItem[]) => void;
+}
+
+export const SystemStructuresContent: React.FC<SystemStructuresContentProps> = ({ structures, onUpdateStructures }) => {
+  const [selectedRow, setSelectedRow] = useState<StructureItem | null>(null);
+  const [editingItem, setEditingItem] = useState<StructureItem | null>(null);
+  const [showEditDialog, setShowEditDialog] = useState(false);
+
+  const handleRowClick = (e: DataTableRowClickEvent) => {
+    const row = e.data as StructureItem;
+    setSelectedRow(prev => (prev?.id === row.id ? null : row));
+  };
+
+  const handleRowDoubleClick = (e: DataTableRowClickEvent) => {
+    setEditingItem(e.data as StructureItem);
+    setShowEditDialog(true);
+  };
+
+  // Press Delete => remove selected row
+  const handleDeleteSelected = useCallback(
+    (e: KeyboardEvent) => {
+      if (!selectedRow) return;
+      e.preventDefault();
+      e.stopPropagation();
+
+      const newList = structures.filter(s => s.id !== selectedRow.id);
+      onUpdateStructures(newList);
+      setSelectedRow(null);
+    },
+    [selectedRow, structures, onUpdateStructures],
+  );
+
+  useHotkey(false, ['Delete', 'Backspace'], handleDeleteSelected);
+
+  const visibleStructures = useMemo(() => {
+    return structures;
+  }, [structures]);
+
+  return (
+    <div className="flex flex-col gap-2 p-2 text-xs text-stone-200 h-full">
+      {visibleStructures.length === 0 ? (
+        <div className="flex-1 flex justify-center items-center text-stone-400/80 text-sm">No structures</div>
+      ) : (
+        <div className="flex-1">
+          <DataTable
+            value={visibleStructures}
+            dataKey="id"
+            className={clsx(classes.Table, 'w-full select-none h-full')}
+            size="small"
+            sortMode="single"
+            rowHover
+            onRowClick={handleRowClick}
+            onRowDoubleClick={handleRowDoubleClick}
+            rowClassName={rowData => {
+              const isSelected = selectedRow?.id === rowData.id;
+              return clsx(
+                classes.TableRowCompact,
+                'transition-colors duration-200 cursor-pointer',
+                isSelected ? 'bg-amber-500/50 hover:bg-amber-500/70' : 'hover:bg-purple-400/20',
+              );
+            }}
+          >
+            <Column header="Type" body={renderTypeCell} style={{ width: '160px' }} />
+            <Column field="name" header="Name" style={{ width: '120px' }} />
+            <Column header="Owner" body={renderOwnerCell} style={{ width: '120px' }} />
+            <Column field="status" header="Status" style={{ width: '100px' }} />
+            <Column header="Timer" body={renderTimerCell} style={{ width: '110px' }} />
+            <Column
+              body={(rowData: StructureItem) => (
+                <i
+                  className={clsx(PrimeIcons.PENCIL, 'text-[14px] cursor-pointer')}
+                  title="Edit"
+                  onClick={() => {
+                    setEditingItem(rowData);
+                    setShowEditDialog(true);
+                  }}
+                />
+              )}
+              style={{ width: '40px', textAlign: 'center' }}
+            />
+          </DataTable>
+        </div>
+      )}
+
+      {showEditDialog && editingItem && (
+        <SystemStructuresDialog
+          visible={showEditDialog}
+          structure={editingItem}
+          onClose={() => setShowEditDialog(false)}
+          onSave={(updatedItem: StructureItem) => {
+            const newList = structures.map(s => (s.id === updatedItem.id ? updatedItem : s));
+            onUpdateStructures(newList);
+            setShowEditDialog(false);
+          }}
+          onDelete={(deleteId: string) => {
+            const newList = structures.filter(s => s.id !== deleteId);
+            onUpdateStructures(newList);
+            setShowEditDialog(false);
+          }}
+        />
+      )}
+    </div>
+  );
+};

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/SystemStructuresDialog/SystemStructureDialog.module.scss

@@ -0,0 +1,31 @@
+
+   .systemStructureDialog {
+  
+    .p-dialog-content {
+      background-color: var(--surface-800) !important;
+    }
+  
+    .p-dialog-header {
+      background-color: var(--surface-700);
+      color: var(--text-color);
+    }
+  
+    .p-dialog-header-icon,
+    .p-dialog-header-title {
+      color: var(--gray-200);
+    }
+  
+    .p-inputtext {
+      background-color: #2a2a2a !important;
+      color: #ddd !important;
+      font-size: 12px !important;
+      padding: 0.25rem 0.5rem !important;
+    }
+  
+    .p-dialog-footer {
+      .p-button {
+        font-size: 12px !important;
+        padding: 0.3rem 0.75rem !important;
+      }
+    }
+  }

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

@@ -0,0 +1,235 @@
+import React, { useEffect, useState, useCallback } 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 { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { OutCommand } from '@/hooks/Mapper/types';
+
+interface StructuresEditDialogProps {
+  visible: boolean;
+  structure?: StructureItem;
+  onClose: () => void;
+  onSave: (updatedItem: StructureItem) => void;
+  onDelete: (id: string) => void;
+}
+
+export const SystemStructuresDialog: React.FC<StructuresEditDialogProps> = ({
+  visible,
+  structure,
+  onClose,
+  onSave,
+  onDelete,
+}) => {
+  const [editData, setEditData] = useState<StructureItem | null>(null);
+  const [ownerInput, setOwnerInput] = useState('');
+  const [ownerSuggestions, setOwnerSuggestions] = useState<{ label: string; value: string }[]>([]);
+
+  const { outCommand } = useMapRootState();
+
+  const [prevQuery, setPrevQuery] = useState('');
+  const [prevResults, setPrevResults] = useState<{ label: string; value: string }[]>([]);
+
+  useEffect(() => {
+    if (structure) {
+      setEditData(structure);
+      setOwnerInput(structure.ownerName ?? '');
+    } else {
+      setEditData(null);
+      setOwnerInput('');
+    }
+  }, [structure]);
+
+  // Searching corporation owners via auto-complete
+  const searchOwners = useCallback(
+    async (e: { query: string }) => {
+      const newQuery = e.query.trim();
+      if (!newQuery) {
+        setOwnerSuggestions([]);
+        return;
+      }
+
+      // 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()),
+        );
+        setOwnerSuggestions(filtered);
+        return;
+      }
+
+      try {
+        const { results = [] } = await outCommand({
+          type: OutCommand.getCorporationNames,
+          data: { search: newQuery },
+        });
+        setOwnerSuggestions(results);
+        setPrevQuery(newQuery);
+        setPrevResults(results);
+      } catch (err) {
+        console.error('Failed to fetch owners:', err);
+        setOwnerSuggestions([]);
+      }
+    },
+    [prevQuery, prevResults, outCommand],
+  );
+
+  const handleChange = (field: keyof StructureItem, val: string | Date) => {
+    // If we want to forbid changing structureTypeId or structureType from the dialog, do so here:
+    if (field === 'structureTypeId' || field === 'structureType') return;
+
+    setEditData(prev => {
+      if (!prev) return null;
+
+      // If this is the endTime (Date from Calendar), we store as ISO or string:
+      if (field === 'endTime' && val instanceof Date) {
+        return { ...prev, endTime: val.toISOString() };
+      }
+
+      return { ...prev, [field]: val };
+    });
+  };
+
+  // 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,
+    );
+  };
+
+  const handleStatusChange = (val: string) => {
+    setEditData(prev => {
+      if (!prev) return null;
+      const newStatus = val as StructureStatus;
+      // If new status doesn't require a timer, we clear out endTime
+      const newEndTime = statusesRequiringTimer.includes(newStatus) ? prev.endTime : '';
+      return { ...prev, status: newStatus, endTime: newEndTime };
+    });
+  };
+
+  const handleSaveClick = async () => {
+    if (!editData) return;
+
+    // If status doesn't require a timer, clear endTime
+    if (!statusesRequiringTimer.includes(editData.status)) {
+      editData.endTime = '';
+    } else if (editData.endTime) {
+      // convert to full ISO if not already
+      editData.endTime = formatToISO(editData.endTime);
+    }
+
+    // fetch corporation ticker if we have an ownerId
+    if (editData.ownerId) {
+      try {
+        const { ticker } = await outCommand({
+          type: OutCommand.getCorporationTicker,
+          data: { corp_id: editData.ownerId },
+        });
+        editData.ownerTicker = ticker ?? '';
+      } catch (err) {
+        console.error('Failed to fetch ticker:', err);
+        editData.ownerTicker = '';
+      }
+    }
+
+    onSave(editData);
+  };
+
+  const handleDeleteClick = () => {
+    if (!editData) return;
+    onDelete(editData.id);
+    onClose();
+  };
+
+  if (!editData) return null;
+
+  return (
+    <Dialog
+      visible={visible}
+      onHide={onClose}
+      header={`Edit Structure - ${editData.name ?? ''}`}
+      className={clsx('myStructuresDialog', 'text-stone-200 w-full max-w-md')}
+    >
+      <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 ?? ''}
+          />
+        </label>
+        <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center">
+          <span>Name:</span>
+          <input
+            className="p-inputtext p-component"
+            value={editData.name ?? ''}
+            onChange={e => handleChange('name', e.target.value)}
+          />
+        </label>
+        <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center">
+          <span>Owner:</span>
+          <AutoComplete
+            id="owner"
+            value={ownerInput}
+            suggestions={ownerSuggestions}
+            completeMethod={searchOwners}
+            minLength={3}
+            delay={400}
+            field="label"
+            placeholder="Corporation name..."
+            onChange={e => setOwnerInput(e.value)}
+            onSelect={e => handleSelectOwner(e.value)}
+          />
+        </label>
+        <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center">
+          <span>Status:</span>
+          <select
+            className="p-inputtext p-component"
+            value={editData.status}
+            onChange={e => handleStatusChange(e.target.value)}
+          >
+            <option value="Powered">Powered</option>
+            <option value="Anchoring">Anchoring</option>
+            <option value="Unanchoring">Unanchoring</option>
+            <option value="Low Power">Low Power</option>
+            <option value="Abandoned">Abandoned</option>
+            <option value="Reinforced">Reinforced</option>
+          </select>
+        </label>
+
+        {statusesRequiringTimer.includes(editData.status) && (
+          <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center">
+            <span>Timer <br /> (Eve Time):</span>
+            <Calendar
+              value={editData.endTime ? new Date(editData.endTime) : undefined}
+              onChange={(e) => handleChange('endTime', e.value ?? '')}
+              showTime
+              hourFormat="24"
+              dateFormat="yy-mm-dd"
+              showIcon
+            />
+          </label>
+        )}
+
+        <label className="grid grid-cols-[100px_1fr] gap-2 items-start mt-2">
+          <span className="mt-1">Notes:</span>
+          <textarea
+            className="p-inputtext p-component resize-none h-24"
+            value={editData.notes ?? ''}
+            onChange={e => handleChange('notes', e.target.value)}
+          />
+        </label>
+      </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} />
+      </div>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,4 @@
+export * from './parserHelper';
+export * from './pasteParser';
+export * from './structureTypes';
+export * from './structureUtils';

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/helpers/parserHelper.ts

@@ -0,0 +1,92 @@
+import { StructureStatus, StructureItem, STRUCTURE_TYPE_MAP } from './structureTypes';
+import { formatToISO } from './structureUtils';
+
+// Up to you if you'd like to keep a separate constant here or not
+export const statusesRequiringTimer: StructureStatus[] = ['Anchoring', 'Reinforced'];
+
+/**
+ * parseFormatOneLine(line):
+ *  - Splits by tabs
+ *  - First col => structureTypeId
+ *  - Second col => rawName
+ *  - Third col => structureTypeName
+ */
+export function parseFormatOneLine(line: string): StructureItem | null {
+  const columns = line
+    .split('\t')
+    .map(c => c.trim())
+    .filter(Boolean);
+
+  // Expecting e.g. "35832   J214811 - SomeName    Astrahus"
+  if (columns.length < 3) {
+    return null;
+  }
+
+  const [rawTypeId, rawName, rawTypeName] = columns;
+
+  if (columns.length != 4) {
+    return null;
+  }
+
+  if (!STRUCTURE_TYPE_MAP[rawTypeId]) {
+    return null;
+  }
+
+  if (rawTypeName != STRUCTURE_TYPE_MAP[rawTypeId]) {
+    return null;
+  }
+
+  const name = rawName.replace(/^J\d{6}\s*-\s*/, '').trim();
+
+  return {
+    id: crypto.randomUUID(),
+    structureTypeId: rawTypeId,
+    structureType: rawTypeName,
+    name,
+    ownerName: '',
+    notes: '',
+    status: 'Powered', // Default
+    endTime: '', // No timer by default
+  };
+}
+
+export function matchesThreeLineSnippet(lines: string[]): boolean {
+  if (lines.length < 3) return false;
+  return /until\s+\d{4}\.\d{2}\.\d{2}/i.test(lines[2]);
+}
+
+/**
+ * parseThreeLineSnippet:
+ *  - Example lines:
+ *    line1: "J214811 - Folgers"
+ *    line2: "1,475 km"
+ *    line3: "Reinforced until 2025.01.13 23:51"
+ */
+export function parseThreeLineSnippet(lines: string[]): StructureItem {
+  const [line1, , line3] = lines;
+
+  let status: StructureStatus = 'Reinforced';
+  let endTime: string | undefined;
+
+  // e.g. "Reinforced until 2025.01.13 23:27"
+  const match = line3.match(/^(?<stat>\w+)\s+until\s+(?<dateTime>[\d.]+\s+[\d:]+)/i);
+
+  if (match?.groups?.stat) {
+    const candidateStatus = match.groups.stat as StructureStatus;
+    if (statusesRequiringTimer.includes(candidateStatus)) {
+      status = candidateStatus;
+    }
+  }
+  if (match?.groups?.dateTime) {
+    let dt = match.groups.dateTime.trim().replace(/\./g, '-'); // "2025-01-13 23:27"
+    dt = dt.replace(' ', 'T'); // "2025-01-13T23:27"
+    endTime = formatToISO(dt); // => "2025-01-13T23:27:00Z"
+  }
+
+  return {
+    id: crypto.randomUUID(),
+    name: line1.replace(/^J\d{6}\s*-\s*/, '').trim(),
+    status,
+    endTime,
+  };
+}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/helpers/pasteParser.ts

@@ -0,0 +1,56 @@
+import { StructureItem } from './structureTypes';
+import { parseThreeLineSnippet, parseFormatOneLine, matchesThreeLineSnippet } from './parserHelper';
+
+export function processSnippetText(rawText: string, existingStructures: StructureItem[]): StructureItem[] {
+  if (!rawText) {
+    return existingStructures.slice();
+  }
+
+  const lines = rawText
+    .split(/\r?\n/)
+    .map(line => line.trim())
+    .filter(Boolean);
+
+  if (lines.length === 3 && matchesThreeLineSnippet(lines)) {
+    return applyThreeLineSnippet(lines, existingStructures);
+  } else {
+    return applySingleLineParse(lines, existingStructures);
+  }
+}
+
+function applyThreeLineSnippet(snippetLines: string[], existingStructures: StructureItem[]): StructureItem[] {
+  const updatedList = [...existingStructures];
+  const snippetItem = parseThreeLineSnippet(snippetLines);
+
+  const existingIndex = updatedList.findIndex(s => s.name.trim() === snippetItem.name.trim());
+
+  if (existingIndex !== -1) {
+    const existing = updatedList[existingIndex];
+    updatedList[existingIndex] = {
+      ...existing,
+      status: snippetItem.status,
+      endTime: snippetItem.endTime,
+    };
+  }
+
+  return updatedList;
+}
+
+function applySingleLineParse(lines: string[], existingStructures: StructureItem[]): StructureItem[] {
+  const updatedList = [...existingStructures];
+  const newItems: StructureItem[] = [];
+
+  for (const line of lines) {
+    const item = parseFormatOneLine(line);
+    if (!item) continue;
+
+    const isDuplicate = updatedList.some(
+      s => s.structureTypeId === item.structureTypeId && s.name.trim() === item.name.trim(),
+    );
+    if (!isDuplicate) {
+      newItems.push(item);
+    }
+  }
+
+  return [...updatedList, ...newItems];
+}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/helpers/structureTypes.ts

@@ -0,0 +1,32 @@
+export type StructureStatus = 'Powered' | 'Anchoring' | 'Unanchoring' | 'Low Power' | 'Abandoned' | 'Reinforced';
+
+export interface StructureItem {
+  id: string;
+  systemId?: string;
+  structureTypeId?: string;
+  structureType?: string;
+  name: string;
+  ownerName?: string;
+  ownerId?: string;
+  ownerTicker?: string;
+  notes?: string;
+  status: StructureStatus;
+  endTime?: string;
+}
+
+export const STRUCTURE_TYPE_MAP: Record<string, string> = {
+  '35825': 'Raitaru',
+  '35826': 'Azbel',
+  '35827': 'Sotiyo',
+  '35832': 'Astrahus',
+  '35833': 'Fortizar',
+  '35834': 'Keepstar',
+  '35835': 'Athanor',
+  '35836': 'Tatara',
+  '40340': 'Upwell Palatine Keepstar',
+  '47512': "'Moreau' Fortizar",
+  '47513': "'Draccous' Fortizar",
+  '47514': "'Horizon' Fortizar",
+  '47515': "'Marginis' Fortizar",
+  '47516': "'Prometheus' Fortizar",
+};

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/helpers/structureUtils.ts

@@ -0,0 +1,59 @@
+import { StructureItem } from './structureTypes';
+
+export function getActualStructures(oldList: StructureItem[], newList: StructureItem[]) {
+  const oldMap = new Map(oldList.map(s => [s.id, s]));
+  const newMap = new Map(newList.map(s => [s.id, s]));
+
+  const added: StructureItem[] = [];
+  const updated: StructureItem[] = [];
+  const removed: StructureItem[] = [];
+
+  for (const newItem of newList) {
+    const oldItem = oldMap.get(newItem.id);
+    if (!oldItem) {
+      added.push(newItem);
+    } else if (JSON.stringify(oldItem) !== JSON.stringify(newItem)) {
+      updated.push(newItem);
+    }
+  }
+
+  for (const oldItem of oldList) {
+    if (!newMap.has(oldItem.id)) {
+      removed.push(oldItem);
+    }
+  }
+
+  return { added, updated, removed };
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function mapServerStructure(serverData: any): StructureItem {
+  const { owner_id, owner_ticker, structure_type_id, structure_type, owner_name, end_time, system_id, ...rest } =
+    serverData;
+
+  return {
+    ...rest,
+    ownerId: owner_id,
+    ownerTicker: owner_ticker,
+    ownerName: owner_name,
+    structureType: structure_type,
+    structureTypeId: structure_type_id,
+    endTime: end_time ?? '',
+    systemId: system_id,
+  };
+}
+
+export function formatToISO(datetimeLocal: string): string {
+  if (!datetimeLocal) return '';
+
+  // If missing seconds, add :00
+  let iso = datetimeLocal;
+  if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(iso)) {
+    iso += ':00';
+  }
+  // Ensure trailing 'Z'
+  if (!iso.endsWith('Z')) {
+    iso += 'Z';
+  }
+  return iso;
+}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/hooks/useSystemStructures.ts

@@ -0,0 +1,85 @@
+import { useEffect, useState, useCallback } from 'react';
+import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
+import { mapServerStructure, getActualStructures, StructureItem, statusesRequiringTimer } from '../helpers';
+
+interface UseSystemStructuresProps {
+  systemId: string | undefined;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  outCommand: (payload: any) => Promise<any>;
+}
+
+export function useSystemStructures({ systemId, outCommand }: UseSystemStructuresProps) {
+  const [structures, setStructures] = useState<StructureItem[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchStructures = useCallback(async () => {
+    if (!systemId) {
+      setStructures([]);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const { structures: fetched = [] } = await outCommand({
+        type: OutCommand.getStructures,
+        data: { system_id: systemId },
+      });
+
+      const mappedStructures = fetched.map(mapServerStructure);
+      setStructures(mappedStructures);
+    } catch (err) {
+      console.error('Failed to get structures:', err);
+      setError('Error fetching structures');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [systemId, outCommand]);
+
+  useEffect(() => {
+    fetchStructures();
+  }, [fetchStructures]);
+
+  const sanitizeEndTimers = useCallback((item: StructureItem) => {
+    if (!statusesRequiringTimer.includes(item.status)) {
+      item.endTime = '';
+    }
+    return item;
+  }, []);
+
+  const sanitizeIds = useCallback((item: StructureItem) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { id, ...rest } = item;
+    return rest;
+  }, []);
+
+  const handleUpdateStructures = useCallback(
+    async (newList: StructureItem[]) => {
+      const { added, updated, removed } = getActualStructures(structures, newList);
+
+      const sanitizedAdded = added.map(sanitizeIds);
+      const sanitizedUpdated = updated.map(sanitizeEndTimers);
+
+      try {
+        const { structures: updatedStructures = [] } = await outCommand({
+          type: OutCommand.updateStructures,
+          data: {
+            system_id: systemId,
+            added: sanitizedAdded,
+            updated: sanitizedUpdated,
+            removed,
+          },
+        });
+
+        const finalStructures = updatedStructures.map(mapServerStructure);
+        setStructures(finalStructures);
+      } catch (err) {
+        console.error('Failed to update structures:', err);
+      }
+    },
+    [structures, systemId, outCommand, sanitizeIds, sanitizeEndTimers],
+  );
+
+  return { structures, handleUpdateStructures, isLoading, error };
+}

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

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

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/renders/TimerCell.tsx

@@ -0,0 +1,50 @@
+// File: TimerCell.tsx
+import React, { useEffect, useState } from 'react';
+import { StructureStatus } from '../helpers/structureTypes';
+import { statusesRequiringTimer } from '../helpers';
+
+interface TimerCellProps {
+  endTime?: string;
+  status: StructureStatus;
+}
+
+function TimerCellImpl({ endTime, status }: TimerCellProps) {
+  const [now, setNow] = useState(() => Date.now());
+
+  useEffect(() => {
+    if (!endTime || !statusesRequiringTimer.includes(status)) {
+      return;
+    }
+
+    const intervalId = setInterval(() => {
+      setNow(Date.now());
+    }, 1000);
+
+    return () => clearInterval(intervalId);
+  }, [endTime, status]);
+
+  if (!statusesRequiringTimer.includes(status)) {
+    return <span className="text-stone-400"></span>;
+  }
+  if (!endTime) {
+    return <span className="text-sky-400">Set Timer</span>;
+  }
+
+  const msLeft = new Date(endTime).getTime() - now;
+  if (msLeft <= 0) {
+    return <span className="text-red-500">00:00:00</span>;
+  }
+
+  const sec = Math.floor(msLeft / 1000) % 60;
+  const min = Math.floor(msLeft / (1000 * 60)) % 60;
+  const hr = Math.floor(msLeft / (1000 * 3600));
+
+  const pad = (n: number) => n.toString().padStart(2, '0');
+  return (
+    <span className="text-sky-400">
+      {pad(hr)}:{pad(min)}:{pad(sec)}
+    </span>
+  );
+}
+
+export const TimerCell = React.memo(TimerCellImpl);

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/renders/cellRenders.tsx

@@ -0,0 +1,36 @@
+import { StructureItem } from '../helpers';
+import { TimerCell } from './TimerCell';
+
+export function renderTimerCell(row: StructureItem) {
+  return <TimerCell endTime={row.endTime} status={row.status} />;
+}
+
+export function renderOwnerCell(row: StructureItem) {
+  return (
+    <div className="flex items-center gap-2">
+      {row.ownerId && (
+        <img
+          src={`https://images.evetech.net/corporations/${row.ownerId}/logo?size=32`}
+          alt="corp icon"
+          className="w-5 h-5 object-contain"
+        />
+      )}
+      <span>{row.ownerTicker || row.ownerName}</span>
+    </div>
+  );
+}
+
+export function renderTypeCell(row: StructureItem) {
+  return (
+    <div className="flex items-center gap-1">
+      {row.structureTypeId && (
+        <img
+          src={`https://images.evetech.net/types/${row.structureTypeId}/icon`}
+          alt="icon"
+          className="w-5 h-5 object-contain"
+        />
+      )}
+      <span>{row.structureType ?? ''}</span>
+    </div>
+  );
+}

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

@@ -2,3 +2,4 @@ export * from './LocalCharacters';
 export * from './SystemInfo';
 export * from './RoutesWidget';
 export * from './SystemSignatures';
+export * from './SystemStructures';

assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/MapSettings.module.scss

@@ -13,6 +13,7 @@
     .p-tabview-panels {
       padding: 6px 1rem !important;
       flex-grow: 1;
+      height: 100%;
     }
 
     .p-tabview-nav-container {

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

@@ -3,13 +3,10 @@ import { Dialog } from 'primereact/dialog';
 import { useCallback, useMemo, useState } from 'react';
 import { TabPanel, TabView } from 'primereact/tabview';
 import { PrettySwitchbox } from './components';
-import {
-  InterfaceStoredSettingsProps,
-  useMapRootState,
-  InterfaceStoredSettings,
-} from '@/hooks/Mapper/mapRootProvider';
+import { InterfaceStoredSettingsProps, useMapRootState, InterfaceStoredSettings } from '@/hooks/Mapper/mapRootProvider';
 import { OutCommand } from '@/hooks/Mapper/types';
 import { Dropdown } from 'primereact/dropdown';
+import { WidgetsSettings } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/components/WidgetsSettings/WidgetsSettings.tsx';
 
 export enum UserSettingsRemoteProps {
   link_signature_on_splash = 'link_signature_on_splash',
@@ -140,7 +137,6 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
     };
   }, [userRemoteSettings, interfaceSettings]);
 
-
   const handleShow = async () => {
     const { user_settings } = await outCommand({
       type: OutCommand.getUserSettings,
@@ -182,7 +178,7 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
           key={item.prop}
           label={item.label}
           checked={!!currentValue}
-          setChecked={(checked) => handleSettingChange(item.prop, checked)}
+          setChecked={checked => handleSettingChange(item.prop, checked)}
         />
       );
     }
@@ -195,7 +191,7 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
             className="text-sm"
             value={currentValue}
             options={item.options}
-            onChange={(e) => handleSettingChange(item.prop, e.value)}
+            onChange={e => handleSettingChange(item.prop, e.value)}
             placeholder="Select a theme"
           />
         </div>
@@ -225,21 +221,13 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
       <div className="flex flex-col gap-3">
         <div className="flex flex-col gap-2">
           <div className={styles.verticalTabsContainer}>
-            <TabView
-              activeIndex={activeIndex}
-              onTabChange={(e) => setActiveIndex(e.index)}
-              className={styles.verticalTabView}
-            >
+            <TabView activeIndex={activeIndex} onTabChange={e => setActiveIndex(e.index)}>
               <TabPanel header="Common" headerClassName={styles.verticalTabHeader}>
-                <div className="w-full h-full flex flex-col gap-1">
-                  {renderSettingsList(COMMON_CHECKBOXES_PROPS)}
-                </div>
+                <div className="w-full h-full flex flex-col gap-1">{renderSettingsList(COMMON_CHECKBOXES_PROPS)}</div>
               </TabPanel>
 
               <TabPanel header="Systems" headerClassName={styles.verticalTabHeader}>
-                <div className="w-full h-full flex flex-col gap-1">
-                  {renderSettingsList(SYSTEMS_CHECKBOXES_PROPS)}
-                </div>
+                <div className="w-full h-full flex flex-col gap-1">{renderSettingsList(SYSTEMS_CHECKBOXES_PROPS)}</div>
               </TabPanel>
 
               <TabPanel header="Connections" headerClassName={styles.verticalTabHeader}>
@@ -254,6 +242,10 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
                 {renderSettingsList(UI_CHECKBOXES_PROPS)}
               </TabPanel>
 
+              <TabPanel header="Widgets" className="h-full" headerClassName={styles.verticalTabHeader}>
+                <WidgetsSettings />
+              </TabPanel>
+
               <TabPanel header="Theme" headerClassName={styles.verticalTabHeader}>
                 {renderSettingItem(THEME_SETTING)}
               </TabPanel>

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

@@ -0,0 +1,37 @@
+import { PrettySwitchbox } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/components';
+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';
+
+export interface WidgetsSettingsProps {}
+
+// eslint-disable-next-line no-empty-pattern
+export const WidgetsSettings = ({}: WidgetsSettingsProps) => {
+  const { windowsSettings, toggleWidgetVisibility, resetWidgets } = useMapRootState();
+
+  const handleWidgetSettingsChange = useCallback(
+    (widget: WidgetsIds) => toggleWidgetVisibility(widget),
+    [toggleWidgetVisibility],
+  );
+
+  return (
+    <div className="flex flex-col h-full gap-2">
+      <div>
+        {WIDGETS_CHECKBOXES_PROPS.map(widget => (
+          <PrettySwitchbox
+            key={widget.id}
+            label={widget.label}
+            checked={windowsSettings.visible.some(x => x === widget.id)}
+            setChecked={() => handleWidgetSettingsChange(widget.id)}
+          />
+        ))}
+      </div>
+      <div className="grid grid-cols-[1fr_auto]">
+        <div />
+        <Button className="py-[4px]" onClick={resetWidgets} outlined size="small" label="Reset Widgets"></Button>
+      </div>
+    </div>
+  );
+};

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

@@ -14,9 +14,10 @@ import classes from './MapWrapper.module.scss';
 import { Connections } from '@/hooks/Mapper/components/mapRootContent/components/Connections';
 import { ContextMenuSystemMultiple, useContextMenuSystemMultipleHandlers } from '../contexts/ContextMenuSystemMultiple';
 import { getSystemById } from '@/hooks/Mapper/helpers';
+import { Commands } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { Node, XYPosition } from 'reactflow';
 
-import { Commands } from '@/hooks/Mapper/types/mapHandlers.ts';
+import { useCommandsSystems } from '@/hooks/Mapper/mapRootProvider/hooks/api';
 import { emitMapEvent, useMapEventListener } from '@/hooks/Mapper/events';
 
 import { STORED_INTERFACE_DEFAULT_VALUES } from '@/hooks/Mapper/mapRootProvider/MapRootProvider';
@@ -32,7 +33,7 @@ export const MapWrapper = () => {
   const {
     update,
     outCommand,
-    data: { selectedConnections, selectedSystems, hubs, systems },
+    data: { selectedConnections, selectedSystems, hubs, systems, connections, linkSignatureToSystem },
     interfaceSettings: {
       isShowMenu,
       isShowMinimap = STORED_INTERFACE_DEFAULT_VALUES.isShowMinimap,
@@ -46,25 +47,19 @@ export const MapWrapper = () => {
   const { deleteSystems } = useDeleteSystems();
   const { mapRef, runCommand } = useCommonMapEventProcessor();
 
+  const { updateLinkSignatureToSystem } = useCommandsSystems();
   const { open, ...systemContextProps } = useContextMenuSystemHandlers({ systems, hubs, outCommand });
   const { handleSystemMultipleContext, ...systemMultipleCtxProps } = useContextMenuSystemMultipleHandlers();
 
   const [openSettings, setOpenSettings] = useState<string | null>(null);
-  const [openLinkSignatures, setOpenLinkSignatures] = useState<any | null>(null);
   const [openCustomLabel, setOpenCustomLabel] = useState<string | null>(null);
   const [openAddSystem, setOpenAddSystem] = useState<XYPosition | null>(null);
   const [selectedConnection, setSelectedConnection] = useState<SolarSystemConnection | null>(null);
 
-  const ref = useRef({ selectedConnections, selectedSystems, systemContextProps, systems, deleteSystems });
-  ref.current = { selectedConnections, selectedSystems, systemContextProps, systems, deleteSystems };
+  const ref = useRef({ selectedConnections, selectedSystems, systemContextProps, systems, connections, deleteSystems });
+  ref.current = { selectedConnections, selectedSystems, systemContextProps, systems, connections, deleteSystems };
 
   useMapEventListener(event => {
-    switch (event.name) {
-      case Commands.linkSignatureToSystem:
-        setOpenLinkSignatures(event.data);
-        return true;
-    }
-
     runCommand(event);
   });
 
@@ -93,9 +88,6 @@ export const MapWrapper = () => {
         case OutCommand.openSettings:
           setOpenSettings(event.data.system_id);
           break;
-        case OutCommand.linkSignatureToSystem:
-          setOpenLinkSignatures(event.data);
-          break;
         default:
           return outCommand(event);
       }
@@ -133,6 +125,11 @@ export const MapWrapper = () => {
     setOpenAddSystem(coordinates);
   }, []);
 
+  const canRemoveConnection = useCallback((connectionId: string) => {
+    const { connections } = ref.current;
+    return !connections.some(x => x.id === connectionId);
+  }, []);
+
   const handleSubmitAddSystem: SearchOnSubmitCallback = useCallback(
     async item => {
       if (ref.current.systems.some(x => x.system_static_info.solar_system_id === item.value)) {
@@ -169,6 +166,7 @@ export const MapWrapper = () => {
         isSoftBackground={isSoftBackground}
         theme={theme}
         onAddSystem={onAddSystem}
+        canRemoveConnection={canRemoveConnection}
       />
 
       {openSettings != null && (
@@ -179,8 +177,8 @@ export const MapWrapper = () => {
         <SystemCustomLabelDialog systemId={openCustomLabel} visible setVisible={() => setOpenCustomLabel(null)} />
       )}
 
-      {openLinkSignatures != null && (
-        <SystemLinkSignatureDialog data={openLinkSignatures} setVisible={() => setOpenLinkSignatures(null)} />
+      {linkSignatureToSystem != null && (
+        <SystemLinkSignatureDialog data={linkSignatureToSystem} setVisible={() => updateLinkSignatureToSystem(null)} />
       )}
 
       <AddSystemDialog

assets/js/hooks/Mapper/components/ui-kit/WindowManager/WindowManager.module.scss

@@ -0,0 +1,137 @@
+.windowContainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.window {
+  position: absolute;
+  //background: #fff;
+  //border: 1px solid #000;
+  //box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  user-select: none;
+
+  pointer-events: initial;
+}
+
+.resizeHandle {
+  position: absolute;
+  //background: rgba(0, 0, 0, 0.2);
+  width: 15px;
+  height: 15px;
+}
+
+.topRight,
+.bottomLeft {
+  cursor: nesw-resize;
+}
+
+.topLeft,
+.bottomRight {
+  cursor: nwse-resize;
+}
+
+.topLeft {
+  top: -7.5px;
+  left: -7.5px;
+
+  &::after {
+    position: relative;
+    top: 7.5px;
+    left: 7.5px;
+    display: block;
+    content: " ";
+    width: 5px;
+    height: 5px;
+    border-left: 1px solid var(--window-corner);
+    border-top: 1px solid var(--window-corner);
+    pointer-events: none;
+  }
+}
+
+.topRight {
+  top: -7.5px;
+  right: -7.5px;
+
+  &::after {
+    position: relative;
+    top: 7.5px;
+    right: -2.5px;
+    display: block;
+    content: " ";
+    width: 5px;
+    height: 5px;
+    border-right: 1px solid var(--window-corner);
+    border-top: 1px solid var(--window-corner);
+    pointer-events: none;
+  }
+}
+
+.bottomLeft {
+  bottom: -7.5px;
+  left: -7.5px;
+
+  &::after {
+    position: relative;
+    top: 2.5px;
+    left: 7.5px;
+    display: block;
+    content: " ";
+    width: 5px;
+    height: 5px;
+    border-left: 1px solid var(--window-corner);
+    border-bottom: 1px solid var(--window-corner);
+    pointer-events: none;
+  }
+}
+
+.bottomRight {
+  bottom: -7.5px;
+  right: -7.5px;
+
+  &::after {
+    position: relative;
+    top: 2.5px;
+    right: -2.5px;
+    display: block;
+    content: " ";
+    width: 5px;
+    height: 5px;
+    border-right: 1px solid var(--window-corner);
+    border-bottom: 1px solid var(--window-corner);
+    pointer-events: none;
+  }
+}
+
+.top {
+  top: -5px;
+  left: 0;
+  right: 0;
+  height: 10px;
+  cursor: ns-resize;
+}
+
+.bottom {
+  bottom: -5px;
+  left: 0;
+  right: 0;
+  height: 10px;
+  cursor: ns-resize;
+}
+
+.left {
+  top: 0;
+  bottom: 0;
+  left: -5px;
+  width: 10px;
+  cursor: ew-resize;
+}
+
+.right {
+  top: 0;
+  bottom: 0;
+  right: -5px;
+  width: 10px;
+  cursor: ew-resize;
+}

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

@@ -0,0 +1,419 @@
+import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import styles from './WindowManager.module.scss';
+import debounce from 'lodash.debounce';
+import { WindowProps } from '@/hooks/Mapper/components/ui-kit/WindowManager/types.ts';
+
+const MIN_WINDOW_SIZE = 100;
+const SNAP_THRESHOLD = 10;
+export const SNAP_GAP = 10;
+
+export enum ActionType {
+  Drag = 'drag',
+  Resize = 'resize',
+}
+
+export const DefaultWindowState = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+};
+
+function getWindowsBySides(windows: WindowProps[], containerWidth: number, containerHeight: number) {
+  const centerX = containerWidth / 2;
+  const centerY = containerHeight / 2;
+
+  const top = windows.filter(window => window.position.y + window.size.height / 2 < centerY);
+  const bottom = windows.filter(window => window.position.y + window.size.height / 2 >= centerY);
+  const left = windows.filter(window => window.position.x + window.size.width / 2 < centerX);
+  const right = windows.filter(window => window.position.x + window.size.width / 2 >= centerX);
+
+  return { top, bottom, left, right };
+}
+
+export type WindowWrapperProps = {
+  onDrag: (e: React.MouseEvent, windowId: string | number) => void;
+  onResize: (e: React.MouseEvent, windowId: string | number, resizeDirection: string) => void;
+} & WindowProps;
+
+export const WindowWrapper = ({ onResize, onDrag, ...window }: WindowWrapperProps) => {
+  const handleMouseDownRoot = (e: React.MouseEvent) => {
+    onDrag(e, window.id);
+  };
+
+  const { handleResizeTL, handleResizeTR, handleResizeBL, handleResizeBR } = useMemo(() => {
+    const handleResizeTL = (e: React.MouseEvent) => onResize(e, window.id, 'top left');
+    const handleResizeTR = (e: React.MouseEvent) => onResize(e, window.id, 'top right');
+    const handleResizeBL = (e: React.MouseEvent) => onResize(e, window.id, 'bottom left');
+    const handleResizeBR = (e: React.MouseEvent) => onResize(e, window.id, 'bottom right');
+
+    return {
+      handleResizeTL,
+      handleResizeTR,
+      handleResizeBL,
+      handleResizeBR,
+    };
+  }, [window]);
+
+  return (
+    <div
+      key={window.id}
+      className={`drag-handle ${styles.window}`}
+      style={{
+        width: window.size.width,
+        height: window.size.height,
+        top: window.position.y,
+        left: window.position.x,
+        zIndex: window.zIndex,
+      }}
+      onMouseDown={handleMouseDownRoot}
+    >
+      {window.content(window)}
+      <div className={styles.resizeHandle + ' ' + styles.topLeft} onMouseDown={handleResizeTL} />
+      <div className={styles.resizeHandle + ' ' + styles.topRight} onMouseDown={handleResizeTR} />
+      <div className={styles.resizeHandle + ' ' + styles.bottomLeft} onMouseDown={handleResizeBL} />
+      <div className={styles.resizeHandle + ' ' + styles.bottomRight} onMouseDown={handleResizeBR} />
+    </div>
+  );
+};
+
+type WindowManagerProps = {
+  windows: WindowProps[];
+  dragSelector?: string;
+  onChange?(windows: WindowProps[]): void;
+};
+
+export const WindowManager: React.FC<WindowManagerProps> = ({ windows: initialWindows, dragSelector, onChange }) => {
+  const [windows, setWindows] = useState(
+    initialWindows.map((window, index) => ({
+      ...window,
+      zIndex: index + 1,
+    })),
+  );
+
+  useEffect(() => {
+    setWindows(initialWindows.slice(0));
+  }, [initialWindows]);
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const activeWindowIdRef = useRef<string | number | null>(null);
+  const actionTypeRef = useRef<ActionType | null>(null);
+  const resizeDirectionRef = useRef<string | null>(null);
+  const startMousePositionRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+  const startWindowStateRef = useRef<{ x: number; y: number; width: number; height: number }>(DefaultWindowState);
+
+  const ref = useRef({ windows, onChange });
+  ref.current = { windows, onChange };
+
+  const refPrevSize = useRef({ w: 0, h: 0 });
+
+  const onDebouncedChange = useMemo(() => {
+    return debounce(() => {
+      ref.current.onChange?.(ref.current.windows);
+    }, 20);
+  }, []);
+
+  const handleMouseDown = (
+    e: React.MouseEvent,
+    windowId: string | number,
+    actionType: ActionType,
+    resizeDirection?: string,
+  ) => {
+    if (dragSelector && actionType === ActionType.Drag && !(e.target as HTMLElement).closest(dragSelector)) {
+      return;
+    }
+
+    e.stopPropagation();
+    activeWindowIdRef.current = windowId;
+    actionTypeRef.current = actionType;
+    resizeDirectionRef.current = resizeDirection || null;
+    startMousePositionRef.current = { x: e.clientX, y: e.clientY };
+    const targetWindow = windows.find(win => win.id === windowId);
+    if (targetWindow) {
+      startWindowStateRef.current = {
+        x: targetWindow.position.x,
+        y: targetWindow.position.y,
+        width: targetWindow.size.width,
+        height: targetWindow.size.height,
+      };
+    }
+
+    // Bring window to front by updating zIndex
+    setWindows(prevWindows => {
+      const maxZIndex = Math.max(...prevWindows.map(w => w.zIndex));
+      return prevWindows.map(window => (window.id === windowId ? { ...window, zIndex: maxZIndex + 1 } : window));
+    });
+
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+  };
+
+  const handleMouseMove = (e: MouseEvent) => {
+    if (activeWindowIdRef.current !== null && actionTypeRef.current) {
+      const deltaX = e.clientX - startMousePositionRef.current.x;
+      const deltaY = e.clientY - startMousePositionRef.current.y;
+      const container = containerRef.current;
+
+      setWindows(prevWindows =>
+        prevWindows.map(window => {
+          if (window.id === activeWindowIdRef.current) {
+            let newX = startWindowStateRef.current.x;
+            let newY = startWindowStateRef.current.y;
+            let newWidth = startWindowStateRef.current.width;
+            let newHeight = startWindowStateRef.current.height;
+
+            if (actionTypeRef.current === ActionType.Drag) {
+              newX += deltaX;
+              newY += deltaY;
+
+              // Ensure the window stays within the container boundaries
+              if (container) {
+                newX = Math.max(SNAP_GAP, Math.min(container.clientWidth - window.size.width - SNAP_GAP, newX));
+                newY = Math.max(SNAP_GAP, Math.min(container.clientHeight - window.size.height - SNAP_GAP, newY));
+              }
+
+              // Snap to other windows with or without gap
+              prevWindows.forEach(otherWindow => {
+                if (otherWindow.id === window.id) {
+                  return;
+                }
+
+                // Snap vertically (top and bottom)
+                if (Math.abs(newY - otherWindow.position.y) < SNAP_THRESHOLD) {
+                  newY = otherWindow.position.y; // Align top without gap
+                } else if (Math.abs(newY + window.size.height - otherWindow.position.y) < SNAP_THRESHOLD) {
+                  newY = otherWindow.position.y - window.size.height - SNAP_GAP; // Bottom aligns to top
+                } else if (Math.abs(newY - (otherWindow.position.y + otherWindow.size.height)) < SNAP_THRESHOLD) {
+                  newY = otherWindow.position.y + otherWindow.size.height + SNAP_GAP; // Align bottom without gap
+                } else if (
+                  Math.abs(newY + window.size.height - (otherWindow.position.y + otherWindow.size.height)) <
+                  SNAP_THRESHOLD
+                ) {
+                  newY = otherWindow.position.y + otherWindow.size.height - window.size.height; // Bottom aligns bottom
+                }
+
+                // Snap horizontally (left and right)
+                if (Math.abs(newX - otherWindow.position.x) < SNAP_THRESHOLD) {
+                  newX = otherWindow.position.x; // Align left without gap
+                } else if (Math.abs(newX + window.size.width - otherWindow.position.x) < SNAP_THRESHOLD) {
+                  newX = otherWindow.position.x - window.size.width - SNAP_GAP; // Right aligns to left
+                } else if (Math.abs(newX - (otherWindow.position.x + otherWindow.size.width)) < SNAP_THRESHOLD) {
+                  newX = otherWindow.position.x + otherWindow.size.width + SNAP_GAP; // Align right without gap
+                } else if (
+                  Math.abs(newX + window.size.width - (otherWindow.position.x + otherWindow.size.width)) <
+                  SNAP_THRESHOLD
+                ) {
+                  newX = otherWindow.position.x + otherWindow.size.width - window.size.width; // Right aligns right
+                }
+              });
+            }
+
+            if (actionTypeRef.current === ActionType.Resize && resizeDirectionRef.current) {
+              if (resizeDirectionRef.current.includes('right')) {
+                newWidth = Math.max(MIN_WINDOW_SIZE, startWindowStateRef.current.width + deltaX);
+
+                // Снап для правой границы с отступом SNAP_THRESHOLD
+                prevWindows.forEach(otherWindow => {
+                  if (otherWindow.id !== window.id) {
+                    // Правая граница текущего окна к левой границе другого окна
+                    const snapRightToLeft =
+                      otherWindow.position.x - (startWindowStateRef.current.x + newWidth) - SNAP_THRESHOLD;
+                    if (Math.abs(snapRightToLeft) < SNAP_THRESHOLD) {
+                      newWidth = otherWindow.position.x - startWindowStateRef.current.x - SNAP_THRESHOLD;
+                    }
+
+                    // Правая граница текущего окна к правой границе другого окна
+                    const snapRightToRight =
+                      otherWindow.position.x + otherWindow.size.width - (startWindowStateRef.current.x + newWidth);
+                    if (Math.abs(snapRightToRight) < SNAP_THRESHOLD) {
+                      newWidth = otherWindow.position.x + otherWindow.size.width - startWindowStateRef.current.x;
+                    }
+                  }
+                });
+              }
+
+              if (resizeDirectionRef.current.includes('left')) {
+                newWidth = Math.max(MIN_WINDOW_SIZE, startWindowStateRef.current.width - deltaX);
+                newX = startWindowStateRef.current.x + (startWindowStateRef.current.width - newWidth);
+
+                // Снап для левой границы с отступом SNAP_THRESHOLD
+                prevWindows.forEach(otherWindow => {
+                  if (otherWindow.id !== window.id) {
+                    // Левая граница текущего окна к правой границе другого окна
+                    const snapLeftToRight = newX - (otherWindow.position.x + otherWindow.size.width + SNAP_THRESHOLD);
+                    if (Math.abs(snapLeftToRight) < SNAP_THRESHOLD) {
+                      newX = otherWindow.position.x + otherWindow.size.width + SNAP_THRESHOLD;
+                      newWidth = startWindowStateRef.current.width + startWindowStateRef.current.x - newX;
+                    }
+
+                    // Левая граница текущего окна к левой границе другого окна
+                    const snapLeftToLeft = newX - otherWindow.position.x;
+                    if (Math.abs(snapLeftToLeft) < SNAP_THRESHOLD) {
+                      newX = otherWindow.position.x;
+                      newWidth = startWindowStateRef.current.width + startWindowStateRef.current.x - newX;
+                    }
+                  }
+                });
+              }
+
+              if (resizeDirectionRef.current.includes('bottom')) {
+                newHeight = Math.max(MIN_WINDOW_SIZE, startWindowStateRef.current.height + deltaY);
+
+                // Снап для нижней границы с отступом SNAP_THRESHOLD
+                prevWindows.forEach(otherWindow => {
+                  if (otherWindow.id !== window.id) {
+                    // Нижняя граница текущего окна к верхней границе другого окна
+                    const snapBottomToTop =
+                      otherWindow.position.y - (startWindowStateRef.current.y + newHeight) - SNAP_THRESHOLD;
+                    if (Math.abs(snapBottomToTop) < SNAP_THRESHOLD) {
+                      newHeight = otherWindow.position.y - startWindowStateRef.current.y - SNAP_THRESHOLD;
+                    }
+
+                    // Нижняя граница текущего окна к нижней границе другого окна
+                    const snapBottomToBottom =
+                      otherWindow.position.y + otherWindow.size.height - (startWindowStateRef.current.y + newHeight);
+                    if (Math.abs(snapBottomToBottom) < SNAP_THRESHOLD) {
+                      newHeight = otherWindow.position.y + otherWindow.size.height - startWindowStateRef.current.y;
+                    }
+                  }
+                });
+              }
+
+              if (resizeDirectionRef.current.includes('top')) {
+                newHeight = Math.max(MIN_WINDOW_SIZE, startWindowStateRef.current.height - deltaY);
+                newY = startWindowStateRef.current.y + (startWindowStateRef.current.height - newHeight);
+
+                // Снап для верхней границы с отступом SNAP_THRESHOLD
+                prevWindows.forEach(otherWindow => {
+                  if (otherWindow.id !== window.id) {
+                    // Верхняя граница текущего окна к нижней границе другого окна
+                    const snapTopToBottom = newY - (otherWindow.position.y + otherWindow.size.height + SNAP_THRESHOLD);
+                    if (Math.abs(snapTopToBottom) < SNAP_THRESHOLD) {
+                      newY = otherWindow.position.y + otherWindow.size.height + SNAP_THRESHOLD;
+                      newHeight = startWindowStateRef.current.height + startWindowStateRef.current.y - newY;
+                    }
+
+                    // Верхняя граница текущего окна к верхней границе другого окна
+                    const snapTopToTop = newY - otherWindow.position.y;
+                    if (Math.abs(snapTopToTop) < SNAP_THRESHOLD) {
+                      newY = otherWindow.position.y;
+                      newHeight = startWindowStateRef.current.height + startWindowStateRef.current.y - newY;
+                    }
+                  }
+                });
+              }
+
+              // Ensure the window stays within the container boundaries
+              if (container) {
+                newX = Math.max(0 + SNAP_GAP, Math.min(container.clientWidth - newWidth - SNAP_GAP, newX));
+                newY = Math.max(0 + SNAP_GAP, Math.min(container.clientHeight - newHeight - SNAP_GAP, newY));
+              }
+            }
+
+            return {
+              ...window,
+              position: { x: newX, y: newY },
+              size: { width: newWidth, height: newHeight },
+            };
+          }
+          return window;
+        }),
+      );
+
+      onDebouncedChange();
+    }
+  };
+
+  const handleMouseUp = useCallback(() => {
+    activeWindowIdRef.current = null;
+    actionTypeRef.current = null;
+    resizeDirectionRef.current = null;
+
+    onDebouncedChange();
+    window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener('mouseup', handleMouseUp);
+  }, []);
+
+  // Handle resize of the container and reposition windows
+  useEffect(() => {
+    if (containerRef.current) {
+      refPrevSize.current = { w: containerRef.current.clientWidth, h: containerRef.current.clientHeight };
+    }
+
+    const handleResize = () => {
+      const container = containerRef.current;
+      const { windows } = ref.current;
+      if (!container) {
+        return;
+      }
+
+      const deltaX = container.clientWidth - refPrevSize.current.w;
+      const deltaY = container.clientHeight - refPrevSize.current.h;
+
+      const { bottom, right } = getWindowsBySides(windows, refPrevSize.current.w, refPrevSize.current.h);
+
+      setWindows(w => {
+        return w.map(x => {
+          let next = { ...x };
+
+          if (right.some(r => r.id === x.id)) {
+            next = {
+              ...next,
+              position: {
+                ...next.position,
+                x: next.position.x + deltaX,
+              },
+            };
+          }
+
+          if (bottom.some(r => r.id === x.id)) {
+            next = {
+              ...next,
+              position: {
+                ...next.position,
+                y: next.position.y + deltaY,
+              },
+            };
+          }
+
+          if (next.position.x + next.size.width > container.clientWidth - SNAP_GAP) {
+            next.position.x = container.clientWidth - next.size.width - SNAP_GAP;
+          }
+
+          if (next.position.y + next.size.height > container.clientHeight - SNAP_GAP) {
+            next.position.y = container.clientHeight - next.size.height - SNAP_GAP;
+          }
+
+          return next;
+        });
+      });
+
+      onDebouncedChange();
+
+      refPrevSize.current = { w: container.clientWidth, h: container.clientHeight };
+    };
+
+    const tid = setTimeout(handleResize, 10);
+    window.addEventListener('resize', handleResize);
+    return () => {
+      clearTimeout(tid);
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  const handleDrag = (e: React.MouseEvent, windowId: string | number) => {
+    handleMouseDown(e, windowId, ActionType.Drag);
+  };
+
+  const handleResize = (e: React.MouseEvent, windowId: string | number, resizeDirection: string) => {
+    handleMouseDown(e, windowId, ActionType.Resize, resizeDirection);
+  };
+
+  return (
+    <div ref={containerRef} className={styles.windowContainer}>
+      {windows.map(window => (
+        <WindowWrapper key={window.id} onDrag={handleDrag} onResize={handleResize} {...window} />
+      ))}
+    </div>
+  );
+};

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

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

assets/js/hooks/Mapper/components/ui-kit/WindowManager/types.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export type WindowProps = {
+  id: string | number;
+  content: (w: WindowProps) => React.ReactNode;
+  position: { x: number; y: number };
+  size: { width: number; height: number };
+  zIndex: number;
+  visible?: boolean;
+};

assets/js/hooks/Mapper/components/ui-kit/WindowManager/utils.ts

@@ -0,0 +1,13 @@
+import { WindowProps } from '@/hooks/Mapper/components/ui-kit/WindowManager/WindowManager.tsx';
+
+export function getWindowsBySides(windows: WindowProps[], containerWidth: number, containerHeight: number) {
+  const centerX = containerWidth / 2;
+  const centerY = containerHeight / 2;
+
+  const top = windows.filter(window => window.position.y + window.size.height / 2 < centerY);
+  const bottom = windows.filter(window => window.position.y + window.size.height / 2 >= centerY);
+  const left = windows.filter(window => window.position.x + window.size.width / 2 < centerX);
+  const right = windows.filter(window => window.position.x + window.size.width / 2 >= centerX);
+
+  return { top, bottom, left, right };
+}

assets/js/hooks/Mapper/constants.ts

@@ -1,6 +1,7 @@
 export enum SESSION_KEY {
   viewPort = 'viewPort',
   windows = 'windows',
+  windowsVisible = 'windowsVisible',
   routes = 'routes',
 }
 

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

@@ -1,13 +1,21 @@
 import { ContextStoreDataUpdate, useContextStore } from '@/hooks/Mapper/utils';
-import { createContext, Dispatch, ForwardedRef, forwardRef, SetStateAction, useContext } from 'react';
+import { createContext, Dispatch, ForwardedRef, forwardRef, SetStateAction, useContext, useEffect } from 'react';
 import { MapUnionTypes, OutCommandHandler, SolarSystemConnection } from '@/hooks/Mapper/types';
 import { useMapRootHandlers } from '@/hooks/Mapper/mapRootProvider/hooks';
 import { WithChildren } from '@/hooks/Mapper/types/common.ts';
 import useLocalStorageState from 'use-local-storage-state';
+import {
+  ToggleWidgetVisibility,
+  UpdateWidgetSettingsFunc,
+  useStoreWidgets,
+  WindowStoreInfo,
+} from '@/hooks/Mapper/mapRootProvider/hooks/useStoreWidgets.ts';
+import { CommandLinkSignatureToSystem } from '@/hooks/Mapper/types';
 
 export type MapRootData = MapUnionTypes & {
   selectedSystems: string[];
   selectedConnections: Pick<SolarSystemConnection, 'source' | 'target'>[];
+  linkSignatureToSystem: CommandLinkSignatureToSystem | null;
 };
 
 const INITIAL_DATA: MapRootData = {
@@ -18,6 +26,7 @@ const INITIAL_DATA: MapRootData = {
   userCharacters: [],
   presentCharacters: [],
   systems: [],
+  systemSignatures: {},
   hubs: [],
   routes: undefined,
   kills: [],
@@ -27,6 +36,7 @@ const INITIAL_DATA: MapRootData = {
   selectedConnections: [],
   userPermissions: {},
   options: {},
+  linkSignatureToSystem: null,
 };
 
 export enum InterfaceStoredSettingsProps {
@@ -60,7 +70,7 @@ export const STORED_INTERFACE_DEFAULT_VALUES: InterfaceStoredSettings = {
   isShowBackgroundPattern: true,
   isSoftBackground: false,
   theme: 'default',
-}
+};
 
 export interface MapRootContextProps {
   update: ContextStoreDataUpdate<MapRootData>;
@@ -68,6 +78,10 @@ export interface MapRootContextProps {
   outCommand: OutCommandHandler;
   interfaceSettings: InterfaceStoredSettings;
   setInterfaceSettings: Dispatch<SetStateAction<InterfaceStoredSettings>>;
+  windowsSettings: WindowStoreInfo;
+  toggleWidgetVisibility: ToggleWidgetVisibility;
+  updateWidgetSettings: UpdateWidgetSettingsFunc;
+  resetWidgets: () => void;
 }
 
 const MapRootContext = createContext<MapRootContextProps>({
@@ -101,6 +115,25 @@ export const MapRootProvider = ({ children, fwdRef, outCommand }: MapRootProvide
       defaultValue: STORED_INTERFACE_DEFAULT_VALUES,
     },
   );
+  const { windowsSettings, toggleWidgetVisibility, updateWidgetSettings, resetWidgets } = useStoreWidgets();
+
+  useEffect(() => {
+    let foundNew = false;
+    const newVals = Object.keys(STORED_INTERFACE_DEFAULT_VALUES).reduce((acc, x) => {
+      if (Object.keys(acc).includes(x)) {
+        return acc;
+      }
+
+      foundNew = true;
+
+      // @ts-ignore
+      return { ...acc, [x]: STORED_INTERFACE_DEFAULT_VALUES[x] };
+    }, interfaceSettings);
+
+    if (foundNew) {
+      setInterfaceSettings(newVals);
+    }
+  }, []);
 
   return (
     <MapRootContext.Provider
@@ -110,6 +143,10 @@ export const MapRootProvider = ({ children, fwdRef, outCommand }: MapRootProvide
         outCommand: outCommand,
         setInterfaceSettings,
         interfaceSettings,
+        windowsSettings,
+        updateWidgetSettings,
+        toggleWidgetVisibility,
+        resetWidgets,
       }}
     >
       <MapRootHandlers ref={fwdRef}>{children}</MapRootHandlers>

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

@@ -1,6 +1,11 @@
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useCallback, useRef } from 'react';
-import { CommandAddSystems, CommandRemoveSystems, CommandUpdateSystems } from '@/hooks/Mapper/types';
+import {
+  CommandAddSystems,
+  CommandRemoveSystems,
+  CommandUpdateSystems,
+  CommandLinkSignatureToSystem,
+} from '@/hooks/Mapper/types';
 import { useLoadSystemStatic } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic.ts';
 import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { emitMapEvent } from '@/hooks/Mapper/events';
@@ -8,14 +13,14 @@ import { Commands } from '@/hooks/Mapper/types/mapHandlers.ts';
 export const useCommandsSystems = () => {
   const {
     update,
-    data: { systems },
+    data: { systems, systemSignatures },
     outCommand,
   } = useMapRootState();
 
   const { addSystemStatic } = useLoadSystemStatic({ systems: [] });
 
-  const ref = useRef({ systems, update, addSystemStatic });
-  ref.current = { systems, update, addSystemStatic };
+  const ref = useRef({ systems, systemSignatures, update, addSystemStatic });
+  ref.current = { systems, systemSignatures, update, addSystemStatic };
 
   const addSystems = useCallback((systemsToAdd: CommandAddSystems) => {
     const { update, addSystemStatic, systems } = ref.current;
@@ -57,31 +62,27 @@ export const useCommandsSystems = () => {
     });
 
     update({ systems: out }, true);
+
+    emitMapEvent({ name: Commands.updateSystems, data: out });
   }, []);
 
   const updateSystemSignatures = useCallback(
     async (systemId: string) => {
-      const { update, systems } = ref.current;
-
+      const { update, systemSignatures } = ref.current;
       const { signatures } = await outCommand({
         type: OutCommand.getSignatures,
         data: { system_id: `${systemId}` },
       });
-
-      const out = systems.map(current => {
-        if (current.id === `${systemId}`) {
-          return { ...current, system_signatures: signatures };
-        }
-
-        return current;
-      });
-
-      update({ systems: out }, true);
-
-      emitMapEvent({ name: Commands.updateSystems, data: out });
+      const out = { ...systemSignatures, [`${systemId}`]: signatures };
+      update({ systemSignatures: out }, true);
     },
     [outCommand],
   );
 
-  return { addSystems, removeSystems, updateSystems, updateSystemSignatures };
+  const updateLinkSignatureToSystem = useCallback(async (command: CommandLinkSignatureToSystem) => {
+    const { update } = ref.current;
+    update({ linkSignatureToSystem: command }, true);
+  }, []);
+
+  return { addSystems, removeSystems, updateSystems, updateSystemSignatures, updateLinkSignatureToSystem };
 };

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

@@ -32,7 +32,8 @@ import { emitMapEvent } from '@/hooks/Mapper/events';
 
 export const useMapRootHandlers = (ref: ForwardedRef<MapHandlers>) => {
   const mapInit = useMapInit();
-  const { addSystems, removeSystems, updateSystems, updateSystemSignatures } = useCommandsSystems();
+  const { addSystems, removeSystems, updateSystems, updateSystemSignatures, updateLinkSignatureToSystem } =
+    useCommandsSystems();
   const { addConnections, removeConnections, updateConnection } = useCommandsConnections();
   const { charactersUpdated, characterAdded, characterRemoved, characterUpdated, presentCharacters } =
     useCommandsCharacters();
@@ -93,7 +94,9 @@ export const useMapRootHandlers = (ref: ForwardedRef<MapHandlers>) => {
               break;
 
             case Commands.linkSignatureToSystem: // USED
-              // do nothing here
+              setTimeout(() => {
+                updateLinkSignatureToSystem(data as CommandLinkSignatureToSystem);
+              }, 200);
               break;
 
             case Commands.centerSystem: // USED

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

@@ -0,0 +1,118 @@
+import useLocalStorageState from 'use-local-storage-state';
+import {
+  CURRENT_WINDOWS_VERSION,
+  DEFAULT_WIDGETS,
+  STORED_VISIBLE_WIDGETS_DEFAULT,
+  WidgetsIds,
+  WINDOWS_LOCAL_STORE_KEY,
+} from '@/hooks/Mapper/components/mapInterface/constants.tsx';
+import { WindowProps } from '@/hooks/Mapper/components/ui-kit/WindowManager/types.ts';
+import { useCallback, useEffect, useRef } from 'react';
+import { SNAP_GAP } from '@/hooks/Mapper/components/ui-kit/WindowManager';
+
+export type StoredWindowProps = Omit<WindowProps, 'content'>;
+export type WindowStoreInfo = {
+  version: number;
+  windows: StoredWindowProps[];
+  visible: WidgetsIds[];
+};
+export type UpdateWidgetSettingsFunc = (widgets: WindowProps[]) => void;
+export type ToggleWidgetVisibility = (widgetId: WidgetsIds) => void;
+
+export const getDefaultWidgetProps = () => ({
+  version: CURRENT_WINDOWS_VERSION,
+  visible: STORED_VISIBLE_WIDGETS_DEFAULT,
+  windows: DEFAULT_WIDGETS,
+});
+
+export const useStoreWidgets = () => {
+  const [windowsSettings, setWindowsSettings] = useLocalStorageState<WindowStoreInfo>(WINDOWS_LOCAL_STORE_KEY, {
+    defaultValue: getDefaultWidgetProps(),
+  });
+
+  const ref = useRef({ windowsSettings, setWindowsSettings });
+  ref.current = { windowsSettings, setWindowsSettings };
+
+  const updateWidgetSettings: UpdateWidgetSettingsFunc = useCallback(newWindows => {
+    const { setWindowsSettings } = ref.current;
+
+    setWindowsSettings(({ version, visible /*, windows*/ }: WindowStoreInfo) => {
+      return {
+        version,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        windows: DEFAULT_WIDGETS.map(({ content, ...x }) => {
+          const windowProp = newWindows.find(j => j.id === x.id);
+          if (windowProp) {
+            return windowProp;
+          }
+
+          return x;
+        }),
+        visible,
+      };
+    });
+  }, []);
+
+  const toggleWidgetVisibility: ToggleWidgetVisibility = useCallback(widgetId => {
+    const { setWindowsSettings } = ref.current;
+
+    setWindowsSettings(({ visible, windows, ...x }) => {
+      const isCheckedPrev = visible.includes(widgetId);
+      if (!isCheckedPrev) {
+        const maxZIndex = Math.max(...windows.map(w => w.zIndex));
+        return {
+          ...x,
+          windows: windows.map(wnd => {
+            if (wnd.id === widgetId) {
+              return { ...wnd, position: { x: SNAP_GAP, y: SNAP_GAP }, zIndex: maxZIndex + 1 };
+            }
+
+            return wnd;
+          }),
+          visible: [...visible, widgetId],
+        };
+      }
+
+      return {
+        ...x,
+        windows,
+        visible: visible.filter(x => x !== widgetId),
+      };
+    });
+  }, []);
+
+  useEffect(() => {
+    const { setWindowsSettings } = ref.current;
+
+    const raw = localStorage.getItem(WINDOWS_LOCAL_STORE_KEY);
+    if (!raw) {
+      console.warn('No windows found in local storage!!');
+
+      setWindowsSettings(getDefaultWidgetProps());
+      return;
+    }
+
+    const { version, windows, visible } = JSON.parse(raw) as WindowStoreInfo;
+    if (!version || CURRENT_WINDOWS_VERSION > version) {
+      setWindowsSettings(getDefaultWidgetProps());
+    }
+
+    // eslint-disable-next-line no-debugger
+    const out = windows.filter(x => DEFAULT_WIDGETS.find(def => def.id === x.id));
+
+    setWindowsSettings({
+      version: CURRENT_WINDOWS_VERSION,
+      windows: out as WindowProps[],
+      visible,
+    });
+  }, []);
+
+  const resetWidgets = useCallback(() => ref.current.setWindowsSettings(getDefaultWidgetProps()), []);
+
+  return {
+    windowsSettings,
+    updateWidgetSettings,
+    toggleWidgetVisibility,
+    resetWidgets,
+  };
+};

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

@@ -118,6 +118,7 @@ export enum OutCommand {
   deleteHub = 'delete_hub',
   getRoutes = 'get_routes',
   getCharacterJumps = 'get_character_jumps',
+  getStructures = 'get_structures',
   getSignatures = 'get_signatures',
   getSystemStaticInfos = 'get_system_static_infos',
   getConnectionInfo = 'get_connection_info',
@@ -127,6 +128,7 @@ export enum OutCommand {
   updateConnectionShipSizeType = 'update_connection_ship_size_type',
   updateConnectionLocked = 'update_connection_locked',
   updateConnectionCustomInfo = 'update_connection_custom_info',
+  updateStructures = 'update_structures',
   updateSignatures = 'update_signatures',
   updateSystemName = 'update_system_name',
   updateSystemTemporaryName = 'update_system_temporary_name',
@@ -147,6 +149,8 @@ export enum OutCommand {
   openUserSettings = 'open_user_settings',
   getPassages = 'get_passages',
   linkSignatureToSystem = 'link_signature_to_system',
+  getCorporationNames = 'get_corporation_names',
+  getCorporationTicker = 'get_corporation_ticker',
 
   // Only UI commands
   openSettings = 'open_settings',

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

@@ -5,6 +5,7 @@ import { SolarSystemRawType } from '@/hooks/Mapper/types/system.ts';
 import { RoutesList } from '@/hooks/Mapper/types/routes.ts';
 import { SolarSystemConnection } from '@/hooks/Mapper/types/connection.ts';
 import { UserPermissions } from '@/hooks/Mapper/types';
+import { SystemSignature } from '@/hooks/Mapper/types/signatures';
 
 export type MapUnionTypes = {
   wormholesData: Record<string, WormholeDataRaw>;
@@ -15,6 +16,7 @@ export type MapUnionTypes = {
   presentCharacters: string[];
   hubs: string[];
   systems: SolarSystemRawType[];
+  systemSignatures: Record<string, SystemSignature[]>;
   routes?: RoutesList;
   kills: Record<number, number>;
   connections: SolarSystemConnection[];

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

@@ -117,6 +117,7 @@ export type SolarSystemRawType = {
   status: number;
   name: string | null;
   temporary_name: string | null;
+  linked_sig_eve_id: string | null;
 
   system_static_info: SolarSystemStaticInfoRaw;
   system_signatures: SystemSignature[];
@@ -130,4 +131,3 @@ export type SearchSystemItem = {
   system_static_info: SolarSystemStaticInfoRaw;
   value: number;
 };
-

config/runtime.exs

@@ -64,7 +64,31 @@ map_subscription_characters_limit =
 
 map_subscription_hubs_limit =
   config_dir
-  |> get_int_from_path_or_env("WANDERER_MAP_SUBSCRIPTION_HUBS_LIMIT", 100)
+  |> get_int_from_path_or_env("WANDERER_MAP_SUBSCRIPTION_HUBS_LIMIT", 10)
+
+map_subscription_base_price =
+  config_dir
+  |> get_int_from_path_or_env("WANDERER_MAP_SUBSCRIPTION_BASE_PRICE", 100_000_000)
+
+map_subscription_extra_characters_100_price =
+  config_dir
+  |> get_int_from_path_or_env("WANDERER_MAP_SUBSCRIPTION_EXTRA_CHARACTERS_100_PRICE", 50_000_000)
+
+map_subscription_extra_hubs_10_price =
+  config_dir
+  |> get_int_from_path_or_env("WANDERER_MAP_SUBSCRIPTION_EXTRA_HUBS_10_PRICE", 10_000_000)
+
+map_connection_auto_expire_hours =
+  config_dir
+  |> get_int_from_path_or_env("WANDERER_MAP_CONNECTION_AUTO_EXPIRE_HOURS", 24)
+
+map_connection_auto_eol_hours =
+  config_dir
+  |> get_int_from_path_or_env("WANDERER_MAP_CONNECTION_AUTO_EOL_HOURS", 21)
+
+map_connection_eol_expire_timeout_mins =
+  config_dir
+  |> get_int_from_path_or_env("WANDERER_MAP_CONNECTION_EOL_EXPIRE_TIMEOUT_MINS", 60)
 
 wallet_tracking_enabled =
   config_dir
@@ -90,6 +114,9 @@ config :wanderer_app,
   corp_wallet: System.get_env("WANDERER_CORP_WALLET", ""),
   public_api_disabled: public_api_disabled,
   map_subscriptions_enabled: map_subscriptions_enabled,
+  map_connection_auto_expire_hours: map_connection_auto_expire_hours,
+  map_connection_auto_eol_hours: map_connection_auto_eol_hours,
+  map_connection_eol_expire_timeout_mins: map_connection_eol_expire_timeout_mins,
   wallet_tracking_enabled: wallet_tracking_enabled,
   subscription_settings: %{
     plans: [
@@ -102,16 +129,16 @@ config :wanderer_app,
       },
       %{
         id: "omega",
-        characters_limit: 300,
-        hubs_limit: 20,
-        base_price: 250_000_000,
+        characters_limit: map_subscription_characters_limit * 2,
+        hubs_limit: map_subscription_hubs_limit * 2,
+        base_price: map_subscription_base_price,
         month_3_discount: 0.2,
         month_6_discount: 0.4,
         month_12_discount: 0.5
       }
     ],
-    extra_characters_100: 75_000_000,
-    extra_hubs_10: 25_000_000
+    extra_characters_100: map_subscription_extra_characters_100_price,
+    extra_hubs_10: map_subscription_extra_hubs_10_price
   }
 
 config :ueberauth, Ueberauth,

lib/wanderer_app/api.ex

@@ -16,6 +16,7 @@ defmodule WandererApp.Api do
     resource WandererApp.Api.MapState
     resource WandererApp.Api.MapSystem
     resource WandererApp.Api.MapSystemSignature
+    resource WandererApp.Api.MapSystemStructure
     resource WandererApp.Api.MapCharacterSettings
     resource WandererApp.Api.MapSubscription
     resource WandererApp.Api.MapTransaction

lib/wanderer_app/api/map_system.ex

@@ -48,6 +48,7 @@ defmodule WandererApp.Api.MapSystem do
     define(:update_tag, action: :update_tag)
     define(:update_temporary_name, action: :update_temporary_name)
     define(:update_labels, action: :update_labels)
+    define(:update_linked_sig_eve_id, action: :update_linked_sig_eve_id)
     define(:update_position, action: :update_position)
     define(:update_visible, action: :update_visible)
   end
@@ -117,6 +118,10 @@ defmodule WandererApp.Api.MapSystem do
       change(set_attribute(:visible, true))
     end
 
+    update :update_linked_sig_eve_id do
+      accept [:linked_sig_eve_id]
+    end
+
     update :update_visible do
       accept [:visible]
     end
@@ -193,6 +198,10 @@ defmodule WandererApp.Api.MapSystem do
       allow_nil? true
     end
 
+    attribute :linked_sig_eve_id, :string do
+      allow_nil? true
+    end
+
     create_timestamp(:inserted_at)
     update_timestamp(:updated_at)
   end

lib/wanderer_app/api/map_system_structure.ex

@@ -0,0 +1,172 @@
+defmodule WandererApp.Api.MapSystemStructure do
+  @moduledoc """
+  Ash resource representing a structure in a given map system.
+
+  """
+
+  use Ash.Resource,
+    domain: WandererApp.Api,
+    data_layer: AshPostgres.DataLayer
+
+  postgres do
+    repo(WandererApp.Repo)
+    table("map_system_structures_v1")
+  end
+
+  code_interface do
+    define(:all_active, action: :all_active)
+    define(:create, action: :create)
+    define(:update, action: :update)
+
+    define(:by_id,
+      get_by: [:id],
+      action: :read
+    )
+
+    define(:by_system_id,
+      action: :by_system_id,
+      args: [:system_id]
+    )
+  end
+
+  actions do
+    default_accept [
+      :system_id,
+      :solar_system_name,
+      :solar_system_id,
+      :structure_type_id,
+      :structure_type,
+      :character_eve_id,
+      :name,
+      :notes,
+      :owner_name,
+      :owner_ticker,
+      :owner_id,
+      :status,
+      :end_time
+    ]
+
+    defaults [:read, :destroy]
+
+    read :all_active do
+      prepare build(sort: [updated_at: :desc])
+    end
+
+    read :by_system_id do
+      argument :system_id, :string, allow_nil?: false
+      filter(expr(system_id == ^arg(:system_id)))
+    end
+
+    create :create do
+      primary? true
+
+      accept [
+        :system_id,
+        :solar_system_name,
+        :solar_system_id,
+        :structure_type_id,
+        :structure_type,
+        :character_eve_id,
+        :name,
+        :notes,
+        :owner_name,
+        :owner_ticker,
+        :owner_id,
+        :status,
+        :end_time
+      ]
+
+      argument :system_id, :uuid, allow_nil?: false
+
+      change manage_relationship(:system_id, :system,
+        on_lookup: :relate,
+        on_no_match: nil
+      )
+
+    end
+
+    update :update do
+      primary? true
+      require_atomic? false
+
+      accept [
+        :system_id,
+        :solar_system_name,
+        :solar_system_id,
+        :structure_type_id,
+        :structure_type,
+        :character_eve_id,
+        :name,
+        :notes,
+        :owner_name,
+        :owner_ticker,
+        :owner_id,
+        :status,
+        :end_time
+      ]
+
+    end
+
+  end
+
+  attributes do
+    uuid_primary_key :id
+
+    attribute :structure_type_id, :string do
+      allow_nil? false
+    end
+
+    attribute :structure_type, :string do
+      allow_nil? false
+    end
+
+    attribute :character_eve_id, :string do
+      allow_nil? false
+    end
+
+    attribute :solar_system_name, :string do
+      allow_nil? false
+    end
+
+    attribute :solar_system_id, :integer do
+      allow_nil? false
+    end
+
+    attribute :name, :string do
+      allow_nil? false
+    end
+
+    attribute :notes, :string do
+      allow_nil? true
+    end
+
+    attribute :owner_name, :string do
+      allow_nil? true
+    end
+
+    attribute :owner_ticker, :string do
+      allow_nil? true
+    end
+
+    attribute :owner_id, :string do
+      allow_nil? true
+    end
+
+    attribute :status, :string do
+      allow_nil? true
+    end
+
+    attribute :end_time, :utc_datetime_usec do
+      allow_nil? true
+    end
+
+    create_timestamp :inserted_at
+    update_timestamp :updated_at
+  end
+
+  relationships do
+    belongs_to :system, WandererApp.Api.MapSystem do
+      attribute_writable? true
+    end
+  end
+end

lib/wanderer_app/api/user_activity.ex

@@ -95,7 +95,9 @@ defmodule WandererApp.Api.UserActivity do
           :map_acl_member_updated,
           :map_connection_added,
           :map_connection_updated,
-          :map_connection_removed
+          :map_connection_removed,
+          :signatures_added,
+          :signatures_removed
         ]
       )
 
@@ -108,8 +110,6 @@ defmodule WandererApp.Api.UserActivity do
     update_timestamp(:updated_at)
   end
 
-
-
   relationships do
     belongs_to :character, WandererApp.Api.Character do
       allow_nil? true

lib/wanderer_app/env.ex

@@ -1,5 +1,6 @@
 defmodule WandererApp.Env do
   @moduledoc false
+  use Nebulex.Caching
 
   @app :wanderer_app
 
@@ -17,5 +18,25 @@ defmodule WandererApp.Env do
   def corp_wallet, do: get_key(:corp_wallet, "")
   def corp_eve_id, do: get_key(:corp_id, -1)
   def subscription_settings, do: get_key(:subscription_settings)
+
+  @decorate cacheable(
+              cache: WandererApp.Cache,
+              key: "map-connection-auto-expire-hours"
+            )
+  def map_connection_auto_expire_hours, do: get_key(:map_connection_auto_expire_hours)
+
+  @decorate cacheable(
+              cache: WandererApp.Cache,
+              key: "map-connection-auto-eol-hours"
+            )
+  def map_connection_auto_eol_hours, do: get_key(:map_connection_auto_eol_hours)
+
+  @decorate cacheable(
+              cache: WandererApp.Cache,
+              key: "map-connection-eol-expire-timeout-mins"
+            )
+  def map_connection_eol_expire_timeout_mins,
+    do: get_key(:map_connection_eol_expire_timeout_mins)
+
   def get_key(key, default \\ nil), do: Application.get_env(@app, key, default)
 end

lib/wanderer_app/esi/api_client.ex

@@ -31,7 +31,7 @@ defmodule WandererApp.Esi.ApiClient do
   }
 
   @cache_opts [cache: true]
-  @retry_opts [retry: false, retry_log_level: :warning]
+  @retry_opts [max_retries: 1, retry_log_level: :warning]
   @timeout_opts [receive_timeout: :timer.seconds(30)]
   @api_retry_count 1