Add configurable gap size between grid cards

src/__tests__/App.test.tsx

@@ -365,6 +365,7 @@ const configState: ConfigPage = {
     },
     gridView: {
       cardSize: 160,
+      gapSize: 20,
       alignment: 'flex-start',
     },
   },

src/components/settings/ConfigPanels/LookAndFeelConfig.tsx

@@ -31,7 +31,12 @@ import {
   genreColumnPicker,
   genreColumnListAuto,
 } from '../ListViewColumns';
-import { setActive, setGridAlignment, setGridCardSize } from '../../../redux/configSlice';
+import {
+  setActive,
+  setGridAlignment,
+  setGridCardSize,
+  setGridGapSize,
+} from '../../../redux/configSlice';
 
 const LookAndFeelConfig = () => {
   const dispatch = useAppDispatch();
@@ -271,7 +276,7 @@ const LookAndFeelConfig = () => {
         </StyledCheckbox>
       </ConfigPanel>
       <ConfigPanel header="Grid-View" bordered>
-        <ControlLabel>Card size</ControlLabel>
+        <ControlLabel>Card size (px)</ControlLabel>
         <StyledInputNumber
           defaultValue={config.lookAndFeel.gridView.cardSize}
           step={1}
@@ -284,6 +289,19 @@ const LookAndFeelConfig = () => {
           }}
         />
         <br />
+        <ControlLabel>Gap size (px)</ControlLabel>
+        <StyledInputNumber
+          defaultValue={config.lookAndFeel.gridView.gapSize}
+          step={1}
+          min={0}
+          max={100}
+          width={150}
+          onChange={(e: any) => {
+            settings.setSync('gridGapSize', Number(e));
+            dispatch(setGridGapSize({ size: Number(e) }));
+          }}
+        />
+        <br />
         <ControlLabel>Grid alignment</ControlLabel>
         <RadioGroup
           name="gridAlignemntRadioList"

src/components/shared/setDefaultSettings.ts

@@ -126,6 +126,10 @@ const setDefaultSettings = (force: boolean) => {
     settings.setSync('gridCardSize', 175);
   }
 
+  if (force || !settings.hasSync('gridGapSize')) {
+    settings.setSync('gridGapSize', 20);
+  }
+
   if (force || !settings.hasSync('gridAlignment')) {
     settings.setSync('gridAlignment', 'flex-start');
   }

src/components/viewtypes/GridViewType.tsx

@@ -77,6 +77,7 @@ function ListWrapper({
   cardSubtitle,
   playClick,
   size,
+  gapSize,
   alignment,
   height,
   itemCount,
@@ -86,11 +87,10 @@ function ListWrapper({
   cachePath,
   handleFavorite,
 }: any) {
-  const gapSize = 5;
+  const cardHeight = size + 55;
-  const cardHeight = size + 75;
+  const cardWidth = size;
-  const cardWidth = size + 25;
   // How many cards can we show per row, given the current width?
-  const columnCount = Math.floor((width - gapSize) / (cardWidth + gapSize));
+  const columnCount = Math.floor((width - gapSize + 3) / (cardWidth + gapSize + 2));
   const rowCount = Math.ceil(itemCount / columnCount);
 
   const itemData = useMemo(
@@ -122,6 +122,7 @@ function ListWrapper({
       itemCount,
       playClick,
       size,
+      gapSize,
       alignment,
       cacheImages,
       cachePath,
@@ -168,6 +169,7 @@ const GridViewType = ({
           cardSubtitle={cardSubtitle}
           playClick={playClick}
           size={size}
+          gapSize={config.lookAndFeel.gridView.gapSize}
           alignment={config.lookAndFeel.gridView.alignment}
           cacheType={cacheType}
           cacheImages={cacheImages}

src/redux/configSlice.ts

@@ -37,6 +37,7 @@ export interface ConfigPage {
     };
     gridView: {
       cardSize: number;
+      gapSize: number;
       alignment: string | 'flex-start' | 'center';
     };
   };
@@ -121,6 +122,7 @@ const initialState: ConfigPage = {
     },
     gridView: {
       cardSize: Number(parsedSettings.gridCardSize),
+      gapSize: Number(parsedSettings.gridGapSize),
       alignment: String(parsedSettings.gridAlignment),
     },
   },
@@ -197,6 +199,10 @@ const configSlice = createSlice({
       state.lookAndFeel.gridView.cardSize = action.payload.size;
     },
 
+    setGridGapSize: (state, action: PayloadAction<{ size: number }>) => {
+      state.lookAndFeel.gridView.gapSize = action.payload.size;
+    },
+
     setGridAlignment: (
       state,
       action: PayloadAction<{ alignment: string | 'flex-start' | 'center' }>
@@ -232,6 +238,7 @@ export const {
   setRowHeight,
   setFontSize,
   setGridCardSize,
+  setGridGapSize,
   setGridAlignment,
   moveToIndex,
 } = configSlice.actions;

src/shared/mockSettings.ts

@@ -32,6 +32,7 @@ export const mockSettings = {
     starred: false,
   },
   gridCardSize: 200,
+  gridGapSize: 20,
   gridAlignment: 'flex-start',
   playlistViewType: 'grid',
   albumViewType: 'grid',