From bd64cac29db0a49617e9518ea3ab633866af93e2 Mon Sep 17 00:00:00 2001
From: Xavier Abad <77491413+xabg2@users.noreply.github.com>
Date: Tue, 24 Mar 2026 16:12:07 +0100
Subject: [PATCH 1/7] feat: add Preferences Dialog basic components and
 navigation

---
 .../preferences/components/Section.tsx        | 42 ++++++++++++++
 .../preferences/components/SectionItem.tsx    | 55 +++++++++++++++++++
 .../preferences/components/SectionList.tsx    | 30 ++++++++++
 .../components/SectionListWrapper.tsx         | 21 +++++++
 src/components/preferences/index.tsx          | 32 +++++++++++
 src/context/dialog-manager/types/index.ts     |  1 -
 .../preferences/usePreferencesNavigation.tsx  | 51 +++++++++++++++++
 src/i18n/locales/en.json                      | 22 ++++++++
 src/types/preferences/index.ts                | 20 +++++++
 9 files changed, 273 insertions(+), 1 deletion(-)
 create mode 100644 src/components/preferences/components/Section.tsx
 create mode 100644 src/components/preferences/components/SectionItem.tsx
 create mode 100644 src/components/preferences/components/SectionList.tsx
 create mode 100644 src/components/preferences/components/SectionListWrapper.tsx
 create mode 100644 src/components/preferences/index.tsx
 create mode 100644 src/hooks/preferences/usePreferencesNavigation.tsx
 create mode 100644 src/types/preferences/index.ts

diff --git a/src/components/preferences/components/Section.tsx b/src/components/preferences/components/Section.tsx
new file mode 100644
index 0000000..96fec1c
--- /dev/null
+++ b/src/components/preferences/components/Section.tsx
@@ -0,0 +1,42 @@
+import { type ReactNode } from 'react';
+import { CaretLeftIcon, XIcon } from '@phosphor-icons/react';
+
+const Section = ({
+  className = '',
+  children,
+  title,
+  onBackButtonClicked,
+  onClosePreferences,
+}: {
+  className?: string;
+  children: ReactNode;
+  title: string;
+  onBackButtonClicked?: () => void;
+  onClosePreferences: () => void;
+}): JSX.Element => {
+  return (
+    <div className={`relative w-full rounded-tr-2xl ${className}`}>
+      <div className="absolute z-50 flex w-full items-center justify-between rounded-tr-2xl p-2.5 pl-6 before:absolute before:inset-0 before:-z-1 before:bg-surface/85 before:backdrop-blur-3xl before:transition-colors">
+        <div className="flex items-center">
+          {onBackButtonClicked && (
+            <button onClick={onBackButtonClicked}>
+              <div className="mr-2.5 flex h-9 w-9 items-center justify-center rounded-lg text-gray-100 hover:bg-highlight/4 active:bg-highlight/8">
+                <CaretLeftIcon size={22} />
+              </div>
+            </button>
+          )}
+          <h2 className="text-base font-medium text-gray-100">{title}</h2>
+        </div>
+        <button
+          className="flex h-9 w-9 items-center justify-center rounded-md hover:bg-highlight/4 active:bg-highlight/8"
+          onClick={() => onClosePreferences()}
+        >
+          <XIcon size={22} />
+        </button>
+      </div>
+      <div className="flex max-h-640 flex-col space-y-8 overflow-y-auto p-6 pt-16">{children}</div>
+    </div>
+  );
+};
+
+export default Section;
diff --git a/src/components/preferences/components/SectionItem.tsx b/src/components/preferences/components/SectionItem.tsx
new file mode 100644
index 0000000..7836d33
--- /dev/null
+++ b/src/components/preferences/components/SectionItem.tsx
@@ -0,0 +1,55 @@
+export interface SectionItemProps {
+  text: string;
+  isActive?: boolean;
+  isSection?: boolean;
+  isSubsection?: boolean;
+  isDisabled?: boolean;
+  onClick?: () => void;
+  notificationsNumber?: number;
+}
+
+const SectionItem = ({
+  text,
+  isActive,
+  isDisabled,
+  isSection,
+  isSubsection,
+  notificationsNumber,
+  onClick,
+}: SectionItemProps) => {
+  const isClickable = !!onClick;
+  const clickableContainerClass = isClickable ? 'hover:bg-gray-1 hover:bg-gray-5' : '';
+  const activeContainerClass = isActive ? 'bg-primary' : clickableContainerClass;
+  const containerClass = isDisabled ? '' : activeContainerClass;
+  const clickableClass = isClickable ? 'hover:cursor-pointer' : '';
+  const activeTextClass = isActive ? 'text-white' : 'text-gray-80';
+  const disabledTextClass = isDisabled ? 'text-gray-40' : activeTextClass;
+  const sectionTextClass = isSection ? 'font-semibold' : '';
+  const subsectionTextClass = isSubsection ? 'px-3' : '';
+  const notificationClass = isActive ? 'bg-white' : ' bg-primary';
+  const notificationTextClass = isActive ? 'text-primary' : 'text-white';
+
+  const Element = isClickable ? 'button' : 'div';
+
+  return (
+    <Element
+      className={`flex h-10 w-full items-center justify-between rounded-lg px-3 py-2
+       ${clickableClass} ${containerClass}`}
+      onClick={onClick}
+      {...(isClickable ? { type: 'button' as const } : {})}
+    >
+      <div className="flex items-center">
+        <span className={`text-base font-normal ${disabledTextClass} ${sectionTextClass} ${subsectionTextClass}`}>
+          {text}
+        </span>
+      </div>
+      {notificationsNumber && notificationsNumber > 0 && (
+        <div className={`flex h-5 min-w-[20px] items-center justify-center rounded-full px-1.5 ${notificationClass}`}>
+          <span className={`text-xs font-normal  ${notificationTextClass}`}>{notificationsNumber}</span>
+        </div>
+      )}
+    </Element>
+  );
+};
+
+export default SectionItem;
diff --git a/src/components/preferences/components/SectionList.tsx b/src/components/preferences/components/SectionList.tsx
new file mode 100644
index 0000000..c62cfa2
--- /dev/null
+++ b/src/components/preferences/components/SectionList.tsx
@@ -0,0 +1,30 @@
+import type { PreferencesActivePath, PreferencesSectionItem } from '@/types/preferences';
+import SectionItem from './SectionItem';
+
+interface SectionListProps {
+  sectionItems: (PreferencesSectionItem & { text: string })[];
+  activePath: PreferencesActivePath;
+  onSelectSection: (path: PreferencesActivePath) => void;
+}
+
+const SectionList = ({ sectionItems, activePath, onSelectSection }: SectionListProps) => {
+  return (
+    <div className="overflow-x-auto">
+      {sectionItems.map((item) => {
+        const isActive = item.section === activePath.section && item.subsection === activePath.subsection;
+
+        return (
+          <SectionItem
+            key={`${item.section}-${item.subsection}`}
+            text={item.text}
+            isActive={isActive}
+            isSubsection={item.isSubsection}
+            onClick={() => onSelectSection({ section: item.section, subsection: item.subsection })}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default SectionList;
diff --git a/src/components/preferences/components/SectionListWrapper.tsx b/src/components/preferences/components/SectionListWrapper.tsx
new file mode 100644
index 0000000..1517e98
--- /dev/null
+++ b/src/components/preferences/components/SectionListWrapper.tsx
@@ -0,0 +1,21 @@
+import { useTranslationContext } from '@/i18n';
+import { PREFERENCES_DEFAULT_SECTIONS, type PreferencesActivePath } from '@/types/preferences';
+import SectionList from './SectionList';
+
+interface SectionListWrapperProps {
+  activePath: PreferencesActivePath;
+  onSelectSection: (path: PreferencesActivePath) => void;
+}
+
+const SectionListWrapper = ({ activePath, onSelectSection }: SectionListWrapperProps) => {
+  const { translate } = useTranslationContext();
+
+  const sectionItems = PREFERENCES_DEFAULT_SECTIONS.map((item) => ({
+    ...item,
+    text: translate(`modals.preferences.sections.${item.subsection ?? item.section}.title`),
+  }));
+
+  return <SectionList sectionItems={sectionItems} activePath={activePath} onSelectSection={onSelectSection} />;
+};
+
+export default SectionListWrapper;
diff --git a/src/components/preferences/index.tsx b/src/components/preferences/index.tsx
new file mode 100644
index 0000000..5371fa5
--- /dev/null
+++ b/src/components/preferences/index.tsx
@@ -0,0 +1,32 @@
+import { usePreferencesNavigation } from '@/hooks/preferences/usePreferencesNavigation';
+import { useTranslationContext } from '@/i18n';
+import { Modal } from '@internxt/ui';
+import { useEffect } from 'react';
+import SectionListWrapper from './components/SectionListWrapper';
+
+export const PreferencesDialog = () => {
+  const { translate } = useTranslationContext();
+  const { isOpen, activePath, openSection, close } = usePreferencesNavigation();
+
+  const title = translate(`modals.preferences.sections.${activePath.subsection ?? activePath.section}.title`);
+
+  useEffect(() => {
+    if (isOpen) {
+      document.title = `${title} | Internxt Mail`;
+    }
+  }, [isOpen, title]);
+
+  return (
+    <Modal
+      maxWidth="max-w-4xl"
+      className="m-0 flex max-h-640 h-screen overflow-hidden shadow-sm"
+      isOpen={isOpen}
+      onClose={close}
+    >
+      <section className="w-56 shrink-0 border-r border-gray-10 px-2.5">
+        <h1 className="py-3 pl-4 text-xl font-semibold">{translate('modals.preferences.title')}</h1>
+        <SectionListWrapper activePath={activePath} onSelectSection={openSection} />
+      </section>
+    </Modal>
+  );
+};
diff --git a/src/context/dialog-manager/types/index.ts b/src/context/dialog-manager/types/index.ts
index e65ea9d..4e65f8a 100644
--- a/src/context/dialog-manager/types/index.ts
+++ b/src/context/dialog-manager/types/index.ts
@@ -1,6 +1,5 @@
 export enum ActionDialog {
   ComposeMessage = 'compose-message',
-  Settings = 'settings',
 }
 
 export interface ActionDialogState {
diff --git a/src/hooks/preferences/usePreferencesNavigation.tsx b/src/hooks/preferences/usePreferencesNavigation.tsx
new file mode 100644
index 0000000..baef92e
--- /dev/null
+++ b/src/hooks/preferences/usePreferencesNavigation.tsx
@@ -0,0 +1,51 @@
+import { useSearchParams } from 'react-router-dom';
+import { useCallback, useMemo } from 'react';
+import {
+  PREFERENCES_DEFAULT_SECTIONS,
+  type PreferencesActivePath,
+  type PreferencesSection,
+  type PreferencesSubsection,
+} from '@/types/preferences';
+
+const DEFAULT_SECTION: PreferencesActivePath = {
+  section: 'general',
+  subsection: 'general',
+};
+
+const isValidSection = (value: string): value is PreferencesSection => {
+  return PREFERENCES_DEFAULT_SECTIONS.some((item) => item.section === value);
+};
+
+const isValidSubsection = (section: string, value: string): value is PreferencesSubsection => {
+  return PREFERENCES_DEFAULT_SECTIONS.some((item) => item.section === section && item.subsection === value);
+};
+
+export const usePreferencesNavigation = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const isOpen = searchParams.get('preferences') === 'open';
+
+  const activePath: PreferencesActivePath = useMemo(() => {
+    const section = searchParams.get('section');
+    const subsection = searchParams.get('subsection');
+
+    if (section && isValidSection(section) && subsection && isValidSubsection(section, subsection)) {
+      return { section, subsection };
+    }
+
+    return DEFAULT_SECTION;
+  }, [searchParams]);
+
+  const openSection = useCallback(
+    ({ section, subsection }: PreferencesActivePath) => {
+      setSearchParams({ preferences: 'open', section, subsection }, { replace: true });
+    },
+    [setSearchParams],
+  );
+
+  const close = useCallback(() => {
+    setSearchParams({}, { replace: true });
+  }, [setSearchParams]);
+
+  return { isOpen, activePath, openSection, close };
+};
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 66fd3b9..69ed961 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -113,6 +113,28 @@
         "title": "Unlock Cleaner",
         "description": "Upgrade now to keep your files optimized and free up space."
       }
+    },
+    "preferences": {
+      "title": "Preferences",
+      "sections": {
+        "general": {
+          "title": "General",
+          "appearance": {
+            "title": "Appearance",
+            "dark": "Dark",
+            "light": "Light",
+            "system": "System"
+          },
+          "language": {
+            "title": "Language",
+            "en": "English (English)",
+            "es": "Español (Spanish)",
+            "fr": "Français (French)",
+            "it": "Italiano (Italian)"
+          },
+          "support": "Support"
+        }
+      }
     }
   }
 }
diff --git a/src/types/preferences/index.ts b/src/types/preferences/index.ts
new file mode 100644
index 0000000..aba7d2e
--- /dev/null
+++ b/src/types/preferences/index.ts
@@ -0,0 +1,20 @@
+export type PreferencesSection = 'general';
+export type PreferencesSubsection = 'general';
+
+export interface PreferencesSectionItem {
+  section: PreferencesSection;
+  subsection: PreferencesSubsection;
+  isSubsection?: boolean;
+}
+
+export interface PreferencesActivePath {
+  section: PreferencesSection;
+  subsection: PreferencesSubsection;
+}
+
+export const PREFERENCES_DEFAULT_SECTIONS: PreferencesSectionItem[] = [
+  {
+    section: 'general',
+    subsection: 'general',
+  },
+];

From 4c7d721072975e97def56ae8a25c0ba912b9240f Mon Sep 17 00:00:00 2001
From: Xavier Abad <77491413+xabg2@users.noreply.github.com>
Date: Tue, 24 Mar 2026 16:55:59 +0100
Subject: [PATCH 2/7] refactor: use only one param to identify the active tab

---
 .../preferences/components/Section.tsx        |  6 ++--
 .../preferences/components/SectionList.tsx    | 29 +++++++---------
 .../components/SectionListWrapper.tsx         | 14 ++++----
 src/components/preferences/index.tsx          | 17 ++++++++--
 .../preferences/sections/general/index.tsx    | 14 ++++++++
 .../preferences/usePreferencesNavigation.tsx  | 33 ++++++-------------
 src/types/preferences/index.ts                | 18 ++--------
 7 files changed, 63 insertions(+), 68 deletions(-)
 create mode 100644 src/components/preferences/sections/general/index.tsx

diff --git a/src/components/preferences/components/Section.tsx b/src/components/preferences/components/Section.tsx
index 96fec1c..c23896b 100644
--- a/src/components/preferences/components/Section.tsx
+++ b/src/components/preferences/components/Section.tsx
@@ -6,13 +6,13 @@ const Section = ({
   children,
   title,
   onBackButtonClicked,
-  onClosePreferences,
+  onClose,
 }: {
   className?: string;
   children: ReactNode;
   title: string;
   onBackButtonClicked?: () => void;
-  onClosePreferences: () => void;
+  onClose: () => void;
 }): JSX.Element => {
   return (
     <div className={`relative w-full rounded-tr-2xl ${className}`}>
@@ -29,7 +29,7 @@ const Section = ({
         </div>
         <button
           className="flex h-9 w-9 items-center justify-center rounded-md hover:bg-highlight/4 active:bg-highlight/8"
-          onClick={() => onClosePreferences()}
+          onClick={() => onClose()}
         >
           <XIcon size={22} />
         </button>
diff --git a/src/components/preferences/components/SectionList.tsx b/src/components/preferences/components/SectionList.tsx
index c62cfa2..7eaf9e1 100644
--- a/src/components/preferences/components/SectionList.tsx
+++ b/src/components/preferences/components/SectionList.tsx
@@ -1,28 +1,23 @@
-import type { PreferencesActivePath, PreferencesSectionItem } from '@/types/preferences';
+import type { PreferencesSection, PreferencesSectionItem } from '@/types/preferences';
 import SectionItem from './SectionItem';
 
 interface SectionListProps {
   sectionItems: (PreferencesSectionItem & { text: string })[];
-  activePath: PreferencesActivePath;
-  onSelectSection: (path: PreferencesActivePath) => void;
+  activeSection: PreferencesSection;
+  onSelectSection: (section: PreferencesSection) => void;
 }
 
-const SectionList = ({ sectionItems, activePath, onSelectSection }: SectionListProps) => {
+const SectionList = ({ sectionItems, activeSection, onSelectSection }: SectionListProps) => {
   return (
     <div className="overflow-x-auto">
-      {sectionItems.map((item) => {
-        const isActive = item.section === activePath.section && item.subsection === activePath.subsection;
-
-        return (
-          <SectionItem
-            key={`${item.section}-${item.subsection}`}
-            text={item.text}
-            isActive={isActive}
-            isSubsection={item.isSubsection}
-            onClick={() => onSelectSection({ section: item.section, subsection: item.subsection })}
-          />
-        );
-      })}
+      {sectionItems.map((item) => (
+        <SectionItem
+          key={item.id}
+          text={item.text}
+          isActive={item.id === activeSection}
+          onClick={() => onSelectSection(item.id)}
+        />
+      ))}
     </div>
   );
 };
diff --git a/src/components/preferences/components/SectionListWrapper.tsx b/src/components/preferences/components/SectionListWrapper.tsx
index 1517e98..361ada6 100644
--- a/src/components/preferences/components/SectionListWrapper.tsx
+++ b/src/components/preferences/components/SectionListWrapper.tsx
@@ -1,21 +1,21 @@
 import { useTranslationContext } from '@/i18n';
-import { PREFERENCES_DEFAULT_SECTIONS, type PreferencesActivePath } from '@/types/preferences';
+import { PREFERENCES_SECTIONS, type PreferencesSection } from '@/types/preferences';
 import SectionList from './SectionList';
 
 interface SectionListWrapperProps {
-  activePath: PreferencesActivePath;
-  onSelectSection: (path: PreferencesActivePath) => void;
+  activeSection: PreferencesSection;
+  onSelectSection: (section: PreferencesSection) => void;
 }
 
-const SectionListWrapper = ({ activePath, onSelectSection }: SectionListWrapperProps) => {
+const SectionListWrapper = ({ activeSection, onSelectSection }: SectionListWrapperProps) => {
   const { translate } = useTranslationContext();
 
-  const sectionItems = PREFERENCES_DEFAULT_SECTIONS.map((item) => ({
+  const sectionItems = PREFERENCES_SECTIONS.map((item) => ({
     ...item,
-    text: translate(`modals.preferences.sections.${item.subsection ?? item.section}.title`),
+    text: translate(`modals.preferences.sections.${item.id}.title`),
   }));
 
-  return <SectionList sectionItems={sectionItems} activePath={activePath} onSelectSection={onSelectSection} />;
+  return <SectionList sectionItems={sectionItems} activeSection={activeSection} onSelectSection={onSelectSection} />;
 };
 
 export default SectionListWrapper;
diff --git a/src/components/preferences/index.tsx b/src/components/preferences/index.tsx
index 5371fa5..5af2f6e 100644
--- a/src/components/preferences/index.tsx
+++ b/src/components/preferences/index.tsx
@@ -1,14 +1,21 @@
 import { usePreferencesNavigation } from '@/hooks/preferences/usePreferencesNavigation';
 import { useTranslationContext } from '@/i18n';
+import type { PreferencesSection } from '@/types/preferences';
 import { Modal } from '@internxt/ui';
+import type { FC } from 'react';
 import { useEffect } from 'react';
 import SectionListWrapper from './components/SectionListWrapper';
+import GeneralSection from './sections/general';
+
+const SECTION_COMPONENTS: Record<PreferencesSection, FC<{ onClose: () => void }>> = {
+  general: GeneralSection,
+};
 
 export const PreferencesDialog = () => {
   const { translate } = useTranslationContext();
-  const { isOpen, activePath, openSection, close } = usePreferencesNavigation();
+  const { isOpen, activeSection, openSection, close } = usePreferencesNavigation();
 
-  const title = translate(`modals.preferences.sections.${activePath.subsection ?? activePath.section}.title`);
+  const title = translate(`modals.preferences.sections.${activeSection}.title`);
 
   useEffect(() => {
     if (isOpen) {
@@ -16,6 +23,8 @@ export const PreferencesDialog = () => {
     }
   }, [isOpen, title]);
 
+  const ActiveSectionComponent = SECTION_COMPONENTS[activeSection];
+
   return (
     <Modal
       maxWidth="max-w-4xl"
@@ -25,8 +34,10 @@ export const PreferencesDialog = () => {
     >
       <section className="w-56 shrink-0 border-r border-gray-10 px-2.5">
         <h1 className="py-3 pl-4 text-xl font-semibold">{translate('modals.preferences.title')}</h1>
-        <SectionListWrapper activePath={activePath} onSelectSection={openSection} />
+        <SectionListWrapper activeSection={activeSection} onSelectSection={openSection} />
       </section>
+
+      <ActiveSectionComponent onClose={close} />
     </Modal>
   );
 };
diff --git a/src/components/preferences/sections/general/index.tsx b/src/components/preferences/sections/general/index.tsx
new file mode 100644
index 0000000..765eb25
--- /dev/null
+++ b/src/components/preferences/sections/general/index.tsx
@@ -0,0 +1,14 @@
+import { useTranslationContext } from '@/i18n';
+import Section from '../../components/Section';
+
+const GeneralSection = ({ onClose }: { onClose: () => void }) => {
+  const { translate } = useTranslationContext();
+  return (
+    <Section className="max-w-2xl" title={translate('modals.preferences.sections.general.title')} onClose={onClose}>
+      {/* TODO: Add appearance, language and support components */}
+      <p>{translate('modals.preferences.sections.general.title')}</p>
+    </Section>
+  );
+};
+
+export default GeneralSection;
diff --git a/src/hooks/preferences/usePreferencesNavigation.tsx b/src/hooks/preferences/usePreferencesNavigation.tsx
index baef92e..189f51d 100644
--- a/src/hooks/preferences/usePreferencesNavigation.tsx
+++ b/src/hooks/preferences/usePreferencesNavigation.tsx
@@ -1,23 +1,11 @@
 import { useSearchParams } from 'react-router-dom';
 import { useCallback, useMemo } from 'react';
-import {
-  PREFERENCES_DEFAULT_SECTIONS,
-  type PreferencesActivePath,
-  type PreferencesSection,
-  type PreferencesSubsection,
-} from '@/types/preferences';
-
-const DEFAULT_SECTION: PreferencesActivePath = {
-  section: 'general',
-  subsection: 'general',
-};
+import { PREFERENCES_SECTIONS, type PreferencesSection } from '@/types/preferences';
 
-const isValidSection = (value: string): value is PreferencesSection => {
-  return PREFERENCES_DEFAULT_SECTIONS.some((item) => item.section === value);
-};
+const DEFAULT_SECTION: PreferencesSection = 'general';
 
-const isValidSubsection = (section: string, value: string): value is PreferencesSubsection => {
-  return PREFERENCES_DEFAULT_SECTIONS.some((item) => item.section === section && item.subsection === value);
+const isValidSection = (value: string): value is PreferencesSection => {
+  return PREFERENCES_SECTIONS.some((item) => item.id === value);
 };
 
 export const usePreferencesNavigation = () => {
@@ -25,20 +13,19 @@ export const usePreferencesNavigation = () => {
 
   const isOpen = searchParams.get('preferences') === 'open';
 
-  const activePath: PreferencesActivePath = useMemo(() => {
+  const activeSection: PreferencesSection = useMemo(() => {
     const section = searchParams.get('section');
-    const subsection = searchParams.get('subsection');
 
-    if (section && isValidSection(section) && subsection && isValidSubsection(section, subsection)) {
-      return { section, subsection };
+    if (section && isValidSection(section)) {
+      return section;
     }
 
     return DEFAULT_SECTION;
   }, [searchParams]);
 
   const openSection = useCallback(
-    ({ section, subsection }: PreferencesActivePath) => {
-      setSearchParams({ preferences: 'open', section, subsection }, { replace: true });
+    (section: PreferencesSection) => {
+      setSearchParams({ preferences: 'open', section }, { replace: true });
     },
     [setSearchParams],
   );
@@ -47,5 +34,5 @@ export const usePreferencesNavigation = () => {
     setSearchParams({}, { replace: true });
   }, [setSearchParams]);
 
-  return { isOpen, activePath, openSection, close };
+  return { isOpen, activeSection, openSection, close };
 };
diff --git a/src/types/preferences/index.ts b/src/types/preferences/index.ts
index aba7d2e..5361065 100644
--- a/src/types/preferences/index.ts
+++ b/src/types/preferences/index.ts
@@ -1,20 +1,8 @@
 export type PreferencesSection = 'general';
-export type PreferencesSubsection = 'general';
 
 export interface PreferencesSectionItem {
-  section: PreferencesSection;
-  subsection: PreferencesSubsection;
-  isSubsection?: boolean;
+  id: PreferencesSection;
+  group?: string;
 }
 
-export interface PreferencesActivePath {
-  section: PreferencesSection;
-  subsection: PreferencesSubsection;
-}
-
-export const PREFERENCES_DEFAULT_SECTIONS: PreferencesSectionItem[] = [
-  {
-    section: 'general',
-    subsection: 'general',
-  },
-];
+export const PREFERENCES_SECTIONS: PreferencesSectionItem[] = [{ id: 'general' }];

From 6e56c87fbfaac736c02c3ab31d3573974871854a Mon Sep 17 00:00:00 2001
From: Xavier Abad <77491413+xabg2@users.noreply.github.com>
Date: Tue, 24 Mar 2026 17:38:49 +0100
Subject: [PATCH 3/7] feat: add settings component to open Preferences Dialog

---
 src/features/mail/MailView.tsx                |  8 +++-
 .../mail/components/settings/index.tsx        | 45 +++++++++++++++++++
 src/routes/layouts/SidebarAndHeaderLayout.tsx |  3 ++
 3 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 src/features/mail/components/settings/index.tsx

diff --git a/src/features/mail/MailView.tsx b/src/features/mail/MailView.tsx
index 3603606..8c6590b 100644
--- a/src/features/mail/MailView.tsx
+++ b/src/features/mail/MailView.tsx
@@ -4,6 +4,7 @@ import { getMockedMail } from '@/test-utils/fixtures';
 import PreviewMail from './components/mail-preview';
 import type { User } from './components/mail-preview/header';
 import TrayList from './components/tray';
+import Settings from './components/settings';
 
 interface MailViewProps {
   folder: FolderType;
@@ -24,7 +25,12 @@ const MailView = ({ folder }: MailViewProps) => {
       {/* Tray */}
       <TrayList folderName={folderName} />
       {/* Mail Preview */}
-      <PreviewMail bcc={bcc} cc={cc as User[]} from={from} to={to} mail={mockedMail} />
+      <div className="flex flex-col w-full gap-5">
+        <div className="flex w-full justify-end">
+          <Settings />
+        </div>
+        <PreviewMail bcc={bcc} cc={cc as User[]} from={from} to={to} mail={mockedMail} />
+      </div>
     </div>
   );
 };
diff --git a/src/features/mail/components/settings/index.tsx b/src/features/mail/components/settings/index.tsx
new file mode 100644
index 0000000..4256b20
--- /dev/null
+++ b/src/features/mail/components/settings/index.tsx
@@ -0,0 +1,45 @@
+import { usePreferencesNavigation } from '@/hooks/preferences/usePreferencesNavigation';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { logoutThunk } from '@/store/slices/user/thunks';
+import { Avatar, Button, Dropdown } from '@internxt/ui';
+import { GearIcon } from '@phosphor-icons/react';
+
+const Settings = () => {
+  const dispatch = useAppDispatch();
+  const user = useAppSelector((state) => state.user.user);
+  const { openSection } = usePreferencesNavigation();
+
+  if (!user) return null;
+
+  const openPreferences = () => {
+    openSection('general');
+  };
+
+  const onLogOut = async () => {
+    await dispatch(logoutThunk());
+  };
+
+  const dropdownActions = [
+    {
+      name: 'Settings',
+      onClick: openPreferences,
+    },
+    {
+      name: 'Logout',
+      onClick: onLogOut,
+    },
+  ];
+
+  return (
+    <div className="flex flex-row w-full gap-1 items-center justify-end p-4">
+      <Button variant="ghost" onClick={openPreferences}>
+        <GearIcon size={24} />
+      </Button>
+      <Dropdown classMenuItems="" openDirection="left" dropdownActionsContext={dropdownActions}>
+        <Avatar fullName={user.name} src={user.avatar} diameter={40} />
+      </Dropdown>
+    </div>
+  );
+};
+
+export default Settings;
diff --git a/src/routes/layouts/SidebarAndHeaderLayout.tsx b/src/routes/layouts/SidebarAndHeaderLayout.tsx
index 4a49ecb..22d5233 100644
--- a/src/routes/layouts/SidebarAndHeaderLayout.tsx
+++ b/src/routes/layouts/SidebarAndHeaderLayout.tsx
@@ -1,6 +1,7 @@
 import { Outlet } from 'react-router-dom';
 import { Suspense } from 'react';
 import Sidenav from '@/components/Sidenav';
+import { PreferencesDialog } from '@/components/preferences';
 
 /**
  * App layout (contains the static components like the sidebar)
@@ -15,6 +16,8 @@ const SidebarAndHeaderLayout = () => {
           <Outlet />
         </Suspense>
       </main>
+
+      <PreferencesDialog />
     </div>
   );
 };

From 834009867246722118209d4a49000290c1979ee2 Mon Sep 17 00:00:00 2001
From: Xavier Abad <77491413+xabg2@users.noreply.github.com>
Date: Tue, 24 Mar 2026 18:17:30 +0100
Subject: [PATCH 4/7] feat: account popover

---
 .../components/account-popover/index.tsx      | 86 +++++++++++++++++++
 .../mail/components/settings/index.tsx        | 34 ++++----
 src/i18n/locales/en.json                      |  5 ++
 3 files changed, 107 insertions(+), 18 deletions(-)
 create mode 100644 src/features/mail/components/settings/components/account-popover/index.tsx

diff --git a/src/features/mail/components/settings/components/account-popover/index.tsx b/src/features/mail/components/settings/components/account-popover/index.tsx
new file mode 100644
index 0000000..2886f17
--- /dev/null
+++ b/src/features/mail/components/settings/components/account-popover/index.tsx
@@ -0,0 +1,86 @@
+import { useTranslationContext } from '@/i18n';
+import type { UserSettings } from '@internxt/sdk/dist/shared/types/userSettings';
+import { Avatar, Popover } from '@internxt/ui';
+import { GearIcon, SignOutIcon } from '@phosphor-icons/react';
+import type { ReactNode } from 'react';
+
+interface AccountPopoverProps {
+  className?: string;
+  user: UserSettings;
+  percentageUsed?: number;
+  onLogout: () => void;
+  openPreferences: () => void;
+}
+
+export default function AccountPopover({
+  className = '',
+  user,
+  percentageUsed,
+  onLogout,
+  openPreferences,
+}: Readonly<AccountPopoverProps>): JSX.Element {
+  const { translate } = useTranslationContext();
+  const name = user?.name ?? '';
+  const lastName = user?.lastname ?? '';
+  const fullName = name + ' ' + lastName;
+
+  const avatarWrapper = <Avatar diameter={36} style={{ minWidth: 36 }} fullName={fullName} src={user.avatar} />;
+
+  const separator = <div className="border-translate mx-3 my-0.5 border-gray-10" />;
+
+  const panel = (
+    <div className="w-52">
+      <div className="flex items-center p-3">
+        {avatarWrapper}
+        <div className="ml-2 min-w-0">
+          <p className="truncate font-medium text-gray-80" title={fullName} style={{ lineHeight: 1 }}>
+            {fullName}
+          </p>
+          <p className="truncate text-sm text-gray-50" title={user.email}>
+            {user.email}
+          </p>
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between px-3 pb-1">
+        <p className="text-sm text-gray-50">{translate('accountPopover.spaceUsed', { space: percentageUsed })}</p>
+      </div>
+      {separator}
+      <button
+        className="flex w-full cursor-pointer items-center px-3 py-2 text-gray-80 no-underline hover:bg-gray-1 hover:text-gray-80 dark:hover:bg-gray-10"
+        onClick={openPreferences}
+      >
+        <GearIcon size={20} />
+        <p className="ml-3">{translate('accountPopover.settings')}</p>
+      </button>
+      <Item onClick={onLogout}>
+        <SignOutIcon size={20} />
+        <p className="ml-3 truncate" data-test="logout">
+          {translate('accountPopover.logout')}
+        </p>
+      </Item>
+    </div>
+  );
+
+  return (
+    <Popover className={className} childrenButton={avatarWrapper} panel={() => panel} data-test="app-header-dropdown" />
+  );
+}
+
+interface ItemProps {
+  children: ReactNode;
+  onClick: () => void;
+}
+
+function Item({ children, onClick }: Readonly<ItemProps>) {
+  return (
+    <div
+      role="none"
+      className="flex cursor-pointer items-center px-3 py-2 text-gray-80 hover:bg-gray-1 dark:hover:bg-gray-10"
+      style={{ lineHeight: 1.25 }}
+      onClick={onClick}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/src/features/mail/components/settings/index.tsx b/src/features/mail/components/settings/index.tsx
index 4256b20..2078542 100644
--- a/src/features/mail/components/settings/index.tsx
+++ b/src/features/mail/components/settings/index.tsx
@@ -1,43 +1,41 @@
 import { usePreferencesNavigation } from '@/hooks/preferences/usePreferencesNavigation';
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
-import { logoutThunk } from '@/store/slices/user/thunks';
-import { Avatar, Button, Dropdown } from '@internxt/ui';
+import { useGetStorageLimitQuery, useGetStorageUsageQuery } from '@/store/queries/storage/storage.query';
+import { Button } from '@internxt/ui';
 import { GearIcon } from '@phosphor-icons/react';
+import AccountPopover from './components/account-popover';
+import { logoutThunk } from '@/store/slices/user/thunks';
 
 const Settings = () => {
   const dispatch = useAppDispatch();
   const user = useAppSelector((state) => state.user.user);
+  const { data: usage } = useGetStorageUsageQuery();
+  const { data: limit } = useGetStorageLimitQuery();
   const { openSection } = usePreferencesNavigation();
 
+  const percentageUsed = usage != null && limit ? Math.round((usage / limit) * 100) : 0;
+
   if (!user) return null;
 
   const openPreferences = () => {
     openSection('general');
   };
 
-  const onLogOut = async () => {
-    await dispatch(logoutThunk());
+  const onLogout = () => {
+    dispatch(logoutThunk());
   };
 
-  const dropdownActions = [
-    {
-      name: 'Settings',
-      onClick: openPreferences,
-    },
-    {
-      name: 'Logout',
-      onClick: onLogOut,
-    },
-  ];
-
   return (
     <div className="flex flex-row w-full gap-1 items-center justify-end p-4">
       <Button variant="ghost" onClick={openPreferences}>
         <GearIcon size={24} />
       </Button>
-      <Dropdown classMenuItems="" openDirection="left" dropdownActionsContext={dropdownActions}>
-        <Avatar fullName={user.name} src={user.avatar} diameter={40} />
-      </Dropdown>
+      <AccountPopover
+        user={user}
+        percentageUsed={percentageUsed}
+        openPreferences={openPreferences}
+        onLogout={onLogout}
+      />
     </div>
   );
 };
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 69ed961..d30ecb2 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -136,5 +136,10 @@
         }
       }
     }
+  },
+  "accountPopover": {
+    "spaceUsed": "{{space}}% space used",
+    "settings": "Settings",
+    "logout": "Log out"
   }
 }

From df459d16054f597f556d8c119ed3da64daec787e Mon Sep 17 00:00:00 2001
From: Xavier Abad <77491413+xabg2@users.noreply.github.com>
Date: Tue, 24 Mar 2026 18:42:16 +0100
Subject: [PATCH 5/7] fix: make percentage used mandatory

---
 src/components/preferences/components/SectionItem.tsx    | 8 ++++----
 src/components/preferences/index.tsx                     | 9 ++++++---
 .../settings/components/account-popover/index.tsx        | 7 +++----
 src/features/mail/components/settings/index.tsx          | 2 +-
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/preferences/components/SectionItem.tsx b/src/components/preferences/components/SectionItem.tsx
index 7836d33..0ff960d 100644
--- a/src/components/preferences/components/SectionItem.tsx
+++ b/src/components/preferences/components/SectionItem.tsx
@@ -17,8 +17,8 @@ const SectionItem = ({
   notificationsNumber,
   onClick,
 }: SectionItemProps) => {
-  const isClickable = !!onClick;
-  const clickableContainerClass = isClickable ? 'hover:bg-gray-1 hover:bg-gray-5' : '';
+  const isClickable = !!onClick && !isDisabled;
+  const clickableContainerClass = isClickable ? 'hover:bg-gray-5' : '';
   const activeContainerClass = isActive ? 'bg-primary' : clickableContainerClass;
   const containerClass = isDisabled ? '' : activeContainerClass;
   const clickableClass = isClickable ? 'hover:cursor-pointer' : '';
@@ -35,7 +35,7 @@ const SectionItem = ({
     <Element
       className={`flex h-10 w-full items-center justify-between rounded-lg px-3 py-2
        ${clickableClass} ${containerClass}`}
-      onClick={onClick}
+      onClick={isDisabled ? undefined : onClick}
       {...(isClickable ? { type: 'button' as const } : {})}
     >
       <div className="flex items-center">
@@ -44,7 +44,7 @@ const SectionItem = ({
         </span>
       </div>
       {notificationsNumber && notificationsNumber > 0 && (
-        <div className={`flex h-5 min-w-[20px] items-center justify-center rounded-full px-1.5 ${notificationClass}`}>
+        <div className={`flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 ${notificationClass}`}>
           <span className={`text-xs font-normal  ${notificationTextClass}`}>{notificationsNumber}</span>
         </div>
       )}
diff --git a/src/components/preferences/index.tsx b/src/components/preferences/index.tsx
index 5af2f6e..4116bd0 100644
--- a/src/components/preferences/index.tsx
+++ b/src/components/preferences/index.tsx
@@ -18,9 +18,12 @@ export const PreferencesDialog = () => {
   const title = translate(`modals.preferences.sections.${activeSection}.title`);
 
   useEffect(() => {
-    if (isOpen) {
-      document.title = `${title} | Internxt Mail`;
-    }
+    if (!isOpen) return;
+    const previousTitle = document.title;
+    document.title = `${title} | Internxt Mail`;
+    return () => {
+      document.title = previousTitle;
+    };
   }, [isOpen, title]);
 
   const ActiveSectionComponent = SECTION_COMPONENTS[activeSection];
diff --git a/src/features/mail/components/settings/components/account-popover/index.tsx b/src/features/mail/components/settings/components/account-popover/index.tsx
index 2886f17..3a2befa 100644
--- a/src/features/mail/components/settings/components/account-popover/index.tsx
+++ b/src/features/mail/components/settings/components/account-popover/index.tsx
@@ -7,7 +7,7 @@ import type { ReactNode } from 'react';
 interface AccountPopoverProps {
   className?: string;
   user: UserSettings;
-  percentageUsed?: number;
+  percentageUsed: number;
   onLogout: () => void;
   openPreferences: () => void;
 }
@@ -74,13 +74,12 @@ interface ItemProps {
 
 function Item({ children, onClick }: Readonly<ItemProps>) {
   return (
-    <div
-      role="none"
+    <button
       className="flex cursor-pointer items-center px-3 py-2 text-gray-80 hover:bg-gray-1 dark:hover:bg-gray-10"
       style={{ lineHeight: 1.25 }}
       onClick={onClick}
     >
       {children}
-    </div>
+    </button>
   );
 }
diff --git a/src/features/mail/components/settings/index.tsx b/src/features/mail/components/settings/index.tsx
index 2078542..b568bab 100644
--- a/src/features/mail/components/settings/index.tsx
+++ b/src/features/mail/components/settings/index.tsx
@@ -13,7 +13,7 @@ const Settings = () => {
   const { data: limit } = useGetStorageLimitQuery();
   const { openSection } = usePreferencesNavigation();
 
-  const percentageUsed = usage != null && limit ? Math.round((usage / limit) * 100) : 0;
+  const percentageUsed = usage != null && limit != null && limit > 0 ? Math.round((usage / limit) * 100) : 0;
 
   if (!user) return null;
 

From 33cdfcfe3500e55a10dfbe94e7fe521e6fa46b89 Mon Sep 17 00:00:00 2001
From: Xavier Abad <77491413+xabg2@users.noreply.github.com>
Date: Tue, 24 Mar 2026 18:48:32 +0100
Subject: [PATCH 6/7] fix: remove useless JSX.Element cast

---
 src/components/preferences/components/Section.tsx    | 12 ++++--------
 .../settings/components/account-popover/index.tsx    |  2 +-
 src/features/mail/components/settings/index.tsx      |  2 +-
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/components/preferences/components/Section.tsx b/src/components/preferences/components/Section.tsx
index c23896b..0eed257 100644
--- a/src/components/preferences/components/Section.tsx
+++ b/src/components/preferences/components/Section.tsx
@@ -1,19 +1,15 @@
 import { type ReactNode } from 'react';
 import { CaretLeftIcon, XIcon } from '@phosphor-icons/react';
 
-const Section = ({
-  className = '',
-  children,
-  title,
-  onBackButtonClicked,
-  onClose,
-}: {
+interface SectionProps {
   className?: string;
   children: ReactNode;
   title: string;
   onBackButtonClicked?: () => void;
   onClose: () => void;
-}): JSX.Element => {
+}
+
+const Section = ({ className = '', children, title, onBackButtonClicked, onClose }: SectionProps) => {
   return (
     <div className={`relative w-full rounded-tr-2xl ${className}`}>
       <div className="absolute z-50 flex w-full items-center justify-between rounded-tr-2xl p-2.5 pl-6 before:absolute before:inset-0 before:-z-1 before:bg-surface/85 before:backdrop-blur-3xl before:transition-colors">
diff --git a/src/features/mail/components/settings/components/account-popover/index.tsx b/src/features/mail/components/settings/components/account-popover/index.tsx
index 3a2befa..0d67b98 100644
--- a/src/features/mail/components/settings/components/account-popover/index.tsx
+++ b/src/features/mail/components/settings/components/account-popover/index.tsx
@@ -18,7 +18,7 @@ export default function AccountPopover({
   percentageUsed,
   onLogout,
   openPreferences,
-}: Readonly<AccountPopoverProps>): JSX.Element {
+}: Readonly<AccountPopoverProps>) {
   const { translate } = useTranslationContext();
   const name = user?.name ?? '';
   const lastName = user?.lastname ?? '';
diff --git a/src/features/mail/components/settings/index.tsx b/src/features/mail/components/settings/index.tsx
index b568bab..7f55683 100644
--- a/src/features/mail/components/settings/index.tsx
+++ b/src/features/mail/components/settings/index.tsx
@@ -27,7 +27,7 @@ const Settings = () => {
 
   return (
     <div className="flex flex-row w-full gap-1 items-center justify-end p-4">
-      <Button variant="ghost" onClick={openPreferences}>
+      <Button variant="ghost" onClick={openPreferences} className="px-2!">
         <GearIcon size={24} />
       </Button>
       <AccountPopover

From 1b80892df2dc7b8a07fd8ddb9bd826653d9f01eb Mon Sep 17 00:00:00 2001
From: Xavier Abad <77491413+xabg2@users.noreply.github.com>
Date: Tue, 24 Mar 2026 18:52:32 +0100
Subject: [PATCH 7/7] fix: remove useless props

---
 .../preferences/components/SectionItem.tsx    | 24 ++-----------------
 1 file changed, 2 insertions(+), 22 deletions(-)

diff --git a/src/components/preferences/components/SectionItem.tsx b/src/components/preferences/components/SectionItem.tsx
index 0ff960d..be1cd5a 100644
--- a/src/components/preferences/components/SectionItem.tsx
+++ b/src/components/preferences/components/SectionItem.tsx
@@ -2,21 +2,11 @@ export interface SectionItemProps {
   text: string;
   isActive?: boolean;
   isSection?: boolean;
-  isSubsection?: boolean;
   isDisabled?: boolean;
   onClick?: () => void;
-  notificationsNumber?: number;
 }
 
-const SectionItem = ({
-  text,
-  isActive,
-  isDisabled,
-  isSection,
-  isSubsection,
-  notificationsNumber,
-  onClick,
-}: SectionItemProps) => {
+const SectionItem = ({ text, isActive, isDisabled, isSection, onClick }: SectionItemProps) => {
   const isClickable = !!onClick && !isDisabled;
   const clickableContainerClass = isClickable ? 'hover:bg-gray-5' : '';
   const activeContainerClass = isActive ? 'bg-primary' : clickableContainerClass;
@@ -25,9 +15,6 @@ const SectionItem = ({
   const activeTextClass = isActive ? 'text-white' : 'text-gray-80';
   const disabledTextClass = isDisabled ? 'text-gray-40' : activeTextClass;
   const sectionTextClass = isSection ? 'font-semibold' : '';
-  const subsectionTextClass = isSubsection ? 'px-3' : '';
-  const notificationClass = isActive ? 'bg-white' : ' bg-primary';
-  const notificationTextClass = isActive ? 'text-primary' : 'text-white';
 
   const Element = isClickable ? 'button' : 'div';
 
@@ -39,15 +26,8 @@ const SectionItem = ({
       {...(isClickable ? { type: 'button' as const } : {})}
     >
       <div className="flex items-center">
-        <span className={`text-base font-normal ${disabledTextClass} ${sectionTextClass} ${subsectionTextClass}`}>
-          {text}
-        </span>
+        <span className={`text-base font-normal ${disabledTextClass} ${sectionTextClass}`}>{text}</span>
       </div>
-      {notificationsNumber && notificationsNumber > 0 && (
-        <div className={`flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 ${notificationClass}`}>
-          <span className={`text-xs font-normal  ${notificationTextClass}`}>{notificationsNumber}</span>
-        </div>
-      )}
     </Element>
   );
 };