@axium/client 0.20.1 → 0.21.0

package/assets/styles.css

@@ -312,6 +312,7 @@ h6 {
 	gap: 1em;
 	text-align: right;
 	align-items: end;
+	z-index: 25;
 }
 
 div.toast {

package/dist/cli/config.d.ts

@@ -19,7 +19,6 @@ export declare function session(): {
         isAdmin: boolean;
         isSuspended: boolean;
         emailVerified?: Date | null | undefined;
-        image?: string | null | undefined;
     };
     name?: string | null | undefined;
 };

package/dist/config.d.ts

@@ -16,7 +16,6 @@ export declare const ClientConfig: z.ZodObject<{
                 name: z.ZodString;
                 email: z.ZodEmail;
                 emailVerified: z.ZodOptional<z.ZodNullable<z.ZodCoercedDate<unknown>>>;
-                image: z.ZodOptional<z.ZodNullable<z.ZodURL>>;
                 preferences: z.ZodLazy<z.ZodObject<{
                     debug: z.ZodDefault<z.ZodBoolean>;
                 }, z.core.$strip>>;

package/dist/locales.d.ts

@@ -112,8 +112,13 @@ declare let currentLoaded: {
                 readonly title: "Passkeys";
             };
             readonly personal_info: "Personal Information";
+            readonly pfp: {
+                readonly update: "Upload";
+                readonly remove: "Remove";
+                readonly toast_removed: "Profile picture removed";
+                readonly toast_updated: "Profile picture updated";
+            };
             readonly preferences: "Preferences";
-            readonly profile_alt: "User profile";
             readonly sessions: "Sessions";
             readonly title: "Your Account";
             readonly user_id: "User ID";

package/lib/Icon.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	const { i, ...rest } = $props();
+	import type { SVGAttributes } from 'svelte/elements';
+	const { i, ...rest }: { i: string } & SVGAttributes<SVGSVGElement> = $props();
 	const [style, id] = $derived(i.includes('/') ? i.split('/') : ['solid', i]);
 	const href = $derived(`/icons/${style}.svg#${id}`);
 </script>

package/lib/UserCard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { text } from '@axium/client';
-	import { getUserImage } from '@axium/core';
-	import type { User } from '@axium/core/user';
+	import type { UserPublic } from '@axium/core/user';
+	import UserPFP from './UserPFP.svelte';
 
 	const {
 		user,
@@ -10,7 +10,7 @@
 		href,
 		you = false,
 	}: {
-		user: Partial<User>;
+		user: UserPublic;
 		/** If true, don't show the picture */
 		compact?: boolean;
 		/** Whether the user is viewing their own profile */
@@ -24,7 +24,7 @@
 
 <a class={['User', self && 'self']} {href}>
 	{#if !compact}
-		<img src={getUserImage(user)} alt={user.name} />
+		<UserPFP {user} />
 	{/if}
 	{user.name}
 	{#if self && you}
@@ -38,12 +38,4 @@
 		width: max-content;
 		height: max-content;
 	}
-
-	img {
-		width: 2em;
-		height: 2em;
-		border-radius: 50%;
-		vertical-align: middle;
-		margin-right: 0.5em;
-	}
 </style>

package/lib/UserDiscovery.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { text } from '@axium/client';
 	import { fetchAPI } from '@axium/client/requests';
-	import { getUserImage, type UserPublic } from '@axium/core';
+	import type { UserPublic } from '@axium/core';
 	import { errorText } from 'ioium';
 	import Icon from './Icon.svelte';
+	import UserPFP from './UserPFP.svelte';
 
 	const {
 		onSelect,
@@ -63,7 +64,7 @@
 			{#if !excludeTargets.includes(result.target)}
 				<div class="result" onclick={select(result.target)}>
 					{#if result.type == 'user'}
-						<span><img src={getUserImage(result.value)} alt={result.value.name} />{result.value.name}</span>
+						<span><UserPFP user={result.value} /> {result.value.name}</span>
 					{:else if result.type == 'role'}
 						<span>
 							<span class="icon-text non-user"><Icon i="at" />{result.value}</span>
@@ -135,12 +136,4 @@
 		cursor: pointer;
 		background-color: var(--bg-strong);
 	}
-
-	img {
-		width: 2em;
-		height: 2em;
-		border-radius: 50%;
-		vertical-align: middle;
-		margin-right: 0.5em;
-	}
 </style>

package/lib/UserMenu.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { fetchAPI, text } from '@axium/client';
-	import { getUserImage } from '@axium/core';
 	import type { UserPublic } from '@axium/core/user';
 	import Icon from './Icon.svelte';
 	import Logout from './Logout.svelte';
 	import Popover from './Popover.svelte';
+	import UserPFP from './UserPFP.svelte';
 
 	const { user }: { user?: UserPublic } = $props();
 </script>
@@ -13,7 +13,7 @@
 	<Popover>
 		{#snippet toggle()}
 			<div class="UserMenu toggle">
-				<img src={getUserImage(user)} alt={user.name} />
+				<UserPFP {user} />
 				{user.name}
 			</div>
 		{/snippet}
@@ -73,14 +73,6 @@
 		background-color: var(--bg-alt);
 	}
 
-	img {
-		width: 2em;
-		height: 2em;
-		border-radius: 50%;
-		vertical-align: middle;
-		margin-right: 0.5em;
-	}
-
 	.logout {
 		color: hsl(0 33 var(--fg-light));
 		font-size: 16px;

package/lib/UserPFP.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { UserPublic } from '@axium/core';
+	import { colorHashRGB } from '@axium/core/color';
+
+	let { user, isDefault = $bindable() }: { user: UserPublic; isDefault?: boolean } = $props();
+
+	const defaultImage = $derived(
+		`data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" style="background-color:${colorHashRGB(user.name ?? '\0')};display:flex;align-items:center;justify-content:center;">
+		<text x="23" y="28" style="font-family:sans-serif;font-weight:bold;" fill="white">${(user.name.replaceAll(/\W/g, '') || '?')[0]}</text>
+	</svg>`.replaceAll(/[\t\n]/g, '')
+	);
+
+	let src = $state(`/raw/pfp/${user.id}`);
+
+	$effect(() => {
+		// Reset the attempted source when the user changes
+		src = `/raw/pfp/${user.id}`;
+	});
+</script>
+
+<img
+	class="UserPFP"
+	{src}
+	alt={user.name}
+	onerror={() => {
+		isDefault = true;
+		src = defaultImage;
+	}}
+/>
+
+<style>
+	img.UserPFP {
+		width: var(--size, 2em);
+		height: var(--size, 2em);
+		border-radius: 50%;
+		border: 1px solid #8888;
+		vertical-align: middle;
+		margin-right: 0.5em;
+		/* see https://drafts.csswg.org/css-image-animation-1/ */
+		image-animation: stopped;
+	}
+</style>

package/lib/index.ts

@@ -15,6 +15,7 @@ export { default as Upload } from './Upload.svelte';
 export { default as URLText } from './URLText.svelte';
 export { default as UserCard } from './UserCard.svelte';
 export { default as UserDiscovery } from './UserDiscovery.svelte';
+export { default as UserPFP } from './UserPFP.svelte';
 export { default as UserMenu } from './UserMenu.svelte';
 export { default as Version } from './Version.svelte';
 export { default as ZodForm } from './ZodForm.svelte';

package/locales/en.json

@@ -106,8 +106,13 @@
 				"title": "Passkeys"
 			},
 			"personal_info": "Personal Information",
+			"pfp": {
+				"update": "Upload",
+				"remove": "Remove",
+				"toast_removed": "Profile picture removed",
+				"toast_updated": "Profile picture updated"
+			},
 			"preferences": "Preferences",
-			"profile_alt": "User profile",
 			"sessions": "Sessions",
 			"title": "Your Account",
 			"user_id": "User ID",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.20.1",
+	"version": "0.21.0",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",