From da17f95a33d3c36dbf2bdf26ed939094cadb6c6f Mon Sep 17 00:00:00 2001
From: igurielidze <ilia.gurielidze@autstand.com>
Date: Sat, 21 Mar 2026 18:45:19 +0400
Subject: [PATCH] Add symbol icons to IDs tab and sort search results by device
 type

- Each ID entry now shows a small SVG icon of its symbol type
- Device type name shown as subtle suffix
- Search results sorted ascending by device type, then by ID
- Search also matches device type name

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 svelte-app/src/components/DeviceDock.svelte | 46 ++++++++++++++++++---
 1 file changed, 41 insertions(+), 5 deletions(-)

diff --git a/svelte-app/src/components/DeviceDock.svelte b/svelte-app/src/components/DeviceDock.svelte
index ca71ab4..b8de5c9 100644
--- a/svelte-app/src/components/DeviceDock.svelte
+++ b/svelte-app/src/components/DeviceDock.svelte
@@ -81,11 +81,17 @@
     let ids = list.filter(d => !placedLabels.has(d.id));
     if (idSearchQuery.trim()) {
       const q = idSearchQuery.trim().toLowerCase();
-      ids = ids.filter(d => d.id.toLowerCase().includes(q));
+      ids = ids.filter(d => d.id.toLowerCase().includes(q) || d.svg.toLowerCase().includes(q));
+      // Sort ascending by device type (svg suffix)
+      ids.sort((a, b) => a.svg.localeCompare(b.svg) || a.id.localeCompare(b.id));
     }
     return ids;
   });
 
+  function getSymbolName(svgId: string): string {
+    return SYMBOLS.find(s => s.id === svgId)?.name || svgId;
+  }
+
   function onLabelMousedown(e: MouseEvent, deviceId: string) {
     if (e.button !== 0) return;
     e.preventDefault();
@@ -188,10 +194,17 @@
           {#each unassignedIds as device (device.id)}
             <button
               class="id-drag-item"
-              title="Drag onto a symbol to assign: {device.id}"
+              title="Drag onto a symbol to assign: {device.id} ({getSymbolName(device.svg)})"
               onmousedown={(e) => onLabelMousedown(e, device.id)}
             >
-              {device.id}
+              <img
+                class="id-symbol-icon"
+                src={getSymbolFile(device.svg)}
+                alt={device.svg}
+                draggable="false"
+              />
+              <span class="id-label">{device.id}</span>
+              <span class="id-type">{getSymbolName(device.svg)}</span>
             </button>
           {/each}
         </div>
@@ -466,9 +479,11 @@
   }
 
   .id-drag-item {
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: 5px;
     width: 100%;
-    padding: 4px 8px;
+    padding: 3px 6px;
     margin-bottom: 1px;
     background: #0f3460;
     border: 1px solid #1a1a5e;
@@ -480,9 +495,30 @@
     font-size: 10px;
     font-weight: 500;
     text-align: left;
+  }
+
+  .id-symbol-icon {
+    width: 20px;
+    height: 14px;
+    object-fit: contain;
+    flex-shrink: 0;
+    filter: invert(1);
+    opacity: 0.7;
+  }
+
+  .id-label {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .id-type {
+    font-size: 8px;
+    color: #556;
+    white-space: nowrap;
+    flex-shrink: 0;
   }
 
   .id-drag-item:hover {