Add hover tooltips for local counter and kills bookmark (#130)

* feat: add local pilots and kills display on hover

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

@@ -1,71 +1,25 @@
-import { useCallback, useMemo, useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
-import { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
 import clsx from 'clsx';
-import classes from './LocalCharacters.module.scss';
-import { CharacterTypeRaw, WithIsOwnCharacter } from '@/hooks/Mapper/types';
-import { CharacterCard, LayoutEventBlocker, WdCheckbox } from '@/hooks/Mapper/components/ui-kit';
+import { LayoutEventBlocker, WdCheckbox } from '@/hooks/Mapper/components/ui-kit';
 import { sortCharacters } from '@/hooks/Mapper/components/mapInterface/helpers/sortCharacters.ts';
-import useLocalStorageState from 'use-local-storage-state';
 import { useMapCheckPermissions, useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
 import { UserPermission } from '@/hooks/Mapper/types/permissions.ts';
 import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
 import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
-
-type CharItemProps = {
-  compact: boolean;
-} & CharacterTypeRaw &
-  WithIsOwnCharacter;
-
-const useItemTemplate = () => {
-  const {
-    data: { presentCharacters },
-  } = useMapRootState();
-
-  return useCallback(
-    (char: CharItemProps, options: VirtualScrollerTemplateOptions) => {
-      return (
-        <div
-          className={clsx(classes.CharacterRow, 'w-full box-border', {
-            'surface-hover': options.odd,
-            ['border-b border-gray-600 border-opacity-20']: !options.last,
-            ['bg-green-500 hover:bg-green-700 transition duration-300 bg-opacity-10 hover:bg-opacity-10']: char.online,
-          })}
-          style={{ height: options.props.itemSize + 'px' }}
-        >
-          <CharacterCard showShipName {...char} />
-        </div>
-      );
-    },
-    // eslint-disable-next-line
-    [presentCharacters],
-  );
-};
-
-type WindowLocalSettingsType = {
-  compact: boolean;
-  showOffline: boolean;
-  version: number;
-};
-
-const STORED_DEFAULT_VALUES: WindowLocalSettingsType = {
-  compact: true,
-  showOffline: false,
-  version: 0,
-};
+import { LocalCharactersList } from './components/LocalCharactersList';
+import { useLocalCharactersItemTemplate } from './hooks/useLocalCharacters';
+import { useLocalCharacterWidgetSettings } from './hooks/useLocalWidgetSettings';
 
 export const LocalCharacters = () => {
   const {
-    data: { characters, userCharacters, selectedSystems, presentCharacters },
+    data: { characters, userCharacters, selectedSystems },
   } = useMapRootState();
 
-  const [settings, setSettings] = useLocalStorageState<WindowLocalSettingsType>('window:local:settings', {
-    defaultValue: STORED_DEFAULT_VALUES,
-  });
+  const [settings, setSettings] = useLocalCharacterWidgetSettings();
 
   const [systemId] = selectedSystems;
-
   const restrictOfflineShowing = useMapGetOption('restrict_offline_showing');
   const isAdminOrManager = useMapCheckPermissions([UserPermission.MANAGE_MAP]);
 
@@ -74,21 +28,31 @@ export const LocalCharacters = () => {
     [isAdminOrManager, restrictOfflineShowing],
   );
 
-  const itemTemplate = useItemTemplate();
-
   const sorted = useMemo(() => {
-    const sorted = characters
+    const filtered = characters
       .filter(x => x.location?.solar_system_id?.toString() === systemId)
-      .map(x => ({ ...x, isOwn: userCharacters.includes(x.eve_id), compact: settings.compact }))
+      .map(x => ({
+        ...x,
+        isOwn: userCharacters.includes(x.eve_id),
+        compact: settings.compact,
+        showShipName: settings.showShipName,
+      }))
       .sort(sortCharacters);
 
     if (!showOffline || !settings.showOffline) {
-      return sorted.filter(c => c.online);
+      return filtered.filter(c => c.online);
     }
 
-    return sorted;
-    // eslint-disable-next-line
-  }, [showOffline, characters, settings.showOffline, settings.compact, systemId, userCharacters, presentCharacters]);
+    return filtered;
+  }, [
+    characters,
+    systemId,
+    userCharacters,
+    settings.compact,
+    settings.showOffline,
+    settings.showShipName,
+    showOffline,
+  ]);
 
   const isNobodyHere = sorted.length === 0;
   const isNotSelectedSystem = selectedSystems.length !== 1;
@@ -97,6 +61,8 @@ export const LocalCharacters = () => {
   const ref = useRef<HTMLDivElement>(null);
   const compact = useMaxWidth(ref, 145);
 
+  const itemTemplate = useLocalCharactersItemTemplate(settings.showShipName);
+
   return (
     <Widget
       label={
@@ -111,7 +77,20 @@ export const LocalCharacters = () => {
                   label={compact ? '' : 'Show offline'}
                   value={settings.showOffline}
                   classNameLabel="text-stone-400 hover:text-stone-200 transition duration-300"
-                  onChange={() => setSettings(() => ({ ...settings, showOffline: !settings.showOffline }))}
+                  onChange={() => setSettings(prev => ({ ...prev, showOffline: !prev.showOffline }))}
+                />
+              </WdTooltipWrapper>
+            )}
+
+            {settings.compact && (
+              <WdTooltipWrapper content="Show ship name in compact rows">
+                <WdCheckbox
+                  size="xs"
+                  labelSide="left"
+                  label={compact ? '' : 'Show ship name'}
+                  value={settings.showShipName}
+                  classNameLabel="text-stone-400 hover:text-stone-200 transition duration-300"
+                  onChange={() => setSettings(prev => ({ ...prev, showShipName: !prev.showShipName }))}
                 />
               </WdTooltipWrapper>
             )}
@@ -121,8 +100,8 @@ export const LocalCharacters = () => {
                 ['hero-bars-2']: settings.compact,
                 ['hero-bars-3']: !settings.compact,
               })}
-              onClick={() => setSettings(() => ({ ...settings, compact: !settings.compact }))}
-            ></span>
+              onClick={() => setSettings(prev => ({ ...prev, compact: !prev.compact }))}
+            />
           </LayoutEventBlocker>
         </div>
       }
@@ -140,15 +119,11 @@ export const LocalCharacters = () => {
       )}
 
       {showList && (
-        <VirtualScroller
+        <LocalCharactersList
           items={sorted}
           itemSize={settings.compact ? 26 : 41}
           itemTemplate={itemTemplate}
-          className={clsx(
-            classes.VirtualScroller,
-            'w-full h-full overflow-x-hidden overflow-y-auto custom-scrollbar select-none',
-          )}
-          autoSize={false}
+          containerClassName="w-full h-full overflow-x-hidden overflow-y-auto"
         />
       )}
     </Widget>

assets/js/hooks/Mapper/components/mapInterface/widgets/LocalCharacters/components/LocalCharacterList.module.scss

@@ -0,0 +1,4 @@
+// .VirtualScroller {
+//     height: 100% !important;
+//   }
+  

assets/js/hooks/Mapper/components/mapInterface/widgets/LocalCharacters/components/LocalCharactersList.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
+import clsx from 'clsx';
+import { CharItemProps } from './types';
+
+type LocalCharactersListProps = {
+  items: Array<CharItemProps>;
+
+  itemSize: number;
+
+  itemTemplate: (char: CharItemProps, options: VirtualScrollerTemplateOptions) => React.ReactNode;
+
+  containerClassName?: string;
+};
+
+export function LocalCharactersList({ items, itemSize, itemTemplate, containerClassName }: LocalCharactersListProps) {
+  return (
+    <VirtualScroller
+      items={items}
+      itemSize={itemSize}
+      orientation="vertical"
+      className={clsx('w-full h-full', containerClassName)}
+      autoSize={false}
+      itemTemplate={itemTemplate}
+    />
+  );
+}

assets/js/hooks/Mapper/components/mapInterface/widgets/LocalCharacters/components/index.ts

@@ -0,0 +1,2 @@
+export * from './LocalCharactersList';
+export * from './types';

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

@@ -0,0 +1,6 @@
+import { CharacterTypeRaw, WithIsOwnCharacter } from '@/hooks/Mapper/types';
+
+export type CharItemProps = {
+  compact: boolean;
+} & CharacterTypeRaw &
+  WithIsOwnCharacter;

assets/js/hooks/Mapper/components/mapInterface/widgets/LocalCharacters/hooks/useLocalCharacters.tsx

@@ -0,0 +1,33 @@
+import { useCallback } from 'react';
+import { VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
+import clsx from 'clsx';
+import classes from './useLocalCharacters.module.scss';
+import { CharacterCard } from '@/hooks/Mapper/components/ui-kit';
+import { CharItemProps } from '../components';
+
+export function useLocalCharactersItemTemplate(showShipName: boolean) {
+  return useCallback(
+    (char: CharItemProps, options: VirtualScrollerTemplateOptions) => {
+      return (
+        <div
+          className={clsx(classes.CharacterRow, 'box-border flex items-center', {
+            'surface-hover': options.odd,
+            'border-b border-gray-600 border-opacity-20': !options.last,
+            'bg-green-500 hover:bg-green-700 transition duration-300 bg-opacity-10 hover:bg-opacity-10': char.online,
+          })}
+          style={{
+            height: `${options.props.itemSize}px`,
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            minWidth: 0,
+            width: '100%',
+          }}
+        >
+          <CharacterCard showShipName={showShipName} {...char} />
+        </div>
+      );
+    },
+    [showShipName],
+  );
+}

assets/js/hooks/Mapper/components/mapInterface/widgets/LocalCharacters/hooks/useLocalWidgetSettings.ts

@@ -0,0 +1,21 @@
+import useLocalStorageState from 'use-local-storage-state';
+
+export interface LocalCharacterWidgetSettings {
+  compact: boolean;
+  showOffline: boolean;
+  version: number;
+  showShipName: boolean;
+}
+
+export const LOCAL_CHARACTER_WIDGET_DEFAULT: LocalCharacterWidgetSettings = {
+  compact: true,
+  showOffline: false,
+  version: 0,
+  showShipName: false,
+};
+
+export function useLocalCharacterWidgetSettings() {
+  return useLocalStorageState<LocalCharacterWidgetSettings>('kills:widget:settings', {
+    defaultValue: LOCAL_CHARACTER_WIDGET_DEFAULT,
+  });
+}