refactor: remove react-hotkeys-hook and use inertia propos instead of recreating a local store

inertia/hooks/collections/use_active_collection.tsx

@@ -0,0 +1,25 @@
+import { PageProps } from '@adonisjs/inertia/types';
+import { usePage } from '@inertiajs/react';
+import { CollectionWithLinks } from '~/types/app';
+
+interface UseActiveCollectionProps {
+	activeCollection?: CollectionWithLinks;
+}
+
+export const useActiveCollection = () => {
+	const { props } = usePage<PageProps & UseActiveCollectionProps>();
+	return props.activeCollection;
+};
+
+export type WithActiveCollectionProps = {
+	activeCollection?: CollectionWithLinks;
+};
+
+export const withActiveCollection = (
+	Component: React.ComponentType<WithActiveCollectionProps>
+) => {
+	return (props: WithActiveCollectionProps) => {
+		const activeCollection = useActiveCollection();
+		return <Component {...props} activeCollection={activeCollection} />;
+	};
+};

inertia/hooks/collections/use_collection_list_selector.tsx

@@ -0,0 +1,31 @@
+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/collections/use_collections.tsx

@@ -0,0 +1,25 @@
+import { PageProps } from '@adonisjs/inertia/types';
+import { usePage } from '@inertiajs/react';
+import { CollectionWithLinks } from '~/types/app';
+
+interface UseCollectionsProps {
+	collections: CollectionWithLinks[];
+}
+
+export const useCollections = () => {
+	const { props } = usePage<PageProps & UseCollectionsProps>();
+	return props.collections;
+};
+
+export type WithCollectionsProps = {
+	collections: CollectionWithLinks[];
+};
+
+export const withCollections = <T extends object>(
+	Component: React.ComponentType<T & WithCollectionsProps>
+): React.ComponentType<Omit<T, 'collections'>> => {
+	return (props: Omit<T, 'collections'>) => {
+		const collections = useCollections();
+		return <Component {...(props as T)} collections={collections} />;
+	};
+};

inertia/hooks/collections/use_favorite_links.tsx

@@ -0,0 +1,12 @@
+import { PageProps } from '@adonisjs/inertia/types';
+import { usePage } from '@inertiajs/react';
+import { LinkWithCollection } from '~/types/app';
+
+interface UseFavoriteLinksProps {
+	favoriteLinks: LinkWithCollection[];
+}
+
+export const useFavoriteLinks = () => {
+	const { props } = usePage<PageProps & UseFavoriteLinksProps>();
+	return props.favoriteLinks;
+};

inertia/hooks/use_shortcut.tsx

@@ -1,5 +1,5 @@
 import KEYS from '#core/constants/keys';
-import { useHotkeys } from 'react-hotkeys-hook';
+import { useHotkeys } from '@mantine/hooks';
 import { useGlobalHotkeysStore } from '~/stores/global_hotkeys_store';
 
 type ShortcutOptions = {
@@ -16,15 +16,12 @@ export default function useShortcut(
 	}
 ) {
 	const { globalHotkeysEnabled } = useGlobalHotkeysStore();
+	const isEnabled = disableGlobalCheck
+		? enabled
+		: enabled && globalHotkeysEnabled;
 	return useHotkeys(
-		KEYS[key],
-		(event) => {
-			event.preventDefault();
-			cb();
-		},
-		{
-			enabled: disableGlobalCheck ? enabled : enabled && globalHotkeysEnabled,
-			enableOnFormTags: ['INPUT'],
-		}
+		[[KEYS[key], () => isEnabled && cb(), { preventDefault: true }]],
+		undefined,
+		true
 	);
 }