From 4b8a905d2a12aad8b41bd15f8a1d85990f67b765 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Mon, 26 Nov 2018 09:42:52 +0200
Subject: [PATCH 01/21] Dummy theme generation

---
 client/src/modules/bdwebapi.js             | 40 ++++++++++++++++++++++
 client/src/ui/components/bd/ThemesView.vue | 32 ++---------------
 2 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/client/src/modules/bdwebapi.js b/client/src/modules/bdwebapi.js
index b077cc0f..6ed67a92 100644
--- a/client/src/modules/bdwebapi.js
+++ b/client/src/modules/bdwebapi.js
@@ -19,6 +19,45 @@ 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';
+
+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}`,
+            name: `Dummy ${i}`,
+            tags: dummyTags,
+            installs: Math.floor(Math.random() * 10000),
+            updated: '2018-07-21T14:51:32.057Z',
+            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 };
+}
+
 export default class BdWebApi {
 
     static get themes() {
@@ -41,6 +80,7 @@ export default class BdWebApi {
     }
 
     static getThemes(args) {
+        return dummyThemes();
         if (!args) return request.get(ENDPOINTS.themes);
         const { id } = args;
         if (id) return request.get(ENDPOINTS.theme(id));
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 9444f86e..23553152 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -76,36 +76,8 @@
             async refreshOnline() {
                 this.loadingOnline = true;
                 try {
-                    // const getThemes = await BdWebApi.themes.get();
-                    // this.onlineThemes = JSON.parse(getThemes);
-                    const dummies = [];
-                    for (let i = 0; i < 10; i++) {
-                        dummies.push({
-                            id: `theme${i}`,
-                            name: `Dummy ${i}`,
-                            tags: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5'],
-                            installs: Math.floor(Math.random() * 10000),
-                            updated: '2018-07-21T14:51:32.057Z',
-                            rating: Math.floor(Math.random() * 1000),
-                            activeUsers: Math.floor(Math.random() * 1000),
-                            rated: Math.random() > .5,
-                            version: '1.0.0',
-                            repository: {
-                                name: 'ExampleRepository',
-                                baseUri: 'https://github.com/Jiiks/ExampleRepository',
-                                rawUri: 'https://github.com/Jiiks/ExampleRepository/raw/master'
-                            },
-                            files: {
-                                readme: 'Example/readme.md',
-                                previews: [{
-                                    large: 'Example/preview1-big.png',
-                                    thumb: 'Example/preview1-small.png'
-                                }]
-                            },
-                            author: 'Jiiks'
-                        });
-                    }
-                    this.onlineThemes = { docs: dummies };
+                    const getThemes = await BdWebApi.themes.get();
+                    this.onlineThemes = getThemes;
                 } catch (err) {
                     Logger.err('ThemesView', err);
                 } finally {

From 83a4e0a114d2a24b9d3ee2366548b7e39597c66d Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Mon, 26 Nov 2018 09:55:59 +0200
Subject: [PATCH 02/21] Use moment

---
 client/src/ui/components/bd/RemoteCard.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/ui/components/bd/RemoteCard.vue b/client/src/ui/components/bd/RemoteCard.vue
index 7ca0d425..3b87f344 100644
--- a/client/src/ui/components/bd/RemoteCard.vue
+++ b/client/src/ui/components/bd/RemoteCard.vue
@@ -20,7 +20,7 @@
                 <div class="bd-remoteCardInfoBox bd-flex bd-flexGrow bd-flexCol">
                     <div class="bd-remoteCardInfo">{{item.installs}} Installs</div>
                     <div class="bd-remoteCardInfo">{{item.activeUsers}} Active Users</div>
-                    <div class="bd-remoteCardInfo">Updated: Some time ago</div>
+                    <div class="bd-remoteCardInfo">Updated {{fromNow()}}</div>
                 </div>
             </div>
         </div>
@@ -36,6 +36,7 @@
 </template>
 
 <script>
+    import { Reflection } from 'modules';
     export default {
         props: ['item'],
         data() {
@@ -44,6 +45,10 @@
         methods: {
             resolveThumb() {
                 return `${this.item.repository.rawUri}/${this.item.files.previews[0].thumb}`;
+            },
+            fromNow() {
+                const { Moment } = Reflection.modules;
+                return Moment(this.item.updated).fromNow();
             }
         }
     }

From f01f4926eb55cd14635d4bdabb8e433bb98478c6 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Mon, 26 Nov 2018 10:00:57 +0200
Subject: [PATCH 03/21] Random timestamps

---
 client/src/modules/bdwebapi.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/modules/bdwebapi.js b/client/src/modules/bdwebapi.js
index 6ed67a92..0bb3e588 100644
--- a/client/src/modules/bdwebapi.js
+++ b/client/src/modules/bdwebapi.js
@@ -34,6 +34,7 @@ const dummyFiles = {
     }]
 };
 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
@@ -45,7 +46,7 @@ async function dummyThemes() {
             name: `Dummy ${i}`,
             tags: dummyTags,
             installs: Math.floor(Math.random() * 10000),
-            updated: '2018-07-21T14:51:32.057Z',
+            updated: dummyTimestamp(),
             rating: Math.floor(Math.random() * 1000),
             activeUsers: Math.floor(Math.random() * 1000),
             rated: Math.random() > .5,

From e8cfb840feebdf3f1ecff2569354c1c3c5521518 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Mon, 26 Nov 2018 10:56:35 +0200
Subject: [PATCH 04/21] Styling

---
 .../src/styles/partials/bdsettings/contentview.scss  |  2 +-
 client/src/styles/partials/generic/forms/text.scss   | 12 +++++++++---
 client/src/ui/components/bd/ThemesView.vue           |  9 +++++----
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/client/src/styles/partials/bdsettings/contentview.scss b/client/src/styles/partials/bdsettings/contentview.scss
index 86a45795..ec53b828 100644
--- a/client/src/styles/partials/bdsettings/contentview.scss
+++ b/client/src/styles/partials/bdsettings/contentview.scss
@@ -3,7 +3,7 @@
     .bd-onlinePh {
         display: flex;
         flex-direction: column;
-        margin: 10% 0;
+        margin: 10px 0;
 
         h3 {
             color: #fff;
diff --git a/client/src/styles/partials/generic/forms/text.scss b/client/src/styles/partials/generic/forms/text.scss
index 8b3d2650..d73dadd4 100644
--- a/client/src/styles/partials/generic/forms/text.scss
+++ b/client/src/styles/partials/generic/forms/text.scss
@@ -164,11 +164,11 @@
 .bd-fancySearch {
     display: flex;
     justify-content: flex-end;
-    transform: translateY(80px) translateX(-140px);
-    transition: all .5s ease-in-out;
+    // transform: translateY(80px) translateX(-140px);
+    // transition: all .5s ease-in-out;
 
     &::before {
-        content: 'Search by name, description or tag...';
+        // content: 'Search by name, description or tag...';
         color: #f6f6f7;
         position: relative;
         top: -20px;
@@ -184,6 +184,12 @@
         }
     }
 
+    &.bd-disabled {
+        .bd-textInput {
+            opacity: .8;
+        }
+    }
+
     .bd-textInput {
         padding: 10px;
         display: flex;
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 23553152..656e5588 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -26,8 +26,8 @@
                 <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-onlinePh">
-                <div class="bd-fancySearch" :class="{'bd-active': loadingOnline || (onlineThemes && onlineThemes.docs)}">
-                    <input type="text" class="bd-textInput" @keydown.enter="searchInput" @keyup.stop/>
+                <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/>
                 </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"/>
@@ -74,6 +74,7 @@
                 await this.ThemeManager.refreshThemes();
             },
             async refreshOnline() {
+                if (this.loadingOnline) return;
                 this.loadingOnline = true;
                 try {
                     const getThemes = await BdWebApi.themes.get();
@@ -112,8 +113,8 @@
                 });
             },
             searchInput(e) {
-                this.loadingOnline = true;
-                setTimeout(this.refreshOnline, 1000);
+                if (this.loadingOnline) return;
+                this.refreshOnline();
             }
         }
     }

From cfc197cdc09e3f00f204f684d9e22eb0f631dcbe Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Mon, 26 Nov 2018 11:08:27 +0200
Subject: [PATCH 05/21] add spinner

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

diff --git a/client/src/styles/partials/bdsettings/contentview.scss b/client/src/styles/partials/bdsettings/contentview.scss
index ec53b828..907b123c 100644
--- a/client/src/styles/partials/bdsettings/contentview.scss
+++ b/client/src/styles/partials/bdsettings/contentview.scss
@@ -5,6 +5,12 @@
         flex-direction: column;
         margin: 10px 0;
 
+        .bd-spinnerContainer {
+            display: flex;
+            justify-content: center;
+            padding: 50px 0;
+        }
+
         h3 {
             color: #fff;
             font-weight: 700;
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 656e5588..79532dc7 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -29,7 +29,9 @@
                 <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/>
                 </div>
-                <h2 v-if="loadingOnline">Loading</h2>
+                <div v-if="loadingOnline" class="bd-spinnerContainer">
+                    <div class="bd-spinner7"></div>
+                </div>
                 <RemoteCard v-else-if="onlineThemes && onlineThemes.docs" v-for="theme in onlineThemes.docs" :key="theme.id" :item="theme"/>
             </div>
         </div>

From d5d7709c9fa58ff5b29d4f44ac54b0b873462de0 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Mon, 26 Nov 2018 11:32:22 +0200
Subject: [PATCH 06/21] Scrollend event

---
 .../src/ui/components/bd/SettingsWrapper.vue  |  4 ++--
 client/src/ui/components/bd/ThemesView.vue    | 19 +++++++++++++------
 .../src/ui/components/common/ScrollerWrap.vue | 11 +++++++++--
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/client/src/ui/components/bd/SettingsWrapper.vue b/client/src/ui/components/bd/SettingsWrapper.vue
index 423cf134..4236e853 100644
--- a/client/src/ui/components/bd/SettingsWrapper.vue
+++ b/client/src/ui/components/bd/SettingsWrapper.vue
@@ -10,7 +10,7 @@
 
 <template>
     <div class="bd-settingswrap">
-        <ScrollerWrap>
+        <ScrollerWrap :scrollend="scrollend">
             <div class="bd-settingswrapHeader">
                 <span class="bd-settingswrapHeaderText">{{ headertext }}</span>
                 <slot name="header" />
@@ -27,7 +27,7 @@
     import { ScrollerWrap } from '../common';
 
     export default {
-        props: ['headertext'],
+        props: ['headertext', 'scrollend'],
         components: {
             ScrollerWrap
         }
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 79532dc7..2649125e 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -9,7 +9,7 @@
 */
 
 <template>
-    <SettingsWrapper headertext="Themes">
+    <SettingsWrapper headertext="Themes" :scrollend="scrollend">
         <div class="bd-tabbar" slot="header">
             <div class="bd-button" :class="{'bd-active': local}" @click="showLocal">
                 <h3>Installed</h3>
@@ -26,13 +26,17 @@
                 <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-onlinePh">
-                <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/>
+                <div class="bd-onlinePhHeader">
+                    <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 />
+                    </div>
+                    <div v-if="loadingOnline" class="bd-spinnerContainer">
+                        <div class="bd-spinner7"></div>
+                    </div>
                 </div>
-                <div v-if="loadingOnline" class="bd-spinnerContainer">
-                    <div class="bd-spinner7"></div>
+                <div class="bd-onlinePhBody" v-if="!loadingOnline && onlineThemes">
+                    <RemoteCard v-if="onlineThemes && onlineThemes.docs" v-for="theme in onlineThemes.docs" :key="theme.id" :item="theme" />
                 </div>
-                <RemoteCard v-else-if="onlineThemes && onlineThemes.docs" v-for="theme in onlineThemes.docs" :key="theme.id" :item="theme"/>
             </div>
         </div>
     </SettingsWrapper>
@@ -117,6 +121,9 @@
             searchInput(e) {
                 if (this.loadingOnline) return;
                 this.refreshOnline();
+            },
+            scrollend(e) {
+                console.log('scrollend');
             }
         }
     }
diff --git a/client/src/ui/components/common/ScrollerWrap.vue b/client/src/ui/components/common/ScrollerWrap.vue
index dc61f1dc..a031e635 100644
--- a/client/src/ui/components/common/ScrollerWrap.vue
+++ b/client/src/ui/components/common/ScrollerWrap.vue
@@ -10,7 +10,7 @@
 
 <template>
     <div class="bd-scrollerWrap" :class="{'bd-dark': dark}">
-        <div class="bd-scroller">
+        <div class="bd-scroller" @scroll="onscroll">
             <slot/>
         </div>
     </div>
@@ -18,6 +18,13 @@
 
 <script>
     export default {
-        props: ['dark']
+        props: ['dark', 'scrollend'],
+        methods: {
+            onscroll(e) {
+                if (!this.scrollend) return;
+                const { offsetHeight, scrollTop, scrollHeight } = e.target;
+                if (offsetHeight + scrollTop >= scrollHeight) this.scrollend(e);
+            }
+        }
     }
 </script>

From d5a82ab2b34c21ae0a8ff38c742619aa155dd721 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Mon, 26 Nov 2018 17:04:20 +0200
Subject: [PATCH 07/21] Load more spinner

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

diff --git a/client/src/styles/partials/bdsettings/contentview.scss b/client/src/styles/partials/bdsettings/contentview.scss
index 907b123c..ce03ab24 100644
--- a/client/src/styles/partials/bdsettings/contentview.scss
+++ b/client/src/styles/partials/bdsettings/contentview.scss
@@ -11,6 +11,12 @@
             padding: 50px 0;
         }
 
+        .bd-onlinePhBody {
+            .bd-spinnerContainer {
+                padding: 0;
+            }
+        }
+
         h3 {
             color: #fff;
             font-weight: 700;
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 2649125e..04600c02 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -31,11 +31,14 @@
                         <input type="text" class="bd-textInput" placeholder="Search" @keydown.enter="searchInput" @keyup.stop />
                     </div>
                     <div v-if="loadingOnline" class="bd-spinnerContainer">
-                        <div class="bd-spinner7"></div>
+                        <div class="bd-spinner7"/>
                     </div>
                 </div>
                 <div class="bd-onlinePhBody" v-if="!loadingOnline && onlineThemes">
                     <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>
                 </div>
             </div>
         </div>
@@ -60,7 +63,8 @@
                 local: true,
                 localThemes: ThemeManager.localThemes,
                 onlineThemes: null,
-                loadingOnline: false
+                loadingOnline: false,
+                loadingMore: false
             };
         },
         components: {

From 98bf4d21ac6b6990fd858ca397e376a68559e39c Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Mon, 26 Nov 2018 17:15:26 +0200
Subject: [PATCH 08/21] Load more on scroll

---
 client/src/modules/bdwebapi.js             |  2 +-
 client/src/ui/components/bd/ThemesView.vue | 17 +++++++++++++----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/client/src/modules/bdwebapi.js b/client/src/modules/bdwebapi.js
index 0bb3e588..2c38062f 100644
--- a/client/src/modules/bdwebapi.js
+++ b/client/src/modules/bdwebapi.js
@@ -42,7 +42,7 @@ async function dummyThemes() {
     const dummies = [];
     for (let i = 0; i < 10; i++) {
         dummies.push({
-            id: `theme${i}`,
+            id: `theme${i}${btoa(Math.random()).substring(3, 9)}`,
             name: `Dummy ${i}`,
             tags: dummyTags,
             installs: Math.floor(Math.random() * 10000),
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 04600c02..d921ebb2 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -84,7 +84,7 @@
                 await this.ThemeManager.refreshThemes();
             },
             async refreshOnline() {
-                if (this.loadingOnline) return;
+                if (this.loadingOnline || this.loadingMore) return;
                 this.loadingOnline = true;
                 try {
                     const getThemes = await BdWebApi.themes.get();
@@ -123,11 +123,20 @@
                 });
             },
             searchInput(e) {
-                if (this.loadingOnline) return;
+                if (this.loadingOnline || this.loadingMore) return;
                 this.refreshOnline();
             },
-            scrollend(e) {
-                console.log('scrollend');
+            async scrollend(e) {
+                if (this.loadingOnline || this.loadingMore) return;
+                this.loadingMore = true;
+                try {
+                    const getThemes = await BdWebApi.themes.get();
+                    this.onlineThemes.docs = [...this.onlineThemes.docs, ...getThemes.docs];
+                } catch (err) {
+                    Logger.err('ThemesView', err);
+                } finally {
+                    this.loadingMore = false;
+                }
             }
         }
     }

From a8f686eb61dbea8403e023bf5a37e27cab7d905e Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 28 Nov 2018 08:50:14 +0200
Subject: [PATCH 09/21] only scroll body

---
 .../src/styles/partials/bdsettings/contentview.scss | 11 +++++++++++
 .../src/styles/partials/bdsettings/remotecard.scss  |  3 +--
 .../styles/partials/sidebarview/settingswrap.scss   | 10 ++++++++--
 client/src/ui/components/bd/SettingsWrapper.vue     | 13 +++++++++++--
 client/src/ui/components/bd/ThemesView.vue          | 10 +++++-----
 5 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/client/src/styles/partials/bdsettings/contentview.scss b/client/src/styles/partials/bdsettings/contentview.scss
index ce03ab24..76224c57 100644
--- a/client/src/styles/partials/bdsettings/contentview.scss
+++ b/client/src/styles/partials/bdsettings/contentview.scss
@@ -11,10 +11,21 @@
             padding: 50px 0;
         }
 
+        .bd-onlinePhHeader {
+            padding: 0 20px 0 0;
+        }
+
         .bd-onlinePhBody {
+            margin-top: 10px;
+
             .bd-spinnerContainer {
                 padding: 0;
             }
+
+            .bd-scroller {
+                padding: 0 20px 0 0;
+            }
+
         }
 
         h3 {
diff --git a/client/src/styles/partials/bdsettings/remotecard.scss b/client/src/styles/partials/bdsettings/remotecard.scss
index 2a851cd8..7754a4f7 100644
--- a/client/src/styles/partials/bdsettings/remotecard.scss
+++ b/client/src/styles/partials/bdsettings/remotecard.scss
@@ -1,8 +1,7 @@
 .bd-remoteCard {
-    display: flex;
     flex-direction: column;
     margin-top: 10px;
-    padding: 10px 0;
+    padding: 10px;
     border-radius: 0;
     border-bottom: 1px solid rgba(114, 118, 126, .3);
 
diff --git a/client/src/styles/partials/sidebarview/settingswrap.scss b/client/src/styles/partials/sidebarview/settingswrap.scss
index 57bd0115..b7141d45 100644
--- a/client/src/styles/partials/sidebarview/settingswrap.scss
+++ b/client/src/styles/partials/sidebarview/settingswrap.scss
@@ -120,8 +120,14 @@
         }
 
         .bd-settingswrapContents {
-            padding: 0 20px;
-            margin-bottom: 84px;
+            padding: 0 0 0 20px;
+        }
+
+        .bd-scroller {
+            .bd-settingswrapContents {
+                margin-bottom: 84px;
+                padding: 0 20px;
+            }
         }
     }
 }
diff --git a/client/src/ui/components/bd/SettingsWrapper.vue b/client/src/ui/components/bd/SettingsWrapper.vue
index 4236e853..3728a942 100644
--- a/client/src/ui/components/bd/SettingsWrapper.vue
+++ b/client/src/ui/components/bd/SettingsWrapper.vue
@@ -10,7 +10,16 @@
 
 <template>
     <div class="bd-settingswrap">
-        <ScrollerWrap :scrollend="scrollend">
+        <div v-if="noscroller" class="bd-flex bd-flexCol">
+            <div class="bd-settingswrapHeader">
+                <span class="bd-settingswrapHeaderText">{{ headertext }}</span>
+                <slot name="header" />
+            </div>
+            <div class="bd-settingswrapContents bd-flex bd-flexGrow bd-flexCol">
+                <slot />
+            </div>
+        </div>
+        <ScrollerWrap v-else :scrollend="scrollend">
             <div class="bd-settingswrapHeader">
                 <span class="bd-settingswrapHeaderText">{{ headertext }}</span>
                 <slot name="header" />
@@ -27,7 +36,7 @@
     import { ScrollerWrap } from '../common';
 
     export default {
-        props: ['headertext', 'scrollend'],
+        props: ['headertext', 'scrollend', 'noscroller'],
         components: {
             ScrollerWrap
         }
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index d921ebb2..454f965d 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -9,7 +9,7 @@
 */
 
 <template>
-    <SettingsWrapper headertext="Themes" :scrollend="scrollend">
+    <SettingsWrapper headertext="Themes" :noscroller="true">
         <div class="bd-tabbar" slot="header">
             <div class="bd-button" :class="{'bd-active': local}" @click="showLocal">
                 <h3>Installed</h3>
@@ -34,12 +34,12 @@
                         <div class="bd-spinner7"/>
                     </div>
                 </div>
-                <div class="bd-onlinePhBody" v-if="!loadingOnline && onlineThemes">
+                <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>
-                </div>
+                </ScrollerWrap>
             </div>
         </div>
     </SettingsWrapper>
@@ -50,7 +50,7 @@
     import { ThemeManager, BdWebApi } from 'modules';
     import { Modals } from 'ui';
     import { ClientLogger as Logger } from 'common';
-    import { MiRefresh } from '../common';
+    import { MiRefresh, ScrollerWrap } from '../common';
     import SettingsWrapper from './SettingsWrapper.vue';
     import ThemeCard from './ThemeCard.vue';
     import RemoteCard from './RemoteCard.vue';
@@ -69,7 +69,7 @@
         },
         components: {
             SettingsWrapper, ThemeCard, RemoteCard,
-            MiRefresh,
+            MiRefresh, ScrollerWrap,
             RefreshBtn
         },
         methods: {

From 12b291cf0b425c5951952df4f11048ec7d85da4f Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 28 Nov 2018 09:22:29 +0200
Subject: [PATCH 10/21] Temp online plugins, local content body scroller

---
 .../partials/bdsettings/contentview.scss      | 10 +++-
 client/src/ui/components/bd/PluginsView.vue   | 53 +++++++++++++++----
 client/src/ui/components/bd/ThemesView.vue    |  8 +--
 3 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/client/src/styles/partials/bdsettings/contentview.scss b/client/src/styles/partials/bdsettings/contentview.scss
index 76224c57..4f14f420 100644
--- a/client/src/styles/partials/bdsettings/contentview.scss
+++ b/client/src/styles/partials/bdsettings/contentview.scss
@@ -1,6 +1,13 @@
 .bd-pluginsview,
 .bd-themesview {
-    .bd-onlinePh {
+    .bd-localPh {
+        .bd-scroller {
+            padding: 0 20px 0 0;
+        }
+    }
+
+    .bd-onlinePh,
+    .bd-localPh {
         display: flex;
         flex-direction: column;
         margin: 10px 0;
@@ -25,7 +32,6 @@
             .bd-scroller {
                 padding: 0 20px 0 0;
             }
-
         }
 
         h3 {
diff --git a/client/src/ui/components/bd/PluginsView.vue b/client/src/ui/components/bd/PluginsView.vue
index 2acef51f..16226dbb 100644
--- a/client/src/ui/components/bd/PluginsView.vue
+++ b/client/src/ui/components/bd/PluginsView.vue
@@ -9,7 +9,7 @@
 */
 
 <template>
-    <SettingsWrapper headertext="Plugins">
+    <SettingsWrapper headertext="Plugins" :noscroller="true">
         <div class="bd-tabbar" slot="header">
             <div class="bd-button" :class="{'bd-active': local}" @click="showLocal">
                 <h3>Installed</h3>
@@ -22,12 +22,26 @@
         </div>
 
         <div class="bd-flex bd-flexCol bd-pluginsview">
-            <div v-if="local" class="bd-flex bd-flexGrow bd-flexCol bd-pluginsContainer bd-localPlugins">
-                <PluginCard v-for="plugin in localPlugins" :plugin="plugin" :key="plugin.id" :data-plugin-id="plugin.id" @toggle-plugin="togglePlugin(plugin)" @reload-plugin="reloadPlugin(plugin)" @delete-plugin="unload => deletePlugin(plugin, unload)" @show-settings="dont_clone => showSettings(plugin, dont_clone)" />
+            <div v-if="local" class="bd-flex bd-flexGrow bd-flexCol bd-pluginsContainer bd-localPlugins bd-localPh">
+                <ScrollerWrap>
+                    <PluginCard v-for="plugin in localPlugins" :plugin="plugin" :key="plugin.id" :data-plugin-id="plugin.id" @toggle-plugin="togglePlugin(plugin)" @reload-plugin="reloadPlugin(plugin)" @delete-plugin="unload => deletePlugin(plugin, unload)" @show-settings="dont_clone => showSettings(plugin, dont_clone)" />
+                </ScrollerWrap>
             </div>
-            <div v-if="!local" class="bd-onlinePh">
-                <h3>Coming Soon</h3>
-                <a href="https://v2.betterdiscord.net/plugins" target="_new">Website Browser</a>
+            <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>
+                    <div v-if="loadingOnline" class="bd-spinnerContainer">
+                        <div class="bd-spinner7" />
+                    </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" />
+                    </div>
+                </ScrollerWrap>
             </div>
         </div>
     </SettingsWrapper>
@@ -38,7 +52,7 @@
     import { PluginManager } from 'modules';
     import { Modals } from 'ui';
     import { ClientLogger as Logger } from 'common';
-    import { MiRefresh } from '../common';
+    import { MiRefresh, ScrollerWrap } from '../common';
     import SettingsWrapper from './SettingsWrapper.vue';
     import PluginCard from './PluginCard.vue';
     import RefreshBtn from '../common/RefreshBtn.vue';
@@ -48,12 +62,15 @@
             return {
                 PluginManager,
                 local: true,
-                localPlugins: PluginManager.localPlugins
+                localPlugins: PluginManager.localPlugins,
+                onlinePlugins: null,
+                loadingOnline: false,
+                loadingMore: false
             };
         },
         components: {
             SettingsWrapper, PluginCard,
-            MiRefresh,
+            MiRefresh, ScrollerWrap,
             RefreshBtn
         },
         methods: {
@@ -96,6 +113,24 @@
                 return Modals.contentSettings(plugin, null, {
                     dont_clone
                 });
+            },
+            searchInput(e) {
+                if (this.loadingOnline || this.loadingMore) return;
+                this.refreshOnline();
+            },
+            async scrollend(e) {
+                // TODO
+                return;
+                if (this.loadingOnline || this.loadingMore) return;
+                this.loadingMore = true;
+                try {
+                    const getPlugins = await BdWebApi.plugins.get();
+                    this.onlinePlugins.docs = [...this.onlinePlugins.docs, ...getPlugins.docs];
+                } catch (err) {
+                    Logger.err('PluginsView', err);
+                } finally {
+                    this.loadingMore = false;
+                }
             }
         }
     }
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 454f965d..c3e737d8 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -22,10 +22,12 @@
         </div>
 
         <div class="bd-flex bd-flexCol bd-themesview">
-            <div v-if="local" class="bd-flex bd-flexGrow bd-flexCol bd-themesContainer bd-localThemes">
-                <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 v-if="local" class="bd-flex bd-flexGrow bd-flexCol bd-themesContainer bd-localPh">
+                <ScrollerWrap>
+                    <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)" />
+                </ScrollerWrap>
             </div>
-            <div v-if="!local" class="bd-onlinePh">
+            <div v-else class="bd-onlinePh">
                 <div class="bd-onlinePhHeader">
                     <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 />

From f0d66300c46eee82700d36d5baf0a6ab6ae31814 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Thu, 29 Nov 2018 00:22:04 +0200
Subject: [PATCH 11/21] Styling

---
 client/src/styles/partials/bdsettings/remotecard.scss | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/client/src/styles/partials/bdsettings/remotecard.scss b/client/src/styles/partials/bdsettings/remotecard.scss
index 7754a4f7..c50759be 100644
--- a/client/src/styles/partials/bdsettings/remotecard.scss
+++ b/client/src/styles/partials/bdsettings/remotecard.scss
@@ -51,17 +51,19 @@
     .bd-remoteCardTags {
         color: #828a97;
         font-size: 10px;
-        line-height: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
     }
 
     .bd-buttonGroup {
         align-self: flex-end;
         justify-content: flex-end;
         flex-grow: 1;
-        max-height: 20px;
+        max-height: 30px;
 
         .bd-button {
-            font-size: 12px;
+            font-size: 16px;
             padding: 5px 10px;
         }
     }

From f028aefab89ee6b98ee265cbae71dd99b16915fa Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Fri, 30 Nov 2018 21:14:52 +0200
Subject: [PATCH 12/21] Source button

---
 client/src/ui/components/bd/RemoteCard.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/client/src/ui/components/bd/RemoteCard.vue b/client/src/ui/components/bd/RemoteCard.vue
index 3b87f344..ce17ce29 100644
--- a/client/src/ui/components/bd/RemoteCard.vue
+++ b/client/src/ui/components/bd/RemoteCard.vue
@@ -29,7 +29,7 @@
             <div class="bd-buttonGroup">
                 <div class="bd-button">Install</div>
                 <div class="bd-button">Preview</div>
-                <div class="bd-button">Source</div>
+                <div class="bd-button" @click="openSourceUrl">Source</div>
             </div>
         </div>
     </div>
@@ -37,6 +37,8 @@
 
 <script>
     import { Reflection } from 'modules';
+    import { shell } from 'electron';
+
     export default {
         props: ['item'],
         data() {
@@ -49,6 +51,11 @@
             fromNow() {
                 const { Moment } = Reflection.modules;
                 return Moment(this.item.updated).fromNow();
+            },
+            openSourceUrl() {
+                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);
             }
         }
     }

From 26b1fad5a4e5dceac3d2ab29803286f0e35b5aba Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Fri, 30 Nov 2018 22:08:05 +0200
Subject: [PATCH 13/21] Move packer to contentmanager

---
 client/src/modules/contentmanager.js       | 23 +++++++++++++++++
 client/src/ui/components/bd/PluginCard.vue | 30 ++++++----------------
 2 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/client/src/modules/contentmanager.js b/client/src/modules/contentmanager.js
index 7a0076bb..c50c88f7 100644
--- a/client/src/modules/contentmanager.js
+++ b/client/src/modules/contentmanager.js
@@ -12,6 +12,7 @@ import asar from 'asar';
 import path, { dirname } from 'path';
 import rimraf from 'rimraf';
 
+import { remote } from 'electron';
 import Content from './content';
 import Globals from './globals';
 import Database from './database';
@@ -71,6 +72,28 @@ export default class {
         return Globals.getPath(this.pathId);
     }
 
+    static async packContent(path, contentPath) {
+        return new Promise((resolve, reject) => {
+            remote.dialog.showSaveDialog({
+                title: 'Save Package',
+                defaultPath: path,
+                filters: [
+                    {
+                        name: 'BetterDiscord Package',
+                        extensions: ['bd']
+                    }
+                ]
+            }, filepath => {
+                if (!filepath) return;
+
+                asar.uncache(filepath);
+                asar.createPackage(contentPath, filepath, () => {
+                    resolve(filepath);
+                });
+            });
+        });
+    }
+
     /**
      * Load all locally stored content.
      * @param {bool} suppressErrors Suppress any errors that occur during loading of content
diff --git a/client/src/ui/components/bd/PluginCard.vue b/client/src/ui/components/bd/PluginCard.vue
index f8cfe65d..3a485936 100644
--- a/client/src/ui/components/bd/PluginCard.vue
+++ b/client/src/ui/components/bd/PluginCard.vue
@@ -23,11 +23,8 @@
 
 <script>
     // Imports
-    import asar from 'asar';
-    import electron from 'electron';
-    import fs from 'fs';
     import { Toasts } from 'ui';
-    import { Settings } from 'modules';
+    import { Settings, PluginManager } from 'modules';
     import { ClientLogger as Logger } from 'common';
     import { shell } from 'electron';
     import Card from './Card.vue';
@@ -45,24 +42,13 @@
             MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension, MiBoxDownload
         },
         methods: {
-            package() {
-                electron.remote.dialog.showSaveDialog({
-                    title: 'Save Plugin Package',
-                    defaultPath: this.plugin.name,
-                    filters: [
-                        {
-                            name: 'BetterDiscord Package',
-                            extensions: ['bd']
-                        }
-                    ]
-                }, filepath => {
-                    if (!filepath) return;
-
-                    asar.uncache(filepath);
-                    asar.createPackage(this.plugin.contentPath, filepath, () => {
-                        Toasts.success('Plugin Packaged!');
-                    });
-                });
+            async package() {
+                try {
+                    const packagePath = await PluginManager.packContent(this.plugin.name, this.plugin.contentPath);
+                    Toasts.success(`Plugin Packaged: ${packagePath}`);
+                } catch (err) {
+                    Logger.log('PluginCard', err);
+                }
             },
             editPlugin() {
                 try {

From 7fb5c8a378f82a56992d1475356aadc285cddd69 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Fri, 30 Nov 2018 22:13:36 +0200
Subject: [PATCH 14/21] Theme packer

---
 client/src/ui/components/bd/ThemeCard.vue | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/client/src/ui/components/bd/ThemeCard.vue b/client/src/ui/components/bd/ThemeCard.vue
index b1cb7912..686aa581 100644
--- a/client/src/ui/components/bd/ThemeCard.vue
+++ b/client/src/ui/components/bd/ThemeCard.vue
@@ -12,6 +12,7 @@
     <Card :item="theme">
         <SettingSwitch slot="toggle" :value="theme.enabled" @input="$emit('toggle-theme')" />
         <ButtonGroup slot="controls" v-if="!online">
+            <Button v-if="devmode && !theme.packed" v-tooltip="'Package Theme'" @click="package"><MiBoxDownload size="18" /></Button>
             <Button v-tooltip="'Settings (shift + click to open settings without cloning the set)'" v-if="theme.hasSettings" @click="$emit('show-settings', $event.shiftKey)"><MiSettings size="18" /></Button>
             <Button v-tooltip="'Recompile (shift + click to reload)'" @click="$emit('reload-theme', $event.shiftKey)"><MiRefresh size="18" /></Button>
             <Button v-tooltip="'Edit'" @click="editTheme"><MiPencil size="18" /></Button>
@@ -22,17 +23,33 @@
 
 <script>
     // Imports
+    import { Toasts } from 'ui';
+    import { Settings, ThemeManager } from 'modules';
+    import { ClientLogger as Logger } from 'common';
     import { shell } from 'electron';
     import Card from './Card.vue';
-    import { Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension } from '../common';
+    import { Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension, MiBoxDownload } from '../common';
 
     export default {
+        data() {
+            return {
+                devmode: Settings.getSetting('core', 'advanced', 'developer-mode').value
+            }
+        },
         props: ['theme', 'online'],
         components: {
             Card, Button, ButtonGroup, SettingSwitch,
-            MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension
+            MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension, MiBoxDownload
         },
         methods: {
+            async package() {
+                try {
+                    const packagePath = await ThemeManager.packContent(this.theme.name, this.theme.contentPath);
+                    Toasts.success(`Theme Packaged: ${packagePath}`);
+                } catch (err) {
+                    Logger.log('ThemeCard', err);
+                }
+            },
             editTheme() {
                 try {
                     shell.openItem(this.theme.contentPath);

From b1bd5190c11214a632e01e1950cab6d7aa038f9f Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Sat, 1 Dec 2018 03:53:49 +0200
Subject: [PATCH 15/21] Initial loading logic for packed themes

---
 client/src/modules/packageinstaller.js        | 43 ++++++++-----------
 .../ui/components/bd/modals/InstallModal.vue  |  2 +-
 2 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/client/src/modules/packageinstaller.js b/client/src/modules/packageinstaller.js
index 2267dec6..55598605 100644
--- a/client/src/modules/packageinstaller.js
+++ b/client/src/modules/packageinstaller.js
@@ -13,6 +13,7 @@ import Security from './security';
 import { ReactComponents } from './reactcomponents';
 import Reflection from './reflection';
 import DiscordApi from './discordapi';
+import ThemeManager from './thememanager';
 
 export default class PackageInstaller {
 
@@ -64,47 +65,39 @@ export default class PackageInstaller {
     /**
      * Installs or updates defined package
      * @param {Byte[]|String} bytesOrPath byte array of binary or path to local file
-     * @param {String} name Package name
+     * @param {String} nameOrId Package name
      * @param {Boolean} update Does an older version already exist
      */
-    static async installPackage(bytesOrPath, id, update = false) {
+    static async installPackage(bytesOrPath, nameOrId, contentType, update = false) {
         let outputPath = null;
         try {
-            const bytes = typeof bytesOrPath === 'string' ? fs.readFileSync(bytesOrPath) : bytesOrPath;
 
-            const outputName = `${id}.bd`;
-            outputPath = path.join(Globals.getPath('plugins'), outputName);
+            const bytes = typeof bytesOrPath === 'string' ? fs.readFileSync(bytesOrPath) : bytesOrPath;
+            const outputName = `${nameOrId}.bd`;
+
+            outputPath = path.join(Globals.getPath(contentType + 's'), outputName);
             fs.writeFileSync(outputPath, bytes);
 
-            if (!update) return PluginManager.preloadPackedContent(outputName);
+            const manager = contentType === 'plugin' ? PluginManager : ThemeManager;
 
-            const oldContent = PluginManager.getPluginById(id);
+            if (!update) return manager.preloadPackedContent(outputName);
 
-            if (update && oldContent.packed && oldContent.packed.packageName !== id) {
-                await oldContent.unload(true);
+            const oldContent = manager.findContent(nameOrId);
+
+            await oldContent.unload(true);
+
+            if (oldContent.packed && oldContent.packed.packageName !== nameOrId) {
                 rimraf(oldContent.packed.packagePath, err => {
-                    if(err) console.log(err);
+                    if (err) throw err;
                 });
-
-                return PluginManager.preloadPackedContent(outputName);
-            }
-
-            if (update && !oldContent.packed) {
-                await oldContent.unload(true);
+            } else {
                 rimraf(oldContent.contentPath, err => {
-                    if (err) console.log(err);
+                    if (err) throw err;
                 });
-
-                return PluginManager.preloadPackedContent(outputName);
             }
 
-            return PluginManager.reloadContent(oldContent);
+            return manager.preloadPackedContent(outputName);
         } catch (err) {
-            if (outputPath) {
-                rimraf(outputPath, err => {
-                    if (err) console.log(err);
-                });
-            }
             throw err;
         }
     }
diff --git a/client/src/ui/components/bd/modals/InstallModal.vue b/client/src/ui/components/bd/modals/InstallModal.vue
index 14492007..b9af3ce5 100644
--- a/client/src/ui/components/bd/modals/InstallModal.vue
+++ b/client/src/ui/components/bd/modals/InstallModal.vue
@@ -109,7 +109,7 @@
             },
             async install() {
                 try {
-                    const installed = await PackageInstaller.installPackage(this.modal.filePath, this.modal.config.info.id, this.alreadyInstalled);
+                    const installed = await PackageInstaller.installPackage(this.modal.filePath, this.modal.config.info.id || this.modal.config.info.name, this.modal.contentType, this.alreadyInstalled);
                     this.installed = installed;
                 } catch (err) {
                     console.log(err);

From a0eb43188f840b26d25486244fb39e8455b03471 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Sun, 2 Dec 2018 00:30:20 +0200
Subject: [PATCH 16/21] add search results text

---
 client/src/modules/bdwebapi.js                         |  2 +-
 client/src/styles/partials/bdsettings/contentview.scss | 10 +++++++++-
 client/src/ui/components/bd/ThemesView.vue             |  7 ++++++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/client/src/modules/bdwebapi.js b/client/src/modules/bdwebapi.js
index 2c38062f..941c4a72 100644
--- a/client/src/modules/bdwebapi.js
+++ b/client/src/modules/bdwebapi.js
@@ -56,7 +56,7 @@ async function dummyThemes() {
             author: dummyAuthor
         });
     }
-    return { docs: dummies };
+    return { docs: dummies, total: 25 };
 }
 
 export default class BdWebApi {
diff --git a/client/src/styles/partials/bdsettings/contentview.scss b/client/src/styles/partials/bdsettings/contentview.scss
index 4f14f420..1fc44cdc 100644
--- a/client/src/styles/partials/bdsettings/contentview.scss
+++ b/client/src/styles/partials/bdsettings/contentview.scss
@@ -19,7 +19,15 @@
         }
 
         .bd-onlinePhHeader {
-            padding: 0 20px 0 0;
+            display: flex;
+            padding: 0 20px 0 10px;
+            min-height: 40px;
+
+            .bd-searchHint {
+                flex-grow: 1;
+                line-height: 40px;
+                color: #fff;
+            }
         }
 
         .bd-onlinePhBody {
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index c3e737d8..5c45007a 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -29,6 +29,7 @@
             </div>
             <div v-else class="bd-onlinePh">
                 <div class="bd-onlinePhHeader">
+                    <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 />
                     </div>
@@ -66,7 +67,8 @@
                 localThemes: ThemeManager.localThemes,
                 onlineThemes: null,
                 loadingOnline: false,
-                loadingMore: false
+                loadingMore: false,
+                searchHint: ''
             };
         },
         components: {
@@ -86,11 +88,14 @@
                 await this.ThemeManager.refreshThemes();
             },
             async refreshOnline() {
+                this.searchHint = '';
                 if (this.loadingOnline || this.loadingMore) return;
                 this.loadingOnline = true;
                 try {
                     const getThemes = await BdWebApi.themes.get();
                     this.onlineThemes = getThemes;
+                    if (!this.onlineThemes.docs) return;
+                    this.searchHint = `${this.onlineThemes.total} Results`;
                 } catch (err) {
                     Logger.err('ThemesView', err);
                 } finally {

From 08ba649a9176cded11527684424bb0cda442ed23 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Sun, 2 Dec 2018 00:40:14 +0200
Subject: [PATCH 17/21] Sort box

---
 client/src/modules/bdwebapi.js             | 10 +++++++++-
 client/src/ui/components/bd/ThemesView.vue |  5 ++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/client/src/modules/bdwebapi.js b/client/src/modules/bdwebapi.js
index 941c4a72..89017d42 100644
--- a/client/src/modules/bdwebapi.js
+++ b/client/src/modules/bdwebapi.js
@@ -56,7 +56,15 @@ async function dummyThemes() {
             author: dummyAuthor
         });
     }
-    return { docs: dummies, total: 25 };
+    return {
+        docs: dummies,
+        pagination: {
+            total: 25,
+            pages: 3,
+            limit: 9,
+            page: 1
+        }
+    };
 }
 
 export default class BdWebApi {
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 5c45007a..042b6c99 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -33,6 +33,9 @@
                     <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 />
                     </div>
+                    <div class="bd-searchSort">
+                        <span>Sort by:</span>
+                    </div>
                     <div v-if="loadingOnline" class="bd-spinnerContainer">
                         <div class="bd-spinner7"/>
                     </div>
@@ -95,7 +98,7 @@
                     const getThemes = await BdWebApi.themes.get();
                     this.onlineThemes = getThemes;
                     if (!this.onlineThemes.docs) return;
-                    this.searchHint = `${this.onlineThemes.total} Results`;
+                    this.searchHint = `${this.onlineThemes.pagination.total} Results`;
                 } catch (err) {
                     Logger.err('ThemesView', err);
                 } finally {

From 199b9249e4cdf013b0b1d89efc27f4f6fa893afb Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Sun, 2 Dec 2018 02:18:54 +0200
Subject: [PATCH 18/21] Layout

---
 .../partials/bdsettings/contentview.scss      |  7 ++++--
 client/src/ui/components/bd/ThemesView.vue    | 22 +++++++++++--------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/client/src/styles/partials/bdsettings/contentview.scss b/client/src/styles/partials/bdsettings/contentview.scss
index 1fc44cdc..507f33de 100644
--- a/client/src/styles/partials/bdsettings/contentview.scss
+++ b/client/src/styles/partials/bdsettings/contentview.scss
@@ -15,13 +15,16 @@
         .bd-spinnerContainer {
             display: flex;
             justify-content: center;
-            padding: 50px 0;
         }
 
         .bd-onlinePhHeader {
             display: flex;
             padding: 0 20px 0 10px;
-            min-height: 40px;
+            min-height: 80px;
+
+            .bd-flexRow {
+                min-height: 40px;
+            }
 
             .bd-searchHint {
                 flex-grow: 1;
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 042b6c99..71dbfd09 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -28,16 +28,20 @@
                 </ScrollerWrap>
             </div>
             <div v-else class="bd-onlinePh">
-                <div class="bd-onlinePhHeader">
-                    <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 />
+                <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 || (onlineThemes && onlineThemes.docs)}">
+                            <input type="text" class="bd-textInput" placeholder="Search" @keydown.enter="searchInput" @keyup.stop />
+                        </div>
                     </div>
-                    <div class="bd-searchSort">
-                        <span>Sort by:</span>
-                    </div>
-                    <div v-if="loadingOnline" class="bd-spinnerContainer">
-                        <div class="bd-spinner7"/>
+                    <div class="bd-flex bd-flexRow" v-if="onlineThemes && onlineThemes.docs && onlineThemes.docs.length">
+                        <div class="bd-searchSort">
+                            <span>Sort by:</span>
+                        </div>
                     </div>
                 </div>
                 <ScrollerWrap class="bd-onlinePhBody" v-if="!loadingOnline && onlineThemes" :scrollend="scrollend">

From a274b0c83905879943dde0ba8b74781b7849e351 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Sun, 2 Dec 2018 02:20:16 +0200
Subject: [PATCH 19/21] Styles

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

diff --git a/client/src/styles/partials/bdsettings/contentview.scss b/client/src/styles/partials/bdsettings/contentview.scss
index 507f33de..c0272110 100644
--- a/client/src/styles/partials/bdsettings/contentview.scss
+++ b/client/src/styles/partials/bdsettings/contentview.scss
@@ -31,6 +31,13 @@
                 line-height: 40px;
                 color: #fff;
             }
+
+            .bd-searchSort {
+                span {
+                    color: #fff;
+                    line-height: 40px;
+                }
+            }
         }
 
         .bd-onlinePhBody {

From 3182f283594518b554f737d89ab8d36c75b26b8d Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Sun, 2 Dec 2018 02:23:03 +0200
Subject: [PATCH 20/21] Layout and initial sort buttons

---
 client/src/ui/components/bd/ThemesView.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 71dbfd09..8b583b52 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -39,8 +39,12 @@
                         </div>
                     </div>
                     <div class="bd-flex bd-flexRow" v-if="onlineThemes && onlineThemes.docs && onlineThemes.docs.length">
-                        <div class="bd-searchSort">
-                            <span>Sort by:</span>
+                        <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">Updated</div>
+                            <div class="bd-sort">Installs</div>
+                            <div class="bd-sort">Users</div>
                         </div>
                     </div>
                 </div>

From 9a77aae56b598253a95b424bf044c1f3fe68bf3e Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Sun, 2 Dec 2018 04:13:57 +0200
Subject: [PATCH 21/21] Lint

---
 client/src/modules/bdwebapi.js         | 2 ++
 client/src/modules/packageinstaller.js | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/modules/bdwebapi.js b/client/src/modules/bdwebapi.js
index 89017d42..393eb112 100644
--- a/client/src/modules/bdwebapi.js
+++ b/client/src/modules/bdwebapi.js
@@ -90,11 +90,13 @@ export default class BdWebApi {
 
     static getThemes(args) {
         return dummyThemes();
+        /*
         if (!args) return request.get(ENDPOINTS.themes);
         const { id } = args;
         if (id) return request.get(ENDPOINTS.theme(id));
 
         return request.get(ENDPOINTS.themes);
+        */
     }
 
     static getUsers(args) {
diff --git a/client/src/modules/packageinstaller.js b/client/src/modules/packageinstaller.js
index 55598605..f870c4d8 100644
--- a/client/src/modules/packageinstaller.js
+++ b/client/src/modules/packageinstaller.js
@@ -75,7 +75,7 @@ export default class PackageInstaller {
             const bytes = typeof bytesOrPath === 'string' ? fs.readFileSync(bytesOrPath) : bytesOrPath;
             const outputName = `${nameOrId}.bd`;
 
-            outputPath = path.join(Globals.getPath(contentType + 's'), outputName);
+            outputPath = path.join(Globals.getPath(`${contentType}s`), outputName);
             fs.writeFileSync(outputPath, bytes);
 
             const manager = contentType === 'plugin' ? PluginManager : ThemeManager;