@axium/client 0.12.2 → 0.13.0

package/assets/animations.css

@@ -0,0 +1,30 @@
+@keyframes zoom {
+	from {
+		transform: scale(0.95);
+	}
+	to {
+		transform: scale(1);
+	}
+}
+
+@keyframes fade {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+:root {
+	--A-zoom: zoom 0.25s cubic-bezier(0.35, 1.55, 0.65, 1);
+	--A-fade: fade 0.25s ease-out;
+}
+
+dialog[open] {
+	animation: var(--A-zoom);
+}
+
+dialog[open]::backdrop {
+	animation: var(--A-fade);
+}

package/assets/styles.css

@@ -1,3 +1,5 @@
+@import './animations.css';
+
 * {
 	box-sizing: border-box;
 	color: hsl(0 0 var(--fg-light));
@@ -65,6 +67,21 @@ textarea {
 	outline: none;
 }
 
+label.checkbox {
+	cursor: pointer;
+	width: 1.5em;
+	height: 1.5em;
+	border: 1px solid var(--border-accent);
+	border-radius: 0.5em;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+}
+
+input[type='checkbox'] {
+	display: none;
+}
+
 select,
 ::picker(select) {
 	appearance: base-select;
@@ -118,32 +135,6 @@ dialog::backdrop {
 	background: #0003;
 }
 
-dialog[open] {
-	animation: zoom 0.25s cubic-bezier(0.35, 1.55, 0.65, 1);
-}
-
-@keyframes zoom {
-	from {
-		transform: scale(0.95);
-	}
-	to {
-		transform: scale(1);
-	}
-}
-
-dialog[open]::backdrop {
-	animation: fade 0.25s ease-out;
-}
-
-@keyframes fade {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
-}
-
 dialog form {
 	display: contents;
 }

package/dist/access.d.ts

@@ -1,3 +1,5 @@
-import type { AccessControl, AccessMap } from '@axium/core';
-export declare function setACL(itemType: string, itemId: string, data: AccessMap): Promise<AccessControl[]>;
+import type { AccessControl, AccessTarget } from '@axium/core';
+export declare function updateACL(itemType: string, itemId: string, target: AccessTarget, permissions: Partial<Record<string, any>>): Promise<AccessControl>;
 export declare function getACL(itemType: string, itemId: string): Promise<AccessControl[]>;
+export declare function addToACL(itemType: string, itemId: string, target: AccessTarget): Promise<AccessControl>;
+export declare function removeFromACL(itemType: string, itemId: string, target: AccessTarget): Promise<AccessControl>;

package/dist/access.js

@@ -1,7 +1,13 @@
 import { fetchAPI } from './requests.js';
-export async function setACL(itemType, itemId, data) {
-    return await fetchAPI('POST', 'acl/:itemType/:itemId', data, itemType, itemId);
+export async function updateACL(itemType, itemId, target, permissions) {
+    return await fetchAPI('PATCH', 'acl/:itemType/:itemId', { target, permissions }, itemType, itemId);
 }
 export async function getACL(itemType, itemId) {
     return await fetchAPI('GET', 'acl/:itemType/:itemId', {}, itemType, itemId);
 }
+export async function addToACL(itemType, itemId, target) {
+    return await fetchAPI('PUT', 'acl/:itemType/:itemId', target, itemType, itemId);
+}
+export async function removeFromACL(itemType, itemId, target) {
+    return await fetchAPI('DELETE', 'acl/:itemType/:itemId', target, itemType, itemId);
+}

package/dist/requests.js

@@ -49,6 +49,11 @@ export async function fetchAPI(method, endpoint, data, ...params) {
     const json = await response.json().catch(() => ({ message: 'Unknown server error (invalid JSON response)' }));
     if (!response.ok)
         throw new Error(json.message);
+    if (typeof json == 'object' && json != null && '_warnings' in json) {
+        for (const warning of json._warnings)
+            console.warn('[API]', warning);
+        delete json._warnings;
+    }
     if (!schema)
         return json;
     const Output = Array.isArray(schema) ? schema[1] : schema;
@@ -56,6 +61,6 @@ export async function fetchAPI(method, endpoint, data, ...params) {
         return Output.parse(json);
     }
     catch (e) {
-        throw prettifyError(e);
+        throw `${method} ${endpoint}:\n${prettifyError(e)}`;
     }
 }

package/lib/AccessControlDialog.svelte

@@ -1,43 +1,46 @@
 <script lang="ts">
-	import { getACL, setACL } from '@axium/client/access';
+	import { addToACL, getACL, updateACL } from '@axium/client/access';
 	import { userInfo } from '@axium/client/user';
-	import type { AccessMap, User } from '@axium/core';
-	import { pickPermissions, type AccessControl, type AccessControllable } from '@axium/core/access';
-	import FormDialog from './FormDialog.svelte';
-	import UserCard from './UserCard.svelte';
-	import Icon from './Icon.svelte';
+	import type { AccessControllable, AccessTarget, User } from '@axium/core';
+	import { getTarget, pickPermissions } from '@axium/core/access';
+	import { errorText } from '@axium/core/io';
 	import type { HTMLDialogAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+	import UserCard from './UserCard.svelte';
+	import UserDiscovery from './UserDiscovery.svelte';
 
 	interface Props extends HTMLDialogAttributes {
 		editable: boolean;
 		dialog?: HTMLDialogElement;
 		itemType: string;
-		item?: ({ name?: string; user?: User; id: string } & AccessControllable) | null;
-		acl?: AccessControl[];
+		item: { name?: string; user?: User; id: string } & AccessControllable;
 	}
-	let { item = $bindable(), itemType, editable, dialog = $bindable(), acl = $bindable(item?.acl), ...rest }: Props = $props();
+	let { item, itemType, editable, dialog = $bindable(), ...rest }: Props = $props();
+
+	let error = $state<string>();
+
+	const acl = $state(item.acl ?? (await getACL(itemType, item.id)));
 
-	if (!acl && item) getACL(itemType, item.id).then(fetched => (acl = item.acl = fetched));
+	async function onSelect(target: AccessTarget) {
+		const control = await addToACL(itemType, item.id, target);
+		if (control.userId) control.user = await userInfo(control.userId);
+		acl.push(control);
+	}
 </script>
 
-<FormDialog
-	bind:dialog
-	submitText="Save"
-	submit={async data => {
-		if (item) await setACL(itemType, item.id, data as any as AccessMap);
-	}}
-	{...rest}
->
-	{#snippet header()}
-		{#if item?.name}
-			<h3>Permissions for <strong>{item.name}</strong></h3>
-		{:else}
-			<h3>Permissions</h3>
-		{/if}
-	{/snippet}
+<dialog bind:this={dialog} {...rest}>
+	{#if item.name}
+		<h3>Permissions for <strong>{item.name}</strong></h3>
+	{:else}
+		<h3>Permissions</h3>
+	{/if}
+
+	{#if error}
+		<div class="error">{error}</div>
+	{/if}
 
 	<div class="AccessControl">
-		{#if item?.user}
+		{#if item.user}
 			<UserCard user={item.user} />
 		{:else if item}
 			{#await userInfo(item.userId) then user}<UserCard {user} />{/await}
@@ -45,7 +48,15 @@
 		<span>Owner</span>
 	</div>
 
-	{#each acl ?? [] as control}
+	{#each acl as control}
+		{@const update = (key: string) => async (e: Event & { currentTarget: HTMLInputElement }) => {
+			try {
+				const updated = await updateACL(itemType, item.id, getTarget(control), { [key]: e.currentTarget.checked });
+				Object.assign(control, updated);
+			} catch (e) {
+				error = errorText(e);
+			}
+		}}
 		<div class="AccessControl">
 			{#if control.user}
 				<UserCard user={control.user} />
@@ -58,25 +69,49 @@
 			{:else}
 				<i>Unknown</i>
 			{/if}
-			{#if editable}
-				<select name={control.userId ?? (control.role ? '@' + control.role : 'public')} multiple>
-					{#each Object.entries(pickPermissions(control)) as [key, value]}
-						<option value={key} selected={!!value}>{key}</option>
-					{/each}
-				</select>
-			{:else}
-				<span
-					>{Object.entries(pickPermissions(control))
-						.filter(([, value]) => value)
-						.map(([key]) => key)
-						.join(', ')}</span
-				>
-			{/if}
+			<div class="permissions">
+				{#each Object.entries(pickPermissions(control) as Record<string, boolean>) as [key, value]}
+					{@const id = `${getTarget(control)}.${key}`}
+					<span class="icon-text">
+						{#if editable}
+							<input {id} type="checkbox" onchange={update(key)} />
+							<label for={id} class="checkbox">
+								{#if value}<Icon i="check" --size="1.3em" />{/if}
+							</label>
+						{:else}
+							<Icon i={value ? 'check' : 'xmark'} />
+						{/if}
+						<span>{key}</span>
+					</span>
+				{/each}
+			</div>
 		</div>
 	{/each}
-</FormDialog>
+
+	<UserDiscovery {onSelect} excludeTargets={acl.map(getTarget)} />
+
+	<div>
+		<button class="done" onclick={() => dialog!.close()}>Done</button>
+	</div>
+</dialog>
 
 <style>
+	dialog:open {
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+	}
+
+	.done {
+		float: right;
+	}
+
+	.permissions {
+		display: flex;
+		flex-direction: column;
+		gap: 0.1em;
+	}
+
 	.AccessControl {
 		display: grid;
 		gap: 1em;

package/lib/SidebarLayout.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import Icon from './Icon.svelte';
+	import { capitalize } from 'utilium';
+
+	interface Tab {
+		href: string;
+		name: string;
+		icon: string;
+		active: boolean;
+	}
+
+	let { children, tabs, bottom }: { children(): any; tabs: Tab[]; bottom?(): any } = $props();
+</script>
+
+<div class="sidebar-container">
+	<div class="sidebar">
+		{#each tabs as { href, name, icon: i, active }}
+			<a {href} class={['item', 'icon-text', active && 'active']}><Icon {i} /> <span class="sidebar-text">{capitalize(name)}</span></a
+			>
+		{/each}
+
+		{#if bottom}
+			<div class="sidebar-bottom">
+				{@render bottom()}
+			</div>
+		{/if}
+	</div>
+
+	<div class="sidebar-content">
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	.sidebar-container {
+		display: grid;
+		grid-template-columns: 15em 1fr;
+		height: 100%;
+	}
+
+	.sidebar {
+		grid-column: 1;
+		width: 100%;
+		display: inline-flex;
+		flex-direction: column;
+		gap: 0.5em;
+		background-color: var(--bg-alt);
+		padding: 1em;
+		padding-left: 0;
+		border-radius: 0 1em 1em 0;
+
+		.item {
+			padding: 0.3em 0.5em;
+			border-radius: 0.25em 1em 1em 0.25em;
+		}
+
+		.item:hover {
+			background-color: var(--bg-strong);
+			cursor: pointer;
+		}
+
+		.item.active {
+			background-color: var(--bg-strong);
+		}
+	}
+
+	.sidebar-content {
+		grid-column: 2;
+		padding: 1em;
+		overflow-x: hidden;
+		overflow-y: scroll;
+	}
+
+	.sidebar-bottom {
+		margin-top: auto;
+	}
+
+	@media (width < 700px) {
+		.sidebar-container {
+			grid-template-columns: 1fr;
+		}
+
+		.sidebar-content {
+			padding-bottom: 4em;
+			grid-column: 1;
+		}
+
+		.sidebar {
+			position: fixed;
+			grid-column: unset;
+			inset: auto 0 0;
+			border-radius: 1em;
+			display: flex;
+			flex-direction: row;
+			justify-content: space-around;
+			gap: 1em;
+			padding: 0.5em;
+			z-index: 6;
+
+			.item {
+				flex: 1 1 0;
+				border-radius: 1em;
+				padding: 1em;
+				justify-content: center;
+			}
+		}
+
+		.sidebar-text {
+			display: none;
+		}
+	}
+</style>

package/lib/UserDiscovery.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+	import { fetchAPI } from '@axium/client/requests';
+	import { getUserImage, type AccessTarget, type UserPublic } from '@axium/core';
+	import { colorHash } from '@axium/core/color';
+	import Icon from './Icon.svelte';
+	import { errorText } from '@axium/core/io';
+
+	const {
+		onSelect,
+		enableTags = false,
+		excludeTargets = [],
+	}: {
+		onSelect(target: AccessTarget): unknown;
+		enableTags?: boolean;
+		excludeTargets?: string[];
+	} = $props();
+
+	type Result = { type: 'user'; value: UserPublic; target: string } | { type: 'role' | 'tag'; value: string; target: string };
+
+	let results = $state<Result[]>([]);
+	let value = $state<string>();
+	let gotError = $state<boolean>(false);
+
+	async function onchange() {
+		if (!value || !value.length) {
+			results = [];
+			return;
+		}
+
+		try {
+			const users = await fetchAPI('POST', 'users/discover', value);
+			results = [
+				...users.map(value => ({ type: 'user', value, target: value.id }) as const),
+				{ type: 'role', value, target: '@' + value } as const,
+				enableTags && ({ type: 'tag', value, target: '#' + value } as const),
+			].filter<Result>(r => !!r);
+		} catch (e) {
+			gotError = true;
+			console.warn('Can not use user discovery:', errorText(e));
+			results = [];
+		}
+	}
+
+	function select(target: string) {
+		return (e: Event) => {
+			e.stopPropagation();
+			onSelect(target);
+			results = [];
+			value = '';
+		};
+	}
+</script>
+
+<input bind:value type="text" placeholder="Add users and roles" {onchange} onkeyup={onchange} />
+{#if !gotError}
+	<!-- Don't show results when we can't use the discovery API -->
+	<div class="results">
+		{#each results as result}
+			{#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>
+					{:else if result.type == 'role'}
+						<span>
+							<span class="icon-text tag-or-role" style:background-color={colorHash(result.value)}
+								><Icon i="at" />{result.value}</span
+							>
+						</span>
+					{:else if result.type == 'tag'}
+						<span>
+							<span class="icon-text tag-or-role" style:background-color={colorHash(result.value)}
+								><Icon i="hashtag" />{result.value}</span
+							>
+						</span>
+					{/if}
+				</div>
+			{/if}
+		{:else}
+			<i>No results</i>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	:host {
+		anchor-scope: --discovery-input;
+	}
+
+	input {
+		anchor-name: --discovery-input;
+	}
+
+	input:focus + .results,
+	.results:active {
+		display: flex;
+		animation: var(--A-zoom);
+	}
+
+	.results {
+		position: fixed;
+		position-anchor: --discovery-input;
+		inset: anchor(bottom) anchor(right) auto anchor(left);
+		display: none;
+		flex-direction: column;
+		gap: 0.25em;
+		height: fit-content;
+		max-height: 25em;
+		background-color: var(--bg-accent);
+		border-radius: 0.25em 0.25em 0.75em 0.75em;
+		padding: 1em;
+		border: 1px solid var(--border-accent);
+		align-items: stretch;
+
+		i {
+			text-align: center;
+		}
+	}
+
+	.result {
+		padding: 0.5em;
+		border-radius: 0.5em;
+	}
+
+	.result:hover {
+		cursor: pointer;
+		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;
+		border-radius: 50%;
+		vertical-align: middle;
+		margin-right: 0.5em;
+	}
+</style>

package/lib/ZodInput.svelte

@@ -204,21 +204,6 @@
 {/if}
 
 <style>
-	input[type='checkbox'] {
-		display: none;
-	}
-
-	label.checkbox {
-		cursor: pointer;
-		width: 1.5em;
-		height: 1.5em;
-		border: 1px solid var(--border-accent);
-		border-radius: 0.5em;
-		display: inline-flex;
-		justify-content: center;
-		align-items: center;
-	}
-
 	.ZodInput-error {
 		position: fixed;
 		position-anchor: --zod-input;

package/lib/index.ts

@@ -9,6 +9,7 @@ export { default as NumberBar } from './NumberBar.svelte';
 export { default as Popover } from './Popover.svelte';
 export { default as Register } from './Register.svelte';
 export { default as SessionList } from './SessionList.svelte';
+export { default as SidebarLayout } from './SidebarLayout.svelte';
 export { default as Toast } from './Toast.svelte';
 export { default as Upload } from './Upload.svelte';
 export { default as URLText } from './URLText.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.12.2",
+	"version": "0.13.0",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -40,7 +40,7 @@
 		"build": "tsc"
 	},
 	"peerDependencies": {
-		"@axium/core": ">=0.18.0",
+		"@axium/core": ">=0.19.0",
 		"utilium": "^2.3.8",
 		"zod": "^4.0.5",
 		"svelte": "^5.36.0"

package/styles/list.css

@@ -40,7 +40,6 @@
 
 .list-item:not(.list-header):hover {
 	background-color: var(--bg-alt);
-	cursor: pointer;
 }
 
 p.list-empty {