chore: release version v1.52.4

* feat(Signatures): Added character names

CHANGELOG.md

@@ -2,6 +2,83 @@
 
 <!-- changelog -->
 
+## [v1.52.4](https://github.com/wanderer-industries/wanderer/compare/v1.52.3...v1.52.4) (2025-02-21)
+
+
+
+
+### Bug Fixes:
+
+* signature paste for russian lang
+
+## [v1.52.3](https://github.com/wanderer-industries/wanderer/compare/v1.52.2...v1.52.3) (2025-02-21)
+
+
+
+
+### Bug Fixes:
+
+* remove signature expiration (#196)
+
+## [v1.52.2](https://github.com/wanderer-industries/wanderer/compare/v1.52.1...v1.52.2) (2025-02-21)
+
+
+
+
+### Bug Fixes:
+
+* prevent constant full signature widget rerender (#195)
+
+## [v1.52.1](https://github.com/wanderer-industries/wanderer/compare/v1.52.0...v1.52.1) (2025-02-20)
+
+
+
+
+### Bug Fixes:
+
+* proper virtual scroller usage (#192)
+
+* restore delete key functionality for nodes (#191)
+
+## [v1.52.0](https://github.com/wanderer-industries/wanderer/compare/v1.51.3...v1.52.0) (2025-02-19)
+
+
+
+
+### Features:
+
+* Map: Added map characters view
+
+## [v1.51.3](https://github.com/wanderer-industries/wanderer/compare/v1.51.2...v1.51.3) (2025-02-19)
+
+
+
+
+### Bug Fixes:
+
+* pending deletion working again (#185)
+
+## [v1.51.2](https://github.com/wanderer-industries/wanderer/compare/v1.51.1...v1.51.2) (2025-02-18)
+
+
+
+
+## [v1.51.1](https://github.com/wanderer-industries/wanderer/compare/v1.51.0...v1.51.1) (2025-02-18)
+
+
+
+
+## [v1.51.0](https://github.com/wanderer-industries/wanderer/compare/v1.50.0...v1.51.0) (2025-02-17)
+
+
+
+
+### Features:
+
+* add undo deletion for signatures (#155)
+
+* add undo for signature deletion and addition
+
 ## [v1.50.0](https://github.com/wanderer-industries/wanderer/compare/v1.49.0...v1.50.0) (2025-02-17)
 
 

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

@@ -37,7 +37,7 @@ const INITIAL_DATA: MapData = {
   userPermissions: {},
   systemSignatures: {} as Record<string, SystemSignature[]>,
   options: {} as Record<string, string | boolean>,
-  is_subscription_active: false,
+  isSubscriptionActive: false,
 };
 
 export interface MapContextProps {

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKillsContent/SystemKillsContent.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useEffect, useState } from 'react';
+import React, { useMemo } from 'react';
 import clsx from 'clsx';
 import { DetailedKill } from '@/hooks/Mapper/types/kills';
 import { VirtualScroller } from 'primereact/virtualscroller';
@@ -6,7 +6,6 @@ import { useSystemKillsItemTemplate } from '../hooks/useSystemKillsItemTemplate'
 import classes from './SystemKillsContent.module.scss';
 
 export const ITEM_HEIGHT = 35;
-export const CONTENT_MARGINS = 5;
 
 export interface SystemKillsContentProps {
   kills: DetailedKill[];
@@ -39,45 +38,21 @@ export const SystemKillsContent: React.FC<SystemKillsContentProps> = ({
     }
   }, [kills, timeRange, limit]);
 
-  const computedHeight = autoSize ? Math.max(processedKills.length, 1) * ITEM_HEIGHT + CONTENT_MARGINS : undefined;
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const scrollerRef = useRef<VirtualScroller | null>(null);
-  const [containerHeight, setContainerHeight] = useState<number>(0);
-
-  useEffect(() => {
-    if (!autoSize && containerRef.current) {
-      const measure = () => {
-        const newHeight = containerRef.current?.clientHeight || 0;
-        setContainerHeight(newHeight);
-      };
-
-      measure();
-      const observer = new ResizeObserver(measure);
-      observer.observe(containerRef.current);
-      window.addEventListener('resize', measure);
-
-      return () => {
-        observer.disconnect();
-        window.removeEventListener('resize', measure);
-      };
-    }
-  }, [autoSize]);
+  const computedHeight = autoSize ? Math.max(processedKills.length, 1) * ITEM_HEIGHT : undefined;
+  const scrollerHeight = autoSize ? `${computedHeight}px` : '100%';
 
   const itemTemplate = useSystemKillsItemTemplate(systemNameMap, onlyOneSystem);
-  const scrollerHeight = autoSize ? `${computedHeight}px` : containerHeight ? `${containerHeight}px` : '100%';
 
   return (
-    <div ref={autoSize ? undefined : containerRef} className={clsx('w-full h-full', classes.wrapper)}>
+    <div className={clsx('w-full h-full', classes.wrapper)}>
       <VirtualScroller
-        ref={autoSize ? undefined : scrollerRef}
         items={processedKills}
         itemSize={ITEM_HEIGHT}
         itemTemplate={itemTemplate}
         autoSize={autoSize}
         scrollWidth="100%"
         style={{ height: scrollerHeight }}
-        className={clsx('w-full h-full custom-scrollbar select-none overflow-x-hidden overflow-y-auto', {
+        className={clsx('w-full h-full custom-scrollbar select-none', {
           [classes.VirtualScroller]: !autoSize,
         })}
         pt={{
@@ -89,3 +64,5 @@ export const SystemKillsContent: React.FC<SystemKillsContentProps> = ({
     </div>
   );
 };
+
+export default SystemKillsContent;

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

@@ -0,0 +1,96 @@
+import React from 'react';
+import { SystemView, WdCheckbox, WdImgButton, TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
+import { PrimeIcons } from 'primereact/api';
+import { CheckboxChangeEvent } from 'primereact/checkbox';
+import { InfoDrawer, LayoutEventBlocker } from '@/hooks/Mapper/components/ui-kit';
+import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
+
+export type HeaderProps = {
+  systemId: string;
+  isNotSelectedSystem: boolean;
+  sigCount: number;
+  isCompact: boolean;
+  lazyDeleteValue: boolean;
+  onLazyDeleteChange: (checked: boolean) => void;
+  pendingCount: number;
+  onUndoClick: () => void;
+  onSettingsClick: () => void;
+};
+
+function HeaderImpl({
+  systemId,
+  isNotSelectedSystem,
+  sigCount,
+  isCompact,
+  lazyDeleteValue,
+  onLazyDeleteChange,
+  pendingCount,
+  onUndoClick,
+  onSettingsClick,
+}: HeaderProps) {
+  return (
+    <div className="flex justify-between items-center text-xs w-full h-full">
+      <div className="flex justify-between items-center gap-1">
+        {!isCompact && (
+          <div className="flex whitespace-nowrap text-ellipsis overflow-hidden text-stone-400">
+            {sigCount ? `[${sigCount}] ` : ''}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">
+          <WdCheckbox
+            size="xs"
+            labelSide="left"
+            label={isCompact ? '' : 'Lazy delete'}
+            value={lazyDeleteValue}
+            classNameLabel="text-stone-400 hover:text-stone-200 transition duration-300 whitespace-nowrap text-ellipsis overflow-hidden"
+            onChange={(event: CheckboxChangeEvent) => onLazyDeleteChange(!!event.checked)}
+          />
+        </WdTooltipWrapper>
+
+        {pendingCount > 0 && (
+          <WdImgButton
+            className={PrimeIcons.UNDO}
+            style={{ color: 'red' }}
+            tooltip={{ content: `Undo pending changes (${pendingCount})` }}
+            onClick={onUndoClick}
+          />
+        )}
+
+        <WdImgButton
+          className={PrimeIcons.QUESTION_CIRCLE}
+          tooltip={{
+            position: TooltipPosition.left,
+            content: (
+              <div className="flex flex-col gap-1">
+                <InfoDrawer title={<b className="text-slate-50">How to add/update signature?</b>}>
+                  In game you need to select one or more signatures <br /> in the list in{' '}
+                  <b className="text-sky-500">Probe scanner</b>. <br /> Use next hotkeys:
+                  <br />
+                  <b className="text-sky-500">Shift + LMB</b> or <b className="text-sky-500">Ctrl + LMB</b>
+                  <br /> or <b className="text-sky-500">Ctrl + A</b> for select all
+                  <br /> and then use <b className="text-sky-500">Ctrl + C</b>, after you need to go <br />
+                  here, select Solar system and paste it with <b className="text-sky-500">Ctrl + V</b>
+                </InfoDrawer>
+                <InfoDrawer title={<b className="text-slate-50">How to select?</b>}>
+                  For selecting any signature, click on it <br /> with hotkeys{' '}
+                  <b className="text-sky-500">Shift + LMB</b> or <b className="text-sky-500">Ctrl + LMB</b>
+                </InfoDrawer>
+                <InfoDrawer title={<b className="text-slate-50">How to delete?</b>}>
+                  To delete any signature, first select it <br /> and then press <b className="text-sky-500">Del</b>
+                </InfoDrawer>
+              </div>
+            ),
+          }}
+        />
+
+        <WdImgButton className={PrimeIcons.SLIDERS_H} onClick={onSettingsClick} />
+      </LayoutEventBlocker>
+    </div>
+  );
+}
+
+export const SystemSignaturesHeader = React.memo(HeaderImpl);

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

@@ -1,12 +1,5 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
-import {
-  InfoDrawer,
-  LayoutEventBlocker,
-  SystemView,
-  TooltipPosition,
-  WdCheckbox,
-  WdImgButton,
-} from '@/hooks/Mapper/components/ui-kit';
 import { SystemSignaturesContent } from './SystemSignaturesContent';
 import {
   COSMIC_ANOMALY,
@@ -19,28 +12,27 @@ import {
   STRUCTURE,
   SystemSignatureSettingsDialog,
 } from './SystemSignatureSettingsDialog';
-import { SignatureGroup } from '@/hooks/Mapper/types';
-
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-import { PrimeIcons } from 'primereact/api';
-
+import { SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { CheckboxChangeEvent } from 'primereact/checkbox';
-import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
-import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
+import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth';
+import { useHotkey } from '@/hooks/Mapper/hooks';
+import { COMPACT_MAX_WIDTH } from './constants';
+import { renderHeaderLabel } from './renders';
 
-const SIGNATURE_SETTINGS_KEY = 'wanderer_system_signature_settings_v5_2';
+const SIGNATURE_SETTINGS_KEY = 'wanderer_system_signature_settings_v5_5';
 export const SHOW_DESCRIPTION_COLUMN_SETTING = 'show_description_column_setting';
 export const SHOW_UPDATED_COLUMN_SETTING = 'SHOW_UPDATED_COLUMN_SETTING';
+export const SHOW_CHARACTER_COLUMN_SETTING = 'SHOW_CHARACTER_COLUMN_SETTING';
 export const LAZY_DELETE_SIGNATURES_SETTING = 'LAZY_DELETE_SIGNATURES_SETTING';
 export const KEEP_LAZY_DELETE_SETTING = 'KEEP_LAZY_DELETE_ENABLED_SETTING';
 
-const settings: Setting[] = [
+const SETTINGS: Setting[] = [
   { key: SHOW_UPDATED_COLUMN_SETTING, name: 'Show Updated Column', value: false, isFilter: false },
   { key: SHOW_DESCRIPTION_COLUMN_SETTING, name: 'Show Description Column', value: false, isFilter: false },
+  { key: SHOW_CHARACTER_COLUMN_SETTING, name: 'Show Character Column', value: false, isFilter: false },
   { key: LAZY_DELETE_SIGNATURES_SETTING, name: 'Lazy Delete Signatures', value: false, isFilter: false },
   { key: KEEP_LAZY_DELETE_SETTING, name: 'Keep "Lazy Delete" Enabled', value: false, isFilter: false },
+
   { key: COSMIC_ANOMALY, name: 'Show Anomalies', value: true, isFilter: true },
   { key: COSMIC_SIGNATURE, name: 'Show Cosmic Signatures', value: true, isFilter: true },
   { key: DEPLOYABLE, name: 'Show Deployables', value: true, isFilter: true },
@@ -56,108 +48,107 @@ const settings: Setting[] = [
   { key: SignatureGroup.CombatSite, name: 'Show Combat Sites', value: true, isFilter: true },
 ];
 
-const defaultSettings = () => {
-  return [...settings];
-};
+function getDefaultSettings(): Setting[] {
+  return [...SETTINGS];
+}
 
-export const SystemSignatures = () => {
+export const SystemSignatures: React.FC = () => {
   const {
     data: { selectedSystems },
   } = useMapRootState();
 
   const [visible, setVisible] = useState(false);
-  const [settings, setSettings] = useState<Setting[]>(defaultSettings);
+
+  const [currentSettings, setCurrentSettings] = useState<Setting[]>(() => {
+    const stored = localStorage.getItem(SIGNATURE_SETTINGS_KEY);
+    if (stored) {
+      try {
+        return JSON.parse(stored) as Setting[];
+      } catch (error) {
+        console.error('Error parsing stored settings', error);
+      }
+    }
+    return getDefaultSettings();
+  });
+
+  useEffect(() => {
+    localStorage.setItem(SIGNATURE_SETTINGS_KEY, JSON.stringify(currentSettings));
+  }, [currentSettings]);
+
+  const [sigCount, setSigCount] = useState<number>(0);
+  const [pendingSigs, setPendingSigs] = useState<SystemSignature[]>([]);
+
+  const undoPendingFnRef = useRef<() => void>(() => {});
+
+  const handleSigCountChange = useCallback((count: number) => {
+    setSigCount(count);
+  }, []);
 
   const [systemId] = selectedSystems;
-
   const isNotSelectedSystem = selectedSystems.length !== 1;
 
-  const lazyDeleteValue = useMemo(() => {
-    return settings.find(setting => setting.key === LAZY_DELETE_SIGNATURES_SETTING)!.value;
-  }, [settings]);
+  const lazyDeleteValue = useMemo(
+    () => currentSettings.find(setting => setting.key === LAZY_DELETE_SIGNATURES_SETTING)?.value || false,
+    [currentSettings]
+  );
 
-  const handleSettingsChange = useCallback((settings: Setting[]) => {
-    setSettings(settings);
-    localStorage.setItem(SIGNATURE_SETTINGS_KEY, JSON.stringify(settings));
+  const handleSettingsChange = useCallback((newSettings: Setting[]) => {
+    setCurrentSettings(newSettings);
     setVisible(false);
   }, []);
 
   const handleLazyDeleteChange = useCallback((value: boolean) => {
-    setSettings(settings => {
-      const lazyDelete = settings.find(setting => setting.key === LAZY_DELETE_SIGNATURES_SETTING)!;
-      lazyDelete.value = value;
-      localStorage.setItem(SIGNATURE_SETTINGS_KEY, JSON.stringify(settings));
-      return [...settings];
-    });
+    setCurrentSettings(prevSettings =>
+      prevSettings.map(setting => (setting.key === LAZY_DELETE_SIGNATURES_SETTING ? { ...setting, value } : setting))
+    );
   }, []);
 
-  useEffect(() => {
-    const restoredSettings = localStorage.getItem(SIGNATURE_SETTINGS_KEY);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isCompact = useMaxWidth(containerRef, COMPACT_MAX_WIDTH);
 
-    if (restoredSettings) {
-      setSettings(JSON.parse(restoredSettings));
+  useHotkey(true, ['z'], event => {
+    if (pendingSigs.length > 0) {
+      event.preventDefault();
+      event.stopPropagation();
+      undoPendingFnRef.current();
+      setPendingSigs([]);
     }
+  });
+
+  const handleUndoClick = useCallback(() => {
+    undoPendingFnRef.current();
+    setPendingSigs([]);
   }, []);
 
-  const ref = useRef<HTMLDivElement>(null);
-  const compact = useMaxWidth(ref, 260);
+  const handleSettingsButtonClick = useCallback(() => {
+    setVisible(true);
+  }, []);
+
+  const handlePendingChange = useCallback((newPending: SystemSignature[], newUndo: () => void) => {
+    setPendingSigs(prev => {
+      if (newPending.length === prev.length && newPending.every(np => prev.some(pp => pp.eve_id === np.eve_id))) {
+        return prev;
+      }
+      return newPending;
+    });
+    undoPendingFnRef.current = newUndo;
+  }, []);
 
   return (
     <Widget
       label={
-        <div className="flex justify-between items-center text-xs w-full h-full" ref={ref}>
-          <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">
-              <WdCheckbox
-                size="xs"
-                labelSide="left"
-                label={compact ? '' : 'Lazy delete'}
-                value={lazyDeleteValue}
-                classNameLabel="text-stone-400 hover:text-stone-200 transition duration-300 whitespace-nowrap text-ellipsis overflow-hidden"
-                onChange={(event: CheckboxChangeEvent) => handleLazyDeleteChange(!!event.checked)}
-              />
-            </WdTooltipWrapper>
-
-            <WdImgButton
-              className={PrimeIcons.QUESTION_CIRCLE}
-              tooltip={{
-                position: TooltipPosition.left,
-                // @ts-ignore
-                content: (
-                  <div className="flex flex-col gap-1">
-                    <InfoDrawer title={<b className="text-slate-50">How to add/update signature?</b>}>
-                      In game you need select one or more signatures <br /> in list in{' '}
-                      <b className="text-sky-500">Probe scanner</b>. <br /> Use next hotkeys:
-                      <br />
-                      <b className="text-sky-500">Shift + LMB</b> or <b className="text-sky-500">Ctrl + LMB</b>
-                      <br /> or <b className="text-sky-500">Ctrl + A</b> for select all
-                      <br />
-                      and then use <b className="text-sky-500">Ctrl + C</b>, after you need to go <br />
-                      here select Solar system and paste it with <b className="text-sky-500">Ctrl + V</b>
-                    </InfoDrawer>
-                    <InfoDrawer title={<b className="text-slate-50">How to select?</b>}>
-                      For select any signature need click on that, <br /> with hotkeys{' '}
-                      <b className="text-sky-500">Shift + LMB</b> or <b className="text-sky-500">Ctrl + LMB</b>
-                    </InfoDrawer>
-                    <InfoDrawer title={<b className="text-slate-50">How to delete?</b>}>
-                      For delete any signature first of all you need select before
-                      <br /> and then use <b className="text-sky-500">Del</b>
-                    </InfoDrawer>
-                  </div>
-                ) as React.ReactNode,
-              }}
-            />
-            <WdImgButton className={PrimeIcons.SLIDERS_H} onClick={() => setVisible(true)} />
-          </LayoutEventBlocker>
+        <div ref={containerRef} className="w-full">
+          {renderHeaderLabel({
+            systemId,
+            isNotSelectedSystem,
+            isCompact,
+            sigCount,
+            lazyDeleteValue,
+            pendingCount: pendingSigs.length,
+            onLazyDeleteChange: handleLazyDeleteChange,
+            onUndoClick: handleUndoClick,
+            onSettingsClick: handleSettingsButtonClick,
+          })}
         </div>
       }
     >
@@ -166,11 +157,17 @@ export const SystemSignatures = () => {
           System is not selected
         </div>
       ) : (
-        <SystemSignaturesContent systemId={systemId} settings={settings} onLazyDeleteChange={handleLazyDeleteChange} />
+        <SystemSignaturesContent
+          systemId={systemId}
+          settings={currentSettings}
+          onLazyDeleteChange={handleLazyDeleteChange}
+          onCountChange={handleSigCountChange}
+          onPendingChange={handlePendingChange}
+        />
       )}
       {visible && (
         <SystemSignatureSettingsDialog
-          settings={settings}
+          settings={currentSettings}
           onCancel={() => setVisible(false)}
           onSave={handleSettingsChange}
         />
@@ -178,3 +175,5 @@ export const SystemSignatures = () => {
     </Widget>
   );
 };
+
+export default SystemSignatures;

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent/SystemSignaturesContent.module.scss

@@ -1,10 +0,0 @@
-.TableRowCompact {
-  height: 8px;
-  max-height: 8px;
-  font-size: 12px !important;
-  line-height: 8px;
-}
-
-.Table {
-
-}

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

@@ -1,29 +1,31 @@
-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 { useEffect, useMemo, useRef, useState, useCallback } from 'react';
+import { DataTable, DataTableRowClickEvent, DataTableRowMouseEvent, SortOrder } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { PrimeIcons } from 'primereact/api';
+import useLocalStorageState from 'use-local-storage-state';
+
+import { SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
+import { SignatureSettings } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings';
+import { WdTooltip, WdTooltipHandlers, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
+import { SignatureView } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SignatureView';
+import {
+  COMPACT_MAX_WIDTH,
+  GROUPS_LIST,
+  MEDIUM_MAX_WIDTH,
+  OTHER_COLUMNS_WIDTH,
+} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants';
+import {
+  SHOW_DESCRIPTION_COLUMN_SETTING,
+  SHOW_UPDATED_COLUMN_SETTING,
+  SHOW_CHARACTER_COLUMN_SETTING,
+} from '../SystemSignatures';
+
 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';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import useRefState from 'react-usestateref';
-import { Setting } from '../SystemSignatureSettingsDialog';
-import { useHotkey } from '@/hooks/Mapper/hooks';
-import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
-import { useClipboard } from '@/hooks/Mapper/hooks/useClipboard';
-
-import classes from './SystemSignaturesContent.module.scss';
-import clsx from 'clsx';
-import { SystemSignature } from '@/hooks/Mapper/types';
-import { SignatureView } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SignatureView';
-import {
-  getActualSigs,
-  getRowColorByTimeLeft,
-} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers';
+import { COSMIC_SIGNATURE } from '../SystemSignatureSettingsDialog';
 import {
   renderAddedTimeLeft,
   renderDescription,
@@ -31,18 +33,12 @@ import {
   renderInfoColumn,
   renderUpdatedTimeLeft,
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders';
-import useLocalStorageState from 'use-local-storage-state';
-import { PrimeIcons } from 'primereact/api';
-import { SignatureSettings } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings';
-import { useMapEventListener } from '@/hooks/Mapper/events';
-import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
-import { COSMIC_SIGNATURE } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog';
-import {
-  SHOW_DESCRIPTION_COLUMN_SETTING,
-  SHOW_UPDATED_COLUMN_SETTING,
-  LAZY_DELETE_SIGNATURES_SETTING,
-  KEEP_LAZY_DELETE_SETTING,
-} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures';
+import { ExtendedSystemSignature } from '../helpers/contentHelpers';
+import { useSystemSignaturesData } from '../hooks/useSystemSignaturesData';
+import { getSignatureRowClass } from '../helpers/rowStyles';
+import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth';
+import { useClipboard, useHotkey } from '@/hooks/Mapper/hooks';
+
 type SystemSignaturesSortSettings = {
   sortField: string;
   sortOrder: SortOrder;
@@ -55,391 +51,277 @@ const SORT_DEFAULT_VALUES: SystemSignaturesSortSettings = {
 
 interface SystemSignaturesContentProps {
   systemId: string;
-  settings: Setting[];
+  settings: { key: string; value: boolean }[];
   hideLinkedSignatures?: boolean;
   selectable?: boolean;
   onSelect?: (signature: SystemSignature) => void;
   onLazyDeleteChange?: (value: boolean) => void;
+  onCountChange?: (count: number) => void;
+  onPendingChange?: (pending: ExtendedSystemSignature[], undo: () => void) => void;
 }
-export const SystemSignaturesContent = ({
+
+const headerInlineStyle = { padding: '2px', fontSize: '12px', lineHeight: '1.333' };
+
+export function SystemSignaturesContent({
   systemId,
   settings,
   hideLinkedSignatures,
   selectable,
   onSelect,
   onLazyDeleteChange,
-}: SystemSignaturesContentProps) => {
-  const { outCommand } = useMapRootState();
-
-  const [signatures, setSignatures, signaturesRef] = useRefState<SystemSignature[]>([]);
-  const [selectedSignatures, setSelectedSignatures] = useState<SystemSignature[]>([]);
-  const [nameColumnWidth, setNameColumnWidth] = useState('auto');
-  const [selectedSignature, setSelectedSignature] = useState<SystemSignature | null>(null);
-
-  const [hoveredSig, setHoveredSig] = useState<SystemSignature | null>(null);
-
-  const [sortSettings, setSortSettings] = useLocalStorageState<SystemSignaturesSortSettings>('window:signatures:sort', {
-    defaultValue: SORT_DEFAULT_VALUES,
-  });
-
-  const tableRef = useRef<HTMLDivElement>(null);
-  const compact = useMaxWidth(tableRef, 260);
-  const medium = useMaxWidth(tableRef, 380);
-  const refData = useRef({ selectable });
-  refData.current = { selectable };
-
-  const tooltipRef = useRef<WdTooltipHandlers>(null);
-
-  const { clipboardContent, setClipboardContent } = useClipboard();
-
-  const lazyDeleteValue = useMemo(() => {
-    return settings.find(setting => setting.key === LAZY_DELETE_SIGNATURES_SETTING)?.value ?? false;
-  }, [settings]);
-
-  const keepLazyDeleteValue = useMemo(() => {
-    return settings.find(setting => setting.key === KEEP_LAZY_DELETE_SETTING)?.value ?? false;
-  }, [settings]);
-
-  const handleResize = useCallback(() => {
-    if (tableRef.current) {
-      const tableWidth = tableRef.current.offsetWidth;
-      const otherColumnsWidth = 276;
-      const availableWidth = tableWidth - otherColumnsWidth;
-      setNameColumnWidth(`${availableWidth}px`);
-    }
-  }, []);
-
-  const groupSettings = useMemo(() => settings.filter(s => (GROUPS_LIST as string[]).includes(s.key)), [settings]);
-  const showDescriptionColumn = useMemo(
-    () => settings.find(s => s.key === SHOW_DESCRIPTION_COLUMN_SETTING)?.value,
-    [settings],
-  );
-
-  const showUpdatedColumn = useMemo(() => settings.find(s => s.key === SHOW_UPDATED_COLUMN_SETTING)?.value, [settings]);
-
-  const filteredSignatures = useMemo(() => {
-    return signatures
-      .filter(x => {
-        if (hideLinkedSignatures && !!x.linked_system) {
-          return false;
-        }
-
-        const isCosmicSignature = x.kind === COSMIC_SIGNATURE;
-        const preparedGroup = getGroupIdByRawGroup(x.group);
-
-        if (isCosmicSignature) {
-          const showCosmicSignatures = settings.find(y => y.key === COSMIC_SIGNATURE)?.value;
-          if (showCosmicSignatures) {
-            return !x.group || groupSettings.find(y => y.key === preparedGroup)?.value;
-          } else {
-            return !!x.group && groupSettings.find(y => y.key === preparedGroup)?.value;
-          }
-        }
-
-        return settings.find(y => y.key === x.kind)?.value;
-      })
-      .sort((a, b) => {
-        return new Date(b.updated_at || 0).getTime() - new Date(a.updated_at || 0).getTime();
-      });
-  }, [signatures, settings, groupSettings, hideLinkedSignatures]);
-
-  const handleGetSignatures = useCallback(async () => {
-    const { signatures } = await outCommand({
-      type: OutCommand.getSignatures,
-      data: { system_id: systemId },
+  onCountChange,
+  onPendingChange,
+}: SystemSignaturesContentProps) {
+  const { signatures, selectedSignatures, setSelectedSignatures, handleDeleteSelected, handleSelectAll, handlePaste } =
+    useSystemSignaturesData({
+      systemId,
+      settings,
+      onCountChange,
+      onPendingChange,
+      onLazyDeleteChange,
     });
 
-    setSignatures(signatures);
-  }, [outCommand, systemId]);
-
-  const handleUpdateSignatures = useCallback(
-    async (newSignatures: SystemSignature[], updateOnly: boolean, skipUpdateUntouched?: boolean) => {
-      const { added, updated, removed } = getActualSigs(
-        signaturesRef.current,
-        newSignatures,
-        updateOnly,
-        skipUpdateUntouched,
-      );
-
-      const { signatures: updatedSignatures } = await outCommand({
-        type: OutCommand.updateSignatures,
-        data: {
-          system_id: systemId,
-          added,
-          updated,
-          removed,
-        },
-      });
-
-      setSignatures(() => updatedSignatures);
-      setSelectedSignatures([]);
-    },
-    [outCommand, systemId],
+  const [sortSettings, setSortSettings] = useLocalStorageState<{ sortField: string; sortOrder: SortOrder }>(
+    'window:signatures:sort',
+    { defaultValue: SORT_DEFAULT_VALUES },
   );
 
-  const handleDeleteSelected = useCallback(
-    async (e: KeyboardEvent) => {
-      if (selectable) {
-        return;
-      }
-      if (selectedSignatures.length === 0) {
-        return;
-      }
+  const tableRef = useRef<HTMLDivElement>(null);
+  const tooltipRef = useRef<WdTooltipHandlers>(null);
+  const [hoveredSignature, setHoveredSignature] = useState<SystemSignature | null>(null);
 
-      e.preventDefault();
-      e.stopPropagation();
-
-      const selectedSignaturesEveIds = selectedSignatures.map(x => x.eve_id);
-      await handleUpdateSignatures(
-        signatures.filter(x => !selectedSignaturesEveIds.includes(x.eve_id)),
-        false,
-        true,
-      );
-    },
-    [handleUpdateSignatures, selectable, signatures, selectedSignatures],
-  );
-
-  const handleSelectAll = useCallback(() => {
-    setSelectedSignatures(signatures);
-  }, [signatures]);
-
-  const handleSelectSignatures = useCallback(
-    // TODO still will be good to define types if we use typescript
-    // @ts-ignore
-    e => {
-      if (selectable) {
-        onSelect?.(e.value);
-      } else {
-        setSelectedSignatures(e.value);
-      }
-    },
-    [onSelect, selectable],
-  );
-
-  const handlePaste = async (clipboardContent: string) => {
-    const newSignatures = parseSignatures(
-      clipboardContent,
-      settings.map(x => x.key),
-    );
-
-    handleUpdateSignatures(newSignatures, !lazyDeleteValue);
-
-    if (lazyDeleteValue && !keepLazyDeleteValue) {
-      onLazyDeleteChange?.(false);
-    }
-  };
-
-  const handleEnterRow = useCallback(
-    (e: DataTableRowMouseEvent) => {
-      setHoveredSig(filteredSignatures[e.index]);
-      tooltipRef.current?.show(e.originalEvent);
-    },
-    [filteredSignatures],
-  );
-
-  const handleLeaveRow = useCallback((e: DataTableRowMouseEvent) => {
-    tooltipRef.current?.hide(e.originalEvent);
-    setHoveredSig(null);
-  }, []);
+  const isCompact = useMaxWidth(tableRef, COMPACT_MAX_WIDTH);
+  const isMedium = useMaxWidth(tableRef, MEDIUM_MAX_WIDTH);
 
+  const { clipboardContent, setClipboardContent } = useClipboard();
   useEffect(() => {
-    if (refData.current.selectable) {
-      return;
-    }
-
-    if (!clipboardContent?.text) {
-      return;
-    }
+    if (selectable) return;
+    if (!clipboardContent?.text) return;
 
     handlePaste(clipboardContent.text);
+
     setClipboardContent(null);
-  }, [clipboardContent, selectable, lazyDeleteValue, keepLazyDeleteValue]);
+  }, [selectable, clipboardContent]);
 
   useHotkey(true, ['a'], handleSelectAll);
   useHotkey(false, ['Backspace', 'Delete'], handleDeleteSelected);
 
-  useEffect(() => {
-    if (!systemId) {
-      setSignatures([]);
-      return;
-    }
-
-    handleGetSignatures();
-  }, [systemId]);
-
-  useMapEventListener(event => {
-    switch (event.name) {
-      case Commands.signaturesUpdated:
-        if (event.data?.toString() !== systemId.toString()) {
-          return;
-        }
-
-        handleGetSignatures();
-        return true;
-    }
-  });
-
-  useEffect(() => {
-    const observer = new ResizeObserver(handleResize);
-    if (tableRef.current) {
-      observer.observe(tableRef.current);
-    }
-
-    handleResize(); // Call on mount to set initial width
-
-    return () => {
-      if (tableRef.current) {
-        observer.unobserve(tableRef.current);
-      }
-    };
+  const [nameColumnWidth, setNameColumnWidth] = useState('auto');
+  const handleResize = useCallback(() => {
+    if (!tableRef.current) return;
+    const tableWidth = tableRef.current.offsetWidth;
+    const otherColumnsWidth = OTHER_COLUMNS_WIDTH;
+    setNameColumnWidth(`${tableWidth - otherColumnsWidth}px`);
   }, []);
+  useEffect(() => {
+    if (!tableRef.current) return;
+    const observer = new ResizeObserver(handleResize);
+    observer.observe(tableRef.current);
+    handleResize();
+    return () => {
+      observer.disconnect();
+    };
+  }, [handleResize]);
 
-  const renderToolbar = (/*row: SystemSignature*/) => {
-    return (
-      <div className="flex justify-end items-center gap-2 mr-[4px]">
-        <WdTooltipWrapper content="To Edit Signature do double click">
-          <span className={clsx(PrimeIcons.PENCIL, 'text-[10px]')}></span>
-        </WdTooltipWrapper>
-      </div>
-    );
-  };
-
+  const [selectedSignatureForDialog, setSelectedSignatureForDialog] = useState<SystemSignature | null>(null);
   const [showSignatureSettings, setShowSignatureSettings] = useState(false);
 
   const handleRowClick = (e: DataTableRowClickEvent) => {
-    setSelectedSignature(e.data as SystemSignature);
+    setSelectedSignatureForDialog(e.data as SystemSignature);
     setShowSignatureSettings(true);
   };
 
-  return (
-    <>
-      <div ref={tableRef} className={'h-full '}>
-        {filteredSignatures.length === 0 ? (
-          <div className="w-full h-full flex justify-center items-center select-none text-stone-400/80 text-sm">
-            No signatures
-          </div>
-        ) : (
-          <>
-            {/* @ts-ignore */}
-            <DataTable
-              className={classes.Table}
-              value={filteredSignatures}
-              size="small"
-              selectionMode={selectable ? 'single' : 'multiple'}
-              selection={selectedSignatures}
-              metaKeySelection
-              onSelectionChange={handleSelectSignatures}
-              dataKey="eve_id"
-              tableClassName="w-full select-none"
-              resizableColumns={false}
-              onRowDoubleClick={handleRowClick}
-              rowHover
-              selectAll
-              sortField={sortSettings.sortField}
-              sortOrder={sortSettings.sortOrder}
-              onSort={event => setSortSettings(() => ({ sortField: event.sortField, sortOrder: event.sortOrder }))}
-              onRowMouseEnter={compact || medium ? handleEnterRow : undefined}
-              onRowMouseLeave={compact || medium ? handleLeaveRow : undefined}
-              rowClassName={row => {
-                if (selectedSignatures.some(x => x.eve_id === row.eve_id)) {
-                  return clsx(classes.TableRowCompact, 'bg-amber-500/50 hover:bg-amber-500/70 transition duration-200');
-                }
-
-                const dateClass = getRowColorByTimeLeft(row.inserted_at ? new Date(row.inserted_at) : undefined);
-                if (!dateClass) {
-                  return clsx(classes.TableRowCompact, 'hover:bg-purple-400/20 transition duration-200');
-                }
-
-                return clsx(classes.TableRowCompact, dateClass);
-              }}
-            >
-              <Column
-                bodyClassName="p-0 px-1"
-                field="group"
-                body={x => renderIcon(x)}
-                style={{ maxWidth: 26, minWidth: 26, width: 26, height: 25 }}
-              ></Column>
-
-              <Column
-                field="eve_id"
-                header="Id"
-                bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-                style={{ maxWidth: 72, minWidth: 72, width: 72 }}
-                sortable
-              ></Column>
-              <Column
-                field="group"
-                header="Group"
-                bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-                hidden={compact}
-                style={{ maxWidth: 110, minWidth: 110, width: 110 }}
-                sortable
-              ></Column>
-              <Column
-                field="info"
-                bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-                body={renderInfoColumn}
-                style={{ maxWidth: nameColumnWidth }}
-                hidden={compact || medium}
-              ></Column>
-              {showDescriptionColumn && (
-                <Column
-                  field="description"
-                  header="Description"
-                  bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
-                  body={renderDescription}
-                  hidden={compact}
-                  sortable
-                ></Column>
-              )}
-
-              <Column
-                field="inserted_at"
-                header="Added"
-                dataType="date"
-                bodyClassName="w-[70px] text-ellipsis overflow-hidden whitespace-nowrap"
-                body={renderAddedTimeLeft}
-                sortable
-              ></Column>
-
-              {showUpdatedColumn && (
-                <Column
-                  field="updated_at"
-                  header="Updated"
-                  dataType="date"
-                  bodyClassName="w-[70px] text-ellipsis overflow-hidden whitespace-nowrap"
-                  body={renderUpdatedTimeLeft}
-                  sortable
-                ></Column>
-              )}
-
-              {!selectable && (
-                <Column
-                  bodyClassName="p-0 pl-1 pr-2"
-                  field="group"
-                  body={renderToolbar}
-                  // headerClassName={headerClasses}
-                  style={{ maxWidth: 26, minWidth: 26, width: 26 }}
-                ></Column>
-              )}
-            </DataTable>
-          </>
-        )}
-        <WdTooltip
-          className="bg-stone-900/95 text-slate-50"
-          ref={tooltipRef}
-          content={hoveredSig ? <SignatureView {...hoveredSig} /> : null}
-        />
-
-        {showSignatureSettings && (
-          <SignatureSettings
-            systemId={systemId}
-            show
-            onHide={() => setShowSignatureSettings(false)}
-            signatureData={selectedSignature}
-          />
-        )}
-      </div>
-    </>
+  const handleSelectSignatures = useCallback(
+    (e: { value: SystemSignature[] }) => {
+      if (selectable) {
+        onSelect?.(e.value[0]);
+      } else {
+        setSelectedSignatures(e.value as ExtendedSystemSignature[]);
+      }
+    },
+    [selectable, onSelect, setSelectedSignatures],
   );
-};
+
+  const showDescriptionColumn = settings.find(s => s.key === SHOW_DESCRIPTION_COLUMN_SETTING)?.value;
+  const showUpdatedColumn = settings.find(s => s.key === SHOW_UPDATED_COLUMN_SETTING)?.value;
+  const showCharacterColumn = settings.find(s => s.key === SHOW_CHARACTER_COLUMN_SETTING)?.value;
+
+  const enabledGroups = settings
+    .filter(s => GROUPS_LIST.includes(s.key as SignatureGroup) && s.value === true)
+    .map(s => s.key);
+
+  const filteredSignatures = useMemo<ExtendedSystemSignature[]>(() => {
+    return signatures.filter(sig => {
+      if (hideLinkedSignatures && sig.linked_system) {
+        return false;
+      }
+      const isCosmicSignature = sig.kind === COSMIC_SIGNATURE;
+
+      if (isCosmicSignature) {
+        const showCosmic = settings.find(y => y.key === COSMIC_SIGNATURE)?.value;
+        if (!showCosmic) return false;
+        if (sig.group) {
+          const preparedGroup = getGroupIdByRawGroup(sig.group);
+          return enabledGroups.includes(preparedGroup);
+        }
+        return true;
+      } else {
+        return settings.find(y => y.key === sig.kind)?.value;
+      }
+    });
+  }, [signatures, hideLinkedSignatures, settings, enabledGroups]);
+
+  return (
+    <div ref={tableRef} className="h-full">
+      {filteredSignatures.length === 0 ? (
+        <div className="w-full h-full flex justify-center items-center select-none text-stone-400/80 text-sm">
+          No signatures
+        </div>
+      ) : (
+        <DataTable
+          value={filteredSignatures}
+          size="small"
+          selectionMode="multiple"
+          selection={selectedSignatures}
+          metaKeySelection
+          onSelectionChange={handleSelectSignatures}
+          dataKey="eve_id"
+          className="w-full select-none"
+          resizableColumns={false}
+          rowHover
+          selectAll
+          onRowDoubleClick={handleRowClick}
+          sortField={sortSettings.sortField}
+          sortOrder={sortSettings.sortOrder}
+          onSort={e => setSortSettings({ sortField: e.sortField, sortOrder: e.sortOrder })}
+          onRowMouseEnter={
+            isCompact || isMedium
+              ? (e: DataTableRowMouseEvent) => {
+                  setHoveredSignature(filteredSignatures[e.index]);
+                  tooltipRef.current?.show(e.originalEvent);
+                }
+              : undefined
+          }
+          onRowMouseLeave={
+            isCompact || isMedium
+              ? () => {
+                  setHoveredSignature(null);
+                  tooltipRef.current?.hide();
+                }
+              : undefined
+          }
+          rowClassName={rowData => getSignatureRowClass(rowData as ExtendedSystemSignature, selectedSignatures)}
+        >
+          <Column
+            field="icon"
+            header=""
+            headerStyle={headerInlineStyle}
+            body={sig => renderIcon(sig)}
+            bodyClassName="p-0 px-1"
+            style={{ maxWidth: 26, minWidth: 26, width: 26 }}
+          />
+          <Column
+            field="eve_id"
+            header="Id"
+            headerStyle={headerInlineStyle}
+            bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+            style={{ maxWidth: 72, minWidth: 72, width: 72 }}
+            sortable
+          />
+          <Column
+            field="group"
+            header="Group"
+            headerStyle={headerInlineStyle}
+            bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+            style={{ maxWidth: 110, minWidth: 110, width: 110 }}
+            body={sig => sig.group ?? ''}
+            hidden={isCompact}
+            sortable
+          />
+          <Column
+            field="info"
+            header="Info"
+            headerStyle={headerInlineStyle}
+            bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+            style={{ maxWidth: nameColumnWidth }}
+            hidden={isCompact || isMedium}
+            body={renderInfoColumn}
+          />
+          {showDescriptionColumn && (
+            <Column
+              field="description"
+              header="Description"
+              headerStyle={headerInlineStyle}
+              bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+              hidden={isCompact}
+              body={renderDescription}
+              sortable
+            />
+          )}
+          <Column
+            field="inserted_at"
+            header="Added"
+            headerStyle={headerInlineStyle}
+            dataType="date"
+            body={renderAddedTimeLeft}
+            style={{ minWidth: 70, maxWidth: 80 }}
+            bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+            sortable
+          />
+          {showUpdatedColumn && (
+            <Column
+              field="updated_at"
+              header="Updated"
+              headerStyle={headerInlineStyle}
+              dataType="date"
+              body={renderUpdatedTimeLeft}
+              style={{ minWidth: 70, maxWidth: 80 }}
+              bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
+              sortable
+            />
+          )}
+
+          {showCharacterColumn && (
+            <Column
+              field="character_name"
+              header="Character"
+              bodyClassName="w-[70px] text-ellipsis overflow-hidden whitespace-nowrap"
+              sortable
+            ></Column>
+          )}
+
+          {!selectable && (
+            <Column
+              header=""
+              headerStyle={headerInlineStyle}
+              body={() => (
+                <div className="flex justify-end items-center gap-2 mr-[4px]">
+                  <WdTooltipWrapper content="Double-click a row to edit signature">
+                    <span className={PrimeIcons.PENCIL + ' text-[10px]'} />
+                  </WdTooltipWrapper>
+                </div>
+              )}
+              style={{ maxWidth: 26, minWidth: 26, width: 26 }}
+              bodyClassName="p-0 pl-1 pr-2"
+            />
+          )}
+        </DataTable>
+      )}
+
+      <WdTooltip
+        className="bg-stone-900/95 text-slate-50"
+        ref={tooltipRef}
+        content={hoveredSignature ? <SignatureView {...hoveredSignature} /> : null}
+      />
+
+      {showSignatureSettings && (
+        <SignatureSettings
+          systemId={systemId}
+          show
+          onHide={() => setShowSignatureSettings(false)}
+          signatureData={selectedSignatureForDialog || undefined}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -10,6 +10,13 @@ import {
 
 export const TIME_ONE_MINUTE = 1000 * 60;
 export const TIME_TEN_MINUTES = 1000 * 60 * 10;
+export const TIME_ONE_DAY = 24 * 60 * 60 * 1000;
+export const TIME_ONE_WEEK = 7 * TIME_ONE_DAY;
+export const FINAL_DURATION_MS = 10000;
+
+export const COMPACT_MAX_WIDTH = 260;
+export const MEDIUM_MAX_WIDTH = 380;
+export const OTHER_COLUMNS_WIDTH = 276;
 
 export const GROUPS_LIST = [
   SignatureGroup.GasSite,

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers/contentHelpers.ts

@@ -0,0 +1,94 @@
+import { SystemSignature } from '@/hooks/Mapper/types';
+import { FINAL_DURATION_MS } from '../constants';
+
+export interface ExtendedSystemSignature extends SystemSignature {
+  pendingDeletion?: boolean;
+  pendingAddition?: boolean;
+  pendingUntil?: number;
+}
+
+export function prepareUpdatePayload(
+  systemId: string,
+  added: ExtendedSystemSignature[],
+  updated: ExtendedSystemSignature[],
+  removed: ExtendedSystemSignature[],
+) {
+  return {
+    system_id: systemId,
+    added: added.map(s => ({ ...s })),
+    updated: updated.map(s => ({ ...s })),
+    removed: removed.map(s => ({ ...s })),
+  };
+}
+
+export function schedulePendingAdditionForSig(
+  sig: ExtendedSystemSignature,
+  finalDuration: number,
+  setSignatures: React.Dispatch<React.SetStateAction<ExtendedSystemSignature[]>>,
+  pendingAdditionMapRef: React.MutableRefObject<Record<string, { finalUntil: number; finalTimeoutId: number }>>,
+  setPendingUndoAdditions: React.Dispatch<React.SetStateAction<ExtendedSystemSignature[]>>,
+) {
+  setPendingUndoAdditions(prev => [...prev, sig]);
+
+  const now = Date.now();
+  const finalTimeoutId = window.setTimeout(() => {
+    setSignatures(prev =>
+      prev.map(x => (x.eve_id === sig.eve_id ? { ...x, pendingAddition: false, pendingUntil: undefined } : x)),
+    );
+    const clone = { ...pendingAdditionMapRef.current };
+    delete clone[sig.eve_id];
+    pendingAdditionMapRef.current = clone;
+
+    setPendingUndoAdditions(prev => prev.filter(x => x.eve_id !== sig.eve_id));
+  }, finalDuration);
+
+  pendingAdditionMapRef.current = {
+    ...pendingAdditionMapRef.current,
+    [sig.eve_id]: {
+      finalUntil: now + finalDuration,
+      finalTimeoutId,
+    },
+  };
+
+  setSignatures(prev =>
+    prev.map(x => (x.eve_id === sig.eve_id ? { ...x, pendingAddition: true, pendingUntil: now + finalDuration } : x)),
+  );
+}
+
+export function mergeLocalPendingAdditions(
+  serverSigs: ExtendedSystemSignature[],
+  localSigs: ExtendedSystemSignature[],
+): ExtendedSystemSignature[] {
+  const now = Date.now();
+  const pendingAdditions = localSigs.filter(sig => sig.pendingAddition && sig.pendingUntil && sig.pendingUntil > now);
+  const mergedMap = new Map<string, ExtendedSystemSignature>();
+  serverSigs.forEach(sig => mergedMap.set(sig.eve_id, sig));
+  pendingAdditions.forEach(sig => {
+    if (!mergedMap.has(sig.eve_id)) {
+      mergedMap.set(sig.eve_id, sig);
+    }
+  });
+  return Array.from(mergedMap.values());
+}
+
+export function scheduleLazyDeletionTimers(
+  toRemove: ExtendedSystemSignature[],
+  setPendingMap: React.Dispatch<React.SetStateAction<Record<string, { finalUntil: number; finalTimeoutId: number }>>>,
+  finalizeRemoval: (sig: ExtendedSystemSignature) => Promise<void>,
+  finalDuration = FINAL_DURATION_MS,
+) {
+  const now = Date.now();
+  toRemove.forEach(sig => {
+    const finalTimeoutId = window.setTimeout(async () => {
+      await finalizeRemoval(sig);
+    }, finalDuration);
+
+    setPendingMap(prev => ({
+      ...prev,
+      [sig.eve_id]: {
+        finalUntil: now + finalDuration,
+        finalTimeoutId,
+      },
+    }));
+  });
+}

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers/getActualSigs.ts

@@ -1,25 +1,67 @@
 import { SystemSignature } from '@/hooks/Mapper/types';
-import { GROUPS_LIST } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
-import { getState } from './getState.ts';
+import { GROUPS_LIST } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants';
+import { getState } from './getState';
 
+/**
+ * Compare two lists of signatures and return which are added, updated, or removed.
+ * 
+ * @param oldSignatures existing signatures (in memory or from server)
+ * @param newSignatures newly parsed or incoming signatures from user input
+ * @param updateOnly    if true, do NOT remove old signatures not found in newSignatures
+ * @param skipUpdateUntouched if true, do NOT push unmodified signatures into the `updated` array
+ */
 export const getActualSigs = (
   oldSignatures: SystemSignature[],
   newSignatures: SystemSignature[],
-  updateOnly: boolean,
+  updateOnly?: boolean,
   skipUpdateUntouched?: boolean,
 ): { added: SystemSignature[]; updated: SystemSignature[]; removed: SystemSignature[] } => {
   const updated: SystemSignature[] = [];
   const removed: SystemSignature[] = [];
+  const added: SystemSignature[] = [];
 
   oldSignatures.forEach(oldSig => {
-    // if old sigs is not contains in newSigs we need mark it as removed
-    // otherwise we check
     const newSig = newSignatures.find(s => s.eve_id === oldSig.eve_id);
     if (newSig) {
-      // we take new sig and now we need check that sig has been updated
-      const isNeedUpgrade = getState(GROUPS_LIST, newSig) > getState(GROUPS_LIST, oldSig);
-      if (isNeedUpgrade) {
-        updated.push({ ...oldSig, group: newSig.group, name: newSig.name });
+      const needUpgrade = getState(GROUPS_LIST, newSig) > getState(GROUPS_LIST, oldSig);
+      const mergedSig = { ...oldSig };
+      let changed = false;
+
+      if (needUpgrade) {
+        mergedSig.group = newSig.group;
+        mergedSig.name = newSig.name;
+        changed = true;
+      }
+      if (newSig.description && newSig.description !== oldSig.description) {
+        mergedSig.description = newSig.description;
+        changed = true;
+      }
+
+      try {
+        const oldInfo = JSON.parse(oldSig.custom_info || '{}');
+        const newInfo = JSON.parse(newSig.custom_info || '{}');
+        let infoChanged = false;
+        for (const key in newInfo) {
+          if (oldInfo[key] !== newInfo[key]) {
+            oldInfo[key] = newInfo[key];
+            infoChanged = true;
+          }
+        }
+        if (infoChanged) {
+          mergedSig.custom_info = JSON.stringify(oldInfo);
+          changed = true;
+        }
+      } catch (e) {
+        console.error(`getActualSigs: Error merging custom_info for ${oldSig.eve_id}`, e);
+      }
+
+      if (newSig.updated_at !== oldSig.updated_at) {
+        mergedSig.updated_at = newSig.updated_at;
+        changed = true;
+      }
+
+      if (changed) {
+        updated.push(mergedSig);
       } else if (!skipUpdateUntouched) {
         updated.push({ ...oldSig });
       }
@@ -30,8 +72,12 @@ export const getActualSigs = (
     }
   });
 
-  const oldSignaturesIds = oldSignatures.map(x => x.eve_id);
-  const added = newSignatures.filter(s => !oldSignaturesIds.includes(s.eve_id));
+  const oldIds = new Set(oldSignatures.map(x => x.eve_id));
+  newSignatures.forEach(s => {
+    if (!oldIds.has(s.eve_id)) {
+      added.push(s);
+    }
+  });
 
   return { added, updated, removed };
 };

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers/getRowBackgroundColor.ts

@@ -3,9 +3,9 @@ import {
   TIME_TEN_MINUTES,
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
 
-export const getRowColorByTimeLeft = (date: Date | undefined) => {
+export const getRowBackgroundColor = (date: Date | undefined): string => {
   if (!date) {
-    return null;
+    return '';
   }
 
   const currentDate = new Date();
@@ -18,4 +18,6 @@ export const getRowColorByTimeLeft = (date: Date | undefined) => {
   if (diff < TIME_TEN_MINUTES) {
     return 'bg-lime-700/40 transition hover:bg-lime-700/50';
   }
+
+  return '';
 };

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers/getState.ts

@@ -1,11 +1,8 @@
 import { SystemSignature } from '@/hooks/Mapper/types';
 
-// also we need detect changes, we need understand that sigs has states
-// first state when kind is Cosmic Signature or Cosmic Anomaly and group is empty
-// and we should detect it for ungrade sigs
 export const getState = (_: string[], newSig: SystemSignature) => {
   let state = -1;
-  if (!newSig.group || newSig.group === '') {
+  if (!newSig.group) {
     state = 0;
   } else if (!newSig.name || newSig.name === '') {
     state = 1;

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

@@ -1,3 +1,5 @@
 export * from './getState';
-export * from './getRowColorByTimeLeft';
+export * from './getRowBackgroundColor';
 export * from './getActualSigs';
+export * from './contentHelpers';
+export * from './rowStyles';

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers/rowStyles.module.scss

@@ -0,0 +1,34 @@
+.pendingDeletion {
+  background-color: #f87171;
+  transition: background-color 0.2s ease;
+}
+
+
+.pendingDeletion td {
+  background-color: #f87171;
+  transition: background-color 0.2s ease;
+}
+
+.pendingDeletion {
+  background-color: #f87171;
+  transition: background-color 0.2s ease;
+}
+
+.Table thead tr {
+  font-size: 12px !important;    
+  line-height: 1.333;     
+}
+
+.TableRowCompact {
+  font-size: 12px !important;
+  line-height: 1.333;
+}
+
+.Table td {
+  padding: 2px;
+  height: 25px;  
+  border: 1px solid #383838;
+  box-sizing: border-box;
+}
+
+

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers/rowStyles.ts

@@ -0,0 +1,20 @@
+import clsx from 'clsx';
+import { ExtendedSystemSignature } from './contentHelpers';
+import { getRowBackgroundColor } from './getRowBackgroundColor';
+import classes from './rowStyles.module.scss';
+
+export function getSignatureRowClass(
+  row: ExtendedSystemSignature,
+  selectedSignatures: ExtendedSystemSignature[],
+): string {
+  const isSelected = selectedSignatures.some(s => s.eve_id === row.eve_id);
+
+  return clsx(
+    classes.TableRowCompact,
+    'p-selectable-row',
+    isSelected && 'bg-amber-500/50 hover:bg-amber-500/70 transition duration-200',
+    !isSelected && row.pendingDeletion && classes.pendingDeletion,
+    !isSelected && getRowBackgroundColor(row.inserted_at ? new Date(row.inserted_at) : undefined),
+    'hover:bg-purple-400/20 transition duration-200',
+  );
+}

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

@@ -0,0 +1,26 @@
+import { ExtendedSystemSignature } from '../helpers/contentHelpers';
+
+export interface UseSystemSignaturesDataProps {
+  systemId: string;
+  settings: { key: string; value: boolean }[];
+  hideLinkedSignatures?: boolean;
+  onCountChange?: (count: number) => void;
+  onPendingChange?: (pending: ExtendedSystemSignature[], undo: () => void) => void;
+  onLazyDeleteChange?: (value: boolean) => void;
+}
+
+export interface UseFetchingParams {
+  systemId: string;
+  signaturesRef: React.MutableRefObject<ExtendedSystemSignature[]>;
+  setSignatures: React.Dispatch<React.SetStateAction<ExtendedSystemSignature[]>>;
+  localPendingDeletions: ExtendedSystemSignature[];
+}
+
+export interface UsePendingDeletionParams {
+  systemId: string;
+  setSignatures: React.Dispatch<React.SetStateAction<ExtendedSystemSignature[]>>;
+}
+
+export interface UsePendingAdditionParams {
+  setSignatures: React.Dispatch<React.SetStateAction<ExtendedSystemSignature[]>>;
+}

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

@@ -0,0 +1,53 @@
+import { useState, useCallback, useRef } from 'react';
+import { ExtendedSystemSignature, schedulePendingAdditionForSig } from '../helpers/contentHelpers';
+import { UsePendingAdditionParams } from './types';
+import { FINAL_DURATION_MS } from '../constants';
+
+export function usePendingAdditions({ setSignatures }: UsePendingAdditionParams) {
+  const [pendingUndoAdditions, setPendingUndoAdditions] = useState<ExtendedSystemSignature[]>([]);
+  const pendingAdditionMapRef = useRef<Record<string, { finalUntil: number; finalTimeoutId: number }>>({});
+
+  const processAddedSignatures = useCallback(
+    (added: ExtendedSystemSignature[]) => {
+      if (!added.length) return;
+      const now = Date.now();
+      setSignatures(prev => [
+        ...prev,
+        ...added.map(sig => ({
+          ...sig,
+          pendingAddition: true,
+          pendingUntil: now + FINAL_DURATION_MS,
+        })),
+      ]);
+      added.forEach(sig => {
+        schedulePendingAdditionForSig(
+          sig,
+          FINAL_DURATION_MS,
+          setSignatures,
+          pendingAdditionMapRef,
+          setPendingUndoAdditions,
+        );
+      });
+    },
+    [setSignatures],
+  );
+
+  const clearPendingAdditions = useCallback(() => {
+    Object.values(pendingAdditionMapRef.current).forEach(({ finalTimeoutId }) => {
+      clearTimeout(finalTimeoutId);
+    });
+    pendingAdditionMapRef.current = {};
+    setSignatures(prev =>
+      prev.map(x => (x.pendingAddition ? { ...x, pendingAddition: false, pendingUntil: undefined } : x)),
+    );
+    setPendingUndoAdditions([]);
+  }, [setSignatures]);
+
+  return {
+    pendingUndoAdditions,
+    setPendingUndoAdditions,
+    pendingAdditionMapRef,
+    processAddedSignatures,
+    clearPendingAdditions,
+  };
+}

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

@@ -0,0 +1,79 @@
+import { useState, useCallback } from 'react';
+import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
+import { ExtendedSystemSignature, prepareUpdatePayload, scheduleLazyDeletionTimers } from '../helpers';
+import { UsePendingDeletionParams } from './types';
+import { FINAL_DURATION_MS } from '../constants';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+
+export function usePendingDeletions({ systemId, setSignatures }: UsePendingDeletionParams) {
+  const { outCommand } = useMapRootState();
+  const [localPendingDeletions, setLocalPendingDeletions] = useState<ExtendedSystemSignature[]>([]);
+  const [pendingDeletionMap, setPendingDeletionMap] = useState<
+    Record<string, { finalUntil: number; finalTimeoutId: number }>
+  >({});
+
+  const processRemovedSignatures = useCallback(
+    async (
+      removed: ExtendedSystemSignature[],
+      added: ExtendedSystemSignature[],
+      updated: ExtendedSystemSignature[],
+    ) => {
+      if (!removed.length) return;
+      const now = Date.now();
+      const processedRemoved = removed.map(r => ({
+        ...r,
+        pendingDeletion: true,
+        pendingAddition: false,
+        pendingUntil: now + FINAL_DURATION_MS,
+      }));
+      setLocalPendingDeletions(prev => [...prev, ...processedRemoved]);
+
+      outCommand({
+        type: OutCommand.updateSignatures,
+        data: prepareUpdatePayload(systemId, added, updated, []),
+      });
+
+      setSignatures(prev =>
+        prev.map(sig => {
+          if (processedRemoved.find(r => r.eve_id === sig.eve_id)) {
+            return { ...sig, pendingDeletion: true, pendingUntil: now + FINAL_DURATION_MS };
+          }
+          return sig;
+        }),
+      );
+
+      scheduleLazyDeletionTimers(
+        processedRemoved,
+        setPendingDeletionMap,
+        async sig => {
+          await outCommand({
+            type: OutCommand.updateSignatures,
+            data: prepareUpdatePayload(systemId, [], [], [sig]),
+          });
+          setLocalPendingDeletions(prev => prev.filter(x => x.eve_id !== sig.eve_id));
+          setSignatures(prev => prev.filter(x => x.eve_id !== sig.eve_id));
+        },
+        FINAL_DURATION_MS,
+      );
+    },
+    [systemId, outCommand, setSignatures],
+  );
+
+  const clearPendingDeletions = useCallback(() => {
+    Object.values(pendingDeletionMap).forEach(({ finalTimeoutId }) => clearTimeout(finalTimeoutId));
+    setPendingDeletionMap({});
+    setSignatures(prev =>
+      prev.map(x => (x.pendingDeletion ? { ...x, pendingDeletion: false, pendingUntil: undefined } : x)),
+    );
+    setLocalPendingDeletions([]);
+  }, [pendingDeletionMap, setSignatures]);
+
+  return {
+    localPendingDeletions,
+    setLocalPendingDeletions,
+    pendingDeletionMap,
+    setPendingDeletionMap,
+    processRemovedSignatures,
+    clearPendingDeletions,
+  };
+}

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

@@ -0,0 +1,75 @@
+import { useCallback } from 'react';
+import { SystemSignature } from '@/hooks/Mapper/types';
+import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
+import { ExtendedSystemSignature, prepareUpdatePayload, getActualSigs, mergeLocalPendingAdditions } from '../helpers';
+import { UseFetchingParams } from './types';
+import { FINAL_DURATION_MS } from '../constants';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+
+export function useSignatureFetching({
+  systemId,
+  signaturesRef,
+  setSignatures,
+  localPendingDeletions,
+}: UseFetchingParams) {
+  const {
+    data: { characters },
+    outCommand,
+  } = useMapRootState();
+
+  const handleGetSignatures = useCallback(async () => {
+    if (!systemId) {
+      setSignatures([]);
+      return;
+    }
+    if (localPendingDeletions.length) {
+      return;
+    }
+    const resp = await outCommand({
+      type: OutCommand.getSignatures,
+      data: { system_id: systemId },
+    });
+    const serverSigs = (resp.signatures ?? []) as SystemSignature[];
+
+    const extended = serverSigs.map(s => ({
+      ...s,
+      character_name: characters.find(c => c.eve_id === s.character_eve_id)?.name,
+    })) as ExtendedSystemSignature[];
+
+    setSignatures(prev => mergeLocalPendingAdditions(extended, prev));
+  }, [characters, systemId, localPendingDeletions, outCommand, setSignatures]);
+
+  const handleUpdateSignatures = useCallback(
+    async (newList: ExtendedSystemSignature[], updateOnly: boolean, skipUpdateUntouched?: boolean) => {
+      const { added, updated, removed } = getActualSigs(
+        signaturesRef.current,
+        newList,
+        updateOnly,
+        skipUpdateUntouched,
+      );
+
+      if (added.length > 0) {
+        const now = Date.now();
+        setSignatures(prev => [
+          ...prev,
+          ...added.map(a => ({
+            ...a,
+            pendingAddition: true,
+            pendingUntil: now + FINAL_DURATION_MS,
+          })),
+        ]);
+      }
+
+      await outCommand({
+        type: OutCommand.updateSignatures,
+        data: prepareUpdatePayload(systemId, added, updated, removed),
+      });
+    },
+    [systemId, outCommand, signaturesRef, setSignatures],
+  );
+
+  return {
+    handleGetSignatures,
+    handleUpdateSignatures,
+  };
+}

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

@@ -0,0 +1,187 @@
+import { useCallback, useEffect, useState } from 'react';
+import useRefState from 'react-usestateref';
+import { useMapEventListener } from '@/hooks/Mapper/events';
+import { Commands, SystemSignature } from '@/hooks/Mapper/types';
+import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
+import { parseSignatures } from '@/hooks/Mapper/helpers';
+import {
+  KEEP_LAZY_DELETE_SETTING,
+  LAZY_DELETE_SIGNATURES_SETTING,
+} from '@/hooks/Mapper/components/mapInterface/widgets';
+import { ExtendedSystemSignature, getActualSigs, mergeLocalPendingAdditions } from '../helpers';
+import { useSignatureFetching } from './useSignatureFetching';
+import { usePendingAdditions } from './usePendingAdditions';
+import { usePendingDeletions } from './usePendingDeletions';
+import { UseSystemSignaturesDataProps } from './types';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+
+export function useSystemSignaturesData({
+  systemId,
+  settings,
+  onCountChange,
+  onPendingChange,
+  onLazyDeleteChange,
+}: UseSystemSignaturesDataProps) {
+  const { outCommand } = useMapRootState();
+  const [signatures, setSignatures, signaturesRef] = useRefState<ExtendedSystemSignature[]>([]);
+  const [selectedSignatures, setSelectedSignatures] = useState<ExtendedSystemSignature[]>([]);
+
+  const { localPendingDeletions, setLocalPendingDeletions, processRemovedSignatures, clearPendingDeletions } =
+    usePendingDeletions({
+      systemId,
+      setSignatures,
+    });
+  const { pendingUndoAdditions, setPendingUndoAdditions, processAddedSignatures, clearPendingAdditions } =
+    usePendingAdditions({
+      setSignatures,
+    });
+
+  const { handleGetSignatures, handleUpdateSignatures } = useSignatureFetching({
+    systemId,
+    signaturesRef,
+    setSignatures,
+    localPendingDeletions,
+  });
+
+  const handlePaste = useCallback(
+    async (clipboardString: string) => {
+      const lazyDeleteValue = settings.find(s => s.key === LAZY_DELETE_SIGNATURES_SETTING)?.value ?? false;
+
+      const incomingSignatures = parseSignatures(
+        clipboardString,
+        settings.map(s => s.key),
+      ) as ExtendedSystemSignature[];
+
+      const current = signaturesRef.current;
+      const currentNonPending = lazyDeleteValue
+        ? current.filter(sig => !sig.pendingDeletion)
+        : current.filter(sig => !sig.pendingDeletion && !sig.pendingAddition);
+
+      const { added, updated, removed } = getActualSigs(currentNonPending, incomingSignatures, !lazyDeleteValue, true);
+
+      if (added.length > 0) {
+        processAddedSignatures(added);
+      }
+
+      if (removed.length > 0) {
+        await processRemovedSignatures(removed, added, updated);
+      } else {
+        const resp = await outCommand({
+          type: OutCommand.updateSignatures,
+          data: {
+            system_id: systemId,
+            added,
+            updated,
+            removed: [],
+          },
+        });
+        if (resp) {
+          const finalSigs = (resp.signatures ?? []) as SystemSignature[];
+          setSignatures(prev =>
+            mergeLocalPendingAdditions(
+              finalSigs.map(x => ({ ...x })),
+              prev,
+            ),
+          );
+        }
+      }
+
+      const keepLazy = settings.find(s => s.key === KEEP_LAZY_DELETE_SETTING)?.value ?? false;
+      if (lazyDeleteValue && !keepLazy) {
+        setTimeout(() => {
+          onLazyDeleteChange?.(false);
+        }, 0);
+      }
+    },
+    [
+      settings,
+      signaturesRef,
+      processAddedSignatures,
+      processRemovedSignatures,
+      outCommand,
+      systemId,
+      setSignatures,
+      onLazyDeleteChange,
+    ],
+  );
+
+  const handleDeleteSelected = useCallback(async () => {
+    if (!selectedSignatures.length) return;
+    const selectedIds = selectedSignatures.map(s => s.eve_id);
+    const finalList = signatures.filter(s => !selectedIds.includes(s.eve_id));
+
+    await handleUpdateSignatures(finalList, false, true);
+    setSelectedSignatures([]);
+  }, [selectedSignatures, signatures, handleUpdateSignatures]);
+
+  const handleSelectAll = useCallback(() => {
+    setSelectedSignatures(signatures);
+  }, [signatures]);
+
+  const undoPending = useCallback(() => {
+    clearPendingDeletions();
+    clearPendingAdditions();
+    setSignatures(prev =>
+      prev.map(x => (x.pendingDeletion ? { ...x, pendingDeletion: false, pendingUntil: undefined } : x)),
+    );
+
+    if (pendingUndoAdditions.length) {
+      pendingUndoAdditions.forEach(async sig => {
+        await outCommand({
+          type: OutCommand.updateSignatures,
+          data: {
+            system_id: systemId,
+            added: [],
+            updated: [],
+            removed: [sig],
+          },
+        });
+      });
+      setSignatures(prev => prev.filter(x => !pendingUndoAdditions.some(u => u.eve_id === x.eve_id)));
+      setPendingUndoAdditions([]);
+    }
+    setLocalPendingDeletions([]);
+  }, [
+    clearPendingDeletions,
+    clearPendingAdditions,
+    pendingUndoAdditions,
+    setPendingUndoAdditions,
+    setLocalPendingDeletions,
+    setSignatures,
+    outCommand,
+    systemId,
+  ]);
+
+  useEffect(() => {
+    const combined = [...localPendingDeletions, ...pendingUndoAdditions];
+    onPendingChange?.(combined, undoPending);
+  }, [localPendingDeletions, pendingUndoAdditions, onPendingChange, undoPending]);
+
+  useMapEventListener(event => {
+    if (event.name === Commands.signaturesUpdated && String(event.data) === String(systemId)) {
+      handleGetSignatures();
+      return true;
+    }
+  });
+
+  useEffect(() => {
+    if (!systemId) {
+      setSignatures([]);
+      return;
+    }
+    handleGetSignatures();
+  }, [systemId, handleGetSignatures, setSignatures]);
+
+  useEffect(() => {
+    onCountChange?.(signatures.length);
+  }, [signatures, onCountChange]);
+
+  return {
+    signatures,
+    selectedSignatures,
+    setSelectedSignatures,
+    handleDeleteSelected,
+    handleSelectAll,
+    handlePaste,
+  };
+}

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

@@ -5,3 +5,4 @@ export * from './renderAddedTimeLeft';
 export * from './renderUpdatedTimeLeft';
 export * from './renderLinkedSystem';
 export * from './renderInfoColumn';
+export * from './renderHeaderLabel';

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

@@ -0,0 +1,5 @@
+import { SystemSignaturesHeader, HeaderProps } from '../SystemSignatureHeader/SystemSignatureHeader';
+
+export function renderHeaderLabel(props: HeaderProps) {
+  return <SystemSignaturesHeader {...props} />;
+}

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

@@ -24,6 +24,12 @@ export const renderInfoColumn = (row: SystemSignature) => {
           </WdTooltipWrapper>
         )}
 
+        {customInfo.isCrit && (
+          <WdTooltipWrapper offset={5} position={TooltipPosition.top} content="Signature marked as Crit">
+            <div className="pi pi-clock text-fuchsia-400 text-[11px] mr-[2px]"></div>
+          </WdTooltipWrapper>
+        )}
+
         {row.type && (
           <WHClassView
             className="text-[11px]"

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

@@ -17,7 +17,7 @@ export interface MapSettingsProps {
   systemId: string;
   show: boolean;
   onHide: () => void;
-  signatureData: SystemSignature | null;
+  signatureData: SystemSignature | undefined;
 }
 
 export const SignatureSettings = ({ systemId, show, onHide, signatureData }: MapSettingsProps) => {

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

@@ -16,13 +16,15 @@ export const parseSignatures = (value: string, availableKeys: string[]): SystemS
 
     const kind = MAPPING_TYPE_TO_ENG[sigArrInfo[1] as SignatureKind];
 
-    outArr.push({
+    const signature: SystemSignature = {
       eve_id: sigArrInfo[0],
       kind: availableKeys.includes(kind) ? kind : SignatureKind.CosmicSignature,
       group: sigArrInfo[2] as SignatureGroup,
       name: sigArrInfo[3],
       type: '',
-    });
+    };
+
+    outArr.push(signature);
   }
 
   return outArr;

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

@@ -2,12 +2,13 @@ import { WORMHOLES_ADDITIONAL_INFO } from '@/hooks/Mapper/components/map/constan
 import { WormholeDataRaw } from '@/hooks/Mapper/types';
 
 export const sortWHClasses = (wormholesData: Record<string, WormholeDataRaw>, statics: string[]) => {
-  if (!statics) {
+  if (!statics || !wormholesData) {
     return [];
   }
 
   return statics
     .map(x => wormholesData[x])
+    .filter(x => !!x)
     .map(x => ({ name: x.name, ...WORMHOLES_ADDITIONAL_INFO[x.dest] }))
     .sort((a, b) => a.wormholeClassID - b.wormholeClassID)
     .map(x => x.name);

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

@@ -66,6 +66,7 @@ export type CommandInit = {
   routes: RoutesList;
   options: Record<string, string | boolean>;
   reset?: boolean;
+  is_subscription_active?: boolean;
 };
 export type CommandAddSystems = SolarSystemRawType[];
 export type CommandUpdateSystems = SolarSystemRawType[];

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

@@ -33,6 +33,8 @@ export type SignatureCustomInfo = {
 
 export type SystemSignature = {
   eve_id: string;
+  character_eve_id?: string;
+  character_name?: string;
   kind: SignatureKind;
   name: string;
   // SignatureCustomInfo

assets/js/hooks/Mapper/utils/contextStore/useContextStore.ts

@@ -1,18 +1,31 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useRef, useState, useEffect } from 'react';
 
-import { ContextStoreDataOpts, ProvideConstateDataReturnType, ContextStoreDataUpdate } from './types';
+import { ContextStoreDataOpts, ProvideConstateDataReturnType, ContextStoreDataUpdate, UpdateFunc } from './types';
 
 export const useContextStore = <T>(
   initialValue: T,
   { notNeedRerender = false, handleBeforeUpdate, onAfterAUpdate }: ContextStoreDataOpts<T> = {},
 ): ProvideConstateDataReturnType<T> => {
   const ref = useRef<T>(initialValue);
+  const queueRef = useRef<{ valOrFunc: Partial<T> | UpdateFunc<T>; force: boolean }[]>([]);
   const [, setRerenderKey] = useState(0);
 
   const refWrapper = useRef({ notNeedRerender, handleBeforeUpdate, onAfterAUpdate });
   refWrapper.current = { notNeedRerender, handleBeforeUpdate, onAfterAUpdate };
 
   const update: ContextStoreDataUpdate<T> = useCallback((valOrFunc, force = false) => {
+    queueRef.current.push({ valOrFunc, force });
+  }, []);
+
+  const processNextQueue = useCallback(() => {
+    const next = queueRef.current.shift();
+
+    if (!next) {
+      return;
+    }
+
+    const { valOrFunc, force } = next;
+
     // It need to force prevent unnecessary rerendering
     // update will create once
     const { notNeedRerender, handleBeforeUpdate, onAfterAUpdate } = refWrapper.current;
@@ -76,5 +89,19 @@ export const useContextStore = <T>(
     onAfterAUpdate?.(ref.current);
   }, []);
 
+  useEffect(() => {
+    let requestId: number;
+    const process = () => {
+      processNextQueue();
+      requestId = requestAnimationFrame(process);
+    };
+
+    process();
+
+    return () => {
+      cancelAnimationFrame(requestId);
+    };
+  });
+
   return { update, ref: ref.current };
 };

lib/wanderer_app/map/map_server.ex

@@ -237,6 +237,12 @@ defmodule WandererApp.Map.Server do
       |> map_pid!
       |> GenServer.cast({&Impl.update_connection_custom_info/2, [connection_info]})
 
+  def update_signatures(map_id, signatures_update) when is_binary(map_id),
+    do:
+      map_id
+      |> map_pid!
+      |> GenServer.cast({&Impl.update_signatures/2, [signatures_update]})
+
   @impl true
   def handle_continue(:load_state, state),
     do: {:noreply, state |> Impl.load_state(), {:continue, :start_map}}

lib/wanderer_app/map/server/map_server_impl.ex

@@ -4,7 +4,13 @@ defmodule WandererApp.Map.Server.Impl do
   """
   require Logger
 
-  alias WandererApp.Map.Server.{AclsImpl, CharactersImpl, ConnectionsImpl, SystemsImpl}
+  alias WandererApp.Map.Server.{
+    AclsImpl,
+    CharactersImpl,
+    ConnectionsImpl,
+    SystemsImpl,
+    SignaturesImpl
+  }
 
   @enforce_keys [
     :map_id
@@ -180,7 +186,9 @@ defmodule WandererApp.Map.Server.Impl do
 
   defdelegate update_connection_locked(state, connection_update), to: ConnectionsImpl
 
-  defdelegate update_connection_custom_info(state, connection_update), to: ConnectionsImpl
+  defdelegate update_connection_custom_info(state, signatures_update), to: ConnectionsImpl
+
+  defdelegate update_signatures(state, signatures_update), to: SignaturesImpl
 
   def import_settings(%{map_id: map_id} = state, settings, user_id) do
     WandererApp.Cache.put(

lib/wanderer_app/map/server/map_server_signatures_impl.ex

@@ -0,0 +1,150 @@
+defmodule WandererApp.Map.Server.SignaturesImpl do
+  @moduledoc false
+
+  require Logger
+
+  alias WandererApp.Map.Server.{Impl, ConnectionsImpl, SystemsImpl}
+
+  def update_signatures(
+        %{map_id: map_id} = state,
+        %{
+          solar_system_id: solar_system_id,
+          character: character,
+          user_id: user_id,
+          delete_connection_with_sigs: delete_connection_with_sigs,
+          added_signatures: added_signatures,
+          updated_signatures: updated_signatures,
+          removed_signatures: removed_signatures
+        } =
+          _signatures_update
+      ) do
+    WandererApp.Api.MapSystem.read_by_map_and_solar_system(%{
+      map_id: map_id,
+      solar_system_id: solar_system_id
+    })
+    |> case do
+      {:ok, system} ->
+        character_eve_id = character.eve_id
+
+        case not is_nil(character_eve_id) do
+          true ->
+            added_signatures =
+              added_signatures
+              |> parse_signatures(character_eve_id, system.id)
+
+            updated_signatures =
+              updated_signatures
+              |> parse_signatures(character_eve_id, system.id)
+
+            updated_signatures_eve_ids =
+              updated_signatures
+              |> Enum.map(fn s -> s.eve_id end)
+
+            removed_signatures_eve_ids =
+              removed_signatures
+              |> parse_signatures(character_eve_id, system.id)
+              |> Enum.map(fn s -> s.eve_id end)
+
+            WandererApp.Api.MapSystemSignature.by_system_id!(system.id)
+            |> Enum.filter(fn s -> s.eve_id in removed_signatures_eve_ids end)
+            |> Enum.each(fn s ->
+              if delete_connection_with_sigs && not is_nil(s.linked_system_id) do
+                state
+                |> ConnectionsImpl.delete_connection(%{
+                  solar_system_source_id: system.solar_system_id,
+                  solar_system_target_id: s.linked_system_id
+                })
+              end
+
+              if not is_nil(s.linked_system_id) do
+                state
+                |> SystemsImpl.update_system_linked_sig_eve_id(%{
+                  solar_system_id: s.linked_system_id,
+                  linked_sig_eve_id: nil
+                })
+              end
+
+              s
+              |> Ash.destroy!()
+            end)
+
+            WandererApp.Api.MapSystemSignature.by_system_id!(system.id)
+            |> Enum.filter(fn s -> s.eve_id in updated_signatures_eve_ids end)
+            |> Enum.each(fn s ->
+              updated = updated_signatures |> Enum.find(fn u -> u.eve_id == s.eve_id end)
+
+              if not is_nil(updated) do
+                s
+                |> WandererApp.Api.MapSystemSignature.update(
+                  updated
+                  |> Map.put(:updated, System.os_time())
+                )
+              end
+            end)
+
+            added_signatures
+            |> Enum.each(fn s ->
+              s |> WandererApp.Api.MapSystemSignature.create!()
+            end)
+
+            added_signatures_eve_ids =
+              added_signatures
+              |> Enum.map(fn s -> s.eve_id end)
+
+            if not is_nil(character) &&
+                 not (added_signatures_eve_ids |> Enum.empty?()) do
+              WandererApp.User.ActivityTracker.track_map_event(:signatures_added, %{
+                character_id: character.id,
+                user_id: user_id,
+                map_id: map_id,
+                solar_system_id: system.solar_system_id,
+                signatures: added_signatures_eve_ids
+              })
+            end
+
+            if not is_nil(character) &&
+                 not (removed_signatures_eve_ids |> Enum.empty?()) do
+              WandererApp.User.ActivityTracker.track_map_event(:signatures_removed, %{
+                character_id: character.id,
+                user_id: user_id,
+                map_id: map_id,
+                solar_system_id: system.solar_system_id,
+                signatures: removed_signatures_eve_ids
+              })
+            end
+
+            Impl.broadcast!(map_id, :signatures_updated, system.solar_system_id)
+
+            state
+
+          _ ->
+            state
+        end
+
+      _ ->
+        state
+    end
+  end
+
+  defp parse_signatures(signatures, character_eve_id, system_id),
+    do:
+      signatures
+      |> Enum.map(fn %{
+                       "eve_id" => eve_id,
+                       "name" => name,
+                       "kind" => kind,
+                       "group" => group
+                     } = signature ->
+        %{
+          system_id: system_id,
+          eve_id: eve_id,
+          name: name,
+          description: Map.get(signature, "description"),
+          kind: kind,
+          group: group,
+          type: Map.get(signature, "type"),
+          custom_info: Map.get(signature, "custom_info"),
+          character_eve_id: character_eve_id
+        }
+      end)
+end

lib/wanderer_app/map/server/map_server_systems_impl.ex

@@ -278,7 +278,7 @@ defmodule WandererApp.Map.Server.SystemsImpl do
 
     linked_system_ids
     |> Enum.each(fn linked_system_id ->
-      WandererApp.Map.Server.update_system_linked_sig_eve_id(map_id, %{
+      update_system_linked_sig_eve_id(state, %{
         solar_system_id: linked_system_id,
         linked_sig_eve_id: nil
       })

lib/wanderer_app_web/components/map_characters.ex

@@ -0,0 +1,84 @@
+defmodule WandererAppWeb.MapCharacters do
+  use WandererAppWeb, :live_component
+  use LiveViewEvents
+
+  @impl true
+  def mount(socket) do
+    {:ok, socket}
+  end
+
+  @impl true
+  def update(
+        assigns,
+        socket
+      ) do
+    {:ok,
+     socket
+     |> handle_info_or_assign(assigns)}
+  end
+
+  # attr(:groups, :any, required: true)
+  # attr(:character_settings, :any, required: true)
+
+  def render(assigns) do
+    ~H"""
+    <div id={@id}>
+      <ul :for={group <- @groups} class="space-y-4 border-t border-b border-gray-200 py-4">
+        <li :for={character <- group.characters}>
+          <div class="flex items-center justify-between w-full space-x-2 p-1 hover:bg-gray-900">
+            <.character_entry character={character} character_settings={@character_settings} />
+            <button
+              phx-click="untrack"
+              phx-value-event-data={character.id}
+              class="btn btn-sm btn-icon"
+            >
+              <.icon name="hero-eye-slash" class="h-5 w-5" /> Untrack
+            </button>
+          </div>
+        </li>
+      </ul>
+    </div>
+    """
+  end
+
+  attr(:character, :any, required: true)
+  attr(:character_settings, :any, required: true)
+
+  defp character_entry(assigns) do
+    ~H"""
+    <div class="flex items-center gap-3 text-sm w-[450px]">
+      <span
+        :if={is_tracked?(@character.id, @character_settings)}
+        class="text-green-500 rounded-full px-2 py-1"
+      >
+        Tracked
+      </span>
+      <div class="avatar">
+        <div class="rounded-md w-8 h-8">
+          <img src={member_icon_url(@character.eve_id)} alt={@character.name} />
+        </div>
+      </div>
+      <span><%= @character.name %></span>
+      <span :if={@character.alliance_ticker}>[<%= @character.alliance_ticker %>]</span>
+      <span :if={@character.corporation_ticker}>[<%= @character.corporation_ticker %>]</span>
+    </div>
+    """
+  end
+
+  @impl true
+  def handle_event("undo", %{"event-data" => event_data} = _params, socket) do
+    # notify_to(socket.assigns.notify_to, socket.assigns.event_name, map_slug)
+
+    {:noreply, socket}
+  end
+
+  defp is_tracked?(character_id, character_settings) do
+    Enum.any?(character_settings, fn setting ->
+      setting.character_id == character_id && setting.tracked
+    end)
+  end
+
+  defp get_event_name(name), do: name
+
+  defp get_event_data(_name, data), do: Jason.encode!(data)
+end

lib/wanderer_app_web/controllers/access_list_api_controller.ex

@@ -4,78 +4,132 @@ defmodule WandererAppWeb.MapAccessListAPIController do
 
   Endpoints:
     - GET /api/map/acls?map_id=... or ?slug=...   (list ACLs)
-    - POST /api/map/acls                            (create ACL)
-    - GET /api/acls/:id                             (show ACL)
-    - PUT /api/acls/:id                             (update ACL)
+    - POST /api/map/acls                         (create ACL)
+    - GET /api/acls/:id                          (show ACL)
+    - PUT /api/acls/:id                          (update ACL)
 
   ACL members are managed via a separate controller.
   """
 
   use WandererAppWeb, :controller
   alias WandererApp.Api.{AccessList, Character}
-  # Do not alias Map—to avoid conflicts—use the full module name: WandererApp.Map.
   alias WandererAppWeb.UtilAPIController, as: Util
   import Ash.Query
+  require Logger
 
-  # List ACLs for a given map (returns reduced info: no api_key, no members, and includes owner_eve_id)
+  @doc """
+  GET /api/map/acls?map_id=... or ?slug=...
+
+  Lists the ACLs for a given map.
+  """
   def index(conn, params) do
     case Util.fetch_map_id(params) do
       {:ok, map_identifier} ->
-        with {:ok, map} <- get_map(map_identifier) do
-          acls = map.acls || []
+        with {:ok, map} <- get_map(map_identifier),
+             # Load ACLs and each ACL's :owner in a single pass:
+             {:ok, loaded_map} <- Ash.load(map, acls: [:owner]) do
+          acls = loaded_map.acls || []
           json(conn, %{data: Enum.map(acls, &acl_to_list_json/1)})
         else
           {:error, :map_not_found} ->
-            conn |> put_status(:not_found) |> json(%{error: "Map not found"})
+            conn
+            |> put_status(:not_found)
+            |> json(%{error: "Map not found"})
+
           {:error, error} ->
-            conn |> put_status(:internal_server_error) |> json(%{error: inspect(error)})
+            conn
+            |> put_status(:internal_server_error)
+            |> json(%{error: inspect(error)})
         end
+
       {:error, msg} ->
-        conn |> put_status(:bad_request) |> json(%{error: msg})
+        conn
+        |> put_status(:bad_request)
+        |> json(%{error: msg})
     end
   end
 
-  # Create a new ACL for a map
+  @doc """
+  POST /api/map/acls
+
+  Creates a new ACL for a map.
+  """
   def create(conn, params) do
     with {:ok, map_identifier} <- Util.fetch_map_id(params),
          {:ok, map} <- get_map(map_identifier),
          %{"acl" => acl_params} <- params,
-         owner_eve_id when is_binary(owner_eve_id) <- Map.get(acl_params, "owner_eve_id"),
-         {:ok, character} <- find_character_by_eve_id(owner_eve_id),
+         owner_eve_id when not is_nil(owner_eve_id) <- Map.get(acl_params, "owner_eve_id"),
+         owner_eve_id_str = to_string(owner_eve_id),
+         {:ok, character} <- find_character_by_eve_id(owner_eve_id_str),
          {:ok, new_api_key} <- {:ok, UUID.uuid4()},
-         {:ok, new_params} <- {:ok,
+         new_params <-
            acl_params
            |> Map.delete("owner_eve_id")
            |> Map.put("owner_id", character.id)
-           |> Map.put("api_key", new_api_key)
-         },
+           |> Map.put("api_key", new_api_key),
          {:ok, new_acl} <- AccessList.new(new_params),
-         {:ok, _} <- {:ok, associate_acl_with_map(map, new_acl)}
-    do
+         {:ok, _updated_map} <- associate_acl_with_map(map, new_acl) do
       json(conn, %{data: acl_to_json(new_acl)})
     else
+      nil ->
+        conn
+        |> put_status(:bad_request)
+        |> json(%{error: "Missing required field: owner_eve_id"})
+
+      {:error, "owner_eve_id does not match any existing character"} = error ->
+        conn
+        |> put_status(:bad_request)
+        |> json(%{error: inspect(error)})
+
+      # For any other error, also a bad request—adjust if you want a different code
       error ->
-        conn |> put_status(:bad_request) |> json(%{error: inspect(error)})
+        conn
+        |> put_status(:bad_request)
+        |> json(%{error: inspect(error)})
     end
   end
 
-  # Show a specific ACL (with members)
+  @doc """
+  GET /api/acls/:id
+
+  Shows a specific ACL (with its members).
+  """
   def show(conn, %{"id" => id}) do
-    query = AccessList |> Ash.Query.new() |> filter(id == ^id)
+    query =
+      AccessList
+      |> Ash.Query.new()
+      |> filter(id == ^id)
+
     case WandererApp.Api.read(query) do
       {:ok, [acl]} ->
+        # We load members for a single ACL
         case Ash.load(acl, :members) do
-          {:ok, loaded_acl} -> json(conn, %{data: acl_to_json(loaded_acl)})
-          {:error, error} -> conn |> put_status(:internal_server_error) |> json(%{error: "Failed to load ACL members: #{inspect(error)}"})
+          {:ok, loaded_acl} ->
+            json(conn, %{data: acl_to_json(loaded_acl)})
+
+          {:error, error} ->
+            conn
+            |> put_status(:internal_server_error)
+            |> json(%{error: "Failed to load ACL members: #{inspect(error)}"})
         end
+
       {:ok, []} ->
-        conn |> put_status(:not_found) |> json(%{error: "ACL not found"})
+        conn
+        |> put_status(:not_found)
+        |> json(%{error: "ACL not found"})
+
       {:error, error} ->
-        conn |> put_status(:internal_server_error) |> json(%{error: "Error reading ACL: #{inspect(error)}"})
+        conn
+        |> put_status(:internal_server_error)
+        |> json(%{error: "Error reading ACL: #{inspect(error)}"})
     end
   end
 
-  # Update an ACL (if needed)
+  @doc """
+  PUT /api/acls/:id
+
+  Updates an ACL.
+  """
   def update(conn, %{"id" => id, "acl" => acl_params}) do
     with {:ok, acl} <- AccessList.by_id(id),
          {:ok, updated_acl} <- AccessList.update(acl, acl_params),
@@ -83,20 +137,21 @@ defmodule WandererAppWeb.MapAccessListAPIController do
       json(conn, %{data: acl_to_json(updated_acl)})
     else
       {:error, error} ->
-        conn |> put_status(:bad_request) |> json(%{error: "Failed to update ACL: #{inspect(error)}"})
+        conn
+        |> put_status(:bad_request)
+        |> json(%{error: "Failed to update ACL: #{inspect(error)}"})
     end
   end
 
-  # Helper to get the map (using your module WandererApp.Map)
+  # ---------------------------------------------------------------------------
+  # Private / Helper Functions
+  # ---------------------------------------------------------------------------
   defp get_map(map_identifier) do
-    # Assuming Util.fetch_map_id returns a map id.
-    case WandererApp.Map.get_map(map_identifier) do
-      {:ok, map} -> {:ok, map}
-      other -> other
-    end
+    # If your WandererApp.Api.Map.by_id/1 returns :map_not_found or
+    # returns {:ok, map}/{:error, ...}, you can handle that here
+    WandererApp.Api.Map.by_id(map_identifier)
   end
 
-  # Helper to convert an ACL to full JSON (for detail views)
   defp acl_to_json(acl) do
     members =
       case acl.members do
@@ -104,6 +159,7 @@ defmodule WandererAppWeb.MapAccessListAPIController do
         list when is_list(list) -> Enum.map(list, &member_to_json/1)
         _ -> []
       end
+
     %{
       id: acl.id,
       name: acl.name,
@@ -117,25 +173,20 @@ defmodule WandererAppWeb.MapAccessListAPIController do
   end
 
   defp acl_to_list_json(acl) do
-    full_acl =
-      case AccessList.by_id(acl.id) do
-        {:ok, loaded_acl} -> loaded_acl
-        _ -> acl
-      end
-
+    # Because we loaded :owner for each ACL in index/2, we can reference it here
     owner_eve_id =
-      case find_character_by_id(full_acl.owner_id) do
-        {:ok, character} -> character.eve_id
+      case acl.owner do
+        %Character{eve_id: eid} -> eid
         _ -> nil
       end
 
     %{
-      id: full_acl.id,
-      name: full_acl.name,
-      description: full_acl.description,
+      id: acl.id,
+      name: acl.name,
+      description: acl.description,
       owner_eve_id: owner_eve_id,
-      inserted_at: full_acl.inserted_at,
-      updated_at: full_acl.updated_at
+      inserted_at: acl.inserted_at,
+      updated_at: acl.updated_at
     }
   end
 
@@ -150,19 +201,32 @@ defmodule WandererAppWeb.MapAccessListAPIController do
     }
   end
 
-  # Helper to find a character by external EVE id (used in create action)
+  # Helper to find a character by external EVE id.
   defp find_character_by_eve_id(eve_id) do
-    query = Character |> Ash.Query.new() |> filter(eve_id == ^eve_id)
+    query =
+      Character
+      |> Ash.Query.new()
+      |> filter(eve_id == ^eve_id)
+
     case WandererApp.Api.read(query) do
-      {:ok, [character]} -> {:ok, character}
-      {:ok, []} -> {:error, "owner_eve_id does not match any existing character"}
-      other -> other
+      {:ok, [character]} ->
+        {:ok, character}
+
+      {:ok, []} ->
+        {:error, "owner_eve_id does not match any existing character"}
+
+      other ->
+        other
     end
   end
 
-  # Helper to find a character by internal id (used in acl_to_list_json)
+  # Helper to find a character by internal id.
   defp find_character_by_id(id) do
-    query = Character |> Ash.Query.new() |> filter(id == ^id)
+    query =
+      Character
+      |> Ash.Query.new()
+      |> filter(id == ^id)
+
     case WandererApp.Api.read(query) do
       {:ok, [character]} -> {:ok, character}
       {:ok, []} -> {:error, "Character not found"}
@@ -170,12 +234,26 @@ defmodule WandererAppWeb.MapAccessListAPIController do
     end
   end
 
-  # Associate the new ACL with the map by updating the map's acls list.
+  # Helper to associate a new ACL with a map.
   defp associate_acl_with_map(map, new_acl) do
-    current_acls = map.acls || []
-    updated_acls = current_acls ++ [new_acl]
-    case WandererApp.Map.update_map(map.map_id, %{acls: updated_acls}) do
-      _ -> :ok
+    with {:ok, api_map} <- WandererApp.Api.Map.by_id(map.id),
+         {:ok, loaded_map} <- Ash.load(api_map, :acls) do
+      new_acl_id = if is_binary(new_acl), do: new_acl, else: new_acl.id
+      current_acls = loaded_map.acls || []
+      updated_acls = current_acls ++ [new_acl_id]
+
+      case WandererApp.Api.Map.update_acls(loaded_map, %{acls: updated_acls}) do
+        {:ok, updated_map} ->
+          {:ok, updated_map}
+
+        {:error, error} ->
+          Logger.error("Failed to update map #{loaded_map.id} with new ACL: #{inspect(error)}")
+          {:error, error}
+      end
+    else
+      error ->
+        Logger.error("Error loading map ACLs: #{inspect(error)}")
+        {:error, error}
     end
   end
 end

lib/wanderer_app_web/controllers/access_list_member_api_controller.ex

@@ -1,98 +1,152 @@
 defmodule WandererAppWeb.AccessListMemberAPIController do
   @moduledoc """
   Handles creation, role updates, and deletion of individual ACL members.
+
+  This controller supports creation of members by accepting one of the following keys:
+    - "eve_character_id"
+    - "eve_corporation_id"
+    - "eve_alliance_id"
+
+  For corporation and alliance members, roles "admin" and "manager" are disallowed.
   """
 
   use WandererAppWeb, :controller
   alias WandererApp.Api.AccessListMember
   import Ash.Query
+  require Logger
 
   @doc """
   POST /api/acls/:acl_id/members
-
-  Creates a new member for the given ACL.
-
-  Request Body example:
-      {
-        "member": {
-          "eve_character_id": "CHARACTER_EXTERNAL_EVE_ID",
-          "role": "viewer"  // optional; defaults to "viewer" if not provided
-        }
-      }
-
-  Behavior:
-  The controller looks up the character via the external API using its external EVE id (eve_id),
-  injects the character's name into the membership, and creates the membership record.
   """
   def create(conn, %{"acl_id" => acl_id, "member" => member_params}) do
-    with eve_id when not is_nil(eve_id) <- Map.get(member_params, "eve_character_id"),
-         {:ok, character_info} <- WandererApp.Esi.get_character_info(eve_id),
-         name when is_binary(name) <- Map.get(character_info, "name") do
-      member_params = Map.put(member_params, "name", name)
-      merged_params = Map.put(member_params, "access_list_id", acl_id)
+    chosen =
+      cond do
+        Map.has_key?(member_params, "eve_corporation_id") ->
+          {"eve_corporation_id", "corporation"}
 
-      case AccessListMember.create(merged_params) do
-        {:ok, new_member} ->
-          json(conn, %{data: member_to_json(new_member)})
+        Map.has_key?(member_params, "eve_alliance_id") ->
+          {"eve_alliance_id", "alliance"}
 
-        {:error, error} ->
-          conn
-          |> put_status(:bad_request)
-          |> json(%{error: "Failed to create member: #{inspect(error)}"})
+        Map.has_key?(member_params, "eve_character_id") ->
+          {"eve_character_id", "character"}
+
+        true ->
+          nil
       end
+
+    if is_nil(chosen) do
+      conn
+      |> put_status(:bad_request)
+      |> json(%{
+        error:
+          "Missing one of eve_character_id, eve_corporation_id, or eve_alliance_id in payload"
+      })
     else
-      nil ->
-        conn
-        |> put_status(:bad_request)
-        |> json(%{error: "Missing eve_character_id in member payload"})
+      {key, type} = chosen
+      raw_id = Map.get(member_params, key)
+      id_str = to_string(raw_id)  # handle string/integer input
+      role = Map.get(member_params, "role", "viewer")
 
-      {:error, error} ->
+      if type in ["corporation", "alliance"] and role in ["admin", "manager"] do
         conn
         |> put_status(:bad_request)
-        |> json(%{error: "Failed to lookup character: #{inspect(error)}"})
+        |> json(%{
+          error:
+            "#{String.capitalize(type)} members cannot have an admin or manager role"
+        })
+      else
+        info_fetcher =
+          case type do
+            "character" -> &WandererApp.Esi.get_character_info/1
+            "corporation" -> &WandererApp.Esi.get_corporation_info/1
+            "alliance" -> &WandererApp.Esi.get_alliance_info/1
+          end
 
-      _ ->
-        conn
-        |> put_status(:bad_request)
-        |> json(%{error: "Unexpected error during character lookup"})
+        with {:ok, entity_info} <- info_fetcher.(id_str) do
+          member_name = Map.get(entity_info, "name")
+
+          new_params =
+            member_params
+            |> Map.drop(["eve_corporation_id", "eve_alliance_id", "eve_character_id"])
+            |> Map.put(key, id_str)
+            |> Map.put("name", member_name)
+            |> Map.put("access_list_id", acl_id)
+
+          case AccessListMember.create(new_params) do
+            {:ok, new_member} ->
+              json(conn, %{data: member_to_json(new_member)})
+
+            {:error, error} ->
+              conn
+              |> put_status(:bad_request)
+              |> json(%{error: "Creation failed: #{inspect(error)}"})
+          end
+        else
+          {:error, error} ->
+            conn
+            |> put_status(:bad_request)
+            |> json(%{error: "Entity lookup failed: #{inspect(error)}"})
+        end
+      end
     end
   end
 
   @doc """
   PUT /api/acls/:acl_id/members/:member_id
-
-  Updates a single ACL member’s role based on the external EVE ID provided in the URL.
-
-  Request Body example:
-      {
-        "member": {
-          "role": "admin"
-        }
-      }
   """
-  def update_role(conn, %{"acl_id" => acl_id, "member_id" => eve_id, "member" => member_params}) do
+  def update_role(conn, %{
+        "acl_id" => acl_id,
+        "member_id" => external_id,
+        "member" => member_params
+      }) do
+    # Convert external_id to string if you expect it may come in as integer
+    external_id_str = to_string(external_id)
+
     membership_query =
       AccessListMember
       |> Ash.Query.new()
-      |> filter(eve_character_id == ^eve_id)
       |> filter(access_list_id == ^acl_id)
+      |> filter(
+        eve_character_id == ^external_id_str or
+          eve_corporation_id == ^external_id_str or
+          eve_alliance_id == ^external_id_str
+      )
 
     case WandererApp.Api.read(membership_query) do
       {:ok, [membership]} ->
-        case AccessListMember.update_role(membership, member_params) do
-          {:ok, updated_membership} ->
-            json(conn, %{data: member_to_json(updated_membership)})
+        new_role = Map.get(member_params, "role", membership.role)
 
-          {:error, error} ->
-            conn
-            |> put_status(:bad_request)
-            |> json(%{error: inspect(error)})
+        member_type =
+          cond do
+            membership.eve_corporation_id -> "corporation"
+            membership.eve_alliance_id -> "alliance"
+            membership.eve_character_id -> "character"
+            true -> "character"
+          end
+
+        if member_type in ["corporation", "alliance"] and new_role in ["admin", "manager"] do
+          conn
+          |> put_status(:bad_request)
+          |> json(%{
+            error:
+              "#{String.capitalize(member_type)} members cannot have an admin or manager role"
+          })
+        else
+          case AccessListMember.update_role(membership, member_params) do
+            {:ok, updated_membership} ->
+              json(conn, %{data: member_to_json(updated_membership)})
+
+            {:error, error} ->
+              conn
+              |> put_status(:bad_request)
+              |> json(%{error: inspect(error)})
+          end
         end
 
       {:ok, []} ->
         conn
         |> put_status(:not_found)
-        |> json(%{error: "Membership not found for given ACL and eve_character_id"})
+        |> json(%{error: "Membership not found for given ACL and external id"})
 
       {:error, error} ->
         conn
@@ -103,15 +157,19 @@ defmodule WandererAppWeb.AccessListMemberAPIController do
 
   @doc """
   DELETE /api/acls/:acl_id/members/:member_id
-
-  Deletes a member from an ACL based on the external EVE ID provided in the URL.
   """
-  def delete(conn, %{"acl_id" => acl_id, "member_id" => eve_id}) do
+  def delete(conn, %{"acl_id" => acl_id, "member_id" => external_id}) do
+    external_id_str = to_string(external_id)
+
     membership_query =
       AccessListMember
       |> Ash.Query.new()
-      |> filter(eve_character_id == ^eve_id)
       |> filter(access_list_id == ^acl_id)
+      |> filter(
+        eve_character_id == ^external_id_str or
+          eve_corporation_id == ^external_id_str or
+          eve_alliance_id == ^external_id_str
+      )
 
     case WandererApp.Api.read(membership_query) do
       {:ok, [membership]} ->
@@ -128,7 +186,7 @@ defmodule WandererAppWeb.AccessListMemberAPIController do
       {:ok, []} ->
         conn
         |> put_status(:not_found)
-        |> json(%{error: "Membership not found for given ACL and eve_character_id"})
+        |> json(%{error: "Membership not found for given ACL and external id"})
 
       {:error, error} ->
         conn
@@ -140,14 +198,21 @@ defmodule WandererAppWeb.AccessListMemberAPIController do
   # ---------------------------------------------------------------------------
   # Private Helpers
   # ---------------------------------------------------------------------------
+  @doc false
   defp member_to_json(member) do
-    %{
+    base = %{
       id: member.id,
       name: member.name,
       role: member.role,
-      eve_character_id: member.eve_character_id,
       inserted_at: member.inserted_at,
       updated_at: member.updated_at
     }
+
+    cond do
+      member.eve_character_id -> Map.put(base, :eve_character_id, member.eve_character_id)
+      member.eve_corporation_id -> Map.put(base, :eve_corporation_id, member.eve_corporation_id)
+      member.eve_alliance_id -> Map.put(base, :eve_alliance_id, member.eve_alliance_id)
+      true -> base
+    end
   end
 end

lib/wanderer_app_web/live/maps/event_handlers/map_signatures_event_handler.ex

@@ -89,132 +89,30 @@ defmodule WandererAppWeb.MapSignaturesEventHandler do
           }
         } = socket
       ) do
-    WandererApp.Api.MapSystem.read_by_map_and_solar_system(%{
-      map_id: map_id,
-      solar_system_id: solar_system_id |> String.to_integer()
+    first_character_eve_id =
+      user_characters |> List.first()
+
+    character =
+      current_user.characters
+      |> Enum.find(fn c -> c.eve_id === first_character_eve_id end)
+
+    delete_connection_with_sigs =
+      map_user_settings
+      |> WandererApp.MapUserSettingsRepo.to_form_data!()
+      |> WandererApp.MapUserSettingsRepo.get_boolean_setting("delete_connection_with_sigs")
+
+    map_id
+    |> WandererApp.Map.Server.update_signatures(%{
+      solar_system_id: solar_system_id |> String.to_integer(),
+      character: character,
+      user_id: current_user.id,
+      delete_connection_with_sigs: delete_connection_with_sigs,
+      added_signatures: added_signatures,
+      updated_signatures: updated_signatures,
+      removed_signatures: removed_signatures
     })
-    |> case do
-      {:ok, system} ->
-        first_character_eve_id =
-          user_characters |> List.first()
 
-        case not is_nil(first_character_eve_id) do
-          true ->
-            added_signatures =
-              added_signatures
-              |> parse_signatures(first_character_eve_id, system.id)
-
-            updated_signatures =
-              updated_signatures
-              |> parse_signatures(first_character_eve_id, system.id)
-
-            updated_signatures_eve_ids =
-              updated_signatures
-              |> Enum.map(fn s -> s.eve_id end)
-
-            removed_signatures_eve_ids =
-              removed_signatures
-              |> parse_signatures(first_character_eve_id, system.id)
-              |> Enum.map(fn s -> s.eve_id end)
-
-            delete_connection_with_sigs =
-              map_user_settings
-              |> WandererApp.MapUserSettingsRepo.to_form_data!()
-              |> WandererApp.MapUserSettingsRepo.get_boolean_setting(
-                "delete_connection_with_sigs"
-              )
-
-            WandererApp.Api.MapSystemSignature.by_system_id!(system.id)
-            |> Enum.filter(fn s -> s.eve_id in removed_signatures_eve_ids end)
-            |> Enum.each(fn s ->
-              if delete_connection_with_sigs && not is_nil(s.linked_system_id) do
-                map_id
-                |> WandererApp.Map.Server.delete_connection(%{
-                  solar_system_source_id: system.solar_system_id,
-                  solar_system_target_id: s.linked_system_id
-                })
-              end
-
-              if not is_nil(s.linked_system_id) do
-                map_id
-                |> WandererApp.Map.Server.update_system_linked_sig_eve_id(%{
-                  solar_system_id: s.linked_system_id,
-                  linked_sig_eve_id: nil
-                })
-              end
-
-              s
-              |> Ash.destroy!()
-            end)
-
-            WandererApp.Api.MapSystemSignature.by_system_id!(system.id)
-            |> Enum.filter(fn s -> s.eve_id in updated_signatures_eve_ids end)
-            |> Enum.each(fn s ->
-              updated = updated_signatures |> Enum.find(fn u -> u.eve_id == s.eve_id end)
-
-              if not is_nil(updated) do
-                s
-                |> WandererApp.Api.MapSystemSignature.update(
-                  updated
-                  |> Map.put(:updated, System.os_time())
-                )
-              end
-            end)
-
-            added_signatures
-            |> Enum.each(fn s ->
-              s |> WandererApp.Api.MapSystemSignature.create!()
-            end)
-
-            added_signatures_eve_ids =
-              added_signatures
-              |> Enum.map(fn s -> s.eve_id end)
-
-            first_tracked_character =
-              current_user.characters
-              |> Enum.find(fn c -> c.eve_id === first_character_eve_id end)
-
-            if not is_nil(first_tracked_character) &&
-                 not (added_signatures_eve_ids |> Enum.empty?()) do
-              WandererApp.User.ActivityTracker.track_map_event(:signatures_added, %{
-                character_id: first_tracked_character.id,
-                user_id: current_user.id,
-                map_id: map_id,
-                solar_system_id: system.solar_system_id,
-                signatures: added_signatures_eve_ids
-              })
-            end
-
-            if not is_nil(first_tracked_character) &&
-                 not (removed_signatures_eve_ids |> Enum.empty?()) do
-              WandererApp.User.ActivityTracker.track_map_event(:signatures_removed, %{
-                character_id: first_tracked_character.id,
-                user_id: current_user.id,
-                map_id: map_id,
-                solar_system_id: system.solar_system_id,
-                signatures: removed_signatures_eve_ids
-              })
-            end
-
-            Phoenix.PubSub.broadcast!(WandererApp.PubSub, map_id, %{
-              event: :signatures_updated,
-              payload: system.solar_system_id
-            })
-
-            {:reply, %{signatures: get_system_signatures(system.id)}, socket}
-
-          _ ->
-            {:reply, %{signatures: []},
-             socket
-             |> put_flash(
-               :error,
-               "You should enable tracking for at least one character to work with signatures."
-             )}
-        end
-
-      _ ->
-        {:noreply, socket}
-    end
+    {:noreply, socket}
   end
 
   def handle_ui_event(
@@ -377,6 +275,7 @@ defmodule WandererAppWeb.MapSignaturesEventHandler do
         s
         |> Map.take([
           :eve_id,
+          :character_eve_id,
           :name,
           :description,
           :kind,
@@ -388,26 +287,4 @@ defmodule WandererAppWeb.MapSignaturesEventHandler do
         |> Map.put(:inserted_at, inserted_at |> Calendar.strftime("%Y/%m/%d %H:%M:%S"))
         |> Map.put(:updated_at, updated_at |> Calendar.strftime("%Y/%m/%d %H:%M:%S"))
       end)
-
-  defp parse_signatures(signatures, character_eve_id, system_id),
-    do:
-      signatures
-      |> Enum.map(fn %{
-                       "eve_id" => eve_id,
-                       "name" => name,
-                       "kind" => kind,
-                       "group" => group
-                     } = signature ->
-        %{
-          system_id: system_id,
-          eve_id: eve_id,
-          name: name,
-          description: Map.get(signature, "description"),
-          kind: kind,
-          group: group,
-          type: Map.get(signature, "type"),
-          custom_info: Map.get(signature, "custom_info"),
-          character_eve_id: character_eve_id
-        }
-      end)
 end

lib/wanderer_app_web/live/maps/map_characters_live.ex

@@ -0,0 +1,151 @@
+defmodule WandererAppWeb.MapCharactersLive do
+  use WandererAppWeb, :live_view
+
+  require Logger
+
+  alias WandererAppWeb.MapCharacters
+
+  def mount(
+        %{"slug" => map_slug} = _params,
+        _session,
+        %{assigns: %{current_user: current_user}} = socket
+      ) do
+    WandererApp.Maps.check_user_can_delete_map(map_slug, current_user)
+    |> case do
+      {:ok,
+       %{
+         id: map_id,
+         name: map_name
+       } = _map} ->
+        {:ok,
+         socket
+         |> assign(
+           map_id: map_id,
+           map_name: map_name,
+           map_slug: map_slug
+         )
+         |> assign(:groups, [])}
+
+      _ ->
+        {:ok,
+         socket
+         |> put_flash(:error, "You don't have an access.")
+         |> push_navigate(to: ~p"/maps")}
+    end
+  end
+
+  @impl true
+  def mount(_params, _session, socket) do
+    {:ok, socket |> assign(user_id: nil)}
+  end
+
+  @impl true
+  def handle_params(params, _url, socket) do
+    {:noreply, apply_action(socket, socket.assigns.live_action, params)}
+  end
+
+  @impl true
+  def handle_info(
+        _event,
+        socket
+      ) do
+    {:noreply, socket}
+  end
+
+  def handle_event(
+        "untrack",
+        %{"event-data" => character_id},
+        %{
+          assigns: %{
+            map_id: map_id,
+            current_user: _current_user,
+            character_settings: character_settings
+          }
+        } = socket
+      ) do
+    socket =
+      character_settings
+      |> Enum.find(&(&1.character_id == character_id))
+      |> case do
+        nil ->
+          socket
+
+        character_setting ->
+          case character_setting.tracked do
+            true ->
+              {:ok, map_character_settings} =
+                character_setting
+                |> WandererApp.MapCharacterSettingsRepo.untrack()
+
+              WandererApp.Map.Server.remove_character(map_id, map_character_settings.character_id)
+
+              socket |> put_flash(:info, "Character untracked!") |> load_characters()
+
+            _ ->
+              socket
+          end
+      end
+
+    {:noreply, socket}
+  end
+
+  @impl true
+  def handle_event("noop", _, socket) do
+    {:noreply, socket}
+  end
+
+  @impl true
+  def handle_event(event, body, socket) do
+    Logger.warning(fn -> "unhandled event: #{event} #{inspect(body)}" end)
+    {:noreply, socket}
+  end
+
+  defp apply_action(socket, :index, _params) do
+    socket
+    |> assign(:active_page, :map_characters)
+    |> assign(:page_title, "Map - Characters")
+    |> load_characters()
+  end
+
+  defp load_characters(%{assigns: %{map_id: map_id}} = socket) do
+    map_characters =
+      map_id
+      |> WandererApp.Map.list_characters()
+      |> Enum.map(&map_ui_character/1)
+
+    groups =
+      map_characters
+      |> Enum.group_by(& &1.user_id)
+      |> Enum.reduce([], fn {user_id, values}, acc ->
+        acc ++ [%{id: user_id, characters: values}]
+      end)
+
+    {:ok, character_settings} =
+      case WandererApp.MapCharacterSettingsRepo.get_all_by_map(map_id) do
+        {:ok, settings} -> {:ok, settings}
+        _ -> {:ok, []}
+      end
+
+    socket
+    |> assign(:character_settings, character_settings)
+    |> assign(:characters_count, map_characters |> length())
+    |> assign(:groups, groups)
+  end
+
+  defp map_ui_character(character),
+    do:
+      character
+      |> Map.take([
+        :id,
+        :user_id,
+        :eve_id,
+        :name,
+        :online,
+        :corporation_id,
+        :corporation_name,
+        :corporation_ticker,
+        :alliance_id,
+        :alliance_name,
+        :alliance_ticker
+      ])
+end

lib/wanderer_app_web/live/maps/map_characters_live.html.heex

@@ -0,0 +1,23 @@
+<nav class="fixed top-0 z-100 px-6 pl-20 flex items-center justify-between w-full h-12 pointer-events-auto border-b border-stone-800  bg-opacity-70 bg-neutral-900">
+  <span className="w-full font-medium text-sm">
+    <.link navigate={~p"/#{@map_slug}"} class="text-neutral-100">
+      <%= @map_name %>
+    </.link>
+    - Characters [<%= @characters_count %>]
+  </span>
+</nav>
+<main
+  id="map-character-list"
+  class="pt-20 w-full h-full col-span-2 lg:col-span-1 p-4 pl-20 pb-20 overflow-auto"
+>
+  <div class="flex flex-col gap-4 w-full">
+    <.live_component
+      module={MapCharacters}
+      id="map-characters"
+      notify_to={self()}
+      groups={@groups}
+      character_settings={@character_settings}
+      event_name="character_event"
+    />
+  </div>
+</main>

lib/wanderer_app_web/live/maps/map_event_handler.ex

@@ -166,6 +166,17 @@ defmodule WandererAppWeb.MapEventHandler do
       when event_name in @map_kills_events,
       do: MapKillsEventHandler.handle_server_event(event, socket)
 
+  def handle_event(
+        %{
+          assigns: %{
+            is_subscription_active?: false
+          }
+        } = socket,
+        %{event: event_name} = _event
+      )
+      when event_name in @map_kills_events,
+      do: socket
+
   def handle_event(socket, {ref, result}) when is_reference(ref) do
     Process.demonitor(ref, [:flush])
 

lib/wanderer_app_web/live/maps/map_live.html.heex

@@ -29,6 +29,15 @@
   >
     <.icon name="hero-key-solid" class="w-6 h-6" />
   </.link>
+
+  <.link
+    :if={(@user_permissions || %{}) |> Map.get(:delete_map, false)}
+    id={"map-characters-#{@map_slug}"}
+    class="h-8 w-8 hover:text-white"
+    navigate={~p"/#{@map_slug}/characters"}
+  >
+    <.icon name="hero-user-group-solid" class="w-6 h-6" />
+  </.link>
 </div>
 
 <.modal

lib/wanderer_app_web/live/maps/maps_live.ex

@@ -323,11 +323,17 @@ defmodule WandererAppWeb.MapsLive do
      |> push_patch(to: ~p"/maps/#{slug}/edit")}
   end
 
-  def handle_event("open_audit", %{"data" => slug}, socket) do
-    {:noreply,
-     socket
-     |> push_navigate(to: ~p"/#{slug}/audit?period=1H&activity=all")}
-  end
+  def handle_event("open_audit", %{"data" => slug}, socket),
+    do:
+      {:noreply,
+       socket
+       |> push_navigate(to: ~p"/#{slug}/audit?period=1H&activity=all")}
+
+  def handle_event("open_characters", %{"data" => slug}, socket),
+    do:
+      {:noreply,
+       socket
+       |> push_navigate(to: ~p"/#{slug}/characters")}
 
   def handle_event("open_settings", %{"data" => slug}, socket) do
     {:noreply,

lib/wanderer_app_web/live/maps/maps_live.html.heex

@@ -74,6 +74,16 @@
                   </span>
                 </h2>
                 <div class="flex gap-2 justify-end">
+                  <button
+                    :if={WandererApp.Maps.can_edit?(map, @current_user)}
+                    id={"map-characters-#{map.slug}"}
+                    phx-hook="MapAction"
+                    data-event="open_characters"
+                    data-data={map.slug}
+                    class="h-8 w-8 hover:text-white"
+                  >
+                    <.icon name="hero-user-group-solid" class="w-6 h-6" />
+                  </button>
                   <button
                     :if={WandererApp.Maps.can_edit?(map, @current_user)}
                     id={"map-audit-#{map.slug}"}
@@ -257,7 +267,9 @@
                   :if={@map_subscriptions_enabled?}
                   class={[
                     "p-unselectable-text",
-                    classes("p-tabview-selected p-highlight": @active_settings_tab == "subscription")
+                    classes(
+                      "p-tabview-selected p-highlight": @active_settings_tab == "subscription"
+                    )
                   ]}
                   role="presentation"
                   data-pc-name=""
@@ -309,7 +321,9 @@
                   :if={not WandererApp.Env.public_api_disabled?()}
                   class={[
                     "p-unselectable-text",
-                    classes("p-tabview-selected p-highlight": @active_settings_tab == "public_api")
+                    classes(
+                      "p-tabview-selected p-highlight": @active_settings_tab == "public_api"
+                    )
                   ]}
                   role="presentation"
                   data-pc-name=""
@@ -411,7 +425,10 @@
               </div>
 
               <div
-                :if={@active_settings_tab == "public_api" and not WandererApp.Env.public_api_disabled?()}
+                :if={
+                  @active_settings_tab == "public_api" and
+                    not WandererApp.Env.public_api_disabled?()
+                }
                 class="p-6"
               >
                 <h2 class="text-lg font-semibold mb-4">Public API</h2>
@@ -680,8 +697,10 @@
       <.button
         :if={@active_settings_tab == "subscription" && not @is_adding_subscription?}
         type="button"
-        disabled={@map_subscriptions |> Enum.at(0) |> Map.get(:status) == :active &&
-            @map_subscriptions |> Enum.at(0) |> Map.get(:plan) != :alpha}
+        disabled={
+          @map_subscriptions |> Enum.at(0) |> Map.get(:status) == :active &&
+            @map_subscriptions |> Enum.at(0) |> Map.get(:plan) != :alpha
+        }
         phx-click="add_subscription"
       >
         Add subscription

lib/wanderer_app_web/router.ex

@@ -143,7 +143,6 @@ defmodule WandererAppWeb.Router do
     post "/acls", MapAccessListAPIController, :create
   end
 
-
   scope "/api/characters", WandererAppWeb do
     pipe_through [:api, :api_character]
     get "/", CharactersAPIController, :index
@@ -260,6 +259,7 @@ defmodule WandererAppWeb.Router do
       live "/profile/deposit", ProfileLive, :deposit
       live "/profile/subscribe", ProfileLive, :subscribe
       live "/:slug/audit", MapAuditLive, :index
+      live "/:slug/characters", MapCharactersLive, :index
       live "/:slug", MapLive, :index
     end
   end

mix.exs

@@ -3,7 +3,7 @@ defmodule WandererApp.MixProject do
 
   @source_url "https://github.com/wanderer-industries/wanderer"
   
-  @version "1.50.0"
+  @version "1.52.4"
 
   def project do
     [

priv/posts/2025/02-20-acl-api.md

@@ -97,7 +97,7 @@ GET /api/map/acls?map_id=<UUID>
 GET /api/map/acls?slug=<map-slug>
 ```
 
-- **Description:** Lists all ACLs associated with a map, specified by either `map_id` (UUID) or `slug`.
+- **Description:** Lists all ACLs associated with a map, specified by either `map_id` (UUID) or `slug` (map slug).
 - **Authentication:** Requires the Map API Token (available in map settings).
 - **Example Request (using slug):**
 
@@ -117,7 +117,7 @@ curl -H "Authorization: Bearer <REDACTED_TOKEN>" \
       "description": null,
       "owner_eve_id": "11111111111",
       "inserted_at": "2025-02-13T03:32:25.144403Z",
-      "updated_at": "2025-02-13T03:32:25.144403Z",
+      "updated_at": "2025-02-13T03:32:25.144403Z"
     }
   ]
 }
@@ -289,19 +289,19 @@ POST /api/acls/:acl_id/members
 
 - **Description:** Adds a new member (character, corporation, or alliance) to the specified ACL.
 - **Authentication:** Requires the ACL API Token.
-- **Request Body Example:**
+- **Request Body Example:**  
+  For **character** membership, use `eve_character_id`. For **corporation**, use `eve_corporation_id`. For **alliance**, use `eve_alliance_id`.
 
 ```json
 {
   "member": {
     "name": "New Member",
-    "eve_character_id": "EXTERNAL_EVE_ID",
+    "eve_character_id": "EXTERNAL_EVE_ID", 
     "role": "viewer"
   }
 }
 ```
 
-  - `eve_character_id` is the character’s external EVE id.
 - **Example Request:**
 
 ```bash
@@ -341,7 +341,7 @@ PUT /api/acls/:acl_id/members/:member_id
 ```
 
 - **Description:** Updates an ACL member’s role (e.g. from `viewer` to `admin`).  
-  The `:member_id` is the external EVE id of the character.
+  The `:member_id` is the external EVE id (or corp/alliance id) used when creating the membership.
 - **Authentication:** Requires the ACL API Token.
 - **Request Body Example:**
 
@@ -388,7 +388,7 @@ curl -X PUT \
 DELETE /api/acls/:acl_id/members/:member_id
 ```
 
-- **Description:** Removes the member with the specified external EVE id from the ACL.
+- **Description:** Removes the member with the specified external EVE id (or corp/alliance id) from the ACL.
 - **Authentication:** Requires the ACL API Token.
 - **Example Request:**
 

test/manual/test_api_calls.sh

@@ -0,0 +1,198 @@
+#!/usr/bin/env bash
+#
+# Example script to test your Map & ACL endpoints using curl.
+# Requires `jq` to parse JSON responses.
+
+# If any command fails, this script will exit immediately
+set -e
+
+#############################################
+# Environment Variables (must be set before)
+#############################################
+: "${BASE_URL:?Need to set BASE_URL, e.g. http://localhost:4444}"
+: "${MAP_TOKEN:?Need to set MAP_TOKEN (Bearer token for map requests)}"
+: "${MAP_SLUG:?Need to set MAP_SLUG (slug for the map to test)}"
+: "${EVE_CHARACTER_ID:?Need to set EVE_CHARACTER_ID (e.g. from /api/characters)}"
+
+echo "Using BASE_URL = $BASE_URL"
+echo "Using MAP_TOKEN = $MAP_TOKEN"
+echo "Using MAP_SLUG = $MAP_SLUG"
+echo "Using EVE_CHARACTER_ID = $EVE_CHARACTER_ID"
+echo "-------------------------------------"
+
+#############################################
+# 1) Get list of characters (just to confirm they exist)
+#############################################
+echo
+echo "=== 1) Get All Characters (for reference) ==="
+curl -s "$BASE_URL/api/characters" | jq
+
+#############################################
+# 2) Get ACLs for the given map slug
+#############################################
+echo
+echo "=== 2) List ACLs for Map Slug '$MAP_SLUG' ==="
+ACL_LIST_JSON=$(curl -s -H "Authorization: Bearer $MAP_TOKEN" \
+  "$BASE_URL/api/map/acls?slug=$MAP_SLUG")
+
+echo "$ACL_LIST_JSON" | jq
+
+# Attempt to parse out the first ACL ID and token from the JSON data array:
+FIRST_ACL_ID=$(echo "$ACL_LIST_JSON" | jq -r '.data[0].id // empty')
+FIRST_ACL_TOKEN=$(echo "$ACL_LIST_JSON" | jq -r '.data[0].api_key // empty')
+
+#############################################
+# 3) Decide whether to use an existing ACL or create a new one
+#############################################
+if [ -z "$FIRST_ACL_ID" ] || [ "$FIRST_ACL_ID" = "null" ]; then
+  echo "No existing ACL found for map slug: $MAP_SLUG."
+  USE_EXISTING_ACL=false
+else
+  # We found at least one ACL. But does it have a token?
+  if [ -z "$FIRST_ACL_TOKEN" ] || [ "$FIRST_ACL_TOKEN" = "null" ]; then
+    echo "Found an ACL with ID $FIRST_ACL_ID but no api_key in the response."
+    echo "We cannot do membership actions on it without a token."
+    USE_EXISTING_ACL=false
+  else
+    echo "Parsed ACL_ID from existing ACL: $FIRST_ACL_ID"
+    echo "Parsed ACL_TOKEN from existing ACL: $FIRST_ACL_TOKEN"
+    USE_EXISTING_ACL=true
+  fi
+fi
+
+#############################################
+# 4) If we cannot use an existing ACL, create a new one
+#############################################
+if [ "$USE_EXISTING_ACL" = false ]; then
+  echo
+  echo "=== Creating a new ACL for membership testing ==="
+  NEW_ACL_RESPONSE=$(curl -s -X POST \
+    -H "Authorization: Bearer $MAP_TOKEN" \
+    -H "Content-Type: application/json" \
+    -d '{
+          "acl": {
+            "name": "Auto-Created ACL",
+            "description": "Created because none with a token was found",
+            "owner_eve_id": "'"$EVE_CHARACTER_ID"'"
+          }
+        }' \
+    "$BASE_URL/api/map/acls?slug=$MAP_SLUG")
+
+  echo "New ACL creation response:"
+  echo "$NEW_ACL_RESPONSE" | jq
+
+  ACL_ID=$(echo "$NEW_ACL_RESPONSE" | jq -r '.data.id // empty')
+  ACL_TOKEN=$(echo "$NEW_ACL_RESPONSE" | jq -r '.data.api_key // empty')
+
+  if [ -z "$ACL_ID" ] || [ "$ACL_ID" = "null" ] || \
+     [ -z "$ACL_TOKEN" ] || [ "$ACL_TOKEN" = "null" ]; then
+    echo "Failed to create an ACL with a valid token. Exiting..."
+    exit 1
+  fi
+
+  echo "Newly created ACL_ID: $ACL_ID"
+  echo "Newly created ACL_TOKEN: $ACL_TOKEN"
+
+else
+  # Use the existing ACL's details
+  ACL_ID="$FIRST_ACL_ID"
+  ACL_TOKEN="$FIRST_ACL_TOKEN"
+fi
+
+#############################################
+# 5) Show the details of that ACL
+#############################################
+echo
+echo "=== 5) Show ACL Details ==="
+ACL_DETAILS=$(curl -s \
+  -H "Authorization: Bearer $ACL_TOKEN" \
+  "$BASE_URL/api/acls/$ACL_ID")
+
+echo "$ACL_DETAILS" | jq || {
+  echo "ACL details response is not valid JSON. Raw response:"
+  echo "$ACL_DETAILS"
+  exit 1
+}
+
+#############################################
+# 6) Create a new ACL member (viewer)
+#############################################
+echo
+echo "=== 6) Create a New ACL Member (viewer) ==="
+CREATE_MEMBER_RESP=$(curl -s -X POST \
+  -H "Authorization: Bearer $ACL_TOKEN" \
+  -H "Content-Type: application/json" \
+  -d '{
+        "member": {
+          "eve_character_id": "'"$EVE_CHARACTER_ID"'",
+          "role": "viewer"
+        }
+      }' \
+  "$BASE_URL/api/acls/$ACL_ID/members")
+
+echo "$CREATE_MEMBER_RESP" | jq || {
+  echo "Create member response is not valid JSON. Raw response:"
+  echo "$CREATE_MEMBER_RESP"
+  exit 1
+}
+
+#############################################
+# 7) Update the member's role (e.g., admin)
+#############################################
+echo
+echo "=== 7) Update Member Role to 'admin' ==="
+UPDATE_MEMBER_RESP=$(curl -s -X PUT \
+  -H "Authorization: Bearer $ACL_TOKEN" \
+  -H "Content-Type: application/json" \
+  -d '{
+        "member": {
+          "role": "admin"
+        }
+      }' \
+  "$BASE_URL/api/acls/$ACL_ID/members/$EVE_CHARACTER_ID")
+
+echo "$UPDATE_MEMBER_RESP" | jq || {
+  echo "Update member response is not valid JSON. Raw response:"
+  echo "$UPDATE_MEMBER_RESP"
+  exit 1
+}
+
+#############################################
+# 8) Delete the member
+#############################################
+echo
+echo "=== 8) Delete the Member ==="
+DELETE_MEMBER_RESP=$(curl -s -X DELETE \
+  -H "Authorization: Bearer $ACL_TOKEN" \
+  "$BASE_URL/api/acls/$ACL_ID/members/$EVE_CHARACTER_ID")
+
+echo "$DELETE_MEMBER_RESP" | jq || {
+  echo "Delete member response is not valid JSON. Raw response:"
+  echo "$DELETE_MEMBER_RESP"
+  exit 1
+}
+
+#############################################
+# 9) (Optional) Update the ACL itself
+#############################################
+echo
+echo "=== 9) Update the ACL’s name/description ==="
+UPDATED_ACL=$(curl -s -X PUT \
+  -H "Authorization: Bearer $ACL_TOKEN" \
+  -H "Content-Type: application/json" \
+  -d '{
+        "acl": {
+          "name": "Updated ACL Name (script)",
+          "description": "An updated description from test script"
+        }
+      }' \
+  "$BASE_URL/api/acls/$ACL_ID")
+
+echo "$UPDATED_ACL" | jq || {
+  echo "Update ACL response is not valid JSON. Raw response:"
+  echo "$UPDATED_ACL"
+  exit 1
+}
+
+echo
+echo "=== Done! ==="