feat: add ctrl+space keyboard shortcut

resolves #49

src/Options/Options.tsx

@@ -1,9 +1,11 @@
 import React, { useCallback, useEffect, useState } from 'react'
+import { browser } from 'webextension-polyfill-ts'
 import OptionsStorage, { OptionShortName, OptionStorageContentType } from '../utils/OptionsStorage'
 import Highlight from './components/Highlight'
 import Institution from './components/Institution'
 import ClipboardPaste from './components/ClipboardPaste'
 import 'styles/tailwind.css'
+import KeyboardShortcut from './components/KeyboardShortcut'
 
 type ThenArgument<T> = T extends PromiseLike<infer U> ? U : T
 export type updateOptionsType = <K extends OptionShortName>(
@@ -54,6 +56,22 @@ const Options: React.FC = () => {
           value={OPTIONS_CLIPBOARD_PASTE_ENABLED}
           updateOptions={updateOptions}
         />
+
+        <KeyboardShortcut />
+
+        <p>
+          To open the Welcome Guide again, click&nbsp;
+          <a
+            className="text-blue-700 border-0 bg-none outline-none p-0 underline cursor-pointer select-text hover:text-blue-900"
+            href={browser.runtime.getURL(`/guide.html`)}
+            target="_blank"
+            rel="noreferrer"
+          >
+            here
+          </a>
+          .
+        </p>
+
       </div>
     </div>
   )

src/Options/components/KeyboardShortcut.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import Browser from 'utils/Browser'
+
+const KeyboardShortcut = () => {
+  return (
+    <section className="flex flex-row justify-between items-center gap-8">
+      <div className="flex flex-col">
+        <strong>Keyboard shortcut</strong>
+        <label>
+          The default keyboard shortcut for opening the search popup is&nbsp;
+          <kbd>Ctrl</kbd><kbd>Space</kbd>
+          . To customise it,&nbsp;
+          {
+            Browser.isChrome ?
+              (
+                <>
+                  click&nbsp;
+                  <a
+                    className="text-blue-700 border-0 bg-none outline-none p-0 underline cursor-pointer select-text hover:text-blue-900"
+                    href="chrome://extensions/shortcuts"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    here
+                  </a>
+                  .
+                </>
+              ) : (
+                <>
+                  visit&nbsp;
+                  <a
+                    className="text-blue-700 border-0 bg-none outline-none p-0 underline cursor-pointer select-text hover:text-blue-900"
+                    href="about:addons"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    about:addons
+                  </a>
+                  &nbsp;and click "Manage Extension Shortcuts", as shown in&nbsp;
+                  <a
+                    className="text-blue-700 border-0 bg-none outline-none p-0 underline cursor-pointer select-text hover:text-blue-900"
+                    href="https://bug1303384.bmoattachments.org/attachment.cgi?id=9051647"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    this video
+                  </a>
+                </>
+              )
+          }
+        </label>
+      </div>
+    </section>
+  )
+}
+
+export default KeyboardShortcut

src/Popup/ExternalLinks.tsx

@@ -63,7 +63,7 @@ const ExternalLinks: React.FC<Props> = ({
   }, [])
 
   return (
-    <div className="select-none">
+    <div className="select-none mt-4">
       <small>Search on:</small>
       <div className="flex flex-row justify-center mt-2 gap-4">
         <ExternalButton

src/Popup/Popup.tsx

@@ -8,6 +8,7 @@ import ClipboardSuggestion from './ClipboardSuggestion'
 import useMessenger from './hooks/useMessenger'
 import usePopup from './hooks/usePopup'
 import useSearch from './hooks/useSearch'
+import useFocusInput from './hooks/useFocusInput'
 
 import 'styles/tailwind.css'
 
@@ -37,6 +38,8 @@ const Popup: React.FC = () => {
     setIsSearching,
     setSearchResult,
   })
+  const inputReference = useFocusInput()
+
 
   const supportedJurisdictions = Constants.JURISDICTIONS
 
@@ -54,6 +57,7 @@ const Popup: React.FC = () => {
         />
       </div>
       <input
+        ref={inputReference}
         className="w-full p-2 my-4 outline-none rounded border border-solid border-gray-400"
         type="search"
         placeholder="case citation, party name, or legislation"

src/Popup/hooks/useFocusInput.ts

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from 'react'
+
+const useFocusInput = () => {
+  const inputReference = useRef(null)
+
+  useEffect(() => {
+    if (inputReference.current) {
+      inputReference.current.focus()
+    }
+  }, [])
+
+  return inputReference
+}
+
+export default useFocusInput

src/Popup/hooks/usePopup.ts

@@ -21,12 +21,24 @@ const usePopup = ({ search, setIsSearching, setSearchResult }) => {
   const [selectedJurisdiction, setSelectedJurisdiction] = useState(Constants.JURISDICTIONS.UK.id)
 
   const storeQuery = useCallback((value: string) => Storage.set(keys.QUERY, value), [])
+  const onChangeJurisdiction = useCallback((
+    value,
+    doNotStore: boolean = false,
+  ): void => {
+    setSelectedJurisdiction(value)
+    if(!doNotStore){
+      Storage.set(keys.SELECTED_JURISDICTION, value)
+    }
+    setLastSearchQuery(``)
+    setSearchResult([] as SearchResult[])
+  }, [setSearchResult])
+
   const autosetJurisdiction = useCallback((value: string) => {
     const citations = Finder.findCaseCitation(value)
     if(citations.length > 0){
-      setSelectedJurisdiction(citations[0].jurisdiction)
+      onChangeJurisdiction(citations[0].jurisdiction)
     }
-  }, [])
+  }, [onChangeJurisdiction])
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const debouncedViewCitation = useCallback(Helpers.debounce(search, 500), [search])
@@ -44,11 +56,16 @@ const usePopup = ({ search, setIsSearching, setSearchResult }) => {
   const onSearchQueryChange = useCallback((
     { target: { value }},
     doNotStore = false,
+    debounceAutosetJurisdiction = true,
   ) => {
     setQuery(value)
     setIsSearching(false)
     setSearchResult([] as SearchResult[])
-    debouncedAutosetJurisdiction(value)
+    if(debounceAutosetJurisdiction){
+      debouncedAutosetJurisdiction(value)
+    } else {
+      autosetJurisdiction(value)
+    }
     if(!doNotStore){
       debouncedStoreQuery(value)
     }
@@ -86,18 +103,6 @@ const usePopup = ({ search, setIsSearching, setSearchResult }) => {
   //   })
   // }, [])
 
-  const onChangeJurisdiction = useCallback((
-    value,
-    doNotStore: boolean = false,
-  ): void => {
-    setSelectedJurisdiction(value)
-    if(!doNotStore){
-      Storage.set(keys.SELECTED_JURISDICTION, value)
-    }
-    setLastSearchQuery(``)
-    setSearchResult([] as SearchResult[])
-  }, [setSearchResult])
-
   const applyClipboardText = useCallback((clipboardText) => {
     onSearchQueryChange({target: { value: clipboardText }})
     doSearch({ inputQuery: clipboardText })
@@ -110,7 +115,7 @@ const usePopup = ({ search, setIsSearching, setSearchResult }) => {
 
       const storedQuery = await Storage.get(keys.QUERY)
       if(query.length === 0 && storedQuery !== null && storedQuery.length > 0){
-        onSearchQueryChange({target: { value: storedQuery }}, true)
+        onSearchQueryChange({target: { value: storedQuery }}, true, false)
         shouldDoSearch = true
       }
       const storedJurisdiction = await Storage.get(keys.SELECTED_JURISDICTION)

src/manifest.json

@@ -229,6 +229,14 @@
     "default_title": "Clerkent",
     "default_popup": "popup.html"
   },
+  "commands": {
+    "_execute_browser_action": {
+      "suggested_key": {
+        "default": "Ctrl+Space"
+      },
+      "description": "Open the Clerkent search popup"
+    }
+  },
   "web_accessible_resources": [
     "assets/icons/pdf.svg",
     "assets/clerkent.png"

src/pages/Guide/Guide.tsx

@@ -18,8 +18,13 @@ const Guide = () => {
 
       <p className="mt-8">
         It should now appear in your browser toolbar (at the top-right corner of your browser window).
-        Click the Clerkent icon and try searching for something (e.g. "<span className="select-text">carbolic smoke ball</span>").
+        Click the Clerkent icon and try searching for something (e.g. "<span className="select-text">[1892] EWCA Civ 1</span>").
       </p>
+
+      <p className="mt-8">
+        You can also open the search popup via the keyboard shortcut <kbd>Ctrl</kbd><kbd>Space</kbd>.
+      </p>
+
       <div className="fixed right-40 top-8 flex flex-col items-center">
         <span className="text-4xl mb-2">↗️</span>
         <span>(somewhere here)</span>

src/styles/tailwind.css

@@ -62,6 +62,13 @@
   .clerkent.case > .clerkent-tooltip {
     @apply hidden hover:block;
   } */
+
+  kbd {
+    @apply border border-solid border-gray-300 rounded bg-gray-100 p-0.5;
+  }
+  kbd + kbd {
+    @apply ml-1;
+  }
 }
 
 @keyframes lds-ellipsis1 {