feat: add undo deletion for signatures (#155)

* feat: add undo for signature deletion and addition

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,26 @@
-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 {
-  getGroupIdByRawGroup,
-  GROUPS_LIST,
-} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
-
+import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
 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 { PrimeIcons } from 'primereact/api';
+import useLocalStorageState from 'use-local-storage-state';
 
-import classes from './SystemSignaturesContent.module.scss';
-import clsx from 'clsx';
-import { SystemSignature } from '@/hooks/Mapper/types';
+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 {
-  getActualSigs,
-  getRowColorByTimeLeft,
-} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers';
+  COMPACT_MAX_WIDTH,
+  GROUPS_LIST,
+  MEDIUM_MAX_WIDTH,
+  OTHER_COLUMNS_WIDTH,
+} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants';
+import {
+  KEEP_LAZY_DELETE_SETTING,
+  LAZY_DELETE_SIGNATURES_SETTING,
+  SHOW_DESCRIPTION_COLUMN_SETTING,
+  SHOW_UPDATED_COLUMN_SETTING,
+} from '../SystemSignatures';
+import { COSMIC_SIGNATURE } from '../SystemSignatureSettingsDialog';
 import {
   renderAddedTimeLeft,
   renderDescription,
@@ -31,415 +28,288 @@ 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';
-type SystemSignaturesSortSettings = {
-  sortField: string;
-  sortOrder: SortOrder;
-};
-
-const SORT_DEFAULT_VALUES: SystemSignaturesSortSettings = {
-  sortField: 'inserted_at',
-  sortOrder: -1,
-};
+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';
 
 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: { sortField: 'inserted_at', sortOrder: -1 } },
   );
 
-  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 isCompact = useMaxWidth(tableRef, COMPACT_MAX_WIDTH);
+  const isMedium = useMaxWidth(tableRef, MEDIUM_MAX_WIDTH);
 
-      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 lazyDeleteEnabled = settings.find(s => s.key === LAZY_DELETE_SIGNATURES_SETTING)?.value ?? false;
+  const keepLazyDeleteEnabled = settings.find(s => s.key === KEEP_LAZY_DELETE_SETTING)?.value ?? false;
 
+  const { clipboardContent, setClipboardContent } = useClipboard();
   useEffect(() => {
-    if (refData.current.selectable) {
-      return;
-    }
-
-    if (!clipboardContent?.text) {
-      return;
-    }
+    if (selectable) return;
+    if (!clipboardContent?.text) return;
 
     handlePaste(clipboardContent.text);
+
+    if (lazyDeleteEnabled && !keepLazyDeleteEnabled) {
+      onLazyDeleteChange?.(false);
+    }
     setClipboardContent(null);
-  }, [clipboardContent, selectable, lazyDeleteValue, keepLazyDeleteValue]);
+  }, [
+    selectable,
+    clipboardContent,
+    handlePaste,
+    setClipboardContent,
+    lazyDeleteEnabled,
+    keepLazyDeleteEnabled,
+    onLazyDeleteChange,
+  ]);
 
   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;
-    }
+  useHotkey(false, ['Backspace', 'Delete'], (event: KeyboardEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    handleDeleteSelected();
   });
 
-  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 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 filteredSignatures = useMemo<ExtendedSystemSignature[]>(() => {
+    return signatures.filter(sig => {
+      if (hideLinkedSignatures && sig.linked_system) {
+        return false;
+      }
+      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;
+        }
+        return true;
+      } else {
+        return settings.find(y => y.key === sig.kind)?.value;
+      }
+    });
+  }, [signatures, settings, groupSettings, hideLinkedSignatures]);
+
+  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
+            />
+          )}
+          {!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>
+  );
+}