Add target type icon

rockstar/rockstar.js

@@ -1370,14 +1370,26 @@
         appendResultsHistory(logs, links, historyTable);
     }
 
+    const heroIconUsers = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" /></svg>';
+    const heroIconSquare2x2 = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" /></svg>';
+    const heroIconEllispsiHorizontal = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" /></svg>';
+
+    const targetTypeIcon = {
+        UserGroup: heroIconUsers,
+        AppInstance: heroIconSquare2x2,
+    }
+
     function appendResultsHistory(logs, links, historyTable) {
         let targetHTML = '';
         logs.forEach(log => {
             // For apps events, the actor shows up in targets. So if an app edits another app, it would get added to the actor app history without this. The first target is the modified target
             if(log.target[0].id !== historyTable.attr('id')) {
                 return;
             }
-            const target = log.target.filter(target => target.id !== historyTable.attr('id')).map(target =>target.displayName).filter(v => !!v).join(', ');
+            const target = log.target.filter(target => target.id !== historyTable.attr('id')).map(target => {
+                const icon = targetTypeIcon[target.type] ?? heroIconEllispsiHorizontal;
+                return `${e(target.displayName)} (<span title="${target.type}" style="vertical-align: text-bottom; display: inline-block; width: 1.25rem; height: 1.25rem;">${icon}</span>)`;
+            }).filter(v => !!v).join('<br />');
             const changedAttributes = log.debugContext?.debugData?.changedAttributes;
             let svgOutcome = '';
             if(log.outcome.result === "SUCCESS") {
@@ -1397,7 +1409,7 @@
                 `<td title="${formatDateUTC(log.published)}">${formatDateLocale(log.published)}</td>` +
                 `<td title='${e(log.eventType)}'>${e(log.displayMessage)}</td>` +
                 `<td title='${e(log.actor.type) + " with id " + e(log.actor.id)}'>${e(log.actor.displayName)}</td>` +
-                `<td>${e(target)}</td>` +
+                `<td>${target}</td>` +
                 `<td>${e(changedAttributes)}</td>`;
         });
         const tableBody = historyTable.find('tbody');