@axium/client 0.18.4 → 0.19.0

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

@@ -108,7 +108,7 @@
 		overflow-y: scroll;
 
 		@media (width < 700px) {
-			padding-bottom: 4em;
+			padding-bottom: 5em;
 			grid-column: 1;
 		}
 	}

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.4",
+	"version": "0.19.0",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",

package/styles/list.css

@@ -16,6 +16,7 @@ div:has(> .list) {
 	min-height: 0;
 	overflow-x: hidden;
 	overflow-y: scroll;
+	margin: 0.5em 0;
 }
 
 div.list-header {