- 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>

ChatTwo/Http/Frontend/src/lib/chat.svelte.ts

@@ -1,4 +1,5 @@
 import { channelOptions, isChannelLocked, selectedTab, knownTabs, chatInput, messagesList, scrollMessagesToBottom } from "$lib/shared.svelte";
+import { WebPayloadType } from "$lib/payload";
 import { source, type Source } from "sveltekit-sse";
 
 interface ChatElements {
@@ -17,15 +18,16 @@ interface Messages {
 
 // ref `DataStructure.MessageResponse`
 interface MessageResponse {
+    id: string;
     timestamp: string;
     templates: Template[];
 }
 
 // ref `DataStructure.MessageTemplate`
 interface Template {
-    id: number;
-    payload: string;
+    payloadType: WebPayloadType;
     content: string;
+    iconId: number;
     color: number;
 }
 
@@ -73,9 +75,6 @@ export class ChatTwoWeb {
 
     setupDOMElements() {
         this.elements = {
-            // channelHint: document.getElementById('channel-hint'),
-            // channelSelect: document.getElementById('channel-select'),
-
             messagesContainer: document.querySelector('#messages > .scroll-container')!,
             messagesList: document.getElementById('messages-list'),
 
@@ -209,20 +208,20 @@ export class ChatTwoWeb {
 
         for( const template of templates ) {
             const spanElement = document.createElement('span');
-            switch (template.payload) {
-                case 'text':
+            switch (template.payloadType) {
+                case WebPayloadType.RawText:
                     this.processTextTemplate(template, spanElement);
                     break;
-                case 'url':
+                case WebPayloadType.CustomUri:
                     this.processUrlTemplate(template, spanElement);
                     break;
-                case 'emote':
+                case WebPayloadType.CustomEmote:
                     this.processEmote(template, spanElement);
                     break;
-                case 'icon':
+                case WebPayloadType.Icon:
                     this.processIcon(template, spanElement);
                     break;
-                case 'empty':
+                default:
                     continue;
             }
 
@@ -272,7 +271,7 @@ export class ChatTwoWeb {
 
     processIcon(template: Template, spanElement: HTMLSpanElement) {
         spanElement.classList.add('gfd-icon');
-        spanElement.classList.add(`gfd-icon-hq-${template.id}`);
+        spanElement.classList.add(`gfd-icon-hq-${template.iconId}`);
     }
 
     clearAllMessages() {
@@ -378,10 +377,18 @@ export class ChatTwoWeb {
 
         // the unread state of a specific tab has changed
         this.connection.select('tab-unread-state').subscribe((data: string) => {
-            console.log(`tab-unread-state: ${data}`)
+            console.log(`tab-unread-state`, data)
             if (data) {
                 try {
                     const chatTabUnreadState: ChatTabUnreadState = JSON.parse(data);
+                    let tab = knownTabs.find((tab) => tab.index === chatTabUnreadState.index);
+                    if (tab) {
+                        tab.unreadCount = chatTabUnreadState.unreadCount;
+                    }
+                    else {
+                        console.error("Unable to find tab!")
+                        console.error(chatTabUnreadState)
+                    }
                 } catch (error) {
                     console.error(error);
                 }

ChatTwo/Http/Frontend/src/lib/payload.ts

@@ -0,0 +1,25 @@
+export enum WebPayloadType {
+    // Dalamud
+    Unknown,
+    Player,
+    Item,
+    Status,
+    RawText,
+    UIForeground,
+    UIGlow,
+    MapLink,
+    AutoTranslateText,
+    EmphasisItalic,
+    Icon,
+    Quest,
+    DalamudLink,
+    NewLine,
+    SeHyphen,
+    PartyFinder,
+
+    // Custom
+    CustomPartyFinder = 0x50,
+    CustomAchievement = 0x51,
+    CustomUri = 0x52,
+    CustomEmote = 0x53,
+}