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

This reverts commit f85317983c.

.env.example

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

.github/workflows/build.yml

@@ -122,9 +122,6 @@ jobs:
     name: 🛠 Build Docker Images
     needs: build
     runs-on: ubuntu-22.04
-    outputs:
-      release-tag: ${{ steps.get-latest-tag.outputs.tag }}
-      release-notes: ${{ steps.get-content.outputs.string }}
     permissions:
       checks: write
       contents: write
@@ -138,7 +135,6 @@ jobs:
       matrix:
         platform:
           - linux/amd64
-          - linux/arm64
     steps:
       - name: Prepare
         run: |
@@ -187,26 +183,15 @@ jobs:
           push: true
           context: .
           file: ./Dockerfile
+          tags: ${{ env.REGISTRY_IMAGE }}:latest,${{ env.REGISTRY_IMAGE }}:${{ steps.get-latest-tag.outputs.tag }}
           labels: ${{ steps.meta.outputs.labels }}
           platforms: ${{ matrix.platform }}
-          outputs: type=image,"name=${{ env.REGISTRY_IMAGE }}",push-by-digest=true,name-canonical=true,push=true
           build-args: |
             MIX_ENV=prod
             BUILD_METADATA=${{ steps.meta.outputs.json }}
 
-      - name: Export digest
-        run: |
-          mkdir -p /tmp/digests
-          digest="${{ steps.build.outputs.digest }}"
-          touch "/tmp/digests/${digest#sha256:}"
-
-      - name: Upload digest
-        uses: actions/upload-artifact@v4
-        with:
-          name: digests-${{ env.PLATFORM_PAIR }}
-          path: /tmp/digests/*
-          if-no-files-found: error
-          retention-days: 1
+      - name: Image digest
+        run: echo ${{ steps.build.outputs.digest }}
 
       - uses: markpatterson27/markdown-to-output@v1
         id: extract-changelog
@@ -226,54 +211,16 @@ jobs:
           maxLength: 500
           truncationSymbol: "…"
 
-  merge:
-    runs-on: ubuntu-latest
-    needs:
-      - docker
-    steps:
-      - name: Download digests
-        uses: actions/download-artifact@v4
+      - name: Discord Webhook Action
+        uses: tsickert/discord-webhook@v5.3.0
         with:
-          path: /tmp/digests
-          pattern: digests-*
-          merge-multiple: true
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.WANDERER_DOCKER_USER }}
-          password: ${{ secrets.WANDERER_DOCKER_PASSWORD }}
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Docker meta
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: |
-            ${{ env.REGISTRY_IMAGE }}
-          tags: |
-            type=ref,event=branch
-            type=ref,event=pr
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-
-      - name: Create manifest list and push
-        working-directory: /tmp/digests
-        run: |
-          docker buildx imagetools create --tag ${{ env.REGISTRY_IMAGE }}:latest \
-            ${{ env.REGISTRY_IMAGE }}:${{ needs.docker.outputs.release-tag }} \
-            $(printf '${{ env.REGISTRY_IMAGE }}@sha256:%s ' *)
-
-      - name: Inspect image
-        run: |
-          docker buildx imagetools inspect ${{ env.REGISTRY_IMAGE }}:${{ needs.docker.outputs.release-tag }}
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          content: ${{ steps.get-content.outputs.string }}
 
   create-release:
     name: 🏷 Create Release
     runs-on: ubuntu-22.04
-    needs: [docker, merge]
+    needs: docker
     if: ${{ github.ref == 'refs/heads/main' && github.event_name == 'push' }}
     steps:
       - name: ⬇️ Checkout repo
@@ -281,11 +228,17 @@ jobs:
         with:
           fetch-depth: 0
 
+      - name: Get Release Tag
+        id: get-latest-tag
+        uses: "WyriHaximus/github-action-get-previous-tag@v1"
+        with:
+          fallback: 1.0.0
+
       - name: 🏷 Create Draft Release
         uses: softprops/action-gh-release@v1
         with:
-          tag_name: ${{ needs.docker.outputs.release-tag }}
-          name: Release ${{ needs.docker.outputs.release-tag }}
+          tag_name: ${{ steps.get-latest-tag.outputs.tag }}
+          name: Release ${{ steps.get-latest-tag.outputs.tag }}
           body: |
             ## Info
             Commit ${{ github.sha }} was deployed to `staging`. [See code diff](${{ github.event.compare }}).
@@ -295,9 +248,3 @@ jobs:
             ## How to Promote?
             In order to promote this to prod, edit the draft and press **"Publish release"**.
           draft: true
-
-      - name: Discord Webhook Action
-        uses: tsickert/discord-webhook@v5.3.0
-        with:
-          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
-          content: ${{ needs.docker.outputs.release-notes }}

Dockerfile

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

assets/css/app.css

@@ -3,8 +3,6 @@
 @import 'primereact/resources/themes/arya-blue/theme.css' layer(primereact);
 /*@import 'primereact/resources/themes/bootstrap4-dark-blue/theme.css' layer(primereact);*/
 
-@import '../js/hooks/Mapper/components/map/styles/index.scss';
-
 @layer tailwind-base {
   @tailwind base;
 }

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect, useMemo } from 'react';
+import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect } from 'react';
 import ReactFlow, {
   Background,
   ConnectionMode,
@@ -16,26 +16,25 @@ import ReactFlow, {
 } from 'reactflow';
 import 'reactflow/dist/style.css';
 import classes from './Map.module.scss';
+import './styles/neon-theme.scss';
+import './styles/eve-common.scss';
 import { MapProvider, useMapState } from './MapProvider';
-import { useEdgesState, useMapHandlers, useNodesState, useUpdateNodes } from './hooks';
+import { useNodesState, useEdgesState, useMapHandlers, useUpdateNodes } from './hooks';
 import { MapHandlers, OutCommand, OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers.ts';
 import {
   ContextMenuConnection,
   ContextMenuRoot,
   SolarSystemEdge,
-  SolarSystemNodeDefault,
-  SolarSystemNodeTheme,
+  SolarSystemNode,
   useContextMenuConnectionHandlers,
   useContextMenuRootHandlers,
 } from './components';
-import { wrapNode } from './utils/wrapNode';
 import { OnMapAddSystemCallback, OnMapSelectionChange } from './map.types';
 import { SESSION_KEY } from '@/hooks/Mapper/constants.ts';
 import { SolarSystemConnection, SolarSystemRawType } from '@/hooks/Mapper/types';
 import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
 import { NodeSelectionMouseHandler } from '@/hooks/Mapper/components/contexts/types.ts';
 import clsx from 'clsx';
-import { useBackgroundVars } from './hooks/useBackgroundVars';
 
 const DEFAULT_VIEW_PORT = { zoom: 1, x: 0, y: 0 };
 
@@ -77,8 +76,11 @@ const initialEdges = [
   },
 ];
 
-
-
+const nodeTypes = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  custom: SolarSystemNode,
+} as never;
 
 const edgeTypes = {
   floating: SolarSystemEdge,
@@ -99,7 +101,6 @@ interface MapCompProps {
   isThickConnections?: boolean;
   isShowBackgroundPattern?: boolean;
   isSoftBackground?: boolean;
-  theme?: string;
 }
 
 const MapComp = ({
@@ -116,30 +117,17 @@ const MapComp = ({
   isThickConnections,
   isShowBackgroundPattern,
   isSoftBackground,
-  theme,
   onAddSystem,
 }: MapCompProps) => {
   const { 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 onConnect: OnConnect = useCallback(
     params => {
@@ -241,7 +229,7 @@ const MapComp = ({
 
   return (
     <>
-      <div className={clsx(classes.MapRoot, { [classes.BackgroundAlternateColor]: isSoftBackground })}>
+      <div className={clsx(classes.MapRoot, { ['bg-neutral-900']: isSoftBackground })}>
         <ReactFlow
           nodes={nodes}
           edges={edges}
@@ -261,10 +249,6 @@ const MapComp = ({
           onConnectStart={() => update({ isConnecting: true })}
           onConnectEnd={() => update({ isConnecting: false })}
           onNodeMouseEnter={(_, node) => update({ hoverNodeId: node.id })}
-          onPaneClick={event => {
-            event.preventDefault();
-            event.stopPropagation();
-          }}
           // onKeyUp=
           onNodeMouseLeave={() => update({ hoverNodeId: null })}
           onEdgeClick={(_, t) => {
@@ -292,7 +276,7 @@ const MapComp = ({
           selectionMode={SelectionMode.Partial}
         >
           {isShowMinimap && <MiniMap pannable zoomable ariaLabel="Mini map" className={minimapClasses} />}
-          {isShowBackgroundPattern && <Background variant={variant} gap={gap} size={size} color={color} />}
+          {isShowBackgroundPattern && <Background />}
         </ReactFlow>
         {/* <button className="z-auto btn btn-primary absolute top-20 right-20" onClick={handleGetPassages}>
           Test // DON NOT REMOVE

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

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

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

@@ -1,38 +1,14 @@
-@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
+@import "@/hooks/Mapper/components/map/styles/neon-variables";
 
-.EdgePathBack {
-  fill: none;
-  stroke: #80a5c5;
-  stroke-width: 3px;
-
-  &.TimeCrit {
-    stroke: #f11ab2;
-    stroke-width: 4px;
-  }
-
-  &.Hovered {
-    stroke: #b5c8d9;
-
-    &.TimeCrit {
-      stroke: #ef7dce;
-    }
-  }
-
-  &.Tick {
-    stroke-width: 5px;
-
-    &.TimeCrit {
-      stroke-width: 6px;
-    }
-  }
-
-  &.Gate {
-    stroke: #9aff40;
+.react-flow__edge.selected {
+  .EdgePathBack {
+    stroke: $pastel-yellow;
   }
 }
 
 .EdgePathFront {
   fill: none;
+
   stroke: #2c3844;
   stroke-width: 2px;
 
@@ -78,29 +54,46 @@
   }
 }
 
+.EdgePathBack {
+  fill: none;
+
+  stroke: #80a5c5;
+  stroke-width: 3px;
+
+  &.TimeCrit {
+    stroke: #f11ab2;
+    stroke-width: 4px;
+  }
+
+  &.Hovered {
+    stroke: #b5c8d9;
+
+    &.TimeCrit {
+      stroke: #ef7dce;
+    }
+  }
+
+  &.Tick {
+    stroke-width: 5px;
+
+    &.TimeCrit {
+      stroke-width: 6px;
+    }
+  }
+
+  &.Gate {
+    stroke: #9aff40;
+  }
+
+}
+
 .ClickPath {
   fill: none;
   stroke: none;
   stroke-width: 8px;
 }
 
-.Handle {
-  border: 1px solid var(--pastel-blue);
-  width: 5px;
-  height: 5px;
-  z-index: 1001;
-
-  &.Tick {
-    width: 7px;
-    height: 7px;
-  }
-
-  &.Right {
-    margin-left: 0px;
-  }
-}
-
-.LinkLabel {
+.LinkLabel{
   font-size: 9px;
   line-height: 10px;
   padding: 2px 4px;
@@ -116,3 +109,22 @@
   height: 8px;
   font-size: 8px;
 }
+
+.Handle {
+  min-width: initial;
+  min-height: initial;
+  border: 1px solid #5a7d9a;
+  width: 5px;
+  height: 5px;
+  z-index: 1001;
+
+  &.Tick {
+    width: 7px;
+    height: 7px;
+
+    &.Right {
+      margin-left: 0px;
+    }
+  }
+}
+

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

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

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

@@ -85,7 +85,7 @@ $tooltip-bg: #202020; // Dark background for tooltips
     box-shadow: 0 0 10px #9a1af1c2;
   }
 
-  &.tooltip {
+  .tooltip {
     background-color: $tooltip-bg;
     color: $text-color;
     padding: 5px 10px;
@@ -94,59 +94,42 @@ $tooltip-bg: #202020; // Dark background for tooltips
   }
 
   &.eve-system-status-home {
-    border: 1px solid var(--eve-solar-system-status-color-home-dark30);
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-home),
-      transparent
-    );
+    border: 1px solid darken($eve-solar-system-status-color-home, 30%);
+    background-image: linear-gradient(275deg, $eve-solar-system-status-friendly, transparent);
+
     &.selected {
-      border-color: var(--eve-solar-system-status-color-home);
+      border-color: $eve-solar-system-status-color-home;
     }
   }
 
   &.eve-system-status-friendly {
-    border: 1px solid var(--eve-solar-system-status-color-friendly-dark20);
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-friendly-dark30),
-      transparent
-    );
+    border: 1px solid darken($eve-solar-system-status-color-friendly, 20%);
+    background-image: linear-gradient(275deg, darken($eve-solar-system-status-friendly, 30%), transparent);
+
     &.selected {
-      border-color: var(--eve-solar-system-status-color-friendly-dark5);
+      border-color: darken($eve-solar-system-status-color-friendly, 5%);
     }
   }
 
   &.eve-system-status-lookingFor {
-    border: 1px solid var(--eve-solar-system-status-color-lookingFor-dark15);
+    border: 1px solid darken($eve-solar-system-status-color-lookingFor, 15%);
     background-image: linear-gradient(275deg, #45ff8f2f, #457fff2f);
+
     &.selected {
       border-color: $pastel-pink;
     }
   }
 
   &.eve-system-status-warning {
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-warning),
-      transparent
-    );
+    background-image: linear-gradient(275deg, $eve-solar-system-status-warning, transparent);
   }
 
   &.eve-system-status-dangerous {
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-dangerous),
-      transparent
-    );
+    background-image: linear-gradient(275deg, $eve-solar-system-status-dangerous, transparent);
   }
 
   &.eve-system-status-target {
-    background-image: linear-gradient(
-      275deg,
-      var(--eve-solar-system-status-target),
-      transparent
-    );
+    background-image: linear-gradient(275deg, $eve-solar-system-status-target, transparent);
   }
 }
 
@@ -259,10 +242,10 @@ $tooltip-bg: #202020; // Dark background for tooltips
 
   .TagTitle {
     font-size: 11px;
-    font-weight: medium;
+    font-weight: bold;
     text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
 
-    color: var(--rf-tag-color, #38BDF8);
+    color: #ffb01d;
   }
 
   /* Firefox kostyl */

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

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

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

@@ -1,227 +0,0 @@
-import { memo } from 'react';
-import { Handle, Position } from 'reactflow';
-import clsx from 'clsx';
-
-import classes from './SolarSystemNodeDefault.module.scss';
-import { PrimeIcons } from 'primereact/api';
-
-import { useSolarSystemNode } from '../../hooks/useSolarSystemNode';
-
-import {
-  MARKER_BOOKMARK_BG_STYLES,
-  STATUS_CLASSES,
-  EFFECT_BACKGROUND_STYLES,
-} from '@/hooks/Mapper/components/map/constants';
-import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/WormholeClassComp';
-import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
-
-export const SolarSystemNodeDefault = memo(props => {
-  const {
-    charactersInSystem,
-    classTitle,
-    classTitleColor,
-    customName,
-    effectName,
-    hasUserCharacters,
-    hubs,
-    visible,
-    labelCustom,
-    labelsInfo,
-    locked,
-    isShattered,
-    isThickConnections,
-    isWormhole,
-    killsCount,
-    killsActivityType,
-    regionClass,
-    regionName,
-    status,
-    selected,
-    tag,
-    showHandlers,
-    systemName,
-    sortedStatics,
-    solarSystemId,
-    unsplashedLeft,
-    unsplashedRight,
-    dbClick: handleDbClick,
-  } = useSolarSystemNode(props);
-
-  return (
-    <>
-      {visible && (
-        <div className={classes.Bookmarks}>
-          {labelCustom !== '' && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
-              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] ">{labelCustom}</span>
-            </div>
-          )}
-
-          {isShattered && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered)}>
-              <span className={clsx('pi pi-chart-pie', classes.icon)} />
-            </div>
-          )}
-
-          {killsCount && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[killsActivityType!])}>
-              <div className={clsx(classes.BookmarkWithIcon)}>
-                <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
-                <span className={clsx(classes.text)}>{killsCount}</span>
-              </div>
-            </div>
-          )}
-
-          {labelsInfo.map(x => (
-            <div key={x.id} className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}>
-              {x.shortName}
-            </div>
-          ))}
-        </div>
-      )}
-
-      <div
-        className={clsx(classes.RootCustomNode, regionClass && classes[regionClass], classes[STATUS_CLASSES[status]], {
-          [classes.selected]: selected,
-        })}
-      >
-        {visible && (
-          <>
-            <div className={classes.HeadRow}>
-              <div className={clsx(classes.classTitle, classTitleColor, '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]')}>
-                {classTitle ?? '-'}
-              </div>
-
-              {tag != null && tag !== '' && (
-                <div className={clsx(classes.TagTitle, 'text-sky-400 font-medium')}>{tag}</div>
-              )}
-
-              <div
-                className={clsx(
-                  classes.classSystemName,
-                  '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] flex-grow overflow-hidden text-ellipsis whitespace-nowrap font-sans',
-                )}
-              >
-                {systemName}
-              </div>
-
-              {isWormhole && (
-                <div className={classes.statics}>
-                  {sortedStatics.map(whClass => (
-                    <WormholeClassComp key={whClass} id={whClass} />
-                  ))}
-                </div>
-              )}
-
-              {effectName !== null && isWormhole && (
-                <div className={clsx(classes.effect, EFFECT_BACKGROUND_STYLES[effectName])} />
-              )}
-            </div>
-
-            <div className={clsx(classes.BottomRow, 'flex items-center justify-between')}>
-              {customName && (
-                <div className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-blue-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5">
-                  {customName}
-                </div>
-              )}
-
-              {!isWormhole && !customName && (
-                <div className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-stone-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5">
-                  {regionName}
-                </div>
-              )}
-
-              {isWormhole && !customName && <div />}
-
-              <div className="flex items-center justify-end">
-                <div className="flex gap-1 items-center">
-                  {locked && <i className={PrimeIcons.LOCK} style={{ fontSize: '0.45rem', fontWeight: 'bold' }} />}
-
-                  {hubs.includes(solarSystemId.toString()) && (
-                    <i className={PrimeIcons.MAP_MARKER} style={{ fontSize: '0.45rem', fontWeight: 'bold' }} />
-                  )}
-
-                  {charactersInSystem.length > 0 && (
-                    <div
-                      className={clsx(classes.localCounter, {
-                        ['text-amber-300']: hasUserCharacters,
-                      })}
-                    >
-                      <i className="pi pi-users" style={{ fontSize: '0.50rem' }} />
-                      <span className="font-sans">{charactersInSystem.length}</span>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-
-      {visible && (
-        <>
-          {unsplashedLeft.length > 0 && (
-            <div className={classes.Unsplashed}>
-              {unsplashedLeft.map(sig => (
-                <UnsplashedSignature key={sig.sig_id} signature={sig} />
-              ))}
-            </div>
-          )}
-
-          {unsplashedRight.length > 0 && (
-            <div className={clsx(classes.Unsplashed, classes['Unsplashed--right'])}>
-              {unsplashedRight.map(sig => (
-                <UnsplashedSignature key={sig.sig_id} signature={sig} />
-              ))}
-            </div>
-          )}
-        </>
-      )}
-
-      <div onMouseDownCapture={handleDbClick} className={classes.Handlers}>
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleTop, {
-            [classes.selected]: selected,
-            [classes.Tick]: isThickConnections,
-          })}
-          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Top}
-          id="a"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleRight, {
-            [classes.selected]: selected,
-            [classes.Tick]: isThickConnections,
-          })}
-          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Right}
-          id="b"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleBottom, {
-            [classes.selected]: selected,
-            [classes.Tick]: isThickConnections,
-          })}
-          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Bottom}
-          id="c"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleLeft, {
-            [classes.selected]: selected,
-            [classes.Tick]: isThickConnections,
-          })}
-          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Left}
-          id="d"
-        />
-      </div>
-    </>
-  );
-});
-
-SolarSystemNodeDefault.displayName = 'SolarSystemNodeDefault';

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

@@ -1,407 +0,0 @@
-@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
-
-$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
-
-.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: $pastel-pink;
-    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-home),
-      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: $pastel-pink;
-    }
-  }
-
-  &.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
-    );
-  }
-}
-
-.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;
-}
-
-.HeadRow {
-  display: flex;
-  align-items: center;
-  gap: 3px;
-  font-size: 11px;
-  line-height: 14px;
-  font-weight: 500;
-  position: relative;
-  top: 1px;
-
-  .classTitle {
-    font-size: 11px;
-    font-weight: bold;
-    text-shadow: 0 0 2px rgb(0 0 0 / 73%);
-  }
-
-  .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;
-    }
-  }
-
-  .classSystemName {
-    font-family: inherit !important;
-    font-weight: bold;
-  }
-
-  .solarSystemName {
-  }
-}
-
-.BottomRow {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 19px;
-
-  .regionName {
-    color: var(--rf-region-name, #D6D3D1)
-  }
-
-  .customName {
-    color: var(--rf-custom-name, #93C5FD)
-  }
-
-  .localCounter {
-    display: flex;
-    //align-items: center;
-    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;
-    }
-  }
-}

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

@@ -1,235 +0,0 @@
-import { memo } from 'react';
-import { Handle, Position } from 'reactflow';
-import clsx from 'clsx';
-
-import classes from './SolarSystemNodeTheme.module.scss';
-import { PrimeIcons } from 'primereact/api';
-
-import { useSolarSystemNode } from '../../hooks/useSolarSystemNode';
-
-import {
-  MARKER_BOOKMARK_BG_STYLES,
-  STATUS_CLASSES,
-  EFFECT_BACKGROUND_STYLES,
-} from '@/hooks/Mapper/components/map/constants';
-import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/WormholeClassComp';
-import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
-
-export const SolarSystemNodeTheme = memo(props => {
-  const {
-    charactersInSystem,
-    classTitle,
-    classTitleColor,
-    customName,
-    effectName,
-    hasUserCharacters,
-    hubs,
-    visible,
-    labelCustom,
-    labelsInfo,
-    locked,
-    isShattered,
-    isThickConnections,
-    isWormhole,
-    killsCount,
-    killsActivityType,
-    regionClass,
-    regionName,
-    status,
-    selected,
-    tag,
-    showHandlers,
-    systemName,
-    sortedStatics,
-    solarSystemId,
-    unsplashedLeft,
-    unsplashedRight,
-    dbClick: handleDbClick,
-  } = useSolarSystemNode(props);
-
-  return (
-    <>
-      {visible && (
-        <div className={classes.Bookmarks}>
-          {labelCustom !== '' && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
-              <span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] ">{labelCustom}</span>
-            </div>
-          )}
-
-          {isShattered && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered)}>
-              <span className={clsx('pi pi-chart-pie', classes.icon)} />
-            </div>
-          )}
-
-          {killsCount && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[killsActivityType!])}>
-              <div className={clsx(classes.BookmarkWithIcon)}>
-                <span className={clsx(PrimeIcons.BOLT, classes.icon)} />
-                <span className={clsx(classes.text)}>{killsCount}</span>
-              </div>
-            </div>
-          )}
-
-          {labelsInfo.map(x => (
-            <div key={x.id} className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[x.id])}>
-              {x.shortName}
-            </div>
-          ))}
-        </div>
-      )}
-
-      <div
-        className={clsx(classes.RootCustomNode, regionClass && classes[regionClass], classes[STATUS_CLASSES[status]], {
-          [classes.selected]: selected,
-        })}
-      >
-        {visible && (
-          <>
-            <div className={classes.HeadRow}>
-              <div className={clsx(classes.classTitle, classTitleColor, '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]')}>
-                {classTitle ?? '-'}
-              </div>
-
-              {tag != null && tag !== '' && <div className={clsx(classes.TagTitle)}>{tag}</div>}
-
-              <div
-                className={clsx(
-                  classes.classSystemName,
-                  '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] flex-grow overflow-hidden text-ellipsis whitespace-nowrap',
-                )}
-              >
-                {systemName}
-              </div>
-
-              {isWormhole && (
-                <div className={classes.statics}>
-                  {sortedStatics.map(whClass => (
-                    <WormholeClassComp key={whClass} id={whClass} />
-                  ))}
-                </div>
-              )}
-
-              {effectName !== null && isWormhole && (
-                <div className={clsx(classes.effect, EFFECT_BACKGROUND_STYLES[effectName])} />
-              )}
-            </div>
-
-            <div className={clsx(classes.BottomRow, 'flex items-center justify-between')}>
-              {customName && (
-                <div
-                  className={clsx(
-                    classes.CustomName,
-                    '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] whitespace-nowrap overflow-hidden text-ellipsis mr-0.5',
-                  )}
-                >
-                  {customName}
-                </div>
-              )}
-
-              {!isWormhole && !customName && (
-                <div
-                  className={clsx(
-                    classes.RegionName,
-                    '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] whitespace-nowrap overflow-hidden text-ellipsis mr-0.5',
-                  )}
-                >
-                  {regionName}
-                </div>
-              )}
-
-              {isWormhole && !customName && <div />}
-
-              <div className="flex items-center justify-end">
-                <div className="flex gap-1 items-center">
-                  {locked && <i className={PrimeIcons.LOCK} style={{ fontSize: '0.45rem', fontWeight: 'bold' }} />}
-
-                  {hubs.includes(solarSystemId.toString()) && (
-                    <i className={PrimeIcons.MAP_MARKER} style={{ fontSize: '0.45rem', fontWeight: 'bold' }} />
-                  )}
-
-                  {charactersInSystem.length > 0 && (
-                    <div
-                      className={clsx(classes.localCounter, {
-                        [classes.hasUserCharacters]: hasUserCharacters,
-                      })}
-                    >
-                      <i className="pi pi-users" style={{ fontSize: '0.50rem' }} />
-                      <span className="font-sans">{charactersInSystem.length}</span>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-
-      {visible && (
-        <>
-          {unsplashedLeft.length > 0 && (
-            <div className={classes.Unsplashed}>
-              {unsplashedLeft.map(sig => (
-                <UnsplashedSignature key={sig.sig_id} signature={sig} />
-              ))}
-            </div>
-          )}
-
-          {unsplashedRight.length > 0 && (
-            <div className={clsx(classes.Unsplashed, classes['Unsplashed--right'])}>
-              {unsplashedRight.map(sig => (
-                <UnsplashedSignature key={sig.sig_id} signature={sig} />
-              ))}
-            </div>
-          )}
-        </>
-      )}
-
-      <div onMouseDownCapture={handleDbClick} className={classes.Handlers}>
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleTop, {
-            [classes.selected]: selected,
-            [classes.Tick]: isThickConnections,
-          })}
-          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Top}
-          id="a"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleRight, {
-            [classes.selected]: selected,
-            [classes.Tick]: isThickConnections,
-          })}
-          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Right}
-          id="b"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleBottom, {
-            [classes.selected]: selected,
-            [classes.Tick]: isThickConnections,
-          })}
-          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Bottom}
-          id="c"
-        />
-        <Handle
-          type="source"
-          className={clsx(classes.Handle, classes.HandleLeft, {
-            [classes.selected]: selected,
-            [classes.Tick]: isThickConnections,
-          })}
-          style={{ visibility: showHandlers ? 'visible' : 'hidden' }}
-          position={Position.Left}
-          id="d"
-        />
-      </div>
-    </>
-  );
-});
-
-SolarSystemNodeTheme.displayName = 'SolarSystemNodeTheme';

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

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

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

@@ -9,7 +9,7 @@
     width: 13px;
     height: 4px;
     border-radius: 4px;
-    color: var(--text-color);
+    color: #ffffff;
     font-size: 8px;
     text-align: center;
     font-weight: bolder;

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

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

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

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

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

@@ -61,7 +61,7 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
               setTimeout(() => mapAddSystems(data as CommandAddSystems), 100);
               break;
             case Commands.updateSystems:
-              setTimeout(() => mapUpdateSystems(data as CommandUpdateSystems), 100);
+              mapUpdateSystems(data as CommandUpdateSystems);
               break;
             case Commands.removeSystems:
               setTimeout(() => removeSystems(data as CommandRemoveSystems), 100);

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

@@ -1,216 +0,0 @@
-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';
-import { useDoubleClick } from '@/hooks/Mapper/hooks/useDoubleClick';
-import { REGIONS_MAP, Spaces } from '@/hooks/Mapper/constants';
-import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace';
-import { getSystemClassStyles, prepareUnsplashedChunks } from '@/hooks/Mapper/components/map/helpers';
-import { sortWHClasses } from '@/hooks/Mapper/helpers';
-import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager';
-import { OutCommand } from '@/hooks/Mapper/types';
-import { LABELS_INFO, LABELS_ORDER } from '@/hooks/Mapper/components/map/constants';
-
-function getActivityType(count: number) {
-  if (count <= 5) return 'activityNormal';
-  if (count <= 30) return 'activityWarn';
-  return 'activityDanger';
-}
-
-const SpaceToClass: Record<string, string> = {
-  [Spaces.Caldari]: 'Caldaria',
-  [Spaces.Matar]: 'Mataria',
-  [Spaces.Amarr]: 'Amarria',
-  [Spaces.Gallente]: 'Gallente',
-};
-
-function sortedLabels(labels: string[]) {
-  if (!labels) return [];
-  return LABELS_ORDER.filter(x => labels.includes(x)).map(x => LABELS_INFO[x]);
-}
-
-export function useSolarSystemNode(props: any) {
-  const { data, selected, id } = props;
-  const {
-    system_static_info,
-    system_signatures,
-    locked,
-    name,
-    tag,
-    status,
-    labels,
-    temporary_name,
-    linked_sig_eve_id: linkedSigEveId = '',
-  } = data;
-
-  const {
-    system_class,
-    security,
-    class_title,
-    solar_system_id,
-    statics,
-    effect_name,
-    region_name,
-    region_id,
-    is_shattered,
-    solar_system_name,
-  } = system_static_info;
-
-  // Global map state
-  const {
-    interfaceSettings,
-    data: { systemSignatures: mapSystemSignatures },
-  } = useMapRootState();
-
-  const { isShowUnsplashedSignatures } = interfaceSettings;
-  const isTempSystemNameEnabled = useMapGetOption('show_temp_system_name') === 'true';
-  const isShowLinkedSigId = useMapGetOption('show_linked_signature_id') === 'true';
-  const isShowLinkedSigIdTempName = useMapGetOption('show_linked_signature_id_temp_name') === 'true';
-
-  const {
-    data: {
-      characters,
-      presentCharacters,
-      wormholesData,
-      hubs,
-      kills,
-      userCharacters,
-      isConnecting,
-      hoverNodeId,
-      visibleNodes,
-      showKSpaceBG,
-      isThickConnections,
-    },
-    outCommand,
-  } = useMapState();
-
-  // 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
-  }, [characters, presentCharacters, solar_system_id]);
-
-  const isWormhole = isWormholeSpace(system_class);
-
-  const classTitleColor = useMemo(
-    () => getSystemClassStyles({ systemClass: system_class, security }),
-    [security, system_class],
-  );
-
-  const sortedStatics = useMemo(() => sortWHClasses(wormholesData, statics), [wormholesData, statics]);
-
-  const linkedSigPrefix = useMemo(() => (linkedSigEveId ? linkedSigEveId.split('-')[0] : null), [linkedSigEveId]);
-
-  const labelsManager = useMemo(() => new LabelsManager(labels ?? ''), [labels]);
-  const labelsInfo = useMemo(() => sortedLabels(labelsManager.list), [labelsManager]);
-  const labelCustom = useMemo(() => {
-    if (isShowLinkedSigId && linkedSigPrefix) {
-      return labelsManager.customLabel ? `${linkedSigPrefix}・${labelsManager.customLabel}` : linkedSigPrefix;
-    }
-    return labelsManager.customLabel;
-  }, [linkedSigPrefix, isShowLinkedSigId, labelsManager]);
-
-  const killsCount = useMemo(() => kills[solar_system_id] ?? null, [kills, solar_system_id]);
-  const killsActivityType = killsCount ? getActivityType(killsCount) : null;
-
-  const hasUserCharacters = useMemo(() => {
-    return charactersInSystem.some(x => userCharacters.includes(x.eve_id));
-  }, [charactersInSystem, userCharacters]);
-
-  const dbClick = useDoubleClick(() => {
-    outCommand({
-      type: OutCommand.openSettings,
-      data: { system_id: solar_system_id.toString() },
-    });
-  });
-
-  const showHandlers = isConnecting || hoverNodeId === id;
-
-  const space = showKSpaceBG ? REGIONS_MAP[region_id] : '';
-  const regionClass = showKSpaceBG ? SpaceToClass[space] : null;
-
-  const temporaryName = useMemo(() => {
-    if (!isTempSystemNameEnabled) {
-      return '';
-    }
-
-    if (isShowLinkedSigIdTempName) {
-      return temporary_name ? `${linkedSigPrefix}・${temporary_name}` : linkedSigPrefix;
-    }
-
-    return temporary_name;
-  }, [isShowLinkedSigIdTempName, isTempSystemNameEnabled, linkedSigPrefix, 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);
-
-  const [unsplashedLeft, unsplashedRight] = useMemo(() => {
-    if (!isShowUnsplashedSignatures) {
-      return [[], []];
-    }
-    return prepareUnsplashedChunks(
-      systemSignatures
-        .filter(s => s.group === 'Wormhole' && !s.linked_system)
-        .map(s => ({
-          eve_id: s.eve_id,
-          type: s.type,
-          custom_info: s.custom_info,
-        })),
-    );
-  }, [isShowUnsplashedSignatures, systemSignatures]);
-
-  const nodeVars = {
-    // original props
-    id,
-    selected,
-    // computed
-    visible,
-    isWormhole,
-    classTitleColor,
-    killsCount,
-    killsActivityType,
-    hasUserCharacters,
-    showHandlers,
-    regionClass,
-    systemName,
-    customName,
-    labelCustom,
-    isShattered: is_shattered,
-    tag,
-    status,
-    labelsInfo,
-    dbClick,
-    sortedStatics,
-    effectName: effect_name,
-    regionName: region_name,
-    solarSystemId: solar_system_id,
-    solarSystemName: solar_system_name,
-    locked,
-    hubs,
-    name: name,
-    isConnecting,
-    hoverNodeId,
-    charactersInSystem,
-    unsplashedLeft,
-    unsplashedRight,
-    isThickConnections,
-    classTitle: class_title,
-    temporaryName: temporary_name,
-  };
-
-  return nodeVars;
-}

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

@@ -1,31 +0,0 @@
-@import './eve-common-variables';
-@import './eve-common';
-
-.default-theme {
-  --rf-bg-color: #0C0A09;
-  --rf-soft-bg-color: #171717;
-
-  --rf-node-bg-color: #202020;
-  --rf-node-soft-bg-color: #202020;
-  --rf-text-color: #ffffff;
-  --rf-tag-color:  #38BDF8;
-  --rf-region-name: #D6D3D1;
-  --rf-custom-name: #93C5FD;
-
-
-  --rf-bg-variant: "dots";
-  --rf-bg-gap: 15;
-  --rf-bg-size: 1;
-  --rf-bg-pattern-color: #81818a;
-
-  --pastel-blue: #5a7d9a;
-  --pastel-pink: #d291bc;
-  --pastel-green: #88b04b;
-  --pastel-yellow: #ffdd59;
-
-  --dark-bg: #2d2d2d;
-  --text-color: #ffffff;
-  --tooltip-bg: #202020;
-
-  
-}

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

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

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

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

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

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

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

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

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

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

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

@@ -1,51 +0,0 @@
-
-@import './eve-common-variables';
-@import './eve-common';
-@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap');
-
-.pathfinder-theme {
-  --rf-bg-color: #000000;
-  --rf-soft-bg-color: #282828;
-
-  --rf-node-bg-color: #202020;
-  --rf-node-soft-bg-color: #313335;
-  --rf-node-font-weight: bold;
-  --rf-text-color: #adadad;
-  --rf-region-name: var(--rf-text-color);
-  --rf-custom-name: var(--rf-text-color);
-
-  --tooltip-bg: #202020;
-
-  --rf-bg-variant: "lines";
-  --rf-bg-gap: 32;
-  --rf-bg-size: 1;
-  --rf-bg-pattern-color: #313131;
-
-  --eve-effect-pulsar: #428bca;
-  --eve-effect-magnetar: #e06fdf;
-  --eve-effect-wolfRayet: #e28a0d;
-  --eve-effect-blackHole: #000000;
-  --eve-effect-cataclysmicVariable: #ffffbb;
-  --eve-effect-redGiant: #d9534f;
-
-  --eve-wh-type-color-high: #5cb85c;
-  --eve-wh-type-color-low: #e28a0d;
-  --eve-wh-type-color-null: #d9534f;
-  --eve-wh-type-color-c1: #428bca;
-  --eve-wh-type-color-c2: #428bca;
-  --eve-wh-type-color-c3: #e28a0d;
-  --eve-wh-type-color-c4: #e28a0d;
-  --eve-wh-type-color-c5: #d9534f;
-  --eve-wh-type-color-c6: #d9534f;
-  --eve-wh-type-color-c13: #7986cb;
-  --eve-wh-type-color-drifter: #44aa82;
-
-
-  --rf-node-font-weight: bold;
-  --rf-node-line-height: normal;
-  --rf-node-font-family: 'Oxygen', sans-serif;
-  --rf-node-text-color: var(--pf-text-color);
-
-  --rf-tag-color: #fbbf24;
-  --rf-has-user-characters: #5cb85c;
-}

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,59 +1,74 @@
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
-import { useMemo, useState } from 'react';
+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 { WindowManager } from '@/hooks/Mapper/components/ui-kit/WindowManager';
-import { WindowProps } from '@/hooks/Mapper/components/ui-kit/WindowManager/types.ts';
-import { CURRENT_WINDOWS_VERSION, DEFAULT_WIDGETS } from '@/hooks/Mapper/components/mapInterface/constants.tsx';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+// import { debounce } from 'lodash/debounce';
 
-type WindowsLS = {
-  windows: WindowProps[];
-  version: number;
-};
+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: WindowProps[]) => {
+const saveWindowsToLS = (toSaveItems: WidgetGridItem[]) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const out = toSaveItems.map(({ content, ...rest }) => rest);
-  localStorage.setItem(SESSION_KEY.windows, JSON.stringify({ version: CURRENT_WINDOWS_VERSION, windows: out }));
+  const out = toSaveItems.map(({ item, ...rest }) => rest);
+  localStorage.setItem(SESSION_KEY.windows, JSON.stringify(out));
 };
 
-const restoreWindowsFromLS = (): WindowProps[] => {
+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_WIDGETS;
-  }
-
-  const { version, windows } = JSON.parse(raw) as WindowsLS;
-  if (!version || CURRENT_WINDOWS_VERSION > version) {
-    return DEFAULT_WIDGETS;
+    return DEFAULT_WINDOWS;
   }
 
   // eslint-disable-next-line no-debugger
-  const out = (windows as Omit<WindowProps, 'content'>[])
-    .filter(x => DEFAULT_WIDGETS.find(def => def.id === x.id))
+  const out = (JSON.parse(raw) as Omit<WidgetGridItem, 'item'>[])
+    .filter(x => DEFAULT_WINDOWS.find(def => def.name === x.name))
     .map(x => {
-      const content = DEFAULT_WIDGETS.find(def => def.id === x.id)?.content;
-      return { ...x, content: content! };
+      const windowItem = DEFAULT_WINDOWS.find(def => def.name === x.name)?.item;
+      return { ...x, item: windowItem! };
     });
 
   return out;
 };
 
 export const MapInterface = () => {
-  const [items, setItems] = useState<WindowProps[]>(restoreWindowsFromLS);
-  const { windowsVisible } = useMapRootState();
-
-  const itemsFiltered = useMemo(() => {
-    return items.filter(x => windowsVisible.some(j => x.id === j));
-  }, [items, windowsVisible]);
+  const [items, setItems] = useState<WidgetGridItem[]>(restoreWindowsFromLS);
 
   return (
-    <WindowManager
-      windows={itemsFiltered}
-      dragSelector=".react-grid-dragHandleExample"
+    <WidgetsGrid
+      items={items}
       onChange={x => {
         saveWindowsToLS(x);
         setItems(x);

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

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

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

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

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

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

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

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

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

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

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

@@ -1,71 +0,0 @@
-import { WindowProps } from '@/hooks/Mapper/components/ui-kit/WindowManager/types.ts';
-import {
-  LocalCharacters,
-  RoutesWidget,
-  SystemInfo,
-  SystemSignatures,
-} from '@/hooks/Mapper/components/mapInterface/widgets';
-
-export const CURRENT_WINDOWS_VERSION = 2;
-
-export enum WidgetsIds {
-  info = 'info',
-  signatures = 'signatures',
-  local = 'local',
-  routes = 'routes',
-}
-
-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 />,
-  },
-];
-
-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',
-  },
-];

assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesList/RoutesList.module.scss

@@ -8,6 +8,7 @@
 .RouteSystem {
   width: 8px;
   height: 8px;
+  background: #ffffff;
 
   cursor: pointer;
   transition: opacity 200ms;

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

@@ -2,10 +2,7 @@ import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { parseSignatures } from '@/hooks/Mapper/helpers';
 import { Commands, OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { WdTooltip, WdTooltipHandlers } from '@/hooks/Mapper/components/ui-kit';
-import {
-  getGroupIdByRawGroup,
-  GROUPS_LIST,
-} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
+import { GROUPS_LIST } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
 
 import { DataTable, DataTableRowClickEvent, DataTableRowMouseEvent, SortOrder } from 'primereact/datatable';
 import { Column } from 'primereact/column';
@@ -125,14 +122,13 @@ export const SystemSignaturesContent = ({
         }
 
         const isCosmicSignature = x.kind === COSMIC_SIGNATURE;
-        const preparedGroup = getGroupIdByRawGroup(x.group);
 
         if (isCosmicSignature) {
           const showCosmicSignatures = settings.find(y => y.key === COSMIC_SIGNATURE)?.value;
           if (showCosmicSignatures) {
-            return !x.group || groupSettings.find(y => y.key === preparedGroup)?.value;
+            return !x.group || groupSettings.find(y => y.key === x.group)?.value;
           } else {
-            return !!x.group && groupSettings.find(y => y.key === preparedGroup)?.value;
+            return !!x.group && groupSettings.find(y => y.key === x.group)?.value;
           }
         }
 

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

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

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

@@ -16,8 +16,6 @@ export const MapRootContent = ({}: MapRootContentProps) => {
   const { interfaceSettings } = useMapRootState();
   const { isShowMenu } = interfaceSettings;
 
-  const themeClass = `${interfaceSettings.theme ?? 'default'}-theme`;
-
   const [showOnTheMap, setShowOnTheMap] = useState(false);
   const [showMapSettings, setShowMapSettings] = useState(false);
   const mapInterface = <MapInterface />;
@@ -28,29 +26,27 @@ export const MapRootContent = ({}: MapRootContentProps) => {
   useSkipContextMenu();
 
   return (
-    <div className={themeClass}>
-      <Layout map={<MapWrapper />}>
-        {!isShowMenu ? (
-          <div className="absolute top-0 left-14 w-[calc(100%-3.5rem)] h-[calc(100%-3.5rem)] pointer-events-none">
-            <div className="absolute top-0 left-0 w-[calc(100%-3.5rem)] h-full pointer-events-none">
-              <Topbar />
-              {mapInterface}
-            </div>
-            <div className="absolute top-0 right-0 w-14 h-[calc(100%+3.5rem)] pointer-events-auto">
-              <RightBar onShowOnTheMap={handleShowOnTheMap} onShowMapSettings={handleShowMapSettings} />
-            </div>
-          </div>
-        ) : (
-          <div className="absolute top-0 left-14 w-[calc(100%-3.5rem)] h-[calc(100%-3.5rem)] pointer-events-none">
-            <Topbar>
-              <MapContextMenu onShowOnTheMap={handleShowOnTheMap} onShowMapSettings={handleShowMapSettings} />
-            </Topbar>
+    <Layout map={<MapWrapper />}>
+      {!isShowMenu ? (
+        <div className="absolute top-0 left-14 w-[calc(100%-3.5rem)] h-[calc(100%-3.5rem)] pointer-events-none">
+          <div className="absolute top-0 left-0 w-[calc(100%-3.5rem)] h-full pointer-events-none">
+            <Topbar />
             {mapInterface}
           </div>
-        )}
-        <OnTheMap show={showOnTheMap} onHide={() => setShowOnTheMap(false)} />
-        <MapSettings show={showMapSettings} onHide={() => setShowMapSettings(false)} />
-      </Layout>
-    </div>
+          <div className="absolute top-0 right-0 w-14 h-[calc(100%+3.5rem)] pointer-events-auto">
+            <RightBar onShowOnTheMap={handleShowOnTheMap} onShowMapSettings={handleShowMapSettings} />
+          </div>
+        </div>
+      ) : (
+        <div className="absolute top-0 left-14 w-[calc(100%-3.5rem)] h-[calc(100%-3.5rem)] pointer-events-none">
+          <Topbar>
+            <MapContextMenu onShowOnTheMap={handleShowOnTheMap} onShowMapSettings={handleShowMapSettings} />
+          </Topbar>
+          {mapInterface}
+        </div>
+      )}
+      <OnTheMap show={showOnTheMap} onHide={() => setShowOnTheMap(false)} />
+      <MapSettings show={showMapSettings} onHide={() => setShowMapSettings(false)} />
+    </Layout>
   );
 };

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

@@ -3,10 +3,8 @@ 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 { InterfaceStoredSettings, InterfaceStoredSettingsProps, useMapRootState } 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',
@@ -39,101 +37,45 @@ export interface MapSettingsProps {
   onHide: () => void;
 }
 
-type SettingsListItem = {
+type CheckboxesList = {
   prop: keyof UserSettings;
   label: string;
-  type: 'checkbox' | 'dropdown';
-  options?: { label: string; value: string }[];
-};
+}[];
 
-const COMMON_CHECKBOXES_PROPS: SettingsListItem[] = [
-  {
-    prop: InterfaceStoredSettingsProps.isShowMinimap,
-    label: 'Show Minimap',
-    type: 'checkbox',
-  },
+const COMMON_CHECKBOXES_PROPS: CheckboxesList = [
+  { prop: InterfaceStoredSettingsProps.isShowMinimap, label: 'Show Minimap' },
 ];
 
-const SYSTEMS_CHECKBOXES_PROPS: SettingsListItem[] = [
-  {
-    prop: InterfaceStoredSettingsProps.isShowKSpace,
-    label: 'Highlight Low/High-security systems',
-    type: 'checkbox',
-  },
-  {
-    prop: UserSettingsRemoteProps.select_on_spash,
-    label: 'Auto-select splashed',
-    type: 'checkbox',
-  },
+const SYSTEMS_CHECKBOXES_PROPS: CheckboxesList = [
+  { prop: InterfaceStoredSettingsProps.isShowKSpace, label: 'Highlight Low/High-security systems' },
+  { prop: UserSettingsRemoteProps.select_on_spash, label: 'Auto-select splashed' },
 ];
 
-const SIGNATURES_CHECKBOXES_PROPS: SettingsListItem[] = [
-  {
-    prop: UserSettingsRemoteProps.link_signature_on_splash,
-    label: 'Link signature on splash',
-    type: 'checkbox',
-  },
-  {
-    prop: InterfaceStoredSettingsProps.isShowUnsplashedSignatures,
-    label: 'Show unsplashed signatures',
-    type: 'checkbox',
-  },
+const SIGNATURES_CHECKBOXES_PROPS: CheckboxesList = [
+  { prop: UserSettingsRemoteProps.link_signature_on_splash, label: 'Link signature on splash' },
+  { prop: InterfaceStoredSettingsProps.isShowUnsplashedSignatures, label: 'Show unsplashed signatures' },
 ];
 
-const CONNECTIONS_CHECKBOXES_PROPS: SettingsListItem[] = [
-  {
-    prop: UserSettingsRemoteProps.delete_connection_with_sigs,
-    label: 'Delete connections to linked signatures',
-    type: 'checkbox',
-  },
-  {
-    prop: InterfaceStoredSettingsProps.isThickConnections,
-    label: 'Thicker connections',
-    type: 'checkbox',
-  },
+const CONNECTIONS_CHECKBOXES_PROPS: CheckboxesList = [
+  { prop: UserSettingsRemoteProps.delete_connection_with_sigs, label: 'Delete connections to linked signatures' },
+  { prop: InterfaceStoredSettingsProps.isThickConnections, label: 'Thicker connections' },
 ];
 
-const UI_CHECKBOXES_PROPS: SettingsListItem[] = [
-  {
-    prop: InterfaceStoredSettingsProps.isShowMenu,
-    label: 'Enable compact map menu bar',
-    type: 'checkbox',
-  },
-  {
-    prop: InterfaceStoredSettingsProps.isShowBackgroundPattern,
-    label: 'Show background pattern',
-    type: 'checkbox',
-  },
-  {
-    prop: InterfaceStoredSettingsProps.isSoftBackground,
-    label: 'Enable soft background',
-    type: 'checkbox',
-  },
+const UI_CHECKBOXES_PROPS: CheckboxesList = [
+  { prop: InterfaceStoredSettingsProps.isShowMenu, label: 'Enable compact map menu bar' },
+  { prop: InterfaceStoredSettingsProps.isShowBackgroundPattern, label: 'Show background pattern' },
+  { prop: InterfaceStoredSettingsProps.isSoftBackground, label: 'Enable soft background' },
 ];
 
-const THEME_OPTIONS = [
-  { label: 'Default', value: 'default' },
-  { label: 'Pathfinder', value: 'pathfinder' },
-];
-
-const THEME_SETTING: SettingsListItem = {
-  prop: 'theme',
-  label: 'Theme',
-  type: 'dropdown',
-  options: THEME_OPTIONS,
-};
-
 export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
   const [activeIndex, setActiveIndex] = useState(0);
   const { outCommand, interfaceSettings, setInterfaceSettings } = useMapRootState();
-  const [userRemoteSettings, setUserRemoteSettings] = useState<UserSettingsRemote>({
-    ...DEFAULT_REMOTE_SETTINGS,
-  });
+  const [userRemoteSettings, setUserRemoteSettings] = useState<UserSettingsRemote>({ ...DEFAULT_REMOTE_SETTINGS });
 
   const mergedSettings = useMemo(() => {
     return {
-      ...userRemoteSettings,
       ...interfaceSettings,
+      ...userRemoteSettings,
     };
   }, [userRemoteSettings, interfaceSettings]);
 
@@ -142,67 +84,49 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
       type: OutCommand.getUserSettings,
       data: null,
     });
+
     setUserRemoteSettings({
       ...user_settings,
     });
   };
 
-  const handleSettingChange = useCallback(
-    async (prop: keyof UserSettings, value: boolean | string) => {
-      if (UserSettingsRemoteList.includes(prop as any)) {
+  const handleChangeChecked = useCallback(
+    (prop: keyof UserSettings) => async (checked: boolean) => {
+      // @ts-ignore
+      if (UserSettingsRemoteList.includes(prop)) {
         const newRemoteSettings = {
           ...userRemoteSettings,
-          [prop]: value,
+          [prop]: checked,
         };
+
         await outCommand({
           type: OutCommand.updateUserSettings,
           data: newRemoteSettings,
         });
+
         setUserRemoteSettings(newRemoteSettings);
-      } else {
-        setInterfaceSettings({
-          ...interfaceSettings,
-          [prop]: value,
-        });
+        return;
       }
+
+      setInterfaceSettings({
+        ...interfaceSettings,
+        [prop]: checked,
+      });
     },
-    [userRemoteSettings, interfaceSettings, outCommand, setInterfaceSettings],
+    [interfaceSettings, outCommand, setInterfaceSettings, userRemoteSettings],
   );
 
-  const renderSettingItem = (item: SettingsListItem) => {
-    const currentValue = mergedSettings[item.prop];
-
-    if (item.type === 'checkbox') {
+  const renderCheckboxesList = (list: CheckboxesList) => {
+    return list.map(x => {
       return (
         <PrettySwitchbox
-          key={item.prop}
-          label={item.label}
-          checked={!!currentValue}
-          setChecked={checked => handleSettingChange(item.prop, checked)}
+          key={x.prop}
+          label={x.label}
+          checked={mergedSettings[x.prop]}
+          setChecked={handleChangeChecked(x.prop)}
         />
       );
-    }
-
-    if (item.type === 'dropdown' && item.options) {
-      return (
-        <div key={item.prop} className="flex items-center gap-2 mt-2">
-          <label className="text-sm">{item.label}:</label>
-          <Dropdown
-            className="text-sm"
-            value={currentValue}
-            options={item.options}
-            onChange={e => handleSettingChange(item.prop, e.value)}
-            placeholder="Select a theme"
-          />
-        </div>
-      );
-    }
-
-    return null;
-  };
-
-  const renderSettingsList = (list: SettingsListItem[]) => {
-    return list.map(renderSettingItem);
+    });
   };
 
   return (
@@ -213,7 +137,10 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
       style={{ width: '550px' }}
       onShow={handleShow}
       onHide={() => {
-        if (!show) return;
+        if (!show) {
+          return;
+        }
+
         setActiveIndex(0);
         onHide();
       }}
@@ -227,31 +154,21 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
               className={styles.verticalTabView}
             >
               <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">{renderCheckboxesList(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">
+                  {renderCheckboxesList(SYSTEMS_CHECKBOXES_PROPS)}
+                </div>
               </TabPanel>
-
               <TabPanel header="Connections" headerClassName={styles.verticalTabHeader}>
-                {renderSettingsList(CONNECTIONS_CHECKBOXES_PROPS)}
+                {renderCheckboxesList(CONNECTIONS_CHECKBOXES_PROPS)}
               </TabPanel>
-
               <TabPanel header="Signatures" headerClassName={styles.verticalTabHeader}>
-                {renderSettingsList(SIGNATURES_CHECKBOXES_PROPS)}
+                {renderCheckboxesList(SIGNATURES_CHECKBOXES_PROPS)}
               </TabPanel>
-
               <TabPanel header="User Interface" headerClassName={styles.verticalTabHeader}>
-                {renderSettingsList(UI_CHECKBOXES_PROPS)}
-              </TabPanel>
-
-              <TabPanel header="Widgets" headerClassName={styles.verticalTabHeader}>
-                <WidgetsSettings />
-              </TabPanel>
-
-              <TabPanel header="Theme" headerClassName={styles.verticalTabHeader}>
-                {renderSettingItem(THEME_SETTING)}
+                {renderCheckboxesList(UI_CHECKBOXES_PROPS)}
               </TabPanel>
             </TabView>
           </div>

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

@@ -1,37 +0,0 @@
-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';
-
-export interface WidgetsSettingsProps {}
-
-// eslint-disable-next-line no-empty-pattern
-export const WidgetsSettings = ({}: WidgetsSettingsProps) => {
-  const { windowsVisible, setWindowsVisible } = useMapRootState();
-
-  const handleWidgetSettingsChange = useCallback(
-    (widget: WidgetsIds, checked: boolean) => {
-      setWindowsVisible(prev => {
-        if (checked) {
-          return [...prev, widget];
-        }
-
-        return prev.filter(x => x !== widget);
-      });
-    },
-    [setWindowsVisible],
-  );
-
-  return (
-    <div className="">
-      {WIDGETS_CHECKBOXES_PROPS.map(widget => (
-        <PrettySwitchbox
-          key={widget.id}
-          label={widget.label}
-          checked={windowsVisible.some(x => x === widget.id)}
-          setChecked={checked => handleWidgetSettingsChange(widget.id, checked)}
-        />
-      ))}
-    </div>
-  );
-};

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

@@ -40,7 +40,6 @@ export const MapWrapper = () => {
       isThickConnections,
       isShowBackgroundPattern,
       isSoftBackground,
-      theme,
     },
   } = useMapRootState();
   const { deleteSystems } = useDeleteSystems();
@@ -167,7 +166,6 @@ export const MapWrapper = () => {
         isThickConnections={isThickConnections}
         isShowBackgroundPattern={isShowBackgroundPattern}
         isSoftBackground={isSoftBackground}
-        theme={theme}
         onAddSystem={onAddSystem}
       />
 

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

@@ -1,85 +0,0 @@
-.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;
-}
-
-.topRight {
-  top: -7.5px;
-  right: -7.5px;
-}
-
-.bottomLeft {
-  bottom: -7.5px;
-  left: -7.5px;
-}
-
-.bottomRight {
-  bottom: -7.5px;
-  right: -7.5px;
-}
-
-.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

@@ -1,424 +0,0 @@
-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;
-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.map((window, index) => ({
-        ...window,
-        zIndex: index + 1,
-      })),
-    );
-  }, [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

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

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

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

@@ -1,13 +0,0 @@
-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,7 +1,6 @@
 export enum SESSION_KEY {
   viewPort = 'viewPort',
   windows = 'windows',
-  windowsVisible = 'windowsVisible',
   routes = 'routes',
 }
 

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

@@ -1,5 +1,5 @@
-import { SignatureGroup, SignatureKind, SystemSignature } from '@/hooks/Mapper/types';
-import { MAPPING_TYPE_TO_ENG } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
+import { COSMIC_SIGNATURE } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog';
+import { SystemSignature } from '@/hooks/Mapper/types';
 
 export const parseSignatures = (value: string, availableKeys: string[]): SystemSignature[] => {
   const outArr: SystemSignature[] = [];
@@ -14,12 +14,10 @@ export const parseSignatures = (value: string, availableKeys: string[]): SystemS
       continue;
     }
 
-    const kind = MAPPING_TYPE_TO_ENG[sigArrInfo[1] as SignatureKind];
-
     outArr.push({
       eve_id: sigArrInfo[0],
-      kind: availableKeys.includes(kind) ? kind : SignatureKind.CosmicSignature,
-      group: sigArrInfo[2] as SignatureGroup,
+      kind: availableKeys.includes(sigArrInfo[1]) ? sigArrInfo[1] : COSMIC_SIGNATURE,
+      group: sigArrInfo[2],
       name: sigArrInfo[3],
       type: '',
     });

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

@@ -1,10 +1,9 @@
 import { ContextStoreDataUpdate, useContextStore } from '@/hooks/Mapper/utils';
-import { createContext, Dispatch, ForwardedRef, forwardRef, SetStateAction, useContext, useEffect } from 'react';
+import { createContext, Dispatch, ForwardedRef, forwardRef, SetStateAction, useContext } 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 { WidgetsIds } from '@/hooks/Mapper/components/mapInterface/constants.tsx';
 
 export type MapRootData = MapUnionTypes & {
   selectedSystems: string[];
@@ -19,7 +18,6 @@ const INITIAL_DATA: MapRootData = {
   userCharacters: [],
   presentCharacters: [],
   systems: [],
-  systemSignatures: {},
   hubs: [],
   routes: undefined,
   kills: [],
@@ -39,7 +37,6 @@ export enum InterfaceStoredSettingsProps {
   isShowUnsplashedSignatures = 'isShowUnsplashedSignatures',
   isShowBackgroundPattern = 'isShowBackgroundPattern',
   isSoftBackground = 'isSoftBackground',
-  theme = 'theme',
 }
 
 export type InterfaceStoredSettings = {
@@ -50,7 +47,6 @@ export type InterfaceStoredSettings = {
   isShowUnsplashedSignatures: boolean;
   isShowBackgroundPattern: boolean;
   isSoftBackground: boolean;
-  theme: string;
 };
 
 export const STORED_INTERFACE_DEFAULT_VALUES: InterfaceStoredSettings = {
@@ -61,24 +57,14 @@ export const STORED_INTERFACE_DEFAULT_VALUES: InterfaceStoredSettings = {
   isShowUnsplashedSignatures: false,
   isShowBackgroundPattern: true,
   isSoftBackground: false,
-  theme: 'default',
 };
 
-export const STORED_VISIBLE_WIDGETS_DEFAULT = [
-  WidgetsIds.info,
-  WidgetsIds.local,
-  WidgetsIds.routes,
-  WidgetsIds.signatures,
-];
-
 export interface MapRootContextProps {
   update: ContextStoreDataUpdate<MapRootData>;
   data: MapRootData;
   outCommand: OutCommandHandler;
   interfaceSettings: InterfaceStoredSettings;
   setInterfaceSettings: Dispatch<SetStateAction<InterfaceStoredSettings>>;
-  windowsVisible: WidgetsIds[];
-  setWindowsVisible: Dispatch<SetStateAction<WidgetsIds[]>>;
 }
 
 const MapRootContext = createContext<MapRootContextProps>({
@@ -113,28 +99,6 @@ export const MapRootProvider = ({ children, fwdRef, outCommand }: MapRootProvide
     },
   );
 
-  const [windowsVisible, setWindowsVisible] = useLocalStorageState<WidgetsIds[]>('windows:visible', {
-    defaultValue: STORED_VISIBLE_WIDGETS_DEFAULT,
-  });
-
-  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
       value={{
@@ -143,8 +107,6 @@ export const MapRootProvider = ({ children, fwdRef, outCommand }: MapRootProvide
         outCommand: outCommand,
         setInterfaceSettings,
         interfaceSettings,
-        windowsVisible,
-        setWindowsVisible,
       }}
     >
       <MapRootHandlers ref={fwdRef}>{children}</MapRootHandlers>

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

@@ -8,14 +8,14 @@ import { Commands } from '@/hooks/Mapper/types/mapHandlers.ts';
 export const useCommandsSystems = () => {
   const {
     update,
-    data: { systems, systemSignatures },
+    data: { systems },
     outCommand,
   } = useMapRootState();
 
   const { addSystemStatic } = useLoadSystemStatic({ systems: [] });
 
-  const ref = useRef({ systems, systemSignatures, update, addSystemStatic });
-  ref.current = { systems, systemSignatures, update, addSystemStatic };
+  const ref = useRef({ systems, update, addSystemStatic });
+  ref.current = { systems, update, addSystemStatic };
 
   const addSystems = useCallback((systemsToAdd: CommandAddSystems) => {
     const { update, addSystemStatic, systems } = ref.current;
@@ -57,19 +57,28 @@ export const useCommandsSystems = () => {
     });
 
     update({ systems: out }, true);
-
-    emitMapEvent({ name: Commands.updateSystems, data: out });
   }, []);
 
   const updateSystemSignatures = useCallback(
     async (systemId: string) => {
-      const { update, systemSignatures } = ref.current;
+      const { update, systems } = ref.current;
+
       const { signatures } = await outCommand({
         type: OutCommand.getSignatures,
         data: { system_id: `${systemId}` },
       });
-      const out = { ...systemSignatures, [`${systemId}`]: signatures };
-      update({ systemSignatures: out }, true);
+
+      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 });
     },
     [outCommand],
   );

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

@@ -129,7 +129,6 @@ export enum OutCommand {
   updateConnectionCustomInfo = 'update_connection_custom_info',
   updateSignatures = 'update_signatures',
   updateSystemName = 'update_system_name',
-  updateSystemTemporaryName = 'update_system_temporary_name',
   updateSystemDescription = 'update_system_description',
   updateSystemLabels = 'update_system_labels',
   updateSystemLocked = 'update_system_locked',

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

@@ -5,7 +5,6 @@ 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>;
@@ -16,7 +15,6 @@ 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/signatures.ts

@@ -10,15 +10,6 @@ export enum SignatureGroup {
   CombatSite = 'Combat Site',
 }
 
-export enum SignatureKind {
-  CosmicSignature = 'Cosmic Signature',
-  CosmicAnomaly = 'Cosmic Anomaly',
-  Structure = 'Structure',
-  Ship = 'Ship',
-  Deployable = 'Deployable',
-  Drone = 'Drone',
-}
-
 export type GroupType = {
   id: string;
   icon: string;
@@ -28,7 +19,7 @@ export type GroupType = {
 
 export type SystemSignature = {
   eve_id: string;
-  kind: SignatureKind;
+  kind: string;
   name: string;
   custom_info?: string;
   description?: string;
@@ -39,41 +30,3 @@ export type SystemSignature = {
   inserted_at?: string;
   updated_at?: string;
 };
-
-export enum SignatureKindENG {
-  CosmicSignature = 'Cosmic Signature',
-  CosmicAnomaly = 'Cosmic Anomaly',
-  Structure = 'Structure',
-  Ship = 'Ship',
-  Deployable = 'Deployable',
-  Drone = 'Drone',
-}
-
-export enum SignatureKindRU {
-  CosmicSignature = 'Скрытый сигнал',
-  CosmicAnomaly = 'Космическая аномалия',
-  Structure = 'Сооружение',
-  Ship = 'Корабль',
-  Deployable = 'Полевые блоки',
-  Drone = 'Дрон',
-}
-
-export enum SignatureGroupENG {
-  CosmicSignature = 'Cosmic Signature',
-  Wormhole = 'Wormhole',
-  GasSite = 'Gas Site',
-  RelicSite = 'Relic Site',
-  DataSite = 'Data Site',
-  OreSite = 'Ore Site',
-  CombatSite = 'Combat Site',
-}
-
-export enum SignatureGroupRU {
-  CosmicSignature = 'Скрытый сигнал',
-  Wormhole = 'Червоточина',
-  GasSite = 'Газовый район',
-  RelicSite = 'Археологический район',
-  DataSite = 'Информационный район',
-  OreSite = 'Астероидный район',
-  CombatSite = 'Боевой район',
-}

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

@@ -116,7 +116,6 @@ export type SolarSystemRawType = {
   tag: string | null;
   status: number;
   name: string | null;
-  temporary_name: string | null;
 
   system_static_info: SolarSystemStaticInfoRaw;
   system_signatures: SystemSignature[];

assets/js/hooks/copyToClipboard.ts

@@ -1,14 +1,17 @@
 export default {
   mounted() {
-    const button = this.el;
+    const hook = this;
+    const url = hook.el.dataset.url;
+    const button = hook.el;
 
     button.addEventListener('click', function () {
+      // Get the URL from the data attribute
 
       button.classList.remove('copied');
 
       // Copy the URL to the clipboard
       navigator.clipboard
-        .writeText(button.dataset.url)
+        .writeText(url)
         .then(() => {
           button.classList.add('copied');
         })

config/runtime.exs

@@ -48,11 +48,6 @@ port =
 
 scheme = System.get_env("WEB_EXTERNAL_SCHEME", "http")
 
-public_api_disabled =
-  config_dir
-  |> get_var_from_path_or_env("WANDERER_PUBLIC_API_DISABLED", "false")
-  |> String.to_existing_atom()
-
 map_subscriptions_enabled =
   config_dir
   |> get_var_from_path_or_env("WANDERER_MAP_SUBSCRIPTIONS_ENABLED", "false")
@@ -66,18 +61,6 @@ map_subscription_hubs_limit =
   config_dir
   |> get_int_from_path_or_env("WANDERER_MAP_SUBSCRIPTION_HUBS_LIMIT", 100)
 
-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", 30)
-
 wallet_tracking_enabled =
   config_dir
   |> get_var_from_path_or_env("WANDERER_WALLET_TRACKING_ENABLED", "false")
@@ -100,11 +83,7 @@ config :wanderer_app,
   admins: admins,
   corp_id: System.get_env("WANDERER_CORP_ID", "-1") |> String.to_integer(),
   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: [

lib/wanderer_app/api/map.ex

@@ -21,7 +21,6 @@ defmodule WandererApp.Api.Map do
     define(:update_options, action: :update_options)
     define(:assign_owner, action: :assign_owner)
     define(:mark_as_deleted, action: :mark_as_deleted)
-    define(:update_api_key, action: :update_api_key)
 
     define(:by_id,
       get_by: [:id],
@@ -123,11 +122,6 @@ defmodule WandererApp.Api.Map do
 
       change(set_attribute(:deleted, true))
     end
-
-    update :update_api_key do
-      accept [:public_api_key]
-    end
-
   end
 
   attributes do
@@ -147,10 +141,6 @@ defmodule WandererApp.Api.Map do
     attribute :description, :string
     attribute :personal_note, :string
 
-    attribute :public_api_key, :string do
-      allow_nil? true
-    end
-
     attribute :hubs, {:array, :string} do
       allow_nil?(true)
 

lib/wanderer_app/api/map_system.ex

@@ -46,9 +46,7 @@ defmodule WandererApp.Api.MapSystem do
     define(:update_locked, action: :update_locked)
     define(:update_status, action: :update_status)
     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
@@ -104,10 +102,6 @@ defmodule WandererApp.Api.MapSystem do
       accept [:tag]
     end
 
-    update :update_temporary_name do
-      accept [:temporary_name]
-    end
-
     update :update_labels do
       accept [:labels]
     end
@@ -118,10 +112,6 @@ 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
@@ -151,10 +141,6 @@ defmodule WandererApp.Api.MapSystem do
       allow_nil? true
     end
 
-    attribute :temporary_name, :string do
-      allow_nil? true
-    end
-
     attribute :labels, :string do
       allow_nil? true
     end
@@ -198,10 +184,6 @@ 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/env.ex

@@ -1,6 +1,5 @@
 defmodule WandererApp.Env do
   @moduledoc false
-  use Nebulex.Caching
 
   @app :wanderer_app
 
@@ -10,7 +9,6 @@ defmodule WandererApp.Env do
   def custom_route_base_url, do: get_key(:custom_route_base_url, "<CUSTOM_ROUTE_BASE_URL>")
   def invites, do: get_key(:invites, false)
   def map_subscriptions_enabled?, do: get_key(:map_subscriptions_enabled, false)
-  def public_api_disabled?, do: get_key(:public_api_disabled, false)
   def wallet_tracking_enabled?, do: get_key(:wallet_tracking_enabled, false)
   def admins, do: get_key(:admins, [])
   def admin_username, do: get_key(:admin_username)
@@ -18,25 +16,5 @@ 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 [max_retries: 1, retry_log_level: :warning]
+  @retry_opts [retry: false, retry_log_level: :warning]
   @timeout_opts [receive_timeout: :timer.seconds(30)]
   @api_retry_count 1
 

lib/wanderer_app/map.ex

@@ -70,11 +70,6 @@ defmodule WandererApp.Map do
   def get_characters_limit(map_id),
     do: {:ok, map_id |> get_map!() |> Map.get(:characters_limit, 100)}
 
-  def is_subscription_active?(map_id) do
-    {:ok, %{plan: plan}} = WandererApp.Map.SubscriptionManager.get_active_map_subscription(map_id)
-    not WandererApp.Env.map_subscriptions_enabled?() || plan != :alpha
-  end
-
   def get_options(map_id),
     do: {:ok, map_id |> get_map!() |> Map.get(:options, Map.new())}
 

lib/wanderer_app/map/map_audit.ex

@@ -9,38 +9,20 @@ defmodule WandererApp.Map.Audit do
   @logger Application.compile_env(:wanderer_app, :logger)
 
   @week_seconds :timer.hours(24 * 7)
-  @month_seconds @week_seconds * 4
-  @audit_expired_seconds @month_seconds * 3
-
-  def track_map_subscription_event(event_type, metadata) do
-    case event_type do
-      "subscription.created" ->
-        track_map_event(event_type, metadata)
-
-      "subscription.updated" ->
-        track_map_event(event_type, metadata)
-
-      "subscription.deleted" ->
-        track_map_event(event_type, metadata)
-
-      _ ->
-        {:ok, nil}
-    end
-  end
 
   def archive() do
-    Logger.info("Start map audit arhiving...")
+    @logger.info("Start map audit arhiving...")
 
     WandererApp.Api.UserActivity
-    |> Ash.Query.filter(inserted_at: [less_than: get_expired_at()])
+    |> Ash.Query.filter(inserted_at: [less_than: _get_expired_at()])
     |> Ash.bulk_destroy!(:archive, %{}, batch_size: 100)
 
-    Logger.info(fn -> "Audit arhived" end)
+    @logger.info(fn -> "Audit arhived" end)
     :ok
   end
 
   def get_activity_page(map_id, page, per_page, period, activity) do
-    {from, to} = period |> get_period()
+    {from, to} = period |> _get_period()
 
     query =
       WandererApp.Api.UserActivity
@@ -102,43 +84,52 @@ defmodule WandererApp.Map.Audit do
 
   def track_map_event(_event_type, _metadata), do: {:ok, nil}
 
-  defp get_period("1H") do
+  defp _get_period("1H") do
     now = DateTime.utc_now()
     start_date = now |> DateTime.add(-1 * 3600, :second)
     {start_date, now}
   end
 
-  defp get_period("1D") do
+  defp _get_period("1D") do
     now = DateTime.utc_now()
     start_date = now |> DateTime.add(-24 * 3600, :second)
     {start_date, now}
   end
 
-  defp get_period("1W") do
+  defp _get_period("1W") do
     now = DateTime.utc_now()
     start_date = now |> DateTime.add(-24 * 3600 * 7, :second)
     {start_date, now}
   end
 
-  defp get_period("1M") do
+  # defp _get_period("1M") do
+  #   now = DateTime.utc_now()
+  #   start_date = now |> DateTime.add(-24 * 3600 * 31, :second)
+  #   {start_date, now}
+  # end
+
+  # defp _get_period("ALL") do
+  #   now = DateTime.utc_now()
+
+  #   start_date = %{
+  #     now
+  #     | year: 2000,
+  #       month: 1,
+  #       day: 1,
+  #       hour: 00,
+  #       minute: 00,
+  #       second: 00,
+  #       microsecond: {0, 0}
+  #   }
+
+  #   {start_date, now}
+  # end
+
+  defp _get_period(_) do
     now = DateTime.utc_now()
-    start_date = now |> DateTime.add(-24 * 3600 * 31, :second)
+    start_date = now |> DateTime.add(-1 * 3600, :second)
     {start_date, now}
   end
 
-  defp get_period("2M") do
-    now = DateTime.utc_now()
-    start_date = now |> DateTime.add(-24 * 3600 * 31 * 2, :second)
-    {start_date, now}
-  end
-
-  defp get_period("3M") do
-    now = DateTime.utc_now()
-    start_date = now |> DateTime.add(-24 * 3600 * 31 * 3, :second)
-    {start_date, now}
-  end
-
-  defp get_period(_), do: get_period("1H")
-
-  defp get_expired_at(), do: DateTime.utc_now() |> DateTime.add(-@audit_expired_seconds, :second)
+  defp _get_expired_at(), do: DateTime.utc_now() |> DateTime.add(-@week_seconds, :second)
 end

lib/wanderer_app/map/map_server.ex

@@ -105,12 +105,6 @@ defmodule WandererApp.Map.Server do
       |> map_pid!
       |> GenServer.cast({&Impl.update_system_position/2, [update]})
 
-  def update_system_linked_sig_eve_id(map_id, update) when is_binary(map_id),
-    do:
-      map_id
-      |> map_pid!
-      |> GenServer.cast({&Impl.update_system_linked_sig_eve_id/2, [update]})
-
   def update_system_name(map_id, update) when is_binary(map_id),
     do:
       map_id
@@ -135,12 +129,6 @@ defmodule WandererApp.Map.Server do
       |> map_pid!
       |> GenServer.cast({&Impl.update_system_tag/2, [update]})
 
-  def update_system_temporary_name(map_id, update) when is_binary(map_id),
-    do:
-      map_id
-      |> map_pid!
-      |> GenServer.cast({&Impl.update_system_temporary_name/2, [update]})
-
   def update_system_locked(map_id, update) when is_binary(map_id),
     do:
       map_id

lib/wanderer_app/map/map_server_impl.ex

@@ -150,14 +150,10 @@ defmodule WandererApp.Map.Server.Impl do
 
   defdelegate update_system_tag(state, update), to: SystemsImpl
 
-  defdelegate update_system_temporary_name(state, update), to: SystemsImpl
-
   defdelegate update_system_locked(state, update), to: SystemsImpl
 
   defdelegate update_system_labels(state, update), to: SystemsImpl
 
-  defdelegate update_system_linked_sig_eve_id(state, update), to: SystemsImpl
-
   defdelegate update_system_position(state, update), to: SystemsImpl
 
   defdelegate add_hub(state, hub_info), to: SystemsImpl
@@ -205,7 +201,7 @@ defmodule WandererApp.Map.Server.Impl do
       | map: map |> WandererApp.Map.update_subscription_settings!(subscription_settings)
     }
 
-  def handle_event(:update_characters, state) do
+  def handle_event(:update_characters, %{map_id: map_id} = state) do
     Process.send_after(self(), :update_characters, @update_characters_timeout)
 
     CharactersImpl.update_characters(state)
@@ -263,7 +259,7 @@ defmodule WandererApp.Map.Server.Impl do
     state
   end
 
-  def handle_event(:cleanup_systems, state) do
+  def handle_event(:cleanup_systems, %{map_id: map_id} = state) do
     Process.send_after(self(), :cleanup_systems, @systems_cleanup_timeout)
 
     state |> SystemsImpl.cleanup_systems()
@@ -324,14 +320,6 @@ defmodule WandererApp.Map.Server.Impl do
       layout: options |> Map.get("layout", "left_to_right"),
       store_custom_labels:
         options |> Map.get("store_custom_labels", "false") |> String.to_existing_atom(),
-      show_linked_signature_id:
-        options |> Map.get("show_linked_signature_id", "false") |> String.to_existing_atom(),
-      show_linked_signature_id_temp_name:
-        options
-        |> Map.get("show_linked_signature_id_temp_name", "false")
-        |> String.to_existing_atom(),
-      show_temp_system_name:
-        options |> Map.get("show_temp_system_name", "false") |> String.to_existing_atom(),
       restrict_offline_showing:
         options |> Map.get("restrict_offline_showing", "false") |> String.to_existing_atom()
     ]
@@ -439,8 +427,7 @@ defmodule WandererApp.Map.Server.Impl do
                                  "name" => name,
                                  "position" => %{"x" => x, "y" => y},
                                  "status" => status,
-                                 "tag" => tag,
-                                 "temporary_name" => temporary_name
+                                 "tag" => tag
                                } = _system,
                                acc ->
         acc
@@ -459,10 +446,6 @@ defmodule WandererApp.Map.Server.Impl do
         })
         |> update_system_status(%{solar_system_id: id |> String.to_integer(), status: status})
         |> update_system_tag(%{solar_system_id: id |> String.to_integer(), tag: tag})
-        |> update_system_temporary_name(%{
-          solar_system_id: id |> String.to_integer(),
-          temporary_name: temporary_name
-        })
         |> update_system_locked(%{solar_system_id: id |> String.to_integer(), locked: locked})
         |> update_system_labels(%{solar_system_id: id |> String.to_integer(), labels: labels})
       end)

lib/wanderer_app/map/server/map_server_connections_impl.ex

@@ -67,29 +67,20 @@ defmodule WandererApp.Map.Server.ConnectionsImpl do
   # @unknown 100_100
   #
   @connection_time_status_eol 1
+  @connection_auto_eol_hours 21
+  @connection_auto_expire_hours 24
+  @connection_eol_expire_timeout :timer.hours(3) + :timer.minutes(30)
+
   @connection_type_wormhole 0
   @connection_type_stargate 1
 
-  def get_connection_auto_expire_hours(), do: WandererApp.Env.map_connection_auto_expire_hours()
-
-  def get_connection_auto_eol_hours(), do: WandererApp.Env.map_connection_auto_eol_hours()
-
-  def get_eol_expire_timeout_mins(), do: WandererApp.Env.map_connection_eol_expire_timeout_mins()
-
-  def get_eol_expire_timeout(),
-    do:
-      :timer.hours(get_connection_auto_expire_hours() - get_connection_auto_eol_hours()) +
-        :timer.minutes(get_eol_expire_timeout_mins())
-
   def init_eol_cache(map_id, connections_eol_time) do
-    eol_expire_timeout = get_eol_expire_timeout()
-
     connections_eol_time
     |> Enum.each(fn {connection_id, connection_eol_time} ->
       WandererApp.Cache.put(
         "map_#{map_id}:conn_#{connection_id}:mark_eol_time",
         connection_eol_time,
-        ttl: eol_expire_timeout
+        ttl: @connection_eol_expire_timeout
       )
     end)
   end
@@ -164,7 +155,7 @@ defmodule WandererApp.Map.Server.ConnectionsImpl do
                 WandererApp.Cache.put(
                   "map_#{map_id}:conn_#{connection_id}:mark_eol_time",
                   DateTime.utc_now(),
-                  ttl: get_eol_expire_timeout()
+                  ttl: @connection_eol_expire_timeout
                 )
 
               _ ->
@@ -203,9 +194,6 @@ defmodule WandererApp.Map.Server.ConnectionsImpl do
       do: update_connection(state, :update_custom_info, [:custom_info], connection_update)
 
   def cleanup_connections(%{map_id: map_id} = state) do
-    connection_auto_expire_hours = get_connection_auto_expire_hours()
-    connection_auto_eol_hours = get_connection_auto_eol_hours()
-
     state =
       map_id
       |> WandererApp.Map.list_connections!()
@@ -217,7 +205,7 @@ defmodule WandererApp.Map.Server.ConnectionsImpl do
                         } ->
         type != @connection_type_stargate &&
           DateTime.diff(DateTime.utc_now(), inserted_at, :hour) >=
-            connection_auto_eol_hours &&
+            @connection_auto_eol_hours &&
           is_connection_valid(
             :wormholes,
             solar_system_source_id,
@@ -274,9 +262,9 @@ defmodule WandererApp.Map.Server.ConnectionsImpl do
         not is_connection_exist ||
           (type != @connection_type_stargate && is_connection_valid &&
              (DateTime.diff(DateTime.utc_now(), inserted_at, :hour) >=
-                connection_auto_expire_hours ||
+                @connection_auto_expire_hours ||
                 DateTime.diff(DateTime.utc_now(), connection_mark_eol_time, :hour) >=
-                  connection_auto_expire_hours - connection_auto_eol_hours))
+                  @connection_auto_expire_hours - @connection_auto_eol_hours))
       end)
       |> Enum.reduce(state, fn %{
                                  solar_system_source: solar_system_source_id,
@@ -345,7 +333,7 @@ defmodule WandererApp.Map.Server.ConnectionsImpl do
 
         Impl.broadcast!(map_id, :maybe_select_system, %{
           character_id: character_id,
-          solar_system_id: location.solar_system_id
+          solar_system_id: location.solar_system_id,
         })
 
         Impl.broadcast!(map_id, :add_connection, connection)
@@ -358,19 +346,20 @@ defmodule WandererApp.Map.Server.ConnectionsImpl do
 
         :ok
 
-      {:error, :already_exists} ->
-        # Still broadcast location change in case of followed character
-        Impl.broadcast!(map_id, :maybe_select_system, %{
-          character_id: character_id,
-          solar_system_id: location.solar_system_id
-        })
+        {:error, :already_exists} ->
+          # Still broadcast location change in case of followed character
+          Impl.broadcast!(map_id, :maybe_select_system, %{
+            character_id: character_id,
+            solar_system_id: location.solar_system_id
+          })
 
-        :ok
+          :ok
 
-      {:error, error} ->
-        Logger.debug(fn -> "Failed to add connection: #{inspect(error, pretty: true)}" end)
+        {:error, error} ->
+          Logger.debug(fn -> "Failed to add connection: #{inspect(error, pretty: true)}" end)
+
+          :ok
 
-        :ok
     end
   end
 

lib/wanderer_app/map/server/map_server_systems_impl.ex

@@ -122,13 +122,6 @@ defmodule WandererApp.Map.Server.SystemsImpl do
       ),
       do: state |> update_system(:update_tag, [:tag], update)
 
-  def update_system_temporary_name(
-        state,
-        update
-      ) do
-    state |> update_system(:update_temporary_name, [:temporary_name], update)
-  end
-
   def update_system_locked(
         state,
         update
@@ -141,12 +134,6 @@ defmodule WandererApp.Map.Server.SystemsImpl do
       ),
       do: state |> update_system(:update_labels, [:labels], update)
 
-  def update_system_linked_sig_eve_id(
-        state,
-        update
-      ),
-      do: state |> update_system(:update_linked_sig_eve_id, [:linked_sig_eve_id], update)
-
   def update_system_position(
         %{rtree_name: rtree_name} = state,
         update
@@ -290,7 +277,7 @@ defmodule WandererApp.Map.Server.SystemsImpl do
                location.solar_system_id
              ) do
           {:ok, existing_system} when not is_nil(existing_system) ->
-            updated_system =
+            {:ok, updated_system} =
               existing_system
               |> WandererApp.MapSystemRepo.update_position!(%{
                 position_x: position.x,
@@ -298,9 +285,7 @@ defmodule WandererApp.Map.Server.SystemsImpl do
               })
               |> WandererApp.MapSystemRepo.cleanup_labels!(map_opts)
               |> WandererApp.MapSystemRepo.update_visible!(%{visible: true})
-              |> WandererApp.MapSystemRepo.cleanup_tags!()
-              |> WandererApp.MapSystemRepo.cleanup_temporary_name!()
-              |> WandererApp.MapSystemRepo.cleanup_linked_sig_eve_id!()
+              |> WandererApp.MapSystemRepo.cleanup_tags()
 
             @ddrt.insert(
               {existing_system.solar_system_id,
@@ -419,8 +404,6 @@ defmodule WandererApp.Map.Server.SystemsImpl do
             |> WandererApp.MapSystemRepo.update_position!(%{position_x: x, position_y: y})
             |> WandererApp.MapSystemRepo.cleanup_labels!(map_opts)
             |> WandererApp.MapSystemRepo.cleanup_tags!()
-            |> WandererApp.MapSystemRepo.cleanup_temporary_name!()
-            |> WandererApp.MapSystemRepo.cleanup_linked_sig_eve_id!()
             |> WandererApp.MapSystemRepo.update_visible(%{visible: true})
           end
 

lib/wanderer_app/repositories/map_repo.ex

@@ -4,9 +4,6 @@ defmodule WandererApp.MapRepo do
   @default_map_options %{
     "layout" => "left_to_right",
     "store_custom_labels" => "false",
-    "show_linked_signature_id" => "false",
-    "show_linked_signature_id_temp_name" => "false",
-    "show_temp_system_name" => "false",
     "restrict_offline_showing" => "false"
   }