From 490cd6b09820902068ab6d24ffb5cd2630247fa2 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 5 Apr 2023 18:13:54 +0800
Subject: [PATCH] Scroll to highlight keyboard commands

---
 .../templates/article/HighlightsLayer.tsx     | 35 +++++++++++++++++++
 .../web/pages/[username]/[slug]/index.tsx     |  4 +--
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/packages/web/components/templates/article/HighlightsLayer.tsx b/packages/web/components/templates/article/HighlightsLayer.tsx
index 21c06712f..179d43795 100644
--- a/packages/web/components/templates/article/HighlightsLayer.tsx
+++ b/packages/web/components/templates/article/HighlightsLayer.tsx
@@ -27,6 +27,7 @@ import { setLabelsForHighlight } from '../../../lib/networking/mutations/setLabe
 import { Label } from '../../../lib/networking/fragments/labelFragment'
 import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
 import { ReadableItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
+import { useRegisterActions } from 'kbar'
 
 type HighlightsLayerProps = {
   viewer: UserBasicData
@@ -74,6 +75,7 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
   >([])
   const focusedHighlightMousePos = useRef({ pageX: 0, pageY: 0 })
 
+  const [currentHighlightIdx, setCurrentHighlightIdx] = useState(0)
   const [focusedHighlight, setFocusedHighlight] =
     useState<Highlight | undefined>(undefined)
 
@@ -537,6 +539,32 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
       handleAction('setHighlightLabels')
     }
 
+    const goToNextHighlight = () => {
+      const highlightsList = highlights.filter((h) => h.type == 'HIGHLIGHT')
+      const next = Math.min(currentHighlightIdx + 1, highlightsList.length - 1)
+      goToHighlightIdx(next, highlightsList)
+    }
+
+    const goToPreviousHighlight = () => {
+      const highlightsList = highlights.filter((h) => h.type == 'HIGHLIGHT')
+      const prev = Math.max(currentHighlightIdx - 1, 0)
+      goToHighlightIdx(prev, highlightsList)
+    }
+
+    const goToHighlightIdx = (idx: number, highlightsList: Highlight[]) => {
+      const highlight = highlightsList[idx]
+      console.log('highlight: ', highlight, 'idx', idx)
+
+      const target = document.querySelector(
+        `[omnivore-highlight-id="${highlight.id}"]`
+      )
+      target?.scrollIntoView({
+        block: 'center',
+        behavior: 'smooth',
+      })
+      setCurrentHighlightIdx(idx)
+    }
+
     const copy = async () => {
       if (focusedHighlight && focusedHighlight.quote) {
         if (window.AndroidWebKitMessenger) {
@@ -608,6 +636,8 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
     document.addEventListener('saveAnnotation', saveAnnotation)
     document.addEventListener('speakingSection', speakingSection)
     document.addEventListener('setHighlightLabels', setHighlightLabels)
+    document.addEventListener('scrollToNextHighlight', goToNextHighlight)
+    document.addEventListener('scrollToPrevHighlight', goToPreviousHighlight)
 
     return () => {
       document.removeEventListener('annotate', annotate)
@@ -619,6 +649,11 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
       document.removeEventListener('saveAnnotation', saveAnnotation)
       document.removeEventListener('speakingSection', speakingSection)
       document.removeEventListener('setHighlightLabels', setHighlightLabels)
+      document.removeEventListener('scrollToNextHighlight', goToNextHighlight)
+      document.removeEventListener(
+        'scrollToPrevHighlight',
+        goToPreviousHighlight
+      )
     }
   })
 
diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index 4310ff7bb..55f6ec7ac 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@@ -248,7 +248,7 @@ export default function Home(): JSX.Element {
         name: 'Scroll to next highlight',
         shortcut: ['j'],
         perform: () => {
-          document.dispatchEvent(new Event('highlight'))
+          document.dispatchEvent(new Event('scrollToNextHighlight'))
         },
       },
       {
@@ -257,7 +257,7 @@ export default function Home(): JSX.Element {
         name: 'Scroll to previous highlight',
         shortcut: ['k'],
         perform: () => {
-          document.dispatchEvent(new Event('highlight'))
+          document.dispatchEvent(new Event('scrollToPrevHighlight'))
         },
       },
       {