@axium/client 0.14.4 → 0.15.0

package/assets/styles.css

@@ -2,9 +2,6 @@
 
 * {
 	box-sizing: border-box;
-	color: hsl(0 0 var(--fg-light));
-	accent-color: hsl(0 0 var(--fg-light));
-	font-family: sans-serif;
 }
 
 body {
@@ -16,6 +13,11 @@ body {
 	overflow-y: scroll;
 }
 
+a {
+	text-decoration: none;
+	color: inherit;
+}
+
 .main {
 	padding: 2em;
 	border-radius: 1em;
@@ -57,6 +59,13 @@ select {
 	padding: 0.5em 1em;
 }
 
+button.reset {
+	border-radius: unset;
+	border: none;
+	background-color: unset;
+	padding: unset;
+}
+
 textarea {
 	background: var(--bg-normal);
 	border: 1px solid var(--border-accent);
@@ -219,19 +228,19 @@ input.error {
 	display: flex;
 	flex-direction: column;
 	gap: 0.1em;
-}
 
-[popover] .menu-item {
-	display: inline-flex;
-	align-items: center;
-	padding: 0.5em 0.75em;
-	gap: 1em;
-	border-radius: 0.5em;
-	user-select: none;
+	.menu-item {
+		display: inline-flex;
+		align-items: center;
+		padding: 0.5em 0.75em;
+		gap: 1em;
+		border-radius: 0.5em;
+		user-select: none;
 
-	&:hover {
-		background-color: var(--bg-strong);
-		cursor: pointer;
+		&:hover {
+			background-color: var(--bg-strong);
+			cursor: pointer;
+		}
 	}
 }
 

package/dist/requests.js

@@ -28,7 +28,7 @@ export async function fetchAPI(method, endpoint, data, ...params) {
         options.body = JSON.stringify(data);
     const search = method != 'GET' || typeof data != 'object' || data == null || !Object.keys(data).length
         ? ''
-        : '?' + new URLSearchParams(data).toString();
+        : '?' + new URLSearchParams(JSON.parse(JSON.stringify(data))).toString();
     if (token)
         options.headers.Authorization = 'Bearer ' + token;
     const parts = [];

package/lib/FormDialog.svelte

@@ -4,8 +4,9 @@
 	let {
 		children,
 		dialog = $bindable(),
-		submitText = 'Submit',
 		cancel = () => {},
+		clearOnCancel = false,
+		submitText = 'Submit',
 		submit = (data: object): Promise<any> => Promise.resolve(),
 		pageMode = false,
 		submitDanger = false,
@@ -15,10 +16,11 @@
 	}: {
 		children(): any;
 		dialog?: HTMLDialogElement;
+		clearOnCancel?: boolean;
+		/** A callback for when the dialog is canceled */
+		cancel?(): unknown;
 		/** Change the text displayed for the submit button */
 		submitText?: string;
-		/** Basically a callback for when the dialog is canceled */
-		cancel?(): unknown;
 		/** Called on submission, this should do the actual submission */
 		submit?(data: Record<string, FormDataEntryValue>): Promise<any>;
 		/** Whether to display the dialog as a full-page form */
@@ -36,6 +38,7 @@
 
 	function onclose(e: Event) {
 		e.preventDefault();
+		if (clearOnCancel) dialog!.querySelector('form')!.reset();
 		cancel();
 	}
 

package/lib/Popover.svelte

@@ -11,11 +11,11 @@
 	}
 </script>
 
-<div {onclick}>
+<div class="Popover" {onclick} style:display="contents">
 	{#if toggle}
 		{@render toggle()}
 	{:else}
-		<span class={['popover-toggle', showToggle == 'hover' && 'toggle-hover']}>
+		<span class={[showToggle == 'hover' && 'toggle-hover']}>
 			<Icon i="ellipsis" />
 		</span>
 	{/if}
@@ -26,12 +26,17 @@
 </div>
 
 <style>
-	.popover-toggle:hover {
-		cursor: pointer;
-	}
+	div.Popover {
+		anchor-scope: --popover;
+
+		> :global(:first-child:hover) {
+			cursor: pointer;
+		}
 
-	.popover-toggle {
-		user-select: none;
+		> :global(:first-child) {
+			user-select: none;
+			anchor-name: --popover;
+		}
 	}
 
 	@media (width > 700px) {
@@ -44,7 +49,8 @@
 		}
 	}
 
-	.popover-toggle + [popover] {
+	:popover-open {
+		position-anchor: --popover;
 		position-try-fallbacks:
 			flip-inline,
 			flip-block,

package/lib/UserDiscovery.svelte

@@ -1,22 +1,25 @@
 <script lang="ts">
 	import { fetchAPI } from '@axium/client/requests';
-	import { getUserImage, type AccessTarget, type UserPublic } from '@axium/core';
+	import { getUserImage, type UserPublic } from '@axium/core';
 	import { colorHash } from '@axium/core/color';
-	import Icon from './Icon.svelte';
 	import { errorText } from '@axium/core/io';
+	import Icon from './Icon.svelte';
 
 	const {
 		onSelect,
 		enableTags = false,
 		excludeTargets = [],
+		noRoles = false,
+		allowExact,
 	}: {
-		onSelect(target: AccessTarget): unknown;
+		onSelect(target: string): unknown;
 		enableTags?: boolean;
 		excludeTargets?: string[];
+		noRoles?: boolean;
+		allowExact?: boolean;
 	} = $props();
 
-	type Result = { type: 'user'; value: UserPublic; target: string } | { type: 'role' | 'tag'; value: string; target: string };
-
+	type Result = { type: 'user'; value: UserPublic; target: string } | { type: 'role' | 'tag' | 'exact'; value: string; target: string };
 	let results = $state<Result[]>([]);
 	let value = $state<string>();
 	let gotError = $state<boolean>(false);
@@ -30,8 +33,9 @@
 		try {
 			const users = await fetchAPI('POST', 'users/discover', value);
 			results = [
+				allowExact && ({ type: 'exact', value, target: value } as const),
 				...users.map(value => ({ type: 'user', value, target: value.id }) as const),
-				{ type: 'role', value, target: '@' + value } as const,
+				!noRoles && ({ type: 'role', value, target: '@' + value } as const),
 				enableTags && ({ type: 'tag', value, target: '#' + value } as const),
 			].filter<Result>(r => !!r);
 		} catch (e) {
@@ -52,7 +56,7 @@
 </script>
 
 <input bind:value type="text" placeholder="Add users and roles" {onchange} onkeyup={onchange} />
-{#if !gotError}
+{#if !gotError && value}
 	<!-- Don't show results when we can't use the discovery API -->
 	<div class="results">
 		{#each results as result}
@@ -72,6 +76,8 @@
 								><Icon i="hashtag" />{result.value}</span
 							>
 						</span>
+					{:else if result.type == 'exact'}
+						<span class="non-user">{result.value}</span>
 					{/if}
 				</div>
 			{/if}
@@ -119,6 +125,14 @@
 	.result {
 		padding: 0.5em;
 		border-radius: 0.5em;
+
+		.non-user {
+			border-radius: 1em;
+			padding: 0.25em 0.75em;
+			display: inline-flex;
+			align-items: center;
+			gap: 0.25em;
+		}
 	}
 
 	.result:hover {
@@ -126,14 +140,6 @@
 		background-color: var(--bg-strong);
 	}
 
-	.tag-or-role {
-		border-radius: 1em;
-		padding: 0.25em 0.75em;
-		display: inline-flex;
-		align-items: center;
-		gap: 0.25em;
-	}
-
 	img {
 		width: 2em;
 		height: 2em;

package/lib/UserMenu.svelte

@@ -1,66 +1,78 @@
 <script lang="ts">
-	import type { User } from '@axium/core/user';
-	import { getUserImage } from '@axium/core';
 	import { fetchAPI } from '@axium/client/requests';
+	import { getUserImage } from '@axium/core';
+	import type { UserPublic } from '@axium/core/user';
 	import Icon from './Icon.svelte';
-	import Popover from './Popover.svelte';
 	import Logout from './Logout.svelte';
+	import Popover from './Popover.svelte';
 
-	const { user }: { user: Partial<User> } = $props();
+	const { user }: { user?: UserPublic } = $props();
 </script>
 
-<Popover>
-	{#snippet toggle()}
-		<div style:display="contents">
-			<img src={getUserImage(user)} alt={user.name} />
-			{user.name}
-		</div>
-	{/snippet}
-
-	<a class="menu-item" href="/account">
-		<Icon i="user" --size="1.5em" />
-		<span>Your Account</span>
-	</a>
+{#if user}
+	<Popover>
+		{#snippet toggle()}
+			<div class="UserMenu toggle">
+				<img src={getUserImage(user)} alt={user.name} />
+				{user.name}
+			</div>
+		{/snippet}
 
-	{#if user.isAdmin}
-		<a class="menu-item" href="/admin">
-			<Icon i="gear-complex" --size="1.5em" />
-			<span>Administration</span>
+		<a class="menu-item" href="/account">
+			<Icon i="user" --size="1.5em" />
+			<span>Your Account</span>
 		</a>
-	{/if}
 
-	{#await fetchAPI('GET', 'apps')}
-		<i>Loading...</i>
-	{:then apps}
-		{#each apps as app}
-			<a class="menu-item" href="/{app.id}">
-				{#if app.image}
-					<img src={app.image} alt={app.name} width="1em" height="1em" />
-				{:else if app.icon}
-					<Icon i={app.icon} --size="1.5em" />
-				{:else}
-					<Icon i="image-circle-xmark" --size="1.5em" />
-				{/if}
-				<span>{app.name}</span>
+		{#if user.isAdmin}
+			<a class="menu-item" href="/admin">
+				<Icon i="gear-complex" --size="1.5em" />
+				<span>Administration</span>
 			</a>
-		{:else}
-			<i>No apps available.</i>
-		{/each}
-	{:catch}
-		<i>Couldn't load apps.</i>
-	{/await}
+		{/if}
 
-	<button style:display="contents" command="show-modal" commandfor="logout">
-		<span class="menu-item logout">
+		{#await fetchAPI('GET', 'apps')}
+			<i>Loading...</i>
+		{:then apps}
+			{#each apps as app}
+				<a class="menu-item" href="/{app.id}">
+					{#if app.image}
+						<img src={app.image} alt={app.name} width="1em" height="1em" />
+					{:else if app.icon}
+						<Icon i={app.icon} --size="1.5em" />
+					{:else}
+						<Icon i="image-circle-xmark" --size="1.5em" />
+					{/if}
+					<span>{app.name}</span>
+				</a>
+			{:else}
+				<i>No apps available.</i>
+			{/each}
+		{:catch}
+			<i>Couldn't load apps.</i>
+		{/await}
+
+		<button class="menu-item logout reset" command="show-modal" commandfor="logout">
 			<Icon i="right-from-bracket" --size="1.5em" --fill="hsl(0 33 var(--fg-light))" />
 			<span>Logout</span>
-		</span>
-	</button>
-</Popover>
+		</button>
+	</Popover>
 
-<Logout />
+	<Logout />
+{:else}
+	<div class="UserMenu login">
+		<a href="/login?after={location.pathname}">Login</a>
+	</div>
+{/if}
 
 <style>
+	.UserMenu {
+		border-radius: 0.5em;
+		padding: 0.5em;
+		border: 1px solid var(--border-accent);
+		cursor: pointer;
+		background-color: var(--bg-alt);
+	}
+
 	img {
 		width: 2em;
 		height: 2em;
@@ -69,7 +81,18 @@
 		margin-right: 0.5em;
 	}
 
-	span.logout > span {
+	.logout {
 		color: hsl(0 33 var(--fg-light));
+		font-size: 16px;
+	}
+
+	:global(.UserMenu + div:popover-open) {
+		position: fixed;
+		left: unset;
+		right: anchor(right);
+		top: calc(anchor(bottom) + 0.5em);
+		width: fit-content;
+		height: fit-content;
+		cursor: default;
 	}
 </style>

package/lib/index.ts

@@ -14,6 +14,7 @@ export { default as Toast } from './Toast.svelte';
 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 UserMenu } from './UserMenu.svelte';
 export { default as Version } from './Version.svelte';
 export { default as ZodForm } from './ZodForm.svelte';

package/package.json

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