From 17cd661c6ae6e78bdc952cd4826f5fca0df08e7b Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Wed, 4 Sep 2024 12:32:17 +1200
Subject: [PATCH] add node icon to search results

---
 src/public/index.html               | 21 ++++++++++++---------
 src/public/text-messages-embed.html |  2 +-
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/public/index.html b/src/public/index.html
index b682edf..49e6a9a 100644
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -202,16 +202,19 @@
                     <div v-if="searchText !== ''" class="absolute z-search bg-white w-full border border-gray-200 rounded-lg shadow-md mt-1 overflow-y-scroll max-h-80 divide-y divide-gray-200">
 
                         <template v-if="searchedNodes.length > 0">
-
-                            <div @click="onSearchResultNodeClick(node)" class="p-2 hover:bg-gray-100 cursor-pointer" v-for="node of searchedNodes">
-                                <div class="text-gray-900" :class="{ 'text-red-500': node.latitude == null || node.longitude == null }">{{ node.long_name !== '' ? node.long_name : "-" }}</div>
-                                <div class="flex space-x-1 text-sm text-gray-700">
-                                    <div>Short Name: {{ node.short_name !== '' ? node.short_name : "-" }}</div>
-                                    <div class="text-gray-500">/</div>
-                                    <div>Hex ID: {{ node.node_id_hex }}</div>
+                            <div @click="onSearchResultNodeClick(node)" class="flex space-x-2 p-2 hover:bg-gray-100 cursor-pointer" v-for="node of searchedNodes">
+                                <div>
+                                    <div class="flex rounded-full h-12 w-12 text-white shadow" :class="[ `bg-[${getNodeColour(node.node_id)}]` ]">
+                                        <div class="mx-auto my-auto drop-shadow-sm">{{ node.short_name }}</div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <div class="text-gray-900" :class="{ 'text-red-500': node.latitude == null || node.longitude == null }">{{ node.long_name !== '' ? node.long_name : "-" }}</div>
+                                    <div class="flex space-x-1 text-sm text-gray-700">
+                                        <div>{{ node.node_id_hex }} / {{ node.node_id }}</div>
+                                    </div>
                                 </div>
                             </div>
-
                         </template>
 
                         <template v-else>
@@ -585,7 +588,7 @@
                             <div class="flex">
                                 <div class="my-auto mr-2">
                                     <div class="flex rounded-full h-12 w-12 text-white shadow" :class="[ `bg-[${getNodeColour(selectedNode.node_id)}]` ]">
-                                        <div class="mx-auto my-auto">{{ selectedNode.short_name }}</div>
+                                        <div class="mx-auto my-auto drop-shadow-sm">{{ selectedNode.short_name }}</div>
                                     </div>
                                 </div>
                                 <div class="my-auto mr-auto">
diff --git a/src/public/text-messages-embed.html b/src/public/text-messages-embed.html
index 3c4bde2..b2d47f4 100644
--- a/src/public/text-messages-embed.html
+++ b/src/public/text-messages-embed.html
@@ -53,7 +53,7 @@
                     <div class="mr-2 mt-2">
                         <a target="_blank" :href="`/?node_id=${message.from}`">
                             <div class="flex rounded-full h-12 w-12 text-white shadow" :class="[ `bg-[${getNodeColour(message.from)}]` ]">
-                                <div class="mx-auto my-auto">{{ getNodeShortName(message.from) }}</div>
+                                <div class="mx-auto my-auto drop-shadow-sm">{{ getNodeShortName(message.from) }}</div>
                             </div>
                         </a>
                     </div>