From 3ec823c856a477edb36351afc3266aa86149c1f1 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon.vieille@trinaps.com>
Date: Sun, 5 Nov 2023 16:04:33 +0100
Subject: [PATCH 1/3] add search component

---
 css/sideMenu.css               | 15 +++++++++++++++
 src/AppSearch.vue              | 32 ++++++++++++++++++++++++++++++++
 src/SideMenu.vue               | 31 +++++++++++++++++++++++++++----
 src/SideMenuBig.vue            | 31 ++++++++++++++++++++++++++++---
 src/SideMenuWithCategories.vue | 30 ++++++++++++++++++++++++++++--
 5 files changed, 130 insertions(+), 9 deletions(-)
 create mode 100644 src/AppSearch.vue

diff --git a/css/sideMenu.css b/css/sideMenu.css
index 6b2c5e2..195bc53 100644
--- a/css/sideMenu.css
+++ b/css/sideMenu.css
@@ -318,6 +318,21 @@
   visibility: visible;
 }
 
+.side-menu-search {
+  float: right;
+}
+
+.side-menu-search input {
+  background: none;
+  border: 0;
+  border-radius: 0;
+  color: var(--side-menu-text-color);
+}
+
+.side-menu-search input::placeholder {
+  color: var(--side-menu-text-color);
+}
+
 @media screen and (max-width: 1024px) {
   #side-menu.side-menu-big {
     max-width: 290px;
diff --git a/src/AppSearch.vue b/src/AppSearch.vue
new file mode 100644
index 0000000..b2679a2
--- /dev/null
+++ b/src/AppSearch.vue
@@ -0,0 +1,32 @@
+<!--
+@license GNU AGPL version 3 or any later version
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+<template>
+  <div class="side-menu-search">
+    <input type="text" :value="value" :placeholder="t('side_menu', 'Search')" @input="$emit('input', $event.target.value)">
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppSearch',
+  props: {
+    value: {
+      required: true
+    },
+  },
+}
+</script>
diff --git a/src/SideMenu.vue b/src/SideMenu.vue
index de7065d..95731b3 100644
--- a/src/SideMenu.vue
+++ b/src/SideMenu.vue
@@ -22,15 +22,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         v-bind:href="settings.href"
         v-bind:label="settings.name"
         v-bind:avatar="settings.avatar" />
-
+      <AppSearch v-model:search="search" />
       <OpenerButton />
-
       <Logo
         v-if="!avatar && !alwaysDisplayed && logo" v-bind:classes="{'side-menu-logo': true, 'avatardiv': false}"
         v-bind:image="logo"
         v-bind:link="logoLink"
       />
-
       <Logo
         v-if="avatar" v-bind:classes="{'side-menu-logo': true, 'avatardiv': true}"
         v-bind:image="avatar"
@@ -41,7 +39,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     <ul class="side-menu-apps-list" :class="{'side-menu-apps-list--with-settings': !!settings}">
       <SideMenuApp
         v-for="(app, key) in apps"
-        v-if="!hiddenApps.includes(app.id)"
+        v-if="!hiddenApps.includes(app.id) && searchMatch(app.name)"
         v-bind:classes="{'side-menu-app': true, 'active': app.active}"
         v-bind:key="key"
         v-bind:icon="app.icon"
@@ -58,6 +56,7 @@ import axios from 'axios'
 import OpenerButton from './OpenerButton'
 import SettingsButton from './SettingsButton'
 import SideMenuApp from './SideMenuApp'
+import AppSearch from './AppSearch'
 import Logo from './Logo'
 import { loadState } from '@nextcloud/initial-state'
 
@@ -68,6 +67,7 @@ export default {
     OpenerButton,
     SideMenuApp,
     Logo,
+    AppSearch,
   },
   data() {
     return {
@@ -81,6 +81,7 @@ export default {
       settings: null,
       openerHover: false,
       alwaysDisplayed: false,
+      search: '',
     }
   },
   methods: {
@@ -125,6 +126,28 @@ export default {
 
     retrieveConfig() {
     },
+
+    hasSearchMatch(apps) {
+      if (this.search.trim() === '') {
+        return true
+      }
+
+      for (let key in apps) {
+        if (this.searchMatch(apps[key].name)) {
+          return true
+        }
+      }
+
+      return false
+    },
+
+    searchMatch(name) {
+      if (this.search.trim() === '') {
+        return true
+      }
+
+      return name.toLowerCase().includes(this.search.toLowerCase())
+    },
   },
   mounted() {
     axios
diff --git a/src/SideMenuBig.vue b/src/SideMenuBig.vue
index a51ba61..f9c0783 100644
--- a/src/SideMenuBig.vue
+++ b/src/SideMenuBig.vue
@@ -18,14 +18,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <div id="side-menu" class="side-menu-big">
     <div class="side-menu-header">
       <CloserButton />
-
       <SettingsButton
         v-if="settings"
         v-bind:href="settings.href"
         v-bind:label="settings.name"
         v-bind:avatar="settings.avatar"
       />
-
+      <AppSearch v-model:search="search" />
       <OpenerButton />
     </div>
 
@@ -33,12 +32,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       <div class="side-menu-categories">
         <Loader v-if="!items.length" />
 
-        <div class="side-menu-category" v-for="(category, key) in items" v-bind:key="key">
+        <div class="side-menu-category" v-for="(category, key) in items" v-if="hasSearchMatch(category.apps)" v-bind:key="key">
           <h2 class="side-menu-category-title" v-if="category.name != ''" v-text="category.name"></h2>
 
           <ul class="side-menu-apps-list">
             <SideMenuBigApp
               v-for="(app, appId) in category.apps"
+              v-if="searchMatch(app.name)"
               v-bind:key="appId"
               v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
               v-bind:icon="app.icon"
@@ -59,6 +59,7 @@ import OpenerButton from './OpenerButton'
 import CloserButton from './CloserButton'
 import SettingsButton from './SettingsButton'
 import Loader from './Loader'
+import AppSearch from './AppSearch'
 import SideMenuBigApp from './SideMenuBigApp'
 import { loadState } from '@nextcloud/initial-state'
 
@@ -70,6 +71,7 @@ export default {
     CloserButton,
     Loader,
     SideMenuBigApp,
+    AppSearch,
   },
   data() {
     return {
@@ -78,6 +80,7 @@ export default {
       targetBlank: false,
       targetBlankApps: [],
       settings: null,
+      search: '',
     }
   },
   methods: {
@@ -120,6 +123,28 @@ export default {
           this.settings = config['settings']
         })
     },
+
+    hasSearchMatch(apps) {
+      if (this.search.trim() === '') {
+        return true
+      }
+
+      for (let key in apps) {
+        if (this.searchMatch(apps[key].name)) {
+          return true
+        }
+      }
+
+      return false
+    },
+
+    searchMatch(name) {
+      if (this.search.trim() === '') {
+        return true
+      }
+
+      return name.toLowerCase().includes(this.search.toLowerCase())
+    },
   },
   mounted() {
     this.retrieveConfig()
diff --git a/src/SideMenuWithCategories.vue b/src/SideMenuWithCategories.vue
index 556f45b..07530a8 100644
--- a/src/SideMenuWithCategories.vue
+++ b/src/SideMenuWithCategories.vue
@@ -23,7 +23,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         v-bind:label="settings.name"
         v-bind:avatar="settings.avatar"
       />
-
+      <AppSearch v-model:search="search" />
       <OpenerButton />
     </div>
 
@@ -31,12 +31,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       <div class="side-menu-categories">
         <Loader v-if="!items.length" />
 
-        <div class="side-menu-category" v-for="(category, key) in items" v-bind:key="key">
+        <div class="side-menu-category" v-for="(category, key) in items" v-if="hasSearchMatch(category.apps)" v-bind:key="key">
           <h2 class="side-menu-category-title" v-if="category.name != ''" v-text="category.name"></h2>
 
           <ul class="side-menu-apps-list">
             <SideMenuBigApp
               v-for="(app, appId) in category.apps"
+              v-if="searchMatch(app.name)"
               v-bind:key="appId"
               v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
               v-bind:icon="app.icon"
@@ -56,6 +57,7 @@ import axios from 'axios'
 import OpenerButton from './OpenerButton'
 import SettingsButton from './SettingsButton'
 import Loader from './Loader'
+import AppSearch from './AppSearch'
 import SideMenuBigApp from './SideMenuBigApp'
 import { loadState } from '@nextcloud/initial-state'
 
@@ -66,6 +68,7 @@ export default {
     OpenerButton,
     Loader,
     SideMenuBigApp,
+    AppSearch,
   },
   data() {
     return {
@@ -74,6 +77,7 @@ export default {
       targetBlank: false,
       targetBlankApps: [],
       settings: null,
+      search: '',
     }
   },
   methods: {
@@ -116,6 +120,28 @@ export default {
           this.settings = config['settings']
         })
     },
+
+    hasSearchMatch(apps) {
+      if (this.search.trim() === '') {
+        return true
+      }
+
+      for (let key in apps) {
+        if (this.searchMatch(apps[key].name)) {
+          return true
+        }
+      }
+
+      return false
+    },
+
+    searchMatch(name) {
+      if (this.search.trim() === '') {
+        return true
+      }
+
+      return name.toLowerCase().includes(this.search.toLowerCase())
+    },
   },
   mounted() {
     this.retrieveConfig()

From 5d91b44c200858b82b66dc27622628331a920440 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon.vieille@trinaps.com>
Date: Sun, 5 Nov 2023 16:04:44 +0100
Subject: [PATCH 2/3] add translations

---
 src/l10n/fixtures/cs.yaml       | 1 +
 src/l10n/fixtures/de.yaml       | 1 +
 src/l10n/fixtures/es.yaml       | 1 +
 src/l10n/fixtures/fr.yaml       | 1 +
 src/l10n/fixtures/nl.yaml       | 1 +
 src/l10n/fixtures/ru.yaml       | 1 +
 src/l10n/fixtures/tpl/base.yaml | 1 +
 src/l10n/fixtures/zh_CN.yaml    | 1 +
 8 files changed, 8 insertions(+)

diff --git a/src/l10n/fixtures/cs.yaml b/src/l10n/fixtures/cs.yaml
index e92d3f3..9969a4b 100644
--- a/src/l10n/fixtures/cs.yaml
+++ b/src/l10n/fixtures/cs.yaml
@@ -92,3 +92,4 @@
 "These applications must be selected in the previous option.": "Tyto aplikace je třeba vybrat v předchozí volbě."
 "Hide labels on mouse over": "Skrýt popisky při najetím ukazatele myši"
 "Except the hovered app": "Except the hovered app"
+"Search": "Search"
diff --git a/src/l10n/fixtures/de.yaml b/src/l10n/fixtures/de.yaml
index a58dcd9..ee85579 100644
--- a/src/l10n/fixtures/de.yaml
+++ b/src/l10n/fixtures/de.yaml
@@ -92,3 +92,4 @@
 "These applications must be selected in the previous option.": "These applications must be selected in the previous option."
 "Hide labels on mouse over": "Hide labels on mouse over"
 "Except the hovered app": "Except the hovered app"
+"Search": "Search"
diff --git a/src/l10n/fixtures/es.yaml b/src/l10n/fixtures/es.yaml
index 46df437..3df3d8c 100644
--- a/src/l10n/fixtures/es.yaml
+++ b/src/l10n/fixtures/es.yaml
@@ -92,3 +92,4 @@
 "These applications must be selected in the previous option.": "Estas aplicaciones deben ser seleccionadas en las opciones anteriores."
 "Hide labels on mouse over": "Ocultar las etiquetas al pasar el ratón"
 "Except the hovered app": "Except the hovered app"
+"Search": "Search"
diff --git a/src/l10n/fixtures/fr.yaml b/src/l10n/fixtures/fr.yaml
index cde508a..0cf835b 100644
--- a/src/l10n/fixtures/fr.yaml
+++ b/src/l10n/fixtures/fr.yaml
@@ -92,3 +92,4 @@
 "These applications must be selected in the previous option.": "Ces applications doivent également être sélectionnées dans l'option précédente."
 "Hide labels on mouse over": "Masquer le libellé des applications au passage de la souris"
 "Except the hovered app": "À l'exception de l'application survolée"
+"Search": "Rechercher"
diff --git a/src/l10n/fixtures/nl.yaml b/src/l10n/fixtures/nl.yaml
index 9e60180..f39d188 100644
--- a/src/l10n/fixtures/nl.yaml
+++ b/src/l10n/fixtures/nl.yaml
@@ -92,3 +92,4 @@
 "These applications must be selected in the previous option.": "Deze toepassingen moeten bij de vorige optie zijn geselecteerd."
 "Hide labels on mouse over": "Hide labels on mouse over"
 "Except the hovered app": "Except the hovered app"
+"Search": "Search"
diff --git a/src/l10n/fixtures/ru.yaml b/src/l10n/fixtures/ru.yaml
index 2673a4e..bb17dad 100644
--- a/src/l10n/fixtures/ru.yaml
+++ b/src/l10n/fixtures/ru.yaml
@@ -92,3 +92,4 @@
 "These applications must be selected in the previous option.": "These applications must be selected in the previous option."
 "Hide labels on mouse over": "Скрыть название при наведении мыши"
 "Except the hovered app": "Except the hovered app"
+"Search": "Search"
diff --git a/src/l10n/fixtures/tpl/base.yaml b/src/l10n/fixtures/tpl/base.yaml
index 01dbccf..7756515 100644
--- a/src/l10n/fixtures/tpl/base.yaml
+++ b/src/l10n/fixtures/tpl/base.yaml
@@ -94,3 +94,4 @@
 "These applications must be selected in the previous option.": ""
 "Hide labels on mouse over": ""
 "Except the hovered app": ""
+"Search": ""
diff --git a/src/l10n/fixtures/zh_CN.yaml b/src/l10n/fixtures/zh_CN.yaml
index 9a73922..8414cb6 100644
--- a/src/l10n/fixtures/zh_CN.yaml
+++ b/src/l10n/fixtures/zh_CN.yaml
@@ -92,3 +92,4 @@
 "These applications must be selected in the previous option.": "These applications must be selected in the previous option."
 "Hide labels on mouse over": "Hide labels on mouse over"
 "Except the hovered app": "Except the hovered app"
+"Search": "Search"

From b1ae62ba2ad40c06ec0595500addb7a3ec652411 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon.vieille@trinaps.com>
Date: Sun, 5 Nov 2023 18:27:35 +0100
Subject: [PATCH 3/3] fix view of side menu headers with search

---
 css/sideMenu.css             | 8 ++++++++
 templates/css/stylesheet.php | 8 +++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/css/sideMenu.css b/css/sideMenu.css
index 195bc53..9bf15c8 100644
--- a/css/sideMenu.css
+++ b/css/sideMenu.css
@@ -333,12 +333,20 @@
   color: var(--side-menu-text-color);
 }
 
+.side-menu-always-displayed .side-menu-search {
+  display: none;
+}
+
 @media screen and (max-width: 1024px) {
   #side-menu.side-menu-big {
     max-width: 290px;
     height: 100vh;
   }
 
+  #side-menu.hide-opener.side-menu-big .side-menu-search {
+    float: none;
+  }
+
   .side-menu-categories {
     display: block;
     padding: 0;
diff --git a/templates/css/stylesheet.php b/templates/css/stylesheet.php
index 6582131..c7eb453 100644
--- a/templates/css/stylesheet.php
+++ b/templates/css/stylesheet.php
@@ -42,10 +42,16 @@
     top: 49px;
   }
 
-  #side-menu.hide-opener .side-menu-header {
+  #side-menu.hide-opener .side-menu-header .side-menu-opener.side-menu-closer
+  {
     visibility: hidden;
   }
 
+  #side-menu.hide-opener.side-menu-with-categories .side-menu-search
+  {
+    float: none;
+  }
+
   <?php if ($_['size-text'] === 'hidden'): ?>
     #side-menu, .side-menu-apps-list {
       <?php if ($_['size-icon'] === 'big'): ?>