backref highlighting fix

Author: abrehamgezahegn

typescript/package-lock.json

@@ -66,6 +66,7 @@
     "typescript": "^5.8.3"
   },
   "dependencies": {
+    "@phosphor-icons/react": "^2.1.10",
     "@types/katex": "^0.16.7",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",

typescript/package.json

@@ -1,4 +1,6 @@
 import React from "react";
+import { ArrowUpIcon } from "@phosphor-icons/react/ArrowUp";
+import { ArrowDownIcon } from "@phosphor-icons/react/ArrowDown";
 
 import { useHighlightNavigation } from "../hooks/useHighlightNavigation";
 
@@ -33,7 +35,7 @@ export const HighlightNavigation: React.FC<HighlightNavigationProps> = ({
           aria-label="Previous highlight"
           title="Previous highlight (↑/k)"
         >
-          up
+          <ArrowUpIcon size={16} />
         </button>
 
         <span className="highlight-nav-counter">
@@ -46,7 +48,7 @@ export const HighlightNavigation: React.FC<HighlightNavigationProps> = ({
           aria-label="Next highlight"
           title="Next highlight (↓/j)"
         >
-          down
+          <ArrowDownIcon size={16} />
         </button>
       </div>
     </div>

typescript/src/renderer/components/HighlightNavigation.tsx

@@ -1,27 +1,44 @@
-import React, { createContext, useContext, ReactNode } from "react";
+import React, { createContext, useContext, ReactNode, useState } from "react";
 
 interface RendererContextValue {
   devMode?: boolean;
   resolveImageUrl?: (url: string) => Promise<string>;
+  showBackrefs: boolean;
+  toggleBackrefs: () => void;
 }
 
-const RendererContext = createContext<RendererContextValue>({});
+const RendererContext = createContext<RendererContextValue>({
+  showBackrefs: true,
+  toggleBackrefs: () => {},
+});
 
 export const useRenderer = () => {
   return useContext(RendererContext);
 };
 
 interface RendererProviderProps {
   children: ReactNode;
-  value: RendererContextValue;
+  value: Omit<RendererContextValue, "showBackrefs" | "toggleBackrefs">;
 }
 
 export const RendererProvider: React.FC<RendererProviderProps> = ({
   children,
   value,
 }) => {
+  const [showBackrefs, setShowBackrefs] = useState(true);
+
+  const toggleBackrefs = () => {
+    setShowBackrefs((prev) => !prev);
+  };
+
+  const contextValue: RendererContextValue = {
+    ...value,
+    showBackrefs,
+    toggleBackrefs,
+  };
+
   return (
-    <RendererContext.Provider value={value}>
+    <RendererContext.Provider value={contextValue}>
       {children}
     </RendererContext.Provider>
   );

typescript/src/renderer/context/RendererContext.tsx

@@ -81,45 +81,6 @@ export function useHighlightNavigation({
     [highlightCount, onNavigate, externalCurrentIndex]
   );
 
-  // Keyboard navigation support
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (highlightCount === 0) return;
-
-      // Only handle if no input is focused
-      if (
-        document.activeElement?.tagName === "INPUT" ||
-        document.activeElement?.tagName === "TEXTAREA"
-      ) {
-        return;
-      }
-
-      switch (event.key) {
-        case "ArrowUp":
-        case "k": // Vim-style navigation
-          event.preventDefault();
-          navigatePrevious();
-          break;
-        case "ArrowDown":
-        case "j": // Vim-style navigation
-          event.preventDefault();
-          navigateNext();
-          break;
-        case "Home":
-          event.preventDefault();
-          navigateToIndex(0);
-          break;
-        case "End":
-          event.preventDefault();
-          navigateToIndex(highlightCount - 1);
-          break;
-      }
-    };
-
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [highlightCount, navigatePrevious, navigateNext, navigateToIndex]);
-
   return {
     currentIndex,
     navigatePrevious,

typescript/src/renderer/hooks/useHighlightNavigation.ts

@@ -88,8 +88,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
   background: transparent;
   border: none;
   border-radius: var(--jsondoc-radius-sm);