add cursor style

frontend/static/frontend/css/base.css

@@ -21,16 +21,31 @@
 }
 
 body {
-    background: radial-gradient(circle at top, #0b1f0e 0%, #041005 45%, #020a03 100%);
+    background: radial-gradient(
+        circle at top,
+        #0b1f0e 0%,
+        #041005 45%,
+        #020a03 100%
+    );
     color: var(--map-text);
-    font-family: "JetBrains Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas",
+    font-family:
+        "JetBrains Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas",
         monospace;
 }
 
+strong {
+    font-weight: 800;
+}
+
 #map {
     width: 100%;
     height: 100vh;
-    background: radial-gradient(circle at 20% 10%, rgba(12, 48, 20, 0.85), rgba(4, 14, 7, 0.9)),
+    background:
+        radial-gradient(
+            circle at 20% 10%,
+            rgba(12, 48, 20, 0.85),
+            rgba(4, 14, 7, 0.9)
+        ),
         linear-gradient(140deg, rgba(5, 24, 10, 0.95), rgba(2, 8, 4, 0.98));
 }
 
@@ -46,11 +61,18 @@ body {
     justify-content: space-between;
     padding: 0.85rem 1.5rem;
     border-radius: 999px;
-    background: linear-gradient(120deg, rgba(7, 24, 11, 0.9), rgba(6, 20, 9, 0.75));
+    background: linear-gradient(
+        120deg,
+        rgba(7, 24, 11, 0.9),
+        rgba(6, 20, 9, 0.75)
+    );
     backdrop-filter: blur(16px);
     border: 1px solid var(--map-border);
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 24px var(--map-glow);
-    font-family: "JetBrains Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas",
+    box-shadow:
+        0 18px 40px rgba(0, 0, 0, 0.45),
+        0 0 24px var(--map-glow);
+    font-family:
+        "JetBrains Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas",
         monospace;
     color: var(--map-text);
 }
@@ -92,7 +114,9 @@ body {
 .site-link:hover {
     transform: translateY(-1px);
     border-color: var(--map-border-strong);
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35), 0 0 16px var(--map-glow);
+    box-shadow:
+        0 10px 20px rgba(0, 0, 0, 0.35),
+        0 0 16px var(--map-glow);
 }
 
 .site-link--accent {
@@ -127,9 +151,16 @@ body {
     align-items: center;
     justify-content: center;
     padding: 4rem 1.5rem;
-    background: radial-gradient(circle at top, #0e2613, #07180c 35%, #041106 65%, #020a03);
+    background: radial-gradient(
+        circle at top,
+        #0e2613,
+        #07180c 35%,
+        #041106 65%,
+        #020a03
+    );
     color: var(--map-text);
-    font-family: "JetBrains Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas",
+    font-family:
+        "JetBrains Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas",
         monospace;
 }
 
@@ -138,7 +169,9 @@ body {
     background: var(--map-surface);
     border-radius: 24px;
     padding: 2.5rem;
-    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 22px var(--map-glow);
+    box-shadow:
+        0 24px 60px rgba(0, 0, 0, 0.5),
+        0 0 22px var(--map-glow);
     border: 1px solid var(--map-border);
 }
 
@@ -229,7 +262,9 @@ body {
 
 .auth-submit:hover {
     transform: translateY(-1px);
-    box-shadow: 0 12px 25px rgba(15, 214, 79, 0.35), 0 0 18px var(--map-glow-strong);
+    box-shadow:
+        0 12px 25px rgba(15, 214, 79, 0.35),
+        0 0 18px var(--map-glow-strong);
 }
 
 .auth-footer {

frontend/static/frontend/ts/main.ts

@@ -1,15 +1,12 @@
 import { HIGHLIGHT_LAYER } from "./layers";
-import add from "./lib/add";
 
 import { Map } from "maplibre-gl";
 
-console.log(add(1, 2));
-
 const map = new Map({
   style:
     "https://api.maptiler.com/maps/019be805-c88e-7c8b-9850-bc704d72e604/style.json?key=8nmgHEIZQiIgqQj3RZNa",
   container: "map",
-  zoom: 14,
+  zoom: 17,
 });
 
 map.on("load", () => {
@@ -29,13 +26,16 @@ map.on("load", () => {
     });
 
     if (features && features.length > 0) {
-      const hoveredId = features[0].id;
+      const feature = features[0];
+      const hoveredId = feature.id;
 
       if (hoveredId) {
         map.setFilter("buildings-highlight", ["==", ["id"], hoveredId]);
+        map.getCanvas().style.cursor = "pointer";
       }
     } else {
       map.setFilter("buildings-highlight", ["==", ["id"], ""]);
+      map.getCanvas().style.cursor = "";
     }
   });
 });

frontend/templates/frontend/partials/header.html

@@ -3,7 +3,7 @@
     <div class="site-actions">
         {% if user.is_authenticated %}
             <span class="site-user">
-                {{ user.profile.display_name|default:user.get_username }}
+                Welcome, <strong>{{ user.profile.display_name|default:user.get_username }}</strong>
             </span>
             <a class="site-link" href="{% url 'logout' %}">Logout</a>
         {% else %}