- Identify web payloads better

- Switch to IconId field name
- Add unique id to every message
- Automate nodejs build step via csproj
- Add unread color to tab opener
- Add unread number to tab name
- Update ImageSharp dep

ChatTwo/Http/Frontend/src/components/TabPane.svelte

@@ -25,8 +25,9 @@
     }
 
     function ontransitionend() {
-        if (scrolledToBottom)
+        if (scrolledToBottom) {
             scrollMessagesToBottom();
+        }
     }
 </script>
 
@@ -50,9 +51,9 @@
 
         <ol id="tabs-list">
             {#each knownTabs as tab}
-                <li class:active={selectedTab.index == tab.index}>
+                <li class:active={selectedTab.index === tab.index}>
                     <button type="button" onclick={() => selectTab(tab.index)}>
-                        { tab.name }
+                        { tab.name } {tab.unreadCount > 0 ? `(${tab.unreadCount})`: '' }
                     </button>
                 </li>
             {/each}

ChatTwo/Http/Frontend/src/components/TabPaneOpener.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { tabPaneState, tabPaneAnimationState, openTabPane } from "$lib/shared.svelte";
+    import {tabPaneState, tabPaneAnimationState, openTabPane, knownTabs} from "$lib/shared.svelte";
 
     function onclick() {
         tabPaneAnimationState.noAnimation = false;
@@ -7,7 +7,7 @@
     }
 </script>
 
-<button type="button" aria-label="Open tab pane" class:visible={!tabPaneState.visible} {onclick} disabled={tabPaneState.visible}>
+<button type="button" aria-label="Open tab pane" class:visible={!tabPaneState.visible} class:unread={knownTabs.some((tab) => tab.unreadCount > 0)} {onclick} disabled={tabPaneState.visible}>
     <!-- "chevron-right" icon from https://github.com/feathericons/feather, under MIT license -->
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
 </button>