@axium/client 0.22.1 → 0.23.1

package/dist/locales.d.ts

@@ -13,11 +13,15 @@ declare let currentLoaded: {
         readonly toast_removed: "Removed access";
         readonly public_target: "Everyone";
         readonly add_public: "Add Public Access";
+        readonly placeholder: "Add users and roles";
     };
     readonly AppMenu: {
         readonly failed: "Couldn't load apps.";
         readonly none: "No apps available.";
     };
+    readonly Discovery: {
+        readonly no_results: "No results";
+    };
     readonly Login: {
         readonly email: "Email";
         readonly register: "Register instead";
@@ -47,10 +51,6 @@ declare let currentLoaded: {
     readonly UserCard: {
         readonly you: "(You)";
     };
-    readonly UserDiscovery: {
-        readonly no_results: "No results";
-        readonly placeholder: "Add users and roles";
-    };
     readonly UserMenu: {
         readonly account: "Your Account";
         readonly admin: "Administration";
@@ -247,17 +247,21 @@ declare let currentLoaded: {
         readonly debug: "Debug mode";
     };
 };
-export declare let currentMonthNames: string[];
 /**
  * Current locale
  */
 export declare let currentLocale: string;
+export declare function countryName(code: string): string | undefined;
+export declare function dateField(name: string): string | undefined;
+export declare function conjoin(list: Iterable<string>): string;
+export declare function disjoin(list: Iterable<string>): string;
+export declare let currentMonthNames: string[];
 type _locale = typeof currentLoaded;
 export interface Locale extends _locale {
 }
 export interface ReplacementOptions {
     $default?: string;
-    /**  */
+    /** Whether to treat the replacement as HTML */
     $html?: boolean;
 }
 type _ArgsValue<V extends string[]> = UnionToIntersection<{
@@ -268,8 +272,6 @@ type _ArgsValue<V extends string[]> = UnionToIntersection<{
 type Replacements<K extends string> = ReplacementOptions & (GetByString<Locale, K> extends string ? _ArgsValue<Split<GetByString<Locale, K> & string, '{'>> : Record<string, any>);
 type ReplacementsArgs<K extends string> = {} extends Replacements<K> ? [replacements?: Replacements<K>] : [replacements: Replacements<K>];
 export declare function useLocale(newLocale: string): void;
-export declare function countryName(code: string): string | undefined;
-export declare function dateField(name: string): string | undefined;
 export declare function escape(text: string): string;
 /**
  * Get localized text for a given translation key

package/dist/locales.js

@@ -15,12 +15,28 @@ export function extendLocale(locale, data) {
         debug('Extending locale: ' + locale);
     deepAssign(loadedLocales[locale], data);
 }
-let currentLoaded = en, currentRegionNames, currentDateFields;
-export let currentMonthNames;
+let currentLoaded = en;
 /**
  * Current locale
  */
 export let currentLocale = 'en';
+let currentRegionNames;
+export function countryName(code) {
+    return currentRegionNames.of(code);
+}
+let currentDateFields;
+export function dateField(name) {
+    return currentDateFields.of(name);
+}
+let currentConjunction;
+export function conjoin(list) {
+    return currentConjunction.format(list);
+}
+let currentDisjunction;
+export function disjoin(list) {
+    return currentDisjunction.format(list);
+}
+export let currentMonthNames;
 export function useLocale(newLocale) {
     if (!loadedLocales[newLocale])
         throw new Error('Locale is not available: ' + newLocale);
@@ -28,16 +44,12 @@ export function useLocale(newLocale) {
     currentLoaded = loadedLocales[newLocale];
     currentRegionNames = new Intl.DisplayNames(newLocale, { type: 'region' });
     currentDateFields = new Intl.DisplayNames(newLocale, { type: 'dateTimeField' });
+    currentConjunction = new Intl.ListFormat(newLocale, { style: 'long', type: 'conjunction' });
+    currentDisjunction = new Intl.ListFormat(newLocale, { style: 'long', type: 'disjunction' });
     const formatter = new Intl.DateTimeFormat(newLocale, { month: 'long' });
     currentMonthNames = Array.from({ length: 12 }, (_, monthIndex) => formatter.format(new Date(Date.UTC(2000, monthIndex + 1, 1))));
 }
 useLocale('en');
-export function countryName(code) {
-    return currentRegionNames.of(code);
-}
-export function dateField(name) {
-    return currentDateFields.of(name);
-}
 const localeReplacement = /\{(\w+)\}/g;
 const escapePattern = /[&<>"']/g;
 const escapes = {

package/lib/AccessControlDialog.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { addToACL, getACL, removeFromACL, text, updateACL, userInfo } from '@axium/client';
-	import type { AccessControllable, AccessTarget, UserPublic } from '@axium/core';
+	import type { AccessControllable, UserPublic } from '@axium/core';
 	import { checkAndMatchACL, getTarget, pickPermissions } from '@axium/core';
 	import type { HTMLDialogAttributes } from 'svelte/elements';
+	import Discovery, * as discovery from './Discovery.svelte';
 	import Icon from './Icon.svelte';
 	import UserCard from './UserCard.svelte';
-	import UserDiscovery from './UserDiscovery.svelte';
 	import { closeOnBackGesture } from './attachments.js';
 	import { toast, toastStatus } from './toast.js';
 
@@ -112,8 +112,9 @@
 				</button>
 			{/if}
 		</div>
-		<UserDiscovery
-			onSelect={async (target: AccessTarget) => {
+
+		<Discovery
+			onSelect={async ({ target }) => {
 				try {
 					const control = await addToACL(itemType, item.id, target);
 					if (control.userId) control.user = await userInfo(control.userId);
@@ -122,7 +123,13 @@
 					toast('error', e);
 				}
 			}}
-			excludeTargets={acl.map(getTarget).filter<string>((t): t is string => !!t)}
+			sources={[discovery.user, discovery.role]}
+			exclude={result =>
+				acl
+					.map(getTarget)
+					.filter<string>((t): t is string => !!t)
+					.includes(result.target)}
+			placeholder={text('AccessControlDialog.placeholder')}
 		/>
 	{/if}
 

package/lib/Discovery.svelte

@@ -0,0 +1,179 @@
+<script lang="ts" module>
+	import { fetchAPI } from '@axium/client';
+	import type { UserPublic } from '@axium/core';
+
+	export interface Source<T> {
+		name: string;
+		get(search: string): T[] | Promise<T[]>;
+		render: Snippet<[T]>;
+	}
+
+	// built-in / common discovery sources
+	// note getters are used because svelte declares the snippets after the module script
+
+	export const user: Source<{ type: 'user'; user: UserPublic; target: string }> = {
+		name: 'user',
+		async get(value) {
+			const users = await fetchAPI('POST', 'users/discover', value);
+			return users.map(user => ({ type: 'user', user, target: user.id }));
+		},
+		get render() {
+			return renderUser;
+		},
+	};
+
+	export const role: Source<{ type: 'role'; role: string; target: string }> = {
+		name: 'role',
+		get: role => [{ type: 'role', role, target: '@' + role }],
+		get render() {
+			return renderRole;
+		},
+	};
+
+	export const exact: Source<{ type: 'exact'; target: string }> = {
+		name: 'exact',
+		get: value => [{ type: 'exact', target: value }],
+		get render() {
+			return renderExact;
+		},
+	};
+</script>
+
+<script lang="ts" generics="T extends any[]">
+	import { text } from '@axium/client';
+	import { errorText } from 'ioium';
+	import type { Snippet } from 'svelte';
+	import Icon from './Icon.svelte';
+	import UserCard from './UserCard.svelte';
+
+	type Value = T[keyof T & number];
+
+	let {
+		onSelect,
+		sources,
+		exclude,
+		placeholder,
+		initialValue = '',
+	}: {
+		onSelect(target: Value): string | void | Promise<string | void>;
+		sources: { [K in keyof T]: Source<T[K]> };
+		exclude?(target: Value): boolean;
+		placeholder?: string;
+		initialValue?: string;
+	} = $props();
+
+	type Result = { [K in keyof T]: { value: T[K]; snippet: Snippet<[T[K]]> } }[keyof T];
+	let results = $state<Result[]>([]),
+		value = $state<string>(initialValue),
+		gotErrors = $state<Record<string, boolean>>({});
+
+	const allError = $derived(Object.values(gotErrors).every(v => v));
+
+	async function oninput() {
+		results = [];
+		if (!value || !value.length) return;
+
+		for (const source of sources) {
+			if (gotErrors[source.name]) continue;
+
+			try {
+				for (const result of await source.get(value)) {
+					if (exclude?.(result)) continue;
+					results.push({ value: result, snippet: source.render });
+				}
+				gotErrors[source.name] = false;
+			} catch (e) {
+				console.warn(`Can not discover ${source.name}:`, errorText(e));
+				gotErrors[source.name] = true;
+			}
+		}
+	}
+
+	function select(target: Value) {
+		return async (e: Event) => {
+			e.stopPropagation();
+			try {
+				value = (await onSelect(target)) || '';
+			} catch (e) {
+				console.log('onSelect error:', e);
+			}
+			results = [];
+		};
+	}
+</script>
+
+{#snippet renderUser({ user }: { user: UserPublic; target: string })}
+	<UserCard {user} />
+{/snippet}
+
+{#snippet renderRole({ role }: { role: string; target: string })}
+	<span class="icon-text"><Icon i="at" />{role}</span>
+{/snippet}
+
+{#snippet renderExact(result: { target: string })}
+	<span>{result.target}</span>
+{/snippet}
+
+<input bind:value type="text" {placeholder} {oninput} />
+{#if !allError && value}
+	<div class="results">
+		{#each results as { value, snippet }}
+			<div class="result" onclick={select(value)}>{@render snippet(value)}</div>
+		{:else}
+			<i>{text('Discovery.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: var(--border-accent);
+		align-items: stretch;
+
+		i {
+			text-align: center;
+		}
+	}
+
+	.result {
+		border-radius: 1em;
+		padding: 0.25em 0.75em;
+		gap: 0.25em;
+		display: inline-flex;
+		align-items: center;
+
+		:global(& > *) {
+			padding: 0.5em;
+		}
+	}
+
+	.result:hover {
+		cursor: pointer;
+		background-color: var(--bg-strong);
+	}
+</style>

package/lib/UserCard.svelte

@@ -26,7 +26,7 @@
 	{#if !compact}
 		<UserPFP {user} />
 	{/if}
-	{user.name}
+	<span>{user.name}</span>
 	{#if self && you}
 		<span class="subtle">{text('UserCard.you')}</span>
 	{/if}
@@ -37,5 +37,8 @@
 		cursor: pointer;
 		width: max-content;
 		height: max-content;
+		gap: 0.25em;
+		display: inline-flex;
+		align-items: center;
 	}
 </style>

package/lib/index.ts

@@ -2,6 +2,8 @@ export { default as AccessControlDialog } from './AccessControlDialog.svelte';
 export { default as AppMenu } from './AppMenu.svelte';
 export { default as ColorPicker } from './ColorPicker.svelte';
 export { default as ClipboardCopy } from './ClipboardCopy.svelte';
+export { default as Discovery } from './Discovery.svelte';
+export * as discovery from './Discovery.svelte';
 export { default as FormDialog } from './FormDialog.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as LocationSelect } from './LocationSelect.svelte';
@@ -15,7 +17,6 @@ export { default as SidebarLayout } from './SidebarLayout.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 UserPFP } from './UserPFP.svelte';
 export { default as UserMenu } from './UserMenu.svelte';
 export { default as Version } from './Version.svelte';

package/locales/en.json

@@ -6,12 +6,16 @@
 		"remove": "Remove",
 		"toast_removed": "Removed access",
 		"public_target": "Everyone",
-		"add_public": "Add Public Access"
+		"add_public": "Add Public Access",
+		"placeholder": "Add users and roles"
 	},
 	"AppMenu": {
 		"failed": "Couldn't load apps.",
 		"none": "No apps available."
 	},
+	"Discovery": {
+		"no_results": "No results"
+	},
 	"Login": {
 		"email": "Email",
 		"register": "Register instead"
@@ -41,10 +45,6 @@
 	"UserCard": {
 		"you": "(You)"
 	},
-	"UserDiscovery": {
-		"no_results": "No results",
-		"placeholder": "Add users and roles"
-	},
 	"UserMenu": {
 		"account": "Your Account",
 		"admin": "Administration"

package/package.json

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

package/lib/UserDiscovery.svelte

@@ -1,139 +0,0 @@
-<script lang="ts">
-	import { text } from '@axium/client';
-	import { fetchAPI } from '@axium/client/requests';
-	import type { UserPublic } from '@axium/core';
-	import { errorText } from 'ioium';
-	import Icon from './Icon.svelte';
-	import UserPFP from './UserPFP.svelte';
-
-	const {
-		onSelect,
-		enableTags = false,
-		excludeTargets = [],
-		noRoles = false,
-		allowExact,
-	}: {
-		onSelect(target: string): unknown;
-		enableTags?: boolean;
-		excludeTargets?: string[];
-		noRoles?: boolean;
-		allowExact?: boolean;
-	} = $props();
-
-	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);
-
-	async function oninput() {
-		if (!value || !value.length) {
-			results = [];
-			return;
-		}
-
-		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),
-				!noRoles && ({ 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={text('UserDiscovery.placeholder')} {oninput} />
-{#if !gotError && value}
-	<!-- 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><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>
-						</span>
-					{:else if result.type == 'tag'}
-						<span>
-							<span class="icon-text non-user"><Icon i="hashtag" />{result.value}</span>
-						</span>
-					{:else if result.type == 'exact'}
-						<span class="non-user">{result.value}</span>
-					{/if}
-				</div>
-			{/if}
-		{:else}
-			<i>{text('UserDiscovery.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: var(--border-accent);
-		align-items: stretch;
-
-		i {
-			text-align: center;
-		}
-	}
-
-	.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 {
-		cursor: pointer;
-		background-color: var(--bg-strong);
-	}
-</style>