From dfbcaafb777cb3477b057d06159a4276c526f5cd Mon Sep 17 00:00:00 2001
From: Artemiy Solopov <a.solopov.001@gmail.com>
Date: Sun, 18 Jan 2026 01:23:55 +0200
Subject: [PATCH] Reworked user state and login

---
 src/components/LoginForm.vue          |  4 +--
 src/components/TopNav.astro           | 36 +++++++++++++++++++++++
 src/components/scripts/user_store.js  | 13 +++++----
 src/components/stores/user.js         | 10 ++++++-
 src/components/top_nav/Link.astro     |  8 +++++
 src/components/top_nav/UserAction.vue | 21 ++++++++++++++
 src/layouts/Layout.astro              | 42 +++++++++++++++------------
 src/pages/index.astro                 |  2 --
 8 files changed, 106 insertions(+), 30 deletions(-)
 create mode 100644 src/components/TopNav.astro
 create mode 100644 src/components/top_nav/Link.astro
 create mode 100644 src/components/top_nav/UserAction.vue

diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
index ef8d732..de1c7d2 100644
--- a/src/components/LoginForm.vue
+++ b/src/components/LoginForm.vue
@@ -1,6 +1,6 @@
 <script setup>
 import {ref} from "vue";
-import {$user} from "./stores/user.js";
+import {setLoggedInUser} from "./stores/user.js";
 import * as gateway from "./lib/gateway.js";
 
 const formData = ref({username: '', password: ''})
@@ -17,7 +17,7 @@ async function formSubmit() {
   if(response.status === 200) {
     const responseData = await response.json()
     console.log(responseData)
-    $user.set(responseData)
+    setLoggedInUser(responseData.token, responseData.expiresAt)
   }
 }
 </script>
diff --git a/src/components/TopNav.astro b/src/components/TopNav.astro
new file mode 100644
index 0000000..d810479
--- /dev/null
+++ b/src/components/TopNav.astro
@@ -0,0 +1,36 @@
+---
+import Link from './top_nav/Link.astro'
+import UserAction from './top_nav/UserAction.vue'
+---
+
+<nav>
+    <a class="brand" href="/">NV</a>
+    <ul class="center">
+        <li><Link href="/auctions">Auctions</Link></li>
+    </ul>
+    <ul class="right">
+        <li><UserAction client:load /></li>
+    </ul>
+</nav>
+
+<style>
+    nav {
+        display: flex;
+        flex-flow: row nowrap;
+        width: 100%;
+
+        > ul {
+            list-style: none;
+            display: flex;
+            flex-flow: row nowrap;
+        }
+
+        > .center {
+            margin-inline: auto;
+        }
+
+        > .right {
+            margin-left: auto;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/scripts/user_store.js b/src/components/scripts/user_store.js
index eee75e1..9b1a0bf 100644
--- a/src/components/scripts/user_store.js
+++ b/src/components/scripts/user_store.js
@@ -1,17 +1,18 @@
-import {$user} from "../stores/user.js";
+import {$user, setAnonUser, setLoggedInUser} from "../stores/user.js";
 
 const LOCAL_STORAGE_KEY="user"
 
 $user.subscribe(value => {
-    if(value == null) return;
+    if(value == null || !value.initialized) return;
     localStorage[LOCAL_STORAGE_KEY] = JSON.stringify(value)
 })
 
 window.addEventListener('load', () => {
     let data = localStorage[LOCAL_STORAGE_KEY]
-    if (data == null) { return }
+    if (data == null) { return setAnonUser() }
     data = JSON.parse(data)
-    if (data == null || data.token == null) { return }
-    if(Date.parse(data.expiresAt) < Date()) { return } // TODO: this should probably have more logic
-    $user.set(data)
+    if (data == null || data.token == null) { return setAnonUser() }
+    if(Date.parse(data.expiresAt) < Date()) { return setAnonUser() }
+
+    setLoggedInUser(data.token, data.expiresAt)
 })
\ No newline at end of file
diff --git a/src/components/stores/user.js b/src/components/stores/user.js
index 01f30b4..a022427 100644
--- a/src/components/stores/user.js
+++ b/src/components/stores/user.js
@@ -1,3 +1,11 @@
 import { atom } from 'nanostores'
 
-export const $user = atom(null)
+export const $user = atom({})
+
+export function setAnonUser() {
+    $user.set({initialized: true})
+}
+
+export function setLoggedInUser(token, expiresAt) {
+    $user.set({initialized: true, loggedIn: true, token: token, expiresAt: expiresAt})
+}
\ No newline at end of file
diff --git a/src/components/top_nav/Link.astro b/src/components/top_nav/Link.astro
new file mode 100644
index 0000000..98e211b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/top_nav/UserAction.vue b/src/components/top_nav/UserAction.vue
new file mode 100644
index 0000000..21ff39f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index acad1ff..973a33c 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,30 +1,34 @@
 ---
 import '../styles/app.css'
+import TopNav from '../components/TopNav.astro'
 
 const {title} = Astro.props
 ---
 
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Neon Vertigo</title>
-		<script src="../components/scripts/user_store.js"></script>
-	</head>
-	<body>
-		<h1>{title}</h1>
-		<slot />
+    <head>
+        <meta charset="UTF-8"/>
+        <meta name="viewport" content="width=device-width"/>
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
+        <meta name="generator" content={Astro.generator}/>
+        <title>Neon Vertigo</title>
+        <script src="../components/scripts/user_store.js"></script>
+    </head>
+    <body>
+        <header>
+            <TopNav />
+        </header>
+        <h1>{title}</h1>
+        <slot/>
 
-		{import.meta.env.DEV &&
-			<script>
-				import { logger } from '@nanostores/logger'
-				import {$user} from "../components/stores/user";
+        {import.meta.env.DEV &&
+            <script>
+                import {logger} from '@nanostores/logger'
+                import {$user} from "../components/stores/user";
 
-				let _destroy = logger({user: $user})
-				</script>
-		}
-	</body>
+                let _destroy = logger({user: $user})
+                </script>
+        }
+    </body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 987dc59..c7b7b7b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,6 +3,4 @@ import Layout from '../layouts/Layout.astro';
 ---
 
 <Layout title="Welcome">
-    <!-- TODO: depend on user state for rendering login -->
-    <a href="/login">Login</a>
 </Layout>