From d34852a3779ac6daea9003123e488828c983e73a Mon Sep 17 00:00:00 2001
From: Huakun Shen <huakun.shen@huakunshen.com>
Date: Mon, 13 May 2024 12:39:54 -0400
Subject: [PATCH] Add mitt package to desktop for global event bus. ListView
 will be rewritten.

ListView will be rewritten. Using Radix's Listbox has too much restrictions, I can't control which row to highlight programmatically.
---
 apps/desktop/components/AppList.vue           | 11 +++++-
 apps/desktop/components/SearchBar.vue         | 21 ++++++++++--
 .../components/interface/list/ListItem.vue    |  2 +-
 .../components/interface/list/ListView.vue    |  8 +++++
 apps/desktop/components/ui/input/Input.vue    | 34 ++++++++++++-------
 apps/desktop/lib/globalEvents.ts              |  3 ++
 apps/desktop/package.json                     |  1 +
 apps/desktop/pages/index.vue                  | 10 +-----
 pnpm-lock.yaml                                |  3 ++
 9 files changed, 67 insertions(+), 26 deletions(-)
 create mode 100644 apps/desktop/lib/globalEvents.ts

diff --git a/apps/desktop/components/AppList.vue b/apps/desktop/components/AppList.vue
index be19f5f3..4fe6ef5b 100644
--- a/apps/desktop/components/AppList.vue
+++ b/apps/desktop/components/AppList.vue
@@ -5,6 +5,7 @@ import { computedAsync } from "@vueuse/core";
 import { open } from "@tauri-apps/api/shell";
 import { cn } from "@/lib/utils";
 import type { HTMLAttributes } from "vue";
+import { GlobalEventBus } from "~/lib/globalEvents";
 
 const props = defineProps<{
   class?: HTMLAttributes["class"];
@@ -13,10 +14,18 @@ const appStore = useAppsStore();
 const foundApps = computedAsync<model.apps.AppInfo[]>(() => {
   return appStore.searchApps(appStore.searchTerm);
 }, []);
+
+GlobalEventBus.on("searchbar:keydown", (key) => {
+  console.log("searchbar:keydown", key);
+});
+const selected = ref("");
+watch(foundApps, () => {
+  selected.value = foundApps.value[0]?.app_desktop_path ?? "";
+});
 </script>
 
 <template>
-  <ListView :class="cn(props.class)">
+  <ListView :class="cn(props.class)" v-model="selected">
     <ListGroup heading="Applications">
       <ListItem
         @select="
diff --git a/apps/desktop/components/SearchBar.vue b/apps/desktop/components/SearchBar.vue
index ff090913..b5eb7622 100644
--- a/apps/desktop/components/SearchBar.vue
+++ b/apps/desktop/components/SearchBar.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { Input } from "@/components/ui/input";
 import { Search } from "lucide-vue-next";
-import { useAppConfigStore } from "~/stores/appConfig";
+import { cn } from "@/lib/utils";
+import { GlobalEventBus } from "~/lib/globalEvents";
 
 const props = defineProps({
   autofocus: {
@@ -13,8 +14,10 @@ const props = defineProps({
     default: "",
   },
 });
-import { cn } from "@/lib/utils";
-const appStore = useAppConfigStore();
+const emits = defineEmits<{
+  (e: "downpressed"): void;
+}>();
+const appStore = useAppsStore();
 const searchTerm = computed({
   get() {
     return appStore.searchTerm;
@@ -23,10 +26,22 @@ const searchTerm = computed({
     appStore.searchTerm = val;
   },
 });
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === "Escape") {
+    appStore.searchTerm = "";
+  } else if (e.key === "ArrowDown") {
+    emits("downpressed");
+  }
+  // console.log(e.key);
+  GlobalEventBus.emit("searchbar:keydown", e.key);
+}
+
+onMounted(() => {});
 </script>
 <template>
   <div :class="cn('relative w-full items-center border-b-2', props.class)">
     <Input
+      @keydown="handleKeydown"
       :autofocus="props.autofocus"
       type="text"
       v-model="searchTerm"
diff --git a/apps/desktop/components/interface/list/ListItem.vue b/apps/desktop/components/interface/list/ListItem.vue
index a7901393..6b0cf95e 100644
--- a/apps/desktop/components/interface/list/ListItem.vue
+++ b/apps/desktop/components/interface/list/ListItem.vue
@@ -13,7 +13,7 @@ const props = defineProps<{
     value=""
     :class="
       cn(
-        'w-full flex items-center px-7 h-[25px] leading-none text-[13px] relative text-green9 select-none outline-none data-[highlighted]:ring-green9 data-[highlighted]:ring-1 focus:ring-green9 focus:ring-2 focus:bg-primary-foreground hover:bg-primary-foreground data-[state=checked]:bg-green9 data-[state=checked]:text-white data-[disabled]:opacity-50 rounded',
+        'w-full flex items-center px-7 h-[25px] leading-none text-[13px] relative text-green9 select-none outline-none data-[highlighted]:ring-green9 data-[highlighted]:ring-1 focus:ring-green9 focus:ring-2 focus:bg-primary-foreground data-[state=checked]:bg-green9 data-[state=checked]:text-white data-[disabled]:opacity-50 rounded',
         props.class,
       )
     "
diff --git a/apps/desktop/components/interface/list/ListView.vue b/apps/desktop/components/interface/list/ListView.vue
index 25584c6e..b6739697 100644
--- a/apps/desktop/components/interface/list/ListView.vue
+++ b/apps/desktop/components/interface/list/ListView.vue
@@ -6,11 +6,19 @@ import type { HTMLAttributes } from "vue";
 
 const props = defineProps<{
   class?: HTMLAttributes["class"];
+  modelValue?: string;
+}>();
+const emits = defineEmits<{
+  (e: "update:modelValue", payload: any): void;
 }>();
 </script>
 
 <template>
   <ListboxRoot
+    :highlight-on-hover="true"
+    @highlight="e => console.log(e)"
+    :model-value="props.modelValue"
+    @update:model-value="(e) => emits('update:modelValue', e)"
     :class="cn('flex flex-col rounded-lg text-green9 mx-auto', props.class)"
   >
     <ListboxContent class="p-2 w-full h-full overflow-auto">
diff --git a/apps/desktop/components/ui/input/Input.vue b/apps/desktop/components/ui/input/Input.vue
index 54517946..8d6b5770 100644
--- a/apps/desktop/components/ui/input/Input.vue
+++ b/apps/desktop/components/ui/input/Input.vue
@@ -1,24 +1,34 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { useVModel } from '@vueuse/core'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue";
+import { useVModel } from "@vueuse/core";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  defaultValue?: string | number
-  modelValue?: string | number
-  class?: HTMLAttributes['class']
-}>()
+  defaultValue?: string | number;
+  modelValue?: string | number;
+  class?: HTMLAttributes["class"];
+}>();
 
 const emits = defineEmits<{
-  (e: 'update:modelValue', payload: string | number): void
-}>()
+  (e: "update:modelValue", payload: string | number): void;
+  (e: "keydown", payload: KeyboardEvent): void;
+}>();
 
-const modelValue = useVModel(props, 'modelValue', emits, {
+const modelValue = useVModel(props, "modelValue", emits, {
   passive: true,
   defaultValue: props.defaultValue,
-})
+});
 </script>
 
 <template>
-  <input v-model="modelValue" :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)">
+  <input
+    v-model="modelValue"
+    @keydown="(e) => emits('keydown', e)"
+    :class="
+      cn(
+        'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  />
 </template>
diff --git a/apps/desktop/lib/globalEvents.ts b/apps/desktop/lib/globalEvents.ts
new file mode 100644
index 00000000..0775606e
--- /dev/null
+++ b/apps/desktop/lib/globalEvents.ts
@@ -0,0 +1,3 @@
+import mitt from "mitt";
+
+export const GlobalEventBus = mitt();
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index 1a67e772..ad8ce809 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -22,6 +22,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-vue-next": "^0.378.0",
+    "mitt": "^3.0.1",
     "nuxt": "^3.11.2",
     "pinia": "^2.1.7",
     "radix-vue": "^1.7.4",
diff --git a/apps/desktop/pages/index.vue b/apps/desktop/pages/index.vue
index 30508235..b68a6fe4 100644
--- a/apps/desktop/pages/index.vue
+++ b/apps/desktop/pages/index.vue
@@ -2,14 +2,6 @@
 import { apps, model } from "@jarvis/api";
 
 const appStore = useAppsStore();
-const searchTerm = computed({
-  get() {
-    return appStore.searchTerm;
-  },
-  set(val) {
-    appStore.searchTerm = val;
-  },
-});
 
 onMounted(async () => {
   await apps.refreshApplicationsList();
@@ -18,7 +10,7 @@ onMounted(async () => {
 </script>
 <template>
   <NuxtLayout>
-    <SearchBar />
+    <SearchBar @downpressed="() => console.log('pressed')" />
     <div class="grow overflow-y-auto track-gray-100">
       <AppList class="track-gray-100" />
     </div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a0edaf29..c7e87f67 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,6 +53,9 @@ importers:
       lucide-vue-next:
         specifier: ^0.378.0
         version: 0.378.0(vue@3.4.27)
+      mitt:
+        specifier: ^3.0.1
+        version: 3.0.1
       nuxt:
         specifier: ^3.11.2
         version: 3.11.2(@opentelemetry/api@1.8.0)(@unocss/reset@0.60.0)(eslint@8.57.0)(floating-vue@5.2.2)(typescript@5.4.5)(unocss@0.60.0)(vite@5.2.11)