From ac71b0af649d1585ee894e0c71a69bbb4e98340c Mon Sep 17 00:00:00 2001
From: DanSylvest <cublakhan257@gmail.com>
Date: Sat, 29 Nov 2025 21:07:48 +0300
Subject: [PATCH] feat: rework wormholes reference

---
 .../mapRootContent/MapRootContent.tsx         |  16 +-
 .../MapContextMenu/MapContextMenu.tsx         |  14 +-
 .../components/RightBar/RightBar.tsx          |  12 ++
 .../WormholeSignaturesDialog.tsx              | 153 +++++++++---------
 .../Mapper/components/ui-kit/RespawnTag.tsx   |  20 +++
 .../hooks/Mapper/components/ui-kit/index.ts   |   1 +
 .../hooks/useMapRootHandlers.ts               |   4 -
 assets/js/hooks/Mapper/types/mapHandlers.ts   |   5 +-
 .../event_handlers/map_core_event_handler.ex  |   9 --
 .../live/map/map_live.html.heex               |   9 --
 10 files changed, 126 insertions(+), 117 deletions(-)
 create mode 100644 assets/js/hooks/Mapper/components/ui-kit/RespawnTag.tsx

diff --git a/assets/js/hooks/Mapper/components/mapRootContent/MapRootContent.tsx b/assets/js/hooks/Mapper/components/mapRootContent/MapRootContent.tsx
index 88edbc1e..7b23404d 100644
--- a/assets/js/hooks/Mapper/components/mapRootContent/MapRootContent.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/MapRootContent.tsx
@@ -35,7 +35,7 @@ export const MapRootContent = ({}: MapRootContentProps) => {
   const [showOnTheMap, setShowOnTheMap] = useState(false);
   const [showMapSettings, setShowMapSettings] = useState(false);
   const [showTrackingDialog, setShowTrackingDialog] = useState(false);
-  const [showWormholeSignatures, setShowWormholeSignatures] = useState(false);
+  const [showWormholeList, setShowWormholeList] = useState(false);
 
   /* Important Notice - this solution needs for use one instance of MapInterface */
   const mapInterface = isReady ? <MapInterface /> : null;
@@ -43,16 +43,13 @@ export const MapRootContent = ({}: MapRootContentProps) => {
   const handleShowOnTheMap = useCallback(() => setShowOnTheMap(true), []);
   const handleShowMapSettings = useCallback(() => setShowMapSettings(true), []);
   const handleShowTrackingDialog = useCallback(() => setShowTrackingDialog(true), []);
+  const handleShowWormholesReference = useCallback(() => setShowWormholeList(true), []);
 
   useMapEventListener(event => {
     if (event.name === Commands.showTracking) {
       setShowTrackingDialog(true);
       return true;
     }
-    if (event.name === Commands.showWormholeSignatures) {
-      setShowWormholeSignatures(true);
-      return true;
-    }
   });
 
   useSkipContextMenu();
@@ -71,6 +68,7 @@ export const MapRootContent = ({}: MapRootContentProps) => {
                 onShowOnTheMap={handleShowOnTheMap}
                 onShowMapSettings={handleShowMapSettings}
                 onShowTrackingDialog={handleShowTrackingDialog}
+                onShowWormholesReference={handleShowWormholesReference}
                 additionalContent={<PingsInterface hasLeftOffset />}
               />
             </div>
@@ -85,6 +83,7 @@ export const MapRootContent = ({}: MapRootContentProps) => {
                   onShowOnTheMap={handleShowOnTheMap}
                   onShowMapSettings={handleShowMapSettings}
                   onShowTrackingDialog={handleShowTrackingDialog}
+                  onShowWormholesReference={handleShowWormholesReference}
                 />
               </div>
             </Topbar>
@@ -99,12 +98,7 @@ export const MapRootContent = ({}: MapRootContentProps) => {
         {showTrackingDialog && (
           <TrackingDialog visible={showTrackingDialog} onHide={() => setShowTrackingDialog(false)} />
         )}
-        {showWormholeSignatures && (
-          <WormholeSignaturesDialog
-            visible={showWormholeSignatures}
-            onHide={() => setShowWormholeSignatures(false)}
-          />
-        )}
+        <WormholeSignaturesDialog visible={showWormholeList} onHide={() => setShowWormholeList(false)} />
 
         {hasOldSettings && <OldSettingsDialog />}
       </Layout>
diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/MapContextMenu/MapContextMenu.tsx b/assets/js/hooks/Mapper/components/mapRootContent/components/MapContextMenu/MapContextMenu.tsx
index cf581d83..b0a9a608 100644
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/MapContextMenu/MapContextMenu.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/MapContextMenu/MapContextMenu.tsx
@@ -12,9 +12,15 @@ export interface MapContextMenuProps {
   onShowOnTheMap?: () => void;
   onShowMapSettings?: () => void;
   onShowTrackingDialog?: () => void;
+  onShowWormholesReference?: () => void;
 }
 
-export const MapContextMenu = ({ onShowOnTheMap, onShowMapSettings, onShowTrackingDialog }: MapContextMenuProps) => {
+export const MapContextMenu = ({
+  onShowOnTheMap,
+  onShowMapSettings,
+  onShowTrackingDialog,
+  onShowWormholesReference,
+}: MapContextMenuProps) => {
   const {
     outCommand,
     storedSettings: { setInterfaceSettings },
@@ -52,6 +58,12 @@ export const MapContextMenu = ({ onShowOnTheMap, onShowMapSettings, onShowTracki
           command: onShowOnTheMap,
           visible: canTrackCharacters,
         },
+        {
+          label: 'Wormholes Ref.',
+          icon: 'pi pi-bullseye',
+          command: onShowWormholesReference,
+          visible: canTrackCharacters,
+        },
         { separator: true, visible: true },
         {
           label: 'Settings',
diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/RightBar/RightBar.tsx b/assets/js/hooks/Mapper/components/mapRootContent/components/RightBar/RightBar.tsx
index cbf22952..50a860af 100644
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/RightBar/RightBar.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/RightBar/RightBar.tsx
@@ -14,6 +14,7 @@ interface RightBarProps {
   onShowOnTheMap?: () => void;
   onShowMapSettings?: () => void;
   onShowTrackingDialog?: () => void;
+  onShowWormholesReference?: () => void;
   additionalContent?: ReactNode;
 }
 
@@ -21,6 +22,7 @@ export const RightBar = ({
   onShowOnTheMap,
   onShowMapSettings,
   onShowTrackingDialog,
+  onShowWormholesReference,
   additionalContent,
 }: RightBarProps) => {
   const {
@@ -90,6 +92,16 @@ export const RightBar = ({
                   <i className="pi pi-hashtag"></i>
                 </button>
               </WdTooltipWrapper>
+
+              <WdTooltipWrapper content="Wormholes Reference" 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={onShowWormholesReference}
+                >
+                  <i className="pi pi-bullseye"></i>
+                </button>
+              </WdTooltipWrapper>
             </div>
           </>
         )}
diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/WormholeSignaturesDialog/WormholeSignaturesDialog.tsx b/assets/js/hooks/Mapper/components/mapRootContent/components/WormholeSignaturesDialog/WormholeSignaturesDialog.tsx
index 18f8cbd6..97a6ef19 100644
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/WormholeSignaturesDialog/WormholeSignaturesDialog.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/WormholeSignaturesDialog/WormholeSignaturesDialog.tsx
@@ -4,7 +4,7 @@ import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { WormholeDataRaw } from '@/hooks/Mapper/types';
-import { WHClassView } from '@/hooks/Mapper/components/ui-kit';
+import { RespawnTag, WHClassView } from '@/hooks/Mapper/components/ui-kit';
 import { kgToTons } from '@/hooks/Mapper/utils/kgToTons.ts';
 import { WORMHOLE_CLASS_STYLES, WORMHOLES_ADDITIONAL_INFO } from '@/hooks/Mapper/components/map/constants.ts';
 import clsx from 'clsx';
@@ -12,15 +12,61 @@ import { InputText } from 'primereact/inputtext';
 import { IconField } from 'primereact/iconfield';
 import { InputIcon } from 'primereact/inputicon';
 
+const renderSpawns = (w: WormholeDataRaw) => (
+  <div className="flex gap-1 flex-wrap">
+    {w.src.map(s => {
+      const group = s.split('-')[0];
+      const info = WORMHOLES_ADDITIONAL_INFO[group];
+
+      if (!info) {
+        return (
+          <span
+            key={s}
+            className="px-[4px] py-[1px] rounded bg-stone-800 text-stone-300 text-xs border border-stone-700"
+          >
+            {s}
+          </span>
+        );
+      }
+
+      const cls = WORMHOLE_CLASS_STYLES[String(info.wormholeClassID)] || '';
+      const label = `${info.shortName}`;
+      return (
+        <span
+          key={s}
+          className={clsx(cls, 'px-[4px] py-[1px] rounded text-xs border border-stone-700 bg-stone-900/40')}
+        >
+          {label}
+        </span>
+      );
+    })}
+  </div>
+);
+
+const renderName = (w: WormholeDataRaw) => (
+  <div className="flex items-center gap-2">
+    <WHClassView
+      whClassName={w.name}
+      noOffset
+      useShortTitle
+      classNameWh="overflow-hidden text-ellipsis whitespace-nowrap"
+    />
+  </div>
+);
+
+const renderRespawn = (w: WormholeDataRaw) => (
+  <div className="flex gap-1 flex-wrap">
+    {w.respawn.map(r => (
+      <RespawnTag key={r} value={r} />
+    ))}
+  </div>
+);
+
 export interface WormholeSignaturesDialogProps {
   visible: boolean;
   onHide: () => void;
 }
 
-const RespawnTag = ({ value }: { value: string }) => (
-  <span className="px-2 py-[2px] rounded bg-stone-800 text-stone-300 text-xs border border-stone-700">{value}</span>
-);
-
 export const WormholeSignaturesDialog = ({ visible, onHide }: WormholeSignaturesDialogProps) => {
   const {
     data: { wormholes },
@@ -61,49 +107,13 @@ export const WormholeSignaturesDialog = ({ visible, onHide }: WormholeSignatures
     });
   }, [wormholes, filter]);
 
-  const renderName = (w: WormholeDataRaw) => (
-    <div className="flex items-center gap-2">
-      <WHClassView whClassName={w.name} noOffset useShortTitle />
-    </div>
-  );
-
-  const renderRespawn = (w: WormholeDataRaw) => (
-    <div className="flex gap-1 flex-wrap">
-      {w.respawn.map(r => (
-        <RespawnTag key={r} value={r} />
-      ))}
-    </div>
-  );
-
-  const renderSpawns = (w: WormholeDataRaw) => (
-    <div className="flex gap-1 flex-wrap">
-      {w.src.map(s => {
-        const group = s.split('-')[0];
-        const info = WORMHOLES_ADDITIONAL_INFO[group];
-        if (!info)
-          return (
-            <span key={s} className="px-2 py-[2px] rounded bg-stone-800 text-stone-300 text-xs border border-stone-700">
-              {s}
-            </span>
-          );
-        const cls = WORMHOLE_CLASS_STYLES[String(info.wormholeClassID)] || '';
-        const label = `${info.shortName}`;
-        return (
-          <span key={s} className={clsx(cls, 'px-2 py-[2px] rounded text-xs border border-stone-700 bg-stone-900/40')}>
-            {label}
-          </span>
-        );
-      })}
-    </div>
-  );
-
   return (
     <Dialog
-      header="Wormhole Signatures Reference"
+      header="Wormholes Reference"
       visible={visible}
-      draggable={true}
+      draggable={false}
       resizable={false}
-      style={{ width: '820px', height: '600px' }}
+      className="w-[950px] h-[600px]"
       onHide={onHide}
       contentClassName="!p-0 flex flex-col h-full"
     >
@@ -111,12 +121,10 @@ export const WormholeSignaturesDialog = ({ visible, onHide }: WormholeSignatures
         <div className="font-semibold text-sm text-stone-200">Reference list of all wormhole types</div>
         <IconField iconPosition="right">
           <InputIcon
-            className={clsx(
-              'pi pi-times',
-              filter
-                ? 'cursor-pointer text-stone-400 hover:text-stone-200'
-                : 'text-stone-700 opacity-50 cursor-default',
-            )}
+            className={clsx('pi pi-times', {
+              ['cursor-pointer text-stone-400 hover:text-stone-200']: filter,
+              ['text-stone-700 opacity-50 cursor-default']: !filter,
+            })}
             onClick={() => filter && setFilter('')}
             role="button"
             aria-label="Clear search"
@@ -127,47 +135,34 @@ export const WormholeSignaturesDialog = ({ visible, onHide }: WormholeSignatures
         </IconField>
       </div>
 
-      <div className="flex-1 p-2 overflow-x-hidden">
-        <DataTable
-          value={filtered}
-          size="small"
-          scrollable
-          scrollHeight="flex"
-          stripedRows
-          style={{ width: '100%', height: '100%' }}
-          tableStyle={{ tableLayout: 'fixed', width: '100%' }}
-        >
-          <Column
-            header="Type"
-            body={renderName}
-            style={{ width: '140px' }}
-            bodyClassName="whitespace-normal break-words"
-          />
-          <Column
-            header="Spawns In"
-            body={renderSpawns}
-            style={{ width: '200px' }}
-            bodyClassName="whitespace-normal break-words"
-          />
+      <div className="flex-1 p-3 overflow-x-hidden">
+        <DataTable value={filtered} size="small" scrollable scrollHeight="flex" stripedRows>
+          <Column header="Type" body={renderName} className="w-[160px]" bodyClassName="whitespace-normal break-words" />
+          <Column header="Spawns In" body={renderSpawns} bodyClassName="whitespace-normal break-words text-[13px]" />
           <Column
             field="lifetime"
             header="Lifetime"
-            style={{ width: '90px' }}
-            bodyClassName="whitespace-normal break-words"
+            className="w-[90px]"
+            bodyClassName="whitespace-normal break-words text-[13px]"
           />
           <Column
             header="Total Mass"
-            style={{ width: '120px' }}
+            className="w-[120px]"
             body={(w: WormholeDataRaw) => kgToTons(w.total_mass)}
-            bodyClassName="whitespace-normal break-words"
+            bodyClassName="whitespace-normal break-words text-[13px]"
           />
           <Column
             header="Max/jump"
-            style={{ width: '120px' }}
+            className="w-[120px]"
             body={(w: WormholeDataRaw) => kgToTons(w.max_mass_per_jump)}
-            bodyClassName="whitespace-normal break-words"
+            bodyClassName="whitespace-normal break-words text-[13px]"
+          />
+          <Column
+            header="Respawn"
+            className="w-[150px]"
+            body={renderRespawn}
+            bodyClassName="whitespace-normal break-words text-[13px]"
           />
-          <Column header="Respawn" body={renderRespawn} bodyClassName="whitespace-normal break-words" />
         </DataTable>
       </div>
     </Dialog>
diff --git a/assets/js/hooks/Mapper/components/ui-kit/RespawnTag.tsx b/assets/js/hooks/Mapper/components/ui-kit/RespawnTag.tsx
new file mode 100644
index 00000000..c7d0aefd
--- /dev/null
+++ b/assets/js/hooks/Mapper/components/ui-kit/RespawnTag.tsx
@@ -0,0 +1,20 @@
+import { Respawn } from '@/hooks/Mapper/types';
+import clsx from 'clsx';
+
+export const WORMHOLE_SPAWN_CLASSES_BG = {
+  [Respawn.static]: 'bg-lime-400/80 text-stone-950',
+  [Respawn.wandering]: 'bg-stone-800',
+  [Respawn.reverse]: 'bg-blue-400 text-stone-950',
+};
+
+type RespawnTagProps = { value: string };
+export const RespawnTag = ({ value }: RespawnTagProps) => (
+  <span
+    className={clsx(
+      'px-[6px] py-[0px] rounded text-stone-300 text-[12px] font-[500] border border-stone-700',
+      WORMHOLE_SPAWN_CLASSES_BG[value as Respawn],
+    )}
+  >
+    {value}
+  </span>
+);
diff --git a/assets/js/hooks/Mapper/components/ui-kit/index.ts b/assets/js/hooks/Mapper/components/ui-kit/index.ts
index b470a3fb..504bcf04 100644
--- a/assets/js/hooks/Mapper/components/ui-kit/index.ts
+++ b/assets/js/hooks/Mapper/components/ui-kit/index.ts
@@ -23,3 +23,4 @@ export * from './MenuItemWithInfo';
 export * from './MarkdownTextViewer.tsx';
 export * from './WdButton.tsx';
 export * from './constants.ts';
+export * from './RespawnTag';
diff --git a/assets/js/hooks/Mapper/mapRootProvider/hooks/useMapRootHandlers.ts b/assets/js/hooks/Mapper/mapRootProvider/hooks/useMapRootHandlers.ts
index d1e5b405..22841822 100644
--- a/assets/js/hooks/Mapper/mapRootProvider/hooks/useMapRootHandlers.ts
+++ b/assets/js/hooks/Mapper/mapRootProvider/hooks/useMapRootHandlers.ts
@@ -172,10 +172,6 @@ export const useMapRootHandlers = (ref: ForwardedRef<MapHandlers>) => {
           case Commands.pingCancelled:
             pingCancelled(data as CommandPingCancelled);
             break;
-
-          case Commands.showWormholeSignatures:
-            break;
-
           default:
             console.warn(`JOipP Interface handlers: Unknown command: ${type}`, data);
             break;
diff --git a/assets/js/hooks/Mapper/types/mapHandlers.ts b/assets/js/hooks/Mapper/types/mapHandlers.ts
index d12c3149..bfde25dd 100644
--- a/assets/js/hooks/Mapper/types/mapHandlers.ts
+++ b/assets/js/hooks/Mapper/types/mapHandlers.ts
@@ -40,7 +40,6 @@ export enum Commands {
   showTracking = 'show_tracking',
   pingAdded = 'ping_added',
   pingCancelled = 'ping_cancelled',
-  showWormholeSignatures = 'show_wormhole_signatures',
 }
 
 export type Command =
@@ -76,8 +75,7 @@ export type Command =
   | Commands.updateTracking
   | Commands.showTracking
   | Commands.pingAdded
-  | Commands.pingCancelled
-  | Commands.showWormholeSignatures;
+  | Commands.pingCancelled;
 
 export type CommandInit = {
   systems: SolarSystemRawType[];
@@ -211,7 +209,6 @@ export interface CommandData {
   [Commands.showTracking]: CommandShowTracking;
   [Commands.pingAdded]: CommandPingAdded;
   [Commands.pingCancelled]: CommandPingCancelled;
-  [Commands.showWormholeSignatures]: CommandShowWormholeSignatures;
 }
 
 export interface MapHandlers {
diff --git a/lib/wanderer_app_web/live/map/event_handlers/map_core_event_handler.ex b/lib/wanderer_app_web/live/map/event_handlers/map_core_event_handler.ex
index f6a9f759..c7f7c47f 100644
--- a/lib/wanderer_app_web/live/map/event_handlers/map_core_event_handler.ex
+++ b/lib/wanderer_app_web/live/map/event_handlers/map_core_event_handler.ex
@@ -219,15 +219,6 @@ defmodule WandererAppWeb.MapCoreEventHandler do
     {:reply, %{user_settings: user_settings}, socket}
   end
 
-  def handle_ui_event("show_wormhole_signatures", _event, socket) do
-    {:noreply,
-     socket
-     |> MapEventHandler.push_map_event(
-       "show_wormhole_signatures",
-       %{}
-     )}
-  end
-
   def handle_ui_event(
         "update_user_settings",
         user_settings_form,
diff --git a/lib/wanderer_app_web/live/map/map_live.html.heex b/lib/wanderer_app_web/live/map/map_live.html.heex
index 3ef8c0e9..c83f1d9f 100644
--- a/lib/wanderer_app_web/live/map/map_live.html.heex
+++ b/lib/wanderer_app_web/live/map/map_live.html.heex
@@ -32,15 +32,6 @@
     <.icon name="hero-chart-bar-solid" class="w-6 h-6" />
   </button>
 
-  <button
-    id="show-wormhole-signatures-button"
-    class="h-8 w-8 hover:text-white"
-    phx-click="show_wormhole_signatures"
-    title="Wormhole Signatures Reference"
-  >
-    <.icon name="hero-sparkles-solid" class="w-6 h-6" />
-  </button>
-
   <.link
     :if={(@user_permissions || %{}) |> Map.get(:delete_map, false)}
     id={"map-audit-#{@map_slug}"}