Transaction Table Resize

packages/desktop-client/e2e/transactions.test.js

@@ -50,7 +50,9 @@ test.describe('Transactions', () => {
       await filterTooltip.applyButton.click();
 
       // Assert that there are no transactions
-      await expect(accountPage.transactionTable).toHaveText('No transactions');
+      await expect(accountPage.transactionTable).toContainText(
+        'No transactions',
+      );
       await expect(page).toMatchThemeScreenshots();
     });
 

packages/desktop-client/src/components/ColumnWidthContext.jsx

@@ -0,0 +1,198 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+  useRef,
+  useMemo,
+} from 'react';
+
+import { AUTO_SIZE } from 'loot-core/client/constants';
+
+import { useSyncedPref } from '../hooks/useSyncedPref';
+
+const ColumnWidthContext = createContext();
+
+export const ColumnWidthProvider = ({ children, prefName }) => {
+  const [columnSizePrefs, setColumnSizePrefs] = useSyncedPref(prefName);
+  const [columnWidths, setColumnWidths] = useState({});
+  const [fixedSizedColumns, setFixedSizedColumns] = useState({});
+  const positionAccumulatorRef = useRef(0);
+  const [clientWidth, setClientWidth] = useState(0);
+  const [editMode, setEditMode] = useState(false);
+
+  useEffect(() => {
+    if (columnSizePrefs) {
+      setColumnWidths(JSON.parse(columnSizePrefs));
+    }
+  }, [columnSizePrefs]);
+
+  const currentTotalWidth = useMemo(() => {
+    return Object.values(columnWidths).reduce((acc, width) => acc + width, 0);
+  }, [columnWidths]);
+
+  const otherColumnsWidth = useMemo(() => {
+    return Object.entries(fixedSizedColumns)
+      .filter(([key]) => !(key in columnWidths))
+      .reduce((acc, [, width]) => acc + width + 10, 0);
+  }, [fixedSizedColumns, columnWidths]);
+
+  const totalWidth = useCallback(() => {
+    const widthSum = otherColumnsWidth + currentTotalWidth + 10;
+    return widthSum > clientWidth ? widthSum : clientWidth;
+  }, [currentTotalWidth, otherColumnsWidth, clientWidth]);
+
+  const savePrefs = useCallback(
+    value => {
+      setColumnSizePrefs(JSON.stringify(value ?? columnWidths));
+    },
+    [columnWidths, setColumnSizePrefs],
+  );
+
+  const removeColumn = columnName => {
+    const { [columnName]: _, ...newObj } = columnWidths;
+    setColumnWidths(newObj);
+    savePrefs(newObj);
+  };
+
+  const resetAllColumns = () => {
+    setColumnWidths({});
+    savePrefs({});
+  };
+
+  const handleDoubleClick = columnName => {
+    updateColumnWidth(columnName, -1);
+
+    setTimeout(() => {
+      let maximum = -1;
+      document
+        .querySelectorAll(`[data-resizeable-column=${columnName}]`)
+        .forEach(row => {
+          const rect = row.getBoundingClientRect();
+          const styles = getComputedStyle(row);
+          const localValue = Math.max(
+            rect.width +
+              parseFloat(styles.marginLeft) +
+              parseFloat(styles.marginRight),
+            110,
+          );
+
+          maximum = Math.max(localValue, maximum);
+        });
+
+      const newObj = updateColumnWidth(columnName, maximum);
+
+      savePrefs(newObj);
+    }, 100);
+  };
+
+  const getViewportWidth = useCallback(() => clientWidth, [clientWidth]);
+
+  const updateColumnWidth = useCallback(
+    (columnName, accumulatedDelta) => {
+      const existingColumnWidth = columnWidths[columnName] || 0;
+      const newWidth = accumulatedDelta;
+
+      if (newWidth === AUTO_SIZE) {
+        const newObj = {
+          ...columnWidths,
+          [columnName]: newWidth,
+        };
+        setColumnWidths(newObj);
+        return newObj;
+      }
+
+      const currentTotalWidth = Object.values(columnWidths).reduce(
+        (acc, width) => acc + width,
+        0,
+      );
+      const otherColumnsWidth = Object.values(fixedSizedColumns).reduce(
+        (acc, width) => acc + width + 10,
+        0,
+      );
+
+      const proposedTotalWidth =
+        currentTotalWidth - existingColumnWidth + newWidth + otherColumnsWidth;
+
+      const viewportWidth = getViewportWidth();
+      const adjustedWidth =
+        proposedTotalWidth > viewportWidth
+          ? viewportWidth - otherColumnsWidth
+          : newWidth;
+
+      const newObj = {
+        ...columnWidths,
+        [columnName]: Math.max(adjustedWidth, 110),
+      };
+
+      setColumnWidths(newObj);
+
+      return newObj;
+    },
+    [columnWidths, fixedSizedColumns, getViewportWidth],
+  );
+
+  const handleMoveProps = (columnName, ref, resizerRef) => {
+    const updatePosition = deltaX => {
+      positionAccumulatorRef.current += deltaX;
+      updateColumnWidth(columnName, positionAccumulatorRef.current);
+    };
+
+    return {
+      onMoveStart() {
+        if (resizerRef.current) {
+          resizerRef.current.classList.add('dragging');
+          let columnWidth = columnWidths[columnName];
+          if (!columnWidth) {
+            const rect = ref.getBoundingClientRect();
+            columnWidth = rect.width;
+          }
+          const startWidth = columnWidth;
+          positionAccumulatorRef.current = startWidth;
+        }
+      },
+      onMove(e) {
+        if (resizerRef.current) {
+          updatePosition(e.deltaX);
+        }
+      },
+      onMoveEnd() {
+        savePrefs();
+        if (resizerRef.current) {
+          resizerRef.current.classList.remove('dragging');
+        }
+        positionAccumulatorRef.current = 0;
+      },
+    };
+  };
+
+  return (
+    <ColumnWidthContext.Provider
+      value={{
+        columnWidths,
+        handleMoveProps,
+        setFixedSizedColumns,
+        handleDoubleClick,
+        totalWidth,
+        removeColumn,
+        clientWidth,
+        setClientWidth,
+        resetAllColumns,
+        editMode,
+        setEditMode,
+        fixedSizedColumns,
+      }}
+    >
+      {children}
+    </ColumnWidthContext.Provider>
+  );
+};
+
+export const useColumnWidth = () => {
+  const context = useContext(ColumnWidthContext);
+  if (!context) {
+    throw new Error('useColumnWidth must be used within a ColumnWidthProvider');
+  }
+  return context;
+};

packages/desktop-client/src/components/FixedSizeList.tsx

@@ -52,6 +52,7 @@ type FixedSizeListProps = {
   header?: ReactNode;
   innerRef?: Ref<HTMLDivElement>;
   itemKey?: (index: number) => string | number;
+  totalWidth?: number;
 };
 
 type FixedSizeListState = {
@@ -203,6 +204,7 @@ export class FixedSizeList extends PureComponent<
       itemKey = defaultItemKey,
       useIsScrolling,
       width,
+      totalWidth,
     } = this.props;
     const { isScrolling } = this.state;
 
@@ -265,7 +267,7 @@ export class FixedSizeList extends PureComponent<
           style={{
             position: 'relative',
             height: estimatedTotalSize,
-            width: '100%',
+            width: `${Math.max(totalWidth || 0, width || 0)}px`,
             pointerEvents: isScrolling ? 'none' : undefined,
           }}
         >

packages/desktop-client/src/components/HorizontalFakeScrollbar.tsx

@@ -0,0 +1,127 @@
+import React, { useState, useRef, type MouseEvent } from 'react';
+import { useMove } from 'react-aria';
+
+import { useColumnWidth } from './ColumnWidthContext';
+import { useScroll } from './ScrollProvider';
+
+export function HorizontalFakeScrollbar() {
+  const { scrollX, scrollToX } = useScroll();
+  const scrollbarRef = useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [startScroll, setStartScroll] = useState(0);
+  const { totalWidth, clientWidth } = useColumnWidth();
+  const [maxPosition, setMaxPosition] = useState(
+    clientWidth - (clientWidth / totalWidth()) * clientWidth,
+  );
+  const [scrollbarPosition, setScrollbarPosition] = useState(0);
+
+  const sliderWidth =
+    totalWidth() > clientWidth
+      ? (clientWidth / totalWidth()) * clientWidth - 12
+      : clientWidth - 12;
+
+  const handleMouseMove = (deltaX: number) => {
+    const newLeft = Math.min(
+      Math.max(startScroll + deltaX, 0),
+      maxPosition - 12,
+    );
+
+    setStartScroll(newLeft);
+    scrollToX(newLeft, false);
+
+    if (scrollbarRef.current) {
+      setScrollbarPosition(newLeft);
+    }
+  };
+
+  const handleContainerClick = (event: MouseEvent<HTMLDivElement>) => {
+    if (!scrollbarRef.current) return;
+
+    const clickX = event.clientX;
+    const container = event.currentTarget;
+    const containerRect = container.getBoundingClientRect();
+
+    const clickPercent = (clickX - containerRect.left) / containerRect.width;
+    let newLeft = Math.trunc(clickPercent * (totalWidth() - clientWidth));
+
+    if (newLeft < 10) newLeft = 0;
+
+    if (newLeft > clickX - containerRect.left - 10) {
+      newLeft = clickX - containerRect.left;
+    }
+
+    scrollToX(newLeft, true);
+
+    if (scrollbarRef.current) {
+      setScrollbarPosition(newLeft);
+    }
+  };
+
+  const { moveProps } = useMove({
+    onMoveStart: () => {
+      if (!scrollbarRef.current) return;
+
+      setIsDragging(true);
+      const rect = scrollbarRef.current.getBoundingClientRect();
+      const currentLeft = rect.left || 0;
+      setStartScroll(currentLeft);
+      const maxPos = clientWidth - sliderWidth;
+      setMaxPosition(maxPos);
+    },
+    onMove: e => {
+      handleMouseMove(e.deltaX);
+    },
+    onMoveEnd: () => {
+      if (scrollX === undefined || scrollX === null) return;
+
+      setIsDragging(false);
+
+      const maxPos = clientWidth - sliderWidth;
+      const sliderPosition = (scrollX / totalWidth()) * maxPos;
+
+      if (scrollbarRef.current) {
+        setScrollbarPosition(sliderPosition);
+      }
+
+      setMaxPosition(maxPos);
+    },
+  });
+
+  return (
+    totalWidth() > clientWidth && (
+      <div
+        style={{
+          position: 'absolute',
+          bottom: '0',
+          left: '0',
+          width: 'calc(100% - 11px)',
+          height: '12px',
+          zIndex: 5000,
+          backgroundColor: 'rgba(200, 200, 200, 0.2)',
+          display: 'flex',
+          alignItems: 'center',
+          padding: 2,
+          cursor: 'pointer',
+        }}
+        onClick={handleContainerClick}
+      >
+        <div
+          ref={scrollbarRef}
+          style={{
+            width: `${sliderWidth}px`,
+            marginTop: '2px',
+            marginBottom: '2px',
+            borderRadius: 10,
+            height: '8px',
+            backgroundColor: 'rgba(200, 200, 200, 1)',
+            position: 'absolute',
+            left: '0px',
+            transform: `translateX(${scrollbarPosition}px)`,
+            transition: isDragging ? 'none' : 'transform 0.2s',
+          }}
+          {...moveProps}
+        />
+      </div>
+    )
+  );
+}

packages/desktop-client/src/components/Resizer.css

@@ -0,0 +1,32 @@
+.resizer-container {
+  position: relative;
+  width: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  z-index: 1500;
+}
+
+.resizer-container-enabled {
+  cursor: col-resize;
+}
+
+.resizer-container-enabled::before {
+  content: '';
+  display: block;
+  width: 2px;
+  height: 80%;
+  background-color: inherit;
+  border-radius: 2px;
+  box-shadow: inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.7),
+              inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.7);
+  transition: box-shadow 0.2s ease, background-color 0.2s ease;
+}
+
+.resizer-container-enabled:hover::before {
+  box-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1),
+              -0.5px -0.5px 1px rgba(255, 255, 255, 0.1);
+  background-color: rgba(0, 0, 0, 0.05);
+}