WIP

marpe · Dec 21, 2024 · 625354e · 625354e
1 parent 46d79a8
commit 625354e
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 16 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -11,6 +11,7 @@ declare module 'vue' {
     BackLink: typeof import('./src/components/BackLink.vue')['default']
     Debug: typeof import('./src/components/Debug.vue')['default']
     EditEntry: typeof import('./src/components/EditEntry.vue')['default']
+    ILucideStar: typeof import('~icons/lucide/star')['default']
     LogLine: typeof import('./src/components/LogLine.vue')['default']
     LogToast: typeof import('./src/components/LogToast.vue')['default']
     MarpeBar: typeof import('./src/components/MarpeBar.vue')['default']
@@ -19,6 +20,7 @@ declare module 'vue' {
     NavLink: typeof import('./src/components/NavLink.vue')['default']
     NotFound: typeof import('./src/components/NotFound.vue')['default']
     PopoverMenu: typeof import('./src/components/PopoverMenu.vue')['default']
+    RelativeDate: typeof import('./src/components/RelativeDate.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ThemeSwitch: typeof import('./src/components/ThemeSwitch.vue')['default']

diff --git a/src/components/MarpeBar.vue b/src/components/MarpeBar.vue
@@ -19,7 +19,13 @@ const containerEl = useTemplateRef("containerEl");
 const emit = defineEmits<{ hide: [] }>();
 
 async function getTabs() {
-	const response = await chrome.runtime.sendMessage("GET_TABS");
+	// const response = await chrome.runtime.sendMessage("GET_TABS");
+	const response = await sendMessage(
+		"ACTION",
+		{ message: "Hello from MarpeBar" },
+		"background",
+	);
+
 	tabs.value = response.tabs;
 }
 
@@ -53,15 +59,11 @@ function moveFocus(direction: "up" | "down") {
 
 const { focused } = useFocusWithin(containerEl);
 
-onKeyStroke(true, (e) => {
+onKeyStroke((e) => {
 	if (e.type !== "keydown") {
 		return;
 	}
 
-	if (focused.value) {
-		e.preventDefault();
-	}
-
 	// https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
 	if (
 		e.key === "Shift" ||
@@ -78,17 +80,21 @@ onKeyStroke(true, (e) => {
 		(e.key === "Tab" && e.shiftKey)
 	) {
 		moveFocus("up");
+		e.preventDefault();
 	} else if (
 		e.key === "PageDown" ||
 		e.key === "ArrowDown" ||
 		(e.key === "Tab" && !e.shiftKey)
 	) {
 		moveFocus("down");
+		e.preventDefault();
 	} else if (e.key === "Escape") {
 		emit("hide");
+		e.preventDefault();
 	} else if (e.key === "Enter") {
 		filteredTabs.value[0] && handleKeyDown(filteredTabs.value[0], e);
 		emit("hide");
+		e.preventDefault();
 	} else {
 		inputEl.value?.focus();
 	}
@@ -171,11 +177,28 @@ const filteredTabs = computed(() =>
         <div class="search-result-type">
 <!--          tab-->
         </div>
-        <div class="tab-title" v-html="tab.highlighted.title" />
+
         <div class="tab-favicon-container">
-          <img v-if="tab.favIconUrl" :src="tab.favIconUrl" alt="favicon" class="tab-favicon" height="16" width="16" />
+          <template v-if="tab.favIconUrl">
+            <img v-if="tab.favIconUrl" :src="tab.favIconUrl" alt="favicon" class="tab-favicon" height="24" width="24" />
+          </template>
+          <template v-else>
+              <div class="tab-favicon tab-favicon-fallback text-gray-900">
+                <i-lucide-star />
+              </div>
+          </template>
+        </div>
+
+        <div class="tab-header">
+          <div class="tab-top flex-split">
+            <div class="tab-title" v-html="tab.highlighted.title" />
+            <div><RelativeDate :value="tab.lastAccessed" /></div>
+          </div>
+          <div class="tab-subheader flex-split">
+            <div class="tab-url" v-html="tab.highlighted.url" />
+            <div class="tab-window">{{tab.windowId}}</div>
+          </div>
         </div>
-        <div class="tab-url" v-html="tab.highlighted.url" />
       </div>
     </div>
   </div>
@@ -188,7 +211,7 @@ const filteredTabs = computed(() =>
 }
 
 .container {
-  background: var(--vimium-base);
+  background-color: var(--vimium-base);
   border-color: var(--vimium-lavender);
   border-radius: 6px;
   border-width: 2px;
@@ -211,7 +234,7 @@ const filteredTabs = computed(() =>
 }
 
 .marpebar-input {
-  background: var(--vimium-base);
+  background-color: var(--vimium-base);
   border: none;
   border-bottom: 1px solid var(--vimium-surface0);
   border-radius: 0;
@@ -227,8 +250,14 @@ const filteredTabs = computed(() =>
   }
 }
 
-.tab-favicon {
-  border: 1px solid var(--vimium-lavender);
+.tab-favicon, .tab-favicon-fallback {
+  /*border: 1px solid var(--vimium-lavender);*/
+  height: 24px;
+  width: 24px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .tab-title, .tab-url {
@@ -237,32 +266,65 @@ const filteredTabs = computed(() =>
   white-space: nowrap;
 }
 
+.tab-header {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.flex-split {
+  align-items: start;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
 .tab-title {
   color: var(--vimium-blue);
   font-weight: bold;
+  overflow: hidden;
 }
 
 .tab-url {
   color: var(--vimium-lavender);
   font-size: 0.9rem;
+  overflow: hidden;
 }
 
 .search-result-type {
   color: var(--vimium-peach);
 }
 
 .search-results {
+  overflow-x: clip;
   overflow-y: auto;
 
   > div {
     border-top: 1px solid var(--vimium-surface0);
     padding: 0.5rem;
 
     &:focus {
-      background: var(--vimium-surface0);
+      background-color: var(--vimium-surface0);
       outline: none;
     }
   }
 }
 
+.tab-window {
+  color: oklch(from currentColor calc(l - 0.4) c h);
+}
+
+.tab-favicon-container, .search-result-type {
+  align-items: center;
+  display: flex;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+  justify-content: center;
+
+  .tab-favicon {
+    background-color: var(--vimium-lavender) !important;
+    border-radius: 5px;
+  }
+}
+
 </style>
diff --git a/src/components/RelativeDate.vue b/src/components/RelativeDate.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { computed, PropType } from "vue";
+import { useTimeAgo } from "@vueuse/core";
+
+const { value } = defineProps({
+	value: {
+		type: Object as PropType<string | number | Date | undefined>,
+		required: true,
+	},
+});
+
+const date = computed(() => {
+	if (value) {
+		return useTimeAgo(value);
+	}
+	return "";
+});
+</script>
+
+
+<template>
+  {{ date }}
+</template>
diff --git a/src/entrypoints/background.ts b/src/entrypoints/background.ts
@@ -94,15 +94,20 @@ export default defineBackground({
 			});
 		});
 
-		chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+		onMessage("ACTION", async ({ data }) => {
+			const tabs = await browser.tabs.query({});
+			return { message: "hello!", tabs };
+		});
+
+		/*chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
 			if (message === "GET_TABS") {
 				browser.tabs.query({}).then((tabs) => {
 					sendResponse({ tabs });
 				});
 				return true;
 			}
 			return false;
-		});
+		});*/
 
 		onMessage("ACTIVATE_TAB", async ({ data }) => {
 			const { tabId, windowId } = data;

diff --git a/src/entrypoints/marpe-bar/App.vue b/src/entrypoints/marpe-bar/App.vue
@@ -53,6 +53,10 @@ const containerEl = useTemplateRef("containerEl");
 const { focused } = useFocusWithin(containerEl);
 
 watch(focused, (value) => {
+	if (import.meta.env.MODE === "development") {
+		return;
+	}
+
 	if (!value) {
 		onHide();
 	}