Updated search.

src/snek/templates/search_user.html

@@ -13,16 +13,90 @@
             <input type="text" placeholder="Username" name="query" value="{{query}}" REQUIRED></input>
             <fancy-button size="auto" text="Search" url="submit"></fancy-button>
         </form>
-        <ul>
+        <div class="threads">
             {% for user in users %}
-            <li>
+        <a href="/channel/{{user.uid}}.html" style="max-width:100%;" data-uid="{{user.uid}}" data-color="{{user.color}}" data-channel_uid="{{user.uid}}"
-                <a href="/channel/{{user.uid.value}}.html">{{user.username.value}}</a>
+                                                                                                                         data-username="{{user.username}}" data-nick="{{user.nick}}" data-last_ping="{{user.last_ping}}" 
-            </li>
+            class="thread">
+            <div class="avatar" style="opacity: 1; background-color: {{user.color}}; color: black;"><img
+                    src="/avatar/{{user.uid}}.svg" /></div>
+            <div class="message-content">
+                <div class="author" style="opacity: 1; color: {{user.color}};">{{user.nick}}</div>
+                <div class="text">{% autoescape false %}{% emoji %}{% linkify %}{% markdown %}{% autoescape false %}{%raw %}{% endraw%}{%endautoescape%}{% endmarkdown %}{% endlinkify %}{% endemoji %}{%
+                    endautoescape %}</div>
+                <div class="time opacity: 1; no-select" data-created_at="{{user.last_ping}}">{{user.last_ping}}</div>
+            </div>
+        </a>
+
+
 
             {% endfor %}
-        </ul>
+    </div>
-
 
     </div>
 </section>
+<script>
+
+    document.querySelector("[name=query]").focus();
+
+    function updateTimes() {
+        document.querySelectorAll(".time").forEach((time) => {
+            time.innerText = "Last seen: " + app.timeDescription(time.dataset.created_at);
+        });
+    }
+
+
+    const threadsContainer = document.querySelector(".chat-threads");
+
+    function updateLayout(doScrollDown) {
+        updateTimes();
+    }
+
+    setInterval(updateTimes, 1000);
+
+    function isMentionToMe(message) {
+        const mentionText = '@{{ current_user.username.value }}';
+        return message.toLowerCase().includes(mentionText);
+    }
+    function extractMentions(message) {
+        return [...new Set(message.match(/@\w+/g) || [])];
+    }
+    function isMentionForSomeoneElse(message) {
+        const mentions = extractMentions(message);
+        const mentionText = '@{{ current_user.username.value }}';
+        return mentions.length > 0 && mentions.indexOf(mentionText) == -1;
+    }
+
+    app.addEventListener("channel-message", (data) => {
+        if (data.channel_uid !== channelUid) {
+            if (!isMentionForSomeoneElse(data.message)) {
+                channelSidebar.notify(data);
+                app.playSound("messageOtherChannel");
+            }
+
+            return;
+        }
+        if (data.username !== "{{ current_user.username.value }}") {
+            if (isMentionToMe(data.message)) {
+                app.playSound("mention");
+            } else if (!isMentionForSomeoneElse(data.message)) {
+                app.playSound("message");
+            }
+        }
+
+        const threadsContainer = document.querySelector(".chat-threads");
+
+        const message = document.createElement("div");
+        message.innerHTML = data.html;
+        document.querySelector(".chat-threads").appendChild(message.firstChild);
+        updateLayout();
+        setTimeout(() => {
+            updateLayout()
+        }, 1000);
+    });
+
+    updateLayout(true);
+</script>
+
+
 {% endblock %}

src/snek/view/search_user.py

@@ -40,12 +40,12 @@ class SearchUserView(BaseFormView):
         users = []
         query = self.request.query.get("query")
         if query:
-            users = await self.app.services.user.search(query)
+            users = [user.record for user in  await self.app.services.user.search(query)]
 
         if self.request.path.endswith(".json"):
             return await super().get()
-
+        current_user = await self.app.services.user.get(uid=self.session.get("uid"))
-        return await self.render_template("search_user.html", {"users": users, "query": query or ''})
+        return await self.render_template("search_user.html", {"users": users, "query": query or '','current_user': current_user})
 
     async def submit(self, form):
         if await form.is_valid: