Reworked user state and login

src/components/top_nav/Link.astro

@@ -0,0 +1,8 @@
+---
+const {href} = Astro.props
+const isActive = Astro.url.pathname.startsWith(href)
+---
+
+<a class:list={[{active: isActive}]} href={href}>
+    <slot></slot>
+</a>

src/components/top_nav/UserAction.vue

@@ -0,0 +1,21 @@
+<script setup>
+import {useStore} from '@nanostores/vue'
+import {$user} from "../stores/user.js";
+
+const user = useStore($user)
+</script>
+
+<template>
+  <div v-if="!user.initialized" class="placeholder"></div> <!-- TODO: replace with an actual placeholder -->
+  <a href="/login" v-else-if="!user.loggedIn">Login</a>
+  <span v-else>{{ user.username || "Username" }}</span>
+</template>
+
+<style scoped>
+  .placeholder {
+    display: inline-block;
+    width: 2em;
+    height: 1em;
+    background: gray;
+  }
+</style>