Add mitt package to desktop for global event bus. ListView will be re…

…written.

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

@@ -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="

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"

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,
       )
     "

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">

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>

apps/desktop/lib/globalEvents.ts

@@ -0,0 +1,3 @@
+import mitt from "mitt";
+
+export const GlobalEventBus = mitt();

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",

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>