From a63fc7dfc2fa32d8eeca8d1c6f4045b5a6907545 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 8 Nov 2021 10:24:22 -0800
Subject: [PATCH] Add grid alignment config

---
 src/__tests__/App.test.tsx                    |  1 +
 .../ConfigPanels/LookAndFeelConfig.tsx        | 20 +++++++++++++++++--
 src/components/shared/setDefaultSettings.ts   |  4 ++++
 src/redux/configSlice.ts                      | 10 ++++++++++
 src/shared/mockSettings.ts                    |  1 +
 5 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/__tests__/App.test.tsx b/src/__tests__/App.test.tsx
index ef5dd53..8f43a67 100644
--- a/src/__tests__/App.test.tsx
+++ b/src/__tests__/App.test.tsx
@@ -365,6 +365,7 @@ const configState: ConfigPage = {
     },
     gridView: {
       cardSize: 160,
+      alignment: 'flex-start',
     },
   },
 };
diff --git a/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx b/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx
index 5224198..cffb5ab 100644
--- a/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx
+++ b/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>
     </>
   );
diff --git a/src/components/shared/setDefaultSettings.ts b/src/components/shared/setDefaultSettings.ts
index 3b62998..06762c2 100644
--- a/src/components/shared/setDefaultSettings.ts
+++ b/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');
   }
diff --git a/src/redux/configSlice.ts b/src/redux/configSlice.ts
index 04d6325..1048495 100644
--- a/src/redux/configSlice.ts
+++ b/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;
diff --git a/src/shared/mockSettings.ts b/src/shared/mockSettings.ts
index 32d01dd..f71e04b 100644
--- a/src/shared/mockSettings.ts
+++ b/src/shared/mockSettings.ts
@@ -32,6 +32,7 @@ export const mockSettings = {
     starred: false,
   },
   gridCardSize: 200,
+  gridAlignment: 'flex-start',
   playlistViewType: 'grid',
   albumViewType: 'grid',
   musicListFontSize: 13,