Edit repository GitHub link to "my-links"

app/core/constants/paths.ts

@@ -1,6 +1,6 @@
 const PATHS = {
 	AUTHOR: 'https://www.sonny.dev/?utm_source=mylinks',
-	REPO_GITHUB: 'https://github.com/Sonny93/my-links',
+	REPO_GITHUB: 'https://github.com/my-links/my-links',
 	EXTENSION:
 		'https://chromewebstore.google.com/detail/mylinks/agkmlplihacolkakgeccnbhphnepphma',
 } as const;

app/user/constants/theme.ts

@@ -1,2 +1,3 @@
-export const PREFER_DARK_THEME = 'prefer_dark_theme';
-export const DARK_THEME_DEFAULT_VALUE = true;
+export const KEY_USER_THEME = 'user_theme';
+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 } =
-			await request.validateUsing(updateThemeValidator);
-		session.put(PREFER_DARK_THEME, preferDarkTheme);
+		const { theme } = await request.validateUsing(updateThemeValidator);
+		session.put(KEY_USER_THEME, theme);
 		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,7 +1,6 @@
-import {
-	PREFER_DARK_THEME,
-	DARK_THEME_DEFAULT_VALUE,
-} from '#user/constants/theme';
+import { isSSREnableForPage } from '#config/ssr';
+import { DEFAULT_USER_THEME, KEY_USER_THEME } from '#user/constants/theme';
+import logger from '@adonisjs/core/services/logger';
 import { defineConfig } from '@adonisjs/inertia';
 
 export default defineConfig({
@@ -15,8 +14,9 @@ export default defineConfig({
 	 */
 	sharedData: {
 		errors: (ctx) => ctx.session?.flashMessages.get('errors'),
-		preferDarkTheme: (ctx) =>
-			ctx.session?.get(PREFER_DARK_THEME, DARK_THEME_DEFAULT_VALUE),
+		user: (ctx) => ({
+			theme: ctx.session?.get(KEY_USER_THEME, DEFAULT_USER_THEME),
+		}),
 		auth: async (ctx) => {
 			await ctx.auth?.check();
 			return {
@@ -32,5 +32,10 @@ export default defineConfig({
 	ssr: {
 		enabled: true,
 		entrypoint: 'inertia/app/ssr.tsx',
+		pages: (_, page) => {
+			const ssrEnabled = isSSREnableForPage(page);
+			logger.debug(`Page "${page}" SSR enabled: ${ssrEnabled}`);
+			return ssrEnabled;
+		},
 	},
 });

config/ssr.ts

@@ -0,0 +1,2 @@
+export const CSR_ROUTES = ['dashboard'];
+export const isSSREnableForPage = (page: string) => !CSR_ROUTES.includes(page);

inertia/app/app.tsx

@@ -1,8 +1,9 @@
 import { resolvePageComponent } from '@adonisjs/inertia/helpers';
 import { createInertiaApp } from '@inertiajs/react';
+import { isSSREnableForPage } from 'config-ssr';
 import 'dayjs/locale/en';
 import 'dayjs/locale/fr';
-import { hydrateRoot } from 'react-dom/client';
+import { createRoot, hydrateRoot } from 'react-dom/client';
 import '../i18n/index';
 
 const appName = import.meta.env.VITE_APP_NAME || 'MyLinks';
@@ -20,6 +21,13 @@ createInertiaApp({
 	},
 
 	setup({ el, App, props }) {
-		hydrateRoot(el, <App {...props} />);
+		const componentName = props.initialPage.component;
+		const isSSREnabled = isSSREnableForPage(componentName);
+		console.debug(`Page "${componentName}" SSR enabled: ${isSSREnabled}`);
+		if (isSSREnabled) {
+			hydrateRoot(el, <App {...props} />);
+		} else {
+			createRoot(el).render(<App {...props} />);
+		}
 	},
 });

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

@@ -40,12 +40,8 @@ export default function CollectionItem({
 				{collection.name}
 			</Text>
 			{showLinks && (
-				<Text
-					style={{ whiteSpace: 'nowrap' }}
-					c="var(--mantine-color-gray-5)"
-					ml={4}
-				>
-					— {linksCount}0
+				<Text style={{ whiteSpace: 'nowrap' }} c="dimmed" ml="sm">
+					— {linksCount}
 				</Text>
 			)}
 		</Link>

inertia/components/dashboard/dashboard_header.tsx

@@ -35,7 +35,7 @@ export function DashboardHeader({ navbar, aside }: DashboardHeaderProps) {
 	const { activeCollection } = useActiveCollection();
 	return (
 		<AppShell.Header style={{ display: 'flex', alignItems: 'center' }}>
-			<Group justify="space-between" px="md" flex={1}>
+			<Group justify="space-between" px="md" flex={1} wrap="nowrap">
 				<Group h="100%" wrap="nowrap">
 					<Burger
 						opened={navbar.opened}
@@ -57,7 +57,7 @@ export function DashboardHeader({ navbar, aside }: DashboardHeaderProps) {
 						)}
 					</Box>
 				</Group>
-				<Group>
+				<Group wrap="nowrap">
 					<ShareCollection />
 
 					<Menu withinPortal shadow="md" width={225}>

inertia/components/footer/footer.tsx

@@ -13,15 +13,16 @@ export function MantineFooter() {
 	const { t } = useTranslation('common');
 
 	const links = [
-		{ link: route('privacy').url, label: t('privacy') },
-		{ link: route('terms').url, label: t('terms') },
-		{ link: PATHS.EXTENSION, label: 'Extension' },
+		{ link: route('privacy').path, label: t('privacy'), external: false },
+		{ link: route('terms').path, label: t('terms'), external: false },
+		{ link: PATHS.EXTENSION, label: 'Extension', external: true },
 	];
 
 	const items = links.map((link) => (
 		<Anchor
 			c="dimmed"
-			component={Link}
+			// @ts-expect-error
+			component={link.external ? ExternalLink : Link}
 			key={link.label}
 			href={link.link}
 			size="sm"

inertia/components/navbar/navbar.tsx

@@ -17,7 +17,6 @@ import { useTranslation } from 'react-i18next';
 import ExternalLink from '~/components/common/external_link';
 import { MantineLanguageSwitcher } from '~/components/common/language_switcher';
 import { MantineThemeSwitcher } from '~/components/common/theme_switcher';
-import { MantineUserCard } from '~/components/common/user_card';
 import useUser from '~/hooks/use_user';
 import classes from './mobile.module.css';
 
@@ -31,7 +30,9 @@ export default function Navbar() {
 		<Box pb={40}>
 			<header className={classes.header}>
 				<Group justify="space-between" h="100%">
-					<Image src="/logo-light.png" h={35} alt="MyLinks's logo" />
+					<Link href="/">
+						<Image src="/logo-light.png" h={35} alt="MyLinks's logo" />
+					</Link>
 
 					<Group h="100%" gap={0} visibleFrom="sm">
 						<Link href="/" className={classes.link}>
@@ -102,11 +103,13 @@ export default function Navbar() {
 
 					<Group justify="center" grow pb="xl" px="md">
 						{!isAuthenticated ? (
-							<Button component="a" href={route('auth').path}>
+							<Button component="a" href={route('auth').path} w={110}>
 								{t('login')}
 							</Button>
 						) : (
-							<MantineUserCard />
+							<Button component={Link} href={route('dashboard').path} w={110}>
+								Dashboard
+							</Button>
 						)}
 					</Group>
 				</ScrollArea>

inertia/tsconfig.json

@@ -6,8 +6,9 @@
 		"jsx": "react-jsx",
 		"resolveJsonModule": true,
 		"paths": {
-			"~/*": ["./*"]
+			"~/*": ["./*"],
+			"config-ssr": ["../config/ssr"]
 		}
 	},
-	"include": ["./**/*.ts", "./**/*.tsx"]
+	"include": ["./**/*.ts", "./**/*.tsx", "../config/ssr.ts"]
 }

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "my-links",
-	"version": "3.0.2",
+	"version": "3.0.3",
 	"type": "module",
 	"license": "GPL-3.0-only",
 	"scripts": {

vite.config.ts

@@ -1,8 +1,8 @@
-import { defineConfig } from 'vite';
 import { getDirname } from '@adonisjs/core/helpers';
 import inertia from '@adonisjs/inertia/client';
-import react from '@vitejs/plugin-react';
 import adonisjs from '@adonisjs/vite/client';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
 
 export default defineConfig({
 	plugins: [
@@ -21,6 +21,7 @@ export default defineConfig({
 	resolve: {
 		alias: {
 			'~/': `${getDirname(import.meta.url)}/inertia/`,
+			'config-ssr': `${getDirname(import.meta.url)}/config/ssr.ts`,
 		},
 	},
 });