From 4e8081318e932608019757eac1fc54cd24d2ad9f Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Mon, 10 Feb 2025 20:17:59 +0100
Subject: [PATCH] feat(front): use Url to store and manage global search query
 (search modal)

---
 front/src/App.vue                             |   4 +-
 front/src/components/ui/Input.vue             |  14 +-
 front/src/ui/components/Sidebar.vue           |  23 +--
 front/src/ui/components/UserMenu.vue          |   2 +-
 front/src/ui/composables/useModal.ts          | 171 +++++++++++-------
 .../ui/modals/{Languages.vue => Language.vue} |   2 +-
 front/src/ui/modals/Search.vue                |  80 ++++++++
 front/src/ui/modals/Upload.vue                |  18 +-
 8 files changed, 209 insertions(+), 105 deletions(-)
 rename front/src/ui/modals/{Languages.vue => Language.vue} (95%)
 create mode 100644 front/src/ui/modals/Search.vue

diff --git a/front/src/App.vue b/front/src/App.vue
index bd85ec9a1..a596a66be 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -19,7 +19,8 @@ import Queue from '~/components/Queue.vue'
 import Sidebar from '~/ui/components/Sidebar.vue'
 import ShortcutsModal from '~/ui/modals/Shortcuts.vue'
 import LanguagesModal from '~/ui/modals/Languages.vue'
-import UploadModal from '~/ui/modals/Upload.vue';
+import SearchModal from '~/ui/modals/Search.vue'
+import UploadModal from '~/ui/modals/Upload.vue'
 
 // Fake content
 onMounted(async () => {
@@ -90,6 +91,7 @@ store.dispatch('auth/fetchUser')
     <FilterModal v-if="store.state.auth.authenticated" />
     <ReportModal />
     <UploadModal v-if="store.state.auth.authenticated" />
+    <SearchModal />
   </div>
 </template>
 
diff --git a/front/src/components/ui/Input.vue b/front/src/components/ui/Input.vue
index 47aa05f00..405ddf880 100644
--- a/front/src/components/ui/Input.vue
+++ b/front/src/components/ui/Input.vue
@@ -62,13 +62,13 @@ const model = defineModel<string|number>({ required: true })
     </span>
 
     <input
-    v-bind="{...$attrs, ...attributes, ...color(props, ['solid', 'default', 'secondary'])()}"
-    v-model="model"
-    ref="input"
-    :autofocus="autofocus || undefined"
-    :placeholder="placeholder"
-    @click.stop
-    @blur="showPassword = false"
+      v-bind="{...$attrs, ...attributes, ...color(props, ['solid', 'default', 'secondary'])()}"
+      v-model="model"
+      ref="input"
+      :autofocus="autofocus || undefined"
+      :placeholder="placeholder"
+      @click.stop
+      @blur="showPassword = false"
     />
 
     <!-- Left side icon -->
diff --git a/front/src/ui/components/Sidebar.vue b/front/src/ui/components/Sidebar.vue
index 405a06227..a97ea06a8 100644
--- a/front/src/ui/components/Sidebar.vue
+++ b/front/src/ui/components/Sidebar.vue
@@ -3,6 +3,7 @@ import { ref, onMounted, watch, computed } from 'vue'
 import { useUploadsStore } from '../stores/upload'
 import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
+import { useModal } from '~/ui/composables/useModal.ts'
 
 import Logo from '~/components/Logo.vue'
 import Input from '~/components/ui/Input.vue'
@@ -18,14 +19,13 @@ const isCollapsed = ref(true)
 const route = useRoute()
 watch(() => route.path, () => isCollapsed.value = true)
 
-const searchQuery = ref('')
-
 // Hide the fake app when the real one is loaded
 onMounted(() => {
   document.getElementById('fake-app')?.remove()
 })
 
 const { t } = useI18n()
+const { value: searchParameter } = useModal('search')
 
 const store = useStore()
 const uploads = useUploadsStore()
@@ -91,17 +91,14 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
       </Layout>
     </Layout>
     <Layout no-gap stack :class="[$style['menu-links'], isCollapsed && 'hide-on-mobile']">
-      <form :class="$style.search">
-        <Input
-          name="search"
-          v-model="searchQuery"
-          raised
-          autocomplete="search"
-          type="search"
-          icon="bi-search"
-          :placeholder="t('components.audio.SearchBar.placeholder.search')"
-        />
-      </form>
+      <Input
+        raised
+        v-model="searchParameter"
+        autocomplete="search"
+        type="search"
+        icon="bi-search"
+        :placeholder="t('components.audio.SearchBar.placeholder.search')"
+      />
 
       <Spacer />
 
diff --git a/front/src/ui/components/UserMenu.vue b/front/src/ui/components/UserMenu.vue
index edc45183c..8ca05de8b 100644
--- a/front/src/ui/components/UserMenu.vue
+++ b/front/src/ui/components/UserMenu.vue
@@ -91,7 +91,7 @@ const labels = computed(() => ({
           {{ labels.settings }}
       </PopoverItem>
       <hr v-if="store.state.auth.authenticated"/>
-      <PopoverItem :to="useModal('languages').to">
+      <PopoverItem :to="useModal('language').to">
         <i class="bi bi-translate" />
         {{ labels.language }}...
       </PopoverItem>
diff --git a/front/src/ui/composables/useModal.ts b/front/src/ui/composables/useModal.ts
index 0faa53cac..c6107a4c6 100644
--- a/front/src/ui/composables/useModal.ts
+++ b/front/src/ui/composables/useModal.ts
@@ -1,82 +1,117 @@
-import { computed } from 'vue'
-import { useRouter, type RouteLocationRaw } from 'vue-router'
+import { computed } from "vue";
+import { useRouter, type RouteLocationRaw, type LocationQuery } from "vue-router";
 
 /**
  * Bind a modal to a single query parameter in the URL (and vice versa)
  *
  * @param flag query parameter to appear in the `url`, corresponding with `isOpen`
+ * @param assignment a tuple of two functions:
+ * - from outside world to flag value (default: (_) => null)
+ * - from flag value to boolean (default: if flag value is null)
  *
  * This functionality completely independent from the `router` modules.
  */
-export function useModal(flag: string) {
-    const router = useRouter()
-    const query = computed(() => router?.currentRoute.value ? router.currentRoute.value.query : {})
+export const useModal = <T> (
+  flag: string,
+  assignment: { on: (value : T | null) => string | null, isOn: (value: LocationQuery[string]) => boolean } =
+    { on: (_) => null, isOn: (value) => value === null }
+) => {
+  const router = useRouter();
+  const query = computed(() =>
+    router?.currentRoute.value ? router.currentRoute.value.query : {}
+  );
 
-    /**
-     * Visibility of this modal
-     *
-     * Use this function to bind a modal to a query parameter in the URL.
-     * Using this helper function will not change the routes.
-     *
-     * For example, if the modal flag is 'upload':
-     *
-     * ```vue
-     * <template>
-     *  <Modal :open="isOpen('upload')">...</Modal>
-     * </template>
-     * ```
-     *
-     * Url: `https://funkwhale.audio/?upload`
-     *
-     * More information on query flags: https://router.vuejs.org/api/type-aliases/LocationQueryValue.html
-     *
-     * Use `asAttribute` instead to bind a modal to an on/off attribute such as `aria-expanded` or `aria-pressed`
-     *
-     * @param flag Identifier for the modal
-     * @returns a `ref`<boolean>
-     */
-    const isOpen = computed({
-        get() {
-            const newValue = flag in query.value && query.value[flag] === null
-            // console.log("GET isOpen", flag, "in", query, newValue)
-            return newValue
-        },
-        set(newValue: boolean) {
-            // console.log("SET isOpen", query, "+", newValue, ", was", isOpen.value)
-            router.push({ query: { ...query.value, [flag]: newValue ? null : undefined }}).catch((err) => {
-                throw new Error(`Problem pushing route query: ${err}.`);
-            });
-            // console.log("DONE SET isOpen", query)
-        }
-    })
+  /**
+   * Visibility of this modal
+   *
+   * Use this function to bind a modal to a query parameter in the URL.
+   * Using this helper function will not change the routes.
+   *
+   * For example, if the modal flag is 'upload':
+   *
+   * ```vue
+   * <template>
+   *  <Modal :open="isOpen('upload')">...</Modal>
+   * </template>
+   * ```
+   *
+   * Url: `https://funkwhale.audio/?upload`
+   *
+   * More information on query flags: https://router.vuejs.org/api/type-aliases/LocationQueryValue.html
+   *
+   * Use `asAttribute` instead to bind a modal to an on/off attribute such as `aria-expanded` or `aria-pressed`
+   *
+   * @param flag Identifier for the modal
+   * @returns a `ref`<boolean>
+   */
+  const isOpen = computed({
+    get() {
+      return flag in query.value && assignment.isOn(query.value[flag]);
+    },
+    set(newValue: boolean) {
+      router
+        .push({
+          query: {
+            ...query.value,
+            [flag]: newValue ? assignment.on(null) : undefined,
+          },
+        })
+        .catch((err) => {
+          throw new Error(`Problem pushing route query: ${err}.`);
+        });
+    },
+  });
 
-    /**
-     *
-     * @param flag Identifier for the modal
-     * @returns a `RouteLocationRaw` object to use in the `to` prop of a RouterLink component
-     */
-    const to: RouteLocationRaw = {
-        query: { ...query.value, [flag]: null }
-    }
+  /**
+   * Current value of the flag in the URL, normalized to a string.
+   *
+   * Note that both `null` and `undefined` are coerced to an empty string, and arrays are joined with a space.
+   *
+   * Use in inputs.
+   */
+  const value = computed({
+    get() {
+      const flagValue = flag in query.value ? query.value[flag] : '';
+      return typeof flagValue === 'string' ? flagValue : flagValue === null ? '' : flagValue.join(' ');
+    },
+    set(newValue: string) {
+      router
+        .push({
+          query: {
+            ...query.value,
+            [flag]: newValue,
+          },
+        })
+        .catch((err) => {
+          throw new Error(`Problem pushing route query: ${err}.`);
+        });
+    },
+  })
 
-    /**
-     * Use this function to bind a modal to an on/off attribute such as `aria-expanded` or `aria-pressed`
-     *
-     * @param flag Identifier for the modal
-     * @returns a `ref`<true | undefined>
-     */
-    const asAttribute = computed(() =>
-        isOpen.value || undefined
-    )
+  /**
+   *
+   * @param flag Identifier for the modal
+   * @returns a `RouteLocationRaw` object to use in the `to` prop of a RouterLink component
+   */
+  const to: RouteLocationRaw = {
+    query: { ...query.value, [flag]: null },
+  };
 
-    /**
-     * Toggle the visibility of this modal
-     *
-     *
-     * @param flag Identifier for the modal
-     */
-    const toggle = () =>
-        isOpen.value = !isOpen.value
+  /**
+   * Use this function to bind a modal to an on/off attribute such as `aria-expanded` or `aria-pressed`
+   *
+   * @param flag Identifier for the modal
+   * @returns a `ref`<true | undefined>
+   */
+  const asAttribute = computed(() => isOpen.value || undefined);
 
-    return { isOpen, to, asAttribute, toggle }
+  /**
+   * Toggle the visibility of this modal
+   *
+   *
+   * @param flag Identifier for the modal
+   */
+  const toggle = () => (isOpen.value = !isOpen.value);
+
+  return { value, isOpen, to, asAttribute, toggle };
 }
diff --git a/front/src/ui/modals/Languages.vue b/front/src/ui/modals/Language.vue
similarity index 95%
rename from front/src/ui/modals/Languages.vue
rename to front/src/ui/modals/Language.vue
index 9ff5e1eb3..5ce2b030e 100644
--- a/front/src/ui/modals/Languages.vue
+++ b/front/src/ui/modals/Language.vue
@@ -10,7 +10,7 @@ import Layout from '~/components/ui/Layout.vue'
 
 const { t, locale } = useI18n()
 
-const isOpen = useModal('languages').isOpen
+const isOpen = useModal('language').isOpen
 </script>
 
 <template>
diff --git a/front/src/ui/modals/Search.vue b/front/src/ui/modals/Search.vue
new file mode 100644
index 000000000..716aa5ae8
--- /dev/null
+++ b/front/src/ui/modals/Search.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { type components } from '~/generated/types.ts'
+import axios from 'axios'
+import { ref, watch } from 'vue';
+import { refDebounced } from '@vueuse/core'
+
+import useErrorHandler from '~/composables/useErrorHandler'
+import { useI18n } from 'vue-i18n'
+import { useModal } from '~/ui/composables/useModal.ts'
+import onKeyboardShortcut from '~/composables/onKeyboardShortcut';
+
+import Modal from '~/components/ui/Modal.vue'
+import Button from '~/components/ui/Button.vue'
+import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Input from '~/components/ui/Input.vue'
+
+const { t } = useI18n()
+
+const { isOpen, toggle, value:query } = useModal('search', { on: () => '', isOn: (value) => value !== undefined && value !== '' });
+onKeyboardShortcut('u', () => toggle())
+
+const startRadio = () => {
+  // TODO: Start the radio
+  console.log('start radio')
+}
+
+const queryDebounced = refDebounced(query, 500)
+
+const isLoading = ref(false)
+const results = ref<null | components['schemas']['SearchResult']>(null)
+
+const search = async () => {
+  if (queryDebounced.value.length < 1) {
+    isOpen.value = false
+    return
+  }
+
+  isLoading.value = true
+
+  const params = {
+    query: queryDebounced.value
+  }
+
+  try {
+    const response = await axios.get<components['schemas']['SearchResult']>('search/', { params })
+    results.value = response.data
+  } catch (error) {
+    useErrorHandler(error as Error)
+    results.value = null
+  }
+
+  isLoading.value = false
+}
+watch(queryDebounced, search, { immediate: true })
+</script>
+
+<template>
+  <Modal overPopover
+    title=""
+    v-model="isOpen"
+  >
+    <template #topleft>
+      <Input ghost autofocus
+        icon="bi-search"
+        v-model="query"
+      />
+    </template>
+    <Layout flex>
+      <Spacer grow />
+      <Button @click="startRadio()">{{ t('components.audio.podcast.Modal.button.startRadio') }}</Button>
+    </Layout>
+  </Modal>
+</template>
+
+<style module>
+  .description {
+    font-size: 0.875em;
+  }
+</style>
diff --git a/front/src/ui/modals/Upload.vue b/front/src/ui/modals/Upload.vue
index 058c264e2..08cce88fe 100644
--- a/front/src/ui/modals/Upload.vue
+++ b/front/src/ui/modals/Upload.vue
@@ -4,6 +4,8 @@ import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 import onKeyboardShortcut from '~/composables/onKeyboardShortcut';
 
+import { useModal } from '~/ui/composables/useModal.ts'
+
 import Modal from '~/components/ui/Modal.vue'
 import Button from '~/components/ui/Button.vue'
 import Input from '~/components/ui/Input.vue'
@@ -23,21 +25,9 @@ import LibraryWidget from '~/components/federation/LibraryWidget.vue'
 const { t } = useI18n()
 const store = useStore()
 
-const modalName = 'upload'
+onKeyboardShortcut('u', () => useModal('upload').toggle())
 
-const isOpen = computed({
-  get() {
-    return store.state.ui.modalsOpen.has(modalName);
-  },
-  set(value) {
-    if (value===false) {
-      state.value = init()
-    }
-    store.commit('ui/setModal', [modalName, value])
-  }
-})
-
-onKeyboardShortcut('u', () => store.commit('ui/toggleModal', modalName))
+const isOpen = useModal('upload').isOpen
 
 type UploadDestination = 'channel' | 'library' | 'podcast'