@axium/client 0.18.3 → 0.19.0

package/dist/requests.js

@@ -31,11 +31,6 @@ export async function fetchAPI(method, endpoint, data, ...params) {
         catch (e) {
             throw prettifyError(e);
         }
-    if (method !== 'GET' && method !== 'HEAD')
-        options.body = JSON.stringify(data);
-    const search = method != 'GET' || typeof data != 'object' || data == null || !Object.keys(data).length
-        ? ''
-        : '?' + new URLSearchParams(JSON.parse(JSON.stringify(data))).toString();
     if (token)
         options.headers.Authorization = 'Bearer ' + token;
     if (userAgent)
@@ -51,7 +46,17 @@ export async function fetchAPI(method, endpoint, data, ...params) {
             throw new Error(`Missing parameter "${part.slice(1)}"`);
         parts.push(value);
     }
-    const response = await fetch(prefix + parts.join('/') + search, options);
+    let url = prefix + parts.join('/');
+    if (method !== 'GET' && method !== 'HEAD')
+        options.body = JSON.stringify(data);
+    if (method == 'GET' && typeof data == 'object' && data != null && Object.keys(data).length) {
+        const search = new URLSearchParams();
+        for (const [key, value] of Object.entries(data)) {
+            search.set(key, JSON.stringify(value));
+        }
+        url += '?' + search.toString();
+    }
+    const response = await fetch(url, options);
     if (!response.headers.get('Content-Type')?.includes('application/json')) {
         throw new Error(`Unexpected response type: ${response.headers.get('Content-Type')}`);
     }

package/lib/AccessControlDialog.svelte

@@ -3,11 +3,12 @@
 	import type { AccessControllable, AccessTarget, User } from '@axium/core';
 	import { getTarget, pickPermissions } from '@axium/core';
 	import { errorText } from '@axium/core/io';
-	import { toastStatus } from './toast.js';
 	import type { HTMLDialogAttributes } from 'svelte/elements';
 	import Icon from './Icon.svelte';
 	import UserCard from './UserCard.svelte';
 	import UserDiscovery from './UserDiscovery.svelte';
+	import { closeOnBackGesture } from './attachments.js';
+	import { toastStatus } from './toast.js';
 
 	interface Props extends HTMLDialogAttributes {
 		editable: boolean;
@@ -28,7 +29,7 @@
 	}
 </script>
 
-<dialog bind:this={dialog} {...rest} onclick={e => e.stopPropagation()}>
+<dialog bind:this={dialog} {...rest} onclick={e => e.stopPropagation()} {@attach closeOnBackGesture}>
 	{#if item.name}
 		<h3>{@html text('component.AccessControlDialog.named_title', { $html: true, name: item.name })}</h3>
 	{:else}

package/lib/FormDialog.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { text } from '@axium/client';
 	import type { HTMLDialogAttributes } from 'svelte/elements';
+	import { closeOnBackGesture } from './attachments.js';
 
 	let {
 		children,
@@ -62,7 +63,7 @@
 	<button type="submit" class={['submit', submitDanger && 'danger']}>{submitText}</button>
 {/snippet}
 
-<dialog bind:this={dialog} {onclose} {...rest} onclick={e => e.stopPropagation()}>
+<dialog bind:this={dialog} {onclose} {...rest} onclick={e => e.stopPropagation()} {@attach closeOnBackGesture}>
 	{@render header?.()}
 	<form {onsubmit} class="main" method="dialog">
 		{#if error}

package/lib/SidebarLayout.svelte

@@ -1,21 +1,31 @@
 <script lang="ts">
 	import Icon from './Icon.svelte';
-	import { capitalize } from 'utilium';
 
 	interface Tab {
 		href: string;
 		name: string;
 		icon: string;
 		active: boolean;
+		mobile?: false;
 	}
 
-	let { children, tabs, bottom }: { children(): any; tabs: Tab[]; bottom?(): any } = $props();
+	interface MobileTab {
+		href: string;
+		icon: string;
+		active: boolean;
+		mobile: true;
+	}
+
+	let { children, tabs, bottom }: { children(): any; tabs: (Tab | MobileTab)[]; 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">{name}</span></a>
+		{#each tabs as tab}
+			<a href={tab.href} class={['item', 'icon-text', tab.active && 'active', tab.mobile && 'mobile-only']}>
+				<Icon i={tab.icon} />
+				{#if !tab.mobile}<span class="sidebar-text">{tab.name}</span>{/if}
+			</a>
 		{/each}
 
 		{#if bottom}
@@ -98,12 +108,17 @@
 		overflow-y: scroll;
 
 		@media (width < 700px) {
-			padding-bottom: 4em;
+			padding-bottom: 5em;
 			grid-column: 1;
 		}
 	}
 
 	.sidebar-bottom {
 		margin-top: auto;
+		margin-left: 1em;
+
+		@media (width < 700px) {
+			display: none;
+		}
 	}
 </style>

package/lib/attachments.ts

@@ -3,8 +3,8 @@
  * @see https://svelte.dev/docs/svelte/@attach
  */
 import { mount, unmount } from 'svelte';
-import Icon from './Icon.svelte';
 import type { Attachment } from 'svelte/attachments';
+import Icon from './Icon.svelte';
 
 export interface ContextMenuItem {
 	/** Icon name */
@@ -95,8 +95,12 @@ export function contextMenu(...menuItems: (ContextMenuItem | false | null | unde
 	};
 }
 
+/**
+ * Dynamically resize `<textarea>`s based on content.
+ * @todo Remove this once `field-sizing` works everywhere
+ */
 export function dynamicRows(max: number = 40, min: number = 3): Attachment<HTMLTextAreaElement> {
-	return function _attackDynamicRows(element: HTMLTextAreaElement) {
+	return function _attachDynamicRows(element: HTMLTextAreaElement) {
 		element.style.resize = 'none';
 		// @ts-expect-error field-sizing is not yet in the types
 		element.style.fieldSizing = 'content';
@@ -118,3 +122,38 @@ export function dynamicRows(max: number = 40, min: number = 3): Attachment<HTMLT
 		};
 	};
 }
+
+/**
+ * Enabled the use of back gestures to close dialogs
+ */
+export function closeOnBackGesture(element: HTMLDialogElement) {
+	if (!globalThis.history) {
+		throw new Error('Can not attach back gesture handling because the History API is unavailable');
+	}
+
+	const showModal = element.showModal.bind(element);
+
+	let closedByBack = false,
+		historyKey = Math.random().toString(16).slice(2);
+
+	element.showModal = () => {
+		closedByBack = false;
+		/* popstate's state will be the "upcoming" state.
+		i.e, the state after having pushed 1 then 2 would be 1 */
+		history.replaceState(historyKey, '');
+		history.pushState(null, '');
+		showModal();
+	};
+
+	element.addEventListener('close', () => {
+		if (closedByBack) return;
+		history.replaceState(null, '');
+	});
+
+	window.addEventListener('popstate', e => {
+		if (e.state != historyKey) return;
+		closedByBack = true;
+		element.close();
+	});
+}
+closeOnBackGesture satisfies Attachment<HTMLDialogElement>;

package/package.json

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

package/styles/list.css

@@ -1,23 +1,31 @@
-.list-container {
-	overflow-x: hidden;
-	overflow-y: scroll;
+div:has(> .list) {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	overflow-y: hidden;
 
-	.list {
-		height: 100%;
+	> :where(button),
+	> .Popover > :where(button) {
+		align-self: flex-start;
 	}
 }
 
 .list {
 	display: flex;
 	flex-direction: column;
-	padding: 0.5em;
+	min-height: 0;
+	overflow-x: hidden;
+	overflow-y: scroll;
+	margin: 0.5em 0;
 }
 
 div.list-header {
 	font-weight: bold;
 	border-bottom: 1.5px solid var(--fg-accent);
 	position: sticky;
+	background-color: var(--bg-normal);
 	top: 0em;
+	z-index: 1;
 
 	@media (width < 700px) {
 		display: none !important;
@@ -36,6 +44,7 @@ div.list-header {
 	padding: 0.5em;
 	overflow: hidden;
 	text-wrap: nowrap;
+	flex: 0 0 auto;
 }
 
 .list-item:not(.list-header, :first-child) {