From 3ec2865f7ca434a3a4d6ee26242bc5b7ead2df9d Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 20 Feb 2024 10:26:37 +0800
Subject: [PATCH] Menu to navigate to shortcuts editor

---
 .../components/templates/PrimaryDropdown.tsx  | 21 +++++++------------
 .../templates/navMenu/LibraryMenu.tsx         | 21 ++++++++++++++++---
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/packages/web/components/templates/PrimaryDropdown.tsx b/packages/web/components/templates/PrimaryDropdown.tsx
index e6d462c24..98d1a4b5c 100644
--- a/packages/web/components/templates/PrimaryDropdown.tsx
+++ b/packages/web/components/templates/PrimaryDropdown.tsx
@@ -218,19 +218,14 @@ export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element {
         onSelect={() => headerDropdownActionHandler('navigate-to-rules')}
         title="Rules"
       />
-      <DropdownMenu>
-        <DropdownOption
-          onSelect={() => headerDropdownActionHandler('navigate-to-api')}
-          title="API Keys"
-        />
-        <DropdownOption
-          onSelect={() =>
-            headerDropdownActionHandler('navigate-to-integrations')
-          }
-          title="Integrations"
-        />
-      </DropdownMenu>
-
+      <DropdownOption
+        onSelect={() => headerDropdownActionHandler('navigate-to-api')}
+        title="API Keys"
+      />
+      <DropdownOption
+        onSelect={() => headerDropdownActionHandler('navigate-to-integrations')}
+        title="Integrations"
+      />
       <DropdownOption
         onSelect={() => window.open('https://docs.omnivore.app', '_blank')}
         title="Documentation"
diff --git a/packages/web/components/templates/navMenu/LibraryMenu.tsx b/packages/web/components/templates/navMenu/LibraryMenu.tsx
index 11ba928be..27119ee2a 100644
--- a/packages/web/components/templates/navMenu/LibraryMenu.tsx
+++ b/packages/web/components/templates/navMenu/LibraryMenu.tsx
@@ -37,6 +37,9 @@ import { OutlinedLabelChip } from '../../elements/OutlinedLabelChip'
 import { NewsletterFlairIcon } from '../../elements/icons/NewsletterFlairIcon'
 import { FeedFlairIcon } from '../../elements/icons/FeedFlairIcon'
 import { NewsletterIcon } from '../../elements/icons/NewsletterIcon'
+import { DropdownMenu } from '@radix-ui/react-dropdown-menu'
+import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
+import { useRouter } from 'next/router'
 
 export const LIBRARY_LEFT_MENU_WIDTH = '275px'
 
@@ -202,6 +205,7 @@ const LibraryNav = (props: LibraryFilterMenuProps): JSX.Element => {
 }
 
 const Shortcuts = (props: LibraryFilterMenuProps): JSX.Element => {
+  const router = useRouter()
   const shortcuts: Shortcut[] = [
     {
       id: '12asdfasdf',
@@ -283,9 +287,20 @@ const Shortcuts = (props: LibraryFilterMenuProps): JSX.Element => {
         >
           SHORTCUTS
         </StyledText>
-        <Button style="plainIcon" css={{ display: 'flex', ml: 'auto' }}>
-          <DotsThree size={20} />
-        </Button>
+        <SpanBox css={{ display: 'flex', ml: 'auto' }}>
+          <Dropdown
+            side="bottom"
+            triggerElement={<DotsThree size={20} />}
+            css={{ ml: 'auto' }}
+          >
+            <DropdownOption
+              onSelect={() => {
+                router.push(`/settings/shortcuts`)
+              }}
+              title="Edit shortcuts"
+            />
+          </Dropdown>
+        </SpanBox>
       </HStack>
       {shortcuts.map((shortcut) => {
         return (