feat: add multiple way to show collections and links

inertia/hooks/collections/use_collection_list_selector.tsx

@@ -1,31 +0,0 @@
-import { IoListOutline } from 'react-icons/io5';
-import { TbHash } from 'react-icons/tb';
-import { ValueWithIcon } from '~/components/common/combo_list/combo_list';
-import { usePersisted } from '~/hooks/use_persisted';
-
-const listDisplayOptions: ValueWithIcon[] = [
-	{
-		label: 'Inline',
-		value: 'inline',
-		icon: <TbHash size={20} />,
-	},
-	{
-		label: 'List',
-		value: 'list',
-		icon: <IoListOutline size={20} />,
-	},
-];
-type ListDisplay = (typeof listDisplayOptions)[number]['value'];
-
-export const useCollectionListSelector = () => {
-	const [listDisplay, setListDisplay] = usePersisted<ListDisplay>(
-		'inline',
-		'list'
-	);
-
-	return {
-		listDisplay,
-		listDisplayOptions,
-		setListDisplay,
-	};
-};

inertia/hooks/use_app_url.tsx

@@ -0,0 +1,7 @@
+import { PageProps } from '@adonisjs/inertia/types';
+import { usePage } from '@inertiajs/react';
+
+export function useAppUrl() {
+	const { props } = usePage<PageProps & { appUrl: string }>();
+	return props.appUrl;
+}

inertia/hooks/use_disable_overflow.ts

@@ -1,9 +0,0 @@
-import { useEffect } from 'react';
-
-export const useDisableOverflow = () =>
-	useEffect(() => {
-		document.body.style.overflow = 'hidden';
-		return () => {
-			document.body.style.overflow = 'auto';
-		};
-	}, []);

inertia/hooks/use_display_preferences.tsx

@@ -0,0 +1,26 @@
+import { getDisplayPreferences } from '#shared/lib/display_preferences';
+import { DisplayPreferences } from '#shared/types/index';
+import { router } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import { useAuth } from '~/hooks/use_auth';
+
+export const useDisplayPreferences = () => {
+	const { user } = useAuth();
+	const displayPreferences = getDisplayPreferences(user?.displayPreferences);
+
+	const handleUpdateDisplayPreferences = (
+		displayPreferences: Partial<DisplayPreferences>
+	) => {
+		router.visit(route('user.update-display-preferences').path, {
+			method: 'post',
+			data: {
+				displayPreferences,
+			},
+		});
+	};
+
+	return {
+		displayPreferences,
+		handleUpdateDisplayPreferences,
+	};
+};

inertia/hooks/use_is_mobile.tsx

@@ -0,0 +1,3 @@
+import { useMediaQuery } from '@mantine/hooks';
+
+export const useIsMobile = () => useMediaQuery('(max-width: 768px)');