Split grid/list view configs into separate components

src/components/settings/ConfigPanels/LookAndFeelConfig.tsx

@@ -38,28 +38,21 @@ import {
   setGridGapSize,
 } from '../../../redux/configSlice';
 
-const LookAndFeelConfig = () => {
+export const ListViewConfigPanel = ({ bordered }: any) => {
   const dispatch = useAppDispatch();
   const config = useAppSelector((state) => state.config);
-  const [dynamicBackgroundChk, setDynamicBackgroundChk] = useState(
-    Boolean(settings.getSync('dynamicBackground'))
-  );
+
   const [highlightOnRowHoverChk, setHighlightOnRowHoverChk] = useState(
     Boolean(settings.getSync('highlightOnRowHover'))
   );
-  const [selectedTheme, setSelectedTheme] = useState(String(settings.getSync('theme')));
-  const themePickerContainerRef = useRef(null);
-  const fontPickerContainerRef = useRef(null);
-  const titleBarPickerContainerRef = useRef(null);
-  const [themeList, setThemeList] = useState(
-    _.concat(settings.getSync('themes'), settings.getSync('themesDefault'))
-  );
+
   const songCols: any = settings.getSync('musicListColumns');
   const albumCols: any = settings.getSync('albumListColumns');
   const playlistCols: any = settings.getSync('playlistListColumns');
   const artistCols: any = settings.getSync('artistListColumns');
   const miniCols: any = settings.getSync('miniListColumns');
   const genreCols: any = settings.getSync('genreListColumns');
+
   const currentSongColumns = songCols?.map((column: any) => column.label) || [];
   const currentAlbumColumns = albumCols?.map((column: any) => column.label) || [];
   const currentPlaylistColumns = playlistCols?.map((column: any) => column.label) || [];
@@ -68,100 +61,7 @@ const LookAndFeelConfig = () => {
   const currentGenreColumns = genreCols?.map((column: any) => column.label) || [];
 
   return (
-    <>
-      <ConfigPanel header="Look & Feel" bordered>
-        <p>
-          <StyledLink
-            onClick={() => shell.openExternal('https://github.com/jeffvli/sonixd/discussions/61')}
-          >
-            Check out the theming documentation! <Icon icon="external-link" />
-          </StyledLink>
-        </p>
-        <br />
-        <StyledInputPickerContainer ref={themePickerContainerRef}>
-          <ControlLabel>Theme</ControlLabel>
-          <br />
-          <StyledInputGroup>
-            <StyledInputPicker
-              container={() => themePickerContainerRef.current}
-              data={themeList}
-              labelKey="label"
-              valueKey="value"
-              cleanable={false}
-              defaultValue={selectedTheme}
-              onChange={(e: string) => {
-                settings.setSync('theme', e);
-                setSelectedTheme(e);
-                dispatch(setTheme(e));
-              }}
-            />
-            <StyledInputGroupButton
-              onClick={() => {
-                dispatch(setTheme('defaultDark'));
-                dispatch(setTheme(selectedTheme));
-                setThemeList(
-                  _.concat(settings.getSync('themes'), settings.getSync('themesDefault'))
-                );
-              }}
-            >
-              <Icon icon="refresh" />
-            </StyledInputGroupButton>
-          </StyledInputGroup>
-        </StyledInputPickerContainer>
-        <br />
-        <StyledInputPickerContainer ref={fontPickerContainerRef}>
-          <ControlLabel>Font</ControlLabel>
-          <br />
-          <StyledInputPicker
-            container={() => fontPickerContainerRef.current}
-            data={Fonts}
-            groupBy="role"
-            cleanable={false}
-            defaultValue={String(settings.getSync('font'))}
-            onChange={(e: string) => {
-              settings.setSync('font', e);
-              dispatch(setFont(e));
-            }}
-          />
-        </StyledInputPickerContainer>
-        <br />
-        <StyledInputPickerContainer ref={titleBarPickerContainerRef}>
-          <ControlLabel>Titlebar style (requires app restart)</ControlLabel>
-          <br />
-          <StyledInputPicker
-            container={() => titleBarPickerContainerRef.current}
-            data={[
-              {
-                label: 'macOS',
-                value: 'mac',
-              },
-              {
-                label: 'Windows',
-                value: 'windows',
-              },
-            ]}
-            cleanable={false}
-            defaultValue={String(settings.getSync('titleBarStyle'))}
-            onChange={(e: string) => {
-              settings.setSync('titleBarStyle', e);
-              dispatch(setMiscSetting({ setting: 'titleBar', value: e }));
-            }}
-          />
-        </StyledInputPickerContainer>
-        <br />
-        <StyledCheckbox
-          defaultChecked={dynamicBackgroundChk}
-          checked={dynamicBackgroundChk}
-          onChange={(_v: any, e: boolean) => {
-            settings.setSync('dynamicBackground', e);
-            dispatch(setDynamicBackground(e));
-            setDynamicBackgroundChk(e);
-          }}
-        >
-          Enable dynamic background
-        </StyledCheckbox>
-      </ConfigPanel>
-      <ConfigPanel header="List-View" bordered>
+    <ConfigPanel header="List-View" bordered={bordered}>
       <Nav
         activeKey={config.active.columnSelectorTab}
         onSelect={(e) => dispatch(setActive({ ...config.active, columnSelectorTab: e }))}
@@ -275,7 +175,15 @@ const LookAndFeelConfig = () => {
         Show highlight on row hover
       </StyledCheckbox>
     </ConfigPanel>
-      <ConfigPanel header="Grid-View" bordered>
+  );
+};
+
+export const GridViewConfigPanel = ({ bordered }: any) => {
+  const dispatch = useAppDispatch();
+  const config = useAppSelector((state) => state.config);
+
+  return (
+    <ConfigPanel header="Grid-View" bordered={bordered}>
       <ControlLabel>Card size (px)</ControlLabel>
       <StyledInputNumber
         defaultValue={config.lookAndFeel.gridView.cardSize}
@@ -317,6 +225,120 @@ const LookAndFeelConfig = () => {
         <StyledRadio value="center">Center</StyledRadio>
       </RadioGroup>
     </ConfigPanel>
+  );
+};
+
+const LookAndFeelConfig = () => {
+  const dispatch = useAppDispatch();
+  const [dynamicBackgroundChk, setDynamicBackgroundChk] = useState(
+    Boolean(settings.getSync('dynamicBackground'))
+  );
+
+  const [selectedTheme, setSelectedTheme] = useState(String(settings.getSync('theme')));
+  const themePickerContainerRef = useRef(null);
+  const fontPickerContainerRef = useRef(null);
+  const titleBarPickerContainerRef = useRef(null);
+  const [themeList, setThemeList] = useState(
+    _.concat(settings.getSync('themes'), settings.getSync('themesDefault'))
+  );
+
+  return (
+    <>
+      <ConfigPanel header="Look & Feel" bordered>
+        <p>
+          <StyledLink
+            onClick={() => shell.openExternal('https://github.com/jeffvli/sonixd/discussions/61')}
+          >
+            Check out the theming documentation! <Icon icon="external-link" />
+          </StyledLink>
+        </p>
+        <br />
+        <StyledInputPickerContainer ref={themePickerContainerRef}>
+          <ControlLabel>Theme</ControlLabel>
+          <br />
+          <StyledInputGroup>
+            <StyledInputPicker
+              container={() => themePickerContainerRef.current}
+              data={themeList}
+              labelKey="label"
+              valueKey="value"
+              cleanable={false}
+              defaultValue={selectedTheme}
+              onChange={(e: string) => {
+                settings.setSync('theme', e);
+                setSelectedTheme(e);
+                dispatch(setTheme(e));
+              }}
+            />
+            <StyledInputGroupButton
+              onClick={() => {
+                dispatch(setTheme('defaultDark'));
+                dispatch(setTheme(selectedTheme));
+                setThemeList(
+                  _.concat(settings.getSync('themes'), settings.getSync('themesDefault'))
+                );
+              }}
+            >
+              <Icon icon="refresh" />
+            </StyledInputGroupButton>
+          </StyledInputGroup>
+        </StyledInputPickerContainer>
+        <br />
+        <StyledInputPickerContainer ref={fontPickerContainerRef}>
+          <ControlLabel>Font</ControlLabel>
+          <br />
+          <StyledInputPicker
+            container={() => fontPickerContainerRef.current}
+            data={Fonts}
+            groupBy="role"
+            cleanable={false}
+            defaultValue={String(settings.getSync('font'))}
+            onChange={(e: string) => {
+              settings.setSync('font', e);
+              dispatch(setFont(e));
+            }}
+          />
+        </StyledInputPickerContainer>
+        <br />
+        <StyledInputPickerContainer ref={titleBarPickerContainerRef}>
+          <ControlLabel>Titlebar style (requires app restart)</ControlLabel>
+          <br />
+          <StyledInputPicker
+            container={() => titleBarPickerContainerRef.current}
+            data={[
+              {
+                label: 'macOS',
+                value: 'mac',
+              },
+              {
+                label: 'Windows',
+                value: 'windows',
+              },
+            ]}
+            cleanable={false}
+            defaultValue={String(settings.getSync('titleBarStyle'))}
+            onChange={(e: string) => {
+              settings.setSync('titleBarStyle', e);
+              dispatch(setMiscSetting({ setting: 'titleBar', value: e }));
+            }}
+          />
+        </StyledInputPickerContainer>
+        <br />
+        <StyledCheckbox
+          defaultChecked={dynamicBackgroundChk}
+          checked={dynamicBackgroundChk}
+          onChange={(_v: any, e: boolean) => {
+            settings.setSync('dynamicBackground', e);
+            dispatch(setDynamicBackground(e));
+            setDynamicBackgroundChk(e);
+          }}
+        >
+          Enable dynamic background
+        </StyledCheckbox>
+      </ConfigPanel>
+
+      <ListViewConfigPanel bordered />
+      <GridViewConfigPanel bordered />
     </>
   );
 };