System Kills cleanup (#166)

* fix: styling and count of kills tooltip

assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemKillsCounter.tsx

@@ -11,35 +11,28 @@ type KillsBookmarkTooltipProps = {
   systemId: string;
   className?: string;
   size?: TooltipSize;
-  timeRange?: number;
 } & WithChildren &
   WithClassName;
 
-export const KillsCounter = ({
-  killsCount,
-  systemId,
-  className,
-  children,
-  size = 'xs',
-  timeRange = 1,
-}: KillsBookmarkTooltipProps) => {
+export const KillsCounter = ({ killsCount, systemId, className, children, size = 'xs' }: KillsBookmarkTooltipProps) => {
   const { isLoading, kills: detailedKills, systemNameMap } = useKillsCounter({ realSystemId: systemId });
 
   if (!killsCount || detailedKills.length === 0 || !systemId || isLoading) return null;
 
   const tooltipContent = (
+    <div style={{ width: '100%', minWidth: '300px', overflow: 'hidden' }}>
       <SystemKillsContent
         kills={detailedKills}
         systemNameMap={systemNameMap}
         compact={true}
         onlyOneSystem={true}
         autoSize={true}
-      timeRange={timeRange}
+        limit={killsCount}
       />
+    </div>
   );
 
   return (
-    // @ts-ignore
     <WdTooltipWrapper content={tooltipContent} className={className} size={size} interactive={true}>
       {children}
     </WdTooltipWrapper>

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

@@ -91,10 +91,8 @@ export const SystemKills: React.FC = React.memo(() => {
           ) : (
             <div className="w-full h-full" style={{ height: '100%' }}>
               <SystemKillsContent
-                key={settings.compact ? 'compact' : 'normal'}
                 kills={filteredKills}
                 systemNameMap={systemNameMap}
-                compact={settings.compact}
                 onlyOneSystem={!visible}
                 timeRange={settings.timeRange}
               />

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKillsContent/SystemKillsContent.module.scss

@@ -1,18 +1,12 @@
-.TableRowCompact {
-  height: 8px;
-  max-height: 8px;
-  font-size: 12px !important;
-  line-height: 8px;
+.wrapper {
+  overflow-x: hidden;
+  box-sizing: border-box;
 }
 
-.Table {
-  font-size: 12px;
-  border-collapse: collapse;
-}
-
-.Tooltip {
-  white-space: pre-line;
-  line-height: 1.2rem;
+.scrollerContent {
+  width: 100%;
+  box-sizing: border-box;
+  overflow-x: hidden;
 }
 
 .VirtualScroller {

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

@@ -2,57 +2,52 @@ import React, { useMemo, useRef, useEffect, useState } from 'react';
 import clsx from 'clsx';
 import { DetailedKill } from '@/hooks/Mapper/types/kills';
 import { VirtualScroller } from 'primereact/virtualscroller';
-import { useSystemKillsItemTemplate } from '../hooks/useSystemKillsTemplate';
+import { useSystemKillsItemTemplate } from '../hooks/useSystemKillsItemTemplate';
+import classes from './SystemKillsContent.module.scss';
 
 export interface SystemKillsContentProps {
   kills: DetailedKill[];
   systemNameMap: Record<string, string>;
-  compact?: boolean;
   onlyOneSystem?: boolean;
   autoSize?: boolean;
-  timeRange: number;
+  timeRange?: number;
+  limit?: number;
 }
 
 export const SystemKillsContent: React.FC<SystemKillsContentProps> = ({
   kills,
   systemNameMap,
-  compact = false,
   onlyOneSystem = false,
   autoSize = false,
-  timeRange = 1,
+  timeRange = 4,
+  limit,
 }) => {
   const processedKills = useMemo(() => {
-    const validKills = kills.filter(kill => kill.kill_time);
-
-    const sortedKills = validKills.sort((a, b) => {
-      const timeA = a.kill_time ? new Date(a.kill_time).getTime() : 0;
-      const timeB = b.kill_time ? new Date(b.kill_time).getTime() : 0;
-      return timeB - timeA;
-    });
+    const sortedKills = kills
+      .filter(k => k.kill_time)
+      .sort((a, b) => new Date(b.kill_time!).getTime() - new Date(a.kill_time!).getTime());
 
+    if (limit !== undefined) {
+      return sortedKills.slice(0, limit);
+    } else {
       const now = Date.now();
       const cutoff = now - timeRange * 60 * 60 * 1000;
-    return sortedKills.filter(kill => {
-      if (!kill.kill_time) return false;
-      const killTime = new Date(kill.kill_time).getTime();
-      return killTime >= cutoff;
-    });
-  }, [kills, timeRange]);
+      return sortedKills.filter(k => new Date(k.kill_time!).getTime() >= cutoff);
+    }
+  }, [kills, timeRange, limit]);
 
-  const itemSize = compact ? 35 : 50;
-  const computedHeight = autoSize ? Math.max(processedKills.length, 1) * itemSize + 5 : undefined;
+  const itemSize = 35;
+  const computedHeight = autoSize ? Math.max(processedKills.length, 1) * itemSize : undefined;
 
   const containerRef = useRef<HTMLDivElement>(null);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const scrollerRef = useRef<any>(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;
+        const newHeight = containerRef.current?.clientHeight || 0;
         setContainerHeight(newHeight);
-        scrollerRef.current?.refresh?.();
       };
 
       measure();
@@ -67,18 +62,27 @@ export const SystemKillsContent: React.FC<SystemKillsContentProps> = ({
     }
   }, [autoSize]);
 
-  const itemTemplate = useSystemKillsItemTemplate(systemNameMap, compact, onlyOneSystem);
+  const itemTemplate = useSystemKillsItemTemplate(systemNameMap, onlyOneSystem);
+  const scrollerHeight = autoSize ? `${computedHeight}px` : containerHeight ? `${containerHeight}px` : '100%';
 
   return (
-    <div ref={autoSize ? undefined : containerRef} className="w-full h-full">
+    <div ref={autoSize ? undefined : containerRef} className={clsx('w-full h-full', classes.wrapper)}>
       <VirtualScroller
         ref={autoSize ? undefined : scrollerRef}
         items={processedKills}
         itemSize={itemSize}
         itemTemplate={itemTemplate}
         autoSize={autoSize}
-        style={{ height: autoSize ? `${computedHeight}px` : containerHeight ? `${containerHeight}px` : '100%' }}
-        className={clsx('w-full h-full overflow-x-hidden overflow-y-auto custom-scrollbar select-none')}
+        scrollWidth="100%"
+        style={{ height: scrollerHeight }}
+        className={clsx('w-full h-full custom-scrollbar select-none overflow-x-hidden overflow-y-auto', {
+          [classes.VirtualScroller]: !autoSize,
+        })}
+        pt={{
+          content: {
+            className: classes.scrollerContent,
+          },
+        }}
       />
     </div>
   );

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

@@ -1,214 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import { DetailedKill } from '@/hooks/Mapper/types/kills';
-import {
-  formatISK,
-  formatTimeMixed,
-  zkillLink,
-  getAttackerSubscript,
-  buildVictimImageUrls,
-  buildAttackerImageUrls,
-  getPrimaryLogoAndTooltip,
-  getAttackerPrimaryImageAndTooltip,
-} from '../helpers';
-import { VictimRowSubInfo } from './VictimRowSubInfo';
-import { WdTooltipWrapper } from '../../../../ui-kit/WdTooltipWrapper';
-import classes from './SystemKillRow.module.scss';
-import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
-
-export interface FullKillRowProps {
-  killDetails: DetailedKill;
-  systemName: string;
-  onlyOneSystem: boolean;
-}
-
-export const FullKillRow: React.FC<FullKillRowProps> = ({ killDetails, systemName, onlyOneSystem }) => {
-  const {
-    killmail_id = 0,
-    // Victim data
-    victim_char_name = '',
-    victim_alliance_ticker = '',
-    victim_corp_ticker = '',
-    victim_ship_name = '',
-    victim_char_id = 0,
-    victim_corp_id = 0,
-    victim_alliance_id = 0,
-    victim_ship_type_id = 0,
-    victim_corp_name = '',
-    victim_alliance_name = '',
-    // Attacker data
-    final_blow_char_id = 0,
-    final_blow_char_name = '',
-    final_blow_alliance_ticker = '',
-    final_blow_corp_ticker = '',
-    final_blow_corp_name = '',
-    final_blow_alliance_name = '',
-    final_blow_corp_id = 0,
-    final_blow_alliance_id = 0,
-    final_blow_ship_name = '',
-    final_blow_ship_type_id = 0,
-    total_value = 0,
-    kill_time = '',
-  } = killDetails || {};
-
-  const attackerIsNpc = final_blow_char_id === 0;
-  const victimAffiliation = victim_alliance_ticker || victim_corp_ticker || null;
-  const attackerAffiliation = attackerIsNpc ? '' : final_blow_alliance_ticker || final_blow_corp_ticker || '';
-
-  const killValueFormatted = total_value != null && total_value > 0 ? `${formatISK(total_value)} ISK` : null;
-  const killTimeAgo = kill_time ? formatTimeMixed(kill_time) : '0h ago';
-
-  // Build victim images
-  const { victimPortraitUrl, victimCorpLogoUrl, victimAllianceLogoUrl, victimShipUrl } = buildVictimImageUrls({
-    victim_char_id,
-    victim_ship_type_id,
-    victim_corp_id,
-    victim_alliance_id,
-  });
-
-  // Build attacker images
-  const { attackerPortraitUrl, attackerCorpLogoUrl, attackerAllianceLogoUrl } = buildAttackerImageUrls({
-    final_blow_char_id,
-    final_blow_corp_id,
-    final_blow_alliance_id,
-  });
-
-  // Primary image for victim
-  const { url: victimPrimaryImageUrl, tooltip: victimPrimaryTooltip } = getPrimaryLogoAndTooltip(
-    victimAllianceLogoUrl,
-    victimCorpLogoUrl,
-    victim_alliance_name,
-    victim_corp_name,
-    'Victim',
-  );
-
-  // Primary image for attacker
-  const { url: attackerPrimaryImageUrl, tooltip: attackerPrimaryTooltip } = getAttackerPrimaryImageAndTooltip(
-    attackerIsNpc,
-    attackerAllianceLogoUrl,
-    attackerCorpLogoUrl,
-    final_blow_alliance_name,
-    final_blow_corp_name,
-    final_blow_ship_type_id,
-  );
-
-  const attackerSubscript = getAttackerSubscript(killDetails);
-
-  return (
-    <div className={clsx(classes.killRowContainer, 'w-full text-sm py-1 px-2', 'flex flex-col sm:flex-row')}>
-      <div className="w-full flex flex-col sm:flex-row items-start gap-2">
-        {/* Victim Section */}
-        <div className="flex items-start gap-1 min-w-0">
-          {victimShipUrl && (
-            <div className="relative shrink-0 w-12 h-12 sm:w-14 sm:h-14 overflow-hidden">
-              <a
-                href={zkillLink('kill', killmail_id)}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="block w-full h-full"
-              >
-                <img
-                  src={victimShipUrl}
-                  alt="VictimShip"
-                  className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
-                />
-              </a>
-            </div>
-          )}
-          {victimPrimaryImageUrl && (
-            <WdTooltipWrapper content={victimPrimaryTooltip} position={TooltipPosition.top}>
-              <div className="relative shrink-0 w-12 h-12 sm:w-14 sm:h-14 overflow-hidden">
-                <a
-                  href={zkillLink('kill', killmail_id)}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="block w-full h-full"
-                >
-                  <img
-                    src={victimPrimaryImageUrl}
-                    alt="VictimPrimaryLogo"
-                    className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
-                  />
-                </a>
-              </div>
-            </WdTooltipWrapper>
-          )}
-          <VictimRowSubInfo
-            victimCharName={victim_char_name}
-            victimCharacterId={victim_char_id}
-            victimPortraitUrl={victimPortraitUrl}
-          />
-          <div className="flex flex-col flex-1 text-stone-200 leading-4 min-w-0 overflow-hidden">
-            <div className="truncate font-semibold">
-              {victim_char_name}
-              {victimAffiliation && <span className="ml-1 text-stone-400">/ {victimAffiliation}</span>}
-            </div>
-            <div className="truncate text-stone-300">
-              {victim_ship_name}
-              {killValueFormatted && (
-                <>
-                  <span className="ml-1 text-stone-400">/</span>
-                  <span className="ml-1 text-green-400">{killValueFormatted}</span>
-                </>
-              )}
-            </div>
-            <div className="truncate text-stone-400">{!onlyOneSystem && systemName && <span>{systemName}</span>}</div>
-          </div>
-        </div>
-        <div className="flex items-start gap-1 min-w-0 sm:ml-auto">
-          <div className="flex flex-col flex-1 items-end leading-4 min-w-0 overflow-hidden text-right">
-            {!attackerIsNpc && (
-              <div className="truncate font-semibold">
-                {final_blow_char_name}
-                {attackerAffiliation && <span className="ml-1 text-stone-400">/ {attackerAffiliation}</span>}
-              </div>
-            )}
-            {!attackerIsNpc && final_blow_ship_name && (
-              <div className="truncate text-stone-300">{final_blow_ship_name}</div>
-            )}
-            <div className="truncate text-red-400">{killTimeAgo}</div>
-          </div>
-          {!attackerIsNpc && attackerPortraitUrl && final_blow_char_id &&final_blow_char_id > 0 && (
-            <div className="relative shrink-0 w-12 h-12 sm:w-14 sm:h-14 overflow-hidden">
-              <a
-                href={zkillLink('character', final_blow_char_id)}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="block w-full h-full"
-              >
-                <img
-                  src={attackerPortraitUrl}
-                  alt="AttackerPortrait"
-                  className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
-                />
-              </a>
-            </div>
-          )}
-          {attackerPrimaryImageUrl && (
-            <WdTooltipWrapper content={attackerPrimaryTooltip} position={TooltipPosition.top}>
-              <div className="relative shrink-0 w-12 h-12 sm:w-14 sm:h-14 overflow-hidden">
-                <a
-                  href={zkillLink('kill', killmail_id)}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="block w-full h-full"
-                >
-                  <img
-                    src={attackerPrimaryImageUrl}
-                    alt={attackerIsNpc ? 'NpcShip' : 'AttackerPrimaryLogo'}
-                    className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
-                  />
-                  {attackerSubscript && (
-                    <span className={clsx(attackerSubscript.cssClass, classes.attackerCountLabel)}>
-                      {attackerSubscript.label}
-                    </span>
-                  )}
-                </a>
-              </div>
-            </WdTooltipWrapper>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};

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

@@ -5,7 +5,6 @@ import clsx from 'clsx';
 
 export function KillItemTemplate(
   systemNameMap: Record<string, string>,
-  compact: boolean,
   onlyOneSystem: boolean,
   kill: DetailedKill,
   options: VirtualScrollerTemplateOptions,
@@ -15,7 +14,7 @@ export function KillItemTemplate(
 
   return (
     <div style={{ height: `${options.props.itemSize}px` }} className={clsx({ 'bg-gray-900': options.odd })}>
-      <KillRow killDetails={kill} systemName={systemName} isCompact={compact} onlyOneSystem={onlyOneSystem} />
+      <KillRow killDetails={kill} systemName={systemName} onlyOneSystem={onlyOneSystem} />
     </div>
   );
 }

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

@@ -11,8 +11,8 @@ import {
   getPrimaryLogoAndTooltip,
   getAttackerPrimaryImageAndTooltip,
 } from '../helpers';
-import { WdTooltipWrapper } from '../../../../ui-kit/WdTooltipWrapper';
-import classes from './SystemKillRow.module.scss';
+import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
+import classes from './KillRowDetail.module.scss';
 import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
 
 export interface CompactKillRowProps {
@@ -21,10 +21,10 @@ export interface CompactKillRowProps {
   onlyOneSystem: boolean;
 }
 
-export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, systemName, onlyOneSystem }) => {
+export const KillRowDetail: React.FC<CompactKillRowProps> = ({ killDetails, systemName, onlyOneSystem }) => {
   const {
     killmail_id = 0,
-    // Victim
+    // Victim data
     victim_char_name = 'Unknown Pilot',
     victim_alliance_ticker = '',
     victim_corp_ticker = '',
@@ -35,7 +35,7 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, sys
     victim_corp_id = 0,
     victim_alliance_id = 0,
     victim_ship_type_id = 0,
-    // Attacker
+    // Attacker data
     final_blow_char_id = 0,
     final_blow_char_name = '',
     final_blow_alliance_ticker = '',
@@ -51,11 +51,12 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, sys
 
   const attackerIsNpc = final_blow_char_id === 0;
 
+  // Define victim affiliation ticker.
   const victimAffiliationTicker = victim_alliance_ticker || victim_corp_ticker || 'No Ticker';
+
   const killValueFormatted = total_value != null && total_value > 0 ? `${formatISK(total_value)} ISK` : null;
-  const attackerName = attackerIsNpc ? '' : final_blow_char_name;
-  const attackerTicker = attackerIsNpc ? '' : final_blow_alliance_ticker || final_blow_corp_ticker || '';
   const killTimeAgo = kill_time ? formatTimeMixed(kill_time) : '0h ago';
+
   const attackerSubscript = getAttackerSubscript(killDetails);
 
   const { victimCorpLogoUrl, victimAllianceLogoUrl, victimShipUrl } = buildVictimImageUrls({
@@ -88,6 +89,12 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, sys
     final_blow_ship_type_id,
   );
 
+  // Define attackerTicker to use the alliance ticker if available, otherwise the corp ticker.
+  const attackerTicker = attackerIsNpc ? '' : final_blow_alliance_ticker || final_blow_corp_ticker || '';
+
+  // For the attacker image link: if the attacker is not an NPC, link to the character page; otherwise, link to the kill page.
+  const attackerLink = attackerIsNpc ? zkillLink('kill', killmail_id) : zkillLink('character', final_blow_char_id);
+
   return (
     <div
       className={clsx(
@@ -95,6 +102,7 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, sys
         'text-xs whitespace-nowrap overflow-hidden leading-none',
       )}
     >
+      {/* Victim Section */}
       <div className="flex items-center gap-1">
         {victimShipUrl && (
           <div className="relative shrink-0 w-8 h-8 overflow-hidden">
@@ -146,10 +154,10 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, sys
       </div>
       <div className="flex items-center ml-auto gap-2">
         <div className="flex flex-col items-end flex-1 min-w-0 overflow-hidden text-right leading-[1rem]">
-          {!attackerIsNpc && (attackerName || attackerTicker) && (
+          {!attackerIsNpc && (final_blow_char_name || attackerTicker) && (
             <div className="truncate text-stone-200">
-              {attackerName}
-              {attackerTicker && <span className="ml-1 text-stone-400">/ {attackerTicker}</span>}
+              {final_blow_char_name}
+              {!attackerIsNpc && attackerTicker && <span className="ml-1 text-stone-400">/ {attackerTicker}</span>}
             </div>
           )}
           <div className="truncate text-stone-400">
@@ -165,14 +173,14 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, sys
         {attackerPrimaryImageUrl && (
           <WdTooltipWrapper content={attackerPrimaryTooltip} position={TooltipPosition.top}>
             <a
-              href={zkillLink('kill', killmail_id)}
+              href={attackerLink}
               target="_blank"
               rel="noopener noreferrer"
               className="relative block shrink-0 w-8 h-8 overflow-hidden"
             >
               <img
                 src={attackerPrimaryImageUrl}
-                alt={attackerIsNpc ? 'NpcShip' : 'AttackerPrimaryLogo'}
+                alt={attackerIsNpc ? 'NPC Ship' : 'Attacker Primary Logo'}
                 className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
               />
               {attackerSubscript && (

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

@@ -1,25 +1,15 @@
 import React from 'react';
 import { DetailedKill } from '@/hooks/Mapper/types/kills';
-import { CompactKillRow } from './CompactKillRow';
-import { FullKillRow } from './FullKillRow';
+import { KillRowDetail } from './KillRowDetail.tsx';
 
 export interface KillRowProps {
   killDetails: DetailedKill;
   systemName: string;
-  isCompact?: boolean;
   onlyOneSystem?: boolean;
 }
 
-const KillRowComponent: React.FC<KillRowProps> = ({
-  killDetails,
-  systemName,
-  isCompact = false,
-  onlyOneSystem = false,
-}) => {
-  if (isCompact) {
-    return <CompactKillRow killDetails={killDetails} systemName={systemName} onlyOneSystem={onlyOneSystem} />;
-  }
-  return <FullKillRow killDetails={killDetails} systemName={systemName} onlyOneSystem={onlyOneSystem} />;
+const KillRowComponent: React.FC<KillRowProps> = ({ killDetails, systemName, onlyOneSystem = false }) => {
+  return <KillRowDetail killDetails={killDetails} systemName={systemName} onlyOneSystem={onlyOneSystem} />;
 };
 
 export const KillRow = React.memo(KillRowComponent);

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

@@ -1,14 +1,14 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Dialog } from 'primereact/dialog';
 import { Button } from 'primereact/button';
-import { InputSwitch } from 'primereact/inputswitch';
-import { WdImgButton, SystemView, TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
+import { WdImgButton } from '@/hooks/Mapper/components/ui-kit';
 import { PrimeIcons } from 'primereact/api';
 import { useKillsWidgetSettings } from '../hooks/useKillsWidgetSettings';
 import {
   AddSystemDialog,
   SearchOnSubmitCallback,
 } from '@/hooks/Mapper/components/mapInterface/components/AddSystemDialog';
+import { SystemView, TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
 
 interface KillsSettingsDialogProps {
   visible: boolean;
@@ -18,7 +18,6 @@ interface KillsSettingsDialogProps {
 export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visible, setVisible }) => {
   const [globalSettings, setGlobalSettings] = useKillsWidgetSettings();
   const localRef = useRef({
-    compact: globalSettings.compact,
     showAll: globalSettings.showAll,
     whOnly: globalSettings.whOnly,
     excludedSystems: globalSettings.excludedSystems || [],
@@ -31,7 +30,6 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
   useEffect(() => {
     if (visible) {
       localRef.current = {
-        compact: globalSettings.compact,
         showAll: globalSettings.showAll,
         whOnly: globalSettings.whOnly,
         excludedSystems: globalSettings.excludedSystems || [],
@@ -41,14 +39,6 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
     }
   }, [visible, globalSettings]);
 
-  const handleCompactChange = useCallback((checked: boolean) => {
-    localRef.current = {
-      ...localRef.current,
-      compact: checked,
-    };
-    forceRender(n => n + 1);
-  }, []);
-
   const handleWHChange = useCallback((checked: boolean) => {
     localRef.current = {
       ...localRef.current,
@@ -57,8 +47,7 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
     forceRender(n => n + 1);
   }, []);
 
-  // Updated handler to set time range as a number: 1 or 24
-  const handleTimeRangeChange = useCallback((newTimeRange: 1 | 24) => {
+  const handleTimeRangeChange = useCallback((newTimeRange: number) => {
     localRef.current = {
       ...localRef.current,
       timeRange: newTimeRange,
@@ -99,22 +88,11 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
 
   const localData = localRef.current;
   const excluded = localData.excludedSystems || [];
+  const timeRangeOptions = [4, 12, 24];
 
   return (
     <Dialog header="Kills Settings" visible={visible} style={{ width: '440px' }} draggable={false} onHide={handleHide}>
       <div className="flex flex-col gap-3 p-2.5">
-        <div className="flex items-center gap-2">
-          <input
-            type="checkbox"
-            id="kills-compact-mode"
-            checked={localData.compact}
-            onChange={e => handleCompactChange(e.target.checked)}
-          />
-          <label htmlFor="kills-compact-mode" className="cursor-pointer">
-            Use compact mode
-          </label>
-        </div>
-
         <div className="flex items-center gap-2">
           <input
             type="checkbox"
@@ -127,13 +105,25 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
           </label>
         </div>
 
-        {/* Time Range Toggle using InputSwitch */}
-        <div className="flex items-center gap-2">
+        <div className="flex flex-col gap-1">
           <span className="text-sm">Time Range:</span>
-          <InputSwitch checked={localData.timeRange === 24} onChange={e => handleTimeRangeChange(e.value ? 24 : 1)} />
-          <span className="text-sm">{localData.timeRange === 24 ? '24 Hours' : '1 Hour'}</span>
+          <div className="flex flex-wrap gap-2">
+            {timeRangeOptions.map(option => (
+              <label key={option} className="cursor-pointer flex items-center gap-1">
+                <input
+                  type="radio"
+                  name="timeRange"
+                  value={option}
+                  checked={localData.timeRange === option}
+                  onChange={() => handleTimeRangeChange(option)}
+                />
+                <span className="text-sm">{option} Hours</span>
+              </label>
+            ))}
+          </div>
         </div>
 
+        {/* Excluded Systems */}
         <div className="flex flex-col gap-1">
           <div className="flex items-center justify-between">
             <label className="text-sm text-stone-400">Excluded Systems</label>
@@ -146,8 +136,7 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
           {excluded.length === 0 && <div className="text-stone-500 text-xs italic">No systems excluded.</div>}
           {excluded.map(sysId => (
             <div key={sysId} className="flex items-center justify-between border-b border-stone-600 py-1 px-1 text-xs">
-              <SystemView systemId={sysId.toString()} hideRegion compact />
-
+              <SystemView systemId={sysId.toString()} hideRegion />
               <WdImgButton
                 className={PrimeIcons.TRASH}
                 onClick={() => handleRemoveSystem(sysId)}

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

@@ -1,39 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import { zkillLink } from '../helpers';
-import classes from './SystemKillRow.module.scss';
-
-interface VictimRowSubInfoProps {
-  victimCharacterId: number | null;
-  victimPortraitUrl: string | null;
-  victimCharName?: string;
-}
-
-export const VictimRowSubInfo: React.FC<VictimRowSubInfoProps> = ({
-  victimCharacterId = 0,
-  victimPortraitUrl,
-  victimCharName,
-}) => {
-  if (!victimPortraitUrl || !victimCharacterId || victimCharacterId <= 0) {
-    return null;
-  }
-
-  return (
-    <div className="flex items-start gap-1">
-      <div className="relative shrink-0 w-12 h-12 sm:w-14 sm:h-14 overflow-hidden">
-        <a
-          href={zkillLink('character', victimCharacterId)}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="block w-full h-full"
-        >
-          <img
-            src={victimPortraitUrl}
-            alt={victimCharName || 'Victim Portrait'}
-            className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
-          />
-        </a>
-      </div>
-    </div>
-  );
-};

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/hooks/useKillsWidgetSettings.ts

@@ -2,7 +2,6 @@ import { useMemo, useCallback } from 'react';
 import useLocalStorageState from 'use-local-storage-state';
 
 export interface KillsWidgetSettings {
-  compact: boolean;
   showAll: boolean;
   whOnly: boolean;
   excludedSystems: number[];
@@ -11,11 +10,10 @@ export interface KillsWidgetSettings {
 }
 
 export const DEFAULT_KILLS_WIDGET_SETTINGS: KillsWidgetSettings = {
-  compact: true,
   showAll: false,
   whOnly: true,
   excludedSystems: [],
-  version: 1,
+  version: 2,
   timeRange: 1,
 };
 

assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/hooks/useSystemKillsItemTemplate.ts

@@ -4,14 +4,10 @@ import { VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
 import { DetailedKill } from '@/hooks/Mapper/types/kills';
 import { KillItemTemplate } from '../components/KillItemTemplate';
 
-export function useSystemKillsItemTemplate(
-  systemNameMap: Record<string, string>,
-  compact: boolean,
-  onlyOneSystem: boolean,
-) {
+export function useSystemKillsItemTemplate(systemNameMap: Record<string, string>, onlyOneSystem: boolean) {
   return useCallback(
     (kill: DetailedKill, options: VirtualScrollerTemplateOptions) =>
-      KillItemTemplate(systemNameMap, compact, onlyOneSystem, kill, options),
-    [systemNameMap, compact, onlyOneSystem],
+      KillItemTemplate(systemNameMap, onlyOneSystem, kill, options),
+    [systemNameMap, onlyOneSystem],
   );
 }