Add window position saving

src/__tests__/App.test.tsx

@@ -87,9 +87,10 @@ const miscState: General = {
   isProcessingPlaylist: [],
   dynamicBackground: false,
   retainWindowSize: false,
-  savedWindowSize: [1024, 728],
-  defaultWindowX: 1024,
-  defaultWindowY: 728,
+  savedWindowSize: [1024, 768],
+  savedWindowPos: [50, 50],
+  defaultWindowWidth: 1024,
+  defaultWindowHeight: 768,
   highlightOnRowHover: true,
   imageCachePath: '',
   songCachePath: '',

src/components/settings/ConfigPanels/LookAndFeelConfig.tsx

@@ -30,8 +30,8 @@ import {
   setDynamicBackground,
   setMiscSetting,
   setRetainWindowSize,
-  setDefaultWindowX,
-  setDefaultWindowY,
+  setDefaultWindowWidth,
+  setDefaultWindowHeight,
 } from '../../../redux/miscSlice';
 import {
   songColumnPicker,
@@ -300,11 +300,11 @@ export const ThemeConfigPanel = ({ bordered }: any) => {
   const [retainWindowSizeChk, setRetainWindowSizeChk] = useState(
     Boolean(settings.getSync('retainWindowSize'))
   );
-  const [defaultWindowX, setDefaultWindowXValue] = useState(
-    Number(settings.getSync('defaultWindowX'))
+  const [defaultWindowWidth, setDefaultWindowWidthValue] = useState(
+    Number(settings.getSync('defaultWindowHeight'))
   );
-  const [defaultWindowY, setDefaultWindowYValue] = useState(
-    Number(settings.getSync('defaultWindowY'))
+  const [defaultWindowHeight, setDefaultWindowHeightValue] = useState(
+    Number(settings.getSync('defaultWindowWidth'))
   );
 
   const [selectedTheme, setSelectedTheme] = useState(String(settings.getSync('theme')));
@@ -503,7 +503,7 @@ export const ThemeConfigPanel = ({ bordered }: any) => {
       <ConfigOption
         name={t('Retain Window Size')}
         description={t(
-          'Retains the size of the application window. Only saves when the program is exited properly!'
+          'Retains the size and position of the application window. Size is only saved when the program is exited properly!'
         )}
         option={
           <StyledToggle
@@ -525,16 +525,16 @@ export const ThemeConfigPanel = ({ bordered }: any) => {
         )}
         option={
           <StyledInputNumber
-            defaultValue={defaultWindowX}
-            value={defaultWindowX}
+            defaultValue={defaultWindowWidth}
+            value={defaultWindowWidth}
             step={1}
-            min={600}
+            min={768}
             max={7680}
             width={125}
             onChange={(e: number) => {
-              settings.setSync('defaultWindowX', Number(e));
-              dispatch(setDefaultWindowX(Number(e)));
-              setDefaultWindowXValue(Number(e));
+              settings.setSync('defaultWindowWidth', Number(e));
+              dispatch(setDefaultWindowWidth(Number(e)));
+              setDefaultWindowWidthValue(Number(e));
             }}
           />
         }
@@ -547,16 +547,16 @@ export const ThemeConfigPanel = ({ bordered }: any) => {
         )}
         option={
           <StyledInputNumber
-            defaultValue={defaultWindowY}
-            value={defaultWindowY}
+            defaultValue={defaultWindowHeight}
+            value={defaultWindowHeight}
             step={1}
             min={600}
             max={7680}
             width={125}
             onChange={(e: number) => {
-              settings.setSync('defaultWindowY', Number(e));
-              dispatch(setDefaultWindowY(Number(e)));
-              setDefaultWindowYValue(Number(e));
+              settings.setSync('defaultWindowHeight', Number(e));
+              dispatch(setDefaultWindowHeight(Number(e)));
+              setDefaultWindowHeightValue(Number(e));
             }}
           />
         }

src/components/shared/setDefaultSettings.ts

@@ -80,18 +80,22 @@ const setDefaultSettings = (force: boolean) => {
     settings.setSync('retainWindowSize', false);
   }
 
-  if (force || !settings.hasSync('defaultWindowX')) {
-    settings.setSync('defaultWindowX', 1024);
+  if (force || !settings.hasSync('defaultWindowWidth')) {
+    settings.setSync('defaultWindowWidth', 1024);
   }
 
-  if (force || !settings.hasSync('defaultWindowY')) {
-    settings.setSync('defaultWindowY', 728);
+  if (force || !settings.hasSync('defaultWindowHeight')) {
+    settings.setSync('defaultWindowHeight', 728);
   }
 
   if (force || !settings.hasSync('savedWindowSize')) {
     settings.setSync('savedWindowSize', [1024, 728]);
   }
 
+  if (force || !settings.hasSync('savedWindowPos')) {
+    settings.setSync('savedWindowPos', [50, 50]);
+  }
+
   if (force || !settings.hasSync('highlightOnRowHover')) {
     settings.setSync('highlightOnRowHover', true);
   }

src/main.dev.js

@@ -422,18 +422,28 @@ const createWindow = async () => {
   }
 
   let windowDimensions = [];
+  let windowPos = [];
+  let isCentered = true;
 
-  // If retained window size is enabled, use saved dimensions. Otherwise, use defined defaults
+  // If retained window size is enabled, use saved dimensions and position. Otherwise, use defined defaults
   if (settings.getSync('retainWindowSize')) {
     windowDimensions = settings.getSync('savedWindowSize');
+    windowPos = settings.getSync('savedWindowPos');
+    isCentered = false;
   } else {
-    windowDimensions = [settings.getSync('defaultWindowX'), settings.getSync('defaultWindowY')];
+    windowDimensions = [
+      settings.getSync('defaultWindowWidth'),
+      settings.getSync('defaultWindowHeight'),
+    ];
   }
 
   mainWindow = new BrowserWindow({
     show: false,
     width: windowDimensions[0],
     height: windowDimensions[1],
+    center: isCentered,
+    x: windowPos[0],
+    y: windowPos[1],
     icon: getAssetPath('icon.png'),
     webPreferences: {
       nodeIntegration: true,
@@ -556,6 +566,12 @@ const createWindow = async () => {
     }
   });
 
+  mainWindow.on('moved', () => {
+    if (settings.getSync('retainWindowSize')) {
+      settings.setSync(`savedWindowPos`, mainWindow.getPosition());
+    }
+  });
+
   mainWindow.on('close', (event) => {
     if (!exitFromTray && store.getState().config.window.exitToTray) {
       event.preventDefault();

src/redux/miscSlice.ts

@@ -54,8 +54,9 @@ export interface General {
   dynamicBackground: boolean;
   retainWindowSize: boolean;
   savedWindowSize: number[];
-  defaultWindowX: number;
-  defaultWindowY: number;
+  savedWindowPos: number[];
+  defaultWindowWidth: number;
+  defaultWindowHeight: number;
   highlightOnRowHover: boolean;
   imageCachePath: string;
   songCachePath: string;
@@ -81,8 +82,9 @@ const initialState: General = {
   dynamicBackground: Boolean(parsedSettings.dynamicBackground),
   retainWindowSize: Boolean(parsedSettings.retainWindowSize),
   savedWindowSize: Array(parsedSettings.savedWindowSize),
-  defaultWindowX: Number(parsedSettings.defaultWindowX),
-  defaultWindowY: Number(parsedSettings.defaultWindowY),
+  savedWindowPos: Array(parsedSettings.savedWindowPos),
+  defaultWindowWidth: Number(parsedSettings.defaultWindowWidth),
+  defaultWindowHeight: Number(parsedSettings.defaultWindowHeight),
   highlightOnRowHover: Boolean(parsedSettings.highlightOnRowHover),
   imageCachePath: getImageCachePath(),
   songCachePath: getSongCachePath(),
@@ -104,11 +106,14 @@ const miscSlice = createSlice({
     savedWindowSize: (state, action: PayloadAction<Array<number>>) => {
       state.savedWindowSize = action.payload;
     },
-    setDefaultWindowX: (state, action: PayloadAction<number>) => {
-      state.defaultWindowX = action.payload;
+    savedWindowPos: (state, action: PayloadAction<Array<number>>) => {
+      state.savedWindowPos = action.payload;
     },
-    setDefaultWindowY: (state, action: PayloadAction<number>) => {
-      state.defaultWindowY = action.payload;
+    setDefaultWindowWidth: (state, action: PayloadAction<number>) => {
+      state.defaultWindowWidth = action.payload;
+    },
+    setDefaultWindowHeight: (state, action: PayloadAction<number>) => {
+      state.defaultWindowHeight = action.payload;
     },
 
     setMiscSetting: (state, action: PayloadAction<{ setting: string; value: any }>) => {
@@ -218,8 +223,9 @@ export const {
   setContextMenu,
   setDynamicBackground,
   savedWindowSize,
-  setDefaultWindowX,
-  setDefaultWindowY,
+  savedWindowPos,
+  setDefaultWindowWidth,
+  setDefaultWindowHeight,
   setMiscSetting,
   setImgModal,
   setRetainWindowSize,

src/shared/mockSettings.ts

@@ -334,8 +334,9 @@ export const mockSettings = {
   dynamicBackground: false,
   retainWindowSize: false,
   savedWindowSize: [1024, 728],
-  defaultWindowX: 1024,
-  defaultWindowY: 728,
+  savedWindowPos: [50, 50],
+  defaultWindowWidth: 1024,
+  defaultWindowHeight: 728,
   minimizeToTray: true,
   exitToTray: true,
   windowPosition: { x: 0, y: 0, width: 960, height: 1560 },