feat: create dedicated settings page instead of creating many modals

app/user_settings/controllers/show_user_settings_controller.ts

@@ -0,0 +1,10 @@
+import { HttpContext } from '@adonisjs/core/http';
+
+export default class ShowUserSettingsController {
+	public async render({ auth, inertia }: HttpContext) {
+		const user = await auth.authenticate();
+		return inertia.render('user_settings/show', {
+			user,
+		});
+	}
+}

app/user_settings/routes/routes.ts

@@ -0,0 +1 @@
+import './user_settings_routes.js';

app/user_settings/routes/user_settings_routes.ts

@@ -0,0 +1,8 @@
+import router from '@adonisjs/core/services/router';
+
+const ShowUserSettingsController = () =>
+	import('#user_settings/controllers/show_user_settings_controller');
+
+router
+	.get('/user/settings', [ShowUserSettingsController, 'render'])
+	.as('user.settings');

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} />}

inertia/components/common/floating_tabs/floating_tabs.module.css

@@ -0,0 +1,36 @@
+.list {
+	position: relative;
+	margin-bottom: var(--mantine-spacing-md);
+}
+
+.indicator {
+	z-index: -1 !important;
+	background-color: var(--mantine-color-white);
+	border-radius: var(--mantine-radius-md);
+	border: 1px solid var(--mantine-color-gray-2);
+	box-shadow: var(--mantine-shadow-sm);
+
+	@mixin dark {
+		background-color: var(--mantine-color-dark-6);
+		border-color: var(--mantine-color-dark-4);
+	}
+}
+
+.tab {
+	z-index: 1;
+	font-weight: 500;
+	transition: color 100ms ease;
+	color: var(--mantine-color-gray-7);
+
+	&[data-active] {
+		color: var(--mantine-color-black);
+	}
+
+	@mixin dark {
+		color: var(--mantine-color-dark-1);
+
+		&[data-active] {
+			color: var(--mantine-color-white);
+		}
+	}
+}

inertia/components/common/floating_tabs/floating_tabs.tsx

@@ -0,0 +1,79 @@
+import {
+	FloatingIndicator,
+	Indicator,
+	Tabs as MantineTabs,
+	Stack,
+} from '@mantine/core';
+import { useState } from 'react';
+import classes from './floating_tabs.module.css';
+
+export type FloatingTab = {
+	value: string;
+	label: string;
+	content: React.ReactNode;
+	disabled?: boolean;
+	indicator?: {
+		content: string;
+		color?: string;
+		pulse?: boolean;
+		disabled?: boolean;
+	};
+};
+
+interface FloatingTabsProps {
+	tabs: FloatingTab[];
+	keepMounted?: boolean;
+}
+
+export function FloatingTabs({ tabs, keepMounted = false }: FloatingTabsProps) {
+	const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
+	const [value, setValue] = useState<string | null>(tabs[0].value);
+	const [controlsRefs, setControlsRefs] = useState<
+		Record<string, HTMLButtonElement | null>
+	>({});
+	const setControlRef = (val: string) => (node: HTMLButtonElement) => {
+		controlsRefs[val] = node;
+		setControlsRefs(controlsRefs);
+	};
+
+	return (
+		<MantineTabs
+			variant="none"
+			value={value}
+			onChange={setValue}
+			keepMounted={keepMounted}
+		>
+			<MantineTabs.List ref={setRootRef} className={classes.list}>
+				{tabs.map((tab) => (
+					<Indicator
+						label={tab.indicator?.content}
+						color={tab.indicator?.color}
+						processing={tab.indicator?.pulse}
+						disabled={!tab.indicator || tab.indicator.disabled}
+						size={16}
+						key={tab.value}
+					>
+						<MantineTabs.Tab
+							value={tab.value}
+							ref={setControlRef(tab.value)}
+							className={classes.tab}
+							disabled={tab.disabled}
+						>
+							{tab.label}
+						</MantineTabs.Tab>
+					</Indicator>
+				))}
+				<FloatingIndicator
+					target={value ? controlsRefs[value] : null}
+					parent={rootRef}
+					className={classes.indicator}
+				/>
+			</MantineTabs.List>
+			{tabs.map((tab) => (
+				<MantineTabs.Panel key={tab.value} value={tab.value}>
+					<Stack>{tab.content}</Stack>
+				</MantineTabs.Panel>
+			))}
+		</MantineTabs>
+	);
+}

inertia/components/common/user_preferences/user_preferences.tsx

@@ -1,15 +1,10 @@
-import { LinkListDisplay } from '#shared/types/index';
 import { Fieldset, Stack, Text } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
-import { ComboList } from '~/components/common/combo_list/combo_list';
 import { CollectionListSelector } from '~/components/dashboard/collection/collection_list_selector';
-import { useDisplayPreferences } from '~/hooks/use_display_preferences';
+import { LinkListSelector } from '~/components/dashboard/link/link_list_selector';
 import { useIsMobile } from '~/hooks/use_is_mobile';
-import { getLinkListDisplayOptions } from '~/lib/display_preferences';
 
 export function UserPreferences() {
-	const { displayPreferences, handleUpdateDisplayPreferences } =
-		useDisplayPreferences();
 	const { t } = useTranslation();
 	const isMobile = useIsMobile();
 
@@ -28,15 +23,7 @@ export function UserPreferences() {
 				<Text size="sm" c="dimmed">
 					{t('display-preferences.link-list-display')}
 				</Text>
-				<ComboList
+				<LinkListSelector />
-					selectedValue={displayPreferences.linkListDisplay}
-					values={getLinkListDisplayOptions()}
-					setValue={(value) =>
-						handleUpdateDisplayPreferences({
-							linkListDisplay: value as LinkListDisplay,
-						})
-					}
-				/>
 			</Stack>
 		</Fieldset>
 	);

inertia/components/dashboard/collection/collection_list_selector.tsx

@@ -1,20 +1,28 @@
+import { COLLECTION_LIST_DISPLAYS } from '#shared/lib/display_preferences';
 import { CollectionListDisplay } from '#shared/types/index';
-import { ComboList } from '~/components/common/combo_list/combo_list';
+import { SegmentedControl } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
 import { useDisplayPreferences } from '~/hooks/use_display_preferences';
-import { getCollectionListDisplayOptions } from '~/lib/display_preferences';
 
 export function CollectionListSelector() {
+	const { t } = useTranslation();
 	const { displayPreferences, handleUpdateDisplayPreferences } =
 		useDisplayPreferences();
+
+	const data = COLLECTION_LIST_DISPLAYS.map((display) => ({
+		label: t(`display-preferences.${display}`),
+		value: display,
+	}));
 	return (
-		<ComboList
+		<SegmentedControl
-			selectedValue={displayPreferences.collectionListDisplay}
+			data={data}
-			values={getCollectionListDisplayOptions()}
+			value={displayPreferences.collectionListDisplay}
-			setValue={(value) =>
+			onChange={(value) =>
 				handleUpdateDisplayPreferences({
 					collectionListDisplay: value as CollectionListDisplay,
 				})
 			}
+			w="50%"
 		/>
 	);
 }

inertia/components/dashboard/link/link_list_selector.tsx

@@ -0,0 +1,28 @@
+import { LINK_LIST_DISPLAYS } from '#shared/lib/display_preferences';
+import { LinkListDisplay } from '#shared/types/index';
+import { SegmentedControl } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { useDisplayPreferences } from '~/hooks/use_display_preferences';
+
+export function LinkListSelector() {
+	const { t } = useTranslation();
+	const { displayPreferences, handleUpdateDisplayPreferences } =
+		useDisplayPreferences();
+
+	const data = LINK_LIST_DISPLAYS.map((display) => ({
+		label: t(`display-preferences.${display}`),
+		value: display,
+	}));
+	return (
+		<SegmentedControl
+			data={data}
+			value={displayPreferences.linkListDisplay}
+			onChange={(value) =>
+				handleUpdateDisplayPreferences({
+					linkListDisplay: value as LinkListDisplay,
+				})
+			}
+			w="50%"
+		/>
+	);
+}

inertia/i18n/locales/en/common.json

@@ -89,7 +89,10 @@
 	"preferences-description": "Display preferences do not apply on mobile",
 	"display-preferences": {
 		"collection-list-display": "Collection list display",
-		"link-list-display": "Link list display"
+		"link-list-display": "Link list display",
+		"inline": "Inline",
+		"list": "List",
+		"grid": "Grid"
 	},
 	"coming-soon": "Under development"
 }

inertia/i18n/locales/fr/common.json

@@ -89,7 +89,10 @@
 	"preferences-description": "Les préférences d'affichage ne s'appliquent pas sur mobile",
 	"display-preferences": {
 		"collection-list-display": "Affichage de la liste des collections",
-		"link-list-display": "Affichage de la liste des liens"
+		"link-list-display": "Affichage de la liste des liens",
+		"inline": "En ligne",
+		"list": "Liste",
+		"grid": "Grille"
 	},
 	"coming-soon": "En cours de développement"
 }

inertia/layouts/small_content.tsx

@@ -12,7 +12,8 @@ const SmallContentLayout = ({ children }: PropsWithChildren) => (
 
 export default SmallContentLayout;
 
-const LAYOUT_WIDTH = '800px';
+const LAYOUT_WIDTH = '1500px';
+const CONTENT_WIDTH = '800px';
 const Layout = ({ children }: PropsWithChildren) => (
 	<>
 		{/* Top navbar */}
@@ -29,7 +30,7 @@ const Layout = ({ children }: PropsWithChildren) => (
 				style={{
 					height: '100%',
 					maxWidth: '100%',
-					width: LAYOUT_WIDTH,
+					width: CONTENT_WIDTH,
 					marginInline: 'auto',
 					marginBlock: rem(30),
 				}}

inertia/lib/display_preferences.tsx

@@ -1,34 +0,0 @@
-import {
-	COLLECTION_LIST_DISPLAYS,
-	LINK_LIST_DISPLAYS,
-} from '#shared/lib/display_preferences';
-import { AiOutlineFolder } from 'react-icons/ai';
-import { IoGridOutline } from 'react-icons/io5';
-import { TbList } from 'react-icons/tb';
-import { ValueWithIcon } from '~/components/common/combo_list/combo_list';
-
-const collectionListDisplayIcons = {
-	list: <TbList size={20} />,
-	inline: <AiOutlineFolder size={20} />,
-} as const;
-
-export function getCollectionListDisplayOptions(): ValueWithIcon[] {
-	return COLLECTION_LIST_DISPLAYS.map((display) => ({
-		label: display,
-		value: display,
-		icon: collectionListDisplayIcons[display],
-	}));
-}
-
-const linkListDisplayIcons = {
-	list: <TbList size={20} />,
-	grid: <IoGridOutline size={20} />,
-} as const;
-
-export function getLinkListDisplayOptions(): ValueWithIcon[] {
-	return LINK_LIST_DISPLAYS.map((display) => ({
-		label: display,
-		value: display,
-		icon: linkListDisplayIcons[display],
-	}));
-}

inertia/pages/user_settings/show.tsx

@@ -0,0 +1,24 @@
+import { useTranslation } from 'react-i18next';
+import {
+	FloatingTab,
+	FloatingTabs,
+} from '~/components/common/floating_tabs/floating_tabs';
+import { UserPreferences } from '~/components/common/user_preferences/user_preferences';
+import SmallContentLayout from '~/layouts/small_content';
+
+function UserSettingsShow() {
+	const { t } = useTranslation();
+	const tabs: FloatingTab[] = [
+		{
+			label: t('preferences'),
+			value: 'preferences',
+			content: <UserPreferences />,
+		},
+	];
+	return <FloatingTabs tabs={tabs} />;
+}
+
+UserSettingsShow.layout = (page: React.ReactNode) => (
+	<SmallContentLayout>{page}</SmallContentLayout>
+);
+export default UserSettingsShow;

package.json

@@ -31,6 +31,7 @@
 		"#search/*": "./app/search/*.js",
 		"#shared_collections/*": "./app/shared_collections/*.js",
 		"#user/*": "./app/user/*.js",
+		"#user_settings/*": "./app/user_settings/*.js",
 		"#providers/*": "./providers/*.js",
 		"#database/*": "./database/*.js",
 		"#tests/*": "./tests/*.js",

start/routes.ts

@@ -8,3 +8,4 @@ import '#links/routes/routes';
 import '#search/routes/routes';
 import '#shared_collections/routes/routes';
 import '#user/routes/routes';
+import '#user_settings/routes/routes';