From 215f69883430cf60c6ee5e3520d7f08d35605d2e Mon Sep 17 00:00:00 2001
From: eduardo aleixo <eh-am@users.noreply.github.com>
Date: Thu, 11 Jan 2024 22:51:23 +0000
Subject: [PATCH] feat: support pressing escape (#38)

This should be an ongoing effort, since new pages will require this
support to be implemented, but this PR implements for the existing
pages.
---
 src/components/card.ts  | 15 +++++++++++----
 src/sections/sidebar.ts |  5 +++++
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/card.ts b/src/components/card.ts
index 5d92399..bbb58b6 100644
--- a/src/components/card.ts
+++ b/src/components/card.ts
@@ -106,6 +106,9 @@ function setupCardKeydown(
     } else if (keyPressed === "ArrowDown") {
       e.preventDefault();
       onVerticalMovement(allCards, card, keyPressed);
+    } else if (keyPressed === "Escape") {
+      hideChannelActions(card);
+      card.focus();
     }
   }
 
@@ -122,6 +125,13 @@ function getChannelActionsWrapper(card: HTMLElement) {
   );
 }
 
+function hideChannelActions(card: HTMLElement) {
+  const channelActionsWrapper = getChannelActionsWrapper(card);
+  channelActionsWrapper.forEach((el) => {
+    el.style.opacity = "0";
+  });
+}
+
 export function handleFocusOut(card: HTMLElement): Teardown {
   function onFocusOut(e: FocusEvent) {
     const target = e.relatedTarget as HTMLElement | null;
@@ -130,10 +140,7 @@ export function handleFocusOut(card: HTMLElement): Teardown {
     }
 
     if (!card.contains(target)) {
-      const channelActionsWrapper = getChannelActionsWrapper(card);
-      channelActionsWrapper.forEach((el) => {
-        el.style.opacity = "0";
-      });
+      hideChannelActions(card);
     }
   }
 
diff --git a/src/sections/sidebar.ts b/src/sections/sidebar.ts
index 82a8b96..ed3b648 100644
--- a/src/sections/sidebar.ts
+++ b/src/sections/sidebar.ts
@@ -454,6 +454,11 @@ function setupUserMenuKeydown(): Teardown {
         } else {
           n.value.focus();
         }
+      } else if (keyPressed === "Escape") {
+        if (userButton) {
+          findClickableUserButtonEl(userButton)?.click();
+          focusBackWhenTransitionEnds(userButton);
+        }
       }
     }