Update config border styling

src/components/settings/Config.tsx

@@ -222,20 +222,20 @@ const Config = () => {
     >
       {(config.active.tab === 'playback' || '') && (
         <>
-          <PlaybackConfig />
-          <PlayerConfig />
+          <PlaybackConfig bordered />
+          <PlayerConfig bordered />
         </>
       )}
 
-      {config.active.tab === 'lookandfeel' && <LookAndFeelConfig />}
+      {config.active.tab === 'lookandfeel' && <LookAndFeelConfig bordered />}
 
       {config.active.tab === 'other' && (
         <>
-          <ServerConfig />
-          <CacheConfig />
-          {!showWindowConfig && <WindowConfig />}
-          <ExternalConfig />
-          <AdvancedConfig />
+          <ServerConfig bordered />
+          <CacheConfig bordered />
+          {!showWindowConfig && <WindowConfig bordered />}
+          <ExternalConfig bordered />
+          <AdvancedConfig bordered />
         </>
       )}
     </GenericPage>

src/components/settings/ConfigPanels/AdvancedConfig.tsx

@@ -8,7 +8,7 @@ import { useAppDispatch } from '../../../redux/hooks';
 import { setPlaybackSetting } from '../../../redux/playQueueSlice';
 import ConfigOption from '../ConfigOption';
 
-const AdvancedConfig = () => {
+const AdvancedConfig = ({ bordered }: any) => {
   const dispatch = useAppDispatch();
   const [showDebugWindow, setShowDebugWindow] = useState(
     Boolean(settings.getSync('showDebugWindow'))
@@ -16,7 +16,7 @@ const AdvancedConfig = () => {
   const [autoUpdate, setAutoUpdate] = useState(Boolean(settings.getSync('autoUpdate')));
 
   return (
-    <ConfigPanel header="Advanced">
+    <ConfigPanel bordered={bordered} header="Advanced">
       <ConfigOption
         name="Automatic Updates"
         description="Enables or disables automatic updates. When a new version is detected, it will automatically be downloaded and installed."

src/components/settings/ConfigPanels/CacheConfig.tsx

@@ -22,7 +22,7 @@ import { useAppDispatch } from '../../../redux/hooks';
 
 const fsUtils = require('nodejs-fs-utils');
 
-const CacheConfig = () => {
+const CacheConfig = ({ bordered }: any) => {
   const dispatch = useAppDispatch();
   const [imgCacheSize, setImgCacheSize] = useState(0);
   const [songCacheSize, setSongCacheSize] = useState(0);
@@ -104,7 +104,7 @@ const CacheConfig = () => {
   };
 
   return (
-    <ConfigPanel header="Cache">
+    <ConfigPanel bordered={bordered} header="Cache">
       {errorMessage !== '' && (
         <>
           <Message showIcon type="error" description={errorMessage} />

src/components/settings/ConfigPanels/ExternalConfig.tsx

@@ -18,12 +18,12 @@ import ConfigOption from '../ConfigOption';
 
 const dialog: any = process.env.NODE_ENV === 'test' ? '' : require('electron').remote.dialog;
 
-const ExternalConfig = () => {
+const ExternalConfig = ({ bordered }: any) => {
   const dispatch = useAppDispatch();
   const config = useAppSelector((state) => state.config);
 
   return (
-    <ConfigPanel header="External">
+    <ConfigPanel bordered={bordered} header="External">
       <ConfigOptionDescription>
         Config for integration with external programs.
       </ConfigOptionDescription>

src/components/settings/ConfigPanels/LookAndFeelConfig.tsx

@@ -504,12 +504,12 @@ export const ThemeConfigPanel = ({ bordered }: any) => {
   );
 };
 
-const LookAndFeelConfig = () => {
+const LookAndFeelConfig = ({ bordered }: any) => {
   return (
     <>
-      <ThemeConfigPanel />
-      <ListViewConfigPanel />
-      <GridViewConfigPanel />
+      <ThemeConfigPanel bordered={bordered} />
+      <ListViewConfigPanel bordered={bordered} />
+      <GridViewConfigPanel bordered={bordered} />
     </>
   );
 };

src/components/settings/ConfigPanels/PlaybackConfig.tsx

@@ -13,7 +13,7 @@ import { useAppDispatch } from '../../../redux/hooks';
 import { setPlaybackSetting } from '../../../redux/playQueueSlice';
 import ConfigOption from '../ConfigOption';
 
-const PlaybackConfig = () => {
+const PlaybackConfig = ({ bordered }: any) => {
   const dispatch = useAppDispatch();
   const [crossfadeDuration, setCrossfadeDuration] = useState(
     Number(settings.getSync('fadeDuration'))
@@ -54,7 +54,7 @@ const PlaybackConfig = () => {
 
   return (
     <>
-      <ConfigPanel header="Playback">
+      <ConfigPanel bordered={bordered} header="Playback">
         <ConfigOption
           name="Crossfade Duration (s)"
           description="The number in seconds before starting the crossfade to the next track. Setting this to 0 will enable gapless playback."

src/components/settings/ConfigPanels/PlayerConfig.tsx

@@ -65,7 +65,7 @@ const playbackFilterColumns = [
   },
 ];
 
-const PlayerConfig = () => {
+const PlayerConfig = ({ bordered }: any) => {
   const dispatch = useAppDispatch();
   const playQueue = useAppSelector((state) => state.playQueue);
   const multiSelect = useAppSelector((state) => state.multiSelect);
@@ -98,7 +98,7 @@ const PlayerConfig = () => {
   }, []);
 
   return (
-    <ConfigPanel header="Player">
+    <ConfigPanel bordered={bordered} header="Player">
       <ConfigOption
         name="Audio Device"
         description="The audio device for Sonixd. Leaving this blank will use the system default."

src/components/settings/ConfigPanels/ServerConfig.tsx

@@ -7,11 +7,11 @@ import { StyledCheckbox, StyledInputPicker, StyledInputPickerContainer } from '.
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
 import { setAppliedFolderViews, setMusicFolder } from '../../../redux/folderSlice';
 import { apiController } from '../../../api/controller';
-import { Folder } from '../../../types';
+import { Folder, Server } from '../../../types';
 import PageLoader from '../../loader/PageLoader';
 import ConfigOption from '../ConfigOption';
 
-const ServerConfig = () => {
+const ServerConfig = ({ bordered }: any) => {
   const dispatch = useAppDispatch();
   const folder = useAppSelector((state) => state.folder);
   const config = useAppSelector((state) => state.config);
@@ -25,7 +25,7 @@ const ServerConfig = () => {
   }
 
   return (
-    <ConfigPanel header="Server">
+    <ConfigPanel bordered={bordered} header="Server">
       <ConfigOption
         name="Media Folder"
         description="Sets the parent media folder your audio files are located in. Leaving this blank will use all media folders."
@@ -99,6 +99,17 @@ const ServerConfig = () => {
           >
             Search
           </StyledCheckbox>
+          {config.serverType === Server.Jellyfin && (
+            <StyledCheckbox
+              defaultChecked={folder.applied.music}
+              onChange={(_v: any, e: boolean) => {
+                dispatch(setAppliedFolderViews({ ...folder.applied, music: e }));
+                settings.setSync('musicFolder.music', e);
+              }}
+            >
+              Songs
+            </StyledCheckbox>
+          )}
         </CheckboxGroup>
       </ConfigOptionInput>
     </ConfigPanel>

src/components/settings/ConfigPanels/WindowConfig.tsx

@@ -4,11 +4,11 @@ import { ConfigOptionDescription, ConfigPanel } from '../styled';
 import { StyledToggle } from '../../shared/styled';
 import ConfigOption from '../ConfigOption';
 
-const WindowConfig = () => {
+const WindowConfig = ({ bordered }: any) => {
   const [minimizeToTray, setMinimizeToTray] = useState(Boolean(settings.getSync('minimizeToTray')));
   const [exitToTray, setExitToTray] = useState(Boolean(settings.getSync('exitToTray')));
   return (
-    <ConfigPanel header="Window">
+    <ConfigPanel bordered={bordered} header="Window">
       <ConfigOptionDescription>
         Note: These settings may not function correctly depending on your desktop environment.
       </ConfigOptionDescription>

src/components/settings/styled.tsx

@@ -15,12 +15,12 @@ export const ConfigPanel = styled(Panel)<{ $noBackground: boolean }>`
   margin: ${(props) => (props.collapsible ? 'none' : '15px auto 15px auto')};
   padding: 15px;
 
-  background: ${(props) => (props.$noBackground ? 'none' : 'rgba(0, 0, 0, 0.1)')};
+  background: ${(props) =>
+    props.$noBackground || !props.bordered ? 'none' : 'rgba(0, 0, 0, 0.1)'};
   border-radius: 15px;
 
   .rs-panel-heading {
     font-size: ${(props) => props.theme.fonts.size.panelTitle};
-    font-weight: bold;
   }
 
   .rs-panel-collapsible > .rs-panel-heading::before {