add header to command palette.

README.md

@@ -134,6 +134,8 @@ const c = new CommandPal({
   placeholder: "Custom placeholder text...", //  Changes placeholder text of input
   debugOuput: false, // if true report debugging info to console
   hideButton: false, // if true, do not generate mobile button
+  headerText: null,  // Text to display in the header of the palette.
+                     // If null (default), do not add header.
   commands: [
     // Commands go here
   ]

src/App.svelte

@@ -19,6 +19,7 @@
   export let placeholderText: string;
   export let hideButton: boolean;;
   export let paletteId: string;
+  export let headerText: string;
 
   const optionsFuse = {
     isCaseSensitive: false,
@@ -142,6 +143,15 @@
     <MobileButton on:click={onMobileClick} />
   {/if}
   <PaletteContainer bind:show={showModal}>
+    <!-- when svelte gets conditional slots
+         https://github.com/sveltejs/svelte/issues/5604
+         re-implement to remove the empty div.hidden.
+    --> 
+    <div class="{ headerText === null ? 'hidden': 'header' }" slot="header">
+      {#if headerText !== null }
+        {headerText}
+      {/if}
+    </div>    
     <div slot="search">
       <SearchField
         placeholderText={placeholderText}

src/PaletteContainer.svelte

@@ -42,6 +42,16 @@
   .search-box {
     padding: 7px;
   }
+
+  :global(.header) {
+   background-color: rgba(0, 0, 0, 0.33);
+   border-block-end: black ridge 2px;
+   color: #ddd;
+   font-size: smaller;
+   padding-block-end: 0.1em;
+   padding-block-start: 0.5em;
+   padding-inline: 0.5em;
+  }
   /* .search:focus {
   color: white;
 } */
@@ -50,6 +60,7 @@
 <div class="modal-mask" class:hidden={!show}>
   <div class="modal-wrapper">
     <div class="modal-container">
+      <slot name="header" />
       <div class="search-box">
         <slot name="search" />
       </div>

src/main.js

@@ -19,6 +19,7 @@ class CommandPal {
         placeholderText: this.options.placeholder || "What are you looking for?",
         hotkeysGlobal: this.options.hotkeysGlobal || false,
         hideButton: this.options.hideButton || false,
+        headerText: this.options.headerText || null,
       },
     });
     const ctx = this;