Added group heading to existing snippets in dropdown

no issue

- wrapped dropdown options in an options group so the heading can provide more context
- fixed styling so there isn't double padding around grouped options

ghost/admin/app/styles/components/power-select.css

@@ -363,6 +363,6 @@
     border-top: 1px solid var(--input-border-color) !important;
 }
 
-.gh-snippet-dropdown li {
+.gh-snippet-dropdown li:not(.ember-power-select-group) {
     padding: 8px 12px;
 }

ghost/admin/lib/koenig-editor/addon/components/koenig-snippet-input.hbs

@@ -3,7 +3,7 @@
         @triggerClass="kg-link-input pa2 pr6 mih-100 ba br3 shadow-2 f8 lh-heading tracked-2 outline-0 h10 nudge-top--8 vertical"
         @dropdownClass="gh-snippet-dropdown"
         @placeholder="Snippet name"
-        @options={{@snippets}}
+        @options={{this.snippetsWithGroup}}
         @showCreate={{true}}
         @searchEnabled={{false}}
         @searchField="name"

ghost/admin/lib/koenig-editor/addon/components/koenig-snippet-input.js

@@ -18,6 +18,15 @@ export default class KoenigSnippetInputComponent extends Component {
     @tracked name = '';
     @tracked style = htmlSafe('');
 
+    get snippetsWithGroup() {
+        const snippets = this.args.snippets;
+
+        return [{
+            groupName: 'Replace existing',
+            options: snippets
+        }];
+    }
+
     constructor() {
         super(...arguments);