From 2d168a68cf3f4b04adac0c7abec68a557613238b Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Sat, 3 Feb 2024 14:13:29 +0530
Subject: [PATCH] feat: Improved keyboard navigation for tags and smart views.
 Tags can now be expanded/closed using left and right arrow keys.

---
 .../Components/Tags/TagsListItem.tsx          | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx b/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
index 499206871..918e5572b 100644
--- a/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
+++ b/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
@@ -86,16 +86,26 @@ export const TagsListItem: FunctionComponent<Props> = observer(
       setTitle(tag.title || '')
     }, [setTitle, tag])
 
+    const setTagExpanded = useCallback(
+      (expanded: boolean) => {
+        if (!hasChildren) {
+          return
+        }
+        setShowChildren(expanded)
+        if (!navigationController.isSearching) {
+          navigationController.setExpanded(tag, expanded)
+        }
+      },
+      [hasChildren, navigationController, tag],
+    )
+
     const toggleChildren = useCallback(
       (e?: MouseEvent) => {
         e?.stopPropagation()
         const shouldShowChildren = !showChildren
-        setShowChildren(shouldShowChildren)
-        if (!navigationController.isSearching) {
-          navigationController.setExpanded(tag, shouldShowChildren)
-        }
+        setTagExpanded(shouldShowChildren)
       },
-      [showChildren, tag, navigationController],
+      [showChildren, setTagExpanded],
     )
 
     useEffect(() => {
@@ -285,6 +295,10 @@ export const TagsListItem: FunctionComponent<Props> = observer(
           onKeyDown={(event) => {
             if (event.key === KeyboardKey.Enter || event.key === KeyboardKey.Space) {
               selectCurrentTag().catch(console.error)
+            } else if (event.key === KeyboardKey.Left) {
+              setTagExpanded(false)
+            } else if (event.key === KeyboardKey.Right) {
+              setTagExpanded(true)
             }
           }}
           ref={tagRef}