From ed33e63386d5ad73c6a018cdc2742d79df7a3191 Mon Sep 17 00:00:00 2001
From: bartbutenaers <bart.butenaers@gmail.com>
Date: Tue, 6 Aug 2024 16:15:37 +0200
Subject: [PATCH 1/2] Node icons in sidebar

---
 nodes/config/ui_base.html | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html
index b3663c87..64b97a73 100644
--- a/nodes/config/ui_base.html
+++ b/nodes/config/ui_base.html
@@ -1038,7 +1038,12 @@
             addItem: function (container, i, /** @type {DashboardItem} */ widget) {
                 const titleRow = $('<div>', { class: 'nrdb2-sb-list-header nrdb2-sb-widgets-list-header' }).appendTo(container)
                 $('<i class="nrdb2-sb-list-handle nrdb2-sb-widget-list-handle fa fa-bars"></i>').appendTo(titleRow)
-                let widgetIcon = 'fa fa-image'
+
+                let widgetIcon = widget.node._def.icon || 'fa fa-question'
+                if (widget.node._def.icon.startsWith('font-awesome/')) {
+                    widgetIcon = 'fa ' + widget.node._def.icon.replace('font-awesome/', '')
+                }
+
                 if (widget.isSubflowInstance) {
                     // In this MVP, subflow instances are constrained to stay within own group.
                     container.parent().addClass('red-ui-editableList-item-constrained')
@@ -1047,7 +1052,17 @@
                     // apply a tooltip to further clarify this is a subflow
                     titleRow.attr('title', widget.subflowName || 'Subflow instance')
                 }
-                $('<i>', { class: 'nrdb2-sb-icon nrdb2-sb-widget-icon ' + widgetIcon }).appendTo(titleRow)
+
+                if (widgetIcon == 'nrdb2-sb-subflow-icon' || widgetIcon.startsWith('fa fa-')) {
+                    // Some ui nodes require a FontAwesome icon
+                    $('<i>', { class: 'nrdb2-sb-icon nrdb2-sb-widget-icon ' + widgetIcon }).appendTo(titleRow)
+                }
+                else {
+                    // Some ui nodes require a custom icon (png, svg, ...)
+                    const href = 'icons/' + widget.node._def.set.module + '/' + widgetIcon
+                    $('<image>', { class: 'nrdb2-sb-icon nrdb2-sb-widget-icon', href: href }).appendTo(titleRow)
+                }
+
                 $('<span>', { class: 'nrdb2-sb-title' }).text(widget.label?.trim() || widget.id).appendTo(titleRow)
                 const actions = $('<div>', { class: 'nrdb2-sb-list-header-actions' }).appendTo(titleRow)
                 addRowActions(actions, widget)

From c24269769ff36a85101e25cdfcad3e306d6aa9c0 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Wed, 7 Aug 2024 17:47:13 +0100
Subject: [PATCH 2/2] Fix CSS alignment for svg images & add md icon

---
 nodes/config/ui_base.html           | 9 ++++++---
 nodes/widgets/icons/ui-markdown.svg | 4 ++++
 2 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 nodes/widgets/icons/ui-markdown.svg

diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html
index 64b97a73..6c3b0c26 100644
--- a/nodes/config/ui_base.html
+++ b/nodes/config/ui_base.html
@@ -172,6 +172,10 @@
     /* indent the widgets */
     .nrdb2-sb-widgets-list-header .nrdb2-sb-widget-icon {
         margin-left: 3.5rem;
+        display: inline-block;
+        height: 14px;
+        width: 14px;
+        text-align: center;
     }
     /* apply subflow icon */
     .nrdb2-sb-widgets-list-header .nrdb2-sb-widget-icon.nrdb2-sb-subflow-icon {
@@ -1056,11 +1060,10 @@
                 if (widgetIcon == 'nrdb2-sb-subflow-icon' || widgetIcon.startsWith('fa fa-')) {
                     // Some ui nodes require a FontAwesome icon
                     $('<i>', { class: 'nrdb2-sb-icon nrdb2-sb-widget-icon ' + widgetIcon }).appendTo(titleRow)
-                }
-                else {
+                } else {
                     // Some ui nodes require a custom icon (png, svg, ...)
                     const href = 'icons/' + widget.node._def.set.module + '/' + widgetIcon
-                    $('<image>', { class: 'nrdb2-sb-icon nrdb2-sb-widget-icon', href: href }).appendTo(titleRow)
+                    $('<image>', { class: 'nrdb2-sb-icon nrdb2-sb-widget-icon', href, width: 14, height: 14 }).appendTo(titleRow)
                 }
 
                 $('<span>', { class: 'nrdb2-sb-title' }).text(widget.label?.trim() || widget.id).appendTo(titleRow)
diff --git a/nodes/widgets/icons/ui-markdown.svg b/nodes/widgets/icons/ui-markdown.svg
new file mode 100644
index 00000000..62c196d2
--- /dev/null
+++ b/nodes/widgets/icons/ui-markdown.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg xmlns="http://www.w3.org/2000/svg"
+aria-label="Markdown" role="img"
+viewBox="0 0 512 512"><path fill="white" d="M410 366H102C88 366 76 354 76 340V170c0-14 12 -26 26 -26h307c14 0 26 12 26 26v170c0 14-11 26 -25 26zM102 162c-4 0-9 4 -9 9v170c0 5 4 9 9 9h307c5 0 9-4 9 -9V170c0-5 -4 -9 -9 -9c1 0-307 0 -307 0zm26 153V196h34l34 43l34-43H265V314h-34v-68l-34 43l-34-43v68zm216 0l-52-57h34v-61h34v60h34z"/></svg>
\ No newline at end of file