Wired announcement api to admin ui (#16678)

refs TryGhost/Team#3052


<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 7173288</samp>

This pull request adds new components and settings for the announcement
bar feature, which allows the user to customize the content, background,
and visibility of a banner that appears on the site.

ghost/admin/app/components/announcement-settings/background.hbs

@@ -0,0 +1,18 @@
+<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first" "gh-setting"}}">
+    <div class="flex-grow-1">
+        <label class="gh-setting-title gh-theme-setting-title" for="announcement-background">
+            Announcement background
+        </label>
+
+        <span class="gh-select">
+            <select class="ember-select" name="announcement-background" id="announcement-background" {{on "change" this.setBackground}}>
+                {{#each this.options as |settingOption|}}
+                    <option value={{settingOption.value}} selected={{eq settingOption.value this.background}}>
+                        {{settingOption.label}}
+                    </option>
+                {{/each}}
+            </select>
+            {{svg-jar "arrow-down-small"}}
+        </span>
+    </div>
+</div>

ghost/admin/app/components/announcement-settings/background.js

@@ -0,0 +1,26 @@
+import Component from '@glimmer/component';
+import {action} from '@ember/object';
+import {inject as service} from '@ember/service';
+
+export default class AnnouncementSettingsBackgroundComponent extends Component {
+    @service settings;
+
+    get background() {
+        return this.settings.announcementBackground;
+    }
+
+    get options() {
+        return [
+            {value: 'accent', label: 'Accent'},
+            {value: 'dark', label: 'Dark'},
+            {value: 'light', label: 'Light'}
+        ];
+    }
+
+    @action
+    setBackground(event) {
+        this.settings.announcementBackground = event.target.value;
+        this.settings.save();
+        this.args.onChange?.();
+    }
+}

ghost/admin/app/components/announcement-settings/content.hbs

@@ -6,8 +6,8 @@
         <div class="gh-announcement-editor">
             <KoenigLexicalEditorInput
                 @placeholderText="Breaking news, a big story, a special offer, or any other message"
-                @html={{'<p></p>'}}
-                @onChangeHtml={{this.onChangeHtml}}
+                @html={{this.content}}
+                @onChangeHtml={{this.setContent}}
             />
         </div>
     </div>

ghost/admin/app/components/announcement-settings/content.js

@@ -0,0 +1,18 @@
+import Component from '@glimmer/component';
+import {action} from '@ember/object';
+import {inject as service} from '@ember/service';
+
+export default class AnnouncementSettingsContentComponent extends Component {
+    @service settings;
+
+    get content() {
+        return this.settings.announcementContent;
+    }
+
+    @action
+    setContent(html) {
+        this.settings.announcementContent = html;
+        this.settings.save();
+        this.args.onChange?.();
+    }
+}

ghost/admin/app/components/announcement-settings/visibility.hbs

@@ -0,0 +1,18 @@
+<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first" "gh-setting"}}">
+    <div class="flex-grow-1">
+        <label class="gh-setting-title gh-theme-setting-title" for="announcement-visibility">
+            Announcement visibility
+        </label>
+
+        <span class="gh-select">
+            <select class="ember-select" name="announcement-visibility" id="announcement-visibility" {{on "change" this.setVisibility}}>
+                {{#each this.options as |settingOption|}}
+                    <option value={{settingOption.value}} selected={{eq settingOption.value this.background}}>
+                        {{settingOption.label}}
+                    </option>
+                {{/each}}
+            </select>
+            {{svg-jar "arrow-down-small"}}
+        </span>
+    </div>
+</div>

ghost/admin/app/components/announcement-settings/visibility.js

@@ -0,0 +1,27 @@
+import Component from '@glimmer/component';
+import {action} from '@ember/object';
+import {inject as service} from '@ember/service';
+
+export default class AnnouncementSettingsVisibilityComponent extends Component {
+    @service settings;
+
+    get visibility() {
+        return this.settings.announcementVisibility;
+    }
+
+    get options() {
+        return [
+            {value: 'public', label: 'Public'},
+            {value: 'visitors', label: 'Visitors'},
+            {value: 'members', label: 'Members'},
+            {value: 'paid', label: 'Paid'}
+        ];
+    }
+
+    @action
+    setVisibility(event) {
+        this.settings.announcementVisibility = event.target.value;
+        this.settings.save();
+        this.args.onChange?.();
+    }
+}

ghost/admin/app/components/custom-theme-settings/announcement.js

@@ -1,10 +0,0 @@
-import Component from '@glimmer/component';
-import {action} from '@ember/object';
-
-export default class CustomThemeSettingsAnnouncementComponent extends Component {
-    @action
-    // eslint-disable-next-line no-unused-vars
-    onChangeHtml(html) {
-        this.args.onChange?.();
-    }
-}

ghost/admin/app/components/settings/design/theme-settings-form.hbs

@@ -18,7 +18,9 @@
             {{/if}}
         {{/each}}
         {{#if (feature 'announcementBar')}}
-            <CustomThemeSettings::Announcement @onChange={{@updatePreview}} />
+            <AnnouncementSettings::Content @onChange={{@updatePreview}} />
+            <AnnouncementSettings::Background @onChange={{@updatePreview}} />
+            <AnnouncementSettings::Visibility @onChange={{@updatePreview}} />
         {{/if}}
     </form>
 </div>

ghost/admin/app/models/setting.js

@@ -50,6 +50,9 @@ export default Model.extend(ValidationEngine, {
     portalSignupTermsHtml: attr('string'),
     portalSignupCheckboxRequired: attr('boolean'),
     sharedViews: attr('string'),
+    announcementContent: attr('string'),
+    announcementBackground: attr('string'),
+    announcementVisibility: attr('string'),
     /**
      * Analytics settings
      */

ghost/admin/app/services/settings.js

@@ -55,7 +55,7 @@ export default class SettingsService extends Service.extend(ValidationEngine) {
     _loadSettings() {
         if (!this._loadingPromise) {
             this._loadingPromise = this.store
-                .queryRecord('setting', {group: 'site,theme,private,members,portal,newsletter,email,amp,labs,slack,unsplash,views,firstpromoter,editor,comments,analytics'})
+                .queryRecord('setting', {group: 'site,theme,private,members,portal,newsletter,email,amp,labs,slack,unsplash,views,firstpromoter,editor,comments,analytics,announcement'})
                 .then((settings) => {
                     this._loadingPromise = null;
                     return settings;