Support Nerd Fonts and add a NF Glyph element

Resolves #33

Author: Scriptim

package-lock.json

@@ -11,6 +11,8 @@
     "@heroicons/vue": "^2.2.0",
     "core-js": "^3.43.0",
     "d3-time-format": "^4.1.0",
+    "fuse.js": "^7.1.0",
+    "lodash.debounce": "^4.0.8",
     "pinia": "^3.0.3",
     "pinia-plugin-persistedstate": "^4.3.0",
     "vue": "^3.5.16",
@@ -19,6 +21,7 @@
   },
   "devDependencies": {
     "@types/d3-time-format": "^4.0.3",
+    "@types/lodash.debounce": "^4.0.9",
     "@typescript-eslint/eslint-plugin": "^8.7.0",
     "@typescript-eslint/parser": "^8.7.0",
     "@vue/cli-plugin-babel": "^5.0.8",

package.json

@@ -20,9 +20,7 @@
       href="https://github.com/git/git/blob/master/contrib/completion/git-prompt.sh"
       target="_blank"
       rel="noopener noreferrer"
-    >
-      <code>git-prompt.sh</code>
-    </a>
+    ><code>git-prompt.sh</code></a>
     file to your home directory and <code>source</code> it in your <code>~/.bashrc</code> file
     (as described in <code>git-prompt.sh</code>).
     By default the status will only contain the current branch name, however you can include more information using
@@ -34,11 +32,18 @@
       href="https://www.gnu.org/software/bash/manual/html_node/Bash-Variables.html#index-PROMPT_005fDIRTRIM"
       target="_blank"
       rel="noopener noreferrer"
-    >
-      <code>PROMPT_DIRTRIM</code>
-    </a>
+    ><code>PROMPT_DIRTRIM</code></a>
     environment variable in your <code>~/.bashrc</code> file.
   </div>
+  <div class="hint" v-if="hasElement('Nerd Font Glyph')">
+    For <code>Nerd Font Glyph</code> elements to be properly displayed, you need to have a
+    <a
+      href="https://www.nerdfonts.com/"
+      target="_blank"
+      rel="noopener noreferrer"
+    >Nerd Font</a>
+    installed and configured in your terminal.
+  </div>
 </template>
 
 <script lang="ts">
@@ -306,14 +311,15 @@ export default defineComponent({
 
 <style lang="sass" scoped>
 @import "@/assets/sass/_variables.sass"
+@import "https://www.nerdfonts.com/assets/css/webfont.css"
 
 .ps1
   display: inline-block
   margin: 0.5em 0 1em 0
   padding: 1em
   color: $color-background
   background-color: $color-foreground
-  font-family: 'Roboto Mono', 'Noto Sans Mono', monospace
+  font-family: 'NerdFontsSymbols Nerd Font', 'Roboto Mono', 'Noto Sans Mono', monospace
   line-height: 1.5
   min-height: 1.5em
   word-break: break-all

src/components/output/PS1Variable.vue

@@ -197,14 +197,15 @@ export default defineComponent({
 
 <style lang="sass" scoped>
 @import "@/assets/sass/_variables.sass"
+@import "https://www.nerdfonts.com/assets/css/webfont.css"
 
 h3
   display: inline-block
 
 .preview
   display: inline-block
   margin: 1em 0 2em 0
-  font-family: 'Roboto Mono', 'Noto Sans Mono', monospace
+  font-family: 'NerdFontsSymbols Nerd Font', 'Roboto Mono', 'Noto Sans Mono', monospace
   text-align: left
   line-height: 1.5
   min-height: 1.5em

src/components/output/PromptPreview.vue

@@ -97,12 +97,13 @@ export default defineComponent({
 <style lang="sass" scoped>
 @use "sass:color"
 @import "@/assets/sass/_variables.sass"
+@import "https://www.nerdfonts.com/assets/css/webfont.css"
 
 .selected
   // darken the background color because the delete icon has the same color
   background-color: color.adjust($color-accent, $lightness: -15%)
 
 .parameter
   vertical-align: middle
-  font-family: monospace
+  font-family: 'NerdFontsSymbols Nerd Font', monospace
 </style>

src/components/prompteditor/AddedPromptElement.vue

@@ -124,6 +124,7 @@ export default defineComponent({
 
 <style lang="sass" scoped>
 @import "@/assets/sass/_variables.sass"
+@import "https://www.nerdfonts.com/assets/css/webfont.css"
 
 .sortable-ghost
   opacity: 0.4
@@ -142,7 +143,7 @@ hr
     width: 90%
     max-width: 24em
     font-size: 1.1em
-    font-family: monospace
+    font-family: 'NerdFontsSymbols Nerd Font', monospace
     margin-top: 0.1em
     margin-bottom: 0.8em
 

src/components/prompteditor/PromptElements.vue

@@ -11,11 +11,11 @@
             <legend>{{ parameter.label }}</legend>
             <label v-if="parameter.unselectLabel !== undefined" :for="`parameter_none_${parameter.id}`">
               <input
-              type="radio"
-              :id="`parameter_none_${parameter.id}`"
-              :name="parameter.id"
-              value=""
-              v-model="element.parameters[parameter.id]"
+                type="radio"
+                :id="`parameter_none_${parameter.id}`"
+                :name="parameter.id"
+                value=""
+                v-model="element.parameters[parameter.id]"
               />
               {{ parameter.unselectLabel }}<br />
             </label>
@@ -51,6 +51,19 @@
             v-model="element.parameters[parameter.id]"
           />
         </template>
+        <template v-if="element.type.name === 'Nerd Font Glyph'">
+          <ul class="nerd-font-glyph-suggestions">
+            <li
+              v-for="glyph in nerdFontGlyphSuggestions"
+              :key="glyph.name"
+              :class="{ selected: element.parameters.glyph === glyph.name }"
+            >
+              <button type="button" :title="glyph.name" @click="setTextParameter(parameter.id, glyph.name)">
+                <i :class="`nf ${glyph.name}`"></i>
+              </button>
+            </li>
+          </ul>
+        </template>
       </label>
     </div>
     <div class="properties_color" v-if="element.type.visible">
@@ -152,6 +165,8 @@ import prompt from '@/lib/prompt';
 import { Color } from '@/lib/enum/color';
 import { PromptElement } from '@/lib/promptElement';
 import darkMode from '@/lib/darkMode';
+import { fuzzySearchNerdFontGlyphs, NerdFontGlyph } from '@/lib/enum/nerdfontglyph';
+import debounce from 'lodash.debounce';
 import EmptyState from '../base/EmptyState.vue';
 import ColorPicker from '../ui/ColorPicker.vue';
 import IconButton from '../ui/IconButton.vue';
@@ -180,6 +195,10 @@ export default defineComponent({
        * Setting any of the properties will modify this (and only this) element.
        */
       element: prompt.refs().selectedElement,
+      /**
+       * Nerd Font glyph suggestions based on the current parameter input value.
+       */
+      nerdFontGlyphSuggestions: [] as NerdFontGlyph[],
     };
   },
   computed: {
@@ -200,6 +219,17 @@ export default defineComponent({
     },
   },
   methods: {
+    /**
+     * Sets the value of a text parameter for the currently selected element.
+     *
+     * @param parameterId the ID of the parameter to set
+     * @param value the value to set for the parameter
+     */
+    setTextParameter(parameterId: string, value: string) {
+      if (this.element && this.element.parameters) {
+        this.element.parameters[parameterId] = value;
+      }
+    },
     /**
      * Sets the foreground color of the currently selected element.
      *
@@ -233,12 +263,38 @@ export default defineComponent({
         prompt.state().push(element);
       }
     },
+    /**
+     * Updates the list of Nerd Font glyph suggestions based on the provided name.
+     *
+     * @param name the name of the Nerd Font glyph to search for
+     */
+    updateNerdFontGlyphSuggestions(name: string) {
+      this.nerdFontGlyphSuggestions = fuzzySearchNerdFontGlyphs(name);
+    },
+    /**
+     * Debounced version of `updateNerdFontGlyphSuggestions` to avoid excessive calls while typing.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    updateNerdFontGlyphSuggestionsDebounced(name: string) {
+      // This will be replaced in `created()`
+    },
+  },
+  created() {
+    this.updateNerdFontGlyphSuggestionsDebounced = debounce(this.updateNerdFontGlyphSuggestions, 50);
+  },
+  watch: {
+    'element.parameters.glyph': function watchGlyphParameter(newVal: string) {
+      if (this.element && this.element.type.name === 'Nerd Font Glyph') {
+        this.updateNerdFontGlyphSuggestionsDebounced(newVal || '');
+      }
+    },
   },
 });
 </script>
 
 <style lang="sass" scoped>
 @import "@/assets/sass/_variables.sass"
+@import "https://www.nerdfonts.com/assets/css/webfont.css"
 
 .properties-wrapper
   text-align: left
@@ -278,6 +334,7 @@ input[type="text"]
   width: 20em
   padding: 0.2em 0.4em
   margin-top: 0.2em
+  font-family: 'NerdFontsSymbols Nerd Font', monospace
 
 input.color-picker-btn
   vertical-align: middle
@@ -290,4 +347,27 @@ input.color-picker-btn
 
 input[disabled]
   opacity: 0.7
+
+.nerd-font-glyph-suggestions
+  list-style: none
+  padding: 0
+  margin: 1em 0 0
+
+  li
+    display: inline-block
+    margin: 0.1em
+
+    &.selected
+      color: $color-accent
+
+    button
+      font-size: 1.5em
+      padding: 0.2em
+      background: none
+      border: none
+      color: inherit
+      cursor: pointer
+
+      i
+        vertical-align: middle
 </style>