Added automatic open of brand settings form when no custom theme settings exist

no issue

When no custom theme settings exist it's nice to have the brand settings form automatically visible when opening the design settings menu to avoid an extra click and let users make actions immediately. We don't want that behaviour when custom theme settings exist because it would hide useful context and result in extra scroll+clicks to get to the section you're interested in.

- when first rendering the menu, set the open section to `brand` if we're on the design settings index screen
- add an event handler to the router that re-sets the open section to `brand` each time we navigate back to the design settings index screen (leaving the index screen closes all open sections)

ghost/admin/app/components/gh-nav-menu/design.hbs

@@ -6,6 +6,7 @@
         <div class="gh-nav-top" {{on "click" this.transitionBackToIndex}}>
             <div class="gh-nav-list gh-nav-main">
                 <LinkTo @route="settings.design" class="gh-nav-menu-title" @current-when="settings.design.index" {{on "click" this.closeAllSections}}>Site design</LinkTo>
+
                 {{#let (eq this.openSection "brand") as |isOpen|}}
                     <button class="gh-nav-design-tab {{if isOpen "active"}}" type="button" {{on "click" (fn this.toggleSection "brand")}}>
                         {{svg-jar "paintbrush"}}Brand
@@ -41,7 +42,7 @@
         </div>
 
         <div class="gh-nav-bottom">
-            <LinkTo class="gh-nav-design-tab" @route="settings.design.change-theme" {{on "click" (fn this.toggleSection null)}}>
+            <LinkTo class="gh-nav-design-tab" @route="settings.design.change-theme" {{on "click" this.closeAllSections}}>
                 <div>
                     <span>Change theme</span>
                     <span class="active-theme">Current: {{this.activeTheme.name}}{{#if this.activeTheme.package.version}} - v{{this.activeTheme.package.version}}{{/if}}</span>

ghost/admin/app/components/gh-nav-menu/design.js

@@ -1,5 +1,7 @@
 import Component from '@glimmer/component';
 import {action} from '@ember/object';
+import {bind} from '@ember/runloop';
+import {isEmpty} from '@ember/utils';
 import {inject as service} from '@ember/service';
 import {tracked} from '@glimmer/tracking';
 
@@ -20,6 +22,18 @@ export default class DesignMenuComponent extends Component {
 
         // fetch all themes in the background so we can show the active theme
         this.store.findAll('theme');
+
+        if (this.router.currentRouteName === 'settings.design.index') {
+            this.openDefaultSection();
+        }
+
+        this.routeDidChangeHandler = bind(this, this.handleRouteDidChange);
+        this.router.on('routeDidChange', this.routeDidChangeHandler);
+    }
+
+    willDestroy() {
+        super.willDestroy(...arguments);
+        this.router.off('routeDidChange', this.routeDidChangeHandler);
     }
 
     get activeTheme() {
@@ -53,4 +67,18 @@ export default class DesignMenuComponent extends Component {
     closeAllSections() {
         this.openSection = null;
     }
+
+    openDefaultSection() {
+        const noCustomSettings = isEmpty(this.customThemeSettings.settings);
+
+        if (noCustomSettings) {
+            this.openSection = 'brand';
+        }
+    }
+
+    handleRouteDidChange(transition) {
+        if (!transition.isAborted && transition.to?.name === 'settings.design.index') {
+            this.openDefaultSection();
+        }
+    }
 }