Make tags clickable

client/src/styles/partials/bdsettings/remotecard.scss

@@ -48,8 +48,19 @@
         color: #828a97;
         font-size: 10px;
         display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
+        align-items: flex-end;
+
+        .bd-remoteCardTag {
+            > div {
+                display: inline;
+                cursor: pointer;
+                margin-left: 2px;
+
+                &:hover {
+                    color: #fff;
+                }
+            }
+        }
     }
 
     .bd-buttonGroup {

client/src/ui/components/bd/RemoteCard.vue

@@ -25,7 +25,11 @@
             </div>
         </div>
         <div class="bd-flexRow bd-flex bd-flexGrow">
-            <div class="bd-flexGrow bd-remoteCardTags">{{item.tags.join(', ')}}</div>
+            <div class="bd-flexGrow bd-remoteCardTags">
+                <div v-for="(tag, index) in item.tags" class="bd-remoteCardTag">
+                    <div @click="tagClicked(tag)">{{tag}}</div><span v-if="index + 1 < item.tags.length">, </span>
+                </div>
+            </div>
             <div class="bd-buttonGroup">
                 <div class="bd-button">Install</div>
                 <div class="bd-button">Preview</div>
@@ -40,7 +44,7 @@
     import { shell } from 'electron';
 
     export default {
-        props: ['item'],
+        props: ['item', 'tagClicked'],
         data() {
             return {}
         },

client/src/ui/components/bd/ThemesView.vue

@@ -35,7 +35,7 @@
                         </div>
                         <div class="bd-searchHint">{{searchHint}}</div>
                         <div class="bd-fancySearch" :class="{'bd-disabled': loadingOnline, 'bd-active': loadingOnline || (onlineThemes && onlineThemes.docs)}">
-                            <input type="text" class="bd-textInput" placeholder="Search" @keydown.enter="searchInput" @keyup.stop />
+                            <input type="text" class="bd-textInput" placeholder="Search" @keydown.enter="searchInput" @keyup.stop :value="onlineThemes.filters.sterm"/>
                         </div>
                     </div>
                     <div class="bd-flex bd-flexRow" v-if="onlineThemes && onlineThemes.docs && onlineThemes.docs.length">
@@ -49,7 +49,7 @@
                     </div>
                 </div>
                 <ScrollerWrap class="bd-onlinePhBody" v-if="!loadingOnline && onlineThemes" :scrollend="scrollend">
-                    <RemoteCard v-if="onlineThemes && onlineThemes.docs" v-for="theme in onlineThemes.docs" :key="theme.id" :item="theme" />
+                    <RemoteCard v-if="onlineThemes && onlineThemes.docs" v-for="theme in onlineThemes.docs" :key="theme.id" :item="theme" :tagClicked="searchByTag"/>
                     <div class="bd-spinnerContainer">
                         <div v-if="loadingMore" class="bd-spinner7"/>
                     </div>
@@ -191,6 +191,11 @@
                     this.onlineThemes.filters.ascending = false;
                 }
                 this.refreshOnline();
+            },
+            async searchByTag(tag) {
+                if (this.loadingOnline || this.loadingMore) return;
+                this.onlineThemes.filters.sterm = tag;
+                this.refreshOnline();
             }
         }
     }