Hide preview select for design/announcement settings (#16721)

no issue
- Hide post preview select if there is no published posts yet.

---

<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
copilot:summary

ghost/admin/app/services/theme-management.js

@@ -30,13 +30,26 @@ export default class ThemeManagementService extends Service {
 
     allPosts = this.store.peekAll('post');
 
-    availablePreviewTypes = [{
-        name: 'homepage',
-        label: 'Homepage'
-    }, {
-        name: 'post',
-        label: 'Post'
-    }];
+    get availablePreviewTypes() {
+        const previewTypes = [{
+            name: 'homepage',
+            label: 'Homepage'
+        }];
+
+        // in case we haven't loaded any posts so far
+        if (!this.latestPublishedPost) {
+            this.loadLastPostTask.perform();
+        }
+
+        if (this.latestPublishedPost) {
+            previewTypes.push({
+                name: 'post',
+                label: 'Post'
+            });
+        }
+
+        return previewTypes;
+    }
 
     get latestPublishedPost() {
         return this.allPosts.toArray().filterBy('status', 'published').sort((a, b) => {
@@ -170,6 +183,11 @@ export default class ThemeManagementService extends Service {
         }
     }
 
+    @task
+    *loadLastPostTask() {
+        yield this.store.query('post', {filter: 'status:published', order: 'published_at DESC', limit: 1});
+    }
+
     @task
     *updatePreviewHtmlTask() {
         // skip during testing because we don't have mocks for the front-end
@@ -182,10 +200,10 @@ export default class ThemeManagementService extends Service {
         if (this.previewType === 'post') {
             // in case we haven't loaded any posts so far
             if (!this.latestPublishedPost) {
-                yield this.store.query('post', {filter: 'status:published', order: 'published_at DESC', limit: 1});
+                this.loadLastPostTask.perform();
             }
 
-            frontendUrl = this.latestPublishedPost.url;
+            frontendUrl = this.latestPublishedPost?.url || '';
         }
 
         const previewResponse = yield this.frontend.fetch(frontendUrl, {

ghost/admin/app/templates/settings/announcement-bar/index.hbs

@@ -2,17 +2,19 @@
     <GhCanvasHeader class="gh-canvas-header">
         <h2 class="gh-canvas-title">Announcement bar</h2>
         <section class="view-actions">
-            <div class="gh-select gh-preview-page-selector">
-                <OneWaySelect
-                    @value={{this.themeManagement.previewType}}
-                    @options={{this.themeManagement.availablePreviewTypes}}
-                    @optionValuePath="name"
-                    @optionLabelPath="label"
-                    @optionTargetPath="name"
-                    @update={{this.themeManagement.setPreviewType}}
-                />
-                {{svg-jar "arrow-down-small"}}
-            </div>
+            {{#if (gt this.themeManagement.availablePreviewTypes.length 1)}}
+                <div class="gh-select gh-preview-page-selector">
+                    <OneWaySelect
+                        @value={{this.themeManagement.previewType}}
+                        @options={{this.themeManagement.availablePreviewTypes}}
+                        @optionValuePath="name"
+                        @optionLabelPath="label"
+                        @optionTargetPath="name"
+                        @update={{this.themeManagement.setPreviewType}}
+                    />
+                    {{svg-jar "arrow-down-small"}}
+                </div>
+            {{/if}}
 
             <div class="gh-contentfilter gh-btn-group">
                 <button type="button" class="gh-btn gh-design-preview-mode {{if this.isDesktopPreview "gh-btn-group-selected"}}" {{on "click" (fn this.setPreviewSize "desktop")}} data-test-button="desktop-preview"><span>{{svg-jar "desktop"}}</span></button>

ghost/admin/app/templates/settings/design/index.hbs

@@ -2,17 +2,19 @@
     <GhCanvasHeader class="gh-canvas-header">
         <h2 class="gh-canvas-title">Site design</h2>
         <section class="view-actions">
-            <div class="gh-select gh-preview-page-selector">
-                <OneWaySelect
-                    @value={{this.themeManagement.previewType}}
-                    @options={{this.themeManagement.availablePreviewTypes}}
-                    @optionValuePath="name"
-                    @optionLabelPath="label"
-                    @optionTargetPath="name"
-                    @update={{this.themeManagement.setPreviewType}}
-                />
-                {{svg-jar "arrow-down-small"}}
-            </div>
+            {{#if (gt this.themeManagement.availablePreviewTypes.length 1)}}
+                <div class="gh-select gh-preview-page-selector">
+                    <OneWaySelect
+                        @value={{this.themeManagement.previewType}}
+                        @options={{this.themeManagement.availablePreviewTypes}}
+                        @optionValuePath="name"
+                        @optionLabelPath="label"
+                        @optionTargetPath="name"
+                        @update={{this.themeManagement.setPreviewType}}
+                    />
+                    {{svg-jar "arrow-down-small"}}
+                </div>
+            {{/if}}
 
             <div class="gh-contentfilter gh-btn-group">
                 <button type="button" class="gh-btn gh-design-preview-mode {{if this.isDesktopPreview "gh-btn-group-selected"}}" {{on "click" (fn this.setPreviewSize "desktop")}} data-test-button="desktop-preview"><span>{{svg-jar "desktop"}}</span></button>