feat: create dedicated settings page instead of creating many modals

inertia/components/common/floating_navbar/user_dropdown.tsx

@@ -1,11 +1,9 @@
 import { Avatar, Group, Menu, Text, UnstyledButton } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { modals } from '@mantine/modals';
 import cx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { TbChevronDown, TbLogout, TbSettings, TbShield } from 'react-icons/tb';
 import { InternalLinkUnstyled } from '~/components/common/links/internal_link_unstyled';
-import { UserPreferences } from '~/components/common/user_preferences/user_preferences';
 import { useAuth } from '~/hooks/use_auth';
 import classes from './user_dropdown.module.css';
 
@@ -15,13 +13,6 @@ export function UserDropdown() {
 		useDisclosure(false);
 	const { t } = useTranslation();
 
-	const handlePreferencesModal = () => {
-		modals.open({
-			title: t('user-preferences'),
-			children: <UserPreferences />,
-		});
-	};
-
 	return (
 		<Menu
 			width={260}
@@ -64,12 +55,13 @@ export function UserDropdown() {
 					</>
 				)}
 
-				<Menu.Label>{t('common:settings')}</Menu.Label>
+				<Menu.Label>{t('common:user')}</Menu.Label>
 				<Menu.Item
 					leftSection={<TbSettings size={16} />}
-					onClick={handlePreferencesModal}
+					component={InternalLinkUnstyled}
+					href="/user/settings"
 				>
-					{t('common:preferences')}
+					{t('common:settings')}
 				</Menu.Item>
 				<Menu.Item
 					leftSection={<TbLogout size={16} />}