Added "active" indicator and list themes in "active, default, ...rest" order

refs https://github.com/TryGhost/Team/issues/1149

- built a secondary list of themes that's decorated and sorted for display purposes

ghost/admin/app/controllers/settings/design/change-theme.js

@@ -10,7 +10,7 @@ export default class ChangeThemeController extends Controller {
     @tracked showAdvanced = false;
     @tracked themes = this.store.peekAll('theme');
 
-    marketplaceThemes = [{
+    officialThemes = [{
         name: 'Casper',
         category: 'Blog',
         previewUrl: 'https://casper.ghost.io/',
@@ -116,6 +116,44 @@ export default class ChangeThemeController extends Controller {
         image: 'assets/img/themes/Massively.jpg'
     }]
 
+    get themesList() {
+        const activeTheme = this.themes.findBy('active', true);
+
+        // decorate themes based on current usage
+        let themesList = this.officialThemes.map((theme) => {
+            const decoratedTheme = Object.assign({}, theme);
+
+            if (theme.ref === 'default') {
+                decoratedTheme.isDefault = true;
+            }
+
+            if (theme.name.toLowerCase() === activeTheme.name) {
+                decoratedTheme.isActive = true;
+            }
+
+            return decoratedTheme;
+        });
+
+        // move default themes to the beginning of the list
+        themesList.sort((a, b) => {
+            if (b.isDefault) {
+                return 1;
+            }
+
+            return 0;
+        });
+
+        // ensure active theme is always first
+        const activeThemeInList = themesList.find(theme => theme.isActive);
+        const activeThemeIndex = themesList.indexOf(activeThemeInList);
+        if (activeThemeIndex > 0) {
+            themesList.splice(activeThemeIndex, 1);
+            themesList.unshift(activeThemeInList);
+        }
+
+        return themesList;
+    }
+
     @action
     toggleAdvanced() {
         this.showAdvanced = !this.showAdvanced;

ghost/admin/app/routes/settings/design/change-theme.js

@@ -5,6 +5,6 @@ export default class ChangeThemeRoute extends AuthenticatedRoute {
     @service store;
 
     model() {
-        this.store.findAll('theme');
+        return this.store.findAll('theme');
     }
 }

ghost/admin/app/routes/settings/design/change-theme/view.js

@@ -8,7 +8,7 @@ export default class ViewThemeRoute extends Route {
 
     model(params, transition) {
         const changeThemeController = this.controllerFor('settings.design.change-theme');
-        const knownThemes = changeThemeController.marketplaceThemes;
+        const knownThemes = changeThemeController.officialThemes;
 
         const foundTheme = knownThemes.find(theme => theme.name === params.theme_name);
 

ghost/admin/app/templates/settings/design/change-theme.hbs

@@ -16,7 +16,7 @@
 
         <div class="gh-theme-directory-container-labs">
             <div class="theme-directory-labs">
-                {{#each this.marketplaceThemes as |theme|}}
+                {{#each this.themesList as |theme|}}
                     <LinkTo @route="settings.design.change-theme.view" @model={{theme.name}} class="td-item">
                         <div class="gh-theme-browser">
                             <span class="gh-theme-browser-button"></span>
@@ -27,6 +27,11 @@
                         <div class="td-item-desc">
                             <div>{{theme.name}}</div>
                             <span>• {{theme.category}}</span>
+                            {{#if theme.isActive}}
+                                <span class="gh-badge">Active</span>
+                            {{else if theme.isDefault}}
+                                <span class="gh-badge">Default</span>
+                            {{/if}}
                         </div>
                     </LinkTo>
                 {{/each}}