Auction show loading

astro.config.mjs

@@ -5,5 +5,18 @@ import vue from '@astrojs/vue';
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [vue()]
+  integrations: [vue()],
+  vite: {
+    css: {
+      preprocessorOptions: {
+        scss: {
+          quietDeps: true,
+          silenceDeprecations: [
+            // For Bootstrap
+            'import',
+          ],
+        }
+      }
+    }
+  }
 });

package.json

@@ -11,8 +11,11 @@
   "dependencies": {
     "@astrojs/vue": "^7.0.2",
     "@nanostores/vue": "^1.0.1",
+    "@popperjs/core": "^2.11.8",
     "astro": "^7.2.10",
+    "bootstrap": "^5.3.8",
     "nanostores": "^1.1.0",
+    "sass-embedded": "^1.104.0",
     "vue": "^3.5.42"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -10,16 +10,25 @@ importers:
     dependencies:
       '@astrojs/vue':
         specifier: ^7.0.2
-        version: 7.0.2(@types/node@25.0.3)(astro@7.2.10(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.3)(@types/node@25.0.3))(esbuild@0.28.2)(vue@3.5.42(typescript@5.9.3))
+        version: 7.0.2(@types/node@25.0.3)(astro@7.2.10(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.3)(@types/node@25.0.3)(sass-embedded@1.104.0)(sass@1.104.0))(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0)(vue@3.5.42(typescript@5.9.3))
       '@nanostores/vue':
         specifier: ^1.0.1
         version: 1.0.1(@nanostores/logger@1.0.0(nanostores@1.1.0))(nanostores@1.1.0)(vue@3.5.42(typescript@5.9.3))
+      '@popperjs/core':
+        specifier: ^2.11.8
+        version: 2.11.8
       astro:
         specifier: ^7.2.10
-        version: 7.2.10(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.3)(@types/node@25.0.3)
+        version: 7.2.10(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.3)(@types/node@25.0.3)(sass-embedded@1.104.0)(sass@1.104.0)
+      bootstrap:
+        specifier: ^5.3.8
+        version: 5.3.8(@popperjs/core@2.11.8)
       nanostores:
         specifier: ^1.1.0
         version: 1.1.0
+      sass-embedded:
+        specifier: ^1.104.0
+        version: 1.104.0
       vue:
         specifier: ^3.5.42
         version: 3.5.42(typescript@5.9.3)
@@ -408,6 +417,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@bufbuild/protobuf@2.14.1':
+    resolution: {integrity: sha512-agRJn3+EJDUe8AvxTx/LnHA/GErvLE62pSaSk7+MwFOtOv8eWBu/qCq2qoZjBjVZ3C2aiFJCveuSs17KMkYGOw==}
+
   '@capsizecss/unpack@4.0.1':
     resolution: {integrity: sha512-CuNiSqg7+e1cO/GjffyMOm5Tt2jUF9CWHHnvQ/UkqvtkGfHdgwEC0wpmq7fkN3gxwpRnrAN0WzO3vREKmNolMQ==}
     engines: {node: '>=18'}
@@ -783,9 +795,88 @@ packages:
   '@oxc-project/types@0.148.0':
     resolution: {integrity: sha512-Nm4s/jB+4FpFsPhWGEC4h7rzksesmtnMXomo6rCMcg/b8zLQuOziRgkCS1fxDCXOlJB/6Q8oABOZ/OP6RIPj9A==}
 
+  '@parcel/watcher-android-arm64@2.6.0':
+    resolution: {integrity: sha512-trgpLSCKRC/huFjXX/Smh+0sWe4+YtKfktIToiMl59ghz7z+qkH6kMvNnUbLyRs9N11t8l4svSCs1+5B3rOAhA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  '@parcel/watcher-darwin-arm64@2.6.0':
+    resolution: {integrity: sha512-Y3QV0gl7Q1zbfueunkWIERICbEojQFCgpyG7YqOGNFLsckXyI1xu9mAIUpKY9QBYzBtSkN8dBPwd3yiAO9ovMw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@parcel/watcher-darwin-x64@2.6.0':
+    resolution: {integrity: sha512-Ohv6OpzhUfKYD7Beb8kDvG0jbIxORCYY1JRdZnaBtnjjkJxgD7ZVL0nw2sCYd0yTMKTvz3nnTnOF3cDifK+kvw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@parcel/watcher-freebsd-x64@2.6.0':
+    resolution: {integrity: sha512-5HmXvDgs8VK+74jF9y9/2FE3/OnlcKmc56tjmSrEuZjpSZOGL+fvAu+HKJBdPs9uwoP2hE6TlSUpXZ/C5jUFmQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@parcel/watcher-linux-arm-glibc@2.6.0':
+    resolution: {integrity: sha512-Ps/hui3A+vMbjdqlqAowK2ZL8+BO8dBjxeWXj6npTBs3jx4wWmbPpaLuqwrQrSqIVMCnpWo238bJ1U37GhQOYg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  '@parcel/watcher-linux-arm-musl@2.6.0':
+    resolution: {integrity: sha512-9c6AUHgHoG+IY88MRIHupztQiQnrbqHYQjkM2btA+Bf/wQnQMuiD0Wfk1EVv3TlNT3x41uU71rn6E4xh/+zvkw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  '@parcel/watcher-linux-arm64-glibc@2.6.0':
+    resolution: {integrity: sha512-yHRqS2owEXe6Hic9z6Mh1ECsCd+ODVOGvZDyciqRd21+v+o+DnXMOrw50DSpIG2sb8GPEaPPmfeCAWKPJdq46g==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@parcel/watcher-linux-arm64-musl@2.6.0':
+    resolution: {integrity: sha512-WhB2e/V7rqdHHWZusBSPuy5Ei8S6lSz6FE5TKKQz5h3a0O+C+mhY7vxU9b/stqvMb8beLnPY82ZrFTLKs+SrKA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@parcel/watcher-linux-x64-glibc@2.6.0':
+    resolution: {integrity: sha512-ulGE6x6Oz6iAwg75T8YQSoguBWasniIbX+QWpaYPcCnDOpdWX3k+4xbEYPZVLxOuoJI+svJJPD3sEj8G7lrQ3A==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  '@parcel/watcher-linux-x64-musl@2.6.0':
+    resolution: {integrity: sha512-tkBYKt7YQrjIJWYDnto2YgO8MRkjlMTSNoRHzsXinBqbLdeOM3L32wPZJvIZxqaLMfSlS/4sUjH/6STVP/XDLw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  '@parcel/watcher-win32-arm64@2.6.0':
+    resolution: {integrity: sha512-gIZAP23jaHjGWasY/TY6yL7NHFClf0Ga7FN+iINvk+KN94rhm94lYZhFsbYFNcA04/onvGD9kKmiJLJB2HbNwQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@parcel/watcher-win32-x64@2.6.0':
+    resolution: {integrity: sha512-cA+/pXV2YkfxlIcXOQ5fSWqAzzPyD78/x5qbK/I0vUkrlYHA8TIz+MXjAbGouguKVSI4bOmkTSJ1/poVSsgt+A==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@parcel/watcher@2.6.0':
+    resolution: {integrity: sha512-7FNeNl8NCE7aINx7WXiKQrPYZWC/hvrTsmk6zmxbI7LTXE7hVek/n8AfVgpe2y82zl3w0HvCHN0bVKMBoJcC0w==}
+    engines: {node: '>= 10.0.0'}
+
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
+  '@popperjs/core@2.11.8':
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
+
   '@rolldown/binding-android-arm-eabi@1.2.7':
     resolution: {integrity: sha512-EypzgnYCwyVY4NDHKzGmNJT5b+XaQEBniHxsMdeIQLB/tcCzZnhqrzHpZFbX9iaxx+5RiB8caATBtfvZP7zVxQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1083,6 +1174,11 @@ packages:
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
+  bootstrap@5.3.8:
+    resolution: {integrity: sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==}
+    peerDependencies:
+      '@popperjs/core': ^2.11.8
+
   browserslist@4.28.1:
     resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -1116,6 +1212,9 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
+  colorjs.io@0.7.1:
+    resolution: {integrity: sha512-LY7OHnJZxHwT5UlzNa9bbhHHDbzB6yE5+3MIPwJEQKRvSCt/T4G7epsj+9j2BExUIIfXFIJGsIXUKdfrK9Q5tA==}
+
   comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
@@ -1315,6 +1414,10 @@ packages:
   h3@1.15.11:
     resolution: {integrity: sha512-L3THSe2MPeBwgIZVSH5zLdBBU90TOxarvhK9d04IDY2AmVS8j2Jz2LIWtwsGOU3lu2I5jCN7FNvVfY2+XyF+mg==}
 
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
   hast-util-to-html@9.0.5:
     resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
 
@@ -1333,6 +1436,9 @@ packages:
   http-cache-semantics@4.2.0:
     resolution: {integrity: sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==}
 
+  immutable@5.1.9:
+    resolution: {integrity: sha512-m8nVez3rwrgmWxtLMt1ZYXB2Lv7OKYn/disyxAlSDYAlKSlFoPPfIAmAM/M5xqL4m4C/wAPw7S2/CNaUii1Hxg==}
+
   iron-webcrypto@1.2.1:
     resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==}
 
@@ -1346,6 +1452,14 @@ packages:
     engines: {node: '>=20'}
     hasBin: true
 
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
   is-in-ssh@1.0.0:
     resolution: {integrity: sha512-jYa6Q9rH90kR1vKB6NM7qqd1mge3Fx4Dhw5TVlK1MUBqhEOuCagrEHMevNuCcbECmXZ0ThXkRm+Ymr51HwEPAw==}
     engines: {node: '>=20'}
@@ -1519,6 +1633,9 @@ packages:
   nlcst-to-string@4.0.0:
     resolution: {integrity: sha512-YKLBCcUYKAg0FNlOBT6aI91qFmSiFKiluk655WzPF+DDMA02qIyy8uiRqI8QXtcFpEvll12LpL5MXqEmAZ+dcA==}
 
+  node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+
   node-fetch-native@1.6.7:
     resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
 
@@ -1644,6 +1761,123 @@ packages:
     resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
     engines: {node: '>=18'}
 
+  rxjs@7.8.2:
+    resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
+
+  sass-embedded-all-unknown@1.104.0:
+    resolution: {integrity: sha512-+S5We++QAg0/wXeVstn4kaZQNZiHi/1FHFsuVRu6Qns/9+YH6aIExg5e8dE+ceNpnYIZUpoK3mdBJoxJhirReQ==}
+    cpu: ['!arm', '!arm64', '!riscv64', '!x64']
+
+  sass-embedded-android-arm64@1.104.0:
+    resolution: {integrity: sha512-Trknl/A+KTTGRsPWrKaVIF/uq468iTqZzXWMEK/e707bqnbodYvWBBkA7uOM1wtnJQIrepeYSp/CIQJnFr95EQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  sass-embedded-android-arm@1.104.0:
+    resolution: {integrity: sha512-yojf6KAo4EKbXVzzy4FkYJAez+qzj6NV2inEzsQQxvNfKxfX9INtC6u8UNwSjXL40M9vzAH03lygutq9zmhTCg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm]
+    os: [android]
+
+  sass-embedded-android-riscv64@1.104.0:
+    resolution: {integrity: sha512-UPR1U/qsTzIikl/DAmZn/11oPrz4DrnrbWANB7WGwz3AtYvLZeixEiVj8Yo2jNy6749zPD09Pyo352io8Y2Mxw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [riscv64]
+    os: [android]
+
+  sass-embedded-android-x64@1.104.0:
+    resolution: {integrity: sha512-NebAKvwfj4a7EbOf9LAzgo4f/uO1xFJbIoebzW8bmqdjeIMSAwJvFToIizxjDuOsIJ9M6AaADxwvDxgm8JTq+w==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [android]
+
+  sass-embedded-darwin-arm64@1.104.0:
+    resolution: {integrity: sha512-DYxsoOtA90/LabvQiFs/UVo6jrPbIlIvelSC0B9fxlB051ZBpEFnWamjLV2Xncp48E63voWTYGKpLlsHsi7clg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  sass-embedded-darwin-x64@1.104.0:
+    resolution: {integrity: sha512-zozGKOnR3mnlBqKhzfGH8ZqjPphaDzE5Zjx+H/IOb/ruR/KApTvYkRdi9Eq7OQvSJwL/EHYiyT2jgHaqQulOWw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  sass-embedded-linux-arm64@1.104.0:
+    resolution: {integrity: sha512-2TWOQodxIbwcp9fS01FCUbO2c8bnsdOgUCLB7aZDAhm6ZAkEL8GNIAyKxSMkVIjxndMqNHsG2UtCR2++03DQ+Q==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  sass-embedded-linux-arm@1.104.0:
+    resolution: {integrity: sha512-RX4t5jBlYtGrZwpuc1mtD3lzGuat+jyPidyN5hD5DURV7q39y4IampzopVJ9fvNZqsiGElYWnKyRJA49Q4xk7w==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  sass-embedded-linux-musl-arm64@1.104.0:
+    resolution: {integrity: sha512-NPcl0Cw9QXdGzYgjtLZD9MU3Mmr+N31R+Wa+hbbmlNwg1yghbF/bWrpE96oixrQivtCsY1yh9cONl6d+9NrS6Q==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  sass-embedded-linux-musl-arm@1.104.0:
+    resolution: {integrity: sha512-KjXKRY/1TDCNbRg/Htq4puzf5etQ9eFXG83O/328Km/1x2FuQMCmD+pSFTqQrj2LskZ8if+NYZJb3CQ1wzF0Pw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  sass-embedded-linux-musl-riscv64@1.104.0:
+    resolution: {integrity: sha512-/1JR6G1AfGs/paJk5nemuJmg7pOUgwXlz/WW2NhSDRHBgZnb6Zy6yMpkSHoienAOJSBGUmKceT03dQ/4b409CA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [riscv64]
+    os: [linux]
+
+  sass-embedded-linux-musl-x64@1.104.0:
+    resolution: {integrity: sha512-5wVjkPR74JdsoH9+NSKV7UCPAdMTxNoayZdu7B9PnmNkOJMRE5O8Jb2oJ3JXgSH/kcGXJ6Vl6dL8/EPLBAKkcg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  sass-embedded-linux-riscv64@1.104.0:
+    resolution: {integrity: sha512-Bq9xrONn23cyv5bdSuLm0RG1dcKl+lFQRc1k1UlncI2B2gqb6/OdakEa4Gv2HAmo+O6iOtK39lG9XT1ivTIoww==}
+    engines: {node: '>=14.0.0'}
+    cpu: [riscv64]
+    os: [linux]
+
+  sass-embedded-linux-x64@1.104.0:
+    resolution: {integrity: sha512-xznKQzFnNVNq+GiXPmBXIHLL2rlIoekDxE8HXNKgxXX6bn4fByuHApCmj5Uz+MpVOB154EYCbErztyoEcmnb9Q==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  sass-embedded-unknown-all@1.104.0:
+    resolution: {integrity: sha512-0+zhxrAt9PIsdWEVTe5Wgo+gtYdlyv0ASuuAEXT4e9w2yNArUqZ9Gez4Jn8EmtbF7x9uuZxPWbdnq9z65gCH7g==}
+    os: ['!android', '!darwin', '!linux', '!win32']
+
+  sass-embedded-win32-arm64@1.104.0:
+    resolution: {integrity: sha512-b8dKmgdgmTx0rSBLNPqLQiq4r/SDau0/3we7MG/8ULMneMSl2OoVttN2ilKSz993lqQu8FJSjx5fEjLSeXVaiA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  sass-embedded-win32-x64@1.104.0:
+    resolution: {integrity: sha512-tVL4NZKUo0+fIO2sT9V1DnBOo9wUbkRoic/NbVBThQdCjl07dn7PKW+ISSnY0EwQhCxdulMDek/JZT7c46vTCA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  sass-embedded@1.104.0:
+    resolution: {integrity: sha512-AW1ZaKM/o4t137+FNe9zkMFWAZlw+EbWuHopVbP0yc0vpvlYj8NqxgKKSsSqODZVgGON2FzKeFMJJHR+tXNzqA==}
+    engines: {node: '>=20.19.0'}
+    hasBin: true
+
+  sass@1.104.0:
+    resolution: {integrity: sha512-btHMApW2bgolvClhRW8AlQJzgI9lUB3pPSofBQQT+E46GWvf9o0TVQ13SYv5riWZVFyPN+JNz3TKW9XhBlc10w==}
+    engines: {node: '>=20.19.0'}
+    hasBin: true
+
   satteri@0.10.5:
     resolution: {integrity: sha512-Ao1LKpAEa9Wdg0otgbVKViZHEq9ebdXe4DMrp3s9vQAU0HNIuHnFEuMuOcm0ZIXyV0Yzxj91NvhLpvXZJO/5ZQ==}
 
@@ -1694,11 +1928,23 @@ packages:
   stringify-entities@4.0.4:
     resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
 
+  supports-color@8.1.1:
+    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
+    engines: {node: '>=10'}
+
   svgo@4.1.0:
     resolution: {integrity: sha512-bkxnTg1kSU0guhIBmibA6UUhrQmPVA1XsQLN+ylCd+UWzbnLkySOcXpyk1mrl05f+pcaCx2eHb+sp6BgMZWX+Q==}
     engines: {node: '>=16'}
     hasBin: true
 
+  sync-child-process@1.0.2:
+    resolution: {integrity: sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==}
+    engines: {node: '>=16.0.0'}
+
+  sync-message-port@1.2.0:
+    resolution: {integrity: sha512-gAQ9qrUN/UCypHtGFbbe7Rc/f9bzO88IwrG8TDo/aMKAApKyD6E3W4Cm0EfhfBb6Z6SKt59tTCTfD+n1xmAvMg==}
+    engines: {node: '>=16.0.0'}
+
   tiny-inflate@1.0.3:
     resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
 
@@ -1845,6 +2091,9 @@ packages:
     peerDependencies:
       browserslist: '>= 4.21.0'
 
+  varint@6.0.0:
+    resolution: {integrity: sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==}
+
   vfile-message@4.0.3:
     resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
 
@@ -2050,14 +2299,14 @@ snapshots:
       is-docker: 4.0.0
       package-manager-detector: 1.6.0
 
-  '@astrojs/vue@7.0.2(@types/node@25.0.3)(astro@7.2.10(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.3)(@types/node@25.0.3))(esbuild@0.28.2)(vue@3.5.42(typescript@5.9.3))':
+  '@astrojs/vue@7.0.2(@types/node@25.0.3)(astro@7.2.10(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.3)(@types/node@25.0.3)(sass-embedded@1.104.0)(sass@1.104.0))(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0)(vue@3.5.42(typescript@5.9.3))':
     dependencies:
-      '@vitejs/plugin-vue': 6.0.8(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2))(vue@3.5.42(typescript@5.9.3))
-      '@vitejs/plugin-vue-jsx': 5.1.6(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2))(vue@3.5.42(typescript@5.9.3))
+      '@vitejs/plugin-vue': 6.0.8(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0))(vue@3.5.42(typescript@5.9.3))
+      '@vitejs/plugin-vue-jsx': 5.1.6(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0))(vue@3.5.42(typescript@5.9.3))
       '@vue/compiler-sfc': 3.5.42
-      astro: 7.2.10(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.3)(@types/node@25.0.3)
-      vite: 8.2.2(@types/node@25.0.3)(esbuild@0.28.2)
-      vite-plugin-vue-devtools: 8.2.1(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2))(vue@3.5.42(typescript@5.9.3))
+      astro: 7.2.10(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.3)(@types/node@25.0.3)(sass-embedded@1.104.0)(sass@1.104.0)
+      vite: 8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0)
+      vite-plugin-vue-devtools: 8.2.1(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0))(vue@3.5.42(typescript@5.9.3))
       vue: 3.5.42(typescript@5.9.3)
     transitivePeerDependencies:
       - '@nuxt/kit'
@@ -2464,6 +2713,8 @@ snapshots:
   '@bruits/satteri-win32-x64-msvc@0.10.5':
     optional: true
 
+  '@bufbuild/protobuf@2.14.1': {}
+
   '@capsizecss/unpack@4.0.1':
     dependencies:
       fontkitten: 1.0.3
@@ -2734,8 +2985,67 @@ snapshots:
 
   '@oxc-project/types@0.148.0': {}
 
+  '@parcel/watcher-android-arm64@2.6.0':
+    optional: true
+
+  '@parcel/watcher-darwin-arm64@2.6.0':
+    optional: true
+
+  '@parcel/watcher-darwin-x64@2.6.0':
+    optional: true
+
+  '@parcel/watcher-freebsd-x64@2.6.0':
+    optional: true
+
+  '@parcel/watcher-linux-arm-glibc@2.6.0':
+    optional: true
+
+  '@parcel/watcher-linux-arm-musl@2.6.0':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-glibc@2.6.0':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-musl@2.6.0':
+    optional: true
+
+  '@parcel/watcher-linux-x64-glibc@2.6.0':
+    optional: true
+
+  '@parcel/watcher-linux-x64-musl@2.6.0':
+    optional: true
+
+  '@parcel/watcher-win32-arm64@2.6.0':
+    optional: true
+
+  '@parcel/watcher-win32-x64@2.6.0':
+    optional: true
+
+  '@parcel/watcher@2.6.0':
+    dependencies:
+      detect-libc: 2.1.2
+      is-glob: 4.0.3
+      node-addon-api: 7.1.1
+      picomatch: 4.0.7
+    optionalDependencies:
+      '@parcel/watcher-android-arm64': 2.6.0
+      '@parcel/watcher-darwin-arm64': 2.6.0
+      '@parcel/watcher-darwin-x64': 2.6.0
+      '@parcel/watcher-freebsd-x64': 2.6.0
+      '@parcel/watcher-linux-arm-glibc': 2.6.0
+      '@parcel/watcher-linux-arm-musl': 2.6.0
+      '@parcel/watcher-linux-arm64-glibc': 2.6.0
+      '@parcel/watcher-linux-arm64-musl': 2.6.0
+      '@parcel/watcher-linux-x64-glibc': 2.6.0
+      '@parcel/watcher-linux-x64-musl': 2.6.0
+      '@parcel/watcher-win32-arm64': 2.6.0
+      '@parcel/watcher-win32-x64': 2.6.0
+    optional: true
+
   '@polka/url@1.0.0-next.29': {}
 
+  '@popperjs/core@2.11.8': {}
+
   '@rolldown/binding-android-arm-eabi@1.2.7':
     optional: true
 
@@ -2859,22 +3169,22 @@ snapshots:
 
   '@ungap/structured-clone@1.3.0': {}
 
-  '@vitejs/plugin-vue-jsx@5.1.6(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2))(vue@3.5.42(typescript@5.9.3))':
+  '@vitejs/plugin-vue-jsx@5.1.6(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0))(vue@3.5.42(typescript@5.9.3))':
     dependencies:
       '@babel/core': 7.29.7
       '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.7)
       '@babel/plugin-transform-typescript': 7.29.7(@babel/core@7.29.7)
       '@rolldown/pluginutils': 1.0.1
       '@vue/babel-plugin-jsx': 2.0.1(@babel/core@7.29.7)
-      vite: 8.2.2(@types/node@25.0.3)(esbuild@0.28.2)
+      vite: 8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0)
       vue: 3.5.42(typescript@5.9.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@6.0.8(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2))(vue@3.5.42(typescript@5.9.3))':
+  '@vitejs/plugin-vue@6.0.8(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0))(vue@3.5.42(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.1
-      vite: 8.2.2(@types/node@25.0.3)(esbuild@0.28.2)
+      vite: 8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0)
       vue: 3.5.42(typescript@5.9.3)
 
   '@vue/babel-helper-vue-transform-on@1.5.0': {}
@@ -3034,7 +3344,7 @@ snapshots:
 
   aria-query@5.3.2: {}
 
-  astro@7.2.10(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.3)(@types/node@25.0.3):
+  astro@7.2.10(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.3)(@types/node@25.0.3)(sass-embedded@1.104.0)(sass@1.104.0):
     dependencies:
       '@astrojs/compiler-rs': 0.4.0(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.3)
       '@astrojs/internal-helpers': 0.11.0
@@ -3084,8 +3394,8 @@ snapshots:
       ultrahtml: 1.6.0
       unifont: 0.7.5
       unstorage: 1.17.5
-      vite: 8.2.2(@types/node@25.0.3)(esbuild@0.28.2)
-      vitefu: 1.1.3(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2))
+      vite: 8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0)
+      vitefu: 1.1.3(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0))
       xxhash-wasm: 1.1.0
       yargs-parser: 22.0.0
       zod: 4.5.4
@@ -3137,6 +3447,10 @@ snapshots:
 
   boolbase@1.0.0: {}
 
+  bootstrap@5.3.8(@popperjs/core@2.11.8):
+    dependencies:
+      '@popperjs/core': 2.11.8
+
   browserslist@4.28.1:
     dependencies:
       baseline-browser-mapping: 2.9.11
@@ -3165,6 +3479,8 @@ snapshots:
 
   clsx@2.1.1: {}
 
+  colorjs.io@0.7.1: {}
+
   comma-separated-tokens@2.0.3: {}
 
   commander@11.1.0: {}
@@ -3354,6 +3670,8 @@ snapshots:
       ufo: 1.6.4
       uncrypto: 0.1.3
 
+  has-flag@4.0.0: {}
+
   hast-util-to-html@9.0.5:
     dependencies:
       '@types/hast': 3.0.5
@@ -3380,12 +3698,22 @@ snapshots:
 
   http-cache-semantics@4.2.0: {}
 
+  immutable@5.1.9: {}
+
   iron-webcrypto@1.2.1: {}
 
   is-docker@3.0.0: {}
 
   is-docker@4.0.0: {}
 
+  is-extglob@2.1.1:
+    optional: true
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+    optional: true
+
   is-in-ssh@1.0.0: {}
 
   is-inside-container@1.0.0:
@@ -3528,6 +3856,9 @@ snapshots:
     dependencies:
       '@types/nlcst': 2.0.3
 
+  node-addon-api@7.1.1:
+    optional: true
+
   node-fetch-native@1.6.7: {}
 
   node-mock-http@1.0.4: {}
@@ -3653,6 +3984,106 @@ snapshots:
 
   run-applescript@7.1.0: {}
 
+  rxjs@7.8.2:
+    dependencies:
+      tslib: 2.8.1
+
+  sass-embedded-all-unknown@1.104.0:
+    dependencies:
+      sass: 1.104.0
+    optional: true
+
+  sass-embedded-android-arm64@1.104.0:
+    optional: true
+
+  sass-embedded-android-arm@1.104.0:
+    optional: true
+
+  sass-embedded-android-riscv64@1.104.0:
+    optional: true
+
+  sass-embedded-android-x64@1.104.0:
+    optional: true
+
+  sass-embedded-darwin-arm64@1.104.0:
+    optional: true
+
+  sass-embedded-darwin-x64@1.104.0:
+    optional: true
+
+  sass-embedded-linux-arm64@1.104.0:
+    optional: true
+
+  sass-embedded-linux-arm@1.104.0:
+    optional: true
+
+  sass-embedded-linux-musl-arm64@1.104.0:
+    optional: true
+
+  sass-embedded-linux-musl-arm@1.104.0:
+    optional: true
+
+  sass-embedded-linux-musl-riscv64@1.104.0:
+    optional: true
+
+  sass-embedded-linux-musl-x64@1.104.0:
+    optional: true
+
+  sass-embedded-linux-riscv64@1.104.0:
+    optional: true
+
+  sass-embedded-linux-x64@1.104.0:
+    optional: true
+
+  sass-embedded-unknown-all@1.104.0:
+    dependencies:
+      sass: 1.104.0
+    optional: true
+
+  sass-embedded-win32-arm64@1.104.0:
+    optional: true
+
+  sass-embedded-win32-x64@1.104.0:
+    optional: true
+
+  sass-embedded@1.104.0:
+    dependencies:
+      '@bufbuild/protobuf': 2.14.1
+      colorjs.io: 0.7.1
+      immutable: 5.1.9
+      rxjs: 7.8.2
+      supports-color: 8.1.1
+      sync-child-process: 1.0.2
+      varint: 6.0.0
+    optionalDependencies:
+      sass-embedded-all-unknown: 1.104.0
+      sass-embedded-android-arm: 1.104.0
+      sass-embedded-android-arm64: 1.104.0
+      sass-embedded-android-riscv64: 1.104.0
+      sass-embedded-android-x64: 1.104.0
+      sass-embedded-darwin-arm64: 1.104.0
+      sass-embedded-darwin-x64: 1.104.0
+      sass-embedded-linux-arm: 1.104.0
+      sass-embedded-linux-arm64: 1.104.0
+      sass-embedded-linux-musl-arm: 1.104.0
+      sass-embedded-linux-musl-arm64: 1.104.0
+      sass-embedded-linux-musl-riscv64: 1.104.0
+      sass-embedded-linux-musl-x64: 1.104.0
+      sass-embedded-linux-riscv64: 1.104.0
+      sass-embedded-linux-x64: 1.104.0
+      sass-embedded-unknown-all: 1.104.0
+      sass-embedded-win32-arm64: 1.104.0
+      sass-embedded-win32-x64: 1.104.0
+
+  sass@1.104.0:
+    dependencies:
+      chokidar: 5.0.0
+      immutable: 5.1.9
+      source-map-js: 1.2.1
+    optionalDependencies:
+      '@parcel/watcher': 2.6.0
+    optional: true
+
   satteri@0.10.5:
     dependencies:
       '@types/estree-jsx': 1.0.5
@@ -3740,6 +4171,10 @@ snapshots:
       character-entities-html4: 2.1.0
       character-entities-legacy: 3.0.0
 
+  supports-color@8.1.1:
+    dependencies:
+      has-flag: 4.0.0
+
   svgo@4.1.0:
     dependencies:
       commander: 11.1.0
@@ -3750,6 +4185,12 @@ snapshots:
       picocolors: 1.1.1
       sax: 1.6.1
 
+  sync-child-process@1.0.2:
+    dependencies:
+      sync-message-port: 1.2.0
+
+  sync-message-port@1.2.0: {}
+
   tiny-inflate@1.0.3: {}
 
   tinyclip@0.1.15: {}
@@ -3772,8 +4213,7 @@ snapshots:
 
   trough@2.2.0: {}
 
-  tslib@2.8.1:
-    optional: true
+  tslib@2.8.1: {}
 
   typescript@5.9.3:
     optional: true
@@ -3850,6 +4290,8 @@ snapshots:
       escalade: 3.2.0
       picocolors: 1.1.1
 
+  varint@6.0.0: {}
+
   vfile-message@4.0.3:
     dependencies:
       '@types/unist': 3.0.3
@@ -3860,17 +4302,17 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
-  vite-dev-rpc@2.0.0(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2)):
+  vite-dev-rpc@2.0.0(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0)):
     dependencies:
       birpc: 4.2.0
-      vite: 8.2.2(@types/node@25.0.3)(esbuild@0.28.2)
-      vite-hot-client: 2.2.0(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2))
+      vite: 8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0)
+      vite-hot-client: 2.2.0(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0))
 
-  vite-hot-client@2.2.0(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2)):
+  vite-hot-client@2.2.0(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0)):
     dependencies:
-      vite: 8.2.2(@types/node@25.0.3)(esbuild@0.28.2)
+      vite: 8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0)
 
-  vite-plugin-inspect@11.4.1(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2)):
+  vite-plugin-inspect@11.4.1(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0)):
     dependencies:
       ansis: 4.3.1
       error-stack-parser-es: 1.0.5
@@ -3880,24 +4322,24 @@ snapshots:
       perfect-debounce: 2.1.0
       sirv: 3.0.2
       unplugin-utils: 0.3.2
-      vite: 8.2.2(@types/node@25.0.3)(esbuild@0.28.2)
-      vite-dev-rpc: 2.0.0(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2))
+      vite: 8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0)
+      vite-dev-rpc: 2.0.0(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0))
 
-  vite-plugin-vue-devtools@8.2.1(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2))(vue@3.5.42(typescript@5.9.3)):
+  vite-plugin-vue-devtools@8.2.1(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0))(vue@3.5.42(typescript@5.9.3)):
     dependencies:
       '@vue/devtools-core': 8.2.1(vue@3.5.42(typescript@5.9.3))
       '@vue/devtools-kit': 8.2.1
       '@vue/devtools-shared': 8.2.1
       sirv: 3.0.2
-      vite: 8.2.2(@types/node@25.0.3)(esbuild@0.28.2)
-      vite-plugin-inspect: 11.4.1(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2))
-      vite-plugin-vue-inspector: 6.0.0(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2))
+      vite: 8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0)
+      vite-plugin-inspect: 11.4.1(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0))
+      vite-plugin-vue-inspector: 6.0.0(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0))
     transitivePeerDependencies:
       - '@nuxt/kit'
       - supports-color
       - vue
 
-  vite-plugin-vue-inspector@6.0.0(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2)):
+  vite-plugin-vue-inspector@6.0.0(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0)):
     dependencies:
       '@babel/core': 7.28.5
       '@babel/plugin-proposal-decorators': 7.28.0(@babel/core@7.28.5)
@@ -3908,11 +4350,11 @@ snapshots:
       '@vue/compiler-dom': 3.5.26
       kolorist: 1.8.0
       magic-string: 0.30.21
-      vite: 8.2.2(@types/node@25.0.3)(esbuild@0.28.2)
+      vite: 8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0)
     transitivePeerDependencies:
       - supports-color
 
-  vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2):
+  vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0):
     dependencies:
       lightningcss: 1.33.0
       picomatch: 4.0.7
@@ -3923,10 +4365,12 @@ snapshots:
       '@types/node': 25.0.3
       esbuild: 0.28.2
       fsevents: 2.3.3
+      sass: 1.104.0
+      sass-embedded: 1.104.0
 
-  vitefu@1.1.3(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2)):
+  vitefu@1.1.3(vite@8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0)):
     optionalDependencies:
-      vite: 8.2.2(@types/node@25.0.3)(esbuild@0.28.2)
+      vite: 8.2.2(@types/node@25.0.3)(esbuild@0.28.2)(sass-embedded@1.104.0)(sass@1.104.0)
 
   vue@3.5.42(typescript@5.9.3):
     dependencies:

src/components/LoginForm.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {ref} from "vue";
-import {setToken} from "./stores/token.js";
+import {saveToken} from "./scripts/load_token.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)
-    setToken(responseData)
+    saveToken(responseData)
   }
 }
 </script>

src/components/TopNav.astro

@@ -3,34 +3,15 @@ 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>
+<nav class="navbar navbar-expand bg-primary-subtle">
+    <div class="container-fluid">
+        <a class="brand p-2" href="/">NV</a>
+
+        <ul class="navbar-nav me-auto">
+            <li class="nav-item"><Link href="/auctions">Auctions</Link></li>
         </ul>
-    <ul class="right">
-        <li><UserAction client:only /></li>
+        <ul class="navbar-nav">
+            <UserAction client:load />
         </ul>
+    </div>
 </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>

src/components/auctions/Index.vue

@@ -1,38 +1,73 @@
 <script setup>
-import {watchEffect, ref, computed, watch} from "vue";
-  import {request} from "../lib/gateway.js";
-  import {useStore} from '@nanostores/vue'
-  import {$token, Loading, Anonymous} from "../stores/token.js";
+import {ref, computed, onMounted, defineProps} from "vue";
 
-  const pending = Symbol('pending')
+import {request} from "../lib/gateway.js";
+import {loadToken} from "../scripts/load_token.js";
+import {setAuctionId} from "./current_auction_store.js";
 
-  const qref = ref(pending)
-  const isPending = computed(() => qref.value === pending)
-  const data = computed(() => qref.value.data)
+const pending = Symbol('pending')
+
+const qref = ref(pending)
+const isPending = computed(() => qref.value === pending)
+const data = computed(() => qref.value.data)
+
+const {path} = defineProps(['path'])
+
+async function loadAuctions() { // TODO: add params
+  let token = loadToken()
+  if(!token.token) return;
 
-$token.subscribe(async token => {
-  if (token.token) {
   try {
     let response = await request("/auctions", {cors: true, token: token.token})
     qref.value = {error: null, headers: response.headers, data: await response.json()}
   } catch (error) {
     qref.value = {error}
   }
-  }
+}
+
+onMounted(async () => {
+  await loadAuctions()
 })
 
+function formatPrice(price) {
+  const fmt = new Intl.NumberFormat("en-US", {style: "currency", currency: "USD"}) // TODO: maybe load currency from backend or env
+
+  return fmt.format(price)
+}
+
+const auctionPath = (id) => path + `?id=${id}`
+
+function navigateToAuction(auction) {
+  let {id} = auction
+  let path = auctionPath(id)
+  history.pushState(id, null, path)
+  setAuctionId(id)
+}
+
 </script>
 
 <template>
-  <ul v-if="!isPending && data != null && data.length > 0">
-    <li v-for="auction in data" :key="auction.id">
-      <span>{{ auction.name }}</span>
-      <span v-if="auction.current_bid">{{ auction.current_bid }}</span>
-    </li>
-  </ul>
+  <template v-if="isPending">
+    <div class="spinner-border me-1" role="status"></div>
+    <span>Loading…</span>
+  </template>
+  <div v-else-if="!isPending && data != null && data.length > 0" class="auctions-section" role="list">
+    <div v-for="auction in data" :key="auction.id" class="card" role="listitem">
+      <div class="card-body">
+        <h2 class="h5">
+          <a :href="auctionPath(auction.id)" @click.prevent="navigateToAuction(auction)">{{ auction.name }}</a>
+        </h2>
+        <p class="text-end">{{ formatPrice(auction.currentBid || auction.startingPrice) }}</p>
+      </div>
+    </div>
+  </div>
   <p v-else>No auctions available</p>
 </template>
 
 <style scoped>
-
+.auctions-section {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
+  gap: 1em;
+}
 </style>

src/components/auctions/ShowDialog.vue

@@ -0,0 +1,60 @@
+<script setup>
+import {ref, watch, useTemplateRef, onMounted, defineProps} from "vue";
+import {useStore} from "@nanostores/vue";
+
+import {request} from "../lib/gateway.js";
+import {loadToken} from "../scripts/load_token.js";
+import {$currentAuctionId, resetAuction} from "./current_auction_store.js";
+
+const Loading = Symbol("loading")
+
+const currentAuctionId = useStore($currentAuctionId)
+const currentAuction = ref(Loading)
+const dialogRef = useTemplateRef('dialog')
+const {path} = defineProps(['path'])
+
+const showDialog = () => dialogRef.value.showModal()
+
+async function loadAuction() {
+  currentAuction.value = Loading
+  if(currentAuctionId.value == null) return
+
+  const res = await request(`/auctions/${currentAuctionId.value}`, {cors: true, token: loadToken().token})
+  currentAuction.value = await res.json()
+
+  showDialog()
+}
+
+onMounted(() => {
+  if(currentAuctionId.value !== null) loadAuction()
+})
+
+watch(currentAuctionId,
+    (val, prevVal) => {
+      if (val !== null && prevVal == null) loadAuction()
+      if (val == null) dialogRef.value.close()
+    },
+    {flush: 'post'})
+</script>
+
+<template>
+  <dialog ref="dialog" @close="resetAuction(path)">
+    <div class="card" v-if="currentAuctionId !== null && currentAuction !== Loading">
+      <div class="card-body">
+        <h2 class="h5">{{currentAuction.name}}</h2>
+        <div class="buttons">
+          <button type="button" class="btn btn-primary">Bid</button>
+          <button type="button" class="btn btn-outline-secondary" @click="$el.close()">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </dialog>
+</template>
+
+<style scoped>
+dialog {
+  /* TODO: maybe make it global */
+  min-width: min(90vw, 20rem);
+  padding: 0;
+}
+</style>

src/components/auctions/current_auction_store.js

@@ -0,0 +1,12 @@
+import { atom } from "nanostores";
+
+export const $currentAuctionId = atom(null);
+
+export function setAuctionId(data) {
+    $currentAuctionId.set(data)
+}
+
+export function resetAuction(path) {
+    history.pushState(null, null, path)
+    $currentAuctionId.set(null)
+}

src/components/auctions/scripts/current_auction_store_history.js

@@ -0,0 +1,6 @@
+import {setAuctionId} from "../current_auction_store.js";
+
+window.addEventListener('popstate', (event) => {
+    let {state} = event
+    setAuctionId(state)
+})

src/components/lib/check_user.js

@@ -1,5 +1,3 @@
-import {$token, Anonymous} from "../stores/token.js";
+import {loadToken, Anonymous} from "../scripts/load_token.js";
 
-$token.subscribe(token => {
-        if(token === Anonymous) { location.replace("/login") }
-})
+if(loadToken() === Anonymous) { location.replace("/login") }

src/components/scripts/load_bootstrap.js

@@ -0,0 +1 @@
+import * as bootstrap from 'bootstrap'

src/components/scripts/load_token.js

@@ -0,0 +1,27 @@
+const LOCAL_STORAGE_KEY="token"
+
+export const Anonymous = Symbol("anonymous")
+class Token {
+    constructor({token, expiresAt, userId}) {
+        this.token = token
+        this.expiresAt = new Date(expiresAt)
+        this.userId = userId
+    }
+}
+
+export function loadToken() {
+    let data = localStorage[LOCAL_STORAGE_KEY]
+    if (data == null) { return Anonymous }
+    data = JSON.parse(data)
+    if (data == null || data.token == null) { return Anonymous }
+
+    let token = new Token(data)
+    if(token.expiresAt < new Date()) { return Anonymous }
+
+    return token
+}
+
+export function saveToken(value) {
+    if(value == null || !value.token) return;
+    localStorage[LOCAL_STORAGE_KEY] = JSON.stringify(value)
+}

src/components/scripts/user_store.js

@@ -1,17 +0,0 @@
-import {$token, setAnon, setToken} from "../stores/token.js";
-
-const LOCAL_STORAGE_KEY="token"
-
-$token.subscribe(value => {
-    if(value == null || !value.token) return;
-    localStorage[LOCAL_STORAGE_KEY] = JSON.stringify(value)
-})
-
-window.addEventListener('load', () => {
-    let data = localStorage[LOCAL_STORAGE_KEY]
-    if (data == null) { return setAnon() }
-    data = JSON.parse(data)
-    if (data == null || data.token == null) { return setAnon() }
-
-    setToken(data)
-})

src/components/stores/token.js

@@ -1,23 +0,0 @@
-import { atom } from 'nanostores'
-
-export const Loading = Symbol("loading")
-export const Anonymous = Symbol("anonymous")
-class Token {
-    constructor({token, expiresAt}) {
-        this.token = token
-        this.expiresAt = new Date(expiresAt)
-    }
-}
-
-export const $token = atom(Loading)
-
-export function setAnon() {
-    $token.set(Anonymous)
-}
-
-export function setToken(data) {
-    let token = new Token(data)
-    if(token.expiresAt >= new Date()) {
-        $token.set(token)
-    } else { setAnon() }
-}

src/components/top_nav/Link.astro

@@ -3,6 +3,6 @@ const {href} = Astro.props
 const isActive = Astro.url.pathname.startsWith(href)
 ---
 
-<a class:list={[{active: isActive}]} href={href}>
+<a class:list={["nav-link", {active: isActive}]} href={href}>
     <slot></slot>
 </a>

src/components/top_nav/UserAction.vue

@@ -1,21 +1,41 @@
 <script setup>
-import {useStore} from '@nanostores/vue'
-import {$token, Loading, Anonymous} from "../stores/token.js";
+import {ref, onMounted} from "vue";
+import {loadToken, Anonymous} from "../scripts/load_token.js";
+import {request} from "../lib/gateway.js";
 
-const token = useStore($token)
+const Loading = Symbol("loading")
+const token = ref(Loading)
+const userData = ref(Loading)
+
+onMounted(async () => {
+  let tokenData = loadToken()
+  token.value = tokenData
+  if(tokenData !== Anonymous) {
+    let response = await request("/user_data", {cors: true, token: tokenData.token})
+    userData.value = await response.json()
+  } else {
+    userData.value = null
+  }
+})
 </script>
 
 <template>
-  <div v-if="token === Loading" class="placeholder"></div> <!-- TODO: replace with an actual placeholder -->
-  <a href="/login" v-else-if="token === Anonymous">Login</a>
-  <span v-else>{{ token.username || "Username" }}</span>
+  <li :class="['nav-item', {'dropdown': (token !== Loading && token !== Anonymous)}]">
+    <div v-if="token === Loading || userData === Loading" class="placeholder"></div>
+    <a v-else-if="token === Anonymous" class="nav-link" href="/login">Login</a>
+    <template v-else>
+      <a href="#" class="btn btn-secondary dropdown-toggle" role="button"
+         data-bs-toggle="dropdown">{{ userData.username || "Username" }}</a>
+      <ul class="dropdown-menu dropdown-menu-end">
+        <li><a href="#" class="dropdown-item">Logout</a></li>
+      </ul>
+    </template>
+  </li>
 </template>
 
 <style scoped>
-  .placeholder {
+.placeholder {
   display: inline-block;
   width: 2em;
-    height: 1em;
-    background: gray;
-  }
+}
 </style>

src/layouts/Layout.astro

@@ -1,5 +1,6 @@
 ---
-import '../styles/app.css'
+import '../styles/app.scss'
+
 import TopNav from '../components/TopNav.astro'
 
 const {title} = Astro.props
@@ -13,21 +14,22 @@ const {title} = Astro.props
         <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>
+        <script src="../components/scripts/load_bootstrap.js"></script>
     </head>
     <body>
         <header>
             <TopNav />
         </header>
+        <main class="container">
             <h1>{title}</h1>
             <slot/>
+        </main>
 
         {import.meta.env.DEV &&
             <script>
                 import {logger} from '@nanostores/logger'
-                import {$token} from "../components/stores/token";
 
-                let _destroy = logger({user: $token})
+                let _destroy = logger({})
                 </script>
         }
     </body>

src/pages/auctions.astro

@@ -2,10 +2,13 @@
 import Layout from '../layouts/Layout.astro';
 
 import Auctions from '../components/auctions/Index.vue'
+import AuctionShowDialog from '../components/auctions/ShowDialog.vue'
 ---
 
 <Layout title="Auctions">
-    <Auctions client:load />
+    <Auctions path={ Astro.url.pathname } client:load />
+    <AuctionShowDialog path={ Astro.url.pathname } client:load />
 
     <script src="../components/lib/check_user.js"></script>
+    <script src="../components/auctions/scripts/current_auction_store_history.js"></script>
 </Layout>

src/styles/app.css

@@ -1,14 +0,0 @@
-@layer reset, base, components;
-
-@layer reset {
-    html, body {
-        margin: 0;
-        min-height: 100%;
-    }
-}
-
-@layer base {
-    body {
-        font-family: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
-    }
-}

src/styles/app.scss

@@ -0,0 +1,7 @@
+@import "bootstrap/scss/bootstrap";
+
+/* Minor adjustments */
+
+.card-body > p:last-child {
+  margin-bottom: 0;
+}