Add UserButton, update Header & deps

Add a new src/components/UserButton.vue and update src/components/Header.astro to integrate UI changes. Add @halo-dev/api-client and ky to package.json and update editor settings to use Prettier for .vue and .astro files. Regenerate pnpm lockfile.

.vscode/settings.json

@@ -2,5 +2,11 @@
   "emmet.includeLanguages": {
     "astro": "html"
   },
-  "i18n-ally.localesPaths": ["demo-themes/theme-earth/i18n"]
+  "i18n-ally.localesPaths": ["demo-themes/theme-earth/i18n"],
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[astro]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

package.json

@@ -27,7 +27,9 @@
     "@astrojs/mdx": "^5.0.3",
     "@astrojs/rss": "^4.0.18",
     "@astrojs/vue": "^6.0.1",
+    "@halo-dev/api-client": "^2.23.0",
     "astro": "^6.1.4",
+    "ky": "^2.0.0",
     "sharp": "^0.34.5",
     "vue": "^3.5.32"
   },

src/components/Header.astro

@@ -1,5 +1,6 @@
 ---
 import ThemeSwitcher from "./ThemeSwitcher.vue";
+import UserButton from "./UserButton.vue";
 ---
 
 <header>
@@ -17,7 +18,15 @@ import ThemeSwitcher from "./ThemeSwitcher.vue";
       >
       </a>
     </nav>
-    <ThemeSwitcher client:load />
+    <div class="header-actions">
+      <ThemeSwitcher client:load />
+      <UserButton client:load>
+        <div slot="fallback" class="user-button-fallback" aria-hidden="true">
+          <span class="user-button-fallback__avatar"></span>
+          <span class="user-button-fallback__text"></span>
+        </div>
+      </UserButton>
+    </div>
   </div>
 </header>
 
@@ -58,6 +67,53 @@ import ThemeSwitcher from "./ThemeSwitcher.vue";
     display: flex;
     align-items: center;
     gap: 0.2rem;
+    flex: 1;
+  }
+
+  .header-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    margin-left: auto;
+  }
+
+  .user-button-fallback {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.55rem;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    width: 112px;
+    height: 34px;
+    padding: 0 0.7rem;
+    border-radius: 8px;
+    pointer-events: none;
+  }
+
+  .user-button-fallback__avatar,
+  .user-button-fallback__text {
+    display: block;
+    background: linear-gradient(
+      90deg,
+      var(--bg-raised) 0%,
+      color-mix(in srgb, var(--bg-raised) 78%, var(--ink) 22%) 50%,
+      var(--bg-raised) 100%
+    );
+    background-size: 200% 100%;
+    animation: user-button-fallback-shimmer 1.2s ease-in-out infinite;
+  }
+
+  .user-button-fallback__avatar {
+    width: 20px;
+    height: 20px;
+    border-radius: 999px;
+    flex-shrink: 0;
+  }
+
+  .user-button-fallback__text {
+    width: 100%;
+    height: 0.72rem;
+    border-radius: 999px;
   }
 
   nav :global(a) {
@@ -96,6 +152,21 @@ import ThemeSwitcher from "./ThemeSwitcher.vue";
       flex-wrap: wrap;
       gap: 0.1rem;
       margin-left: -0.65rem;
+      flex: initial;
+    }
+
+    .header-actions {
+      margin-left: 0;
+    }
+  }
+
+  @keyframes user-button-fallback-shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+
+    100% {
+      background-position: -200% 0;
     }
   }
 </style>

src/components/UserButton.vue

@@ -0,0 +1,185 @@
+<script lang="ts" setup>
+import type { DetailedUser } from "@halo-dev/api-client";
+import ky from "ky";
+import { computed, onMounted, ref } from "vue";
+
+const user = ref<DetailedUser | null>(null);
+const isLoading = ref(true);
+
+const isAnonymous = computed(() => {
+  return user.value?.user.metadata.name === "anonymousUser";
+});
+
+const displayName = computed(() => {
+  return (
+    user.value?.user.spec.displayName ||
+    user.value?.user.metadata.name ||
+    "Account"
+  );
+});
+
+const avatarSrc = computed(() => {
+  return user.value?.user.spec.avatar || "";
+});
+
+const avatarLabel = computed(() => {
+  if (isAnonymous.value) {
+    return "?";
+  }
+
+  return displayName.value.charAt(0).toUpperCase();
+});
+
+onMounted(async () => {
+  try {
+    user.value = await ky
+      .get<DetailedUser>(`/apis/api.console.halo.run/v1alpha1/users/-`)
+      .json();
+  } catch {
+    user.value = null;
+  } finally {
+    isLoading.value = false;
+  }
+});
+</script>
+<template>
+  <div
+    v-if="isLoading"
+    class="user-button-shell user-button-shell--loading"
+    aria-busy="true"
+    aria-live="polite"
+  >
+    <span
+      class="user-button-avatar user-button-avatar--skeleton"
+      aria-hidden="true"
+    ></span>
+    <span class="user-button-text-skeleton" aria-hidden="true"></span>
+    <span class="sr-only">Loading user state</span>
+  </div>
+  <a
+    href="/uc"
+    v-else-if="user && !isAnonymous"
+    class="user-button-shell"
+    :title="displayName"
+  >
+    <span class="user-button-avatar" aria-hidden="true">
+      <img
+        v-if="avatarSrc"
+        class="user-button-avatar__image"
+        :src="avatarSrc"
+        :alt="displayName"
+      />
+      <span v-else>{{ avatarLabel }}</span>
+    </span>
+    <span class="user-button-text">{{ displayName }}</span>
+  </a>
+  <a v-else class="user-button-shell user-button-shell--link" href="/login">
+    <span class="user-button-avatar" aria-hidden="true">{{ avatarLabel }}</span>
+    <span class="user-button-text">Login</span>
+  </a>
+</template>
+
+<style scoped>
+.user-button-shell {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: 112px;
+  height: 34px;
+  padding: 0 0.7rem;
+  border-radius: 8px;
+  color: var(--ink-2);
+  background: transparent;
+}
+
+.user-button-shell--link {
+  text-decoration: none;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease;
+}
+
+.user-button-shell--link:hover {
+  background: var(--bg-raised);
+  color: var(--ink);
+}
+
+.user-button-shell--loading {
+  pointer-events: none;
+}
+
+.user-button-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  width: 20px;
+  height: 20px;
+  border-radius: 999px;
+  background: var(--bg-raised);
+  color: var(--ink);
+  font-size: 0.72rem;
+  font-weight: 700;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.user-button-avatar__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.user-button-avatar--skeleton,
+.user-button-text-skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--bg-raised) 0%,
+    color-mix(in srgb, var(--bg-raised) 78%, var(--ink) 22%) 50%,
+    var(--bg-raised) 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.2s ease-in-out infinite;
+}
+
+.user-button-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.9rem;
+  line-height: 1;
+}
+
+.user-button-text-skeleton {
+  display: block;
+  width: 100%;
+  height: 0.72rem;
+  border-radius: 999px;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+</style>