Sandakan · Abssdghi · Nov 23, 2025 · Nov 23, 2025 · Nov 23, 2025 · Nov 23, 2025
diff --git a/src/renderer/src/components/SettingsPage/Settings/AboutSettings.tsx b/src/renderer/src/components/SettingsPage/Settings/AboutSettings.tsx
@@ -24,6 +24,7 @@ import DiscordLightIcon from '../../../assets/images/svg/discord_dark_mode.svg';
 import SLFlag from '../../../assets/images/webp/sl-flag.webp';
 import { store } from '@renderer/store/store';
 import { useStore } from '@tanstack/react-store';
+import CollapsibleSection from "./CollapsibleSection";
 
 const ReleaseNotesPrompt = lazy(() => import('../../ReleaseNotesPrompt/ReleaseNotesPrompt'));
 const ResetAppConfirmationPrompt = lazy(() => import('../ResetAppConfirmationPrompt'));
@@ -57,10 +58,15 @@ const AboutSettings = () => {
 
   return (
     <li className="main-container about-container" id="about-settings-container">
-      <div className="title-container text-font-color-highlight dark:text-dark-font-color-highlight mt-1 mb-4 flex items-center text-2xl font-medium">
+    <CollapsibleSection
+      defaultOpen={false}
+      title={
+      <div className="title-container text-font-color-highlight dark:text-dark-font-color-highlight flex items-center text-2xl font-medium">
         <span className="material-icons-round-outlined mr-2">info</span>
         About
       </div>
+      }
+    >
       <div className="pl-2">
         <div className="mb-2 flex items-center justify-between p-2 text-lg">
           <div className="flex items-center">
@@ -431,6 +437,7 @@ const AboutSettings = () => {
           </div>
         </div>
       </div>
+    </CollapsibleSection>
     </li>
   );
 };

diff --git a/src/renderer/src/components/SettingsPage/Settings/AccessibilitySettings.tsx b/src/renderer/src/components/SettingsPage/Settings/AccessibilitySettings.tsx
@@ -3,20 +3,26 @@ import storage from '../../../utils/localStorage';
 import Checkbox from '../../Checkbox';
 import { useStore } from '@tanstack/react-store';
 import { store } from '@renderer/store/store';
+import CollapsibleSection from "./CollapsibleSection";
 
 const AccessibilitySettings = () => {
   const preferences = useStore(store, (state) => state.localStorage.preferences);
   const { t } = useTranslation();
 
   return (
     <li
-      className="main-container accessibility-settings-container mb-16"
+      className="main-container accessibility-settings-container mb-4"
       id="accessibility-settings-container"
     >
-      <div className="title-container text-font-color-highlight dark:text-dark-font-color-highlight mt-1 mb-4 flex items-center text-2xl font-medium">
+    <CollapsibleSection
+      defaultOpen={false}
+      title={
+      <div className="title-container text-font-color-highlight dark:text-dark-font-color-highlight flex items-center text-2xl font-medium">
         <span className="material-icons-round-outlined mr-2">settings_accessibility</span>
         {t('settingsPage.accessibility')}
       </div>
+      }
+    >
       <ul className="marker:bg-background-color-3 dark:marker:bg-background-color-3 list-disc pl-6">
         <li className="secondary-container toggle-reduced-motion mb-4">
           <div className="description">{t('settingsPage.reducedMotionDescription')}</div>
@@ -30,6 +36,7 @@ const AccessibilitySettings = () => {
           />
         </li>
       </ul>
+    </CollapsibleSection>
     </li>
   );
 };

diff --git a/src/renderer/src/components/SettingsPage/Settings/AccountsSettings.tsx b/src/renderer/src/components/SettingsPage/Settings/AccountsSettings.tsx
@@ -8,6 +8,7 @@ import LastFMIcon from '../../../assets/images/webp/last-fm-logo.webp';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { settingsQuery } from '@renderer/queries/settings';
 import { queryClient } from '@renderer/index';
+import CollapsibleSection from "./CollapsibleSection";
 
 const AccountsSettings = () => {
   const { data: userSettings } = useQuery(settingsQuery.all);
@@ -52,13 +53,18 @@ const AccountsSettings = () => {
 
   return (
     <li
-      className="main-container startup-settings-container mb-16"
+      className="main-container startup-settings-container mb-4"
       id="accounts-settings-container"
     >
-      <div className="title-container text-font-color-highlight dark:text-dark-font-color-highlight mt-1 mb-4 flex items-center text-2xl font-medium">
+    <CollapsibleSection
+      defaultOpen={false}
+      title={
+      <div className="title-container text-font-color-highlight dark:text-dark-font-color-highlight flex items-center text-2xl font-medium">
         <span className="material-icons-round-outlined mr-2">account_circle</span>
         {t('settingsPage.accounts')}
       </div>
+      }
+    >
       <ul className="marker:bg-background-color-3 dark:marker:bg-background-color-3 list-disc pl-6">
         <li className="discord-rpc-integration mb-4">
           <div className="description">{t('settingsPage.enableDiscordRpcDescription')}</div>
@@ -164,6 +170,7 @@ const AccountsSettings = () => {
           </ul>
         </li>
       </ul>
+    </CollapsibleSection>
     </li>
   );
 };

diff --git a/src/renderer/src/components/SettingsPage/Settings/AdvancedSettings.tsx b/src/renderer/src/components/SettingsPage/Settings/AdvancedSettings.tsx
@@ -3,6 +3,7 @@ import Checkbox from '../../Checkbox';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { settingsQuery } from '@renderer/queries/settings';
 import { queryClient } from '@renderer/index';
+import CollapsibleSection from "./CollapsibleSection";
 
 const AdvancedSettings = () => {
   const { data: userSettings } = useQuery(settingsQuery.all);
@@ -18,13 +19,18 @@ const AdvancedSettings = () => {
 
   return (
     <li
-      className="main-container performance-settings-container mb-16"
+      className="main-container performance-settings-container mb-4"
       id="advanced-settings-container"
     >
-      <div className="title-container text-font-color-highlight dark:text-dark-font-color-highlight mt-1 mb-4 flex items-center text-2xl font-medium">
+    <CollapsibleSection
+      defaultOpen={false}
+      title={
+      <div className="title-container text-font-color-highlight dark:text-dark-font-color-highlight flex items-center text-2xl font-medium">
         <span className="material-icons-round-outlined mr-2 leading-none">handyman</span>
         <span> {t('settingsPage.advanced')}</span>
       </div>
+      }
+    >
       <ul className="marker:bg-background-color-3 dark:marker:bg-background-color-3 list-disc pl-6">
         <li className="secondary-container toggle-save-verbose-logs mb-4">
           <div className="description">{t('settingsPage.saveVerboseLogsDescription')}</div>
@@ -36,6 +42,7 @@ const AdvancedSettings = () => {
           />
         </li>
       </ul>
+    </CollapsibleSection>
     </li>
   );
 };

diff --git a/src/renderer/src/components/SettingsPage/Settings/AppearanceSettings.tsx b/src/renderer/src/components/SettingsPage/Settings/AppearanceSettings.tsx
@@ -15,6 +15,7 @@ import storage from '../../../utils/localStorage';
 import Checkbox from '../../Checkbox';
 import Img from '../../Img';
 import DynamicThemeSettings from './DynamicThemeSettings';
+import CollapsibleSection from "./CollapsibleSection";
 
 const ThemeSettings = () => {
   const { data: userSettings } = useQuery(settingsQuery.all);
@@ -66,13 +67,18 @@ const ThemeSettings = () => {
 
   return userSettings ? (
     <li
-      className="main-container appearance-settings-container mb-16"
+      className="main-container appearance-settings-container mb-4"
       id="appearance-settings-container"
     >
-      <div className="title-container text-font-color-highlight dark:text-dark-font-color-highlight mt-1 mb-4 flex items-center text-2xl font-medium">
+    <CollapsibleSection
+      defaultOpen={false}
+      title={
+      <div className="title-container text-font-color-highlight dark:text-dark-font-color-highlight flex items-center text-2xl font-medium">
         <span className="material-icons-round-outlined mr-2">dark_mode</span>
         {t('settingsPage.appearance')}
       </div>
+      }
+    >
       <ul className="marker:bg-font-color-highlight dark:marker:bg-dark-font-color-highlight list-disc pl-6">
         <li>
           <div className="description">{t('settingsPage.changeTheme')}</div>
@@ -169,6 +175,7 @@ const ThemeSettings = () => {
           )}
         </li>
       </ul>
+    </CollapsibleSection>
     </li>
   ) : null;
 };

diff --git a/src/renderer/src/components/SettingsPage/Settings/AudioPlaybackSettings.tsx b/src/renderer/src/components/SettingsPage/Settings/AudioPlaybackSettings.tsx
@@ -8,6 +8,7 @@ import Checkbox from '../../Checkbox';
 import i18n from '../../../i18n';
 import { useStore } from '@tanstack/react-store';
 import { store } from '@renderer/store/store';
+import CollapsibleSection from "./CollapsibleSection";
 
 const second = i18n.t('settingsPage.second');
 const seconds = i18n.t('settingsPage.second_other');
@@ -46,13 +47,18 @@ const AudioPlaybackSettings = () => {
 
   return (
     <li
-      className="main-container audio-playback-settings-container mb-16"
+      className="main-container audio-playback-settings-container mb-4"
       id="audio-playback-settings-container"
     >
-      <div className="title-container text-font-color-highlight dark:text-dark-font-color-highlight mt-1 mb-4 flex items-center text-2xl font-medium">
+    <CollapsibleSection
+      defaultOpen={false}
+      title={
+      <div className="title-container text-font-color-highlight dark:text-dark-font-color-highlight flex items-center text-2xl font-medium">
         <span className="material-icons-round-outlined mr-2">slow_motion_video</span>
         {t('settingsPage.audioPlayback')}
       </div>
+      }
+    >
       <ul className="marker:bg-font-color-highlight dark:marker:bg-dark-font-color-highlight list-disc pl-6">
         <li className="secondary-container show-remaining-song-duration mb-4">
           <div className="description">
@@ -125,6 +131,7 @@ const AudioPlaybackSettings = () => {
           />
         </li>
       </ul>
+    </CollapsibleSection>
     </li>
   );
 };

diff --git a/src/renderer/src/components/SettingsPage/Settings/CollapsibleSection.tsx b/src/renderer/src/components/SettingsPage/Settings/CollapsibleSection.tsx
@@ -0,0 +1,47 @@
+import { useState, type ReactNode, type KeyboardEvent } from "react";
+
+const CollapsibleSection = ({
+  title,
+  children,
+  defaultOpen = false
+}: {
+  title: ReactNode;
+  children: ReactNode;
+  defaultOpen?: boolean;
+}) => {
+  const [open, setOpen] = useState(defaultOpen);
+
+  const handleKey = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === "Enter") setOpen((o) => !o);
+  };
+
+  return (
+    <div className="secondary-container mb-4 rounded-4xl border border-background-color-2 dark:border-dark-background-color-2">
+
+      <div
+        tabIndex={0}
+        className="flex cursor-pointer select-none items-center rounded-4xl justify-between p-4 outline-offset-2 hover:bg-background-color-2 dark:hover:bg-dark-background-color-2"
+        onClick={() => setOpen((o) => !o)}
+        onKeyDown={handleKey}
+      >
+        <span className="font-medium text-font-color-highlight dark:text-dark-font-color-highlight">
+          {title}
+        </span>
+
+        <span className="material-icons-round-outlined text-xl text-font-color-highlight">
+          {open ? "expand_less" : "expand_more"}
+        </span>
+      </div>
+
+      <div
+        className={`transition-all duration-300 ease-in-out overflow-hidden ${
+          open ? "max-h-[500px] opacity-100" : "max-h-0 opacity-0"
+        }`}
+      >
+        <div className="p-4">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default CollapsibleSection;
diff --git a/src/renderer/src/components/SettingsPage/Settings/DefaultPageSettings.tsx b/src/renderer/src/components/SettingsPage/Settings/DefaultPageSettings.tsx
@@ -3,18 +3,24 @@ import storage from '../../../utils/localStorage';
 import Dropdown from '../../Dropdown';
 import { useStore } from '@tanstack/react-store';
 import { store } from '@renderer/store/store';
+import CollapsibleSection from "./CollapsibleSection";
 
 const DefaultPageSettings = () => {
   const preferences = useStore(store, (state) => state.localStorage.preferences);
 
   const { t } = useTranslation();
 
   return (
-    <li className="main-container mb-16" id="default-page-settings-container">
-      <div className="title-container text-font-color-highlight dark:text-dark-font-color-highlight mt-1 mb-4 flex items-center text-2xl font-medium">
+    <li className="main-container mb-4" id="default-page-settings-container">
+    <CollapsibleSection
+      defaultOpen={false}
+      title={
+      <div className="title-container text-font-color-highlight dark:text-dark-font-color-highlight flex items-center text-2xl font-medium">
         <span className="material-icons-round-outlined mr-2">home</span>
         {t('settingsPage.defaultPage')}
       </div>
+      }
+    >
       <ul className="marker:bg-background-color-3 dark:marker:bg-background-color-3 list-disc pl-6">
         <li className="default-page-dropdown-container">
           <div className="description"> {t('settingsPage.changeDefaultPageDescription')}</div>
@@ -41,6 +47,7 @@ const DefaultPageSettings = () => {
           />
         </li>
       </ul>
+    </CollapsibleSection>
     </li>
   );
 };

diff --git a/src/renderer/src/components/SettingsPage/Settings/EqualizerSettings.tsx b/src/renderer/src/components/SettingsPage/Settings/EqualizerSettings.tsx
@@ -11,6 +11,7 @@ import EqualierBand from './EqualierBand';
 import { useStore } from '@tanstack/react-store';
 import { store } from '@renderer/store/store';
 import { LOCAL_STORAGE_DEFAULT_TEMPLATE } from '@renderer/other/appReducer';
+import CollapsibleSection from "./CollapsibleSection";
 
 const presets: EqualizerPresetDropdownOptions[] = equalizerPresetsData.map((presetData) => {
   return {
@@ -101,13 +102,18 @@ const EqualizerSettings = () => {
 
   return (
     <li
-      className="main-container equalizer-settings-container mb-12"
+      className="main-container equalizer-settings-container mb-4"
       id="equalizer-settings-container"
     >
-      <div className="title-container text-font-color-highlight dark:text-dark-font-color-highlight mt-1 mb-4 flex items-center text-2xl font-medium">
+    <CollapsibleSection
+      defaultOpen={false}
+      title={
+      <div className="title-container text-font-color-highlight dark:text-dark-font-color-highlight flex items-center text-2xl font-medium">
         <span className="material-icons-round-outlined mr-2">graphic_eq</span>
         {t('settingsPage.equalizer')}
       </div>
+      }
+    >
       <div className="pl-6">
         <div className="flex items-center justify-between">
           <Dropdown
@@ -150,6 +156,7 @@ const EqualizerSettings = () => {
           {equalizerBands}
         </div>
       </div>
+    </CollapsibleSection>
     </li>
   );
 };

diff --git a/src/renderer/src/components/SettingsPage/Settings/LanguageSettings.tsx b/src/renderer/src/components/SettingsPage/Settings/LanguageSettings.tsx
@@ -5,6 +5,7 @@ import { AppUpdateContext } from '../../../contexts/AppUpdateContext';
 import i18n, { supportedLanguagesDropdownOptions } from '../../../i18n';
 import { useQuery } from '@tanstack/react-query';
 import { settingsQuery } from '@renderer/queries/settings';
+import CollapsibleSection from "./CollapsibleSection";
 
 const LanguageSettings = () => {
   const { t } = useTranslation();
@@ -15,13 +16,18 @@ const LanguageSettings = () => {
 
   return (
     <li
-      className="main-container performance-settings-container mb-16"
+      className="main-container performance-settings-container mb-4"
       id="language-settings-container"
     >
-      <div className="title-container text-font-color-highlight dark:text-dark-font-color-highlight mt-1 mb-4 flex items-center text-2xl font-medium">
+    <CollapsibleSection
+      defaultOpen={false}
+      title={
+      <div className="title-container text-font-color-highlight dark:text-dark-font-color-highlight flex items-center text-2xl font-medium">
         <span className="material-icons-round-outlined mr-2 leading-none">translate</span>
         <span>{t('settingsPage.language')}</span>
       </div>
+      }
+    >
       <ul className="marker:bg-background-color-3 dark:marker:bg-background-color-3 list-disc pl-6">
         <li className="seekbar-scroll-interval mb-4">
           <div className="description">{t('settingsPage.languageDescription')}</div>
@@ -57,6 +63,7 @@ const LanguageSettings = () => {
           />
         </li>
       </ul>
+    </CollapsibleSection>
     </li>
   );
 };