From 0b4dd8c78ff945949b4bfd89a663317d6042555d Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sat, 20 Jan 2024 14:38:38 +0100
Subject: [PATCH] home: add search engine bar

---
 assets/icons/magnify.svg |  1 +
 composables/states.ts    |  2 ++
 locales/en.json          |  2 ++
 pages/index.vue          | 31 ++++++++++++++++++++++++++++++-
 4 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 assets/icons/magnify.svg

diff --git a/assets/icons/magnify.svg b/assets/icons/magnify.svg
new file mode 100644
index 0000000..3cb7089
--- /dev/null
+++ b/assets/icons/magnify.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5l-1.5 1.5l-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16A6.5 6.5 0 0 1 3 9.5A6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14S14 12 14 9.5S12 5 9.5 5Z"/></svg>
\ No newline at end of file
diff --git a/composables/states.ts b/composables/states.ts
index 3207e7d..ff2f32b 100644
--- a/composables/states.ts
+++ b/composables/states.ts
@@ -84,6 +84,8 @@ export interface Settings {
   portal_logo?: string
   portal_theme: string
   portal_title?: string
+  search_engine?: string
+  search_engine_name?: string
   show_other_domains_apps: 0 | 1
   portal_user_intro: string
   portal_public_intro: string
diff --git a/locales/en.json b/locales/en.json
index e304870..69306e2 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -45,6 +45,8 @@
     "primary_mail_adress": "Primary mail adress",
     "remove": "Remove",
     "save": "Save",
+    "search": "Search",
+    "search_engine_placeholder": "Search on {engine}",
     "skip_link": {
         "main_content": "Skip to main content",
         "footer": "Skip to footer"
diff --git a/pages/index.vue b/pages/index.vue
index 24820b4..280103d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,7 +3,7 @@ definePageMeta({
   public: true,
 })
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const isLoggedIn = await useIsLoggedIn()
 const settings = await useSettings()
 const appsData = await useApps()
@@ -28,12 +28,41 @@ const apps = Object.entries(appsData.value).map(([id, app]) => {
     description: app.description[locale.value] || app.description.en
   }
 })
+
+const search = ref('')
+
+async function onSearchSubmit() {
+  await navigateTo(
+    settings.value.search_engine + search.value,
+    {
+      open: {
+        target: '_blank',
+      }
+    }
+  )
+}
 </script>
 
 <template>
   <div>
     <CustomText v-if="intro" :content="intro" />
 
+    <form class="flex my-16" @submit.prevent>
+      <div class="join w-full max-w-xl mx-auto">
+        <input
+          v-model="search"
+          type="search"
+          class="input input-bordered join-item w-full"
+          name="search"
+          :placeholder="t('search_engine_placeholder', { engine: settings.search_engine_name })"
+        >
+        <button type="submit" class="btn btn-primary join-item px-2" @click="onSearchSubmit">
+          <YIcon name="magnify" aria-hidden="true" class="m-0" />
+          <span class="sr-only">{{ t('search') }}</span>
+        </button>
+      </div>
+    </form>
+
     <section id="apps" class="my-16">
       <PageTitle :text="t('app_list')" tag="h2" sr-only class="mb-4" />