chore: release version v1.38.6

* feat(Map): Add option to show sig ID on system

* feat(Map): Add option to show sig ID in custom label

.env.example

@@ -6,3 +6,4 @@ 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,6 +122,8 @@ jobs:
     name: 🛠 Build Docker Images
     needs: build
     runs-on: ubuntu-22.04
+    outputs:
+      release-notes: ${{ steps.get-content.outputs.string }}
     permissions:
       checks: write
       contents: write
@@ -135,6 +137,7 @@ jobs:
       matrix:
         platform:
           - linux/amd64
+          - linux/arm64
     steps:
       - name: Prepare
         run: |
@@ -186,12 +189,24 @@ jobs:
           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: Image digest
-        run: echo ${{ steps.build.outputs.digest }}
+      - name: Export digest
+        run: |
+          mkdir -p /tmp/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "/tmp/digests/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@v4
+        with:
+          name: digests-${{ env.PLATFORM_PAIR }}
+          path: /tmp/digests/*
+          if-no-files-found: error
+          retention-days: 1
 
       - uses: markpatterson27/markdown-to-output@v1
         id: extract-changelog
@@ -211,16 +226,53 @@ jobs:
           maxLength: 500
           truncationSymbol: "…"
 
-      - name: Discord Webhook Action
-        uses: tsickert/discord-webhook@v5.3.0
+  merge:
+    runs-on: ubuntu-latest
+    needs:
+      - docker
+    steps:
+      - name: Download digests
+        uses: actions/download-artifact@v4
         with:
-          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
-          content: ${{ steps.get-content.outputs.string }}
+          path: /tmp/digests
+          pattern: digests-*
+          merge-multiple: true
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.WANDERER_DOCKER_USER }}
+          password: ${{ secrets.WANDERER_DOCKER_PASSWORD }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: |
+            ${{ env.REGISTRY_IMAGE }}
+          tags: |
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+
+      - name: Create manifest list and push
+        working-directory: /tmp/digests
+        run: |
+          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf '${{ env.REGISTRY_IMAGE }}@sha256:%s ' *)
+
+      - name: Inspect image
+        run: |
+          docker buildx imagetools inspect ${{ env.REGISTRY_IMAGE }}:${{ steps.meta.outputs.version }}
 
   create-release:
     name: 🏷 Create Release
     runs-on: ubuntu-22.04
-    needs: docker
+    needs: [docker, merge]
     if: ${{ github.ref == 'refs/heads/main' && github.event_name == 'push' }}
     steps:
       - name: ⬇️ Checkout repo
@@ -248,3 +300,9 @@ jobs:
             ## How to Promote?
             In order to promote this to prod, edit the draft and press **"Publish release"**.
           draft: true
+
+      - name: Discord Webhook Action
+        uses: tsickert/discord-webhook@v5.3.0
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          content: ${{ needs.docker.outputs.release-notes }}

Dockerfile

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

assets/css/app.css

@@ -3,6 +3,8 @@
 @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/common-styles/fixes.scss

@@ -108,3 +108,7 @@
 .p-dropdown-empty-message {
   padding: 0.25rem 0.5rem;
 }
+
+.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+  margin-right: 0 !important;
+}

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

@@ -88,6 +88,23 @@ 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) {
@@ -161,6 +178,7 @@ export const useContextMenuSystemHandlers = ({ systems, hubs, outCommand }: UseC
     onLockToggle,
     onHubToggle,
     onSystemTag,
+    onSystemTemporaryName,
     onSystemStatus,
     onSystemLabels,
     onOpenSettings,

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

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

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

@@ -14,9 +14,6 @@ export const useSystemInfo = ({ systemId }: UseSystemInfoProps) => {
 
   const { systems: systemStatics } = useLoadSystemStatic({ systems: [systemId] });
 
-  // eslint-disable-next-line no-console
-  console.log('JOipP', `systemStatics`, systemStatics);
-
   return useMemo(() => {
     const staticInfo = systemStatics.get(parseInt(systemId));
     const dynamicInfo = getSystemById(systems, systemId);

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

@@ -1,8 +1,11 @@
 .MapRoot {
   width: 100%;
   height: 100%;
-}
 
-.BackgroundAlternateColor {
+  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);
+  }
 }

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

@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect } from 'react';
+import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect, useMemo } from 'react';
 import ReactFlow, {
   Background,
   ConnectionMode,
@@ -16,8 +16,6 @@ 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 { useNodesState, useEdgesState, useMapHandlers, useUpdateNodes } from './hooks';
 import { MapHandlers, OutCommand, OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers.ts';
@@ -25,16 +23,19 @@ import {
   ContextMenuConnection,
   ContextMenuRoot,
   SolarSystemEdge,
-  SolarSystemNode,
+  SolarSystemNodeDefault,
+  SolarSystemNodeTheme,
   useContextMenuConnectionHandlers,
   useContextMenuRootHandlers,
 } from './components';
-import { OnMapSelectionChange } from './map.types';
+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 };
 
@@ -76,11 +77,8 @@ const initialEdges = [
   },
 ];
 
-const nodeTypes = {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  custom: SolarSystemNode,
-} as never;
+
+
 
 const edgeTypes = {
   floating: SolarSystemEdge,
@@ -92,6 +90,7 @@ interface MapCompProps {
   onSelectionChange: OnMapSelectionChange;
   onManualDelete(systems: string[]): void;
   onConnectionInfoClick?(e: SolarSystemConnection): void;
+  onAddSystem?: OnMapAddSystemCallback;
   onSelectionContextMenu?: NodeSelectionMouseHandler;
   minimapClasses?: string;
   isShowMinimap?: boolean;
@@ -100,6 +99,7 @@ interface MapCompProps {
   isThickConnections?: boolean;
   isShowBackgroundPattern?: boolean;
   isSoftBackground?: boolean;
+  theme?: string;
 }
 
 const MapComp = ({
@@ -116,16 +116,30 @@ const MapComp = ({
   isThickConnections,
   isShowBackgroundPattern,
   isSoftBackground,
+  theme,
+  onAddSystem,
 }: MapCompProps) => {
-  const { getNode } = useReactFlow();
+  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();
+  const { handleRootContext, ...rootCtxProps } = useContextMenuRootHandlers({ onAddSystem });
   const { handleConnectionContext, ...connectionCtxProps } = useContextMenuConnectionHandlers();
   const { update } = useMapState();
+  const { variant, gap, size, color } = useBackgroundVars(theme);
 
   const onConnect: OnConnect = useCallback(
     params => {
@@ -184,6 +198,12 @@ const MapComp = ({
     (changes: NodeChange[]) => {
       const systemsIdsToRemove: string[] = [];
 
+      // prevents single node deselection on background / same node click
+      // allows deseletion of all nodes if multiple are currently selected
+      if (changes.length === 1 && changes[0].type == 'select' && changes[0].selected === false) {
+        changes[0].selected = getNodes().filter(node => node.selected).length === 1;
+      }
+
       const nextChanges = changes.reduce((acc, change) => {
         if (change.type !== 'remove') {
           return [...acc, change];
@@ -221,7 +241,7 @@ const MapComp = ({
 
   return (
     <>
-      <div className={clsx(classes.MapRoot, { ['bg-neutral-900']: isSoftBackground })}>
+      <div className={clsx(classes.MapRoot, { [classes.BackgroundAlternateColor]: isSoftBackground })}>
         <ReactFlow
           nodes={nodes}
           edges={edges}
@@ -268,7 +288,7 @@ const MapComp = ({
           selectionMode={SelectionMode.Partial}
         >
           {isShowMinimap && <MiniMap pannable zoomable ariaLabel="Mini map" className={minimapClasses} />}
-          {isShowBackgroundPattern && <Background />}
+          {isShowBackgroundPattern && <Background variant={variant} gap={gap} size={size} color={color} />}
         </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,15 +1,17 @@
+@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
+
 .ConnectionTimeEOL {
-  background-image: linear-gradient(207deg, transparent, #7452c3e3);
+  background-image: linear-gradient(207deg, transparent, var(--conn-time-eol));
 }
 
 .ConnectionFrigate {
-  background-image: linear-gradient(207deg, transparent, #325d88);
+  background-image: linear-gradient(207deg, transparent, var(--conn-frigate));
 }
 
 .ConnectionSave {
-  background-image: linear-gradient(207deg, transparent, rgba(155, 102, 45, 0.85));
+  background-image: linear-gradient(207deg, transparent, var(--conn-save));
 }
 
 .SelectedItem {
-  background-color: rgba(98, 98, 98, 0.33);
+  background-color: var(--selected-item-bg);
 }

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

@@ -6,7 +6,14 @@ import { Edge } from '@reactflow/core/dist/esm/types/edges';
 import { ConnectionType, MassState, ShipSizeStatus, SolarSystemConnection, TimeStatus } from '@/hooks/Mapper/types';
 import clsx from 'clsx';
 import classes from './ContextMenuConnection.module.scss';
-import { MASS_STATE_NAMES, MASS_STATE_NAMES_ORDER } from '@/hooks/Mapper/components/map/constants.ts';
+import {
+  MASS_STATE_NAMES,
+  MASS_STATE_NAMES_ORDER,
+  SHIP_SIZES_NAMES,
+  SHIP_SIZES_NAMES_ORDER,
+  SHIP_SIZES_NAMES_SHORT,
+  SHIP_SIZES_SIZE,
+} from '@/hooks/Mapper/components/map/constants.ts';
 
 export interface ContextMenuConnectionProps {
   contextMenuRef: RefObject<ContextMenu>;
@@ -48,10 +55,6 @@ export const ContextMenuConnection: React.FC<ContextMenuConnectionProps> = ({
               icon: PrimeIcons.CLOCK,
               command: onChangeTimeState,
             },
-          ]
-        : []),
-      ...(isWormhole
-        ? [
             {
               label: `Frigate`,
               className: clsx({
@@ -60,13 +63,9 @@ export const ContextMenuConnection: React.FC<ContextMenuConnectionProps> = ({
               icon: PrimeIcons.CLOUD,
               command: () =>
                 onChangeShipSizeStatus(
-                  edge.data?.ship_size_type === ShipSizeStatus.small ? ShipSizeStatus.normal : ShipSizeStatus.small,
+                  edge.data?.ship_size_type === ShipSizeStatus.small ? ShipSizeStatus.large : ShipSizeStatus.small,
                 ),
             },
-          ]
-        : []),
-      ...(isWormhole
-        ? [
             {
               label: `Save mass`,
               className: clsx({
@@ -75,19 +74,40 @@ export const ContextMenuConnection: React.FC<ContextMenuConnectionProps> = ({
               icon: PrimeIcons.LOCK,
               command: () => onToggleMassSave(!edge.data?.locked),
             },
-          ]
-        : []),
-      ...(isWormhole && !isFrigateSize
-        ? [
+            ...(!isFrigateSize
+              ? [
+                  {
+                    label: `Mass status`,
+                    icon: PrimeIcons.CHART_PIE,
+                    items: MASS_STATE_NAMES_ORDER.map(x => ({
+                      label: MASS_STATE_NAMES[x],
+                      className: clsx({
+                        [classes.SelectedItem]: edge.data?.mass_status === x,
+                      }),
+                      command: () => onChangeMassState(x),
+                    })),
+                  },
+                ]
+              : []),
+
             {
-              label: `Mass status`,
-              icon: PrimeIcons.CHART_PIE,
-              items: MASS_STATE_NAMES_ORDER.map(x => ({
-                label: MASS_STATE_NAMES[x],
+              label: `Ship Size`,
+              icon: PrimeIcons.CLOUD,
+              items: SHIP_SIZES_NAMES_ORDER.map(x => ({
+                label: (
+                  <div className="grid grid-cols-[20px_120px_1fr_40px] gap-2 items-center">
+                    <div className="text-[12px] font-bold text-stone-400">{SHIP_SIZES_NAMES_SHORT[x]}</div>
+                    <div>{SHIP_SIZES_NAMES[x]}</div>
+                    <div></div>
+                    <div className="flex justify-end whitespace-nowrap text-[12px] font-bold text-stone-500">
+                      {SHIP_SIZES_SIZE[x]} t.
+                    </div>
+                  </div>
+                ) as unknown as string, // TODO my lovely kostyl
                 className: clsx({
-                  [classes.SelectedItem]: edge.data?.mass_status === x,
+                  [classes.SelectedItem]: edge.data?.ship_size_type === x,
                 }),
-                command: () => onChangeMassState(x),
+                command: () => onChangeShipSizeStatus(x),
               })),
             },
           ]
@@ -98,7 +118,7 @@ export const ContextMenuConnection: React.FC<ContextMenuConnectionProps> = ({
         command: onDeleteConnection,
       },
     ];
-  }, [edge, onChangeTimeState, onDeleteConnection, onChangeMassState, onChangeShipSizeStatus]);
+  }, [edge, onChangeTimeState, onDeleteConnection, onChangeShipSizeStatus, onToggleMassSave, onChangeMassState]);
 
   return (
     <>

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

@@ -97,14 +97,16 @@ export const useContextMenuConnectionHandlers = () => {
       },
     });
 
-    outCommand({
-      type: OutCommand.updateConnectionMassStatus,
-      data: {
-        source: edge.source,
-        target: edge.target,
-        value: MassState.normal,
-      },
-    });
+    if (status === ShipSizeStatus.small) {
+      outCommand({
+        type: OutCommand.updateConnectionMassStatus,
+        data: {
+          source: edge.source,
+          target: edge.target,
+          value: MassState.normal,
+        },
+      });
+    }
   }, []);
 
   const onToggleMassSave = useCallback((locked: boolean) => {

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

@@ -1,14 +1,16 @@
 import { useReactFlow, XYPosition } from 'reactflow';
-import React, { useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { ContextMenu } from 'primereact/contextmenu';
-import { useMapState } from '../../MapProvider.tsx';
-import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
 import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
+import { OnMapAddSystemCallback } from '@/hooks/Mapper/components/map/map.types.ts';
 
-export const useContextMenuRootHandlers = () => {
+type UseContextMenuRootHandlers = {
+  onAddSystem?: OnMapAddSystemCallback;
+};
+
+export const useContextMenuRootHandlers = ({ onAddSystem }: UseContextMenuRootHandlers = {}) => {
   const rf = useReactFlow();
   const contextMenuRef = useRef<ContextMenu | null>(null);
-  const { outCommand } = useMapState();
   const [position, setPosition] = useState<XYPosition | null>(null);
 
   const handleRootContext = (e: React.MouseEvent<HTMLDivElement>) => {
@@ -18,14 +20,17 @@ export const useContextMenuRootHandlers = () => {
     contextMenuRef.current?.show(e);
   };
 
-  const onAddSystem = () => {
-    outCommand({ type: OutCommand.manualAddSystem, data: { coordinates: position } });
-  };
+  const ref = useRef({ onAddSystem, position });
+  ref.current = { onAddSystem, position };
+
+  const onAddSystemCallback = useCallback(() => {
+    ref.current.onAddSystem?.({ coordinates: position });
+  }, [position]);
 
   return {
     handleRootContext,
 
     contextMenuRef,
-    onAddSystem,
+    onAddSystem: onAddSystemCallback,
   };
 };

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

@@ -1,23 +1,47 @@
-@import "@/hooks/Mapper/components/map/styles/neon-variables";
+@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
 
-.react-flow__edge.selected {
-  .EdgePathBack {
-    stroke: $pastel-yellow;
+.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;
   }
 }
 
 .EdgePathFront {
   fill: none;
-
   stroke: #2c3844;
   stroke-width: 2px;
 
   &.MassVerge:not(&.Frigate) {
-    stroke: #af2900;
+    stroke: #af0000;
   }
 
   &.MassHalf:not(&.Frigate) {
-    stroke: #a85f00;
+    stroke: #ffd700;
   }
 
   &.Frigate {
@@ -54,46 +78,29 @@
   }
 }
 
-.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;
 }
 
-.LinkLabel{
+.Handle {
+  border: 1px solid var(--pastel-blue);
+  width: 5px;
+  height: 5px;
+  z-index: 1001;
+
+  &.Tick {
+    width: 7px;
+    height: 7px;
+  }
+
+  &.Right {
+    margin-left: 0px;
+  }
+}
+
+.LinkLabel {
   font-size: 9px;
   line-height: 10px;
   padding: 2px 4px;
@@ -109,22 +116,3 @@
   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

@@ -8,6 +8,7 @@ import { ConnectionType, MassState, ShipSizeStatus, SolarSystemConnection, TimeS
 import { PrimeIcons } from 'primereact/api';
 import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
 import { useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
+import { SHIP_SIZES_DESCRIPTION, SHIP_SIZES_NAMES_SHORT } from '@/hooks/Mapper/components/map/constants.ts';
 
 const MAP_TRANSLATES: Record<string, string> = {
   [Position.Top]: 'translate(-48%, 0%)',
@@ -30,6 +31,14 @@ const MAP_OFFSETS: Record<string, { x: number; y: number }> = {
   [Position.Right]: { x: 0, y: 0 },
 };
 
+export const SHIP_SIZES_COLORS = {
+  [ShipSizeStatus.small]: 'bg-indigo-400',
+  [ShipSizeStatus.medium]: 'bg-cyan-500',
+  [ShipSizeStatus.large]: '',
+  [ShipSizeStatus.freight]: 'bg-lime-400',
+  [ShipSizeStatus.capital]: 'bg-red-400',
+};
+
 export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }: EdgeProps<SolarSystemConnection>) => {
   const sourceNode = useStore(useCallback(store => store.nodeInternals.get(source), [source]));
   const targetNode = useStore(useCallback(store => store.nodeInternals.get(target), [target]));
@@ -121,7 +130,7 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
         />
 
         <div
-          className="absolute flex items-center gap-1"
+          className="absolute flex items-center gap-1 pointer-events-none"
           style={{
             transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
           }}
@@ -137,6 +146,19 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
               <span className={clsx(PrimeIcons.LOCK, classes.icon)} />
             </WdTooltipWrapper>
           )}
+
+          {isWormhole && data.ship_size_type !== ShipSizeStatus.large && (
+            <WdTooltipWrapper
+              content={SHIP_SIZES_DESCRIPTION[data.ship_size_type]}
+              className={clsx(
+                classes.LinkLabel,
+                'pointer-events-auto rounded opacity-100 cursor-auto text-neutral-900 font-bold',
+                SHIP_SIZES_COLORS[data.ship_size_type],
+              )}
+            >
+              {SHIP_SIZES_NAMES_SHORT[data.ship_size_type]}
+            </WdTooltipWrapper>
+          )}
         </div>
       </EdgeLabelRenderer>
     </>

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

@@ -1,324 +0,0 @@
-import { memo, useMemo } from 'react';
-import { Handle, Position, WrapNodeProps } from 'reactflow';
-import { MapSolarSystemType } from '../../map.types';
-import classes from './SolarSystemNode.module.scss';
-import clsx from 'clsx';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-
-import {
-  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.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,42 +94,59 @@ $tooltip-bg: #202020; // Dark background for tooltips
   }
 
   &.eve-system-status-home {
-    border: 1px solid darken($eve-solar-system-status-color-home, 30%);
-    background-image: linear-gradient(275deg, $eve-solar-system-status-friendly, transparent);
-
+    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: $eve-solar-system-status-color-home;
+      border-color: var(--eve-solar-system-status-color-home);
     }
   }
 
   &.eve-system-status-friendly {
-    border: 1px solid darken($eve-solar-system-status-color-friendly, 20%);
-    background-image: linear-gradient(275deg, darken($eve-solar-system-status-friendly, 30%), transparent);
-
+    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: darken($eve-solar-system-status-color-friendly, 5%);
+      border-color: var(--eve-solar-system-status-color-friendly-dark5);
     }
   }
 
   &.eve-system-status-lookingFor {
-    border: 1px solid darken($eve-solar-system-status-color-lookingFor, 15%);
+    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, $eve-solar-system-status-warning, transparent);
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-warning),
+      transparent
+    );
   }
 
   &.eve-system-status-dangerous {
-    background-image: linear-gradient(275deg, $eve-solar-system-status-dangerous, transparent);
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-dangerous),
+      transparent
+    );
   }
 
   &.eve-system-status-target {
-    background-image: linear-gradient(275deg, $eve-solar-system-status-target, transparent);
+    background-image: linear-gradient(
+      275deg,
+      var(--eve-solar-system-status-target),
+      transparent
+    );
   }
 }
 
@@ -242,10 +259,10 @@ $tooltip-bg: #202020; // Dark background for tooltips
 
   .TagTitle {
     font-size: 11px;
-    font-weight: bold;
+    font-weight: medium;
     text-shadow: 0 0 2px rgba(231, 146, 52, 0.73);
 
-    color: #ffb01d;
+    color: var(--rf-tag-color, #38BDF8);
   }
 
   /* Firefox kostyl */

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

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

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

@@ -0,0 +1,235 @@
+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 +1,2 @@
-export * from './SolarSystemNode';
+export * from './SolarSystemNodeDefault';
+export * from './SolarSystemNodeTheme';

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

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

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

@@ -1,4 +1,4 @@
-import { ConnectionType, MassState } from '@/hooks/Mapper/types';
+import { ConnectionType, MassState, ShipSizeStatus } from '@/hooks/Mapper/types';
 
 export enum SOLAR_SYSTEM_CLASS_IDS {
   ccp1 = -1,
@@ -727,16 +727,41 @@ export const MASS_STATE_NAMES = {
   [MassState.verge]: 'Verge of collapse',
 };
 
-// export const SHIP_SIZES_NAMES_ORDER = [
-//   ShipSizeStatus.small,
-//   ShipSizeStatus.normal,
-//   // ShipSizeStatus.large,
-//   // ShipSizeStatus.capital,
-// ];
-//
-// export const SHIP_SIZES_NAMES = {
-//   [ShipSizeStatus.small]: 'Frigate',
-//   [ShipSizeStatus.normal]: 'Normal',
-//   // [ShipSizeStatus.large]: 'Normal',
-//   // [ShipSizeStatus.capital]: 'Normal',
-// };
+export const SHIP_SIZES_NAMES_ORDER = [
+  ShipSizeStatus.small,
+  ShipSizeStatus.medium,
+  ShipSizeStatus.large,
+  ShipSizeStatus.freight,
+  ShipSizeStatus.capital,
+];
+
+export const SHIP_SIZES_NAMES = {
+  [ShipSizeStatus.small]: 'Frigate',
+  [ShipSizeStatus.medium]: 'Medium',
+  [ShipSizeStatus.large]: 'Normal',
+  [ShipSizeStatus.freight]: 'Huge',
+  [ShipSizeStatus.capital]: 'Capital',
+};
+export const SHIP_SIZES_SIZE = {
+  [ShipSizeStatus.small]: '5K',
+  [ShipSizeStatus.medium]: '62K',
+  [ShipSizeStatus.large]: '375K',
+  [ShipSizeStatus.freight]: '1M',
+  [ShipSizeStatus.capital]: '2M',
+};
+
+export const SHIP_SIZES_DESCRIPTION = {
+  [ShipSizeStatus.small]: 'Frigate wormhole - up to Destroyer | 5K t.',
+  [ShipSizeStatus.medium]: 'Cruise wormhole - up to Battlecruiser | 62K t.',
+  [ShipSizeStatus.large]: 'Large wormhole - up to Battleship | 375K t.',
+  [ShipSizeStatus.freight]: 'Huge wormhole - up to Freighter | 1M t.',
+  [ShipSizeStatus.capital]: 'Capital wormhole - up to Capital | 2M t.',
+};
+
+export const SHIP_SIZES_NAMES_SHORT = {
+  [ShipSizeStatus.small]: 'S',
+  [ShipSizeStatus.medium]: 'M',
+  [ShipSizeStatus.large]: 'L',
+  [ShipSizeStatus.freight]: 'H',
+  [ShipSizeStatus.capital]: 'XL',
+};

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

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

@@ -0,0 +1,189 @@
+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 } = useMapRootState();
+  const { isShowUnsplashedSignatures } = interfaceSettings;
+  const isTempSystemNameEnabled = useMapGetOption('show_temp_system_name') === 'true';
+  const isShowLinkedSigId = useMapGetOption('show_linked_signature_id') === '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 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(
+    () =>
+      isShowLinkedSigId && linkedSigPrefix
+        ? `${linkedSigPrefix}・${labelsManager.customLabel}`
+        : 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 systemName = (isTempSystemNameEnabled && temporary_name) || solar_system_name;
+  const customName = (isTempSystemNameEnabled && temporary_name && name) || (solar_system_name !== name && name);
+
+  const [unsplashedLeft, unsplashedRight] = useMemo(() => {
+    if (!isShowUnsplashedSignatures) {
+      return [[], []];
+    }
+    return prepareUnsplashedChunks(
+      system_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, system_signatures]);
+
+  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/map.types.ts

@@ -1,5 +1,6 @@
 import { SolarSystemRawType } from '@/hooks/Mapper/types/system';
 import { SolarSystemConnection } from '@/hooks/Mapper/types';
+import { XYPosition } from 'reactflow';
 
 export type MapSolarSystemType = Omit<SolarSystemRawType, 'position'>;
 
@@ -7,3 +8,5 @@ export type OnMapSelectionChange = (event: {
   systems: string[];
   connections: Pick<SolarSystemConnection, 'source' | 'target'>[];
 }) => void;
+
+export type OnMapAddSystemCallback = (props: { coordinates: XYPosition | null }) => void;

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

@@ -0,0 +1,31 @@
+@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,78 +1,121 @@
-$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;
+$friendlyBase: #3bbd39;              
+$friendlyAlpha: #3bbd3952;           
+$friendlyDark20: darken($friendlyBase, 20%);
+$friendlyDark30: darken($friendlyBase, 30%);
+$friendlyDark5:  darken($friendlyBase, 5%);
 
-$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;
+$lookingForBase: #43c2fd;            
+$lookingForAlpha: rgba(67, 176, 253, 0.48);
+$lookingForDark15: darken($lookingForBase, 15%);
 
-$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;
+$homeBase: rgb(197, 253, 67);
+$homeAlpha: rgba(197, 253, 67, 0.32);
+$homeDark30: darken($homeBase, 30%);
 
-$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-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);
+: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-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);
+  --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);
+}

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

@@ -1,535 +1,504 @@
-@import "eve-common-variables";
+@import './eve-common-variables';
+
 
 .eve-wh-effect-color-pulsar {
-  fill: $eve-effect-pulsar;
-  background-color: $eve-effect-pulsar;
+  fill: var(--eve-effect-pulsar);
+  background-color: var(--eve-effect-pulsar);
 }
 
 .eve-wh-effect-color-magnetar {
-  fill: $eve-effect-magnetar;
-  background-color: $eve-effect-magnetar;
+  fill: var(--eve-effect-magnetar);
+  background-color: var(--eve-effect-magnetar);
 }
 
 .eve-wh-effect-color-wolfRayet {
-  fill: $eve-effect-wolfRayet;
-  background-color: $eve-effect-wolfRayet;
+  fill: var(--eve-effect-wolfRayet);
+  background-color: var(--eve-effect-wolfRayet);
 }
 
 .eve-wh-effect-color-blackHole {
-  fill: $eve-effect-blackHole;
-  background-color: $eve-effect-blackHole;
-  box-shadow: 0 0 8px rgba(255 255 255 / 33);
+  fill: var(--eve-effect-blackHole);
+  background-color: var(--eve-effect-blackHole);
+  box-shadow: 0 0 8px rgba(255, 255, 255, 0.33);
 }
 
 .eve-wh-effect-color-cataclysmicVariable {
-  fill: $eve-effect-cataclysmicVariable;
-  background-color: $eve-effect-cataclysmicVariable;
+  fill: var(--eve-effect-cataclysmicVariable);
+  background-color: var(--eve-effect-cataclysmicVariable);
 }
 
 .eve-wh-effect-color-redGiant {
-  fill: $eve-effect-redGiant;
-  background-color: $eve-effect-redGiant;
+  fill: var(--eve-effect-redGiant);
+  background-color: var(--eve-effect-redGiant);
 }
 
 .text-eve-wh-effect-color-pulsar {
-  color: $eve-effect-pulsar;
+  color: var(--eve-effect-pulsar);
 }
-
 .text-eve-wh-effect-color-magnetar {
-  color: $eve-effect-magnetar;
+  color: var(--eve-effect-magnetar);
 }
-
 .text-eve-wh-effect-color-wolfRayet {
-  color: $eve-effect-wolfRayet;
+  color: var(--eve-effect-wolfRayet);
 }
-
 .text-eve-wh-effect-color-blackHole {
   color: #fff;
 }
-
 .text-eve-wh-effect-color-cataclysmicVariable {
-  color: $eve-effect-cataclysmicVariable;
+  color: var(--eve-effect-cataclysmicVariable);
 }
-
 .text-eve-wh-effect-color-redGiant {
-  color: $eve-effect-redGiant;
+  color: var(--eve-effect-redGiant);
 }
-
 .text-eve-wh-effect-color-dazhLiminalityLocus {
-  color: $eve-effect-dazhLiminalityLocus;
+  color: var(--eve-effect-dazhLiminalityLocus);
 }
-
 .text-eve-wh-effect-color-imperialStellarObservatory {
-  color: $eve-effect-imperialStellarObservatory;
+  color: var(--eve-effect-imperialStellarObservatory);
 }
-
 .text-eve-wh-effect-color-stateStellarObservatory {
-  color: $eve-effect-stateStellarObservatory;
+  color: var(--eve-effect-stateStellarObservatory);
 }
-
 .text-eve-wh-effect-color-republicStellarObservatory {
-  color: $eve-effect-republicStellarObservatory;
+  color: var(--eve-effect-republicStellarObservatory);
 }
-
 .text-eve-wh-effect-color-federalStellarObservatory {
-  color: $eve-effect-federalStellarObservatory;
+  color: var(--eve-effect-federalStellarObservatory);
 }
 
+/* Security color classes */
 .eve-security-color-10 {
-  color: $eve-security-color-10 !important;
-  fill: $eve-security-color-10;
+  color: var(--eve-security-color-10) !important;
+  fill: var(--eve-security-color-10);
 }
-
 .eve-security-color-09 {
-  color: $eve-security-color-09 !important;
-  fill: $eve-security-color-09;
+  color: var(--eve-security-color-09) !important;
+  fill: var(--eve-security-color-09);
 }
-
 .eve-security-color-08 {
-  color: $eve-security-color-08 !important;
-  fill: $eve-security-color-08;
+  color: var(--eve-security-color-08) !important;
+  fill: var(--eve-security-color-08);
 }
-
 .eve-security-color-07 {
-  color: $eve-security-color-07 !important;
-  fill: $eve-security-color-07;
+  color: var(--eve-security-color-07) !important;
+  fill: var(--eve-security-color-07);
 }
-
 .eve-security-color-06 {
-  color: $eve-security-color-06 !important;
-  fill: $eve-security-color-06;
+  color: var(--eve-security-color-06) !important;
+  fill: var(--eve-security-color-06);
 }
-
 .eve-security-color-05 {
-  color: $eve-security-color-05 !important;
-  fill: $eve-security-color-05;
+  color: var(--eve-security-color-05) !important;
+  fill: var(--eve-security-color-05);
 }
-
 .eve-security-color-04 {
-  color: $eve-security-color-04 !important;
-  fill: $eve-security-color-04;
+  color: var(--eve-security-color-04) !important;
+  fill: var(--eve-security-color-04);
 }
-
 .eve-security-color-03 {
-  color: $eve-security-color-03 !important;
-  fill: $eve-security-color-03;
+  color: var(--eve-security-color-03) !important;
+  fill: var(--eve-security-color-03);
 }
-
 .eve-security-color-02 {
-  color: $eve-security-color-02 !important;
-  fill: $eve-security-color-02;
+  color: var(--eve-security-color-02) !important;
+  fill: var(--eve-security-color-02);
 }
-
 .eve-security-color-01 {
-  color: $eve-security-color-01 !important;
-  fill: $eve-security-color-01;
+  color: var(--eve-security-color-01) !important;
+  fill: var(--eve-security-color-01);
 }
-
 .eve-security-color-00 {
-  color: $eve-security-color-00 !important;
-  fill: $eve-security-color-00;
+  color: var(--eve-security-color-00) !important;
+  fill: var(--eve-security-color-00);
 }
-
 .eve-security-color-m-01 {
-  color: $eve-security-color-m-01 !important;
-  fill: $eve-security-color-m-01;
+  color: var(--eve-security-color-m-01) !important;
+  fill: var(--eve-security-color-m-01);
 }
-
 .eve-security-color-m-02 {
-  color: $eve-security-color-m-02 !important;
-  fill: $eve-security-color-m-02;
+  color: var(--eve-security-color-m-02) !important;
+  fill: var(--eve-security-color-m-02);
 }
-
 .eve-security-color-m-03 {
-  color: $eve-security-color-m-03 !important;
-  fill: $eve-security-color-m-03;
+  color: var(--eve-security-color-m-03) !important;
+  fill: var(--eve-security-color-m-03);
 }
-
 .eve-security-color-m-04 {
-  color: $eve-security-color-m-04 !important;
-  fill: $eve-security-color-m-04;
+  color: var(--eve-security-color-m-04) !important;
+  fill: var(--eve-security-color-m-04);
 }
-
 .eve-security-color-m-05 {
-  color: $eve-security-color-m-05 !important;
-  fill: $eve-security-color-m-05;
+  color: var(--eve-security-color-m-05) !important;
+  fill: var(--eve-security-color-m-05);
 }
-
 .eve-security-color-m-06 {
-  color: $eve-security-color-m-06 !important;
-  fill: $eve-security-color-m-06;
+  color: var(--eve-security-color-m-06) !important;
+  fill: var(--eve-security-color-m-06);
 }
-
 .eve-security-color-m-07 {
-  color: $eve-security-color-m-07 !important;
-  fill: $eve-security-color-m-07;
+  color: var(--eve-security-color-m-07) !important;
+  fill: var(--eve-security-color-m-07);
 }
-
 .eve-security-color-m-08 {
-  color: $eve-security-color-m-08 !important;
-  fill: $eve-security-color-m-08;
+  color: var(--eve-security-color-m-08) !important;
+  fill: var(--eve-security-color-m-08);
 }
-
 .eve-security-color-m-09 {
-  color: $eve-security-color-m-09 !important;
-  fill: $eve-security-color-m-09;
+  color: var(--eve-security-color-m-09) !important;
+  fill: var(--eve-security-color-m-09);
 }
-
 .eve-security-color-m-10 {
-  color: $eve-security-color-m-10 !important;
-  fill: $eve-security-color-m-10;
+  color: var(--eve-security-color-m-10) !important;
+  fill: var(--eve-security-color-m-10);
 }
 
+/* Security backgrounds */
 .eve-security-background-10 {
-  background-color: $eve-security-color-10;
-  fill: $eve-security-color-10;
+  background-color: var(--eve-security-color-10);
+  fill: var(--eve-security-color-10);
 }
-
 .eve-security-background-09 {
-  background-color: $eve-security-color-09;
-  fill: $eve-security-color-09;
+  background-color: var(--eve-security-color-09);
+  fill: var(--eve-security-color-09);
 }
-
 .eve-security-background-08 {
-  background-color: $eve-security-color-08;
-  fill: $eve-security-color-08;
+  background-color: var(--eve-security-color-08);
+  fill: var(--eve-security-color-08);
 }
-
 .eve-security-background-07 {
-  background-color: $eve-security-color-07;
-  fill: $eve-security-color-07;
+  background-color: var(--eve-security-color-07);
+  fill: var(--eve-security-color-07);
 }
-
 .eve-security-background-06 {
-  background-color: $eve-security-color-06;
-  fill: $eve-security-color-06;
+  background-color: var(--eve-security-color-06);
+  fill: var(--eve-security-color-06);
 }
-
 .eve-security-background-05 {
-  background-color: $eve-security-color-05;
-  fill: $eve-security-color-05;
+  background-color: var(--eve-security-color-05);
+  fill: var(--eve-security-color-05);
 }
-
 .eve-security-background-04 {
-  background-color: $eve-security-color-04;
-  fill: $eve-security-color-04;
+  background-color: var(--eve-security-color-04);
+  fill: var(--eve-security-color-04);
 }
-
 .eve-security-background-03 {
-  background-color: $eve-security-color-03;
-  fill: $eve-security-color-03;
+  background-color: var(--eve-security-color-03);
+  fill: var(--eve-security-color-03);
 }
-
 .eve-security-background-02 {
-  background-color: $eve-security-color-02;
-  fill: $eve-security-color-02;
+  background-color: var(--eve-security-color-02);
+  fill: var(--eve-security-color-02);
 }
-
 .eve-security-background-01 {
-  background-color: $eve-security-color-01;
-  fill: $eve-security-color-01;
+  background-color: var(--eve-security-color-01);
+  fill: var(--eve-security-color-01);
 }
-
 .eve-security-background-00 {
-  background-color: $eve-security-color-00;
-  fill: $eve-security-color-00;
+  background-color: var(--eve-security-color-00);
+  fill: var(--eve-security-color-00);
 }
-
 .eve-security-background-m-01 {
-  background-color: $eve-security-color-m-01;
-  fill: $eve-security-color-m-01;
+  background-color: var(--eve-security-color-m-01);
+  fill: var(--eve-security-color-m-01);
 }
-
 .eve-security-background-m-02 {
-  background-color: $eve-security-color-m-02;
-  fill: $eve-security-color-m-02;
+  background-color: var(--eve-security-color-m-02);
+  fill: var(--eve-security-color-m-02);
 }
-
 .eve-security-background-m-03 {
-  background-color: $eve-security-color-m-03;
-  fill: $eve-security-color-m-03;
+  background-color: var(--eve-security-color-m-03);
+  fill: var(--eve-security-color-m-03);
 }
-
 .eve-security-background-m-04 {
-  background-color: $eve-security-color-m-04;
-  fill: $eve-security-color-m-04;
+  background-color: var(--eve-security-color-m-04);
+  fill: var(--eve-security-color-m-04);
 }
-
 .eve-security-background-m-05 {
-  background-color: $eve-security-color-m-05;
-  fill: $eve-security-color-m-05;
+  background-color: var(--eve-security-color-m-05);
+  fill: var(--eve-security-color-m-05);
 }
-
 .eve-security-background-m-06 {
-  background-color: $eve-security-color-m-06;
-  fill: $eve-security-color-m-06;
+  background-color: var(--eve-security-color-m-06);
+  fill: var(--eve-security-color-m-06);
 }
-
 .eve-security-background-m-07 {
-  background-color: $eve-security-color-m-07;
-  fill: $eve-security-color-m-07;
+  background-color: var(--eve-security-color-m-07);
+  fill: var(--eve-security-color-m-07);
 }
-
 .eve-security-background-m-08 {
-  background-color: $eve-security-color-m-08;
-  fill: $eve-security-color-m-08;
+  background-color: var(--eve-security-color-m-08);
+  fill: var(--eve-security-color-m-08);
 }
-
 .eve-security-background-m-09 {
-  background-color: $eve-security-color-m-09;
-  fill: $eve-security-color-m-09;
+  background-color: var(--eve-security-color-m-09);
+  fill: var(--eve-security-color-m-09);
 }
-
 .eve-security-background-m-10 {
-  background-color: $eve-security-color-m-10;
-  fill: $eve-security-color-m-10;
+  background-color: var(--eve-security-color-m-10);
+  fill: var(--eve-security-color-m-10);
 }
 
+/* WH Type color classes */
 .eve-wh-type-color-high {
-  color: $eve-wh-type-color-high;
-  fill: $eve-wh-type-color-high;
+  color: var(--eve-wh-type-color-high) !important;
+  fill: var(--eve-wh-type-color-high);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-low {
-  color: $eve-wh-type-color-low;
-  fill: $eve-wh-type-color-low;
+  color: var(--eve-wh-type-color-low) !important;
+  fill: var(--eve-wh-type-color-low);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-null {
-  color: $eve-wh-type-color-null;
-  fill: $eve-wh-type-color-null;
+  color: var(--eve-wh-type-color-null) !important;
+  fill: var(--eve-wh-type-color-null);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-c1 {
-  color: $eve-wh-type-color-c1 !important;
-  fill: $eve-wh-type-color-c1;
+  color: var(--eve-wh-type-color-c1) !important;
+  fill: var(--eve-wh-type-color-c1);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-c2 {
-  color: $eve-wh-type-color-c2 !important;
-  fill: $eve-wh-type-color-c2;
+  color: var(--eve-wh-type-color-c2) !important;
+  fill: var(--eve-wh-type-color-c2);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-c3 {
-  color: $eve-wh-type-color-c3 !important;
-  fill: $eve-wh-type-color-c3;
+  color: var(--eve-wh-type-color-c3) !important;
+  fill: var(--eve-wh-type-color-c3);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-c4 {
-  color: $eve-wh-type-color-c4 !important;
-  fill: $eve-wh-type-color-c4;
+  color: var(--eve-wh-type-color-c4) !important;
+  fill: var(--eve-wh-type-color-c4);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-c5 {
-  color: $eve-wh-type-color-c5 !important;
-  fill: $eve-wh-type-color-c5;
+  color: var(--eve-wh-type-color-c5) !important;
+  fill: var(--eve-wh-type-color-c5);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-c6 {
-  color: $eve-wh-type-color-c6 !important;
-  fill: $eve-wh-type-color-c6;
+  color: var(--eve-wh-type-color-c6) !important;
+  fill: var(--eve-wh-type-color-c6);
   font-weight: bold !important;
 }
-
 .eve-wh-type-color-c13 {
-  color: $eve-wh-type-color-c13 !important;
-  fill: $eve-wh-type-color-c13;
+  color: var(--eve-wh-type-color-c13) !important;
+  fill: var(--eve-wh-type-color-c13);
 }
-
 .eve-wh-type-color-drifter {
-  color: $eve-wh-type-color-drifter !important;
-  fill: $eve-wh-type-color-drifter;
+  color: var(--eve-wh-type-color-drifter) !important;
+  fill: var(--eve-wh-type-color-drifter);
 }
-
 .eve-wh-type-color-thera {
-  color: $eve-wh-type-color-thera !important;
-  fill: $eve-wh-type-color-thera;
+  color: var(--eve-wh-type-color-thera) !important;
+  fill: var(--eve-wh-type-color-thera);
 }
 
+/* WH Type backgrounds */
 .eve-wh-type-background-high {
-  background-color: $eve-wh-type-color-high;
+  background-color: var(--eve-wh-type-color-high);
 }
-
 .eve-wh-type-background-low {
-  background-color: $eve-wh-type-color-low;
+  background-color: var(--eve-wh-type-color-low);
 }
-
 .eve-wh-type-background-null {
-  background-color: $eve-wh-type-color-null;
+  background-color: var(--eve-wh-type-color-null);
 }
-
 .eve-wh-type-background-c1 {
-  background-color: $eve-wh-type-color-c1;
+  background-color: var(--eve-wh-type-color-c1);
 }
-
 .eve-wh-type-background-c2 {
-  background-color: $eve-wh-type-color-c2;
+  background-color: var(--eve-wh-type-color-c2);
 }
-
 .eve-wh-type-background-c3 {
-  background-color: $eve-wh-type-color-c3;
+  background-color: var(--eve-wh-type-color-c3);
 }
-
 .eve-wh-type-background-c4 {
-  background-color: $eve-wh-type-color-c4;
+  background-color: var(--eve-wh-type-color-c4);
 }
-
 .eve-wh-type-background-c5 {
-  background-color: $eve-wh-type-color-c5;
+  background-color: var(--eve-wh-type-color-c5);
 }
-
 .eve-wh-type-background-c6 {
-  background-color: $eve-wh-type-color-c6;
+  background-color: var(--eve-wh-type-color-c6);
 }
-
 .eve-wh-type-background-c13 {
-  background-color: $eve-wh-type-color-c13;
+  background-color: var(--eve-wh-type-color-c13);
 }
-
 .eve-wh-type-background-drifter {
-  background-color: $eve-wh-type-color-drifter;
+  background-color: var(--eve-wh-type-color-drifter);
 }
-
 .eve-wh-type-background-thera {
-  background-color: $eve-wh-type-color-thera;
+  background-color: var(--eve-wh-type-color-thera);
 }
-
 .eve-wh-type-background-zarzakh {
-  background-color: $eve-wh-type-color-zarzakh;
+  background-color: var(--eve-wh-type-color-zarzakh);
 }
 
+/* Kind color classes */
 .eve-kind-color-high {
-  color: $eve-wh-type-color-high;
-  fill: $eve-wh-type-color-high;
+  color: var(--eve-wh-type-color-high);
+  fill: var(--eve-wh-type-color-high);
 }
-
 .eve-kind-color-low {
-  color: $eve-wh-type-color-low;
-  fill: $eve-wh-type-color-low;
+  color: var(--eve-wh-type-color-low);
+  fill: var(--eve-wh-type-color-low);
   font-weight: bold;
 }
-
 .eve-kind-color-null {
-  color: $eve-wh-type-color-null;
-  fill: $eve-wh-type-color-null;
+  color: var(--eve-wh-type-color-null);
+  fill: var(--eve-wh-type-color-null);
 }
-
 .eve-kind-color-wh {
-  color: $eve-wh-type-color-c6;
-  fill: $eve-wh-type-color-c6;
+  color: var(--eve-wh-type-color-c6);
+  fill: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-color-thera {
-  color: $eve-wh-type-color-thera;
-  fill: $eve-wh-type-color-thera;
+  color: var(--eve-wh-type-color-thera);
+  fill: var(--eve-wh-type-color-thera);
 }
-
 .eve-kind-color-abyss {
-  color: $eve-wh-type-color-c6;
-  fill: $eve-wh-type-color-c6;
+  color: var(--eve-wh-type-color-c6);
+  fill: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-color-penalty {
-  color: $eve-wh-type-color-c6;
-  fill: $eve-wh-type-color-c6;
+  color: var(--eve-wh-type-color-c6);
+  fill: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-color-pochven {
-  color: $eve-wh-type-color-c6;
-  fill: $eve-wh-type-color-c6;
+  color: var(--eve-wh-type-color-c6);
+  fill: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-color-zarzakh {
-  color: $eve-wh-type-color-zarzakh;
-  fill: $eve-wh-type-color-zarzakh;
+  color: var(--eve-wh-type-color-zarzakh);
+  fill: var(--eve-wh-type-color-zarzakh);
 }
 
+/* Kind backgrounds */
 .eve-kind-background-high {
-  background-color: $eve-wh-type-color-high;
+  background-color: var(--eve-wh-type-color-high);
 }
-
 .eve-kind-background-low {
-  background-color: $eve-wh-type-color-low;
+  background-color: var(--eve-wh-type-color-low);
 }
-
 .eve-kind-background-null {
-  background-color: $eve-wh-type-color-null;
+  background-color: var(--eve-wh-type-color-null);
 }
-
 .eve-kind-background-wh {
-  background-color: $eve-wh-type-color-c6;
+  background-color: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-background-thera {
-  background-color: $eve-wh-type-color-thera;
+  background-color: var(--eve-wh-type-color-thera);
 }
-
 .eve-kind-background-abyss {
-  background-color: $eve-wh-type-color-c6;
+  background-color: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-background-penalty {
-  background-color: $eve-wh-type-color-c6;
+  background-color: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-background-pochven {
-  background-color: $eve-wh-type-color-c6;
+  background-color: var(--eve-wh-type-color-c6);
 }
-
 .eve-kind-background-zarzakh {
-  background-color: $eve-wh-type-color-zarzakh;
+  background-color: var(--eve-wh-type-color-zarzakh);
 }
 
+/* System status color classes */
 .eve-system-status-color-clear {
-  color: $eve-solar-system-status-color-unknown;
+  color: var(--eve-solar-system-status-color-unknown);
 }
-
 .eve-system-status-color-home {
-  color: $eve-solar-system-status-color-home;
+  color: var(--eve-solar-system-status-color-home);
 }
-
 .eve-system-status-color-friendly {
-  color: $eve-solar-system-status-color-friendly;
+  color: var(--eve-solar-system-status-color-friendly);
 }
-
 .eve-system-status-color-lookingFor {
-  color: $eve-solar-system-status-color-lookingFor;
+  color: var(--eve-solar-system-status-color-lookingFor);
 }
-
 .eve-system-status-color-warning {
-  color: $eve-solar-system-status-color-warning;
+  color: var(--eve-solar-system-status-color-warning);
 }
-
 .eve-system-status-color-target {
-  color: $eve-solar-system-status-color-target;
+  color: var(--eve-solar-system-status-color-target);
+}
+.eve-system-status-color-dangerous {
+  color: var(--eve-solar-system-status-color-dangerous);
 }
 
-.eve-system-status-color-dangerous {
-  color: $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);
 }
 
 .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;
@@ -572,3 +541,49 @@
 .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

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

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

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

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

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

@@ -0,0 +1,11 @@
+// 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/components/AddSystemDialog/AddSystemDialog.module.scss

@@ -0,0 +1,10 @@
+.SearchItem {
+  & > * {
+    font-size: 13px !important;
+  }
+}
+
+.SearchItemEffect {
+  font-weight: initial !important;
+}
+

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

@@ -0,0 +1,203 @@
+import { Dialog } from 'primereact/dialog';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useCallback, useRef, useState } from 'react';
+import { Button } from 'primereact/button';
+import { IconField } from 'primereact/iconfield';
+import { AutoComplete } from 'primereact/autocomplete';
+import { OutCommand, SearchSystemItem } from '@/hooks/Mapper/types';
+import { SystemViewStandalone, WHClassView, WHEffectView } from '@/hooks/Mapper/components/ui-kit';
+import classes from './AddSystemDialog.module.scss';
+
+import clsx from 'clsx';
+import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace.ts';
+import { sortWHClasses } from '@/hooks/Mapper/helpers';
+
+export type SearchOnSubmitCallback = (item: SearchSystemItem) => void;
+
+interface AddSystemDialogProps {
+  title?: string;
+  visible: boolean;
+  setVisible: (visible: boolean) => void;
+  onSubmit?: SearchOnSubmitCallback;
+  excludedSystems?: number[];
+}
+
+export const AddSystemDialog = ({
+  title = 'Add system',
+  visible,
+  setVisible,
+  onSubmit,
+  excludedSystems = [],
+}: AddSystemDialogProps) => {
+  const {
+    outCommand,
+    data: { wormholesData },
+  } = useMapRootState();
+
+  const inputRef = useRef<any>();
+  const onShow = useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const [filteredItems, setFilteredItems] = useState<SearchSystemItem[]>([]);
+  const [selectedItem, setSelectedItem] = useState<SearchSystemItem[] | null>(null);
+
+  const searchItems = useCallback(
+    async (event: { query: string }) => {
+      if (event.query.length < 2) {
+        setFilteredItems([]);
+        return;
+      }
+
+      const query = event.query;
+
+      if (query.length === 0) {
+        setFilteredItems([]);
+      } else {
+        try {
+          const result = await outCommand({
+            type: OutCommand.searchSystems,
+            data: {
+              text: query,
+            },
+          });
+
+          let prepared = (result.systems as SearchSystemItem[]).sort((a, b) => {
+            const amatch = a.label.indexOf(query);
+            const bmatch = b.label.indexOf(query);
+            return amatch - bmatch;
+          });
+
+          if (excludedSystems) {
+            prepared = prepared.filter(x => !excludedSystems.includes(x.system_static_info.solar_system_id));
+          }
+
+          setFilteredItems(prepared);
+        } catch (error) {
+          console.error('Error fetching data:', error);
+          setFilteredItems([]);
+        }
+      }
+    },
+    [excludedSystems, outCommand],
+  );
+
+  const ref = useRef({ onSubmit, selectedItem });
+  ref.current = { onSubmit, selectedItem };
+
+  const handleSubmit = useCallback(() => {
+    const { onSubmit, selectedItem } = ref.current;
+    setFilteredItems([]);
+    setSelectedItem([]);
+
+    if (!selectedItem) {
+      setVisible(false);
+      return;
+    }
+
+    onSubmit?.(selectedItem[0]);
+    setVisible(false);
+  }, [setVisible]);
+
+  return (
+    <Dialog
+      header={title}
+      visible={visible}
+      draggable={false}
+      style={{ width: '520px' }}
+      onShow={onShow}
+      onHide={() => {
+        if (!visible) {
+          return;
+        }
+
+        setVisible(false);
+      }}
+    >
+      <div className="flex flex-col gap-3 px-1.5">
+        <div className="flex flex-col gap-2 py-3.5">
+          <div className="flex flex-col gap-1">
+            <IconField>
+              <AutoComplete
+                ref={inputRef}
+                multiple
+                showEmptyMessage
+                scrollHeight="300px"
+                value={selectedItem}
+                suggestions={filteredItems}
+                completeMethod={searchItems}
+                onChange={e => {
+                  setSelectedItem(e.value.length < 2 ? e.value : [e.value[e.value.length - 1]]);
+                }}
+                emptyMessage="Not found any system..."
+                placeholder="Type here..."
+                field="label"
+                id="value"
+                className="w-full"
+                itemTemplate={(item: SearchSystemItem) => {
+                  const { security, system_class, effect_power, effect_name, statics } = item.system_static_info;
+                  const sortedStatics = sortWHClasses(wormholesData, statics);
+                  const isWH = isWormholeSpace(system_class);
+
+                  return (
+                    <div className={clsx('flex gap-1.5', classes.SearchItem)}>
+                      <SystemViewStandalone
+                        security={security}
+                        system_class={system_class}
+                        solar_system_id={item.value}
+                        class_title={item.class_title}
+                        solar_system_name={item.label}
+                        region_name={item.region_name}
+                      />
+
+                      {effect_name && isWH && (
+                        <WHEffectView
+                          effectName={effect_name}
+                          effectPower={effect_power}
+                          className={classes.SearchItemEffect}
+                        />
+                      )}
+
+                      {isWH && (
+                        <div className="flex gap-1 grow justify-between">
+                          <div></div>
+                          <div className="flex gap-1">
+                            {sortedStatics.map(x => (
+                              <WHClassView key={x} whClassName={x} />
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  );
+                }}
+                selectedItemTemplate={(item: SearchSystemItem) => (
+                  <SystemViewStandalone
+                    security={item.system_static_info.security}
+                    system_class={item.system_static_info.system_class}
+                    solar_system_id={item.value}
+                    class_title={item.class_title}
+                    solar_system_name={item.label}
+                    region_name={item.region_name}
+                  />
+                )}
+              />
+            </IconField>
+
+            <span className="text-[12px] text-stone-400 ml-1">*to search type at least 2 symbols.</span>
+          </div>
+        </div>
+
+        <div className="flex gap-2 justify-end">
+          <Button
+            onClick={handleSubmit}
+            outlined
+            disabled={!selectedItem || selectedItem.length !== 1}
+            size="small"
+            label="Submit"
+          />
+        </div>
+      </div>
+    </Dialog>
+  );
+};

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

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

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

@@ -3,6 +3,7 @@ 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';
@@ -22,30 +23,21 @@ 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>();
 
-  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 ref = useRef({ name, description, temporaryName, label, outCommand, systemId, system });
+  ref.current = { name, description, label, temporaryName, outCommand, systemId, system };
 
   const handleSave = useCallback(() => {
-    const { name, description, label, outCommand, systemId, system } = ref.current;
+    const { name, description, label, temporaryName, outCommand, systemId, system } = ref.current;
 
     const outLabel = new LabelsManager(system?.labels ?? '');
     outLabel.updateCustomLabel(label);
@@ -58,6 +50,14 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
       },
     });
 
+    outCommand({
+      type: OutCommand.updateSystemTemporaryName,
+      data: {
+        system_id: systemId,
+        value: temporaryName,
+      },
+    });
+
     outCommand({
       type: OutCommand.updateSystemName,
       data: {
@@ -93,6 +93,21 @@ 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"
@@ -167,6 +182,35 @@ 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/widgets/RoutesWidget/RoutesList/RoutesList.module.scss

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

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

@@ -21,6 +21,11 @@ import { RoutesProvider, useRouteProvider } from './RoutesProvider.tsx';
 import { ContextMenuSystemInfo, useContextMenuSystemInfoHandlers } from '@/hooks/Mapper/components/contexts';
 import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
 import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
+import {
+  AddSystemDialog,
+  SearchOnSubmitCallback,
+} from '@/hooks/Mapper/components/mapInterface/components/AddSystemDialog';
+import { OutCommand } from '@/hooks/Mapper/types';
 
 const sortByDist = (a: Route, b: Route) => {
   const distA = a.has_connection ? a.systems?.length || 0 : Infinity;
@@ -163,6 +168,12 @@ export const RoutesWidgetContent = () => {
 export const RoutesWidgetComp = () => {
   const [routeSettingsVisible, setRouteSettingsVisible] = useState(false);
   const { data, update } = useRouteProvider();
+  const {
+    data: { hubs = [] },
+    outCommand,
+  } = useMapRootState();
+
+  const preparedHubs = useMemo(() => hubs.map(x => parseInt(x)), [hubs]);
 
   const isSecure = data.path_type === 'secure';
   const handleSecureChange = useCallback(() => {
@@ -174,6 +185,23 @@ export const RoutesWidgetComp = () => {
 
   const ref = useRef<HTMLDivElement>(null);
   const compact = useMaxWidth(ref, 155);
+  const [openAddSystem, setOpenAddSystem] = useState<boolean>(false);
+
+  const onAddSystem = useCallback(() => setOpenAddSystem(true), []);
+
+  const handleSubmitAddSystem: SearchOnSubmitCallback = useCallback(
+    async item => {
+      if (preparedHubs.includes(item.value)) {
+        return;
+      }
+
+      await outCommand({
+        type: OutCommand.addHub,
+        data: { system_id: item.value },
+      });
+    },
+    [hubs, outCommand],
+  );
 
   return (
     <Widget
@@ -181,6 +209,14 @@ export const RoutesWidgetComp = () => {
         <div className="flex justify-between items-center text-xs w-full" ref={ref}>
           <span className="select-none">Routes</span>
           <LayoutEventBlocker className="flex items-center gap-2">
+            <WdImgButton
+              className={PrimeIcons.PLUS_CIRCLE}
+              onClick={onAddSystem}
+              tooltip={{
+                content: 'Click here to add new system to routes',
+              }}
+            />
+
             <WdTooltipWrapper content="Show shortest route">
               <WdCheckbox
                 size="xs"
@@ -191,13 +227,26 @@ export const RoutesWidgetComp = () => {
                 classNameLabel={clsx('text-red-400')}
               />
             </WdTooltipWrapper>
-            <WdImgButton className={PrimeIcons.SLIDERS_H} onClick={() => setRouteSettingsVisible(true)} />
+            <WdImgButton
+              className={PrimeIcons.SLIDERS_H}
+              onClick={() => setRouteSettingsVisible(true)}
+              tooltip={{
+                content: 'Click here to open Routes settings',
+              }}
+            />
           </LayoutEventBlocker>
         </div>
       }
     >
       <RoutesWidgetContent />
       <RoutesSettingsDialog visible={routeSettingsVisible} setVisible={setRouteSettingsVisible} />
+
+      <AddSystemDialog
+        title="Add system to routes"
+        visible={openAddSystem}
+        setVisible={() => setOpenAddSystem(false)}
+        onSubmit={handleSubmitAddSystem}
+      />
     </Widget>
   );
 };

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

@@ -2,25 +2,26 @@ import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
 import {
   InfoDrawer,
   LayoutEventBlocker,
+  SystemView,
   TooltipPosition,
-  WdImgButton,
   WdCheckbox,
+  WdImgButton,
 } from '@/hooks/Mapper/components/ui-kit';
 import { SystemSignaturesContent } from './SystemSignaturesContent';
 import {
-  Setting,
-  SystemSignatureSettingsDialog,
-  COSMIC_SIGNATURE,
   COSMIC_ANOMALY,
+  COSMIC_SIGNATURE,
   DEPLOYABLE,
-  STRUCTURE,
-  STARBASE,
-  SHIP,
   DRONE,
+  Setting,
+  SHIP,
+  STARBASE,
+  STRUCTURE,
+  SystemSignatureSettingsDialog,
 } from './SystemSignatureSettingsDialog';
 import { SignatureGroup } from '@/hooks/Mapper/types';
 
-import React, { useCallback, useEffect, useState, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { PrimeIcons } from 'primereact/api';
 
@@ -105,7 +106,14 @@ export const SystemSignatures = () => {
     <Widget
       label={
         <div className="flex justify-between items-center text-xs w-full h-full" ref={ref}>
-          <div className="flex gap-1 whitespace-nowrap text-ellipsis overflow-hidden">System Signatures</div>
+          <div className="flex justify-between items-center gap-1">
+            {!compact && (
+              <div className="flex whitespace-nowrap text-ellipsis overflow-hidden text-stone-400">
+                Signatures {isNotSelectedSystem ? '' : 'in'}
+              </div>
+            )}
+            {!isNotSelectedSystem && <SystemView systemId={systemId} className="select-none text-center" hideRegion />}
+          </div>
 
           <LayoutEventBlocker className="flex gap-2.5">
             <WdTooltipWrapper content="Enable Lazy delete">

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

@@ -2,7 +2,10 @@ 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 { GROUPS_LIST } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
+import {
+  getGroupIdByRawGroup,
+  GROUPS_LIST,
+} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
 
 import { DataTable, DataTableRowClickEvent, DataTableRowMouseEvent, SortOrder } from 'primereact/datatable';
 import { Column } from 'primereact/column';
@@ -122,13 +125,14 @@ 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 === x.group)?.value;
+            return !x.group || groupSettings.find(y => y.key === preparedGroup)?.value;
           } else {
-            return !!x.group && groupSettings.find(y => y.key === x.group)?.value;
+            return !!x.group && groupSettings.find(y => y.key === preparedGroup)?.value;
           }
         }
 

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

@@ -1,4 +1,12 @@
-import { GroupType, SignatureGroup } from '@/hooks/Mapper/types';
+import {
+  GroupType,
+  SignatureGroup,
+  SignatureGroupENG,
+  SignatureGroupRU,
+  SignatureKind,
+  SignatureKindENG,
+  SignatureKindRU,
+} from '@/hooks/Mapper/types';
 
 export const TIME_ONE_MINUTE = 1000 * 60;
 export const TIME_TEN_MINUTES = 1000 * 60 * 10;
@@ -24,3 +32,43 @@ 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,6 +16,8 @@ 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 />;
@@ -26,27 +28,29 @@ export const MapRootContent = ({}: MapRootContentProps) => {
   useSkipContextMenu();
 
   return (
-    <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 />
+    <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>
             {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>
-          {mapInterface}
-        </div>
-      )}
-      <OnTheMap show={showOnTheMap} onHide={() => setShowOnTheMap(false)} />
-      <MapSettings show={showMapSettings} onHide={() => setShowMapSettings(false)} />
-    </Layout>
+        )}
+        <OnTheMap show={showOnTheMap} onHide={() => setShowOnTheMap(false)} />
+        <MapSettings show={showMapSettings} onHide={() => setShowMapSettings(false)} />
+      </Layout>
+    </div>
   );
 };

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

@@ -3,8 +3,13 @@ import { Dialog } from 'primereact/dialog';
 import { useCallback, useMemo, useState } from 'react';
 import { TabPanel, TabView } from 'primereact/tabview';
 import { PrettySwitchbox } from './components';
-import { InterfaceStoredSettings, InterfaceStoredSettingsProps, useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import {
+  InterfaceStoredSettingsProps,
+  useMapRootState,
+  InterfaceStoredSettings,
+} from '@/hooks/Mapper/mapRootProvider';
 import { OutCommand } from '@/hooks/Mapper/types';
+import { Dropdown } from 'primereact/dropdown';
 
 export enum UserSettingsRemoteProps {
   link_signature_on_splash = 'link_signature_on_splash',
@@ -37,96 +42,171 @@ export interface MapSettingsProps {
   onHide: () => void;
 }
 
-type CheckboxesList = {
+type SettingsListItem = {
   prop: keyof UserSettings;
   label: string;
-}[];
+  type: 'checkbox' | 'dropdown';
+  options?: { label: string; value: string }[];
+};
 
-const COMMON_CHECKBOXES_PROPS: CheckboxesList = [
-  { prop: InterfaceStoredSettingsProps.isShowMinimap, label: 'Show Minimap' },
+const COMMON_CHECKBOXES_PROPS: SettingsListItem[] = [
+  {
+    prop: InterfaceStoredSettingsProps.isShowMinimap,
+    label: 'Show Minimap',
+    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 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 SIGNATURES_CHECKBOXES_PROPS: CheckboxesList = [
-  { prop: UserSettingsRemoteProps.link_signature_on_splash, label: 'Link signature on splash' },
-  { prop: InterfaceStoredSettingsProps.isShowUnsplashedSignatures, label: 'Show unsplashed signatures' },
+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 CONNECTIONS_CHECKBOXES_PROPS: CheckboxesList = [
-  { prop: UserSettingsRemoteProps.delete_connection_with_sigs, label: 'Delete connections to linked 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 UI_CHECKBOXES_PROPS: CheckboxesList = [
-  { prop: InterfaceStoredSettingsProps.isShowMenu, label: 'Enable compact map menu bar' },
-  { prop: InterfaceStoredSettingsProps.isThickConnections, label: 'Thicker connections' },
-  { prop: InterfaceStoredSettingsProps.isShowBackgroundPattern, label: 'Show background pattern' },
-  { prop: InterfaceStoredSettingsProps.isSoftBackground, label: 'Enable soft background' },
+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 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 {
-      ...interfaceSettings,
       ...userRemoteSettings,
+      ...interfaceSettings,
     };
   }, [userRemoteSettings, interfaceSettings]);
 
+
   const handleShow = async () => {
     const { user_settings } = await outCommand({
       type: OutCommand.getUserSettings,
       data: null,
     });
-
     setUserRemoteSettings({
       ...user_settings,
     });
   };
 
-  const handleChangeChecked = useCallback(
-    (prop: keyof UserSettings) => async (checked: boolean) => {
-      // @ts-ignore
-      if (UserSettingsRemoteList.includes(prop)) {
+  const handleSettingChange = useCallback(
+    async (prop: keyof UserSettings, value: boolean | string) => {
+      if (UserSettingsRemoteList.includes(prop as any)) {
         const newRemoteSettings = {
           ...userRemoteSettings,
-          [prop]: checked,
+          [prop]: value,
         };
-
         await outCommand({
           type: OutCommand.updateUserSettings,
           data: newRemoteSettings,
         });
-
         setUserRemoteSettings(newRemoteSettings);
-        return;
+      } else {
+        setInterfaceSettings({
+          ...interfaceSettings,
+          [prop]: value,
+        });
       }
-
-      setInterfaceSettings({
-        ...interfaceSettings,
-        [prop]: checked,
-      });
     },
-    [interfaceSettings, outCommand, setInterfaceSettings, userRemoteSettings],
+    [userRemoteSettings, interfaceSettings, outCommand, setInterfaceSettings],
   );
 
-  const renderCheckboxesList = (list: CheckboxesList) => {
-    return list.map(x => {
+  const renderSettingItem = (item: SettingsListItem) => {
+    const currentValue = mergedSettings[item.prop];
+
+    if (item.type === 'checkbox') {
       return (
         <PrettySwitchbox
-          key={x.prop}
-          label={x.label}
-          checked={mergedSettings[x.prop]}
-          setChecked={handleChangeChecked(x.prop)}
+          key={item.prop}
+          label={item.label}
+          checked={!!currentValue}
+          setChecked={(checked) => handleSettingChange(item.prop, checked)}
         />
       );
-    });
+    }
+
+    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 (
@@ -137,10 +217,7 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
       style={{ width: '550px' }}
       onShow={handleShow}
       onHide={() => {
-        if (!show) {
-          return;
-        }
-
+        if (!show) return;
         setActiveIndex(0);
         onHide();
       }}
@@ -150,25 +227,35 @@ export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
           <div className={styles.verticalTabsContainer}>
             <TabView
               activeIndex={activeIndex}
-              onTabChange={e => setActiveIndex(e.index)}
+              onTabChange={(e) => setActiveIndex(e.index)}
               className={styles.verticalTabView}
             >
               <TabPanel header="Common" headerClassName={styles.verticalTabHeader}>
-                <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">
-                  {renderCheckboxesList(SYSTEMS_CHECKBOXES_PROPS)}
+                  {renderSettingsList(COMMON_CHECKBOXES_PROPS)}
                 </div>
               </TabPanel>
+
+              <TabPanel header="Systems" headerClassName={styles.verticalTabHeader}>
+                <div className="w-full h-full flex flex-col gap-1">
+                  {renderSettingsList(SYSTEMS_CHECKBOXES_PROPS)}
+                </div>
+              </TabPanel>
+
               <TabPanel header="Connections" headerClassName={styles.verticalTabHeader}>
-                {renderCheckboxesList(CONNECTIONS_CHECKBOXES_PROPS)}
+                {renderSettingsList(CONNECTIONS_CHECKBOXES_PROPS)}
               </TabPanel>
+
               <TabPanel header="Signatures" headerClassName={styles.verticalTabHeader}>
-                {renderCheckboxesList(SIGNATURES_CHECKBOXES_PROPS)}
+                {renderSettingsList(SIGNATURES_CHECKBOXES_PROPS)}
               </TabPanel>
+
               <TabPanel header="User Interface" headerClassName={styles.verticalTabHeader}>
-                {renderCheckboxesList(UI_CHECKBOXES_PROPS)}
+                {renderSettingsList(UI_CHECKBOXES_PROPS)}
+              </TabPanel>
+
+              <TabPanel header="Theme" headerClassName={styles.verticalTabHeader}>
+                {renderSettingItem(THEME_SETTING)}
               </TabPanel>
             </TabView>
           </div>

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

@@ -21,9 +21,6 @@ const getPossibleWormholes = (systemStatic: SolarSystemStaticInfoRaw, wormholes:
     return x.src.some(x => {
       const [group, type] = x.split('-');
 
-      // eslint-disable-next-line no-console
-      console.log('JOipP', `group, type`, group, type);
-
       if (type === 'shattered') {
         return systemStatic.is_shattered && group === spawnClassGroup;
       }
@@ -32,11 +29,6 @@ const getPossibleWormholes = (systemStatic: SolarSystemStaticInfoRaw, wormholes:
     });
   });
 
-  // eslint-disable-next-line no-console
-  console.log('JOipP', `possibleWHTypes`, possibleWHTypes);
-
-  // debugger;
-
   return {
     statics: possibleWHTypes
       .filter(x => x.respawn.some(y => y === Respawn.static))

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

@@ -2,7 +2,7 @@ import { Map } from '@/hooks/Mapper/components/map/Map.tsx';
 import { useCallback, useRef, useState } from 'react';
 import { OutCommand, OutCommandHandler, SolarSystemConnection } from '@/hooks/Mapper/types';
 import { MapRootData, useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { OnMapSelectionChange } from '@/hooks/Mapper/components/map/map.types.ts';
+import { OnMapAddSystemCallback, OnMapSelectionChange } from '@/hooks/Mapper/components/map/map.types.ts';
 import isEqual from 'lodash.isequal';
 import { ContextMenuSystem, useContextMenuSystemHandlers } from '@/hooks/Mapper/components/contexts';
 import {
@@ -14,14 +14,18 @@ import classes from './MapWrapper.module.scss';
 import { Connections } from '@/hooks/Mapper/components/mapRootContent/components/Connections';
 import { ContextMenuSystemMultiple, useContextMenuSystemMultipleHandlers } from '../contexts/ContextMenuSystemMultiple';
 import { getSystemById } from '@/hooks/Mapper/helpers';
-import { Node } from 'reactflow';
+import { Node, XYPosition } from 'reactflow';
 
 import { Commands } from '@/hooks/Mapper/types/mapHandlers.ts';
-import { useMapEventListener } from '@/hooks/Mapper/events';
+import { emitMapEvent, useMapEventListener } from '@/hooks/Mapper/events';
 
 import { STORED_INTERFACE_DEFAULT_VALUES } from '@/hooks/Mapper/mapRootProvider/MapRootProvider';
 import { useDeleteSystems } from '@/hooks/Mapper/components/contexts/hooks';
 import { useCommonMapEventProcessor } from '@/hooks/Mapper/components/mapWrapper/hooks/useCommonMapEventProcessor.ts';
+import {
+  AddSystemDialog,
+  SearchOnSubmitCallback,
+} from '@/hooks/Mapper/components/mapInterface/components/AddSystemDialog';
 
 // TODO: INFO - this component needs for abstract work with Map instance
 export const MapWrapper = () => {
@@ -36,6 +40,7 @@ export const MapWrapper = () => {
       isThickConnections,
       isShowBackgroundPattern,
       isSoftBackground,
+      theme,
     },
   } = useMapRootState();
   const { deleteSystems } = useDeleteSystems();
@@ -47,6 +52,7 @@ export const MapWrapper = () => {
   const [openSettings, setOpenSettings] = useState<string | null>(null);
   const [openLinkSignatures, setOpenLinkSignatures] = useState<any | null>(null);
   const [openCustomLabel, setOpenCustomLabel] = useState<string | null>(null);
+  const [openAddSystem, setOpenAddSystem] = useState<XYPosition | null>(null);
   const [selectedConnection, setSelectedConnection] = useState<SolarSystemConnection | null>(null);
 
   const ref = useRef({ selectedConnections, selectedSystems, systemContextProps, systems, deleteSystems });
@@ -123,6 +129,28 @@ export const MapWrapper = () => {
     }
   }, []);
 
+  const onAddSystem: OnMapAddSystemCallback = useCallback(({ coordinates }) => {
+    setOpenAddSystem(coordinates);
+  }, []);
+
+  const handleSubmitAddSystem: SearchOnSubmitCallback = useCallback(
+    async item => {
+      if (ref.current.systems.some(x => x.system_static_info.solar_system_id === item.value)) {
+        emitMapEvent({
+          name: Commands.centerSystem,
+          data: item.value.toString(),
+        });
+        return;
+      }
+
+      await outCommand({
+        type: OutCommand.manualAddSystem,
+        data: { coordinates: openAddSystem, solar_system_id: item.value },
+      });
+    },
+    [openAddSystem, outCommand],
+  );
+
   return (
     <>
       <Map
@@ -139,6 +167,8 @@ export const MapWrapper = () => {
         isThickConnections={isThickConnections}
         isShowBackgroundPattern={isShowBackgroundPattern}
         isSoftBackground={isSoftBackground}
+        theme={theme}
+        onAddSystem={onAddSystem}
       />
 
       {openSettings != null && (
@@ -153,6 +183,12 @@ export const MapWrapper = () => {
         <SystemLinkSignatureDialog data={openLinkSignatures} setVisible={() => setOpenLinkSignatures(null)} />
       )}
 
+      <AddSystemDialog
+        visible={!!openAddSystem}
+        setVisible={() => setOpenAddSystem(null)}
+        onSubmit={handleSubmitAddSystem}
+      />
+
       <Connections selectedConnection={selectedConnection} onHide={() => setSelectedConnection(null)} />
 
       <ContextMenuSystem

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

@@ -31,12 +31,15 @@ const prepareEffects = (effects: Record<string, EffectRaw>, effectName: string,
   return out;
 };
 
+let counter = 0;
+
 export interface WHEffectViewProps {
   effectName: string;
   effectPower: number;
+  className?: string;
 }
 
-export const WHEffectView = ({ effectName, effectPower }: WHEffectViewProps) => {
+export const WHEffectView = ({ effectName, effectPower, className }: WHEffectViewProps) => {
   const {
     data: { effects },
   } = useMapRootState();
@@ -49,7 +52,7 @@ export const WHEffectView = ({ effectName, effectPower }: WHEffectViewProps) =>
     [effectName, effectPower, effects],
   );
 
-  const targetClass = `wh-effect-name${effectInfo.id}`;
+  const targetClass = useMemo(() => `wh-effect-name${effectInfo.id}-${counter++}`, []);
 
   return (
     <div className={classes.WHEffectViewRoot}>
@@ -84,7 +87,7 @@ export const WHEffectView = ({ effectName, effectPower }: WHEffectViewProps) =>
         </div>
       </FixedTooltip>
 
-      <div className={clsx('font-bold select-none cursor-help w-min-content', effectClass, targetClass)}>
+      <div className={clsx('font-bold select-none cursor-help w-min-content', effectClass, targetClass, className)}>
         {effectName}
       </div>
     </div>

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

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

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

@@ -37,6 +37,7 @@ export enum InterfaceStoredSettingsProps {
   isShowUnsplashedSignatures = 'isShowUnsplashedSignatures',
   isShowBackgroundPattern = 'isShowBackgroundPattern',
   isSoftBackground = 'isSoftBackground',
+  theme = 'theme',
 }
 
 export type InterfaceStoredSettings = {
@@ -47,6 +48,7 @@ export type InterfaceStoredSettings = {
   isShowUnsplashedSignatures: boolean;
   isShowBackgroundPattern: boolean;
   isSoftBackground: boolean;
+  theme: string;
 };
 
 export const STORED_INTERFACE_DEFAULT_VALUES: InterfaceStoredSettings = {
@@ -57,7 +59,8 @@ export const STORED_INTERFACE_DEFAULT_VALUES: InterfaceStoredSettings = {
   isShowUnsplashedSignatures: false,
   isShowBackgroundPattern: true,
   isSoftBackground: false,
-};
+  theme: 'default',
+}
 
 export interface MapRootContextProps {
   update: ContextStoreDataUpdate<MapRootData>;

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

@@ -14,16 +14,12 @@ export enum TimeStatus {
   eol,
 }
 
-// export enum ShipSizeStatus {
-//   small, // frigates, destroyers - less than 5K t
-//   medium, // less than 20K t
-//   large, // less than 375K t
-//   capital, // less than 1.8M t
-// }
-
 export enum ShipSizeStatus {
-  small, // frigates, destroyers - less than 5K t
-  normal,
+  small = 0, // frigates, destroyers - less than 5K t
+  medium = 1, // less than 62K t
+  large = 2, // less than 375K t
+  freight = 3, // less than 1M t
+  capital = 4, // less than 1.8M t
 }
 
 export type SolarSystemConnection = {

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

@@ -129,6 +129,7 @@ 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',
@@ -153,6 +154,7 @@ export enum OutCommand {
   getUserSettings = 'get_user_settings',
   updateUserSettings = 'update_user_settings',
   unlinkSignature = 'unlink_signature',
+  searchSystems = 'search_systems',
 }
 
 export type OutCommandHandler = <T = any>(event: { type: OutCommand; data: any }) => Promise<T>;

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

@@ -10,6 +10,15 @@ 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;
@@ -19,7 +28,7 @@ export type GroupType = {
 
 export type SystemSignature = {
   eve_id: string;
-  kind: string;
+  kind: SignatureKind;
   name: string;
   custom_info?: string;
   description?: string;
@@ -30,3 +39,41 @@ 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,18 @@ export type SolarSystemRawType = {
   tag: string | null;
   status: number;
   name: string | null;
+  temporary_name: string | null;
 
   system_static_info: SolarSystemStaticInfoRaw;
   system_signatures: SystemSignature[];
 };
+
+export type SearchSystemItem = {
+  class_title: string;
+  constellation_name: string;
+  label: string;
+  region_name: string;
+  system_static_info: SolarSystemStaticInfoRaw;
+  value: number;
+};
+

assets/js/hooks/copyToClipboard.ts

@@ -1,17 +1,14 @@
 export default {
   mounted() {
-    const hook = this;
-    const url = hook.el.dataset.url;
-    const button = hook.el;
+    const button = this.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(url)
+        .writeText(button.dataset.url)
         .then(() => {
           button.classList.add('copied');
         })

assets/js/hooks/index.ts

@@ -8,6 +8,7 @@ import CopyToClipboard from './copyToClipboard';
 import DownloadJson from './downloadJson';
 import NewVersionUpdate from './newVersionUpdate';
 import MapAction from './maps/mapAction';
+import ShowCharactersAddAlert from './showCharactersAddAlert';
 
 export default {
   DownloadJson,
@@ -20,4 +21,5 @@ export default {
   Ping,
   CopyToClipboard,
   NewVersionUpdate,
+  ShowCharactersAddAlert,
 };

assets/js/hooks/showCharactersAddAlert.ts

@@ -0,0 +1,11 @@
+export default {
+  mounted() {
+    this.pushEvent('restore_show_characters_add_alert', {
+      value: localStorage.getItem('wanderer:hide_characters_add_alert') !== 'true',
+    });
+
+    document.getElementById('characters-add-alert-hide')?.addEventListener('click', e => {
+      localStorage.setItem('wanderer:hide_characters_add_alert', 'true');
+    });
+  },
+};

config/runtime.exs

@@ -48,6 +48,11 @@ 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")
@@ -61,6 +66,18 @@ 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")
@@ -83,7 +100,11 @@ 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,6 +21,7 @@ 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],
@@ -122,6 +123,11 @@ defmodule WandererApp.Api.Map do
 
       change(set_attribute(:deleted, true))
     end
+
+    update :update_api_key do
+      accept [:public_api_key]
+    end
+
   end
 
   attributes do
@@ -141,6 +147,10 @@ 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_character_settings.ex

@@ -14,31 +14,24 @@ defmodule WandererApp.Api.MapCharacterSettings do
     define(:create, action: :create)
     define(:destroy, action: :destroy)
 
-    define(:read_by_map,
-      action: :read_by_map
-    )
-
-    define(:by_map_filtered,
-      action: :by_map_filtered
-    )
-
-    define(:tracked_by_map_filtered,
-      action: :tracked_by_map_filtered
-    )
-
-    define(:tracked_by_map_all,
-      action: :tracked_by_map_all
-    )
+    define(:read_by_map, action: :read_by_map)
+    define(:by_map_filtered, action: :by_map_filtered)
+    define(:tracked_by_map_filtered, action: :tracked_by_map_filtered)
+    define(:tracked_by_map_all, action: :tracked_by_map_all)
 
     define(:track, action: :track)
     define(:untrack, action: :untrack)
+
+    define(:follow, action: :follow)
+    define(:unfollow, action: :unfollow)
   end
 
   actions do
     default_accept [
       :map_id,
       :character_id,
-      :tracked
+      :tracked,
+      :followed
     ]
 
     defaults [:create, :read, :update, :destroy]
@@ -76,6 +69,14 @@ defmodule WandererApp.Api.MapCharacterSettings do
     update :untrack do
       change(set_attribute(:tracked, false))
     end
+
+    update :follow do
+      change(set_attribute(:followed, true))
+    end
+
+    update :unfollow do
+      change(set_attribute(:followed, false))
+    end
   end
 
   attributes do
@@ -86,6 +87,11 @@ defmodule WandererApp.Api.MapCharacterSettings do
       allow_nil? true
     end
 
+    attribute :followed, :boolean do
+      default false
+      allow_nil? true
+    end
+
     create_timestamp(:inserted_at)
     update_timestamp(:updated_at)
   end

lib/wanderer_app/api/map_connection.ex

@@ -128,11 +128,13 @@ defmodule WandererApp.Api.MapConnection do
       allow_nil?(true)
     end
 
-    # where 0 - Frigate
-    # where 1 - Medium and Large
-    # where 2 - Capital
+    # where 0 - Frigate (small
+    # where 1 - Medium
+    # where 2 - Large
+    # where 3 - Freight
+    # where 4 - Capital
     attribute :ship_size_type, :integer do
-      default(1)
+      default(2)
 
       allow_nil?(true)
     end

lib/wanderer_app/api/map_system.ex

@@ -46,7 +46,9 @@ 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
@@ -102,6 +104,10 @@ defmodule WandererApp.Api.MapSystem do
       accept [:tag]
     end
 
+    update :update_temporary_name do
+      accept [:temporary_name]
+    end
+
     update :update_labels do
       accept [:labels]
     end
@@ -112,6 +118,10 @@ defmodule WandererApp.Api.MapSystem do
       change(set_attribute(:visible, true))
     end
 
+    update :update_linked_sig_eve_id do
+      accept [:linked_sig_eve_id]
+    end
+
     update :update_visible do
       accept [:visible]
     end
@@ -141,6 +151,10 @@ 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
@@ -184,6 +198,10 @@ defmodule WandererApp.Api.MapSystem do
       allow_nil? true
     end
 
+    attribute :linked_sig_eve_id, :string do
+      allow_nil? true
+    end
+
     create_timestamp(:inserted_at)
     update_timestamp(:updated_at)
   end

lib/wanderer_app/character/tracker.ex

@@ -489,7 +489,7 @@ defmodule WandererApp.Character.Tracker do
 
   defp maybe_update_location(
          %{
-           character_id: character_id
+           character_id: character_id,
          } =
            state,
          location

lib/wanderer_app/env.ex

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

lib/wanderer_app/esi/api_client.ex

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

lib/wanderer_app/map.ex

@@ -70,6 +70,11 @@ 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,20 +9,38 @@ 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
@@ -84,52 +102,43 @@ 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
-  #   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
+  defp get_period("1M") do
     now = DateTime.utc_now()
-    start_date = now |> DateTime.add(-1 * 3600, :second)
+    start_date = now |> DateTime.add(-24 * 3600 * 31, :second)
     {start_date, now}
   end
 
-  defp _get_expired_at(), do: DateTime.utc_now() |> DateTime.add(-@week_seconds, :second)
+  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)
 end

lib/wanderer_app/map/map_server.ex

@@ -105,6 +105,12 @@ 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
@@ -129,6 +135,12 @@ 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