refactor: create shortcut hook that with default config

inertia/components/common/dropdown/dropdown.tsx

@@ -1,12 +1,10 @@
-import KEYS from '#constants/keys';
 import styled from '@emotion/styled';
 import { ReactNode, useRef } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
 import DropdownContainer from '~/components/common/dropdown/dropdown_container';
 import DropdownLabel from '~/components/common/dropdown/dropdown_label';
 import useClickOutside from '~/hooks/use_click_outside';
-import useGlobalHotkeys from '~/hooks/use_global_hotkeys';
 import useToggle from '~/hooks/use_modal';
+import useShortcut from '~/hooks/use_shortcut';
 
 const DropdownStyle = styled.div<{ opened: boolean; svgSize?: number }>(
   ({ opened, theme, svgSize = 24 }) => ({
@@ -44,14 +42,9 @@ export default function Dropdown({
 }) {
   const dropdownRef = useRef<HTMLDivElement>(null);
   const { isShowing, toggle, close } = useToggle();
-  const { globalHotkeysEnabled } = useGlobalHotkeys();
 
   useClickOutside(dropdownRef, close);
-
+  useShortcut('ESCAPE_KEY', close);
-  useHotkeys(KEYS.ESCAPE_KEY, close, {
-    enabled: globalHotkeysEnabled,
-    enableOnFormTags: ['INPUT'],
-  });
 
   return (
     <DropdownStyle

inertia/components/common/navigation/back_to_dashboard.tsx

@@ -1,21 +1,14 @@
-import KEYS from '#constants/keys';
 import { router } from '@inertiajs/react';
 import { route } from '@izzyjs/route/client';
 import { ReactNode } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
-import useGlobalHotkeys from '~/hooks/use_global_hotkeys';
 import useSearchParam from '~/hooks/use_search_param';
+import useShortcut from '~/hooks/use_shortcut';
 import { appendCollectionId } from '~/lib/navigation';
 
 export default function BackToDashboard({ children }: { children: ReactNode }) {
   const collectionId = useSearchParam('collectionId');
-  const { globalHotkeysEnabled } = useGlobalHotkeys();
+  useShortcut('ESCAPE_KEY', () =>
-  useHotkeys(
+    router.visit(appendCollectionId(route('dashboard').url, collectionId))
-    KEYS.ESCAPE_KEY,
-    () => {
-      router.visit(appendCollectionId(route('dashboard').url, collectionId));
-    },
-    { enabled: globalHotkeysEnabled, enableOnFormTags: ['INPUT'] }
   );
   return <>{children}</>;
 }

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

@@ -1,8 +1,34 @@
+import type Collection from '#models/collection';
 import styled from '@emotion/styled';
+import { AiFillFolderOpen, AiOutlineFolder } from 'react-icons/ai';
+import TextEllipsis from '~/components/common/text_ellipsis';
 import { Item } from '~/components/dashboard/side_nav/nav_item';
+import useActiveCollection from '~/hooks/use_active_collection';
 
-const CollectionItem = styled(Item)(({ theme }) => ({
+const CollectionItemStyle = styled(Item)<{ isActive: boolean }>(
-  backgroundColor: theme.colors.secondary,
+  ({ theme, isActive }) => ({
-}));
+    cursor: 'pointer',
+    color: isActive ? theme.colors.primary : theme.colors.font,
+    backgroundColor: theme.colors.secondary,
+  })
+);
 
-export default CollectionItem;
+export default function CollectionItem({
+  collection,
+}: {
+  collection: Collection;
+}) {
+  const { activeCollection, setActiveCollection } = useActiveCollection();
+  const isActiveCollection = collection.id === activeCollection?.id;
+  const FolderIcon = isActiveCollection ? AiFillFolderOpen : AiOutlineFolder;
+
+  return (
+    <CollectionItemStyle
+      onClick={() => setActiveCollection(collection)}
+      isActive={isActiveCollection}
+    >
+      <FolderIcon size={24} />
+      <TextEllipsis>{collection.name}</TextEllipsis>
+    </CollectionItemStyle>
+  );
+}

inertia/components/dashboard/collection/list/collection_list.tsx

@@ -1,11 +1,9 @@
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { AiFillFolderOpen, AiOutlineFolder } from 'react-icons/ai';
-import TextEllipsis from '~/components/common/text_ellipsis';
 import CollectionItem from '~/components/dashboard/collection/list/collection_item';
 import CollectionListContainer from '~/components/dashboard/collection/list/collection_list_container';
 import useActiveCollection from '~/hooks/use_active_collection';
 import useCollections from '~/hooks/use_collections';
+import useShortcut from '~/hooks/use_shortcut';
 
 const SideMenu = styled.nav(({ theme }) => ({
   height: '100%',
@@ -31,33 +29,41 @@ const CollectionListStyle = styled.div({
 });
 
 export default function CollectionList() {
-  const { activeCollection, setActiveCollection } = useActiveCollection();
   const { collections } = useCollections();
-  const theme = useTheme();
+  const { activeCollection, setActiveCollection } = useActiveCollection();
+
+  const goToPreviousCollection = () => {
+    const currentCategoryIndex = collections.findIndex(
+      ({ id }) => id === activeCollection?.id
+    );
+    if (currentCategoryIndex === -1 || currentCategoryIndex === 0) return;
+
+    setActiveCollection(collections[currentCategoryIndex - 1]);
+  };
+
+  const goToNextCollection = () => {
+    const currentCategoryIndex = collections.findIndex(
+      ({ id }) => id === activeCollection?.id
+    );
+    if (
+      currentCategoryIndex === -1 ||
+      currentCategoryIndex === collections.length - 1
+    )
+      return;
+
+    setActiveCollection(collections[currentCategoryIndex + 1]);
+  };
+
+  useShortcut('ARROW_UP', goToPreviousCollection);
+  useShortcut('ARROW_DOWN', goToNextCollection);
+
   return (
     <SideMenu>
       <CollectionListContainer>
         <CollectionLabel>Collections • {collections.length}</CollectionLabel>
         <CollectionListStyle>
           {collections.map((collection) => (
-            <CollectionItem
+            <CollectionItem collection={collection} key={collection.id} />
-              css={{
-                cursor: 'pointer',
-                color:
-                  activeCollection?.id === collection.id
-                    ? theme.colors.primary
-                    : theme.colors.font,
-              }}
-              onClick={() => setActiveCollection(collection)}
-              key={collection.id}
-            >
-              {collection.id === activeCollection?.id ? (
-                <AiFillFolderOpen size={24} />
-              ) : (
-                <AiOutlineFolder size={24} />
-              )}
-              <TextEllipsis>{collection.name}</TextEllipsis>
-            </CollectionItem>
           ))}
         </CollectionListStyle>
       </CollectionListContainer>

inertia/hooks/use_shortcut.tsx

@@ -0,0 +1,11 @@
+import KEYS from '#constants/keys';
+import { useHotkeys } from 'react-hotkeys-hook';
+import useGlobalHotkeys from '~/hooks/use_global_hotkeys';
+
+export default function useShortcut(key: keyof typeof KEYS, cb: () => void) {
+  const { globalHotkeysEnabled } = useGlobalHotkeys();
+  return useHotkeys(KEYS[key], cb, {
+    enabled: globalHotkeysEnabled,
+    enableOnFormTags: ['INPUT'],
+  });
+}

inertia/pages/dashboard.tsx

@@ -1,11 +1,9 @@
-import KEYS from '#constants/keys';
 import type Collection from '#models/collection';
 import Link from '#models/link';
 import styled from '@emotion/styled';
 import { router } from '@inertiajs/react';
 import { route } from '@izzyjs/route/client';
 import { ReactNode, useEffect, useMemo, useState } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
 import { useSwipeable } from 'react-swipeable';
 import CollectionContainer from '~/components/dashboard/collection/collection_container';
 import CollectionList from '~/components/dashboard/collection/list/collection_list';
@@ -18,6 +16,7 @@ import FavoritesContext from '~/contexts/favorites_context';
 import GlobalHotkeysContext from '~/contexts/global_hotkeys_context';
 import { useMediaQuery } from '~/hooks/use_media_query';
 import useToggle from '~/hooks/use_modal';
+import useShortcut from '~/hooks/use_shortcut';
 import { appendCollectionId } from '~/lib/navigation';
 
 interface DashboardPageProps {
@@ -112,21 +111,13 @@ function DashboardProviders(
     [globalHotkeysEnabled]
   );
 
-  useHotkeys(
+  useShortcut('OPEN_CREATE_LINK_KEY', () =>
-    KEYS.OPEN_CREATE_LINK_KEY,
+    router.visit(
-    () => {
+      appendCollectionId(route('link.create-form').url, activeCollection?.id)
-      router.visit(
+    )
-        appendCollectionId(route('link.create-form').url, activeCollection?.id)
-      );
-    },
-    { enabled: globalHotkeysEnabled }
   );
-  useHotkeys(
+  useShortcut('OPEN_CREATE_COLLECTION_KEY', () =>
-    KEYS.OPEN_CREATE_COLLECTION_KEY,
+    router.visit(route('collection.create-form').url)
-    () => {
-      router.visit(route('collection.create-form').url);
-    },
-    { enabled: globalHotkeysEnabled }
   );
   return (
     <CollectionsContext.Provider value={collectionsContextValue}>