Add grid alignment config

src/__tests__/App.test.tsx

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

src/components/settings/ConfigPanels/LookAndFeelConfig.tsx

@@ -2,7 +2,7 @@ import React, { useRef, useState } from 'react';
 import _ from 'lodash';
 import { shell } from 'electron';
 import settings from 'electron-settings';
-import { ControlLabel, Nav, Icon } from 'rsuite';
+import { ControlLabel, Nav, Icon, RadioGroup } from 'rsuite';
 import { ConfigPanel } from '../styled';
 import {
   StyledInputPicker,
@@ -13,6 +13,7 @@ import {
   StyledLink,
   StyledInputGroup,
   StyledInputGroupButton,
+  StyledRadio,
 } from '../../shared/styled';
 import ListViewConfig from './ListViewConfig';
 import { Fonts } from '../Fonts';
@@ -30,7 +31,7 @@ import {
   genreColumnPicker,
   genreColumnListAuto,
 } from '../ListViewColumns';
-import { setActive, setGridCardSize } from '../../../redux/configSlice';
+import { setActive, setGridAlignment, setGridCardSize } from '../../../redux/configSlice';
 
 const LookAndFeelConfig = () => {
   const dispatch = useAppDispatch();
@@ -282,6 +283,21 @@ const LookAndFeelConfig = () => {
             dispatch(setGridCardSize({ size: Number(e) }));
           }}
         />
+        <br />
+        <ControlLabel>Grid alignment</ControlLabel>
+        <RadioGroup
+          name="gridAlignemntRadioList"
+          appearance="default"
+          defaultValue={config.lookAndFeel.gridView.alignment}
+          value={config.lookAndFeel.gridView.alignment}
+          onChange={(e: string) => {
+            dispatch(setGridAlignment({ alignment: e }));
+            settings.setSync('gridAlignment', e);
+          }}
+        >
+          <StyledRadio value="flex-start">Left</StyledRadio>
+          <StyledRadio value="center">Center</StyledRadio>
+        </RadioGroup>
       </ConfigPanel>
     </>
   );

src/components/shared/setDefaultSettings.ts

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

src/redux/configSlice.ts

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

src/shared/mockSettings.ts

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