From 018109d31072573af5f1c6ad72abc04d4a2f8a22 Mon Sep 17 00:00:00 2001
From: "John P. rouillard" <rouilj+github@ieee.org>
Date: Sat, 11 Feb 2023 01:49:32 -0500
Subject: [PATCH] add header to command palette.

Implementation same as for footer, but on the other end.
---
 README.md                   |  2 ++
 src/App.svelte              | 10 ++++++++++
 src/PaletteContainer.svelte | 11 +++++++++++
 src/main.js                 |  1 +
 4 files changed, 24 insertions(+)

diff --git a/README.md b/README.md
index d6f9fe8..233d2cc 100644
--- a/README.md
+++ b/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
   ]
diff --git a/src/App.svelte b/src/App.svelte
index 3bd5aea..fb288d2 100644
--- a/src/App.svelte
+++ b/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}
diff --git a/src/PaletteContainer.svelte b/src/PaletteContainer.svelte
index 27e396c..1707632 100644
--- a/src/PaletteContainer.svelte
+++ b/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>
diff --git a/src/main.js b/src/main.js
index 8e86ccc..1fdf0a7 100644
--- a/src/main.js
+++ b/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;