From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 18 Jul 2025 14:59:10 +0000 (+0000)
Subject: frontend: Add an Avatar component
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=1f026e29d892ea8eb3213a09f7591c2eff9cef9a;p=pbs.git

frontend: Add an Avatar component

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---

diff --git a/frontend/src/api/users.ts b/frontend/src/api/users.ts
index a1e7b8c7..337b80f1 100644
--- a/frontend/src/api/users.ts
+++ b/frontend/src/api/users.ts
@@ -22,3 +22,35 @@ export async function fetchCurrentUser(): Promise<User> {
 		throw new Error("Failed to load user")
 	}
 }
+
+export async function fetchUser(username: string): Promise<User> {
+	const response = await api.get(`/v1/users/${username}`);
+	return response.data as User;
+}
+
+export function makeAvatarUrl(user: User, size: number): string | undefined {
+	const url = URL.parse(user.avatar_url);
+	if (!url)
+		return undefined;
+
+	// Add the size argument
+	url.searchParams.set("size", `${size}`);
+
+	// Return the URL as string
+	return url.toString();
+}
+
+export function makeAvatarUrls(user: User, size: number): string | undefined {
+	const multipliers = [2, 3];
+	const sources = [];
+
+	for (const multiplier of multipliers) {
+		let source = makeAvatarUrl(user, size * multiplier);
+		if (!source)
+			continue;
+
+		sources.push(`${source} ${multiplier}x`);
+	}
+
+	return sources.join(", ");
+}
diff --git a/frontend/src/components/Avatar.vue b/frontend/src/components/Avatar.vue
new file mode 100644
index 00000000..20eea625
--- /dev/null
+++ b/frontend/src/components/Avatar.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+	import { ref, onMounted } from "vue";
+
+	// Import types
+	import type { User } from "@/api/users";
+	import { makeAvatarUrl, makeAvatarUrls } from "@/api/users";
+
+	// Fetch the build UUID
+	const props = withDefaults(
+		defineProps<{
+			user: User,
+			size?: number,
+			isRounded?: boolean,
+		}>(),
+		{
+			size      : 256,
+			isRounded : false,
+		},
+	);
+</script>
+
+<template>
+	<figure :class="`image is-${size}x${size}`">
+		<img :class="{ 'is-rounded' : isRounded }" :alt="user.name"
+			:src="makeAvatarUrl(user, size)" :srcset="makeAvatarUrls(user, size)" />
+	</figure>
+</template>
diff --git a/frontend/src/components/BasicComponents.ts b/frontend/src/components/BasicComponents.ts
index 004f659a..60bc3cff 100644
--- a/frontend/src/components/BasicComponents.ts
+++ b/frontend/src/components/BasicComponents.ts
@@ -12,6 +12,7 @@ import Tags from "@/components/Tags.vue";
 import Tag from "@/components/Tag.vue";
 
 // Components
+import Avatar from "@/components/Avatar.vue";
 import Modal from "@/components/Modal.vue";
 
 // Icons
@@ -22,6 +23,7 @@ import Loader from "@/components/Loader.vue";
 
 export default {
 	install(app: App) {
+		app.component("Avatar", Avatar)
 		app.component("Container", Container)
 		app.component("Block", Block)
 		app.component("Box", Box)