@lavalogic/scoria 0.40.0 → 0.40.2

package/dist/Components/Table/Misc/TableConfigurationModal.svelte

@@ -1,646 +1,646 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
->
-	import Button from '../../Button.svelte';
-	import DesktopModal from '../../DesktopModal.svelte';
-	import HorizontalTabGroup from '../../HorizontalTabGroup.svelte';
-	import Icon from '../../Icon.svelte';
-	import InfoAlert from '../../InfoAlert.svelte';
-	import TextInput from '../../TextInput.svelte';
-	import VerticalTabGroup from '../../VerticalTabGroup.svelte';
-	import { cssLength } from '../../../Helpers/Helpers.svelte.js';
-	import { Size } from '../../../Types/Internal/Size.js';
-	import type { TabOption } from '../../../Types/Internal/TabOption.js';
-	import { Variant } from '../../../Types/Internal/Variant.js';
-	import { getContext, onMount } from 'svelte';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import type { Primitive } from '../Types/Context/TableInitOptions.js';
-	import type { DatatableView } from '../Types/Persistence/DatatableView.js';
-	import type { DatatableViewKind } from '../Types/Persistence/DatatableViewKind.js';
-	import ShareViewModal from './ShareViewModal.svelte';
-	import type { TableConfigurationModalProps } from './TableConfigurationModalProps.js';
-	import UpdateViewOptionsModal from './UpdateViewOptionsModal.svelte';
-
-	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
-
-	const { onclose }: TableConfigurationModalProps = $props();
-
-	// ── Left-nav section + right-pane tab selection ──────────────────────
-	// `section` picks the kind (layout vs filter); `tab` picks which of the
-	// three horizontal panes is visible for that section. Both are plain
-	// `$state` since they are pure local UI selection. They drive the
-	// `selected` prop of the two scoria tab groups below.
-	let section = $state<DatatableViewKind>('layout');
-	type ConfigTab = 'mine' | 'shared' | 'save';
-	let tab = $state<ConfigTab>('mine');
-
-	// Name field for the "Save a new ..." tab.
-	let newViewName = $state('');
-
-	// Public-views discovery state for the "Subscribe to Additional" flow.
-	// `null` = not yet loaded; an array = the last successful fetch.
-	let publicViews = $state<ReadonlyArray<DatatableView> | null>(null);
-	let loadingPublicViews = $state(false);
-
-	// User-visible error banner. Every adapter call is wrapped so a
-	// rejection lands here instead of throwing into the UI. scoria cannot
-	// assume a host-provided toast context exists, so the modal surfaces
-	// errors inline in its own body.
-	let errorMessage = $state<string | null>(null);
-
-	// True while the open-time fetch of saved views is in flight, so the
-	// My-tab shows "Loading…" rather than the "nothing saved yet" message.
-	let loadingViews = $state(false);
-
-	// The view whose Share modal is currently open. `null` when no share
-	// modal is rendered. Owner cards (rendered on the My-tab) wire their
-	// Share button to open `ShareViewModal` against the view they belong
-	// to; the modal closes itself on Cancel / Save.
-	let sharingView = $state<DatatableView | null>(null);
-
-	// The view whose Update Options modal is currently open. `null` when
-	// no options modal is rendered. Same pattern as `sharingView`.
-	let updatingOptionsView = $state<DatatableView | null>(null);
-
-	/**
-	 * Overwrite a saved view's stored body with the table's current
-	 * live state. Triggered by the "Save Layout" / "Save Filter"
-	 * button on an owner card - the typical flow is "apply view A,
-	 * tweak the columns / filters, then click Save on A". Refreshes
-	 * the saved-views list afterwards so the card label and dropdown
-	 * pick up the new body, and surfaces any failure in the inline
-	 * error banner.
-	 */
-	function saveLiveStateInto(view: DatatableView): void {
-		void guard(async () => {
-			await tableContext.saveLiveStateIntoView(view);
-			await tableContext.refreshSavedViews();
-		}, `Could not save changes to "${view.name}". Please try again.`);
-	}
-
-	// Whether remote saved views are available at all. A table created
-	// without `datatableUuid` / `remoteLayouts` opts out of remote views;
-	// the modal then renders a graceful "unavailable" empty state and
-	// makes zero adapter calls.
-	const remoteAvailable = $derived(
-		tableContext.datatableUuid !== undefined && tableContext.remoteLayouts !== undefined
-	);
-
-	// The opaque current-user id, used to scope "mine" vs "shared" and to
-	// drive subscribe / unsubscribe. `undefined` when the host supplied
-	// `() => undefined` - sharing controls then degrade gracefully.
-	const currentUserId = $derived(tableContext.getUserId());
-
-	// All saved views of the active section, split by ownership. A view the
-	// current user owns is "mine"; anything else they can see is "shared"
-	// (a subscription). When no user id is available every view falls into
-	// "mine" so the user can still manage what they have.
-	const sectionViews = $derived(tableContext._viewState.savedViews(section));
-	const myViews = $derived(
-		sectionViews.filter((view) => currentUserId === undefined || view.ownerUserId === currentUserId)
-	);
-	const sharedViews = $derived(
-		sectionViews.filter((view) => currentUserId !== undefined && view.ownerUserId !== currentUserId)
-	);
-
-	// Human labels for the active section, so the three tabs and headings
-	// read "My Layouts" / "My Filters" etc. without branching everywhere.
-	const sectionNoun = $derived(section === 'filter' ? 'Filter' : 'Layout');
-	const sectionNounPlural = $derived(section === 'filter' ? 'Filters' : 'Layouts');
-
-	/**
-	 * Run an adapter-backed action, clearing any prior error first and
-	 * routing a rejection to the inline error banner. Keeps every async
-	 * branch below a one-liner and guarantees no rejection escapes to the
-	 * UI (the modal never throws).
-	 */
-	async function guard(action: () => Promise<void>, failureMessage: string): Promise<void> {
-		errorMessage = null;
-		try {
-			await action();
-		} catch (e) {
-			// Surface the underlying error rather than swallowing it: the
-			// generic message alone has made failures hard to diagnose. The
-			// full error (with stack) goes to the console; its message is
-			// appended to the banner so it is visible without devtools.
-			console.error('[TableConfigurationModal] action failed:', e);
-			errorMessage = e instanceof Error ? `${failureMessage} (${e.message})` : failureMessage;
-		}
-	}
-
-	// Fetch the saved views fresh every time the modal opens. The boot-time
-	// fetch can miss (it races table construction / auth readiness), so the
-	// modal cannot rely on `_viewState.savedViews` already being populated -
-	// it pulls `GET /datatable-state` itself on open. A failure surfaces in
-	// the inline error banner via `guard` rather than being swallowed.
-	onMount(() => {
-		if (!remoteAvailable) {
-			return;
-		}
-		loadingViews = true;
-		void guard(
-			() => tableContext.refreshSavedViews(),
-			'Could not load saved layouts and filters. Please try again.'
-		).finally(() => {
-			loadingViews = false;
-		});
-	});
-
-	/** Apply a saved view to the live table. Pure local call - no await. */
-	function applyView(view: DatatableView): void {
-		errorMessage = null;
-		tableContext.applyDatatableView(view);
-	}
-
-	/** Delete a view the current user owns, then refresh the lists. */
-	function deleteView(view: DatatableView): void {
-		const adapter = tableContext.remoteLayouts;
-		if (!adapter) {
-			return;
-		}
-		void guard(async () => {
-			await adapter.deleteView(view.id);
-			await tableContext.refreshSavedViews();
-		}, `Could not delete "${view.name}". Please try again.`);
-	}
-
-	/**
-	 * Save the live state of the active section as a brand-new view.
-	 * `saveCurrentAsNewView` re-fetches the saved views and makes the new
-	 * one active; the `My …` list and the panel dropdowns are all driven
-	 * off the reactive `_viewState.savedViews(section)` so they update
-	 * without a reopen. On success we also switch to the `My …` tab so
-	 * the user immediately sees the view they just saved.
-	 */
-	function saveNewView(): void {
-		const trimmed = newViewName.trim();
-		if (!trimmed) {
-			return;
-		}
-		void guard(async () => {
-			await tableContext.saveCurrentAsNewView(trimmed, section);
-			newViewName = '';
-			selectTab('mine');
-		}, `Could not save the new ${sectionNoun.toLowerCase()}. Please try again.`);
-	}
-
-	/** Remove the current user as a subscriber of a shared view. */
-	function unsubscribe(view: DatatableView): void {
-		const adapter = tableContext.remoteLayouts;
-		if (!adapter || currentUserId === undefined) {
-			return;
-		}
-		void guard(async () => {
-			await adapter.removeSubscriber(view.id, currentUserId);
-			await tableContext.refreshSavedViews();
-		}, `Could not unsubscribe from "${view.name}". Please try again.`);
-	}
-
-	/** Remove a named subscriber from a view the current user owns. */
-	function removeSubscriber(view: DatatableView, userId: string): void {
-		const adapter = tableContext.remoteLayouts;
-		if (!adapter) {
-			return;
-		}
-		void guard(async () => {
-			await adapter.removeSubscriber(view.id, userId);
-			await tableContext.refreshSavedViews();
-		}, 'Could not remove the subscriber. Please try again.');
-	}
-
-	/** Fetch the public views the user could subscribe to. */
-	function loadPublicViews(): void {
-		const adapter = tableContext.remoteLayouts;
-		const datatableUuid = tableContext.datatableUuid;
-		if (!adapter || datatableUuid === undefined) {
-			return;
-		}
-		loadingPublicViews = true;
-		void guard(async () => {
-			const all = await adapter.listPublicViews(datatableUuid);
-			publicViews = all.filter((view) => view.kind === section);
-		}, 'Could not load views available to subscribe to. Please try again.').finally(() => {
-			loadingPublicViews = false;
-		});
-	}
-
-	/** Subscribe the current user to a public view, then refresh. */
-	function subscribe(view: DatatableView): void {
-		const adapter = tableContext.remoteLayouts;
-		if (!adapter || currentUserId === undefined) {
-			return;
-		}
-		void guard(async () => {
-			await adapter.addSubscriber(view.id, currentUserId);
-			await tableContext.refreshSavedViews();
-			loadPublicViews();
-		}, `Could not subscribe to "${view.name}". Please try again.`);
-	}
-
-	/** Switch the active left-nav section, resetting the tab + scratch UI. */
-	function selectSection(next: DatatableViewKind): void {
-		section = next;
-		tab = 'mine';
-		newViewName = '';
-		publicViews = null;
-		errorMessage = null;
-	}
-
-	/** Switch the active right-pane tab, resetting tab-local scratch UI. */
-	function selectTab(next: ConfigTab): void {
-		tab = next;
-		errorMessage = null;
-		if (next !== 'save') {
-			newViewName = '';
-		}
-		if (next !== 'shared') {
-			publicViews = null;
-		}
-	}
-
-	// ── scoria tab-group wiring ──────────────────────────────────────────
-	// The left-hand vertical nav is a `HorizontalTabGroup` (tabs strip on
-	// the left, content on the right); the top horizontal tabs are a
-	// `VerticalTabGroup` (tabs strip on top, content below). Same two
-	// scoria primitives the flowms order-allocation modal uses, so the
-	// look is consistent across the app.
-
-	/** The three top tabs for the active section. Rebuilt when the section
-	 *  flips so the labels track "My Layouts" / "My Filters" etc. */
-	const innerTabs: Array<TabOption<{ tab: ConfigTab }>> = $derived([
-		{
-			label: `My ${sectionNounPlural}`,
-			content: tabBody,
-			args: { tab: 'mine' },
-			onclick: () => {
-				selectTab('mine');
-			},
-		},
-		{
-			// DESIGN-REVIEW: the mockups were internally inconsistent
-			// ("Subscribed to Filters" on one, "Shared Filters" on
-			// another). Resolved to "Shared" consistently for both the
-			// layout and filter sections.
-			label: `Shared ${sectionNounPlural}`,
-			content: tabBody,
-			args: { tab: 'shared' },
-			onclick: () => {
-				selectTab('shared');
-			},
-		},
-		{
-			label: `Save a new ${sectionNoun}`,
-			content: tabBody,
-			args: { tab: 'save' },
-			onclick: () => {
-				selectTab('save');
-			},
-		},
-	]);
-
-	const selectedInnerTab = $derived(innerTabs.find((t) => t.args.tab === tab) ?? innerTabs[0]);
-
-	/** The two left-nav sections. Each renders the inner `VerticalTabGroup`
-	 *  via the shared `sectionPane` snippet. */
-	const sectionTabs: Array<TabOption<{ kind: DatatableViewKind }>> = [
-		{
-			label: 'Table Layouts',
-			content: sectionPane,
-			args: { kind: 'layout' },
-			onclick: () => {
-				selectSection('layout');
-			},
-		},
-		{
-			label: 'Table Filters',
-			content: sectionPane,
-			args: { kind: 'filter' },
-			onclick: () => {
-				selectSection('filter');
-			},
-		},
-	];
-
-	const selectedSectionTab = $derived(
-		sectionTabs.find((t) => t.args.kind === section) ?? sectionTabs[0]
-	);
-</script>
-
-<!-- Left-nav section pane: the top horizontal tabs for the active kind. -->
-{#snippet sectionPane(_args: { kind: DatatableViewKind })}
-	<div class="pane">
-		<VerticalTabGroup
-			tabs={innerTabs}
-			selected={selectedInnerTab}
-			nohistory
-		/>
-	</div>
-{/snippet}
-
-<!-- Body of a single top tab (My / Shared / Save). -->
-{#snippet tabBody(args: { tab: ConfigTab })}
-	<div class="tab-body">
-		{#if errorMessage}
-			<div
-				class="error-banner"
-				role="alert"
-			>
-				<Icon
-					name="circle-exclamation"
-					size={Size.Small}
-				/>
-				<span>{errorMessage}</span>
-			</div>
-		{/if}
-
-		{#if args.tab === 'mine'}
-			{#if loadingViews}
-				<InfoAlert>Loading saved {sectionNounPlural.toLowerCase()}…</InfoAlert>
-			{:else if myViews.length === 0}
-				<InfoAlert>
-					You have not saved any {sectionNounPlural.toLowerCase()} yet. Use the "Save a new {sectionNoun}"
-					tab to create one.
-				</InfoAlert>
-			{:else}
-				<ul class="card-list">
-					{#each myViews as view (view.id)}
-						<li class="view-card">
-							<div class="view-card-head">
-								<span class="view-name">{view.name}</span>
-								<div class="view-actions">
-									<Button
-										variant={Variant.Secondary}
-										size={Size.MediumSmall}
-										nowrap
-										onclick={() => {
-											applyView(view);
-										}}>Apply</Button
-									>
-									<!--
-										"Save Layout" / "Save Filter" overwrites THIS saved
-										view's stored body with the table's current live state.
-										Typical flow: user applies the view, tweaks the
-										columns or filter inputs, then clicks Save to make
-										the tweaks part of the saved view. Distinct from
-										"Save a new …" (which always creates a fresh record).
-									-->
-									<Button
-										variant={Variant.Secondary}
-										size={Size.MediumSmall}
-										nowrap
-										iconLeft={{ name: 'circle-tick', size: Size.Small }}
-										onclick={() => {
-											saveLiveStateInto(view);
-										}}>Save {sectionNoun}</Button
-									>
-									<!--
-										"Update Options" opens a dedicated modal that edits
-										the view's name and sharing visibility (private /
-										public). Kept separate from the inline body-save
-										above so a quick name fix never accidentally
-										overwrites the saved layout / filter.
-									-->
-									<Button
-										variant={Variant.Secondary}
-										size={Size.MediumSmall}
-										nowrap
-										iconLeft={{ name: 'edit', size: Size.Small }}
-										onclick={() => {
-											updatingOptionsView = view;
-										}}>Update Options</Button
-									>
-									<Button
-										variant={Variant.Secondary}
-										size={Size.MediumSmall}
-										nowrap
-										iconLeft={{ name: 'external-link', size: Size.Small }}
-										onclick={() => {
-											// Open the share dialog rather than switching to
-											// the "Shared" tab - subscribing OTHER users to
-											// this view is a distinct flow from "Subscribe
-											// to Additional" (which is the current user
-											// joining a public view).
-											sharingView = view;
-										}}>Share</Button
-									>
-									<Button
-										variant={Variant.Secondary}
-										size={Size.MediumSmall}
-										nowrap
-										iconLeft={{ name: 'circle-cross', size: Size.Small }}
-										onclick={() => {
-											deleteView(view);
-										}}>Delete</Button
-									>
-								</div>
-							</div>
-							{#if view.subscribers && view.subscribers.length > 0}
-								<ul class="subscriber-list">
-									{#each view.subscribers as subscriber (subscriber.userId)}
-										<li class="subscriber">
-											<Icon
-												name="user-3"
-												size={Size.Small}
-											/>
-											<span>{subscriber.displayName ?? subscriber.userId}</span>
-											<Button
-												variant={Variant.Secondary}
-												size={Size.Tiny}
-												nowrap
-												onclick={() => {
-													removeSubscriber(view, subscriber.userId);
-												}}>Remove</Button
-											>
-										</li>
-									{/each}
-								</ul>
-							{/if}
-						</li>
-					{/each}
-				</ul>
-			{/if}
-		{:else if args.tab === 'shared'}
-			<div class="shared-head">
-				<Button
-					variant={Variant.Secondary}
-					size={Size.MediumSmall}
-					nowrap
-					disabled={loadingPublicViews}
-					iconLeft={{ name: 'circle-plus', size: Size.Small }}
-					onclick={loadPublicViews}>Subscribe to Additional...</Button
-				>
-			</div>
-
-			{#if publicViews !== null}
-				{#if publicViews.length === 0}
-					<InfoAlert>
-						There are no further {sectionNounPlural.toLowerCase()} available to subscribe to.
-					</InfoAlert>
-				{:else}
-					<ul class="card-list">
-						{#each publicViews as view (view.id)}
-							<li class="view-card">
-								<div class="view-card-head">
-									<span class="view-name">{view.name}</span>
-									<div class="view-actions">
-										<Button
-											variant={Variant.Secondary}
-											size={Size.MediumSmall}
-											nowrap
-											disabled={currentUserId === undefined}
-											onclick={() => {
-												subscribe(view);
-											}}>Subscribe</Button
-										>
-									</div>
-								</div>
-							</li>
-						{/each}
-					</ul>
-				{/if}
-			{/if}
-
-			{#if sharedViews.length === 0}
-				<InfoAlert>
-					No {sectionNounPlural.toLowerCase()} are currently shared with you.
-				</InfoAlert>
-			{:else}
-				<ul class="card-list">
-					{#each sharedViews as view (view.id)}
-						<li class="view-card">
-							<div class="view-card-head">
-								<span class="view-name">{view.name}</span>
-								<div class="view-actions">
-									<Button
-										variant={Variant.Secondary}
-										size={Size.MediumSmall}
-										nowrap
-										onclick={() => {
-											applyView(view);
-										}}>Apply</Button
-									>
-									<Button
-										variant={Variant.Secondary}
-										size={Size.MediumSmall}
-										nowrap
-										disabled={currentUserId === undefined}
-										onclick={() => {
-											unsubscribe(view);
-										}}>Unsubscribe</Button
-									>
-								</div>
-							</div>
-						</li>
-					{/each}
-				</ul>
-			{/if}
-		{:else}
-			<div class="save-tab">
-				<InfoAlert>
-					Save the table's current {sectionNoun.toLowerCase()} as a reusable named
-					{sectionNoun.toLowerCase()}.
-				</InfoAlert>
-				<!-- The InfoAlert above spans the full tab body so the
-					empty-state visuals are consistent across all three tabs.
-					The name input + Save button below stay grouped in a
-					narrower form column (`.save-tab-form`) so they keep
-					comfortable form proportions instead of stretching across
-					the whole 50vw modal. -->
-				<div class="save-tab-form">
-					<TextInput
-						placeholder={`${sectionNoun} name`}
-						bind:value={newViewName}
-						onkeydown={(e: KeyboardEvent) => {
-							if (e.key === 'Enter') {
-								e.preventDefault();
-								saveNewView();
-							}
-						}}
-					/>
-					<!-- Wrap the button in a row so the flex column's default
-						`align-items: stretch` does not blow it up to the input's
-						width. The row itself can stretch; the button inside sits
-						at its natural content width like every other Button. -->
-					<div class="save-tab-actions">
-						<Button
-							disabled={!newViewName.trim()}
-							onclick={saveNewView}>Save Current</Button
-						>
-					</div>
-				</div>
-			</div>
-		{/if}
-	</div>
-{/snippet}
-
-<DesktopModal
-	headerLabel="Table Configuration"
-	headerSubtitle={tableContext.datatableUuid
-		? `Table Identifier: ${tableContext.datatableUuid}`
-		: undefined}
-	onclose={() => onclose?.()}
-	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
-	width={cssLength('50vw')}
-	minWidth={cssLength('40rem')}
->
-	{#if !remoteAvailable}
-		<div class="empty-state">
-			<Icon
-				name="circle-information"
-				size={Size.Large}
-			/>
-			<p>Saved layouts and filters are unavailable for this table.</p>
-		</div>
-	{:else}
-		<div class="config">
-			<HorizontalTabGroup
-				tabs={sectionTabs}
-				selected={selectedSectionTab}
-				grow
-			/>
-		</div>
-	{/if}
-</DesktopModal>
-
-<!--
-	Share dialog stacked on top of the Configuration modal. Rendered as a
-	sibling (not nested in the modal body) so the second modal's overlay
-	covers the first - matching how every other layered modal in scoria
-	stacks. After a successful Save we refresh the saved-views list so the
-	owner's card's subscriber strip updates immediately, then close.
--->
-{#if sharingView}
-	<ShareViewModal
-		view={sharingView}
-		onclose={() => {
-			sharingView = null;
-		}}
-		onsaved={async () => {
-			await tableContext.refreshSavedViews();
-		}}
-	/>
-{/if}
-
-<!--
-	Update-Options dialog stacked the same way as the Share dialog.
-	After a successful Save we refresh the saved views so the My-* card
-	picks up the new name / visibility immediately.
--->
-{#if updatingOptionsView}
-	<UpdateViewOptionsModal
-		view={updatingOptionsView}
-		onclose={() => {
-			updatingOptionsView = null;
-		}}
-		onsaved={async () => {
-			await tableContext.refreshSavedViews();
-		}}
-	/>
-{/if}
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>
+	import Button from '../../Button.svelte';
+	import DesktopModal from '../../DesktopModal.svelte';
+	import HorizontalTabGroup from '../../HorizontalTabGroup.svelte';
+	import Icon from '../../Icon.svelte';
+	import InfoAlert from '../../InfoAlert.svelte';
+	import TextInput from '../../TextInput.svelte';
+	import VerticalTabGroup from '../../VerticalTabGroup.svelte';
+	import { cssLength } from '../../../Helpers/Helpers.svelte.js';
+	import { Size } from '../../../Types/Internal/Size.js';
+	import type { TabOption } from '../../../Types/Internal/TabOption.js';
+	import { Variant } from '../../../Types/Internal/Variant.js';
+	import { getContext, onMount } from 'svelte';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
+	import type { DatatableView } from '../Types/Persistence/DatatableView.js';
+	import type { DatatableViewKind } from '../Types/Persistence/DatatableViewKind.js';
+	import ShareViewModal from './ShareViewModal.svelte';
+	import type { TableConfigurationModalProps } from './TableConfigurationModalProps.js';
+	import UpdateViewOptionsModal from './UpdateViewOptionsModal.svelte';
+
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+
+	const { onclose }: TableConfigurationModalProps = $props();
+
+	// ── Left-nav section + right-pane tab selection ──────────────────────
+	// `section` picks the kind (layout vs filter); `tab` picks which of the
+	// three horizontal panes is visible for that section. Both are plain
+	// `$state` since they are pure local UI selection. They drive the
+	// `selected` prop of the two scoria tab groups below.
+	let section = $state<DatatableViewKind>('layout');
+	type ConfigTab = 'mine' | 'shared' | 'save';
+	let tab = $state<ConfigTab>('mine');
+
+	// Name field for the "Save a new ..." tab.
+	let newViewName = $state('');
+
+	// Public-views discovery state for the "Subscribe to Additional" flow.
+	// `null` = not yet loaded; an array = the last successful fetch.
+	let publicViews = $state<ReadonlyArray<DatatableView> | null>(null);
+	let loadingPublicViews = $state(false);
+
+	// User-visible error banner. Every adapter call is wrapped so a
+	// rejection lands here instead of throwing into the UI. scoria cannot
+	// assume a host-provided toast context exists, so the modal surfaces
+	// errors inline in its own body.
+	let errorMessage = $state<string | null>(null);
+
+	// True while the open-time fetch of saved views is in flight, so the
+	// My-tab shows "Loading…" rather than the "nothing saved yet" message.
+	let loadingViews = $state(false);
+
+	// The view whose Share modal is currently open. `null` when no share
+	// modal is rendered. Owner cards (rendered on the My-tab) wire their
+	// Share button to open `ShareViewModal` against the view they belong
+	// to; the modal closes itself on Cancel / Save.
+	let sharingView = $state<DatatableView | null>(null);
+
+	// The view whose Update Options modal is currently open. `null` when
+	// no options modal is rendered. Same pattern as `sharingView`.
+	let updatingOptionsView = $state<DatatableView | null>(null);
+
+	/**
+	 * Overwrite a saved view's stored body with the table's current
+	 * live state. Triggered by the "Save Layout" / "Save Filter"
+	 * button on an owner card - the typical flow is "apply view A,
+	 * tweak the columns / filters, then click Save on A". Refreshes
+	 * the saved-views list afterwards so the card label and dropdown
+	 * pick up the new body, and surfaces any failure in the inline
+	 * error banner.
+	 */
+	function saveLiveStateInto(view: DatatableView): void {
+		void guard(async () => {
+			await tableContext.saveLiveStateIntoView(view);
+			await tableContext.refreshSavedViews();
+		}, `Could not save changes to "${view.name}". Please try again.`);
+	}
+
+	// Whether remote saved views are available at all. A table created
+	// without `datatableUuid` / `remoteLayouts` opts out of remote views;
+	// the modal then renders a graceful "unavailable" empty state and
+	// makes zero adapter calls.
+	const remoteAvailable = $derived(
+		tableContext.datatableUuid !== undefined && tableContext.remoteLayouts !== undefined
+	);
+
+	// The opaque current-user id, used to scope "mine" vs "shared" and to
+	// drive subscribe / unsubscribe. `undefined` when the host supplied
+	// `() => undefined` - sharing controls then degrade gracefully.
+	const currentUserId = $derived(tableContext.getUserId());
+
+	// All saved views of the active section, split by ownership. A view the
+	// current user owns is "mine"; anything else they can see is "shared"
+	// (a subscription). When no user id is available every view falls into
+	// "mine" so the user can still manage what they have.
+	const sectionViews = $derived(tableContext._viewState.savedViews(section));
+	const myViews = $derived(
+		sectionViews.filter((view) => currentUserId === undefined || view.ownerUserId === currentUserId)
+	);
+	const sharedViews = $derived(
+		sectionViews.filter((view) => currentUserId !== undefined && view.ownerUserId !== currentUserId)
+	);
+
+	// Human labels for the active section, so the three tabs and headings
+	// read "My Layouts" / "My Filters" etc. without branching everywhere.
+	const sectionNoun = $derived(section === 'filter' ? 'Filter' : 'Layout');
+	const sectionNounPlural = $derived(section === 'filter' ? 'Filters' : 'Layouts');
+
+	/**
+	 * Run an adapter-backed action, clearing any prior error first and
+	 * routing a rejection to the inline error banner. Keeps every async
+	 * branch below a one-liner and guarantees no rejection escapes to the
+	 * UI (the modal never throws).
+	 */
+	async function guard(action: () => Promise<void>, failureMessage: string): Promise<void> {
+		errorMessage = null;
+		try {
+			await action();
+		} catch (e) {
+			// Surface the underlying error rather than swallowing it: the
+			// generic message alone has made failures hard to diagnose. The
+			// full error (with stack) goes to the console; its message is
+			// appended to the banner so it is visible without devtools.
+			console.error('[TableConfigurationModal] action failed:', e);
+			errorMessage = e instanceof Error ? `${failureMessage} (${e.message})` : failureMessage;
+		}
+	}
+
+	// Fetch the saved views fresh every time the modal opens. The boot-time
+	// fetch can miss (it races table construction / auth readiness), so the
+	// modal cannot rely on `_viewState.savedViews` already being populated -
+	// it pulls `GET /datatable-state` itself on open. A failure surfaces in
+	// the inline error banner via `guard` rather than being swallowed.
+	onMount(() => {
+		if (!remoteAvailable) {
+			return;
+		}
+		loadingViews = true;
+		void guard(
+			() => tableContext.refreshSavedViews(),
+			'Could not load saved layouts and filters. Please try again.'
+		).finally(() => {
+			loadingViews = false;
+		});
+	});
+
+	/** Apply a saved view to the live table. Pure local call - no await. */
+	function applyView(view: DatatableView): void {
+		errorMessage = null;
+		tableContext.applyDatatableView(view);
+	}
+
+	/** Delete a view the current user owns, then refresh the lists. */
+	function deleteView(view: DatatableView): void {
+		const adapter = tableContext.remoteLayouts;
+		if (!adapter) {
+			return;
+		}
+		void guard(async () => {
+			await adapter.deleteView(view.id);
+			await tableContext.refreshSavedViews();
+		}, `Could not delete "${view.name}". Please try again.`);
+	}
+
+	/**
+	 * Save the live state of the active section as a brand-new view.
+	 * `saveCurrentAsNewView` re-fetches the saved views and makes the new
+	 * one active; the `My …` list and the panel dropdowns are all driven
+	 * off the reactive `_viewState.savedViews(section)` so they update
+	 * without a reopen. On success we also switch to the `My …` tab so
+	 * the user immediately sees the view they just saved.
+	 */
+	function saveNewView(): void {
+		const trimmed = newViewName.trim();
+		if (!trimmed) {
+			return;
+		}
+		void guard(async () => {
+			await tableContext.saveCurrentAsNewView(trimmed, section);
+			newViewName = '';
+			selectTab('mine');
+		}, `Could not save the new ${sectionNoun.toLowerCase()}. Please try again.`);
+	}
+
+	/** Remove the current user as a subscriber of a shared view. */
+	function unsubscribe(view: DatatableView): void {
+		const adapter = tableContext.remoteLayouts;
+		if (!adapter || currentUserId === undefined) {
+			return;
+		}
+		void guard(async () => {
+			await adapter.removeSubscriber(view.id, currentUserId);
+			await tableContext.refreshSavedViews();
+		}, `Could not unsubscribe from "${view.name}". Please try again.`);
+	}
+
+	/** Remove a named subscriber from a view the current user owns. */
+	function removeSubscriber(view: DatatableView, userId: string): void {
+		const adapter = tableContext.remoteLayouts;
+		if (!adapter) {
+			return;
+		}
+		void guard(async () => {
+			await adapter.removeSubscriber(view.id, userId);
+			await tableContext.refreshSavedViews();
+		}, 'Could not remove the subscriber. Please try again.');
+	}
+
+	/** Fetch the public views the user could subscribe to. */
+	function loadPublicViews(): void {
+		const adapter = tableContext.remoteLayouts;
+		const datatableUuid = tableContext.datatableUuid;
+		if (!adapter || datatableUuid === undefined) {
+			return;
+		}
+		loadingPublicViews = true;
+		void guard(async () => {
+			const all = await adapter.listPublicViews(datatableUuid);
+			publicViews = all.filter((view) => view.kind === section);
+		}, 'Could not load views available to subscribe to. Please try again.').finally(() => {
+			loadingPublicViews = false;
+		});
+	}
+
+	/** Subscribe the current user to a public view, then refresh. */
+	function subscribe(view: DatatableView): void {
+		const adapter = tableContext.remoteLayouts;
+		if (!adapter || currentUserId === undefined) {
+			return;
+		}
+		void guard(async () => {
+			await adapter.addSubscriber(view.id, currentUserId);
+			await tableContext.refreshSavedViews();
+			loadPublicViews();
+		}, `Could not subscribe to "${view.name}". Please try again.`);
+	}
+
+	/** Switch the active left-nav section, resetting the tab + scratch UI. */
+	function selectSection(next: DatatableViewKind): void {
+		section = next;
+		tab = 'mine';
+		newViewName = '';
+		publicViews = null;
+		errorMessage = null;
+	}
+
+	/** Switch the active right-pane tab, resetting tab-local scratch UI. */
+	function selectTab(next: ConfigTab): void {
+		tab = next;
+		errorMessage = null;
+		if (next !== 'save') {
+			newViewName = '';
+		}
+		if (next !== 'shared') {
+			publicViews = null;
+		}
+	}
+
+	// ── scoria tab-group wiring ──────────────────────────────────────────
+	// The left-hand vertical nav is a `HorizontalTabGroup` (tabs strip on
+	// the left, content on the right); the top horizontal tabs are a
+	// `VerticalTabGroup` (tabs strip on top, content below). Same two
+	// scoria primitives the flowms order-allocation modal uses, so the
+	// look is consistent across the app.
+
+	/** The three top tabs for the active section. Rebuilt when the section
+	 *  flips so the labels track "My Layouts" / "My Filters" etc. */
+	const innerTabs: Array<TabOption<{ tab: ConfigTab }>> = $derived([
+		{
+			label: `My ${sectionNounPlural}`,
+			content: tabBody,
+			args: { tab: 'mine' },
+			onclick: () => {
+				selectTab('mine');
+			},
+		},
+		{
+			// DESIGN-REVIEW: the mockups were internally inconsistent
+			// ("Subscribed to Filters" on one, "Shared Filters" on
+			// another). Resolved to "Shared" consistently for both the
+			// layout and filter sections.
+			label: `Shared ${sectionNounPlural}`,
+			content: tabBody,
+			args: { tab: 'shared' },
+			onclick: () => {
+				selectTab('shared');
+			},
+		},
+		{
+			label: `Save a new ${sectionNoun}`,
+			content: tabBody,
+			args: { tab: 'save' },
+			onclick: () => {
+				selectTab('save');
+			},
+		},
+	]);
+
+	const selectedInnerTab = $derived(innerTabs.find((t) => t.args.tab === tab) ?? innerTabs[0]);
+
+	/** The two left-nav sections. Each renders the inner `VerticalTabGroup`
+	 *  via the shared `sectionPane` snippet. */
+	const sectionTabs: Array<TabOption<{ kind: DatatableViewKind }>> = [
+		{
+			label: 'Table Layouts',
+			content: sectionPane,
+			args: { kind: 'layout' },
+			onclick: () => {
+				selectSection('layout');
+			},
+		},
+		{
+			label: 'Table Filters',
+			content: sectionPane,
+			args: { kind: 'filter' },
+			onclick: () => {
+				selectSection('filter');
+			},
+		},
+	];
+
+	const selectedSectionTab = $derived(
+		sectionTabs.find((t) => t.args.kind === section) ?? sectionTabs[0]
+	);
+</script>
+
+<!-- Left-nav section pane: the top horizontal tabs for the active kind. -->
+{#snippet sectionPane(_args: { kind: DatatableViewKind })}
+	<div class="pane">
+		<VerticalTabGroup
+			tabs={innerTabs}
+			selected={selectedInnerTab}
+			nohistory
+		/>
+	</div>
+{/snippet}
+
+<!-- Body of a single top tab (My / Shared / Save). -->
+{#snippet tabBody(args: { tab: ConfigTab })}
+	<div class="tab-body">
+		{#if errorMessage}
+			<div
+				class="error-banner"
+				role="alert"
+			>
+				<Icon
+					name="circle-exclamation"
+					size={Size.Small}
+				/>
+				<span>{errorMessage}</span>
+			</div>
+		{/if}
+
+		{#if args.tab === 'mine'}
+			{#if loadingViews}
+				<InfoAlert>Loading saved {sectionNounPlural.toLowerCase()}…</InfoAlert>
+			{:else if myViews.length === 0}
+				<InfoAlert>
+					You have not saved any {sectionNounPlural.toLowerCase()} yet. Use the "Save a new {sectionNoun}"
+					tab to create one.
+				</InfoAlert>
+			{:else}
+				<ul class="card-list">
+					{#each myViews as view (view.id)}
+						<li class="view-card">
+							<div class="view-card-head">
+								<span class="view-name">{view.name}</span>
+								<div class="view-actions">
+									<Button
+										variant={Variant.Secondary}
+										size={Size.MediumSmall}
+										nowrap
+										onclick={() => {
+											applyView(view);
+										}}>Apply</Button
+									>
+									<!--
+										"Save Layout" / "Save Filter" overwrites THIS saved
+										view's stored body with the table's current live state.
+										Typical flow: user applies the view, tweaks the
+										columns or filter inputs, then clicks Save to make
+										the tweaks part of the saved view. Distinct from
+										"Save a new …" (which always creates a fresh record).
+									-->
+									<Button
+										variant={Variant.Secondary}
+										size={Size.MediumSmall}
+										nowrap
+										iconLeft={{ name: 'circle-tick', size: Size.Small }}
+										onclick={() => {
+											saveLiveStateInto(view);
+										}}>Save {sectionNoun}</Button
+									>
+									<!--
+										"Update Options" opens a dedicated modal that edits
+										the view's name and sharing visibility (private /
+										public). Kept separate from the inline body-save
+										above so a quick name fix never accidentally
+										overwrites the saved layout / filter.
+									-->
+									<Button
+										variant={Variant.Secondary}
+										size={Size.MediumSmall}
+										nowrap
+										iconLeft={{ name: 'edit', size: Size.Small }}
+										onclick={() => {
+											updatingOptionsView = view;
+										}}>Update Options</Button
+									>
+									<Button
+										variant={Variant.Secondary}
+										size={Size.MediumSmall}
+										nowrap
+										iconLeft={{ name: 'external-link', size: Size.Small }}
+										onclick={() => {
+											// Open the share dialog rather than switching to
+											// the "Shared" tab - subscribing OTHER users to
+											// this view is a distinct flow from "Subscribe
+											// to Additional" (which is the current user
+											// joining a public view).
+											sharingView = view;
+										}}>Share</Button
+									>
+									<Button
+										variant={Variant.Secondary}
+										size={Size.MediumSmall}
+										nowrap
+										iconLeft={{ name: 'circle-cross', size: Size.Small }}
+										onclick={() => {
+											deleteView(view);
+										}}>Delete</Button
+									>
+								</div>
+							</div>
+							{#if view.subscribers && view.subscribers.length > 0}
+								<ul class="subscriber-list">
+									{#each view.subscribers as subscriber (subscriber.userId)}
+										<li class="subscriber">
+											<Icon
+												name="user-3"
+												size={Size.Small}
+											/>
+											<span>{subscriber.displayName ?? subscriber.userId}</span>
+											<Button
+												variant={Variant.Secondary}
+												size={Size.Tiny}
+												nowrap
+												onclick={() => {
+													removeSubscriber(view, subscriber.userId);
+												}}>Remove</Button
+											>
+										</li>
+									{/each}
+								</ul>
+							{/if}
+						</li>
+					{/each}
+				</ul>
+			{/if}
+		{:else if args.tab === 'shared'}
+			<div class="shared-head">
+				<Button
+					variant={Variant.Secondary}
+					size={Size.MediumSmall}
+					nowrap
+					disabled={loadingPublicViews}
+					iconLeft={{ name: 'circle-plus', size: Size.Small }}
+					onclick={loadPublicViews}>Subscribe to Additional...</Button
+				>
+			</div>
+
+			{#if publicViews !== null}
+				{#if publicViews.length === 0}
+					<InfoAlert>
+						There are no further {sectionNounPlural.toLowerCase()} available to subscribe to.
+					</InfoAlert>
+				{:else}
+					<ul class="card-list">
+						{#each publicViews as view (view.id)}
+							<li class="view-card">
+								<div class="view-card-head">
+									<span class="view-name">{view.name}</span>
+									<div class="view-actions">
+										<Button
+											variant={Variant.Secondary}
+											size={Size.MediumSmall}
+											nowrap
+											disabled={currentUserId === undefined}
+											onclick={() => {
+												subscribe(view);
+											}}>Subscribe</Button
+										>
+									</div>
+								</div>
+							</li>
+						{/each}
+					</ul>
+				{/if}
+			{/if}
+
+			{#if sharedViews.length === 0}
+				<InfoAlert>
+					No {sectionNounPlural.toLowerCase()} are currently shared with you.
+				</InfoAlert>
+			{:else}
+				<ul class="card-list">
+					{#each sharedViews as view (view.id)}
+						<li class="view-card">
+							<div class="view-card-head">
+								<span class="view-name">{view.name}</span>
+								<div class="view-actions">
+									<Button
+										variant={Variant.Secondary}
+										size={Size.MediumSmall}
+										nowrap
+										onclick={() => {
+											applyView(view);
+										}}>Apply</Button
+									>
+									<Button
+										variant={Variant.Secondary}
+										size={Size.MediumSmall}
+										nowrap
+										disabled={currentUserId === undefined}
+										onclick={() => {
+											unsubscribe(view);
+										}}>Unsubscribe</Button
+									>
+								</div>
+							</div>
+						</li>
+					{/each}
+				</ul>
+			{/if}
+		{:else}
+			<div class="save-tab">
+				<InfoAlert>
+					Save the table's current {sectionNoun.toLowerCase()} as a reusable named
+					{sectionNoun.toLowerCase()}.
+				</InfoAlert>
+				<!-- The InfoAlert above spans the full tab body so the
+					empty-state visuals are consistent across all three tabs.
+					The name input + Save button below stay grouped in a
+					narrower form column (`.save-tab-form`) so they keep
+					comfortable form proportions instead of stretching across
+					the whole 50vw modal. -->
+				<div class="save-tab-form">
+					<TextInput
+						placeholder={`${sectionNoun} name`}
+						bind:value={newViewName}
+						onkeydown={(e: KeyboardEvent) => {
+							if (e.key === 'Enter') {
+								e.preventDefault();
+								saveNewView();
+							}
+						}}
+					/>
+					<!-- Wrap the button in a row so the flex column's default
+						`align-items: stretch` does not blow it up to the input's
+						width. The row itself can stretch; the button inside sits
+						at its natural content width like every other Button. -->
+					<div class="save-tab-actions">
+						<Button
+							disabled={!newViewName.trim()}
+							onclick={saveNewView}>Save Current</Button
+						>
+					</div>
+				</div>
+			</div>
+		{/if}
+	</div>
+{/snippet}
+
+<DesktopModal
+	headerLabel="Table Configuration"
+	headerSubtitle={tableContext.datatableUuid
+		? `Table Identifier: ${tableContext.datatableUuid}`
+		: undefined}
+	onclose={() => onclose?.()}
+	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
+	width={cssLength('50vw')}
+	minWidth={cssLength('40rem')}
+>
+	{#if !remoteAvailable}
+		<div class="empty-state">
+			<Icon
+				name="circle-information"
+				size={Size.Large}
+			/>
+			<p>Saved layouts and filters are unavailable for this table.</p>
+		</div>
+	{:else}
+		<div class="config">
+			<HorizontalTabGroup
+				tabs={sectionTabs}
+				selected={selectedSectionTab}
+				grow
+			/>
+		</div>
+	{/if}
+</DesktopModal>
+
+<!--
+	Share dialog stacked on top of the Configuration modal. Rendered as a
+	sibling (not nested in the modal body) so the second modal's overlay
+	covers the first - matching how every other layered modal in scoria
+	stacks. After a successful Save we refresh the saved-views list so the
+	owner's card's subscriber strip updates immediately, then close.
+-->
+{#if sharingView}
+	<ShareViewModal
+		view={sharingView}
+		onclose={() => {
+			sharingView = null;
+		}}
+		onsaved={async () => {
+			await tableContext.refreshSavedViews();
+		}}
+	/>
+{/if}
+
+<!--
+	Update-Options dialog stacked the same way as the Share dialog.
+	After a successful Save we refresh the saved views so the My-* card
+	picks up the new name / visibility immediately.
+-->
+{#if updatingOptionsView}
+	<UpdateViewOptionsModal
+		view={updatingOptionsView}
+		onclose={() => {
+			updatingOptionsView = null;
+		}}
+		onsaved={async () => {
+			await tableContext.refreshSavedViews();
+		}}
+	/>
+{/if}
+
 <style>.empty-state {
   display: flex;
   flex-flow: column nowrap;
@@ -799,4 +799,4 @@
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-start;
-}</style>
+}</style>