fix: footer link behaviour

app/user/constants/theme.ts

@@ -1,2 +1,3 @@
-export const PREFER_DARK_THEME = 'prefer_dark_theme';
+export const KEY_USER_THEME = 'user_theme';
-export const DARK_THEME_DEFAULT_VALUE = true;
+export const THEMES = ['dark', 'light'] as const;
+export const DEFAULT_USER_THEME = THEMES.at(0);

app/user/controllers/theme_controller.ts

@@ -1,12 +1,11 @@
-import { PREFER_DARK_THEME } from '#user/constants/theme';
+import { KEY_USER_THEME } from '#user/constants/theme';
 import { updateThemeValidator } from '#user/validators/update_theme_validator';
 import type { HttpContext } from '@adonisjs/core/http';
 
 export default class ThemeController {
 	async index({ request, session, response }: HttpContext) {
-		const { preferDarkTheme } =
+		const { theme } = await request.validateUsing(updateThemeValidator);
-			await request.validateUsing(updateThemeValidator);
+		session.put(KEY_USER_THEME, theme);
-		session.put(PREFER_DARK_THEME, preferDarkTheme);
 		return response.ok({ message: 'ok' });
 	}
 }

app/user/validators/update_theme_validator.ts

@@ -1,7 +1,8 @@
+import { THEMES } from '#user/constants/theme';
 import vine from '@vinejs/vine';
 
 export const updateThemeValidator = vine.compile(
 	vine.object({
-		preferDarkTheme: vine.boolean(),
+		theme: vine.enum(THEMES),
 	})
 );

config/inertia.ts

@@ -1,8 +1,5 @@
 import { isSSREnableForPage } from '#config/ssr';
-import {
+import { DEFAULT_USER_THEME, KEY_USER_THEME } from '#user/constants/theme';
-	DARK_THEME_DEFAULT_VALUE,
-	PREFER_DARK_THEME,
-} from '#user/constants/theme';
 import logger from '@adonisjs/core/services/logger';
 import { defineConfig } from '@adonisjs/inertia';
 
@@ -17,8 +14,9 @@ export default defineConfig({
 	 */
 	sharedData: {
 		errors: (ctx) => ctx.session?.flashMessages.get('errors'),
-		preferDarkTheme: (ctx) =>
+		user: (ctx) => ({
-			ctx.session?.get(PREFER_DARK_THEME, DARK_THEME_DEFAULT_VALUE),
+			theme: ctx.session?.get(KEY_USER_THEME, DEFAULT_USER_THEME),
+		}),
 		auth: async (ctx) => {
 			await ctx.auth?.check();
 			return {

inertia/components/common/theme_switcher.tsx

@@ -1,13 +1,22 @@
 import { ActionIcon, useMantineColorScheme } from '@mantine/core';
 import { TbMoonStars, TbSun } from 'react-icons/tb';
+import { makeRequest } from '~/lib/request';
 
 export function MantineThemeSwitcher() {
 	const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+	const handleThemeChange = () => {
+		toggleColorScheme();
+		makeRequest({
+			url: '/user/theme',
+			method: 'POST',
+			body: { theme: colorScheme === 'dark' ? 'light' : 'dark' },
+		});
+	};
 	return (
 		<ActionIcon
 			variant="light"
 			aria-label="Toggle color scheme"
-			onClick={() => toggleColorScheme()}
+			onClick={handleThemeChange}
 			size="lg"
 		>
 			{colorScheme === 'dark' ? <TbSun /> : <TbMoonStars />}

inertia/components/dashboard/collection/item/collection_item.tsx

@@ -36,20 +36,11 @@ export default function CollectionItem({
 			title={collection.name}
 		>
 			<FolderIcon className={classes.linkIcon} />
-			<Text
+			<Text lineClamp={1} maw={'200px'} style={{ wordBreak: 'break-all' }}>
-				lineClamp={1}
-				maw={'200px'}
-				w="100%"
-				style={{ wordBreak: 'break-all' }}
-			>
 				{collection.name}
 			</Text>
 			{showLinks && (
-				<Text
+				<Text style={{ whiteSpace: 'nowrap' }} c="dimmed" ml="sm">
-					style={{ whiteSpace: 'nowrap' }}
-					c="var(--mantine-color-gray-5)"
-					ml={4}
-				>
 					— {linksCount}
 				</Text>
 			)}

inertia/components/footer/footer.tsx

@@ -1,4 +1,5 @@
 import PATHS from '#core/constants/paths';
+import { Link } from '@inertiajs/react';
 import { route } from '@izzyjs/route/client';
 import { Anchor, Group, Text } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
@@ -12,15 +13,16 @@ export function MantineFooter() {
 	const { t } = useTranslation('common');
 
 	const links = [
-		{ link: route('privacy').url, label: t('privacy') },
+		{ link: route('privacy').path, label: t('privacy'), external: false },
-		{ link: route('terms').url, label: t('terms') },
+		{ link: route('terms').path, label: t('terms'), external: false },
-		{ link: PATHS.EXTENSION, label: 'Extension' },
+		{ link: PATHS.EXTENSION, label: 'Extension', external: true },
 	];
 
 	const items = links.map((link) => (
 		<Anchor
 			c="dimmed"
-			component={ExternalLink}
+			// @ts-expect-error
+			component={link.external ? ExternalLink : Link}
 			key={link.label}
 			href={link.link}
 			size="sm"