chore: release version v1.52.0

CHANGELOG.md

@@ -2,6 +2,24 @@
 
 <!-- changelog -->
 
+## [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)
 
 

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/SystemSignatures/SystemSignaturesContent/SystemSignaturesContent.tsx

@@ -156,11 +156,14 @@ export function SystemSignaturesContent({
     [selectable, onSelect, setSelectedSignatures],
   );
 
-  const groupSettings = settings.filter(s => GROUPS_LIST.includes(s.key as SignatureGroup));
   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) {
@@ -168,18 +171,16 @@ export function SystemSignaturesContent({
       }
       if (sig.kind === COSMIC_SIGNATURE) {
         const showCosmic = settings.find(y => y.key === COSMIC_SIGNATURE)?.value;
-        if (!showCosmic) {
-          return false;
-        }
-        if (sig.group && groupSettings.find(y => y.key === sig.group)?.value === false) {
-          return false;
+        if (!showCosmic) return false;
+        if (sig.group) {
+          return enabledGroups.includes(sig.group);
         }
         return true;
       } else {
         return settings.find(y => y.key === sig.kind)?.value;
       }
     });
-  }, [signatures, settings, groupSettings, hideLinkedSignatures]);
+  }, [signatures, hideLinkedSignatures, settings, enabledGroups]);
 
   return (
     <div ref={tableRef} className="h-full">

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

@@ -55,6 +55,22 @@ export function schedulePendingAdditionForSig(
   );
 }
 
+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 }>>>,

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

@@ -1,45 +1,32 @@
-import { SystemSignature, SignatureKind, SignatureGroup } from '@/hooks/Mapper/types';
+import { SystemSignature } from '@/hooks/Mapper/types';
 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[] = [];
-  const mergedNewIds = new Set<string>();
 
   oldSignatures.forEach(oldSig => {
-    let newSig: SystemSignature | undefined;
-    if (
-      oldSig.kind === SignatureKind.CosmicSignature &&
-      oldSig.group === SignatureGroup.Wormhole &&
-      oldSig.eve_id.length !== 7
-    ) {
-      newSig = newSignatures.find(
-        s =>
-          s.kind === SignatureKind.CosmicSignature &&
-          s.group === SignatureGroup.Wormhole &&
-          s.eve_id.toUpperCase().startsWith(oldSig.eve_id.toUpperCase() + '-'),
-      );
-      if (newSig) {
-        const mergedSig: SystemSignature = { ...newSig, kind: oldSig.kind, name: oldSig.name };
-        added.push(mergedSig);
-        removed.push(oldSig);
-        mergedNewIds.add(newSig.eve_id);
-        return;
-      }
-    } else {
-      newSig = newSignatures.find(s => s.eve_id === oldSig.eve_id);
-    }
+    const newSig = newSignatures.find(s => s.eve_id === oldSig.eve_id);
     if (newSig) {
       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;
@@ -49,6 +36,7 @@ export const getActualSigs = (
         mergedSig.description = newSig.description;
         changed = true;
       }
+
       try {
         const oldInfo = JSON.parse(oldSig.custom_info || '{}');
         const newInfo = JSON.parse(newSig.custom_info || '{}');
@@ -66,10 +54,12 @@ export const getActualSigs = (
       } 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) {
@@ -84,9 +74,10 @@ export const getActualSigs = (
 
   const oldIds = new Set(oldSignatures.map(x => x.eve_id));
   newSignatures.forEach(s => {
-    if (!oldIds.has(s.eve_id) && !mergedNewIds.has(s.eve_id)) {
+    if (!oldIds.has(s.eve_id)) {
       added.push(s);
     }
   });
+
   return { added, updated, removed };
 };

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

@@ -1,10 +1,5 @@
-// types.ts
 import { ExtendedSystemSignature } from '../helpers/contentHelpers';
-import { OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers'; // or your function type
 
-/**
- * The aggregator’s props
- */
 export interface UseSystemSignaturesDataProps {
   systemId: string;
   settings: { key: string; value: boolean }[];
@@ -14,9 +9,6 @@ export interface UseSystemSignaturesDataProps {
   onLazyDeleteChange?: (value: boolean) => void;
 }
 
-/**
- * The minimal fetch logic
- */
 export interface UseFetchingParams {
   systemId: string;
   signaturesRef: React.MutableRefObject<ExtendedSystemSignature[]>;
@@ -24,17 +16,11 @@ export interface UseFetchingParams {
   localPendingDeletions: ExtendedSystemSignature[];
 }
 
-/**
- * For the deletion sub-hook
- */
 export interface UsePendingDeletionParams {
   systemId: string;
   setSignatures: React.Dispatch<React.SetStateAction<ExtendedSystemSignature[]>>;
 }
 
-/**
- * For the additions sub-hook
- */
 export interface UsePendingAdditionParams {
   setSignatures: React.Dispatch<React.SetStateAction<ExtendedSystemSignature[]>>;
 }

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

@@ -5,12 +5,20 @@ 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,
@@ -29,7 +37,6 @@ export function usePendingAdditions({ setSignatures }: UsePendingAdditionParams)
       clearTimeout(finalTimeoutId);
     });
     pendingAdditionMapRef.current = {};
-
     setSignatures(prev =>
       prev.map(x => (x.pendingAddition ? { ...x, pendingAddition: false, pendingUntil: undefined } : x)),
     );

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

@@ -19,14 +19,28 @@ export function usePendingDeletions({ systemId, setSignatures }: UsePendingDelet
       updated: ExtendedSystemSignature[],
     ) => {
       if (!removed.length) return;
-      const processedRemoved = removed.map(r => ({ ...r, pendingDeletion: true, pendingAddition: false }));
+      const now = Date.now();
+      const processedRemoved = removed.map(r => ({
+        ...r,
+        pendingDeletion: true,
+        pendingAddition: false,
+        pendingUntil: now + FINAL_DURATION_MS,
+      }));
       setLocalPendingDeletions(prev => [...prev, ...processedRemoved]);
 
-      const resp = await outCommand({
+      outCommand({
         type: OutCommand.updateSignatures,
         data: prepareUpdatePayload(systemId, added, updated, []),
       });
-      const updatedFromServer = resp.signatures as ExtendedSystemSignature[];
+
+      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,
@@ -41,18 +55,6 @@ export function usePendingDeletions({ systemId, setSignatures }: UsePendingDelet
         },
         FINAL_DURATION_MS,
       );
-
-      const now = Date.now();
-      const updatedWithRemoval = updatedFromServer.map(sig => {
-        const wasRemoved = processedRemoved.find(r => r.eve_id === sig.eve_id);
-        return wasRemoved ? { ...sig, pendingDeletion: true, pendingUntil: now + FINAL_DURATION_MS } : sig;
-      });
-
-      const extras = processedRemoved
-        .map(r => ({ ...r, pendingDeletion: true, pendingUntil: now + FINAL_DURATION_MS }))
-        .filter(r => !updatedWithRemoval.some(m => m.eve_id === r.eve_id));
-
-      setSignatures([...updatedWithRemoval, ...extras]);
     },
     [systemId, outCommand, setSignatures],
   );
@@ -60,7 +62,6 @@ export function usePendingDeletions({ systemId, setSignatures }: UsePendingDelet
   const clearPendingDeletions = useCallback(() => {
     Object.values(pendingDeletionMap).forEach(({ finalTimeoutId }) => clearTimeout(finalTimeoutId));
     setPendingDeletionMap({});
-
     setSignatures(prev =>
       prev.map(x => (x.pendingDeletion ? { ...x, pendingDeletion: false, pendingUntil: undefined } : x)),
     );
@@ -72,7 +73,6 @@ export function usePendingDeletions({ systemId, setSignatures }: UsePendingDelet
     setLocalPendingDeletions,
     pendingDeletionMap,
     setPendingDeletionMap,
-
     processRemovedSignatures,
     clearPendingDeletions,
   };

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

@@ -1,8 +1,9 @@
 import { useCallback } from 'react';
 import { SystemSignature } from '@/hooks/Mapper/types';
 import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
-import { ExtendedSystemSignature, prepareUpdatePayload, getActualSigs } from '../helpers';
+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({
@@ -29,11 +30,13 @@ export function useSignatureFetching({
       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(extended);
+
+    setSignatures(prev => mergeLocalPendingAdditions(extended, prev));
   }, [characters, systemId, localPendingDeletions, outCommand, setSignatures]);
 
   const handleUpdateSignatures = useCallback(
@@ -45,12 +48,24 @@ export function useSignatureFetching({
         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, signaturesRef, outCommand],
+    [systemId, outCommand, signaturesRef, setSignatures],
   );
 
   return {

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

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
 import useRefState from 'react-usestateref';
-import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useMapEventListener } from '@/hooks/Mapper/events';
 import { Commands, SystemSignature } from '@/hooks/Mapper/types';
 import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
@@ -9,13 +8,14 @@ import {
   KEEP_LAZY_DELETE_SETTING,
   LAZY_DELETE_SIGNATURES_SETTING,
 } from '@/hooks/Mapper/components/mapInterface/widgets';
-import { ExtendedSystemSignature, getActualSigs } from '../helpers';
+import { ExtendedSystemSignature, getActualSigs, mergeLocalPendingAdditions } from '../helpers';
 import { useSignatureFetching } from './useSignatureFetching';
 import { usePendingAdditions } from './usePendingAdditions';
 import { usePendingDeletions } from './usePendingDeletions';
 import { UseSystemSignaturesDataProps } from './types';
 import { TIME_ONE_DAY, TIME_ONE_WEEK } from '../constants';
 import { SignatureGroup } from '@/hooks/Mapper/types';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 
 export function useSystemSignaturesData({
   systemId,
@@ -25,9 +25,7 @@ export function useSystemSignaturesData({
   onLazyDeleteChange,
 }: UseSystemSignaturesDataProps) {
   const { outCommand } = useMapRootState();
-
   const [signatures, setSignatures, signaturesRef] = useRefState<ExtendedSystemSignature[]>([]);
-
   const [selectedSignatures, setSelectedSignatures] = useState<ExtendedSystemSignature[]>([]);
 
   const { localPendingDeletions, setLocalPendingDeletions, processRemovedSignatures, clearPendingDeletions } =
@@ -35,7 +33,6 @@ export function useSystemSignaturesData({
       systemId,
       setSignatures,
     });
-
   const { pendingUndoAdditions, setPendingUndoAdditions, processAddedSignatures, clearPendingAdditions } =
     usePendingAdditions({
       setSignatures,
@@ -67,6 +64,7 @@ export function useSystemSignaturesData({
       if (added.length > 0) {
         processAddedSignatures(added);
       }
+
       if (removed.length > 0) {
         await processRemovedSignatures(removed, added, updated);
       } else {
@@ -79,13 +77,22 @@ export function useSystemSignaturesData({
             removed: [],
           },
         });
-        const finalSigs = (resp.signatures ?? []) as SystemSignature[];
-        setSignatures(finalSigs.map(x => ({ ...x })));
+        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) {
-        onLazyDeleteChange?.(false);
+        setTimeout(() => {
+          onLazyDeleteChange?.(false);
+        }, 0);
       }
     },
     [
@@ -104,6 +111,7 @@ export function useSystemSignaturesData({
     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]);
@@ -115,14 +123,8 @@ export function useSystemSignaturesData({
   const undoPending = useCallback(() => {
     clearPendingDeletions();
     clearPendingAdditions();
-
     setSignatures(prev =>
-      prev.map(x => {
-        if (x.pendingDeletion) {
-          return { ...x, pendingDeletion: false, pendingUntil: undefined };
-        }
-        return x;
-      }),
+      prev.map(x => (x.pendingDeletion ? { ...x, pendingDeletion: false, pendingUntil: undefined } : x)),
     );
 
     if (pendingUndoAdditions.length) {
@@ -140,7 +142,6 @@ export function useSystemSignaturesData({
       setSignatures(prev => prev.filter(x => !pendingUndoAdditions.some(u => u.eve_id === x.eve_id)));
       setPendingUndoAdditions([]);
     }
-
     setLocalPendingDeletions([]);
   }, [
     clearPendingDeletions,

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[];

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/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_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.51.2"
+  @version "1.52.0"
 
   def project do
     [