feat(Signatures): Add user setting to show Description in a separate column

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

@@ -0,0 +1,79 @@
+.verticalTabsContainer {
+  display: flex;
+  width: 100%;
+  min-height: 300px;
+
+  :global {
+    .p-tabview {
+      width: 100%;
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .p-tabview-panels {
+      padding: 6px 1rem !important;
+      flex-grow: 1;
+    }
+
+    .p-tabview-nav-container {
+      border-right: none;
+      height: 100%;
+    }
+
+    .p-tabview-nav {
+      flex-direction: column;
+      width: 150px;
+      min-height: 100%;
+      border: none;
+
+      li {
+        width: 100%;
+        border-right: 4px solid var(--surface-hover);
+        background-color: var(--surface-card);
+
+        transition:
+          background-color 200ms,
+          border-right-color 200ms;
+
+        &:hover {
+          background-color: var(--surface-hover);
+          border-right: 4px solid var(--surface-100);
+        }
+
+        .p-tabview-nav-link {
+          transition: color 200ms;
+
+          justify-content: flex-end;
+          padding: 10px;
+          //background-color: var(--surface-card);
+          background-color: initial;
+          border: none;
+          color: var(--gray-400);
+
+          border-radius: initial;
+          font-weight: 400;
+          margin: 0;
+        }
+
+        &.p-tabview-selected {
+          background-color: var(--surface-50);
+          border-right: 4px solid var(--primary-color);
+
+          .p-tabview-nav-link {
+            font-weight: 600;
+            color: var(--primary-color);
+          }
+
+          &:hover {
+            //background-color: var(--surface-hover);
+            border-right: 4px solid var(--primary-color);
+          }
+        }
+      }
+    }
+
+    .p-tabview-panel {
+      flex-grow: 1;
+    }
+  }
+}

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

@@ -2,8 +2,10 @@ import { Dialog } from 'primereact/dialog';
 import { useCallback, useState } from 'react';
 import { Button } from 'primereact/button';
 import { Checkbox } from 'primereact/checkbox';
+import { TabPanel, TabView } from 'primereact/tabview';
+import styles from './SystemSignatureSettingsDialog.module.scss';
 
-export type Setting = { key: string; name: string; value: boolean };
+export type Setting = { key: string; name: string; value: boolean; isFilter?: boolean };
 
 export const COSMIC_SIGNATURE = 'Cosmic Signature';
 export const COSMIC_ANOMALY = 'Cosmic Anomaly';
@@ -24,8 +26,12 @@ export const SystemSignatureSettingsDialog = ({
   onSave,
   onCancel,
 }: SystemSignatureSettingsDialogProps) => {
+  const [activeIndex, setActiveIndex] = useState(0);
   const [settings, setSettings] = useState<Setting[]>(defaultSettings);
 
+  const filterSettings = settings.filter(setting => setting.isFilter);
+  const userSettings = settings.filter(setting => !setting.isFilter);
+
   const handleSettingsChange = (key: string) => {
     setSettings(prevState => prevState.map(item => (item.key === key ? { ...item, value: !item.value } : item)));
   };
@@ -35,23 +41,53 @@ export const SystemSignatureSettingsDialog = ({
   }, [onSave, settings]);
 
   return (
-    <Dialog header="Filter signatures" visible draggable={false} style={{ width: '300px' }} onHide={onCancel}>
+    <Dialog header="System Signatures Settings" visible={true} onHide={onCancel} className="w-full max-w-lg">
       <div className="flex flex-col gap-3">
         <div className="flex flex-col gap-2">
-          {settings.map(setting => {
+          <div className={styles.verticalTabsContainer}>
-            return (
+            <TabView
-              <div key={setting.key} className="flex items-center">
+              activeIndex={activeIndex}
-                <Checkbox
+              onTabChange={e => setActiveIndex(e.index)}
-                  inputId={setting.key}
+              className={styles.verticalTabView}
-                  checked={setting.value}
+            >
-                  onChange={() => handleSettingsChange(setting.key)}
+              <TabPanel header="Filters" headerClassName={styles.verticalTabHeader}>
-                />
+                <div className="w-full h-full flex flex-col gap-1">
-                <label htmlFor={setting.key} className="ml-2">
+                  {filterSettings.map(setting => {
-                  {setting.name}
+                    return (
-                </label>
+                      <div key={setting.key} className="flex items-center">
-              </div>
+                        <Checkbox
-            );
+                          inputId={setting.key}
-          })}
+                          checked={setting.value}
+                          onChange={() => handleSettingsChange(setting.key)}
+                        />
+                        <label htmlFor={setting.key} className="ml-2">
+                          {setting.name}
+                        </label>
+                      </div>
+                    );
+                  })}
+                </div>
+              </TabPanel>
+              <TabPanel header="User Interface" headerClassName={styles.verticalTabHeader}>
+                <div className="w-full h-full flex flex-col gap-1">
+                  {userSettings.map(setting => {
+                    return (
+                      <div key={setting.key} className="flex items-center">
+                        <Checkbox
+                          inputId={setting.key}
+                          checked={setting.value}
+                          onChange={() => handleSettingsChange(setting.key)}
+                        />
+                        <label htmlFor={setting.key} className="ml-2">
+                          {setting.name}
+                        </label>
+                      </div>
+                    );
+                  })}
+                </div>
+              </TabPanel>
+            </TabView>
+          </div>
         </div>
 
         <div className="flex gap-2 justify-end">

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

@@ -20,23 +20,25 @@ import { PrimeIcons } from 'primereact/api';
 
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 
-const settings: Setting[] = [
+const SIGNATURE_SETTINGS_KEY = 'wanderer_system_signature_settings_v3';
-  { key: COSMIC_ANOMALY, name: 'Show Anomalies', value: true },
+export const SHOW_DESCRIPTION_COLUMN_SETTING = 'show_description_column_setting';
-  { key: COSMIC_SIGNATURE, name: 'Show Cosmic Signatures', value: true },
-  { key: DEPLOYABLE, name: 'Show Deployables', value: true },
-  { key: STRUCTURE, name: 'Show Structures', value: true },
-  { key: STARBASE, name: 'Show Starbase', value: true },
-  { key: SHIP, name: 'Show Ships', value: true },
-  { key: DRONE, name: 'Show Drones And Charges', value: true },
-  { key: SignatureGroup.Wormhole, name: 'Show Wormholes', value: true },
-  { key: SignatureGroup.RelicSite, name: 'Show Relic Sites', value: true },
-  { key: SignatureGroup.DataSite, name: 'Show Data Sites', value: true },
-  { key: SignatureGroup.OreSite, name: 'Show Ore Sites', value: true },
-  { key: SignatureGroup.GasSite, name: 'Show Gas Sites', value: true },
-  { key: SignatureGroup.CombatSite, name: 'Show Combat Sites', value: true },
-];
 
-const SIGNATURE_SETTINGS_KEY = 'wanderer_system_signature_settings_v1';
+const settings: Setting[] = [
+  { key: SHOW_DESCRIPTION_COLUMN_SETTING, name: 'Show Description Column', 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 },
+  { key: STRUCTURE, name: 'Show Structures', value: true, isFilter: true },
+  { key: STARBASE, name: 'Show Starbase', value: true, isFilter: true },
+  { key: SHIP, name: 'Show Ships', value: true, isFilter: true },
+  { key: DRONE, name: 'Show Drones And Charges', value: true, isFilter: true },
+  { key: SignatureGroup.Wormhole, name: 'Show Wormholes', value: true, isFilter: true },
+  { key: SignatureGroup.RelicSite, name: 'Show Relic Sites', value: true, isFilter: true },
+  { key: SignatureGroup.DataSite, name: 'Show Data Sites', value: true, isFilter: true },
+  { key: SignatureGroup.OreSite, name: 'Show Ore Sites', value: true, isFilter: true },
+  { key: SignatureGroup.GasSite, name: 'Show Gas Sites', value: true, isFilter: true },
+  { key: SignatureGroup.CombatSite, name: 'Show Combat Sites', value: true, isFilter: true },
+];
 
 const defaultSettings = () => {
   return [...settings];

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

@@ -22,6 +22,7 @@ import {
   getRowColorByTimeLeft,
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers';
 import {
+  renderDescription,
   renderIcon,
   renderInfoColumn,
   renderTimeLeft,
@@ -32,7 +33,7 @@ import { SignatureSettings } from '@/hooks/Mapper/components/mapRootContent/comp
 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 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures';
 type SystemSignaturesSortSettings = {
   sortField: string;
   sortOrder: SortOrder;
@@ -90,6 +91,10 @@ export const SystemSignaturesContent = ({
   }, []);
 
   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 filteredSignatures = useMemo(() => {
     return signatures
@@ -126,26 +131,6 @@ export const SystemSignaturesContent = ({
     setSignatures(signatures);
   }, [outCommand, systemId]);
 
-  // const updateSignatures = useCallback(
-  //   async (newSignatures: SystemSignature[], updateOnly: boolean) => {
-  //     const { added, updated, removed } = getActualSigs(signaturesRef.current, newSignatures, updateOnly);
-
-  //     const { signatures: updatedSignatures } = await outCommand({
-  //       type: OutCommand.updateSignatures,
-  //       data: {
-  //         system_id: systemId,
-  //         added,
-  //         updated,
-  //         removed,
-  //       },
-  //     });
-
-  //     setSignatures(() => updatedSignatures);
-  //     setSelectedSignatures([]);
-  //   },
-  //   [outCommand, systemId],
-  // );
-
   const handleUpdateSignatures = useCallback(
     async (newSignatures: SystemSignature[], updateOnly: boolean) => {
       const { added, updated, removed } = getActualSigs(signaturesRef.current, newSignatures, updateOnly);
@@ -209,7 +194,7 @@ export const SystemSignaturesContent = ({
 
   useHotkey(true, ['a'], handleSelectAll);
 
-  useHotkey(false, ['Backspace', 'Delete'], handleDeleteSelected);
+  useHotkey(false, ['Backspace'], handleDeleteSelected);
 
   useEffect(() => {
     if (selectable) {
@@ -373,6 +358,16 @@ export const SystemSignaturesContent = ({
                 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="updated_at"
                 header="Updated"

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

@@ -1,4 +1,5 @@
 export * from './renderIcon';
+export * from './renderDescription';
 export * from './renderName';
 export * from './renderTimeLeft';
 export * from './renderLinkedSystem';

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

@@ -0,0 +1,5 @@
+import { SystemSignature } from '@/hooks/Mapper/types';
+
+export const renderDescription = (row: SystemSignature) => {
+  return <span title={row?.description}>{row?.description}</span>;
+};