feat: add no-select CSS class and apply it to UI elements to prevent text selection

Add a reusable `.no-select` CSS class with cross-browser user-select: none properties
and apply it to navigation links, sidebar headings, chat room links, and avatar
elements in the message list to improve UI consistency and prevent accidental
text selection during interaction.

src/snek/static/base.css

@@ -63,7 +63,12 @@ header nav a {
   font-size: 1em;
   transition: color 0.3s;
 }
-
+.no-select {
+      -webkit-user-select: none;  /* Chrome, Safari, Opera */
+      -moz-user-select: none;     /* Firefox */
+      -ms-user-select: none;      /* Internet Explorer/Edge */
+      user-select: none;          /* Standard syntax */
+    }
 
 header nav a:hover {
   color: #fff;

src/snek/static/message-list.js

@@ -74,6 +74,7 @@ class MessageListElement extends HTMLElement {
 
         const avatar = document.createElement("div");
         avatar.classList.add("avatar");
+        avatar.classList.add("no-select");
         avatar.style.backgroundColor = message.color;
         avatar.style.color = "black";
         avatar.innerText = message.user_nick[0];

src/snek/templates/app.html

@@ -25,23 +25,23 @@
   <header>
     <div class="logo">Snek</div>
     <nav>
-      <a href="/web.html">🏠</a>
+      <a class="no-select" href="/web.html">🏠</a>
-      <a href="/search-user.html">🔍</a>
+      <a class="no-select" href="/search-user.html">🔍</a>
-      <a style="display:none" id="install-button" href="#">📥</a>
+      <a class="no-select" style="display:none" id="install-button" href="#">📥</a>
-      <a href="/web.html">👥</a>
+      <a class="no-select" href="/web.html">👥</a>
-      <a href="#">⚙️</a>
+      <a class="no-select" href="#">⚙️</a>
-      <a href="/logout.html">🔒</a>
+      <a class="no-select" href="/logout.html">🔒</a>
     </nav>
   </header>
   <main>
     {% block sidebar %}
     <aside class="sidebar">
-      <h2>Chat Rooms</h2>
+      <h2 class="no-select">Chat Rooms</h2>
       <ul>
-        <li><a href="#">General</a></li>
+        <li><a class="no-select" href="#">General</a></li>
-        <li><a href="#">Development</a></li>
+        <li><a class="no-select" href="#">Development</a></li>
-        <li><a href="#">Support</a></li>
+        <li><a class="no-select" href="#">Support</a></li>
-        <li><a href="#">Random</a></li>
+        <li><a class="no-select" href="#">Random</a></li>
        
       </ul>
     </aside>