WIP

marpe · Dec 21, 2024 · fdd9492 · fdd9492
1 parent 9893413
commit fdd9492
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 22 deletions.
diff --git a/src/components/MarpeBar.vue b/src/components/MarpeBar.vue
@@ -1,7 +1,7 @@
 <script lang="ts"
         setup>
 import { AddHighlight } from "@/composables/Highlight";
-import { onClickOutside, onKeyStroke, useFocusWithin } from "@vueuse/core";
+import { onClickOutside, onKeyStroke } from "@vueuse/core";
 import { computed, onMounted, onUnmounted, ref, useTemplateRef } from "vue";
 import type { Tabs } from "webextension-polyfill";
 import { sendMessage } from "webext-bridge/content-script";
@@ -46,17 +46,16 @@ function moveFocus(direction: "up" | "down") {
 	}
 	const nextEl =
 		direction === "down"
-			? focused.nextElementSibling ?? focused.parentElement?.firstElementChild
-			: focused.previousElementSibling ??
-				focused.parentElement?.lastElementChild;
+			? focused.nextElementSibling ?? inputEl.value
+			: focused.previousElementSibling ?? inputEl.value;
 
 	if (nextEl) {
 		(nextEl as HTMLDivElement).focus();
 	}
 }
 
 onClickOutside(containerEl, () => {
-  emit("hide");
+	emit("hide");
 });
 
 onKeyStroke((e) => {
@@ -74,7 +73,10 @@ onKeyStroke((e) => {
 		return;
 	}
 
-	if (
+	if (e.key === "Escape") {
+		emit("hide");
+		e.preventDefault();
+	} else if (
 		e.key === "PageUp" ||
 		e.key === "ArrowUp" ||
 		(e.key === "Tab" && e.shiftKey)
@@ -158,17 +160,20 @@ const filteredTabs = computed(() =>
 		}),
 );
 
-async function handleClick(tab: Pick<Tabs.Tab, "id" | "windowId">, e: MouseEvent) {
-  await activateTab(tab);
-  emit("hide");
+async function handleClick(
+	tab: Pick<Tabs.Tab, "id" | "windowId">,
+	e: MouseEvent,
+) {
+	await activateTab(tab);
+	emit("hide");
 }
 
 async function activateTab(tab: Pick<Tabs.Tab, "id" | "windowId">) {
-  const response = await sendMessage(
-    "ACTIVATE_TAB",
-    { tabId: tab.id, windowId: tab.windowId },
-    "background",
-  );
+	const response = await sendMessage(
+		"ACTIVATE_TAB",
+		{ tabId: tab.id, windowId: tab.windowId },
+		"background",
+	);
 }
 </script>
 

diff --git a/src/entrypoints/marpe-bar/App.vue b/src/entrypoints/marpe-bar/App.vue
@@ -40,14 +40,6 @@ function onHide() {
 	showBar.value = false;
 }
 
-onKeyStroke(
-	["Escape"],
-	(e) => {
-		onHide();
-	},
-	{ eventName: "keydown" },
-);
-
 const containerEl = useTemplateRef("containerEl");
 </script>