refactor: rework useSearch and ViewSearch to no longer use ViewBase and expect defined data

app/src/components/globals/ViewSearch.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends Obj | AnyTreeNode">
-import { computed, type Component } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import type { AnyTreeNode } from '@/helpers/data/tree'
@@ -10,12 +10,10 @@ const props = withDefaults(
     items?: T[] | null
     itemsName: string | null
     modelValue?: string
-    skeleton?: string | Component
   }>(),
   {
     items: undefined,
     modelValue: undefined,
-    skeleton: 'ListGroupSkeleton',
   },
 )
 
@@ -24,6 +22,7 @@ const slots = defineSlots<{
   'top-bar-buttons': any
   top: any
   'alert-message': any
+  'forced-default'?: any
   default: any
   bot: any
   skeleton: any
@@ -47,11 +46,10 @@ const noItemsMessage = computed(() => {
 </script>
 
 <template>
-  <ViewBase :skeleton="skeleton">
+  <div>
-    <template v-if="slots['top-bar']" #top-bar>
+    <slot v-if="slots['top-bar']" name="top-bar" />
-      <slot name="top-bar" />
+    <TopBar v-else>
-    </template>
+      <template #group-left>
-    <template v-if="!slots['top-bar']" #top-bar-group-left>
         <BInputGroup class="w-100">
           <BInputGroupText>
             <YIcon iname="search" />
@@ -60,36 +58,30 @@ const noItemsMessage = computed(() => {
           <BFormInput
             id="top-bar-search"
             v-model="model"
-          :placeholder="t('search.for', { items: t('items.' + itemsName, 2) })"
+            :placeholder="
-          :disabled="!items"
+              t('search.for', { items: t('items.' + itemsName, 2) })
+            "
+            :disabled="items === undefined"
           />
         </BInputGroup>
       </template>
-    <template v-if="!slots['top-bar']" #top-bar-group-right>
+      <template #group-right>
         <slot name="top-bar-buttons" />
       </template>
+    </TopBar>
 
-    <template #top>
     <slot name="top" />
-    </template>
 
-    <template #default>
+    <slot name="forced-default">
       <BAlert v-if="noItemsMessage" :model-value="true" variant="warning">
         <slot name="alert-message">
           <YIcon iname="exclamation-triangle" />
           {{ noItemsMessage }}
         </slot>
       </BAlert>
-
       <slot v-else name="default" />
-    </template>
+    </slot>
 
-    <template #bot>
     <slot name="bot" />
-    </template>
+  </div>
-
-    <template #skeleton>
-      <slot name="skeleton" />
-    </template>
-  </ViewBase>
 </template>

app/src/composables/useSearch.ts

@@ -1,15 +1,19 @@
-import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue'
+import type {
-import { computed, ref, toValue, watch } from 'vue'
+  ComputedRef,
+  MaybeRefOrGetter,
+  Ref,
+  WritableComputedRef,
+} from 'vue'
+import { computed, isRef, ref, toValue } from 'vue'
 
 import type { AnyTreeNode, TreeRootNode } from '@/helpers/data/tree'
 
+// Returns `undefined` when there's no items and `null` when there's no match
 export function useSearch<
   T extends any[] | TreeRootNode,
   V extends T extends (infer V)[] ? V : AnyTreeNode,
 >(
-  items:
+  items: MaybeRefOrGetter<T> | ComputedRef<T>,
-    | MaybeRefOrGetter<T | null | undefined>
-    | ComputedRef<T | null | undefined>,
   filterFn: (search: string, item: V, index: number, arr: T) => boolean,
   {
     externalSearch,
@@ -18,19 +22,17 @@ export function useSearch<
   }: {
     filterAllFn?: (search: string, items: T) => boolean | undefined
     filterIfNoSearch?: boolean
-    externalSearch?: MaybeRefOrGetter<string>
+    externalSearch?: Ref<string> | WritableComputedRef<string>
   } = {},
 ): [search: Ref<string>, filteredItems: ComputedRef<T | undefined | null>] {
-  const search = ref(toValue(externalSearch) ?? '')
+  const search = isRef(externalSearch)
-  watch(
+    ? externalSearch
-    () => toValue(externalSearch),
+    : ref(toValue(externalSearch) ?? '')
-    (s) => (search.value = s ?? ''),
-  )
 
   const filteredItems = computed(() => {
     const items_ = toValue(items)
     const s = toValue(search.value).toLowerCase()
-    if (!items_) return undefined
+    if (!items_.length) return undefined
     if (filterAllFn) {
       const returnAll = filterAllFn(s, items_)
       if (returnAll !== undefined) {