Dummy search

client/src/styles/partials/generic/forms/text.scss

@@ -139,3 +139,48 @@
         }
     }
 }
+
+.bd-textInput {
+    background-color: rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 3px;
+    box-sizing: border-box;
+    color: #f6f6f7;
+    font-size: 14px;
+    transition: border .5s ease;
+
+    &:focus {
+        border: 1px solid #3ecc9c;
+    }
+}
+
+.bd-fancySearch {
+    display: flex;
+    justify-content: flex-end;
+    transform: translateY(80px) translateX(-140px);
+    transition: all .5s ease-in-out;
+
+    &::before {
+        content: "Search by name, description or tag...";
+        color: #f6f6f7;
+        position: relative;
+        top: -20px;
+        left: 245px;
+        transition: opacity .5s ease-in-out;
+    }
+
+    &.bd-active {
+        transform: none;
+
+        &::before {
+            opacity: 0;
+        }
+    }
+
+    .bd-textInput {
+        padding: 10px;
+        display: flex;
+        min-height: 40px;
+        width: 250px;
+    }
+}

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

@@ -26,6 +26,9 @@
                 <ThemeCard v-for="theme in localThemes" :theme="theme" :key="theme.id" :data-theme-id="theme.id" @toggle-theme="toggleTheme(theme)" @reload-theme="reload => reloadTheme(theme, reload)" @show-settings="dont_clone => showSettings(theme, dont_clone)" @delete-theme="unload => deleteTheme(theme, unload)" />
             </div>
             <div v-if="!local" class="bd-online-ph">
+                <div class="bd-fancySearch" :class="{'bd-active': loadingOnline || (onlineThemes && onlineThemes.docs)}">
+                    <input type="text" class="bd-textInput" @keydown.enter="searchInput" @keyup.stop/>
+                </div>
                 <h2 v-if="loadingOnline">Loading</h2>
                 <RemoteCard v-else-if="onlineThemes && onlineThemes.docs" v-for="theme in onlineThemes.docs" :key="theme.id" :item="theme"/>
             </div>
@@ -66,7 +69,6 @@
             async showOnline() {
                 this.local = false;
                 if (this.loadingOnline || this.onlineThemes) return;
-                await this.refreshOnline();
             },
             async refreshLocal() {
                 await this.ThemeManager.refreshThemes();
@@ -136,6 +138,10 @@
                 return Modals.contentSettings(theme, null, {
                     dont_clone
                 });
+            },
+            searchInput(e) {
+                this.loadingOnline = true;
+                setTimeout(this.refreshOnline, 1000);
             }
         }
     }