From 6db34b9ceefbb963d0c5fdf1400d27e337bcc957 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Tue, 4 Dec 2018 09:22:04 +0200
Subject: [PATCH 01/19] Server emulator thing

---
 client/src/dev/serveremu.js    | 82 ++++++++++++++++++++++++++++++++++
 client/src/modules/bdwebapi.js | 53 ++--------------------
 2 files changed, 86 insertions(+), 49 deletions(-)
 create mode 100644 client/src/dev/serveremu.js

diff --git a/client/src/dev/serveremu.js b/client/src/dev/serveremu.js
new file mode 100644
index 00000000..b66d6af1
--- /dev/null
+++ b/client/src/dev/serveremu.js
@@ -0,0 +1,82 @@
+const dummyTags = ['dark', 'light', 'simple', 'minimal', 'extra', 'something', 'tag', 'whatever', 'another', 'transparent'];
+
+export default class ServerEmu {
+
+    static async themes(args) {
+        if (!this._themes) this._themes = this.generateThemes();
+
+        await new Promise(r => setTimeout(r, Math.random() * 3000));
+
+        return {
+            docs: this._themes,
+            pagination: {
+                total: this._themes.length,
+                pages: this._themes.length / 9,
+                limit: 0,
+                page: 1
+            }
+        }
+    }
+
+    static generateThemes() {
+        const docs = [];
+        const count = Math.floor(Math.random() * 50 + 30);
+
+        for (let i = 0; i < count; i++) {
+            const id = `theme${i}-${this.randomId()}`;
+            const name = `Dummy Theme ${i}`;
+            const tags = dummyTags.sort(() => .5 - Math.random()).slice(0, 3);
+
+            docs.push({
+                id,
+                name,
+                tags,
+                installs: Math.floor(Math.random() * 5000) + 5000,
+                updated: this.randomTimestamp(),
+                rating: Math.floor(Math.random() * 500) + 500,
+                activeUsers: Math.floor(Math.random() * 1000) + 1000,
+                rated: Math.random() > .5,
+                version: this.randomVersion(),
+                repository: this.dummyRepo,
+                files: this.dummyFiles,
+                author: this.dummyAuthor
+            });
+        }
+
+        return docs;
+    }
+
+    static get dummyRepo() {
+        return {
+            name: 'ExampleRepository',
+            baseUri: 'https://github.com/Jiiks/ExampleRepository',
+            rawUri: 'https://github.com/Jiiks/ExampleRepository/raw/master'
+        }
+    }
+
+    static get dummyFiles() {
+        return {
+            readme: 'Example/readme.md',
+            previews: [{
+                large: 'Example/preview1-big.png',
+                thumb: 'Example/preview1-small.png'
+            }]
+        }
+    }
+
+    static get dummyAuthor() {
+        return 'Someone';
+    }
+
+    static randomId() {
+        return btoa(Math.random()).substring(3, 9);
+    }
+
+    static randomTimestamp() {
+        return `2018-${Math.floor((Math.random() * 12) + 1).toString().padStart(2, '0')}-${Math.floor((Math.random() * 30) + 1).toString().padStart(2, '0')}T14:51:32.057Z`;
+    }
+
+    static randomVersion() {
+        return `${Math.round(Math.random() * 3)}.${Math.round(Math.random() * 10)}.${Math.round(Math.random() * 10)}`;
+    }
+}
diff --git a/client/src/modules/bdwebapi.js b/client/src/modules/bdwebapi.js
index 393eb112..926b2cb6 100644
--- a/client/src/modules/bdwebapi.js
+++ b/client/src/modules/bdwebapi.js
@@ -8,6 +8,8 @@
  * LICENSE file in the root directory of this source tree.
 */
 
+import ServerEmu from '../dev/serveremu';
+
 import { request } from 'vendor';
 
 const APIBASE = 'ifyouareinwebtestthenyouknowwhatthisshouldbe'; // Do not push
@@ -19,54 +21,6 @@ const ENDPOINTS = {
     'statistics': `${APIBASE}/statistics`
 };
 
-const dummyTags = ['tag1', 'tag2', 'tag3', 'tag4', 'tag5'];
-const dummyRepo = {
-    name: 'ExampleRepository',
-    baseUri: 'https://github.com/Jiiks/ExampleRepository',
-    rawUri: 'https://github.com/Jiiks/ExampleRepository/raw/master'
-};
-const dummyVersion = () => `${Math.round(Math.random() * 3)}.${Math.round(Math.random() * 10)}.${Math.round(Math.random() * 10)}`;
-const dummyFiles = {
-    readme: 'Example/readme.md',
-    previews: [{
-        large: 'Example/preview1-big.png',
-        thumb: 'Example/preview1-small.png'
-    }]
-};
-const dummyAuthor = 'DummyAuthor';
-const dummyTimestamp = () => `2018-${Math.floor((Math.random() * 12) + 1).toString().padStart(2, '0')}-${Math.floor((Math.random() * 30) + 1).toString().padStart(2, '0')}T14:51:32.057Z`;
-
-async function dummyThemes() {
-    // Simulate get
-    await new Promise(r => setTimeout(r, Math.random() * 3000));
-    const dummies = [];
-    for (let i = 0; i < 10; i++) {
-        dummies.push({
-            id: `theme${i}${btoa(Math.random()).substring(3, 9)}`,
-            name: `Dummy ${i}`,
-            tags: dummyTags,
-            installs: Math.floor(Math.random() * 10000),
-            updated: dummyTimestamp(),
-            rating: Math.floor(Math.random() * 1000),
-            activeUsers: Math.floor(Math.random() * 1000),
-            rated: Math.random() > .5,
-            version: dummyVersion(),
-            repository: dummyRepo,
-            files: dummyFiles,
-            author: dummyAuthor
-        });
-    }
-    return {
-        docs: dummies,
-        pagination: {
-            total: 25,
-            pages: 3,
-            limit: 9,
-            page: 1
-        }
-    };
-}
-
 export default class BdWebApi {
 
     static get themes() {
@@ -89,7 +43,8 @@ export default class BdWebApi {
     }
 
     static getThemes(args) {
-        return dummyThemes();
+        return ServerEmu.themes(args);
+       //  return dummyThemes();
         /*
         if (!args) return request.get(ENDPOINTS.themes);
         const { id } = args;

From 7a9b72a33a6bcd8e78fd9b71a5edd9f8a1765f6e Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Tue, 4 Dec 2018 09:30:49 +0200
Subject: [PATCH 02/19] Initial search

---
 client/src/dev/serveremu.js                | 19 ++++++++++++++-----
 client/src/ui/components/bd/ThemesView.vue |  6 +++---
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/client/src/dev/serveremu.js b/client/src/dev/serveremu.js
index b66d6af1..11a823d5 100644
--- a/client/src/dev/serveremu.js
+++ b/client/src/dev/serveremu.js
@@ -7,12 +7,20 @@ export default class ServerEmu {
 
         await new Promise(r => setTimeout(r, Math.random() * 3000));
 
+        let docs = this._themes;
+
+        if (args && args.sterm) {
+            const { sterm } = args;
+            const reg = new RegExp(sterm, 'gi');
+            docs = docs.filter(doc => doc.tags.includes(sterm) || reg.exec(doc.name) || reg.exec(doc.description));
+        }
+
         return {
-            docs: this._themes,
+            docs,
             pagination: {
-                total: this._themes.length,
-                pages: this._themes.length / 9,
-                limit: 0,
+                total: docs.length,
+                pages: docs.length / 9,
+                limit: 9,
                 page: 1
             }
         }
@@ -39,7 +47,8 @@ export default class ServerEmu {
                 version: this.randomVersion(),
                 repository: this.dummyRepo,
                 files: this.dummyFiles,
-                author: this.dummyAuthor
+                author: this.dummyAuthor,
+                description: ''
             });
         }
 
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 8b583b52..56cc20c4 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -98,12 +98,12 @@
             async refreshLocal() {
                 await this.ThemeManager.refreshThemes();
             },
-            async refreshOnline() {
+            async refreshOnline(sterm) {
                 this.searchHint = '';
                 if (this.loadingOnline || this.loadingMore) return;
                 this.loadingOnline = true;
                 try {
-                    const getThemes = await BdWebApi.themes.get();
+                    const getThemes = await BdWebApi.themes.get({ sterm });
                     this.onlineThemes = getThemes;
                     if (!this.onlineThemes.docs) return;
                     this.searchHint = `${this.onlineThemes.pagination.total} Results`;
@@ -142,7 +142,7 @@
             },
             searchInput(e) {
                 if (this.loadingOnline || this.loadingMore) return;
-                this.refreshOnline();
+                this.refreshOnline(e.target.value);
             },
             async scrollend(e) {
                 if (this.loadingOnline || this.loadingMore) return;

From b4dbfcd8082acf08c6b2b76fb6fd858c28f4051e Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Tue, 4 Dec 2018 10:48:25 +0200
Subject: [PATCH 03/19] Pagination

---
 client/src/dev/serveremu.js                | 25 ++++++++++++++++------
 client/src/ui/components/bd/ThemesView.vue | 19 +++++++++++-----
 2 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/client/src/dev/serveremu.js b/client/src/dev/serveremu.js
index 11a823d5..3df3bbad 100644
--- a/client/src/dev/serveremu.js
+++ b/client/src/dev/serveremu.js
@@ -7,21 +7,34 @@ export default class ServerEmu {
 
         await new Promise(r => setTimeout(r, Math.random() * 3000));
 
-        let docs = this._themes;
-
+        let docs = [];
+        
         if (args && args.sterm) {
             const { sterm } = args;
             const reg = new RegExp(sterm, 'gi');
-            docs = docs.filter(doc => doc.tags.includes(sterm) || reg.exec(doc.name) || reg.exec(doc.description));
+            docs = this._themes.filter(doc => doc.tags.includes(sterm) || reg.exec(doc.name) || reg.exec(doc.description));
+        } else {
+            docs = this._themes;
+        }
+
+        const total = docs.length;
+        const pages = Math.ceil(total / 9);
+
+        let page = 1;
+        if (args && args.page) {
+            page = args.page;
+            docs = docs.slice((page - 1) * 9, page * 9);
+        } else {
+            docs = docs.slice(0, 9);
         }
 
         return {
             docs,
             pagination: {
-                total: docs.length,
-                pages: docs.length / 9,
+                total,
+                pages,
                 limit: 9,
-                page: 1
+                page
             }
         }
     }
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 56cc20c4..971bf5f8 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -79,7 +79,12 @@
                 onlineThemes: null,
                 loadingOnline: false,
                 loadingMore: false,
-                searchHint: ''
+                searchHint: '',
+                sterm: '',
+                pagination: {
+                    page: 1,
+                    pages: 1
+                }
             };
         },
         components: {
@@ -98,13 +103,14 @@
             async refreshLocal() {
                 await this.ThemeManager.refreshThemes();
             },
-            async refreshOnline(sterm) {
+            async refreshOnline() {
                 this.searchHint = '';
                 if (this.loadingOnline || this.loadingMore) return;
                 this.loadingOnline = true;
                 try {
-                    const getThemes = await BdWebApi.themes.get({ sterm });
+                    const getThemes = await BdWebApi.themes.get({ sterm: this.sterm });
                     this.onlineThemes = getThemes;
+                    this.pagination = this.onlineThemes.pagination;
                     if (!this.onlineThemes.docs) return;
                     this.searchHint = `${this.onlineThemes.pagination.total} Results`;
                 } catch (err) {
@@ -142,13 +148,16 @@
             },
             searchInput(e) {
                 if (this.loadingOnline || this.loadingMore) return;
-                this.refreshOnline(e.target.value);
+                this.sterm = e.target.value;
+                this.refreshOnline();
             },
             async scrollend(e) {
+                if (this.pagination.page >= this.pagination.pages) return;
                 if (this.loadingOnline || this.loadingMore) return;
                 this.loadingMore = true;
                 try {
-                    const getThemes = await BdWebApi.themes.get();
+                    this.pagination.page = this.pagination.page + 1;
+                    const getThemes = await BdWebApi.themes.get({ sterm: this.sterm, page: this.pagination.page });
                     this.onlineThemes.docs = [...this.onlineThemes.docs, ...getThemes.docs];
                 } catch (err) {
                     Logger.err('ThemesView', err);

From 63874c8b4ec2cd5b17a7c03845fd235f90d36f79 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Tue, 4 Dec 2018 23:02:36 +0200
Subject: [PATCH 04/19] Sort styling

---
 .../partials/bdsettings/contentview.scss      | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/client/src/styles/partials/bdsettings/contentview.scss b/client/src/styles/partials/bdsettings/contentview.scss
index c0272110..9aaf6cc1 100644
--- a/client/src/styles/partials/bdsettings/contentview.scss
+++ b/client/src/styles/partials/bdsettings/contentview.scss
@@ -35,7 +35,28 @@
             .bd-searchSort {
                 span {
                     color: #fff;
-                    line-height: 40px;
+                    display: flex;
+                    justify-content: flex-end;
+                    font-size: 12px;
+                    height: 14px;
+                    padding: 3px;
+                }
+
+                .bd-sort {
+                    color: $coldimwhite;
+                    font-size: 12px;
+                    padding: 3px;
+                    height: 14px;
+                    cursor: pointer;
+                    transition: color .2s ease-in-out;
+
+                    &:hover {
+                        color: #fff;
+                    }
+
+                    &.bd-active {
+                        color: $colbdgreen;
+                    }
                 }
             }
         }

From fa5be193ad8161e3843e9f5e41fe4ae027d041b8 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Tue, 4 Dec 2018 23:15:16 +0200
Subject: [PATCH 05/19] add chevron to sort buttons and styling

---
 .../src/styles/partials/bdsettings/contentview.scss | 13 ++++++++++++-
 client/src/ui/components/bd/ThemesView.vue          |  7 ++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/client/src/styles/partials/bdsettings/contentview.scss b/client/src/styles/partials/bdsettings/contentview.scss
index 9aaf6cc1..86864ca6 100644
--- a/client/src/styles/partials/bdsettings/contentview.scss
+++ b/client/src/styles/partials/bdsettings/contentview.scss
@@ -33,7 +33,9 @@
             }
 
             .bd-searchSort {
-                span {
+                margin-top: 10px;
+
+                > span {
                     color: #fff;
                     display: flex;
                     justify-content: flex-end;
@@ -43,6 +45,7 @@
                 }
 
                 .bd-sort {
+                    display: flex;
                     color: $coldimwhite;
                     font-size: 12px;
                     padding: 3px;
@@ -57,6 +60,14 @@
                     &.bd-active {
                         color: $colbdgreen;
                     }
+
+                    .bd-materialDesignIcon {
+                        fill: $colbdgreen;
+                    }
+
+                    svg {
+                        height: 14px;
+                    }
                 }
             }
         }
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 971bf5f8..272ff2fc 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -41,7 +41,7 @@
                     <div class="bd-flex bd-flexRow" v-if="onlineThemes && onlineThemes.docs && onlineThemes.docs.length">
                         <div class="bd-searchSort bd-flex bd-flexGrow">
                             <span class="bd-flexGrow">Sort by:</span>
-                            <div class="bd-sort">Name</div>
+                            <div class="bd-sort bd-active">Name<MiChevronDown size="18"/></div>
                             <div class="bd-sort">Updated</div>
                             <div class="bd-sort">Installs</div>
                             <div class="bd-sort">Users</div>
@@ -64,7 +64,7 @@
     import { ThemeManager, BdWebApi } from 'modules';
     import { Modals } from 'ui';
     import { ClientLogger as Logger } from 'common';
-    import { MiRefresh, ScrollerWrap } from '../common';
+    import { MiRefresh, ScrollerWrap, MiChevronDown } from '../common';
     import SettingsWrapper from './SettingsWrapper.vue';
     import ThemeCard from './ThemeCard.vue';
     import RemoteCard from './RemoteCard.vue';
@@ -89,7 +89,8 @@
         },
         components: {
             SettingsWrapper, ThemeCard, RemoteCard,
-            MiRefresh, ScrollerWrap,
+            MiRefresh, MiChevronDown,
+            ScrollerWrap,
             RefreshBtn
         },
         methods: {

From 1fd7b97ce6eefc0794377fe2bb08284f829f063a Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Tue, 4 Dec 2018 23:18:13 +0200
Subject: [PATCH 06/19] always have spinner container visible

---
 client/src/styles/partials/bdsettings/contentview.scss | 1 +
 client/src/ui/components/bd/ThemesView.vue             | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/styles/partials/bdsettings/contentview.scss b/client/src/styles/partials/bdsettings/contentview.scss
index 86864ca6..47508a3e 100644
--- a/client/src/styles/partials/bdsettings/contentview.scss
+++ b/client/src/styles/partials/bdsettings/contentview.scss
@@ -76,6 +76,7 @@
             margin-top: 10px;
 
             .bd-spinnerContainer {
+                min-height: 40px;
                 padding: 0;
             }
 
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 272ff2fc..9aa04cf8 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -50,8 +50,8 @@
                 </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" />
-                    <div v-if="loadingMore" class="bd-spinnerContainer">
-                        <div class="bd-spinner7"/>
+                    <div class="bd-spinnerContainer">
+                        <div v-if="loadingMore" class="bd-spinner7"/>
                     </div>
                 </ScrollerWrap>
             </div>

From c6ddb756304f7fa14dcc4686f0c9474da7e32cf7 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Tue, 4 Dec 2018 23:25:49 +0200
Subject: [PATCH 07/19] Remove sort by text

---
 client/src/styles/partials/bdsettings/contentview.scss | 1 +
 client/src/ui/components/bd/ThemesView.vue             | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/styles/partials/bdsettings/contentview.scss b/client/src/styles/partials/bdsettings/contentview.scss
index 47508a3e..72a8a892 100644
--- a/client/src/styles/partials/bdsettings/contentview.scss
+++ b/client/src/styles/partials/bdsettings/contentview.scss
@@ -34,6 +34,7 @@
 
             .bd-searchSort {
                 margin-top: 10px;
+                justify-content: flex-end;
 
                 > span {
                     color: #fff;
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 9aa04cf8..57b2e84f 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -40,7 +40,6 @@
                     </div>
                     <div class="bd-flex bd-flexRow" v-if="onlineThemes && onlineThemes.docs && onlineThemes.docs.length">
                         <div class="bd-searchSort bd-flex bd-flexGrow">
-                            <span class="bd-flexGrow">Sort by:</span>
                             <div class="bd-sort bd-active">Name<MiChevronDown size="18"/></div>
                             <div class="bd-sort">Updated</div>
                             <div class="bd-sort">Installs</div>

From c618956639c777e9d66de933a2e4bab9d304ba9a Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Tue, 4 Dec 2018 23:30:11 +0200
Subject: [PATCH 08/19] flipy

---
 client/src/styles/partials/bdsettings/contentview.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/client/src/styles/partials/bdsettings/contentview.scss b/client/src/styles/partials/bdsettings/contentview.scss
index 72a8a892..926b853c 100644
--- a/client/src/styles/partials/bdsettings/contentview.scss
+++ b/client/src/styles/partials/bdsettings/contentview.scss
@@ -69,6 +69,12 @@
                     svg {
                         height: 14px;
                     }
+
+                    &.bd-flipY {
+                        .bd-materialDesignIcon {
+                            transform: scaleY(-1);
+                        }
+                    }
                 }
             }
         }

From 08b66d5e5a4efd1bed176a40e31e8368759e3cfd Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Tue, 4 Dec 2018 23:37:39 +0200
Subject: [PATCH 09/19] Functional sort buttons

---
 client/src/ui/components/bd/ThemesView.vue | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 57b2e84f..779540d3 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -40,10 +40,10 @@
                     </div>
                     <div class="bd-flex bd-flexRow" v-if="onlineThemes && onlineThemes.docs && onlineThemes.docs.length">
                         <div class="bd-searchSort bd-flex bd-flexGrow">
-                            <div class="bd-sort bd-active">Name<MiChevronDown size="18"/></div>
-                            <div class="bd-sort">Updated</div>
-                            <div class="bd-sort">Installs</div>
-                            <div class="bd-sort">Users</div>
+                            <div class="bd-sort" @click="sortBy('name')" :class="{'bd-active': sort === 'name', 'bd-flipY': ascending}">Name<MiChevronDown v-if="sort === 'name'" size="18"/></div>
+                            <div class="bd-sort" @click="sortBy('updated')" :class="{'bd-active': sort === 'updated', 'bd-flipY': ascending}">Updated<MiChevronDown v-if="sort === 'updated'" size="18" /></div>
+                            <div class="bd-sort" @click="sortBy('installs')" :class="{'bd-active': sort === 'installs', 'bd-flipY': ascending}">Installs<MiChevronDown v-if="sort === 'installs'" size="18" /></div>
+                            <div class="bd-sort" @click="sortBy('users')" :class="{'bd-active': sort === 'users', 'bd-flipY': ascending}">Users<MiChevronDown v-if="sort === 'users'" size="18" /></div>
                         </div>
                     </div>
                 </div>
@@ -83,7 +83,9 @@
                 pagination: {
                     page: 1,
                     pages: 1
-                }
+                },
+                sort: 'name',
+                ascending: false
             };
         },
         components: {
@@ -164,6 +166,15 @@
                 } finally {
                     this.loadingMore = false;
                 }
+            },
+            async sortBy(by) {
+                if (this.loadingOnline || this.loadingMore) return;
+                if (this.sort === by) {
+                    this.ascending = !this.ascending;
+                } else {
+                    this.sort = by;
+                    this.ascending = false;
+                }
             }
         }
     }

From e3010fcd43f4c39f345801f4da209001fffeb1cd Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 5 Dec 2018 00:40:57 +0200
Subject: [PATCH 10/19] Functional sorting

---
 client/src/dev/serveremu.js                | 26 ++++++++++
 client/src/ui/components/bd/ThemesView.vue | 60 +++++++++++++---------
 2 files changed, 63 insertions(+), 23 deletions(-)

diff --git a/client/src/dev/serveremu.js b/client/src/dev/serveremu.js
index 3df3bbad..e926296e 100644
--- a/client/src/dev/serveremu.js
+++ b/client/src/dev/serveremu.js
@@ -17,6 +17,27 @@ export default class ServerEmu {
             docs = this._themes;
         }
 
+        if (args.sort) {
+            switch (args.sort) {
+                case 'name':
+                    if (args.ascending) docs = docs.sort((docA, docB) => docA.name.toUpperCase() < docB.name.toUpperCase());
+                    else docs = docs.sort((docA, docB) => docA.name.toUpperCase() > docB.name.toUpperCase());
+                    break;
+                case 'updated':
+                    if (args.ascending) docs = docs.sort((docA, docB) => new Date(docA.updated).getTime() - new Date(docB.updated).getTime());
+                    else docs = docs.sort((docA, docB) => new Date(docB.updated).getTime() - new Date(docA.updated).getTime());
+                    break;
+                case 'installs':
+                    if (args.ascending) docs = docs.sort((docA, docB) => docA.installs - docB.installs);
+                    else docs = docs.sort((docA, docB) => docB.installs - docA.installs);
+                    break;
+                case 'users':
+                    if (args.ascending) docs = docs.sort((docA, docB) => docA.activeUsers - docB.activeUsers);
+                    else docs = docs.sort((docA, docB) => docB.activeUsers - docA.activeUsers);
+                    break;
+            }
+        }
+
         const total = docs.length;
         const pages = Math.ceil(total / 9);
 
@@ -30,6 +51,11 @@ export default class ServerEmu {
 
         return {
             docs,
+            filters: {
+                sterm: args.sterm || '',
+                ascending: args.ascending || false,
+                sort: args.sort || 'name'
+            },
             pagination: {
                 total,
                 pages,
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 779540d3..f0acef9a 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -40,10 +40,10 @@
                     </div>
                     <div class="bd-flex bd-flexRow" v-if="onlineThemes && onlineThemes.docs && onlineThemes.docs.length">
                         <div class="bd-searchSort bd-flex bd-flexGrow">
-                            <div class="bd-sort" @click="sortBy('name')" :class="{'bd-active': sort === 'name', 'bd-flipY': ascending}">Name<MiChevronDown v-if="sort === 'name'" size="18"/></div>
-                            <div class="bd-sort" @click="sortBy('updated')" :class="{'bd-active': sort === 'updated', 'bd-flipY': ascending}">Updated<MiChevronDown v-if="sort === 'updated'" size="18" /></div>
-                            <div class="bd-sort" @click="sortBy('installs')" :class="{'bd-active': sort === 'installs', 'bd-flipY': ascending}">Installs<MiChevronDown v-if="sort === 'installs'" size="18" /></div>
-                            <div class="bd-sort" @click="sortBy('users')" :class="{'bd-active': sort === 'users', 'bd-flipY': ascending}">Users<MiChevronDown v-if="sort === 'users'" size="18" /></div>
+                            <div class="bd-sort" @click="sortBy('name')" :class="{'bd-active': onlineThemes.filters.sort === 'name', 'bd-flipY': onlineThemes.filters.ascending}">Name<MiChevronDown v-if="onlineThemes.filters.sort === 'name'" size="18"/></div>
+                            <div class="bd-sort" @click="sortBy('updated')" :class="{'bd-active': onlineThemes.filters.sort === 'updated', 'bd-flipY': onlineThemes.filters.ascending}">Updated<MiChevronDown v-if="onlineThemes.filters.sort === 'updated'" size="18" /></div>
+                            <div class="bd-sort" @click="sortBy('installs')" :class="{'bd-active': onlineThemes.filters.sort === 'installs', 'bd-flipY': onlineThemes.filters.ascending}">Installs<MiChevronDown v-if="onlineThemes.filters.sort === 'installs'" size="18" /></div>
+                            <div class="bd-sort" @click="sortBy('users')" :class="{'bd-active': onlineThemes.filters.sort === 'users', 'bd-flipY': onlineThemes.filters.ascending}">Users<MiChevronDown v-if="onlineThemes.filters.sort === 'users'" size="18" /></div>
                         </div>
                     </div>
                 </div>
@@ -75,17 +75,23 @@
                 ThemeManager,
                 local: true,
                 localThemes: ThemeManager.localThemes,
-                onlineThemes: null,
+                onlineThemes: {
+                    docs: [],
+                    filters: {
+                        sterm: '',
+                        sort: 'name',
+                        ascending: false
+                    },
+                    pagination: {
+                        total: 0,
+                        pages: 0,
+                        limit: 9,
+                        page: 1
+                    }
+                },
                 loadingOnline: false,
                 loadingMore: false,
-                searchHint: '',
-                sterm: '',
-                pagination: {
-                    page: 1,
-                    pages: 1
-                },
-                sort: 'name',
-                ascending: false
+                searchHint: ''
             };
         },
         components: {
@@ -110,9 +116,8 @@
                 if (this.loadingOnline || this.loadingMore) return;
                 this.loadingOnline = true;
                 try {
-                    const getThemes = await BdWebApi.themes.get({ sterm: this.sterm });
+                    const getThemes = await BdWebApi.themes.get(this.onlineThemes.filters);
                     this.onlineThemes = getThemes;
-                    this.pagination = this.onlineThemes.pagination;
                     if (!this.onlineThemes.docs) return;
                     this.searchHint = `${this.onlineThemes.pagination.total} Results`;
                 } catch (err) {
@@ -150,17 +155,25 @@
             },
             searchInput(e) {
                 if (this.loadingOnline || this.loadingMore) return;
-                this.sterm = e.target.value;
+                this.onlineThemes.filters.sterm = e.target.value;
                 this.refreshOnline();
             },
             async scrollend(e) {
-                if (this.pagination.page >= this.pagination.pages) return;
+                if (this.onlineThemes.pagination.page >= this.onlineThemes.pagination.pages) return;
                 if (this.loadingOnline || this.loadingMore) return;
                 this.loadingMore = true;
+
                 try {
-                    this.pagination.page = this.pagination.page + 1;
-                    const getThemes = await BdWebApi.themes.get({ sterm: this.sterm, page: this.pagination.page });
+                    const getThemes = await BdWebApi.themes.get({
+                        sterm: this.onlineThemes.filters.sterm,
+                        page: this.onlineThemes.pagination.page + 1,
+                        sort: this.onlineThemes.filters.sort,
+                        ascending: this.onlineThemes.filters.ascending
+                    });
+
                     this.onlineThemes.docs = [...this.onlineThemes.docs, ...getThemes.docs];
+                    this.onlineThemes.filters = getThemes.filters;
+                    this.onlineThemes.pagination = getThemes.pagination;
                 } catch (err) {
                     Logger.err('ThemesView', err);
                 } finally {
@@ -169,12 +182,13 @@
             },
             async sortBy(by) {
                 if (this.loadingOnline || this.loadingMore) return;
-                if (this.sort === by) {
-                    this.ascending = !this.ascending;
+                if (this.onlineThemes.filters.sort === by) {
+                    this.onlineThemes.filters.ascending = !this.onlineThemes.filters.ascending;
                 } else {
-                    this.sort = by;
-                    this.ascending = false;
+                    this.onlineThemes.filters.sort = by;
+                    this.onlineThemes.filters.ascending = false;
                 }
+                this.refreshOnline();
             }
         }
     }

From e4c0796e5e1e37b4624037ca9baa8a32a0eedd11 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 5 Dec 2018 00:43:40 +0200
Subject: [PATCH 11/19] add rating sort

---
 client/src/dev/serveremu.js                | 4 ++++
 client/src/ui/components/bd/ThemesView.vue | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/dev/serveremu.js b/client/src/dev/serveremu.js
index e926296e..0c1bd36a 100644
--- a/client/src/dev/serveremu.js
+++ b/client/src/dev/serveremu.js
@@ -35,6 +35,10 @@ export default class ServerEmu {
                     if (args.ascending) docs = docs.sort((docA, docB) => docA.activeUsers - docB.activeUsers);
                     else docs = docs.sort((docA, docB) => docB.activeUsers - docA.activeUsers);
                     break;
+                case 'rating':
+                    if (args.ascending) docs = docs.sort((docA, docB) => docA.rating - docB.rating);
+                    else docs = docs.sort((docA, docB) => docB.rating - docA.rating);
+                    break;
             }
         }
 
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index f0acef9a..dda586dd 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -40,10 +40,11 @@
                     </div>
                     <div class="bd-flex bd-flexRow" v-if="onlineThemes && onlineThemes.docs && onlineThemes.docs.length">
                         <div class="bd-searchSort bd-flex bd-flexGrow">
-                            <div class="bd-sort" @click="sortBy('name')" :class="{'bd-active': onlineThemes.filters.sort === 'name', 'bd-flipY': onlineThemes.filters.ascending}">Name<MiChevronDown v-if="onlineThemes.filters.sort === 'name'" size="18"/></div>
+                            <div class="bd-sort" @click="sortBy('name')" :class="{'bd-active': onlineThemes.filters.sort === 'name', 'bd-flipY': onlineThemes.filters.ascending}">Name<MiChevronDown v-if="onlineThemes.filters.sort === 'name'" size="18" /></div>
                             <div class="bd-sort" @click="sortBy('updated')" :class="{'bd-active': onlineThemes.filters.sort === 'updated', 'bd-flipY': onlineThemes.filters.ascending}">Updated<MiChevronDown v-if="onlineThemes.filters.sort === 'updated'" size="18" /></div>
                             <div class="bd-sort" @click="sortBy('installs')" :class="{'bd-active': onlineThemes.filters.sort === 'installs', 'bd-flipY': onlineThemes.filters.ascending}">Installs<MiChevronDown v-if="onlineThemes.filters.sort === 'installs'" size="18" /></div>
                             <div class="bd-sort" @click="sortBy('users')" :class="{'bd-active': onlineThemes.filters.sort === 'users', 'bd-flipY': onlineThemes.filters.ascending}">Users<MiChevronDown v-if="onlineThemes.filters.sort === 'users'" size="18" /></div>
+                            <div class="bd-sort" @click="sortBy('rating')" :class="{'bd-active': onlineThemes.filters.sort === 'rating', 'bd-flipY': onlineThemes.filters.ascending}">Rating<MiChevronDown v-if="onlineThemes.filters.sort === 'rating'" size="18" /></div>
                         </div>
                     </div>
                 </div>

From 2cff8edb591e2c7b20a0a7ab2bc1173888a0d389 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 5 Dec 2018 07:15:49 +0200
Subject: [PATCH 12/19] Sorting by name is useless

---
 client/src/dev/serveremu.js                | 4 ----
 client/src/ui/components/bd/ThemesView.vue | 3 +--
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/client/src/dev/serveremu.js b/client/src/dev/serveremu.js
index 0c1bd36a..58b1e63a 100644
--- a/client/src/dev/serveremu.js
+++ b/client/src/dev/serveremu.js
@@ -19,10 +19,6 @@ export default class ServerEmu {
 
         if (args.sort) {
             switch (args.sort) {
-                case 'name':
-                    if (args.ascending) docs = docs.sort((docA, docB) => docA.name.toUpperCase() < docB.name.toUpperCase());
-                    else docs = docs.sort((docA, docB) => docA.name.toUpperCase() > docB.name.toUpperCase());
-                    break;
                 case 'updated':
                     if (args.ascending) docs = docs.sort((docA, docB) => new Date(docA.updated).getTime() - new Date(docB.updated).getTime());
                     else docs = docs.sort((docA, docB) => new Date(docB.updated).getTime() - new Date(docA.updated).getTime());
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index dda586dd..1c1c87c8 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -40,7 +40,6 @@
                     </div>
                     <div class="bd-flex bd-flexRow" v-if="onlineThemes && onlineThemes.docs && onlineThemes.docs.length">
                         <div class="bd-searchSort bd-flex bd-flexGrow">
-                            <div class="bd-sort" @click="sortBy('name')" :class="{'bd-active': onlineThemes.filters.sort === 'name', 'bd-flipY': onlineThemes.filters.ascending}">Name<MiChevronDown v-if="onlineThemes.filters.sort === 'name'" size="18" /></div>
                             <div class="bd-sort" @click="sortBy('updated')" :class="{'bd-active': onlineThemes.filters.sort === 'updated', 'bd-flipY': onlineThemes.filters.ascending}">Updated<MiChevronDown v-if="onlineThemes.filters.sort === 'updated'" size="18" /></div>
                             <div class="bd-sort" @click="sortBy('installs')" :class="{'bd-active': onlineThemes.filters.sort === 'installs', 'bd-flipY': onlineThemes.filters.ascending}">Installs<MiChevronDown v-if="onlineThemes.filters.sort === 'installs'" size="18" /></div>
                             <div class="bd-sort" @click="sortBy('users')" :class="{'bd-active': onlineThemes.filters.sort === 'users', 'bd-flipY': onlineThemes.filters.ascending}">Users<MiChevronDown v-if="onlineThemes.filters.sort === 'users'" size="18" /></div>
@@ -80,7 +79,7 @@
                     docs: [],
                     filters: {
                         sterm: '',
-                        sort: 'name',
+                        sort: 'installs',
                         ascending: false
                     },
                     pagination: {

From 95447dd3f09938ca50886bad8780558ca9756607 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 5 Dec 2018 08:07:18 +0200
Subject: [PATCH 13/19] Array for sort buttons

---
 client/src/styles/partials/bdsettings/contentview.scss |  1 +
 client/src/ui/components/bd/ThemesView.vue             | 10 ++++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/client/src/styles/partials/bdsettings/contentview.scss b/client/src/styles/partials/bdsettings/contentview.scss
index 926b853c..9f5a084f 100644
--- a/client/src/styles/partials/bdsettings/contentview.scss
+++ b/client/src/styles/partials/bdsettings/contentview.scss
@@ -53,6 +53,7 @@
                     height: 14px;
                     cursor: pointer;
                     transition: color .2s ease-in-out;
+                    font-weight: 700;
 
                     &:hover {
                         color: #fff;
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 1c1c87c8..5728f8fb 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -40,10 +40,11 @@
                     </div>
                     <div class="bd-flex bd-flexRow" v-if="onlineThemes && onlineThemes.docs && onlineThemes.docs.length">
                         <div class="bd-searchSort bd-flex bd-flexGrow">
-                            <div class="bd-sort" @click="sortBy('updated')" :class="{'bd-active': onlineThemes.filters.sort === 'updated', 'bd-flipY': onlineThemes.filters.ascending}">Updated<MiChevronDown v-if="onlineThemes.filters.sort === 'updated'" size="18" /></div>
-                            <div class="bd-sort" @click="sortBy('installs')" :class="{'bd-active': onlineThemes.filters.sort === 'installs', 'bd-flipY': onlineThemes.filters.ascending}">Installs<MiChevronDown v-if="onlineThemes.filters.sort === 'installs'" size="18" /></div>
-                            <div class="bd-sort" @click="sortBy('users')" :class="{'bd-active': onlineThemes.filters.sort === 'users', 'bd-flipY': onlineThemes.filters.ascending}">Users<MiChevronDown v-if="onlineThemes.filters.sort === 'users'" size="18" /></div>
-                            <div class="bd-sort" @click="sortBy('rating')" :class="{'bd-active': onlineThemes.filters.sort === 'rating', 'bd-flipY': onlineThemes.filters.ascending}">Rating<MiChevronDown v-if="onlineThemes.filters.sort === 'rating'" size="18" /></div>
+                            <div v-for="btn in sortBtns"
+                                 class="bd-sort"
+                                 :class="{'bd-active': onlineThemes.filters.sort === btn.toLowerCase(), 'bd-flipY': onlineThemes.filters.ascending}"
+                                 @click="sortBy(btn.toLowerCase())">{{btn}}<MiChevronDown v-if="onlineThemes.filters.sort === btn.toLowerCase()" size="18" />
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -73,6 +74,7 @@
         data() {
             return {
                 ThemeManager,
+                sortBtns: ['Updated', 'Installs', 'Users', 'Rating'],
                 local: true,
                 localThemes: ThemeManager.localThemes,
                 onlineThemes: {

From 784a14f8536be7f0d3264b45d90f685f6150f61a Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 5 Dec 2018 08:08:52 +0200
Subject: [PATCH 14/19] More neutral red

---
 client/src/styles/partials/bdsettings/remotecard.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/styles/partials/bdsettings/remotecard.scss b/client/src/styles/partials/bdsettings/remotecard.scss
index c50759be..6aebfd15 100644
--- a/client/src/styles/partials/bdsettings/remotecard.scss
+++ b/client/src/styles/partials/bdsettings/remotecard.scss
@@ -15,7 +15,7 @@
     }
 
     .bd-remoteCardLikes {
-        color: #f00;
+        color: $colerr;
         font-size: 12px;
         font-weight: 600;
     }

From 497ab62ee6ddb10182fa524ce4680a2a35080f4b Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 5 Dec 2018 08:09:15 +0200
Subject: [PATCH 15/19] Remove hover scaling

---
 client/src/styles/partials/bdsettings/remotecard.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/client/src/styles/partials/bdsettings/remotecard.scss b/client/src/styles/partials/bdsettings/remotecard.scss
index 6aebfd15..8a18b5d2 100644
--- a/client/src/styles/partials/bdsettings/remotecard.scss
+++ b/client/src/styles/partials/bdsettings/remotecard.scss
@@ -5,10 +5,6 @@
     border-radius: 0;
     border-bottom: 1px solid rgba(114, 118, 126, .3);
 
-    &:hover {
-        transform: scale(1.005);
-    }
-
     .bd-remoteCardTitle {
         color: #b9bbbe;
         font-weight: 700;

From 93f536bf217959f97695a261e20659e0d4e7d154 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 5 Dec 2018 08:26:01 +0200
Subject: [PATCH 16/19] Make tags clickable

---
 .../styles/partials/bdsettings/remotecard.scss    | 15 +++++++++++++--
 client/src/ui/components/bd/RemoteCard.vue        |  8 ++++++--
 client/src/ui/components/bd/ThemesView.vue        |  9 +++++++--
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/client/src/styles/partials/bdsettings/remotecard.scss b/client/src/styles/partials/bdsettings/remotecard.scss
index 8a18b5d2..7c62e121 100644
--- a/client/src/styles/partials/bdsettings/remotecard.scss
+++ b/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 {
diff --git a/client/src/ui/components/bd/RemoteCard.vue b/client/src/ui/components/bd/RemoteCard.vue
index ce17ce29..46fd9c19 100644
--- a/client/src/ui/components/bd/RemoteCard.vue
+++ b/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 {}
         },
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 5728f8fb..82e73919 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/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();
             }
         }
     }

From ea0dc0c6f1a7c2448f6075b07a943f49e1f2adee Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 5 Dec 2018 10:58:43 +0200
Subject: [PATCH 17/19] Do the same for plugins

---
 client/src/dev/serveremu.js                 |  92 ++++++++++++++++++
 client/src/modules/bdwebapi.js              |  10 ++
 client/src/ui/components/bd/PluginsView.vue | 102 ++++++++++++++++----
 client/src/ui/components/bd/RemoteCard.vue  |   4 +-
 client/src/ui/components/bd/ThemesView.vue  |   1 -
 5 files changed, 189 insertions(+), 20 deletions(-)

diff --git a/client/src/dev/serveremu.js b/client/src/dev/serveremu.js
index 58b1e63a..fb71edfd 100644
--- a/client/src/dev/serveremu.js
+++ b/client/src/dev/serveremu.js
@@ -65,6 +65,69 @@ export default class ServerEmu {
         }
     }
 
+    static async plugins(args) {
+        if (!this._plugins) this._plugins = this.generatePlugins();
+
+        await new Promise(r => setTimeout(r, Math.random() * 3000));
+
+        let docs = [];
+
+        if (args && args.sterm) {
+            const { sterm } = args;
+            const reg = new RegExp(sterm, 'gi');
+            docs = this._plugins.filter(doc => doc.tags.includes(sterm) || reg.exec(doc.name) || reg.exec(doc.description));
+        } else {
+            docs = this._plugins;
+        }
+
+        if (args.sort) {
+            switch (args.sort) {
+                case 'updated':
+                    if (args.ascending) docs = docs.sort((docA, docB) => new Date(docA.updated).getTime() - new Date(docB.updated).getTime());
+                    else docs = docs.sort((docA, docB) => new Date(docB.updated).getTime() - new Date(docA.updated).getTime());
+                    break;
+                case 'installs':
+                    if (args.ascending) docs = docs.sort((docA, docB) => docA.installs - docB.installs);
+                    else docs = docs.sort((docA, docB) => docB.installs - docA.installs);
+                    break;
+                case 'users':
+                    if (args.ascending) docs = docs.sort((docA, docB) => docA.activeUsers - docB.activeUsers);
+                    else docs = docs.sort((docA, docB) => docB.activeUsers - docA.activeUsers);
+                    break;
+                case 'rating':
+                    if (args.ascending) docs = docs.sort((docA, docB) => docA.rating - docB.rating);
+                    else docs = docs.sort((docA, docB) => docB.rating - docA.rating);
+                    break;
+            }
+        }
+
+        const total = docs.length;
+        const pages = Math.ceil(total / 9);
+
+        let page = 1;
+        if (args && args.page) {
+            page = args.page;
+            docs = docs.slice((page - 1) * 9, page * 9);
+        } else {
+            docs = docs.slice(0, 9);
+        }
+
+        return {
+            docs,
+            filters: {
+                sterm: args.sterm || '',
+                ascending: args.ascending || false,
+                sort: args.sort || 'name'
+            },
+            pagination: {
+                total,
+                pages,
+                limit: 9,
+                page
+            }
+        }
+    }
+
     static generateThemes() {
         const docs = [];
         const count = Math.floor(Math.random() * 50 + 30);
@@ -94,6 +157,35 @@ export default class ServerEmu {
         return docs;
     }
 
+    static generatePlugins() {
+        const docs = [];
+        const count = Math.floor(Math.random() * 50 + 30);
+
+        for (let i = 0; i < count; i++) {
+            const id = `plugin${i}-${this.randomId()}`;
+            const name = `Dummy Plugin ${i}`;
+            const tags = dummyTags.sort(() => .5 - Math.random()).slice(0, 3);
+
+            docs.push({
+                id,
+                name,
+                tags,
+                installs: Math.floor(Math.random() * 5000) + 5000,
+                updated: this.randomTimestamp(),
+                rating: Math.floor(Math.random() * 500) + 500,
+                activeUsers: Math.floor(Math.random() * 1000) + 1000,
+                rated: Math.random() > .5,
+                version: this.randomVersion(),
+                repository: this.dummyRepo,
+                files: this.dummyFiles,
+                author: this.dummyAuthor,
+                description: ''
+            });
+        }
+
+        return docs;
+    }
+
     static get dummyRepo() {
         return {
             name: 'ExampleRepository',
diff --git a/client/src/modules/bdwebapi.js b/client/src/modules/bdwebapi.js
index 926b2cb6..9274afb7 100644
--- a/client/src/modules/bdwebapi.js
+++ b/client/src/modules/bdwebapi.js
@@ -29,6 +29,12 @@ export default class BdWebApi {
         };
     }
 
+    static get plugins() {
+        return {
+            get: this.getPlugins
+        };
+    }
+
     static get users() {
         return {
             get: this.getUsers
@@ -54,6 +60,10 @@ export default class BdWebApi {
         */
     }
 
+    static getPlugins(args) {
+        return ServerEmu.plugins(args);
+    }
+
     static getUsers(args) {
         if (!args) return request.get(ENDPOINTS.users);
         const { id } = args;
diff --git a/client/src/ui/components/bd/PluginsView.vue b/client/src/ui/components/bd/PluginsView.vue
index 16226dbb..92758bc8 100644
--- a/client/src/ui/components/bd/PluginsView.vue
+++ b/client/src/ui/components/bd/PluginsView.vue
@@ -28,18 +28,31 @@
                 </ScrollerWrap>
             </div>
             <div v-else class="bd-onlinePh">
-                <div class="bd-onlinePhHeader">
-                    <div class="bd-fancySearch" :class="{'bd-disabled': loadingOnline, 'bd-active': loadingOnline || (onlinePlugins && onlinePlugins.docs)}">
-                        <input type="text" class="bd-textInput" placeholder="Search" @keydown.enter="searchInput" @keyup.stop />
+                <div class="bd-onlinePhHeader bd-flexCol">
+                    <div class="bd-flex bd-flexRow">
+                        <div v-if="loadingOnline" class="bd-spinnerContainer">
+                            <div class="bd-spinner7" />
+                        </div>
+                        <div class="bd-searchHint">{{searchHint}}</div>
+                        <div class="bd-fancySearch" :class="{'bd-disabled': loadingOnline, 'bd-active': loadingOnline || (onlinePlugins && onlinePlugins.docs)}">
+                            <input type="text" class="bd-textInput" placeholder="Search" @keydown.enter="searchInput" @keyup.stop :value="onlinePlugins.filters.sterm" />
+                        </div>
                     </div>
-                    <div v-if="loadingOnline" class="bd-spinnerContainer">
-                        <div class="bd-spinner7" />
+                    <div class="bd-flex bd-flexRow" v-if="onlinePlugins && onlinePlugins.docs && onlinePlugins.docs.length">
+                        <div class="bd-searchSort bd-flex bd-flexGrow">
+                            <div v-for="btn in sortBtns"
+                                 class="bd-sort"
+                                 :class="{'bd-active': onlinePlugins.filters.sort === btn.toLowerCase(), 'bd-flipY': onlinePlugins.filters.ascending}"
+                                 @click="sortBy(btn.toLowerCase())">
+                                {{btn}}<MiChevronDown v-if="onlinePlugins.filters.sort === btn.toLowerCase()" size="18" />
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <ScrollerWrap class="bd-onlinePhBody" v-if="!loadingOnline && onlinePlugins" :scrollend="scrollend">
-                    <RemoteCard v-if="onlinePlugins && onlinePlugins.docs" v-for="plugin in onlinePlugins.docs" :key="plugin.id" :item="plugin" />
-                    <div v-if="loadingMore" class="bd-spinnerContainer">
-                        <div class="bd-spinner7" />
+                    <RemoteCard v-if="onlinePlugins && onlinePlugins.docs" v-for="plugin in onlinePlugins.docs" :key="onlinePlugins.id" :item="plugin" :tagClicked="searchByTag" />
+                    <div class="bd-spinnerContainer">
+                        <div v-if="loadingMore" class="bd-spinner7" />
                     </div>
                 </ScrollerWrap>
             </div>
@@ -49,28 +62,45 @@
 
 <script>
     // Imports
-    import { PluginManager } from 'modules';
+    import { PluginManager, BdWebApi } from 'modules';
     import { Modals } from 'ui';
     import { ClientLogger as Logger } from 'common';
-    import { MiRefresh, ScrollerWrap } from '../common';
+    import { MiRefresh, ScrollerWrap, MiChevronDown } from '../common';
     import SettingsWrapper from './SettingsWrapper.vue';
     import PluginCard from './PluginCard.vue';
+    import RemoteCard from './RemoteCard.vue';
     import RefreshBtn from '../common/RefreshBtn.vue';
 
     export default {
         data() {
             return {
                 PluginManager,
+                sortBtns: ['Updated', 'Installs', 'Users', 'Rating'],
                 local: true,
                 localPlugins: PluginManager.localPlugins,
-                onlinePlugins: null,
+                onlinePlugins: {
+                    docs: [],
+                    filters: {
+                        sterm: '',
+                        sort: 'installs',
+                        ascending: false
+                    },
+                    pagination: {
+                        total: 0,
+                        pages: 0,
+                        limit: 9,
+                        page: 1
+                    }
+                },
                 loadingOnline: false,
-                loadingMore: false
+                loadingMore: false,
+                searchHint: ''
             };
         },
         components: {
-            SettingsWrapper, PluginCard,
-            MiRefresh, ScrollerWrap,
+            SettingsWrapper, PluginCard, RemoteCard,
+            MiRefresh, MiChevronDown,
+            ScrollerWrap,
             RefreshBtn
         },
         methods: {
@@ -84,7 +114,19 @@
                 await this.PluginManager.refreshPlugins();
             },
             async refreshOnline() {
-                // TODO
+                this.searchHint = '';
+                if (this.loadingOnline || this.loadingMore) return;
+                this.loadingOnline = true;
+                try {
+                    const getPlugins = await BdWebApi.plugins.get(this.onlinePlugins.filters);
+                    this.onlinePlugins = getPlugins;
+                    if (!this.onlinePlugins.docs) return;
+                    this.searchHint = `${this.onlinePlugins.pagination.total} Results`;
+                } catch (err) {
+                    Logger.err('PluginsView', err);
+                } finally {
+                    this.loadingOnline = false;
+                }
             },
             async togglePlugin(plugin) {
                 // TODO: display error if plugin fails to start/stop
@@ -116,21 +158,45 @@
             },
             searchInput(e) {
                 if (this.loadingOnline || this.loadingMore) return;
+                this.onlinePlugins.filters.sterm = e.target.value;
                 this.refreshOnline();
             },
             async scrollend(e) {
-                // TODO
-                return;
+                if (this.onlinePlugins.pagination.page >= this.onlinePlugins.pagination.pages) return;
                 if (this.loadingOnline || this.loadingMore) return;
                 this.loadingMore = true;
+
                 try {
-                    const getPlugins = await BdWebApi.plugins.get();
+                    const getPlugins = await BdWebApi.plugins.get({
+                        sterm: this.onlinePlugins.filters.sterm,
+                        page: this.onlinePlugins.pagination.page + 1,
+                        sort: this.onlinePlugins.filters.sort,
+                        ascending: this.onlinePlugins.filters.ascending
+                    });
+
                     this.onlinePlugins.docs = [...this.onlinePlugins.docs, ...getPlugins.docs];
+                    this.onlinePlugins.filters = getPlugins.filters;
+                    this.onlinePlugins.pagination = getPlugins.pagination;
                 } catch (err) {
                     Logger.err('PluginsView', err);
                 } finally {
                     this.loadingMore = false;
                 }
+            },
+            async sortBy(by) {
+                if (this.loadingOnline || this.loadingMore) return;
+                if (this.onlinePlugins.filters.sort === by) {
+                    this.onlinePlugins.filters.ascending = !this.onlinePlugins.filters.ascending;
+                } else {
+                    this.onlinePlugins.filters.sort = by;
+                    this.onlinePlugins.filters.ascending = false;
+                }
+                this.refreshOnline();
+            },
+            async searchByTag(tag) {
+                if (this.loadingOnline || this.loadingMore) return;
+                this.onlinePlugins.filters.sterm = tag;
+                this.refreshOnline();
             }
         }
     }
diff --git a/client/src/ui/components/bd/RemoteCard.vue b/client/src/ui/components/bd/RemoteCard.vue
index 46fd9c19..a65ab609 100644
--- a/client/src/ui/components/bd/RemoteCard.vue
+++ b/client/src/ui/components/bd/RemoteCard.vue
@@ -50,7 +50,9 @@
         },
         methods: {
             resolveThumb() {
-                return `${this.item.repository.rawUri}/${this.item.files.previews[0].thumb}`;
+                // TODO
+                return '';
+                // return `${this.item.repository.rawUri}/${this.item.files.previews[0].thumb}`;
             },
             fromNow() {
                 const { Moment } = Reflection.modules;
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 82e73919..1083cee1 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -108,7 +108,6 @@
             },
             async showOnline() {
                 this.local = false;
-                if (this.loadingOnline || this.onlineThemes) return;
             },
             async refreshLocal() {
                 await this.ThemeManager.refreshThemes();

From 4f10f3858135a39fd48719590e35cae875ce1ad8 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Thu, 6 Dec 2018 10:02:07 +0200
Subject: [PATCH 18/19] Remote tests

---
 client/src/dev/serveremu.js                | 18 ++++++++++++++----
 client/src/index.js                        |  4 ++--
 client/src/modules/packageinstaller.js     |  6 ++++--
 client/src/ui/components/bd/RemoteCard.vue |  7 +++++--
 4 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/client/src/dev/serveremu.js b/client/src/dev/serveremu.js
index fb71edfd..5e8b5eb2 100644
--- a/client/src/dev/serveremu.js
+++ b/client/src/dev/serveremu.js
@@ -147,7 +147,7 @@ export default class ServerEmu {
                 activeUsers: Math.floor(Math.random() * 1000) + 1000,
                 rated: Math.random() > .5,
                 version: this.randomVersion(),
-                repository: this.dummyRepo,
+                repository: this.dummyThemeRepo,
                 files: this.dummyFiles,
                 author: this.dummyAuthor,
                 description: ''
@@ -176,7 +176,7 @@ export default class ServerEmu {
                 activeUsers: Math.floor(Math.random() * 1000) + 1000,
                 rated: Math.random() > .5,
                 version: this.randomVersion(),
-                repository: this.dummyRepo,
+                repository: this.dummyPluginRepo,
                 files: this.dummyFiles,
                 author: this.dummyAuthor,
                 description: ''
@@ -186,11 +186,21 @@ export default class ServerEmu {
         return docs;
     }
 
-    static get dummyRepo() {
+    static get dummyThemeRepo() {
         return {
             name: 'ExampleRepository',
             baseUri: 'https://github.com/Jiiks/ExampleRepository',
-            rawUri: 'https://github.com/Jiiks/ExampleRepository/raw/master'
+            rawUri: 'https://github.com/Jiiks/ExampleRepository/raw/master',
+            assetUri: 'https://api.github.com/repos/Jiiks/ExampleRepository/releases/assets/10023264'
+        }
+    }
+
+    static get dummyPluginRepo() {
+        return {
+            name: 'ExampleRepository',
+            baseUri: 'https://github.com/Jiiks/ExampleRepository',
+            rawUri: 'https://github.com/Jiiks/ExampleRepository/raw/master',
+            assetUri: 'https://api.github.com/repos/Jiiks/ExampleRepository/releases/assets/10023265'
         }
     }
 
diff --git a/client/src/index.js b/client/src/index.js
index 7cfe6483..c64134a0 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -10,7 +10,7 @@
 
 import { DOM, BdUI, BdMenu, Modals, Toasts, Notifications, BdContextMenu, DiscordContextMenu } from 'ui';
 import BdCss from './styles/index.scss';
-import { Events, CssEditor, Globals, Settings, Database, Updater, ModuleManager, PluginManager, ThemeManager, ExtModuleManager, Vendor, Patcher, MonkeyPatch, ReactComponents, ReactHelpers, ReactAutoPatcher, DiscordApi, BdWebApi, Connectivity, Cache, Reflection } from 'modules';
+import { Events, CssEditor, Globals, Settings, Database, Updater, ModuleManager, PluginManager, ThemeManager, ExtModuleManager, Vendor, Patcher, MonkeyPatch, ReactComponents, ReactHelpers, ReactAutoPatcher, DiscordApi, BdWebApi, Connectivity, Cache, Reflection, PackageInstaller } from 'modules';
 import { ClientLogger as Logger, ClientIPC, Utils } from 'common';
 import { BuiltinManager, EmoteModule, ReactDevtoolsModule, VueDevtoolsModule, TrackingProtection, E2EE } from 'builtin';
 import electron from 'electron';
@@ -31,7 +31,7 @@ class BetterDiscord {
             DOM, BdUI, BdMenu, Modals, Reflection, Toasts, Notifications, BdContextMenu, DiscordContextMenu,
 
             Events, CssEditor, Globals, Settings, Database, Updater,
-            ModuleManager, PluginManager, ThemeManager, ExtModuleManager,
+            ModuleManager, PluginManager, ThemeManager, ExtModuleManager, PackageInstaller,
             Vendor,
 
             Patcher, MonkeyPatch, ReactComponents, ReactHelpers, ReactAutoPatcher, DiscordApi,
diff --git a/client/src/modules/packageinstaller.js b/client/src/modules/packageinstaller.js
index f870c4d8..9a19e7a3 100644
--- a/client/src/modules/packageinstaller.js
+++ b/client/src/modules/packageinstaller.js
@@ -103,7 +103,7 @@ export default class PackageInstaller {
     }
 
     /**
-     * Install package from remote location. Only github/bdapi is supoorted.
+     * Install package from remote location. Only github/bdapi is supported.
      * @param {String} remoteLocation Remote resource location
      */
     static async installRemotePackage(remoteLocation) {
@@ -113,6 +113,7 @@ export default class PackageInstaller {
 
             const options = {
                 uri: remoteLocation,
+                encoding: null,
                 headers: {
                     'User-Agent': 'BetterDiscordClient',
                     'Accept': 'application/octet-stream'
@@ -122,9 +123,10 @@ export default class PackageInstaller {
             const response = await request.get(options);
             const outputPath = path.join(Globals.getPath('tmp'), Security.hash('sha256', response, 'hex'));
             fs.writeFileSync(outputPath, response);
+            console.log('response', response);
+            console.log('output', outputPath);
 
             await this.dragAndDropHandler(outputPath);
-
             rimraf(outputPath, err => {
                 if (err) console.log(err);
             });
diff --git a/client/src/ui/components/bd/RemoteCard.vue b/client/src/ui/components/bd/RemoteCard.vue
index a65ab609..bd000e21 100644
--- a/client/src/ui/components/bd/RemoteCard.vue
+++ b/client/src/ui/components/bd/RemoteCard.vue
@@ -31,7 +31,7 @@
                 </div>
             </div>
             <div class="bd-buttonGroup">
-                <div class="bd-button">Install</div>
+                <div class="bd-button" @click="install">Install</div>
                 <div class="bd-button">Preview</div>
                 <div class="bd-button" @click="openSourceUrl">Source</div>
             </div>
@@ -40,7 +40,7 @@
 </template>
 
 <script>
-    import { Reflection } from 'modules';
+    import { Reflection, PackageInstaller } from 'modules';
     import { shell } from 'electron';
 
     export default {
@@ -62,6 +62,9 @@
                 if (!this.item.repository || !this.item.repository.baseUri) return;
                 if (Object.assign(document.createElement('a'), { href: this.item.repository.baseUri }).hostname !== 'github.com') return;
                 shell.openExternal(this.item.repository.baseUri);
+            },
+            async install() {
+                await PackageInstaller.installRemotePackage(this.item.repository.assetUri);
             }
         }
     }

From a2f48dd007ea7cce0c8e8685f864fe6ea9220957 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Thu, 6 Dec 2018 11:23:31 +0200
Subject: [PATCH 19/19] lint

---
 client/src/dev/serveremu.js    | 66 +++++++++++++++++-----------------
 client/src/modules/bdwebapi.js |  2 +-
 2 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/client/src/dev/serveremu.js b/client/src/dev/serveremu.js
index 5e8b5eb2..0c13ff7e 100644
--- a/client/src/dev/serveremu.js
+++ b/client/src/dev/serveremu.js
@@ -8,7 +8,7 @@ export default class ServerEmu {
         await new Promise(r => setTimeout(r, Math.random() * 3000));
 
         let docs = [];
-        
+
         if (args && args.sterm) {
             const { sterm } = args;
             const reg = new RegExp(sterm, 'gi');
@@ -19,22 +19,22 @@ export default class ServerEmu {
 
         if (args.sort) {
             switch (args.sort) {
-                case 'updated':
-                    if (args.ascending) docs = docs.sort((docA, docB) => new Date(docA.updated).getTime() - new Date(docB.updated).getTime());
-                    else docs = docs.sort((docA, docB) => new Date(docB.updated).getTime() - new Date(docA.updated).getTime());
-                    break;
-                case 'installs':
-                    if (args.ascending) docs = docs.sort((docA, docB) => docA.installs - docB.installs);
-                    else docs = docs.sort((docA, docB) => docB.installs - docA.installs);
-                    break;
-                case 'users':
-                    if (args.ascending) docs = docs.sort((docA, docB) => docA.activeUsers - docB.activeUsers);
-                    else docs = docs.sort((docA, docB) => docB.activeUsers - docA.activeUsers);
-                    break;
-                case 'rating':
-                    if (args.ascending) docs = docs.sort((docA, docB) => docA.rating - docB.rating);
-                    else docs = docs.sort((docA, docB) => docB.rating - docA.rating);
-                    break;
+            case 'updated':
+                if (args.ascending) docs = docs.sort((docA, docB) => new Date(docA.updated).getTime() - new Date(docB.updated).getTime());
+                else docs = docs.sort((docA, docB) => new Date(docB.updated).getTime() - new Date(docA.updated).getTime());
+                break;
+            case 'installs':
+                if (args.ascending) docs = docs.sort((docA, docB) => docA.installs - docB.installs);
+                else docs = docs.sort((docA, docB) => docB.installs - docA.installs);
+                break;
+            case 'users':
+                if (args.ascending) docs = docs.sort((docA, docB) => docA.activeUsers - docB.activeUsers);
+                else docs = docs.sort((docA, docB) => docB.activeUsers - docA.activeUsers);
+                break;
+            case 'rating':
+                if (args.ascending) docs = docs.sort((docA, docB) => docA.rating - docB.rating);
+                else docs = docs.sort((docA, docB) => docB.rating - docA.rating);
+                break;
             }
         }
 
@@ -82,22 +82,22 @@ export default class ServerEmu {
 
         if (args.sort) {
             switch (args.sort) {
-                case 'updated':
-                    if (args.ascending) docs = docs.sort((docA, docB) => new Date(docA.updated).getTime() - new Date(docB.updated).getTime());
-                    else docs = docs.sort((docA, docB) => new Date(docB.updated).getTime() - new Date(docA.updated).getTime());
-                    break;
-                case 'installs':
-                    if (args.ascending) docs = docs.sort((docA, docB) => docA.installs - docB.installs);
-                    else docs = docs.sort((docA, docB) => docB.installs - docA.installs);
-                    break;
-                case 'users':
-                    if (args.ascending) docs = docs.sort((docA, docB) => docA.activeUsers - docB.activeUsers);
-                    else docs = docs.sort((docA, docB) => docB.activeUsers - docA.activeUsers);
-                    break;
-                case 'rating':
-                    if (args.ascending) docs = docs.sort((docA, docB) => docA.rating - docB.rating);
-                    else docs = docs.sort((docA, docB) => docB.rating - docA.rating);
-                    break;
+            case 'updated':
+                if (args.ascending) docs = docs.sort((docA, docB) => new Date(docA.updated).getTime() - new Date(docB.updated).getTime());
+                else docs = docs.sort((docA, docB) => new Date(docB.updated).getTime() - new Date(docA.updated).getTime());
+                break;
+            case 'installs':
+                if (args.ascending) docs = docs.sort((docA, docB) => docA.installs - docB.installs);
+                else docs = docs.sort((docA, docB) => docB.installs - docA.installs);
+                break;
+            case 'users':
+                if (args.ascending) docs = docs.sort((docA, docB) => docA.activeUsers - docB.activeUsers);
+                else docs = docs.sort((docA, docB) => docB.activeUsers - docA.activeUsers);
+                break;
+            case 'rating':
+                if (args.ascending) docs = docs.sort((docA, docB) => docA.rating - docB.rating);
+                else docs = docs.sort((docA, docB) => docB.rating - docA.rating);
+                break;
             }
         }
 
diff --git a/client/src/modules/bdwebapi.js b/client/src/modules/bdwebapi.js
index 9274afb7..bd9d325a 100644
--- a/client/src/modules/bdwebapi.js
+++ b/client/src/modules/bdwebapi.js
@@ -50,7 +50,7 @@ export default class BdWebApi {
 
     static getThemes(args) {
         return ServerEmu.themes(args);
-       //  return dummyThemes();
+        //  return dummyThemes();
         /*
         if (!args) return request.get(ENDPOINTS.themes);
         const { id } = args;