From 6b7e1c479a832056ad5596ba2bee6c7e220174ae Mon Sep 17 00:00:00 2001
From: jimtng <2554958+jimtng@users.noreply.github.com>
Date: Fri, 23 Feb 2024 10:14:42 +1000
Subject: [PATCH] Add-on Store: Add sub menu items & various improvements
 (#2381)

Resolves #2047.

- Installed addons are grouped by category in the main Add-on Store section.
- Search in the main "Add-on Store" menu will search all types of addons.
- Search in the corresponding section will only search for add-ons for that category.

The subsections are implemented as routable tabs, so switching around the different sections is fast.

---------

Also-by: Florian Hotze <florianh_dev@icloud.com>
Signed-off-by: Jimmy Tanagra <jcode@tanagra.id.au>
---
 .../web/src/assets/addon-store.js             |  39 ++-
 .../definitions/help/help-qstart-defs.json    |   2 +-
 .../web/src/components/addons/addon-card.vue  |   2 +-
 .../src/components/addons/addon-list-item.vue |   2 +-
 .../org.openhab.ui/web/src/components/app.vue |  36 ++-
 bundles/org.openhab.ui/web/src/js/routes.js   |  42 +--
 .../web/src/pages/addons/addons-store.vue     | 251 ++++++++++--------
 .../settings/things/add/choose-binding.vue    |   4 +-
 8 files changed, 231 insertions(+), 147 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/assets/addon-store.js b/bundles/org.openhab.ui/web/src/assets/addon-store.js
index e8eb669a29..975071043c 100644
--- a/bundles/org.openhab.ui/web/src/assets/addon-store.js
+++ b/bundles/org.openhab.ui/web/src/assets/addon-store.js
@@ -1,13 +1,46 @@
 export const AddonIcons = {
-  automation: 'wand_stars',
   binding: 'circle_grid_hex_fill',
-  persistence: 'download_circle',
+  automation: 'wand_stars',
   transformation: 'function',
-  misc: 'rectangle_3_offgrid',
+  persistence: 'download_circle',
   ui: 'play_rectangle',
+  misc: 'rectangle_3_offgrid',
   voice: 'chat_bubble_2_fill'
 }
 
+export const AddonTitles = {
+  binding: 'Bindings',
+  automation: 'Automation',
+  transformation: 'Transformations',
+  persistence: 'Persistence',
+  ui: 'User Interfaces',
+  misc: 'System Integrations',
+  voice: 'Voice & Speech'
+}
+
+export const AddonSuggestionLabels = {
+  binding: {
+    title: 'Suggested Bindings',
+    subtitle: 'Suggested bindings, identified from network scan'
+  },
+  misc: {
+    title: 'Suggested System Integration Add-ons',
+    subtitle: 'Suggested system integrations, identified from network scan'
+  },
+  persistence: {
+    title: 'Suggested Persistence Services',
+    subtitle: 'Suggested backend connectors to store historical data, identified from network scan'
+  },
+  transformation: {
+    title: 'Suggested Transformation Add-ons',
+    subtitle: 'Suggested transformation add-ons to translate raw values into processed or human-readable representations, identified from network scan'
+  },
+  voice: {
+    title: 'Suggested Voice &amp; Speech Add-ons',
+    subtitle: 'Convert between text and speech, interpret human language queries'
+  }
+}
+
 export const ContentTypes = {
   'application/java-archive': 'Java Archive',
   'application/vnd.openhab.bundle': 'OSGi Bundle',
diff --git a/bundles/org.openhab.ui/web/src/assets/definitions/help/help-qstart-defs.json b/bundles/org.openhab.ui/web/src/assets/definitions/help/help-qstart-defs.json
index 20a0d1e134..06c8eb7413 100644
--- a/bundles/org.openhab.ui/web/src/assets/definitions/help/help-qstart-defs.json
+++ b/bundles/org.openhab.ui/web/src/assets/definitions/help/help-qstart-defs.json
@@ -4,7 +4,7 @@
     "title": "1. Install a Binding (Add-on)",
     "steps": [
       {
-        "link": "/addons/",
+        "link": "/addons/binding/",
         "title": "Add-on Store",
         "text": "Left panel > Settings > Add-on Store or click here <i class=\"f7-icons size-22 add-button-icon\">arrow_right</i>"
       },
diff --git a/bundles/org.openhab.ui/web/src/components/addons/addon-card.vue b/bundles/org.openhab.ui/web/src/components/addons/addon-card.vue
index 8f0023017e..68439b1851 100644
--- a/bundles/org.openhab.ui/web/src/components/addons/addon-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/addons/addon-card.vue
@@ -1,5 +1,5 @@
 <template>
-  <f7-link v-if="addon" class="addon-card padding-right-half" :href="'/addons/' + addon.uid">
+  <f7-link v-if="addon" class="addon-card padding-right-half" :href="`/addons/${addon.type}/${addon.uid}`">
     <div class="addon-card-inner card">
       <div class="addon-card-headline">
         <div>{{ headline || autoHeadline || "&nbsp;" }}</div>
diff --git a/bundles/org.openhab.ui/web/src/components/addons/addon-list-item.vue b/bundles/org.openhab.ui/web/src/components/addons/addon-list-item.vue
index e99c37231d..546caddca4 100644
--- a/bundles/org.openhab.ui/web/src/components/addons/addon-list-item.vue
+++ b/bundles/org.openhab.ui/web/src/components/addons/addon-list-item.vue
@@ -3,7 +3,7 @@
     v-if="addon"
     class="addon-list-item padding-right-half"
     :title="addon.label"
-    :link="'/addons/' + addon.uid">
+    :link="`/addons/${addon.type}/${addon.uid}`">
     <div v-if="addon.verifiedAuthor" slot="subtitle">
       {{ addon.author }}
       <f7-icon v-if="addon.verifiedAuthor" size="15" :color="$f7.data.themeOptions.dark === 'dark' ? 'white' : 'blue'" f7="checkmark_seal_fill" style="margin-top: -3px" />
diff --git a/bundles/org.openhab.ui/web/src/components/app.vue b/bundles/org.openhab.ui/web/src/components/app.vue
index f99a9ecb26..af4fd28588 100644
--- a/bundles/org.openhab.ui/web/src/components/app.vue
+++ b/bundles/org.openhab.ui/web/src/components/app.vue
@@ -75,10 +75,19 @@
           </li>
 
           <!-- Add-on Store -->
-          <f7-list-item link="/addons/" :title="$t('sidebar.addOnStore')" panel-close :animate="false"
-                        :class="{ currentsection: currentUrl.indexOf('/addons/') === 0 }">
+          <f7-list-item link="/addons/" :title="$t('sidebar.addOnStore')" view=".view-main" panel-close :animate="false"
+                        :class="{ currentsection: currentUrl === '/addons/' }">
             <f7-icon slot="media" ios="f7:bag_fill" aurora="f7:bag_fill" md="material:shopping_bag" color="gray" />
           </f7-list-item>
+          <li v-if="showAddonsSubmenu && $store.getters.apiEndpoint('addons')">
+            <ul class="menu-sublinks">
+              <f7-list-item v-for="section in Object.keys(AddonTitles)" :key="section" :link="`/addons/${section}/`"
+                            :title="AddonTitles[section]" view=".view-main" panel-close :animate="false" no-chevron
+                            :class="{ currentsection: currentUrl.indexOf(`/addons/${section}`) === 0 }">
+                <f7-icon slot="media" :f7="AddonIcons[section]" color="gray" />
+              </f7-list-item>
+            </ul>
+          </li>
 
           <!-- Developer Tools -->
           <f7-list-item link="/developer/" :title="$t('sidebar.developerTools')" panel-close :animate="false"
@@ -260,6 +269,8 @@ import sseEvents from './sse-events-mixin'
 import dayjs from 'dayjs'
 import dayjsLocales from 'dayjs/locale.json'
 
+import { AddonIcons, AddonTitles } from '@/assets/addon-store'
+
 export default {
   mixins: [auth, i18n, connectionHealth, sseEvents],
   components: {
@@ -368,6 +379,7 @@ export default {
       },
 
       showSettingsSubmenu: false,
+      showAddonsSubmenu: false,
       showDeveloperSubmenu: false,
       showDeveloperDock: false,
       activeDock: 'tools',
@@ -614,9 +626,19 @@ export default {
         ev.stopPropagation()
         ev.preventDefault()
       }
+    },
+    updateUrl (newUrl) {
+      this.showSettingsSubmenu = newUrl.indexOf('/settings/') === 0
+      this.showAddonsSubmenu = newUrl.indexOf('/addons/') === 0
+      this.showDeveloperSubmenu = newUrl.indexOf('/developer/') === 0
+      this.currentUrl = newUrl
+      this.$store.commit('setPagePath', this.currentUrl)
     }
   },
   created () {
+    this.AddonIcons = AddonIcons
+    this.AddonTitles = AddonTitles
+
     // special treatment for this option because it's needed to configure the app initialization
     this.themeOptions.pageTransitionAnimation = localStorage.getItem('openhab.ui:theme.pagetransition') || 'default'
     // tell the app to go fullscreen (if the OHApp is supported)
@@ -679,13 +701,15 @@ export default {
 
       this.$f7.on('pageBeforeIn', (page) => {
         if (page.route && page.route.url) {
-          this.showSettingsSubmenu = page.route.url.indexOf('/settings/') === 0
-          this.showDeveloperSubmenu = page.route.url.indexOf('/developer/') === 0
-          this.currentUrl = page.route.url
-          this.$store.commit('setPagePath', this.currentUrl)
+          this.updateUrl(page.route.url)
         }
       })
 
+      // needed by updateCurrentUrl() inside addon-store onTabShow()
+      this.$f7.on('routeUrlUpdate', (newRoute, router) => {
+        this.updateUrl(newRoute.url)
+      })
+
       this.$f7.on('sidebarRefresh', () => {
         this.loadData()
       })
diff --git a/bundles/org.openhab.ui/web/src/js/routes.js b/bundles/org.openhab.ui/web/src/js/routes.js
index dc112d9c83..28d9e350b1 100644
--- a/bundles/org.openhab.ui/web/src/js/routes.js
+++ b/bundles/org.openhab.ui/web/src/js/routes.js
@@ -1,10 +1,10 @@
-import store from '@/js/store'
 import { authorize, isLoggedIn, enforceAdminForRoute } from '@/js/openhab/auth'
 
 import HomePage from '../pages/home.vue'
 import NotFoundPage from '../pages/not-found.vue'
 import PageViewPage from '../pages/page/page-view.vue'
 import AnalyzerPopup from '../pages/analyzer/analyzer-popup.vue'
+import { AddonTitles } from '@/assets/addon-store'
 
 const AboutPage = () => import(/* webpackChunkName: "about-page" */ '../pages/about.vue')
 const UserProfilePage = () => import(/* webpackChunkName: "profile-page" */ '../pages/profile.vue')
@@ -357,8 +357,6 @@ export default [
       },
       {
         path: 'addons',
-        beforeEnter: [enforceAdminForRoute],
-        async: loadAsync(AddonsStorePage),
         routes: [
           {
             path: ':addonId',
@@ -380,34 +378,20 @@ export default [
     path: '/addons/',
     beforeEnter: [enforceAdminForRoute],
     async: loadAsync(AddonsStorePage),
-    routes: [
-      {
-        path: 'bindings/',
-        beforeEnter: [enforceAdminForRoute],
-        async: loadAsync(AddonsStorePage, { initialTab: 'bindings' })
-      },
+    tabs: [
       {
-        path: 'automation/',
-        beforeEnter: [enforceAdminForRoute],
-        async: loadAsync(AddonsStorePage, { initialTab: 'automation' })
-      },
-      {
-        path: 'ui/',
-        beforeEnter: [enforceAdminForRoute],
-        async: loadAsync(AddonsStorePage, { initialTab: 'ui' })
-      },
-      {
-        path: 'other/',
-        beforeEnter: [enforceAdminForRoute],
-        async: loadAsync(AddonsStorePage, { initialTab: 'other' })
-      },
-      {
-        path: 'search/',
-        beforeEnter: [enforceAdminForRoute],
-        async: loadAsync(AddonsStorePage, { initialTab: 'search' })
-      },
+        path: '/',
+        id: 'main'
+      }
+    ].concat(Object.keys(AddonTitles).map((section) => {
+      return {
+        path: section,
+        id: section
+      }
+    })),
+    routes: [
       {
-        path: ':addonId',
+        path: ':section/:addonId',
         beforeEnter: [enforceAdminForRoute],
         async: loadAsync(AddonDetailsPage)
       }
diff --git a/bundles/org.openhab.ui/web/src/pages/addons/addons-store.vue b/bundles/org.openhab.ui/web/src/pages/addons/addons-store.vue
index 76e6715e77..5da01f5572 100644
--- a/bundles/org.openhab.ui/web/src/pages/addons/addons-store.vue
+++ b/bundles/org.openhab.ui/web/src/pages/addons/addons-store.vue
@@ -1,62 +1,85 @@
 <template>
   <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut" ref="addonstore" class="page-addon-store">
-    <f7-navbar large :large-transparent="true" :back-link="initialTab ? 'Settings' : 'Back'" class="store-nav">
+    <f7-navbar large :large-transparent="true" back-link="Back" class="store-nav">
       <f7-nav-title-large class="store-title-large">
-        <span v-if="currentTab === 'bindings'">Bindings</span>
-        <span v-if="currentTab === 'automation'">Automation</span>
-        <span v-if="currentTab === 'ui'">User Interfaces</span>
-        <span v-if="currentTab === 'other'">Other Add-ons</span>
-        <span v-if="currentTab === 'search'">Search</span>
+        <span>{{ TabNames[currentTab] + (currentTab !== 'main') ? `${TabNames.main} ` : '' }}</span>
       </f7-nav-title-large>
       <f7-nav-title>
-        <span v-if="currentTab === 'bindings'">Bindings</span>
-        <span v-if="currentTab === 'automation'">Automation</span>
-        <span v-if="currentTab === 'ui'">User Interfaces</span>
-        <span v-if="currentTab === 'other'">Other Add-ons</span>
-        <span v-if="currentTab === 'search'">Search</span>
+        <span>{{ TabNames[currentTab] + (currentTab !== 'main') ? `${TabNames.main} ` : '' }}</span>
       </f7-nav-title>
       <f7-nav-right>
         <developer-dock-icon />
-        <f7-link
-          v-show="currentTab === 'search'"
-          class="searchbar-enable"
-          data-searchbar=".searchbar-store"
-          icon-ios="f7:search_strong"
-          icon-aurora="f7:search_strong"
-          icon-md="material:search" />
       </f7-nav-right>
+    </f7-navbar>
+    <f7-toolbar v-if="$f7.width < 1024" tabbar labels bottom>
+      <f7-link tab-link :tab-link-active="$store.state.pagePath === '/addons/'" href="/addons/" icon-ios="f7:bag_fill" icon-aurora="f7:bag_fill" icon-md="f7:bag_fill" />
+      <f7-link v-for="section in Object.keys(AddonTitles)" :key="section" tab-link :tab-link-active="$store.state.pagePath === `/addons/${section}/`" :href="`/addons/${section}`" :icon-ios="`f7:${AddonIcons[section]}`" :icon-aurora="`f7:${AddonIcons[section]}`" :icon-md="`f7:${AddonIcons[section]}`" />
+    </f7-toolbar>
+
+    <f7-block class="no-padding" style="margin-top: 0">
       <f7-searchbar
         ref="storeSearchbar"
         class="searchbar-store"
-        placeholder="Search add-ons"
-        expandable
         custom-search
         search-in=".item-title"
+        :placeholder="'Search ' + (currentTab == 'main' ? 'all add-ons' : TabNames[currentTab].toLowerCase())"
         :disable-button="!$theme.aurora"
-        @searchbar:search="search" @searchbar:clear="clearSearch" />
-    </f7-navbar>
-    <f7-toolbar tabbar labels bottom>
-      <f7-link tab-link @click="switchTab('bindings')" :tab-link-active="currentTab === 'bindings'" icon-ios="f7:circle_grid_hex_fill" icon-aurora="f7:circle_grid_hex_fill" icon-md="f7:circle_grid_hex_fill" text="Bindings" />
-      <f7-link tab-link @click="switchTab('automation')" :tab-link-active="currentTab === 'automation'" icon-ios="f7:sparkles" icon-aurora="f7:sparkles" icon-md="f7:sparkles" text="Automation" />
-      <f7-link tab-link @click="switchTab('ui')" :tab-link-active="currentTab === 'ui'" icon-ios="f7:play_rectangle_fill" icon-aurora="f7:play_rectangle_fill" icon-md="f7:play_rectangle_fill" text="UI" />
-      <f7-link tab-link @click="switchTab('other')" :tab-link-active="currentTab === 'other'" icon-ios="f7:ellipsis" icon-aurora="f7:ellipsis" icon-md="f7:ellipsis" text="Other" />
-      <f7-link tab-link @click="switchTab('search')" :tab-link-active="currentTab === 'search'" icon-ios="f7:search" icon-aurora="f7:search" icon-md="f7:search" text="Search" />
-    </f7-toolbar>
+        @searchbar:search="search"
+        @searchbar:clear="clearSearch" />
+    </f7-block>
     <f7-block v-if="!ready" class="text-align-center padding-top margin-top">
       <f7-block-title>
         <f7-preloader :size="30" />
         <div>Loading...</div>
       </f7-block-title>
     </f7-block>
-    <f7-tabs>
-      <f7-tab :tab-active="currentTab === 'bindings'">
+
+    <!-- Search Results -->
+    <div v-if="searchResults">
+      <f7-block v-if="searchResults.length === 0">
+        '{{ this.$refs.storeSearchbar.f7Searchbar.query }}' not found in {{ currentTab === 'main' ? 'any' : currentTab }} add-ons
+        <div class="flex-shrink-0 if-aurora display-flex justify-content-center">
+          <f7-button color="blue" fill raised @click="clearSearch">
+            Clear Search
+          </f7-button>
+        </div>
+      </f7-block>
+      <addons-section v-else :show-as-cards="searchResults.length <= 3" :addons="searchResults"
+                      :title="'Found: ' + searchResults.length + (currentTab == 'main' ? '' : ' ' + currentTab) + ' add-on' + ((searchResults.length === 1) ? '' : 's')"
+                      @addonButtonClick="addonButtonClick" />
+    </div>
+
+    <f7-tabs v-show="ready && !searchResults" routable>
+      <f7-tab id="main" @tabShow="onTabShow">
+        <!-- Show Suggested Add-ons -->
+        <addons-section
+          v-for="section in Object.keys(SuggestionLabels)"
+          :key="'suggested-' + section"
+          :show-all="true"
+          @addonButtonClick="addonButtonClick"
+          :addons="suggestedAddons.filter((a) => a.type === section)"
+          :suggested="true"
+          :title="SuggestionLabels[section].title"
+          :subtitle="SuggestionLabels[section].subtitle" />
+
+        <!-- Show Installed Add-ons -->
+        <addons-section
+          v-for="section in Object.keys(AddonTitles)"
+          :key="'installed-' + section"
+          :show-as-cards="installedAddons.length <= 3"
+          @addonButtonClick="addonButtonClick"
+          :title="'Installed ' + AddonTitles[section]"
+          :addons="installedAddons.filter((a) => a.type === section)" />
+      </f7-tab>
+
+      <f7-tab id="binding" @tabShow="onTabShow">
         <addons-section
           v-if="suggestedAddons" :show-all="true"
           @addonButtonClick="addonButtonClick"
           :addons="suggestedAddons.filter((a) => a.type === 'binding')"
           :suggested="true"
-          :title="'Binding Suggestions'"
-          :subtitle="'Suggested bindings, identified from network scan'" />
+          :title="SuggestionLabels.binding.title"
+          :subtitle="SuggestionLabels.binding.subtitle" />
         <addons-section
           v-if="officialAddons"
           @addonButtonClick="addonButtonClick"
@@ -75,7 +98,8 @@
           :addons="otherAddons.filter((a) => a.type === 'binding')"
           :title="'Other Add-ons'" />
       </f7-tab>
-      <f7-tab :tab-active="currentTab === 'automation'">
+
+      <f7-tab id="automation" @tabShow="onTabShow">
         <addons-section
           v-if="addons"
           @addonButtonClick="addonButtonClick"
@@ -95,10 +119,11 @@
           @addonButtonClick="addonButtonClick"
           :addons="allAddons.filter((a) => a.type === 'automation' && a.contentType === 'application/vnd.openhab.uicomponent;type=blocks')"
           :install-action-text="'Add'"
-          :title="'Block Libraries'"
+          :title="'Blockly Libraries'"
           :subtitle="'Community extensions to the Blockly toolbox'" />
       </f7-tab>
-      <f7-tab :tab-active="currentTab === 'ui'">
+
+      <f7-tab id="ui" @tabShow="onTabShow">
         <addons-section
           v-if="addons && addons.marketplace"
           @addonButtonClick="addonButtonClick"
@@ -114,35 +139,15 @@
           :title="'Other UI Add-ons'"
           :subtitle="'Alternative user interfaces and icon sets'" />
       </f7-tab>
-      <f7-tab :tab-active="currentTab === 'other'">
+
+      <f7-tab id="misc" @tabShow="onTabShow">
         <addons-section
           v-if="suggestedAddons" :show-all="true"
           @addonButtonClick="addonButtonClick"
           :suggested="true"
           :addons="suggestedAddons.filter((a) => a.type === 'misc')"
-          :title="'System Integrations Suggestions'"
-          :subtitle="'Suggested system integrations, identified from network scan'" />
-        <addons-section
-          v-if="suggestedAddons" :show-all="true"
-          @addonButtonClick="addonButtonClick"
-          :suggested="true"
-          :addons="suggestedAddons.filter((a) => a.type === 'persistence')"
-          :title="'Persistence Services'"
-          :subtitle="'Suggested backend connectors to store historical data, identified from network scan'" />
-        <addons-section
-          v-if="suggestedAddons" :show-all="true"
-          @addonButtonClick="addonButtonClick"
-          :suggested="true"
-          :addons="suggestedAddons.filter((a) => a.type === 'transformation')"
-          :title="'Transformation Add-ons'"
-          :subtitle="'Suggested transformation add-ons to translate raw values into processed or human-readable representations, identified from network scan'" />
-        <addons-section
-          v-if="suggestedAddons" :show-all="true"
-          @addonButtonClick="addonButtonClick"
-          :suggested="true"
-          :addons="suggestedAddons.filter((a) => a.type === 'voice')"
-          :title="'Voice &amp; Speech'"
-          :subtitle="'Suggested voice add-ons to convert between text and speech, interpret human language queries, identified from network scan'" />
+          :title="SuggestionLabels.misc.title"
+          :subtitle="SuggestionLabels.misc.subtitle" />
         <addons-section
           v-if="addons && officialAddons" :show-all="true"
           @addonButtonClick="addonButtonClick"
@@ -150,20 +155,50 @@
           :title="'System Integrations'"
           :featured="['misc-openhabcloud', 'misc-homekit', 'misc-metrics']"
           :subtitle="'Integrate openHAB with external systems'" />
+      </f7-tab>
+
+      <f7-tab id="persistence" @tabShow="onTabShow">
+        <addons-section
+          v-if="suggestedAddons" :show-all="true"
+          @addonButtonClick="addonButtonClick"
+          :suggested="true"
+          :addons="suggestedAddons.filter((a) => a.type === 'persistence')"
+          :title="SuggestionLabels.persistence.title"
+          :subtitle="SuggestionLabels.persistence.subtitle" />
         <addons-section
           v-if="addons && officialAddons"
           @addonButtonClick="addonButtonClick"
           :addons="unsuggestedAddons.filter((a) => a.type === 'persistence')" :show-all="true"
-          :featured="['persistence-rrd4j', 'persistence-influxdb', 'persistence-mongodb']"
+          :featured="['persistence-rrd4j', 'persistence-influxdb', 'persistence-mapdb']"
           :title="'Persistence Services'"
           :subtitle="'Backend connectors to store historical data'" />
+      </f7-tab>
+
+      <f7-tab id="transformation" @tabShow="onTabShow">
+        <addons-section
+          v-if="suggestedAddons" :show-all="true"
+          @addonButtonClick="addonButtonClick"
+          :suggested="true"
+          :addons="suggestedAddons.filter((a) => a.type === 'transformation')"
+          :title="SuggestionLabels.transformation.title"
+          :subtitle="SuggestionLabels.transformation.subtitle" />
         <addons-section
           v-if="addons && officialAddons"
           @addonButtonClick="addonButtonClick"
           :addons="unsuggestedAddons.filter((a) => a.type === 'transformation')" :show-all="true"
-          :featured="['transformation-jsonpath', 'transformation-javascript', 'transformation-regex']"
+          :featured="['transformation-jsonpath', 'transformation-map', 'transformation-regex']"
           :title="'Transformation Add-ons'"
           :subtitle="'Translate raw values into processed or human-readable representations'" />
+      </f7-tab>
+
+      <f7-tab id="voice" @tabShow="onTabShow">
+        <addons-section
+          v-if="suggestedAddons" :show-all="true"
+          @addonButtonClick="addonButtonClick"
+          :suggested="true"
+          :addons="suggestedAddons.filter((a) => a.type === 'voice')"
+          :title="SuggestionLabels.voice.title"
+          :subtitle="SuggestionLabels.voice.subtitle" />
         <addons-section
           v-if="addons && officialAddons" :show-all="true"
           @addonButtonClick="addonButtonClick"
@@ -172,14 +207,6 @@
           :title="'Voice &amp; Speech'"
           :subtitle="'Convert between text and speech, interpret human language queries'" />
       </f7-tab>
-      <f7-tab :tab-active="currentTab === 'search'" style="padding-top: 2rem">
-        <addons-section
-          v-if="addons && searchResults.length"
-          :show-as-cards="searchResults.length <= 3"
-          @addonButtonClick="addonButtonClick"
-          :title="searchResults.length + ' result' + ((searchResults.length === 1) ? '' : 's')"
-          :addons="searchResults" />
-      </f7-tab>
     </f7-tabs>
     <addon-details-sheet
       v-if="ready"
@@ -201,36 +228,42 @@
 .theme-filled .store-nav.navbar-large.navbar-large-collapsed .link
   color var(--f7-navbar-link-color)
   transition color 0.3s
+.searchbar-store
+  margin-left 2em
+  margin-right 2em
 </style>
 
 <script>
 import AddonStoreMixin from './addon-store-mixin'
 import AddonsSection from '@/components/addons/addons-section.vue'
+import { AddonTitles, AddonIcons, AddonSuggestionLabels } from '@/assets/addon-store'
 
 export default {
   mixins: [AddonStoreMixin],
-  props: ['initialTab'],
   components: {
     AddonsSection
   },
   data () {
     return {
-      currentTab: this.initialTab || 'bindings',
+      currentTab: 'main',
       services: null,
       suggestions: [],
       ready: false,
-      searchResults: []
+      searchResults: null
     }
   },
   computed: {
     allAddons () {
       return Object.keys(this.addons).flatMap((k) => this.addons[k])
     },
+    installedAddons () {
+      return this.allAddons.filter((a) => a.installed)
+    },
     suggestedAddons () {
-      return Object.keys(this.addons).flatMap((k) => this.addons[k]).filter((a) => !a.installed && this.suggestions.some((s) => s.id === a.id))
+      return this.allAddons.filter((a) => !a.installed && this.suggestions.some((s) => s.id === a.id))
     },
     unsuggestedAddons () {
-      return Object.keys(this.addons).flatMap((k) => this.addons[k]).filter((a) => !this.suggestedAddons.includes(a))
+      return this.allAddons.filter((a) => !this.suggestedAddons.includes(a))
     },
     officialAddons () {
       return Object.keys(this.addons).filter((k) => k === 'eclipse' || k === 'karaf').flatMap((k) => this.addons[k]).filter((a) => !this.suggestedAddons.includes(a))
@@ -244,7 +277,6 @@ export default {
   },
   methods: {
     onPageAfterIn () {
-      this.$f7router.updateCurrentUrl('/addons/' + this.currentTab + '/')
       this.load()
     },
     onPageBeforeOut () {
@@ -266,49 +298,60 @@ export default {
           setTimeout(() => {
             this.$f7.lazy.create('.page-addon-store')
           }, 100)
-          if (this.currentTab === 'search') {
-            const searchbar = this.$refs.storeSearchbar.f7Searchbar
-            const filterQuery = searchbar.query
-            this.search(this.$refs.storeSearchbar.$el, filterQuery)
-          }
         })
       })
     },
-    switchTab (tab) {
-      this.currentTab = ''
-      this.$nextTick(() => {
-        this.$f7router.updateCurrentUrl('/addons/' + tab + '/')
-        this.$f7.lazy.create('.page-addon-store')
-        this.currentTab = tab
-        if (this.currentTab === 'search') {
-          this.$refs.storeSearchbar.enable()
-          setTimeout(() => {
-            this.$refs.storeSearchbar.f7Searchbar.$inputEl.focus()
-          }, 500)
-        } else {
-          this.$refs.storeSearchbar.disable()
-        }
-      })
-    },
     addonButtonClick (addon) {
       const serviceId = (addon.uid.indexOf(':') > 0) ? addon.uid.substring(0, addon.uid.indexOf(':')) : undefined
       this.openAddonPopup(addon.uid, serviceId, addon)
     },
+    onTabShow (tab) {
+      this.currentTab = tab.id
+
+      const section = tab.id === 'main' ? '' : (tab.id + '/')
+      this.$f7router.updateCurrentUrl('/addons/' + section)
+      this.$f7router.url = '/' + this.currentTab
+
+      this.clearSearch()
+
+      this.$nextTick(() => {
+        this.$f7.lazy.create('.page-addon-store')
+      })
+    },
     search (searchbar, query, previousQuery) {
-      let results = []
-      if (query) {
-        for (const service in this.addons) {
-          results = results.concat(this.addons[service].filter((a) => a.label.toLowerCase().indexOf(query.toLowerCase()) >= 0))
-        }
+      if (!this.ready) return
+
+      query = query.trim()
+      if (!query) {
+        this.clearSearch()
+        return
+      }
+
+      let results = this.allAddons
+      if (this.currentTab !== 'main') {
+        results = results.filter((a) => a.type === this.currentTab)
       }
+      query = query.toLowerCase()
+      results = results.filter((a) => a.label.toLowerCase().indexOf(query) >= 0)
+
       this.$set(this, 'searchResults', results)
       setTimeout(() => {
         this.$f7.lazy.create('.page-addon-store')
       }, 100)
     },
-    clearSearch () {
-
+    clearSearch (searchbar, previousQuery) {
+      this.$refs.storeSearchbar.f7Searchbar.$inputEl.val('')
+      this.$set(this, 'searchResults', null)
+      this.$nextTick(() => {
+        this.$refs.storeSearchbar.f7Searchbar.$inputEl.focus()
+      })
     }
+  },
+  created () {
+    this.AddonTitles = AddonTitles
+    this.AddonIcons = AddonIcons
+    this.SuggestionLabels = AddonSuggestionLabels
+    this.TabNames = Object.assign({ main: 'Add-on Store' }, AddonTitles)
   }
 }
 </script>
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-binding.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-binding.vue
index 7499d63069..d9fa775ec5 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-binding.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-binding.vue
@@ -47,11 +47,11 @@
     <f7-block class="block-narrow" v-if="$store.getters.apiEndpoint('addons')">
       <f7-col v-if="bindings.length">
         <f7-list>
-          <f7-list-button color="blue" title="Install More Bindings" href="/addons/" />
+          <f7-list-button color="blue" title="Install More Bindings" href="/addons/binding/" />
         </f7-list>
       </f7-col>
       <f7-row v-else-if="ready" class="display-flex justify-content-center">
-        <f7-button large fill color="blue" href="/addons/">
+        <f7-button large fill color="blue" href="/addons/binding/">
           Install Bindings
         </f7-button>
       </f7-row>