From 6df6880ba3f25e5f24ee3b79662e18a5e1f8b64e Mon Sep 17 00:00:00 2001
From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com>
Date: Fri, 3 Jul 2026 15:59:14 +0700
Subject: [PATCH] refactor: improve layout spacing and enhance preferences menu
 in HeaderLayout

---
 .../layouts/components/header.layout.tsx      | 100 ++++++++++--------
 1 file changed, 54 insertions(+), 46 deletions(-)

diff --git a/apps/web/src/apps/modules/layouts/components/header.layout.tsx b/apps/web/src/apps/modules/layouts/components/header.layout.tsx
index 66ad44a..8920a2f 100644
--- a/apps/web/src/apps/modules/layouts/components/header.layout.tsx
+++ b/apps/web/src/apps/modules/layouts/components/header.layout.tsx
@@ -55,7 +55,7 @@ export default function HeaderLayout() {
       </Group>
 
       {/* 3. RIGHT SECTION (Actions & Profile) */}
-      <Group wrap="nowrap" gap="xs">
+      <Group wrap="nowrap" gap="sm">
         <ActionIcon variant="subtle" color="gray" size="lg" aria-label="Help">
           <HelpCircle size={18} />
         </ActionIcon>
@@ -75,7 +75,7 @@ export default function HeaderLayout() {
                 transition: 'background-color 150ms ease',
               }}
             >
-              <Group gap="sm" wrap="nowrap">
+              <Group gap="sm" wrap="nowrap" pl="sm">
                 <Avatar src={USER.avatar} size={28} radius="xl" color="blue">
                   {getInitials(USER.name)}
                 </Avatar>
@@ -94,8 +94,9 @@ export default function HeaderLayout() {
             </UnstyledButton>
           </Menu.Target>
 
-          <Menu.Dropdown>
-            <Box p="xs" hiddenFrom="sm">
+          <Menu.Dropdown p="md">
+            {/* Mobile User Info */}
+            <Box px="sm" py="xs" hiddenFrom="sm">
               <Text size="sm" fw={600} truncate="end">
                 {USER.name}
               </Text>
@@ -105,56 +106,63 @@ export default function HeaderLayout() {
             </Box>
             <Menu.Divider hiddenFrom="sm" />
 
-            <Box px="sm">
-              <Menu.Label>{t('common:preferences', { ns: 'common' })}</Menu.Label>
-              <Group px="sm" justify="space-between" wrap="nowrap">
-                <Group gap="xs" wrap="nowrap">
-                  <Globe size={14} style={{ opacity: 0.8 }} />
-                  <Text size="sm">{t('common:language', { ns: 'common' })}</Text>
-                </Group>
-                <Select
-                  size="xs"
-                  variant="unstyled"
-                  w={110}
-                  data={[
-                    { value: 'en', label: t('common:english', { ns: 'common' }) },
-                    { value: 'id', label: t('common:indonesian', { ns: 'common' }) },
-                  ]}
-                  value={i18n.resolvedLanguage || i18n.language}
-                  onChange={async (val) => {
-                    if (!val) return;
-                    await i18n.changeLanguage(val);
-                    await secureStorage.setItem(AppStorageKey.LOCALE, val);
-                  }}
-                  styles={{ input: { textAlign: 'right' } }}
-                />
+            {/* Preferences Section */}
+            <Menu.Label>{t('common:preferences')}</Menu.Label>
+
+            {/* Custom Language Item  */}
+            <Group justify="space-between" wrap="nowrap" px="sm" py="xs">
+              <Group gap="sm" wrap="nowrap">
+                <Globe size={14} />
+                <Text size="sm">{t('common:language')}</Text>
               </Group>
-            </Box>
+              <Select
+                size="xs"
+                variant="unstyled"
+                w={110}
+                data={[
+                  { value: 'en', label: t('common:english') },
+                  { value: 'id', label: t('common:indonesian') },
+                ]}
+                value={i18n.resolvedLanguage || i18n.language}
+                onChange={async (val) => {
+                  if (!val) return;
+                  await i18n.changeLanguage(val);
+                  await secureStorage.setItem(AppStorageKey.LOCALE, val);
+                }}
+                styles={{
+                  input: {
+                    textAlign: 'right',
+                    cursor: 'pointer',
+                    height: '22px',
+                    minHeight: '22px',
+                  },
+                  root: {
+                    marginTop: '-4px',
+                    marginBottom: '-4px',
+                  },
+                }}
+              />
+            </Group>
 
             <Menu.Divider />
 
-            <Box px="sm">
-              <Menu.Label>{t('common:application', { ns: 'common' })}</Menu.Label>
-              <Menu.Item leftSection={<Settings size={14} />}>
-                {t('common:accountSettings', { ns: 'common' })}
-              </Menu.Item>
-              <Menu.Item leftSection={<User size={14} />}>{t('common:myProfile', { ns: 'common' })}</Menu.Item>
+            {/* Application Section */}
+            <Menu.Label>{t('common:application')}</Menu.Label>
+            <Menu.Item leftSection={<Settings size={14} />}>{t('common:accountSettings')}</Menu.Item>
+            <Menu.Item leftSection={<User size={14} />}>{t('common:myProfile')}</Menu.Item>
 
-              <Menu.Divider />
+            <Menu.Divider />
 
-              <Menu.Label>{t('common:workspace', { ns: 'common' })}</Menu.Label>
-              <Menu.Item leftSection={<Briefcase size={14} />}>
-                {t('common:switchWorkspace', { ns: 'common' })}
-              </Menu.Item>
-            </Box>
+            {/* Workspace Section */}
+            <Menu.Label>{t('common:workspace')}</Menu.Label>
+            <Menu.Item leftSection={<Briefcase size={14} />}>{t('common:switchWorkspace')}</Menu.Item>
 
-            <Box px="sm">
-              <Menu.Divider />
+            <Menu.Divider />
 
-              <Menu.Item color="red" leftSection={<LogOut size={14} />}>
-                {t('common:signOut', { ns: 'common' })}
-              </Menu.Item>
-            </Box>
+            {/* Sign Out Section */}
+            <Menu.Item color="red" leftSection={<LogOut size={14} />}>
+              {t('common:signOut')}
+            </Menu.Item>
           </Menu.Dropdown>
         </Menu>
       </Group>