fix(Map): Added Search tool for systems what on the map

2025-12-11 18:26:04 +00:00 · 2025-10-07 14:07:13 +03:00
parent d33a2e3a5b
commit 8ba34533d7
22 changed files with 798 additions and 202 deletions
--- a/assets/js/hooks/Mapper/common-styles/fixes.scss
+++ b/assets/js/hooks/Mapper/common-styles/fixes.scss
@@ -284,3 +284,7 @@
  border-left-color: #e67e22;
 }

+.p-dialog-header-icon.p-dialog-header-close.p-link {
+  position: relative;
+  left: 6px;
+}
--- a/assets/js/hooks/Mapper/components/hooks/useLocalCounter.ts
+++ b/assets/js/hooks/Mapper/components/hooks/useLocalCounter.ts
@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+import { CharacterTypeRaw } from '@/hooks/Mapper/types';
+
+export type UseLocalCounterProps = {
+  charactersInSystem: Array<CharacterTypeRaw>;
+  userCharacters: string[];
+};
+
+export const getLocalCharacters = ({ charactersInSystem, userCharacters }: UseLocalCounterProps) => {
+  return charactersInSystem
+    .map(char => ({
+      ...char,
+      compact: true,
+      isOwn: userCharacters.includes(char.eve_id),
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name));
+};
+
+export const useLocalCounter = ({ charactersInSystem, userCharacters }: UseLocalCounterProps) => {
+  const localCounterCharacters = useMemo(
+    () => getLocalCharacters({ charactersInSystem, userCharacters }),
+    [charactersInSystem, userCharacters],
+  );
+
+  return { localCounterCharacters };
+};
--- a/assets/js/hooks/Mapper/components/map/Map.tsx
+++ b/assets/js/hooks/Mapper/components/map/Map.tsx
@@ -189,9 +189,6 @@ const MapComp = ({
    refVars.current.onChangeViewport?.(viewport);
  }, []);

-  // eslint-disable-next-line no-console
-  console.log('JOipP', `defaultViewport`, defaultViewport);
-
  const handleNodesChange = useCallback(
    (changes: NodeChange[]) => {
      // prevents single node deselection on background / same node click
--- a/assets/js/hooks/Mapper/components/map/components/LocalCounter/LocalCounter.module.scss
+++ b/assets/js/hooks/Mapper/components/map/components/LocalCounter/LocalCounter.module.scss
@@ -5,8 +5,8 @@
 }

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

--- a/assets/js/hooks/Mapper/components/map/components/LocalCounter/LocalCounter.tsx
+++ b/assets/js/hooks/Mapper/components/map/components/LocalCounter/LocalCounter.tsx
@@ -13,9 +13,19 @@ interface LocalCounterProps {
  localCounterCharacters: Array<CharItemProps>;
  hasUserCharacters: boolean;
  showIcon?: boolean;
+  disableInteractive?: boolean;
+  className?: string;
+  contentClassName?: string;
 }

-export const LocalCounter = ({ localCounterCharacters, hasUserCharacters, showIcon = true }: LocalCounterProps) => {
+export const LocalCounter = ({
+  className,
+  contentClassName,
+  localCounterCharacters,
+  hasUserCharacters,
+  showIcon = true,
+  disableInteractive,
+}: LocalCounterProps) => {
  const {
    data: { localShowShipName },
  } = useMapState();
@@ -42,22 +52,30 @@ export const LocalCounter = ({ localCounterCharacters, hasUserCharacters, showIc

  return (
    <div
-      className={clsx(classes.TooltipActive, {
+      className={clsx(
+        classes.TooltipActive,
+        {
          [classes.Pathfinder]: theme === AvailableThemes.pathfinder,
-      })}
+        },
+        className,
+      )}
    >
      <WdTooltipWrapper
        content={pilotTooltipContent}
        position={TooltipPosition.right}
        offset={0}
-        interactive={true}
+        interactive={!disableInteractive}
        smallPaddings
      >
        <div className={clsx(classes.hoverTarget)}>
          <div
-            className={clsx(classes.localCounter, {
+            className={clsx(
+              classes.localCounter,
+              {
                [classes.hasUserCharacters]: hasUserCharacters,
-            })}
+              },
+              contentClassName,
+            )}
          >
            {showIcon && <i className="pi pi-users" />}
            <span>{localCounterCharacters.length}</span>
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.module.scss
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.module.scss
@@ -1,14 +1,6 @@
@use "sass:color";
@use '@/hooks/Mapper/components/map/styles/eve-common-variables';
-
-$pastel-blue: #5a7d9a;
-$pastel-pink: rgb(30, 161, 255);
-$dark-bg: #2d2d2d;
-$text-color: #ffffff;
-$tooltip-bg: #202020;
-
-$neon-color-1: rgb(27, 132, 236);
-$neon-color-3: rgba(27, 132, 236, 0.40);
+@import '@/hooks/Mapper/components/map/styles/solar-system-node';

@keyframes move-stripes {
  from {
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.tsx
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.tsx
@@ -4,7 +4,7 @@ import { Handle, NodeProps, Position } from 'reactflow';
 import clsx from 'clsx';
 import classes from './SolarSystemNodeDefault.module.scss';
 import { PrimeIcons } from 'primereact/api';
-import { useLocalCounter, useNodeKillsCount, useSolarSystemNode } from '../../hooks';
+import { useNodeKillsCount, useSolarSystemNode } from '../../hooks';
 import {
  EFFECT_BACKGROUND_STYLES,
  MARKER_BOOKMARK_BG_STYLES,
@@ -17,6 +17,7 @@ import { TooltipPosition, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-
 import { Tag } from 'primereact/tag';
 import { LocalCounter } from '@/hooks/Mapper/components/map/components/LocalCounter';
 import { KillsCounter } from '@/hooks/Mapper/components/map/components/KillsCounter';
+import { useLocalCounter } from '@/hooks/Mapper/components/hooks/useLocalCounter.ts';

 // let render = 0;
 export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>) => {
@@ -139,12 +140,26 @@ export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>

              {nodeVars.isWormhole && !nodeVars.customName && <div />}

-              <div className="flex items-center gap-1 justify-end">
-                <div className={clsx('flex items-center gap-1')}>
+              <div className="flex items-center gap-0.5 justify-end">
+                <div className={clsx('flex items-center gap-0.5')}>
                  {nodeVars.locked && <i className={clsx(PrimeIcons.LOCK, classes.lockIcon)} />}
                  {nodeVars.hubs.includes(nodeVars.solarSystemId) && (
                    <i className={clsx(PrimeIcons.MAP_MARKER, classes.mapMarker)} />
                  )}
+                  {nodeVars.description != null && nodeVars.description !== '' && (
+                    <WdTooltipWrapper
+                      className="h-[15px] transform -translate-y-[6%]"
+                      position={TooltipPosition.top}
+                      content={`System have description`}
+                    >
+                      <i
+                        className={clsx(
+                          'pi hero-chat-bubble-bottom-center-text w-[10px] h-[10px]',
+                          'text-[8px] relative top-[1px]',
+                        )}
+                      />
+                    </WdTooltipWrapper>
+                  )}
                </div>

                <LocalCounter
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeTheme.tsx
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeTheme.tsx
@@ -4,7 +4,7 @@ import { Handle, NodeProps, Position } from 'reactflow';
 import clsx from 'clsx';
 import classes from './SolarSystemNodeTheme.module.scss';
 import { PrimeIcons } from 'primereact/api';
-import { useLocalCounter, useNodeKillsCount, useSolarSystemNode } from '../../hooks';
+import { useNodeKillsCount, useSolarSystemNode } from '../../hooks';
 import {
  EFFECT_BACKGROUND_STYLES,
  MARKER_BOOKMARK_BG_STYLES,
@@ -16,6 +16,7 @@ import { TooltipPosition, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-
 import { TooltipSize } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper/utils.ts';
 import { LocalCounter } from '@/hooks/Mapper/components/map/components/LocalCounter';
 import { KillsCounter } from '@/hooks/Mapper/components/map/components/KillsCounter';
+import { useLocalCounter } from '@/hooks/Mapper/components/hooks/useLocalCounter.ts';

 // let render = 0;
 export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>) => {
--- a/assets/js/hooks/Mapper/components/map/hooks/useSolarSystemNode.ts
+++ b/assets/js/hooks/Mapper/components/map/hooks/useSolarSystemNode.ts
@@ -5,7 +5,7 @@ import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
 import { useMapState } from '@/hooks/Mapper/components/map/MapProvider';
 import { useDoubleClick } from '@/hooks/Mapper/hooks/useDoubleClick';
-import { Regions, REGIONS_MAP, Spaces } from '@/hooks/Mapper/constants';
+import { Regions, REGIONS_MAP, SPACE_TO_CLASS } from '@/hooks/Mapper/constants';
 import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace';
 import { getSystemClassStyles } from '@/hooks/Mapper/components/map/helpers';
 import { sortWHClasses } from '@/hooks/Mapper/helpers';
@@ -50,27 +50,8 @@ export interface SolarSystemNodeVars {
  isRally: boolean;
  classTitle: string | null;
  temporaryName?: string | null;
-}
-
-const SpaceToClass: Record<string, string> = {
-  [Spaces.Caldari]: 'Caldaria',
-  [Spaces.Matar]: 'Mataria',
-  [Spaces.Amarr]: 'Amarria',
-  [Spaces.Gallente]: 'Gallente',
-  [Spaces.Pochven]: 'Pochven',
-};
-
-export function useLocalCounter(nodeVars: SolarSystemNodeVars) {
-  const localCounterCharacters = useMemo(() => {
-    return nodeVars.charactersInSystem
-      .map(char => ({
-        ...char,
-        compact: true,
-        isOwn: nodeVars.userCharacters.includes(char.eve_id),
-      }))
-      .sort((a, b) => a.name.localeCompare(b.name));
-  }, [nodeVars.charactersInSystem, nodeVars.userCharacters]);
-  return { localCounterCharacters };
+  description: string | null;
+  comments_count: number | null;
 }

 export const useSolarSystemNode = (props: NodeProps<MapSolarSystemType>): SolarSystemNodeVars => {
@@ -84,6 +65,8 @@ export const useSolarSystemNode = (props: NodeProps<MapSolarSystemType>): SolarS
    labels,
    temporary_name,
    linked_sig_eve_id: linkedSigEveId = '',
+    description,
+    comments_count,
  } = data;

  const {
@@ -169,7 +152,7 @@ export const useSolarSystemNode = (props: NodeProps<MapSolarSystemType>): SolarS
  const showHandlers = isConnecting || hoverNodeId === id;

  const space = showKSpaceBG ? REGIONS_MAP[region_id] : '';
-  const regionClass = showKSpaceBG ? SpaceToClass[space] || null : null;
+  const regionClass = showKSpaceBG ? SPACE_TO_CLASS[space] || null : null;

  const { systemName, computedTemporaryName, customName } = useSystemName({
    isTempSystemNameEnabled,
@@ -232,6 +215,8 @@ export const useSolarSystemNode = (props: NodeProps<MapSolarSystemType>): SolarS
    regionName,
    solarSystemName: solar_system_name,
    isRally,
+    description,
+    comments_count,
  };

  return nodeVars;
--- a/assets/js/hooks/Mapper/components/map/styles/solar-system-node.scss
+++ b/assets/js/hooks/Mapper/components/map/styles/solar-system-node.scss
@@ -0,0 +1,8 @@
+$pastel-blue: #5a7d9a;
+$pastel-pink: rgb(30, 161, 255);
+$dark-bg: #2d2d2d;
+$text-color: #ffffff;
+$tooltip-bg: #202020;
+
+$neon-color-1: rgb(27, 132, 236);
+$neon-color-3: rgba(27, 132, 236, 0.40);
--- a/assets/js/hooks/Mapper/components/mapInterface/components/SystemSettingsDialog/SystemSettingsDialog.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/components/SystemSettingsDialog/SystemSettingsDialog.tsx
@@ -125,7 +125,7 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
      }}
    >
      <form onSubmit={handleSave}>
-        <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-3 px-2">
          <div className="flex flex-col gap-2">
            <div className="flex flex-col gap-1">
              <label htmlFor="username">Custom name</label>
--- a/assets/js/hooks/Mapper/components/mapRootContent/MapRootContent.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/MapRootContent.tsx
@@ -15,6 +15,7 @@ import { useMapEventListener } from '@/hooks/Mapper/events';
 import { Commands } from '@/hooks/Mapper/types';
 import { PingsInterface } from '@/hooks/Mapper/components/mapInterface/components';
 import { OldSettingsDialog } from '@/hooks/Mapper/components/mapRootContent/components/OldSettingsDialog.tsx';
+import { TopSearch } from '@/hooks/Mapper/components/mapRootContent/components/TopSearch';

 export interface MapRootContentProps {}

@@ -72,6 +73,7 @@ export const MapRootContent = ({}: MapRootContentProps) => {
          <div className="absolute top-0 left-14 w-[calc(100%-3.5rem)] h-[calc(100%-3.5rem)] pointer-events-none">
            <Topbar>
              <div className="flex items-center ml-1">
+                <TopSearch />
                <PingsInterface />
                <MapContextMenu
                  onShowOnTheMap={handleShowOnTheMap}
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/RightBar/RightBar.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/RightBar/RightBar.tsx
@@ -7,6 +7,7 @@ import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit';

 import { useMapCheckPermissions } from '@/hooks/Mapper/mapRootProvider/hooks/api';
 import { UserPermission } from '@/hooks/Mapper/types/permissions.ts';
+import { TopSearch } from '@/hooks/Mapper/components/mapRootContent/components/TopSearch';
 // import { DebugComponent } from '@/hooks/Mapper/components/mapRootContent/components/RightBar/DebugComponent.tsx';

 interface RightBarProps {
@@ -48,7 +49,7 @@ export const RightBar = ({
        classes.RightBarRoot,
        'w-full h-full',
        'text-gray-200 shadow-lg border-l border-zinc-800 border-opacity-70 bg-opacity-70 bg-neutral-900',
-        'flex flex-col items-center justify-between',
+        'flex flex-col items-center justify-between pt-1',
      )}
    >
      <div className="flex flex-col gap-2 items-center mt-1">
@@ -65,6 +66,21 @@ export const RightBar = ({
              </button>
            </WdTooltipWrapper>

+            <div className="flex flex-col gap-1">
+              <TopSearch
+                customBtn={open => (
+                  <WdTooltipWrapper content="Show on the map" position={TooltipPosition.left}>
+                    <button
+                      className="btn bg-transparent text-gray-400 hover:text-white border-transparent hover:bg-transparent py-2 h-auto min-h-auto"
+                      type="button"
+                      onClick={open}
+                    >
+                      <i className="pi pi-search"></i>
+                    </button>
+                  </WdTooltipWrapper>
+                )}
+              />
+
              <WdTooltipWrapper content="Show on the map" position={TooltipPosition.left}>
                <button
                  className="btn bg-transparent text-gray-400 hover:text-white border-transparent hover:bg-transparent py-2 h-auto min-h-auto"
@@ -74,6 +90,7 @@ export const RightBar = ({
                  <i className="pi pi-hashtag"></i>
                </button>
              </WdTooltipWrapper>
+            </div>
          </>
        )}
        {additionalContent}
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/TopSearch/TopSearch.module.scss
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/TopSearch/TopSearch.module.scss
@@ -0,0 +1,170 @@
+@use "sass:color";
+@use '@/hooks/Mapper/components/map/styles/eve-common-variables';
+@import '@/hooks/Mapper/components/map/styles/solar-system-node';
+
+:root {
+  --rf-has-user-characters: #ffc75d;
+}
+
+.Sidebar {
+  :global {
+    .p-sidebar-header {
+      padding-left: 14px;
+      padding-right: 14px;
+    }
+
+    .p-sidebar-content {
+      padding-left: 0px;
+      padding-right: 0px;
+    }
+  }
+}
+
+.Content {
+  position: relative;
+  overflow: hidden;
+
+  &.Pochven,
+  &.Mataria,
+  &.Amarria,
+  &.Gallente,
+  &.Caldaria {
+    &::after {
+      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 {
+    &::after {
+      background-image: url('/images/mataria-180.png');
+      opacity: 0.6;
+      //background-position-x: 52px;
+      //background-position-y: -83px;
+      background-position-x: 331px;
+      background-position-y: -77px;
+      transform: scale(-1);
+    }
+  }
+
+  &.Caldaria {
+    &::after {
+      background-image: url('/images/caldaria-180.png');
+      opacity: 0.6;
+      //background-position-x: 41px;
+      //background-position-y: -45px;
+
+      background-position-x: 360px;
+      background-position-y: -16px;
+      background-size: 30%;
+      transform: rotate(180deg);
+    }
+  }
+
+  &.Amarria {
+    &::after {
+      opacity: 0.45;
+      background-image: url('/images/amarr-small.png');
+      //background-position-x: 23px;
+      //background-position-y: -74px;
+
+      background-position-x: -1px;
+      background-position-y: -75px;
+      background-origin: border-box;
+      background-size: auto;
+      transform: scale(1, -1);
+    }
+  }
+
+  &.Gallente {
+    &::after {
+      opacity: 0.5;
+      background-image: url('/images/gallente-180.png');
+      //background-position-x: 1px;
+      //background-position-y: -55px;
+
+      background-position-x: 294px;
+      background-position-y: -53px;
+      transform: scale(-1);
+    }
+  }
+
+  &.Pochven {
+    &::after {
+      opacity: 0.8;
+      background-image: url('/images/pochven.webp');
+      background-position-x: 0;
+      background-position-y: -88px;
+    }
+  }
+
+  &.selected {
+    border-color: $pastel-pink;
+    box-shadow: 0 0 10px #9a1af1c2;
+  }
+
+  &.rally {
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: -1;
+
+      border-color: $neon-color-1;
+      background: repeating-linear-gradient(
+          45deg,
+          $neon-color-3 0px,
+          $neon-color-3 8px,
+          transparent 8px,
+          transparent 21px
+      );
+      background-size: 30px 30px;
+      animation: move-stripes 3s linear infinite;
+    }
+  }
+
+  &.eve-system-status-home {
+    background-image: linear-gradient(45deg, var(--eve-solar-system-status-color-background), transparent);
+    &.selected {
+      border-color: var(--eve-solar-system-status-color-home);
+    }
+  }
+
+  &.eve-system-status-friendly {
+    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 {
+    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);
+  }
+}
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/TopSearch/TopSearch.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/TopSearch/TopSearch.tsx
@@ -0,0 +1,347 @@
+import classes from './TopSearch.module.scss';
+import { Sidebar } from 'primereact/sidebar';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
+import clsx from 'clsx';
+import { Commands, SolarSystemRawType, SolarSystemStaticInfoRaw } from '@/hooks/Mapper/types';
+import {
+  SystemViewStandalone,
+  TooltipPosition,
+  WdImageSize,
+  WdImgButton,
+  WdTooltipWrapper,
+  WHClassView,
+  WHEffectView,
+} from '@/hooks/Mapper/components/ui-kit';
+import { InputText } from 'primereact/inputtext';
+import { IconField } from 'primereact/iconfield';
+import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic.ts';
+import { sortWHClasses } from '@/hooks/Mapper/helpers';
+import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace.ts';
+import { STATUS_CLASSES } from '@/hooks/Mapper/components/map/constants.ts';
+import { REGIONS_MAP, SPACE_TO_CLASS } from '@/hooks/Mapper/constants.ts';
+import { emitMapEvent } from '@/hooks/Mapper/events';
+import { LocalCounter } from '@/hooks/Mapper/components/map/components/LocalCounter';
+import { getLocalCharacters } from '@/hooks/Mapper/components/hooks/useLocalCounter.ts';
+import { PrimeIcons } from 'primereact/api';
+
+type CompiledSystem = {
+  dynamic: SolarSystemRawType;
+  static: SolarSystemStaticInfoRaw | undefined;
+};
+
+const useItemTemplate = () => {
+  const {
+    data: { wormholesData, characters, userCharacters, hubs },
+  } = useMapRootState();
+
+  return useCallback(
+    (item: CompiledSystem, options: VirtualScrollerTemplateOptions) => {
+      if (!item.static) {
+        return null;
+      }
+
+      const {
+        security,
+        system_class,
+        class_title,
+        effect_power,
+        region_name,
+        solar_system_name,
+        solar_system_id,
+        effect_name,
+        statics,
+        region_id,
+      } = item.static;
+
+      const onlineCharactersInSystem = characters.filter(
+        c => c.location?.solar_system_id === solar_system_id && c.online,
+      );
+      const hasOnlineUserCharacters = onlineCharactersInSystem.some(x => userCharacters.includes(x.eve_id));
+      const onlineCharacters = getLocalCharacters({ charactersInSystem: onlineCharactersInSystem, userCharacters });
+
+      const offlineCharactersInSystem = characters.filter(
+        c => c.location?.solar_system_id === solar_system_id && !c.online,
+      );
+      const hasOfflineUserCharacters = offlineCharactersInSystem.some(x => userCharacters.includes(x.eve_id));
+      const offlineCharacters = getLocalCharacters({ charactersInSystem: offlineCharactersInSystem, userCharacters });
+
+      const handleSelect = () => {
+        emitMapEvent({
+          name: Commands.centerSystem,
+          data: solar_system_id.toString(),
+        });
+      };
+
+      const sortedStatics = sortWHClasses(wormholesData, statics);
+      const isWH = isWormholeSpace(system_class);
+
+      const regionClass = SPACE_TO_CLASS[REGIONS_MAP[region_id]] || null;
+      const showTempName = item.dynamic.temporary_name != null;
+      const showCustomName = item.dynamic.name != null && item.dynamic.name !== solar_system_name;
+
+      return (
+        <div
+          className={clsx(
+            'w-full box-border px-3.5 py-1 h-[48px] cursor-pointer',
+            'bg-transparent hover:bg-stone-800/30 transition-all !duration-250 ease-in-out',
+            {
+              'surface-hover': options.odd,
+              ['border-b border-gray-600 border-opacity-20']: !options.last,
+            },
+            classes.Content,
+            regionClass && classes[regionClass],
+            item.dynamic.status !== undefined && classes[STATUS_CLASSES[item.dynamic.status]],
+          )}
+          onClick={handleSelect}
+        >
+          <div className={clsx('w-full')}>
+            <div className={clsx('grid grid-cols-[1fr_auto] gap-1.5 w-full')}>
+              <div className="flex [&>*]:!text-[13px] gap-1.5">
+                <SystemViewStandalone
+                  className="!text-[13px]"
+                  security={security}
+                  system_class={system_class}
+                  solar_system_id={parseInt(item.dynamic.id)}
+                  class_title={class_title}
+                  solar_system_name={`${solar_system_name}`}
+                  region_name={region_name}
+                  nameClassName="font-semibold"
+                />
+
+                {(showTempName || showCustomName) && (
+                  <div className="grid grid-cols-[auto_1fr] gap-1.5 text-stone-400 text-[12px]">
+                    {showTempName && (
+                      <span className="overflow-hidden text-ellipsis whitespace-nowrap">
+                        {item.dynamic.temporary_name}
+                      </span>
+                    )}
+                    {showCustomName && (
+                      <span className="overflow-hidden text-ellipsis whitespace-nowrap">{item.dynamic.name}</span>
+                    )}
+                  </div>
+                )}
+
+                {effect_name && isWH && (
+                  <WHEffectView
+                    effectName={effect_name}
+                    effectPower={effect_power}
+                    className={classes.SearchItemEffect}
+                  />
+                )}
+              </div>
+              <div>
+                {isWH && (
+                  <div className="flex gap-1 grow justify-between !text-[13px]">
+                    <div></div>
+                    <div className="flex gap-1">
+                      {sortedStatics.map(x => (
+                        <WHClassView key={x} whClassName={x} />
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className="flex gap-1.5 text-[13px] pl-[2px] items-center h-[20px]">
+              <LocalCounter
+                disableInteractive
+                className="[&_span]:!text-[12px] [&_i]:!text-[13px]"
+                hasUserCharacters={hasOnlineUserCharacters}
+                localCounterCharacters={onlineCharacters}
+              />
+              <LocalCounter
+                disableInteractive
+                className="[&_span]:!text-[12px] [&_i]:!text-[13px] text-stone-[400]"
+                contentClassName={clsx('!text-stone-500', { ['!text-yellow-600']: hasOfflineUserCharacters })}
+                hasUserCharacters={hasOfflineUserCharacters}
+                localCounterCharacters={offlineCharacters}
+              />
+              {item.dynamic.locked && <i className={clsx(PrimeIcons.LOCK, 'text-[11px] relative top-[1px]')} />}
+              {hubs.includes(solar_system_id.toString()) && (
+                <i className={clsx(PrimeIcons.MAP_MARKER, 'text-[11px] relative top-[1px]')} />
+              )}
+              {item.dynamic.comments_count != null && item.dynamic.comments_count > 0 && (
+                <WdTooltipWrapper
+                  position={TooltipPosition.top}
+                  content={`[${item.dynamic.comments_count}] Comments in System - click to system to see it in Comments Widget`}
+                >
+                  <i className={clsx(PrimeIcons.COMMENT, 'text-[11px] relative top-[1px]')} />
+                </WdTooltipWrapper>
+              )}
+              {item.dynamic.description != null && item.dynamic.description !== '' && (
+                <WdTooltipWrapper
+                  position={TooltipPosition.top}
+                  content={`System have description - click to system to see it in Info Widget`}
+                >
+                  <i
+                    className={clsx(
+                      'pi hero-chat-bubble-bottom-center-text w-[14px] h-[14px]',
+                      'text-[8px] relative top-[-1px]',
+                    )}
+                  />
+                </WdTooltipWrapper>
+              )}
+              {/*kek*/}
+            </div>
+          </div>
+        </div>
+      );
+    },
+    [characters, hubs, userCharacters, wormholesData],
+  );
+};
+
+export interface TopSearchSidebarProps {
+  show: boolean;
+  onHide: () => void;
+}
+
+export const TopSearchSidebar = ({ show, onHide }: TopSearchSidebarProps) => {
+  const [searchVal, setSearchVal] = useState('');
+
+  // eslint-disable-next-line
+  const inputRef = useRef<any>();
+
+  const {
+    data: { systems },
+  } = useMapRootState();
+
+  const itemTemplate = useItemTemplate();
+
+  const systemsCompiled = useMemo<CompiledSystem[]>(() => {
+    return systems.map(x => ({
+      dynamic: x,
+      static: getSystemStaticInfo(x.id),
+    }));
+  }, [systems]);
+
+  const onShow = useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const filtered = useMemo(() => {
+    let out = systemsCompiled;
+
+    out = out.sort((a, b) => {
+      // 1. Status > 0 — always on top and ASC
+      if (a.dynamic.status > 0 && b.dynamic.status > 0) return a.dynamic.status - b.dynamic.status;
+      if (a.dynamic.status > 0) return -1;
+      if (b.dynamic.status > 0) return 1;
+
+      // 2. IF status = 0, J priority
+      const aStartsWithJ = a.dynamic.name?.startsWith('J') ?? false;
+      const bStartsWithJ = b.dynamic.name?.startsWith('J') ?? false;
+
+      if (aStartsWithJ && !bStartsWithJ) return -1;
+      if (!aStartsWithJ && bStartsWithJ) return 1;
+
+      // 3. IF both starts with J or not - sort by name
+      const nameA = a.dynamic.name ?? '';
+      const nameB = b.dynamic.name ?? '';
+      return nameA.localeCompare(nameB);
+    });
+
+    const normalized = searchVal.toLowerCase();
+
+    if (searchVal !== '') {
+      out = out.filter(x => {
+        if (x.static?.solar_system_name.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        if (x.dynamic.name?.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        if (x.dynamic.temporary_name?.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        return false;
+      });
+    }
+
+    return out;
+  }, [searchVal, systemsCompiled]);
+
+  return (
+    <Sidebar
+      className={clsx(classes.Sidebar, 'bg-neutral-900 !p-[0px] w-[500px]')}
+      visible={show}
+      position="right"
+      onShow={onShow}
+      onHide={onHide}
+      modal={false}
+      header={`Search [${filtered.length}]`}
+      icons={<></>}
+    >
+      <div className={clsx('grid grid-rows-[auto_1fr] gap-y-[8px] h-full')}>
+        <div className={'flex justify-between items-center gap-2 px-2 pt-1'}>
+          <IconField className="w-full">
+            {searchVal.length > 0 && (
+              <WdImgButton
+                className="pi pi-trash"
+                textSize={WdImageSize.large}
+                tooltip={{
+                  content: 'Clear',
+                  className: 'pi p-input-icon',
+                  position: TooltipPosition.top,
+                }}
+                onClick={() => setSearchVal('')}
+              />
+            )}
+            <InputText
+              id="label"
+              className="w-full"
+              aria-describedby="label"
+              ref={inputRef}
+              autoComplete="off"
+              value={searchVal}
+              placeholder="Type To Search"
+              onChange={e => setSearchVal(e.target.value)}
+            />
+          </IconField>
+        </div>
+
+        <VirtualScroller
+          items={filtered}
+          itemSize={48}
+          itemTemplate={itemTemplate}
+          className={clsx(
+            classes.VirtualScroller,
+            'w-full h-full overflow-x-hidden overflow-y-auto custom-scrollbar select-none',
+            '[&>div]:w-full',
+          )}
+          autoSize={false}
+        />
+      </div>
+    </Sidebar>
+  );
+};
+
+interface TopSearchProps {
+  customBtn?: (open: () => void) => React.ReactNode;
+}
+
+export const TopSearch = ({ customBtn }: TopSearchProps) => {
+  const [openAddSystem, setOpenAddSystem] = useState<boolean>(false);
+
+  return (
+    <>
+      {customBtn != null && customBtn(() => setOpenAddSystem(true))}
+      {customBtn == null && (
+        <button
+          className="btn bg-transparent text-gray-400 hover:text-white border-transparent hover:bg-transparent px-2 relative left-1"
+          type="button"
+          onClick={() => setOpenAddSystem(true)}
+        >
+          <i className="pi pi-search text-lg"></i>
+        </button>
+      )}
+
+      <TopSearchSidebar show={openAddSystem} onHide={() => setOpenAddSystem(false)} />
+    </>
+  );
+};
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/TopSearch/index.ts
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/TopSearch/index.ts
@@ -0,0 +1 @@
+export * from './TopSearch.tsx';
--- a/assets/js/hooks/Mapper/components/ui-kit/SystemViewStandalone/SystemViewStandalone.tsx
+++ b/assets/js/hooks/Mapper/components/ui-kit/SystemViewStandalone/SystemViewStandalone.tsx
@@ -14,6 +14,7 @@ export type SystemViewStandaloneStatic = Pick<
 export type SystemViewStandaloneProps = {
  hideRegion?: boolean;
  customName?: string;
+  nameClassName?: string;
  compact?: boolean;
  onContextMenu?(e: MouseEvent, systemId: string): void;
 } & WithClassName &
@@ -23,6 +24,7 @@ export type SystemViewStandaloneProps = {

 export const SystemViewStandalone = ({
  className,
+  nameClassName,
  hideRegion,
  customName,
  class_title,
@@ -57,10 +59,14 @@ export const SystemViewStandalone = ({
    >
      <span className={clsx(classTitleColor)}>{class_title}</span>
      <span
-        className={clsx('text-gray-200 whitespace-nowrap', {
+        className={clsx(
+          'text-gray-200 whitespace-nowrap',
+          {
            ['overflow-hidden text-ellipsis']: compact,
            [classes.CompactName]: compact,
-        })}
+          },
+          nameClassName,
+        )}
      >
        {customName ?? solar_system_name}
      </span>
--- a/assets/js/hooks/Mapper/components/ui-kit/WHClassView/WHClassView.tsx
+++ b/assets/js/hooks/Mapper/components/ui-kit/WHClassView/WHClassView.tsx
@@ -1,10 +1,10 @@
 import classes from './WHClassView.module.scss';
-import { Tooltip } from 'primereact/tooltip';
 import clsx from 'clsx';
 import { InfoDrawer } from '@/hooks/Mapper/components/ui-kit/InfoDrawer';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { WORMHOLE_CLASS_STYLES, WORMHOLES_ADDITIONAL_INFO } from '@/hooks/Mapper/components/map/constants.ts';
 import { useMemo } from 'react';
+import { TooltipPosition, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';

 const prepareMass = (mass: number) => {
  if (mass === 0) {
@@ -45,19 +45,12 @@ export const WHClassView = ({
  const whClass = useMemo(() => WORMHOLES_ADDITIONAL_INFO[whData.dest], [whData.dest]);
  const whClassStyle = WORMHOLE_CLASS_STYLES[whClass?.wormholeClassID] ?? '';

-  const uid = useMemo(() => new Date().getTime().toString(), []);
-
  return (
    <div className={clsx(classes.WHClassViewRoot, className)}>
      {!hideTooltip && (
-        <Tooltip
-          target={`.wh-name${whClassName}${uid}`}
-          position="right"
-          mouseTrack
-          mouseTrackLeft={20}
-          mouseTrackTop={30}
-          className="border border-green-300 rounded border-opacity-10 bg-stone-900 bg-opacity-90 "
-        >
+        <WdTooltipWrapper
+          position={TooltipPosition.bottom}
+          content={
            <div className="flex gap-3">
              <div className="flex flex-col gap-1">
                <InfoDrawer title="Total mass">{prepareMass(whData.total_mass)}</InfoDrawer>
@@ -68,15 +61,13 @@ export const WHClassView = ({
                <InfoDrawer title="Mass regen">{prepareMass(whData.mass_regen)}</InfoDrawer>
              </div>
            </div>
-        </Tooltip>
-      )}
-
+          }
+        >
          <div
            className={clsx(
              classes.WHClassViewContent,
              { [classes.NoOffset]: noOffset },
              'wh-name select-none cursor-help',
-          `wh-name${whClassName}${uid}`,
            )}
          >
            {!hideWhClassName && <span className={clsx({ [whClassStyle]: highlightName })}>{whClassName}</span>}
@@ -86,6 +77,8 @@ export const WHClassView = ({
              </span>
            )}
          </div>
+        </WdTooltipWrapper>
+      )}
    </div>
  );
 };
--- a/assets/js/hooks/Mapper/constants.ts
+++ b/assets/js/hooks/Mapper/constants.ts
@@ -151,3 +151,12 @@ export const MINIMAP_PLACEMENT_MAP = {
  [PingsPlacement.rightBottom]: 'bottom-right',
  [PingsPlacement.leftBottom]: 'bottom-left',
 };
+
+
+export const SPACE_TO_CLASS: Record<string, string> = {
+  [Spaces.Caldari]: 'Caldaria',
+  [Spaces.Matar]: 'Mataria',
+  [Spaces.Amarr]: 'Amarria',
+  [Spaces.Gallente]: 'Gallente',
+  [Spaces.Pochven]: 'Pochven',
+};
--- a/assets/js/hooks/Mapper/mapRootProvider/hooks/useMapRootHandlers.ts
+++ b/assets/js/hooks/Mapper/mapRootProvider/hooks/useMapRootHandlers.ts
@@ -63,7 +63,9 @@ export const useMapRootHandlers = (ref: ForwardedRef<MapHandlers>) => {
  const { pingAdded, pingCancelled } = useCommandPings();
  const { characterActivityData, trackingCharactersData, userSettingsUpdated } = useCommandsActivity();

-  useImperativeHandle(ref, () => {
+  useImperativeHandle(
+    ref,
+    () => {
      return {
        command(type, data) {
          switch (type) {
@@ -181,5 +183,7 @@ export const useMapRootHandlers = (ref: ForwardedRef<MapHandlers>) => {
          emitMapEvent({ name: type, data });
        },
      };
-  }, []);
+    },
+    [],
+  );
 };
--- a/assets/js/hooks/Mapper/types/system.ts
+++ b/assets/js/hooks/Mapper/types/system.ts
@@ -118,6 +118,7 @@ export type SolarSystemRawType = {
  name: string | null;
  temporary_name: string | null;
  linked_sig_eve_id: string | null;
+  comments_count: number | null;

  system_static_info: SolarSystemStaticInfoRaw;
  system_signatures: SystemSignature[];
--- a/assets/static/images/amarr-small.png
+++ b/assets/static/images/amarr-small.png