@lavalogic/scoria 0.38.0 → 0.38.2

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

@@ -4,6 +4,7 @@
 	import ColumnList from '../Body/Rows/ColumnList.svelte';
 	import TextInput from '../../TextInput.svelte';
 	import { Size } from '../../../Types/Internal/Size.js';
+	import TableViewDropdown from './TableViewDropdown.svelte';
 
 	let searchValue = $state('');
 </script>
@@ -14,6 +15,10 @@
 	</header>
 
 	<div class="toolbar">
+		<!-- Quick-switch dropdown for saved column layouts. Sits above the
+		     search box; saving a layout is done from the Table
+		     Configuration modal's "Save a new Layout" tab. -->
+		<TableViewDropdown kind="layout" />
 		<TextInput
 			bind:value={searchValue}
 			leftIcon={{ name: 'search', size: Size.Medium }}
@@ -83,6 +88,10 @@
   box-sizing: border-box;
 }
 
+/* Top toolbar (saved-layout dropdown + Search input) sits below the
+   header but above the scrollable list. It is intentionally not
+   inside `.side-panel-body` because the list takes the remaining
+   vertical space and scrolls on its own. */
 .toolbar {
   flex-shrink: 0;
   padding: 1rem 1.25rem;
@@ -100,6 +109,13 @@
   display: flex;
   flex-flow: column nowrap;
   background-color: #ffffff;
+  /* Horizontal padding aligned with FilterPanel's `.side-panel-body`
+     so the column-list cards leave the same gutter before the panel's
+     right border as the filter chips do, and the SidePanel's
+     `border-right` stays visible between the content and the toolbar
+     icons. Vertical padding is 0 because `.column-list` provides
+     its own 0.5rem padding (which doubles up to a 1.5rem gap from
+     the toolbar above and the footer below). */
   padding: 0 1.25rem;
   box-sizing: border-box;
 }</style>

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

@@ -5,17 +5,16 @@
 	generics="T extends object, IdType extends Primitive"
 >
 	import Action from '../../Action.svelte';
-	import Button from '../../Button.svelte';
 	import TextInput from '../../TextInput.svelte';
 	import { Colour, ColourSet } from '../../../scss/colours.js';
 	import { Size } from '../../../Types/Internal/Size.js';
-	import { Variant } from '../../../Types/Internal/Variant.js';
 	import { SvelteSet } from 'svelte/reactivity';
 	import { getContext } from 'svelte';
 	import type { Primitive } from '../Types/Context/TableInitOptions.js';
 	import type { ColumnDef } from '../Types/Columns/Definitions/ColumnDef.svelte.js';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 	import FilterInput from './FilterInput.svelte';
+	import TableViewDropdown from './TableViewDropdown.svelte';
 
 	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
 
@@ -31,11 +30,6 @@
 	 *  string is the "no filter" state. */
 	let quickFindValue: string = $state('');
 
-	/** Whether the Save Filter overflow menu is open. The chevron
-	 *  toggles it; clicking anywhere else (via the window-level
-	 *  listener below) closes it. */
-	let saveMenuOpen: boolean = $state(false);
-
 	/** Names of currently-collapsed groups. A name absent from this
 	 *  set is rendered expanded. Reactive via `SvelteSet` so the panel
 	 *  re-renders on toggle without manually re-assigning. */
@@ -106,39 +100,6 @@
 		}
 	}
 
-	function resetFilters(): void {
-		tableContext.paginationRepo?.resetFilters();
-	}
-
-	/**
-	 * Placeholder for the future Save-Filter / preset workflow. For
-	 * now this just closes the overflow menu; consumers wire the real
-	 * persistence layer in a follow-up workorder. The chevron menu is
-	 * still useful today as a home for the Reset action and as the
-	 * insertion point for "Load Filter" / "Manage Filters" entries
-	 * once those land.
-	 */
-	function saveFilter(): void {
-		saveMenuOpen = false;
-		if (typeof window !== 'undefined') {
-			window.dispatchEvent(
-				new CustomEvent('scoria:save-filter', {
-					detail: { tableName: tableContext.tableName },
-				})
-			);
-		}
-	}
-
-	function handleWindowClick(e: MouseEvent): void {
-		if (!saveMenuOpen) {
-			return;
-		}
-		const target = e.target as HTMLElement | null;
-		if (target?.closest('.save-filter-cluster') == null) {
-			saveMenuOpen = false;
-		}
-	}
-
 	/**
 	 * No-op keydown handler used to override `TextInput`'s default
 	 * `passthrough` keydown (defined in `Helpers.svelte.ts`), which
@@ -155,14 +116,16 @@
 	}
 </script>
 
-<svelte:window onclick={handleWindowClick} />
-
 <section class="side-panel-section">
 	<header class="side-panel-header">
 		<h2>Advanced Filter</h2>
 	</header>
 
 	<div class="toolbar">
+		<!-- Quick-switch dropdown for saved filter sets. Sits above the
+		     search box; saving a filter is done from the Table
+		     Configuration modal's "Save a new Filter" tab. -->
+		<TableViewDropdown kind="filter" />
 		<div class="quick-find">
 			<TextInput
 				labelTop="Quick Find a Filter"
@@ -172,36 +135,6 @@
 				onkeydown={noopKeydown}
 			/>
 		</div>
-
-		<div class="save-filter-cluster">
-			<Button
-				variant={Variant.Secondary}
-				nowrap
-				disabled
-				size={Size.MediumSmall}
-				onclick={saveFilter}>Save Filter</Button
-			>
-			<Action
-				label="More save options"
-				colourSet={ColourSet.Auxiliary}
-				icon={{ name: 'chevron-down', size: Size.Medium }}
-				onclick={() => {
-					saveMenuOpen = !saveMenuOpen;
-				}}
-			/>
-			{#if saveMenuOpen}
-				<div class="save-menu">
-					<button
-						type="button"
-						class="save-menu-item"
-						onclick={() => {
-							saveMenuOpen = false;
-							resetFilters();
-						}}>Reset all filters</button
-					>
-				</div>
-			{/if}
-		</div>
 	</div>
 
 	<div class="side-panel-body">
@@ -306,59 +239,24 @@
   box-sizing: border-box;
 }
 
+/* Top toolbar (saved-filter dropdown + Quick Find) sits below the
+   header but above the scrollable body. Kept outside
+   `.side-panel-body` so it stays pinned while the groups list
+   scrolls underneath. The two rows stack vertically: the
+   quick-switch dropdown on top, the search field below it. */
 .toolbar {
   flex-shrink: 0;
   display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
+  flex-flow: column nowrap;
   gap: 0.75rem;
   padding: 1rem 1.25rem;
   background-color: #ffffff;
   border-bottom: solid 1px #cbd4da;
 }
 .toolbar .quick-find {
-  flex: 1;
   min-width: 0;
   --input-height: 3rem;
 }
-.toolbar .save-filter-cluster {
-  position: relative;
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  gap: 0.25rem;
-}
-.toolbar .save-filter-cluster .save-menu {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: 0.25rem;
-  background-color: #ffffff;
-  border: solid 1px #cbd4da;
-  border-radius: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-  min-width: 12rem;
-  z-index: 5;
-  display: flex;
-  flex-flow: column nowrap;
-  padding: 0.25rem 0;
-}
-.toolbar .save-filter-cluster .save-menu-item {
-  background: transparent;
-  border: none;
-  text-align: left;
-  padding: 0.5rem 0.75rem;
-  cursor: pointer;
-  font: inherit;
-  color: #3a4952;
-}
-.toolbar .save-filter-cluster .save-menu-item:hover {
-  background-color: #f4f7f9;
-}
-.toolbar .save-filter-cluster .save-menu-item:focus-visible {
-  outline: 2px solid #259fc7;
-  outline-offset: -2px;
-}
 
 p.empty {
   color: #647d8e;
@@ -372,6 +270,11 @@ p.empty {
   gap: 1rem;
 }
 
+/* `overflow: visible` (no longer `overflow: hidden`) so a filter
+   row's select dropdown can extend below the group's bottom edge
+   when there are not enough rows in the group to push the dropdown
+   past it. The header / body each round their own outer corners
+   instead so the rounded-card look survives without clipping. */
 .group {
   border: solid 1px #cbd4da;
   border-radius: 4px;
@@ -387,6 +290,11 @@ p.empty {
   padding: 0.5rem 0.75rem;
   background-color: #f4f7f9;
   border-bottom: solid 1px #cbd4da;
+  /* Round the header's top corners directly so the tinted strip
+     follows the parent's rounded outline. Without this rule
+     (combined with the `.group` `overflow: visible` change) the
+     header's blue band would leak past the parent's rounded
+     corners. */
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }
@@ -399,10 +307,14 @@ p.empty {
 
 .group.collapsed > .group-header {
   border-bottom: none;
+  /* When collapsed the header is the only visible row, so it
+     has to round all four corners to follow the parent outline. */
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
 }
 
+/* Round the bottom of the body so its visual edge follows the
+   parent's rounded outline once `overflow: hidden` is gone. */
 .group:not(.collapsed) > .group-body {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;

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

@@ -6,9 +6,13 @@
 >
 	import Button from '../../Button.svelte';
 	import DesktopModal from '../../DesktopModal.svelte';
+	import HorizontalTabGroup from '../../HorizontalTabGroup.svelte';
 	import Icon from '../../Icon.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 } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
@@ -24,7 +28,8 @@
 	// ── 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.
+	// `$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');
@@ -106,7 +111,14 @@
 		}, `Could not delete "${view.name}". Please try again.`);
 	}
 
-	/** Save the live state of the active section as a brand-new view. */
+	/**
+	 * 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) {
@@ -115,6 +127,7 @@
 		void guard(async () => {
 			await tableContext.saveCurrentAsNewView(trimmed, section);
 			newViewName = '';
+			selectTab('mine');
 		}, `Could not save the new ${sectionNoun.toLowerCase()}. Please try again.`);
 	}
 
@@ -191,8 +204,272 @@
 			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 myViews.length === 0}
+				<p class="muted">
+					You have not saved any {sectionNounPlural.toLowerCase()} yet. Use the "Save a new {sectionNoun}"
+					tab to create one.
+				</p>
+			{: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
+									>
+									<Button
+										variant={Variant.Secondary}
+										size={Size.MediumSmall}
+										nowrap
+										iconLeft={{ name: 'external-link', size: Size.Small }}
+										onclick={() => {
+											selectTab('shared');
+										}}>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}
+					<p class="muted">
+						There are no further {sectionNounPlural.toLowerCase()} available to subscribe to.
+					</p>
+				{: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}
+				<p class="muted">
+					No {sectionNounPlural.toLowerCase()} are currently shared with you.
+				</p>
+			{: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">
+				<p class="muted">
+					Save the table's current {sectionNoun.toLowerCase()} as a reusable named
+					{sectionNoun.toLowerCase()}.
+				</p>
+				<TextInput
+					placeholder={`${sectionNoun} name`}
+					bind:value={newViewName}
+					onkeydown={(e: KeyboardEvent) => {
+						if (e.key === 'Enter') {
+							e.preventDefault();
+							saveNewView();
+						}
+					}}
+				/>
+				<Button
+					type="submit"
+					variant={Variant.Secondary}
+					size={Size.MediumSmall}
+					nowrap
+					disabled={!newViewName.trim()}
+					onclick={saveNewView}>Save Current</Button
+				>
+			</div>
+		{/if}
+	</div>
+{/snippet}
+
 <DesktopModal
 	headerLabel="Table Configuration"
 	headerSubtitle={tableContext.datatableUuid
@@ -200,6 +477,8 @@
 		: undefined}
 	onclose={() => onclose?.()}
 	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
+	width={cssLength('50vw')}
+	minWidth={cssLength('40rem')}
 >
 	{#if !remoteAvailable}
 		<div class="empty-state">
@@ -211,261 +490,11 @@
 		</div>
 	{:else}
 		<div class="config">
-			<!-- Left vertical nav: pick the kind being configured. -->
-			<nav class="side-nav">
-				<button
-					type="button"
-					class="nav-item"
-					class:active={section === 'layout'}
-					onclick={() => {
-						selectSection('layout');
-					}}
-				>
-					Table Layouts
-				</button>
-				<button
-					type="button"
-					class="nav-item"
-					class:active={section === 'filter'}
-					onclick={() => {
-						selectSection('filter');
-					}}
-				>
-					Table Filters
-				</button>
-			</nav>
-
-			<div class="pane">
-				<!-- Three horizontal tabs for the selected section. -->
-				<div
-					class="tabs"
-					role="tablist"
-				>
-					<button
-						type="button"
-						role="tab"
-						aria-selected={tab === 'mine'}
-						class="tab"
-						class:active={tab === 'mine'}
-						onclick={() => {
-							selectTab('mine');
-						}}
-					>
-						My {sectionNounPlural}
-					</button>
-					<button
-						type="button"
-						role="tab"
-						aria-selected={tab === 'shared'}
-						class="tab"
-						class:active={tab === 'shared'}
-						onclick={() => {
-							selectTab('shared');
-						}}
-					>
-						<!-- 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. -->
-						Shared {sectionNounPlural}
-					</button>
-					<button
-						type="button"
-						role="tab"
-						aria-selected={tab === 'save'}
-						class="tab"
-						class:active={tab === 'save'}
-						onclick={() => {
-							selectTab('save');
-						}}
-					>
-						Save a new {sectionNoun}
-					</button>
-				</div>
-
-				{#if errorMessage}
-					<div
-						class="error-banner"
-						role="alert"
-					>
-						<Icon
-							name="circle-exclamation"
-							size={Size.Small}
-						/>
-						<span>{errorMessage}</span>
-					</div>
-				{/if}
-
-				<div class="tab-body">
-					{#if tab === 'mine'}
-						{#if myViews.length === 0}
-							<p class="muted">
-								You have not saved any {sectionNounPlural.toLowerCase()} yet. Use the "Save a new {sectionNoun}"
-								tab to create one.
-							</p>
-						{: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
-												>
-												<Button
-													variant={Variant.Secondary}
-													size={Size.MediumSmall}
-													nowrap
-													iconLeft={{ name: 'external-link', size: Size.Small }}
-													onclick={() => {
-														selectTab('shared');
-													}}>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 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}
-								<p class="muted">
-									There are no further {sectionNounPlural.toLowerCase()} available to subscribe to.
-								</p>
-							{: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}
-							<p class="muted">
-								No {sectionNounPlural.toLowerCase()} are currently shared with you.
-							</p>
-						{: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">
-							<p class="muted">
-								Save the table's current {sectionNoun.toLowerCase()} as a reusable named
-								{sectionNoun.toLowerCase()}.
-							</p>
-							<TextInput
-								placeholder={`${sectionNoun} name`}
-								bind:value={newViewName}
-								onkeydown={(e: KeyboardEvent) => {
-									if (e.key === 'Enter') {
-										e.preventDefault();
-										saveNewView();
-									}
-								}}
-							/>
-							<Button
-								type="submit"
-								variant={Variant.Primary}
-								size={Size.MediumSmall}
-								nowrap
-								disabled={!newViewName.trim()}
-								onclick={saveNewView}>Save Current</Button
-							>
-						</div>
-					{/if}
-				</div>
-			</div>
+			<HorizontalTabGroup
+				tabs={sectionTabs}
+				selected={selectedSectionTab}
+				grow
+			/>
 		</div>
 	{/if}
 </DesktopModal>
@@ -481,72 +510,27 @@
   color: #3a4952;
 }
 
+/* Fixed-frame wrapper. The modal is a fixed 50vw (see the `width`
+   prop on `DesktopModal`); this `.config` lets the tab group fill
+   that frame and the tab body scroll inside it, so switching nav
+   section or top tab never reflows the dialog. */
 .config {
   display: flex;
-  flex-flow: row nowrap;
-  gap: 1rem;
+  flex-flow: column nowrap;
   flex: 1;
   min-height: 0;
   width: 100%;
 }
 
-.side-nav {
-  display: flex;
-  flex-flow: column nowrap;
-  gap: 0.25rem;
-  flex-shrink: 0;
-  border-right: solid 2px #cbd4da;
-  padding-right: 1rem;
-}
-.side-nav .nav-item {
-  text-align: left;
-  white-space: nowrap;
-  padding: 0.6rem 0.9rem;
-  border: solid 1px #cbd4da;
-  border-radius: 4px;
-  background-color: #ffffff;
-  color: #3a4952;
-  font-weight: 600;
-  cursor: pointer;
-}
-.side-nav .nav-item:hover {
-  background-color: #e9ecf1;
-}
-.side-nav .nav-item.active {
-  background-color: #cbd4da;
-  color: #455661;
-}
-
+/* The right-hand content pane that each left-nav section renders:
+   holds the top horizontal tabs and their scrolling body. */
 .pane {
   display: flex;
   flex-flow: column nowrap;
-  gap: 0.75rem;
   flex: 1;
   min-width: 0;
-}
-
-.tabs {
-  display: flex;
-  flex-flow: row nowrap;
-  gap: 0.25rem;
-  border-bottom: solid 2px #cbd4da;
-}
-.tabs .tab {
-  padding: 0.5rem 0.9rem;
-  border: none;
-  border-bottom: solid 3px transparent;
-  background-color: transparent;
-  color: #3a4952;
-  font-weight: 600;
-  white-space: nowrap;
-  cursor: pointer;
-}
-.tabs .tab:hover {
-  color: #259fc7;
-}
-.tabs .tab.active {
-  border-bottom-color: #259fc7;
-  color: #259fc7;
+  min-height: 0;
+  width: 100%;
 }
 
 .error-banner {
@@ -561,9 +545,18 @@
   color: #aa1414;
 }
 
+/* The body of a single top tab. A `min-height` floor keeps the modal
+   frame visually stable across every section/tab combination (short
+   tabs no longer shrink the dialog); the `max-height` + `overflow-y`
+   keep taller content scrolling within that fixed frame rather than
+   growing the dialog. */
 .tab-body {
-  flex: 1;
-  min-height: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.75rem;
+  padding: 1rem;
+  min-height: 30vh;
+  max-height: 60vh;
   overflow-y: auto;
 }
 

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

@@ -16,7 +16,6 @@
 	import ColumnPanelModal from './ColumnPanelModal.svelte';
 	import FilterPanelModal from './FilterPanelModal.svelte';
 	import TableConfigurationModal from './TableConfigurationModal.svelte';
-	import TableViewDropdown from './TableViewDropdown.svelte';
 	import ToolboxPanelModal from './ToolboxPanelModal.svelte';
 
 	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
@@ -42,9 +41,6 @@
 	/>
 {/if}
 <div class="sidebar">
-	<div class="view-dropdown-slot">
-		<TableViewDropdown />
-	</div>
 	<Button
 		side={Side.Bottom}
 		onclick={() => {
@@ -159,12 +155,4 @@
 .sidebar .filler {
   flex-grow: 2;
   background-color: #ffffff;
-}
-.sidebar .view-dropdown-slot {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  background-color: #ffffff;
-  padding: 0 0.5rem;
-  flex-shrink: 0;
 }</style>

package/dist/Components/Table/Misc/TableViewDropdown.svelte.d.ts

@@ -1,6 +1,16 @@
 import type { Primitive } from '../Types/Context/TableInitOptions.js';
+import type { DatatableViewKind } from '../Types/Persistence/DatatableViewKind.js';
+interface Props {
+    /**
+     * Which view-state slice this dropdown switches between. `'layout'`
+     * lists saved column layouts; `'filter'` lists saved filter sets.
+     * Drives every `_viewState` read (label / active view / saved
+     * views) and which kind `resetToDefault` is called with.
+     */
+    kind: DatatableViewKind;
+}
 declare function $$render<T extends object, IdType extends Primitive>(): {
-    props: Record<string, never>;
+    props: Props;
     exports: {};
     bindings: "";
     slots: {};
@@ -17,7 +27,7 @@ interface $$IsomorphicComponent {
     new <T extends object, IdType extends Primitive>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, IdType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, IdType>['props']>, ReturnType<__sveltets_Render<T, IdType>['events']>, ReturnType<__sveltets_Render<T, IdType>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<T, IdType>['bindings']>;
     } & ReturnType<__sveltets_Render<T, IdType>['exports']>;
-    <T extends object, IdType extends Primitive>(internal: unknown, props: {}): ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    <T extends object, IdType extends Primitive>(internal: unknown, props: ReturnType<__sveltets_Render<T, IdType>['props']> & {}): ReturnType<__sveltets_Render<T, IdType>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const TableViewDropdown: $$IsomorphicComponent;

package/dist/Components/Table/Types/Context/TableContext.svelte.d.ts

@@ -892,10 +892,18 @@ export declare class TableContext<T extends object, RowIdType extends Primitive>
      *    `{ kind:'filter', filter: _captureFilter() }`, plus the
      *    host-supplied `datatableUuid` and the owning user;
      * 2. `await remoteLayouts.createView(...)`;
-     * 3. push the returned `DatatableView` into the matching kind's
-     *    saved-views list;
-     * 4. apply it via `applyDatatableView`, which re-points that kind's
-     *    baseline and clears that kind's dirty flag.
+     * 3. `await refreshSavedViews()` so the matching kind's saved-views
+     *    list is re-fetched from the backend - the new view then appears
+     *    in the Table Configuration modal's My-Layouts / My-Filters list
+     *    (and the panel quick-switch dropdowns) immediately, without a
+     *    reopen, because both read reactively off `_viewState`;
+     * 4. set the newly-saved view as that kind's active view via
+     *    `applyDatatableView`, which re-points that kind's baseline and
+     *    clears that kind's dirty flag - so the quick-switch dropdown
+     *    shows the new view's name straight away rather than
+     *    `'Custom (unsaved)'`. The authoritative refreshed copy (matched
+     *    by id) is preferred over the raw `createView` return so the
+     *    baseline reflects exactly what the backend persisted.
      *
      * Only the named kind's state is touched. No-op (dev-logged via
      * `devCatch`) when remote saved views are disabled (`datatableUuid` /

package/dist/Components/Table/Types/Context/TableContext.svelte.js

@@ -2309,10 +2309,18 @@ export class TableContext {
      *    `{ kind:'filter', filter: _captureFilter() }`, plus the
      *    host-supplied `datatableUuid` and the owning user;
      * 2. `await remoteLayouts.createView(...)`;
-     * 3. push the returned `DatatableView` into the matching kind's
-     *    saved-views list;
-     * 4. apply it via `applyDatatableView`, which re-points that kind's
-     *    baseline and clears that kind's dirty flag.
+     * 3. `await refreshSavedViews()` so the matching kind's saved-views
+     *    list is re-fetched from the backend - the new view then appears
+     *    in the Table Configuration modal's My-Layouts / My-Filters list
+     *    (and the panel quick-switch dropdowns) immediately, without a
+     *    reopen, because both read reactively off `_viewState`;
+     * 4. set the newly-saved view as that kind's active view via
+     *    `applyDatatableView`, which re-points that kind's baseline and
+     *    clears that kind's dirty flag - so the quick-switch dropdown
+     *    shows the new view's name straight away rather than
+     *    `'Custom (unsaved)'`. The authoritative refreshed copy (matched
+     *    by id) is preferred over the raw `createView` return so the
+     *    baseline reflects exactly what the backend persisted.
      *
      * Only the named kind's state is touched. No-op (dev-logged via
      * `devCatch`) when remote saved views are disabled (`datatableUuid` /
@@ -2342,8 +2350,15 @@ export class TableContext {
                 ownerUserId,
             };
             const created = await adapter.createView(request);
-            this._viewState.setSavedViews(kind, [...this._viewState.savedViews(kind), created]);
-            this.applyDatatableView(created);
+            // Re-fetch the authoritative saved-views lists so the new view
+            // shows up in the modal and the panel dropdowns immediately.
+            await this.refreshSavedViews();
+            // Prefer the refreshed copy (matched by id); fall back to the
+            // raw create return if the refresh did not surface it.
+            const authoritative = this._viewState.savedViews(kind).find((view) => view.id === created.id) ?? created;
+            // Make the just-saved view active so the quick-switch dropdown
+            // shows its name (not "Custom (unsaved)") and dirty is cleared.
+            this.applyDatatableView(authoritative);
         }
         catch (e) {
             devCatch(e);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.38.0",
+  "version": "0.38.2",
   "publishConfig": {
     "access": "restricted"
   },