@lavalogic/scoria 0.38.0 → 0.38.1

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');
@@ -191,8 +196,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.Primary}
+					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 +469,8 @@
 		: undefined}
 	onclose={() => onclose?.()}
 	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
+	width={cssLength('50vw')}
+	minWidth={cssLength('40rem')}
 >
 	{#if !remoteAvailable}
 		<div class="empty-state">
@@ -211,261 +482,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 +502,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 +537,15 @@
   color: #aa1414;
 }
 
+/* The body of a single top tab. Scrolls within the fixed modal
+   frame rather than growing the dialog. */
 .tab-body {
-  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.75rem;
+  padding: 1rem;
   min-height: 0;
+  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

@@ -4,16 +4,24 @@
 	lang="ts"
 	generics="T extends object, IdType extends Primitive"
 >
-	import Button from '../../Button.svelte';
 	import SingleSelect from '../../SingleSelect.svelte';
-	import TextInput from '../../TextInput.svelte';
-	import { devCatch } from '../../../Helpers/Helpers.svelte.js';
 	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
-	import { Size } from '../../../Types/Internal/Size.js';
-	import { Variant } from '../../../Types/Internal/Variant.js';
 	import { getContext } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 	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;
+	}
+
+	const { kind }: Props = $props();
 
 	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
 
@@ -22,15 +30,14 @@
 	// collides with one.
 	const DEFAULT_OPTION = '';
 
-	// The layout view-state slice, read live from the context.
-	const activeView = $derived(tableContext._viewState.activeView('layout'));
-	const isDirty = $derived(tableContext._viewState.isDirty('layout'));
-	const savedViews = $derived(tableContext._viewState.savedViews('layout'));
+	// The view-state slice for `kind`, read live from the context.
+	const activeView = $derived(tableContext._viewState.activeView(kind));
+	const savedViews = $derived(tableContext._viewState.savedViews(kind));
 
-	// Toolbar label: 'Default' / 'Custom (unsaved)' / '<name>' / '<name>
+	// Dropdown label: 'Default' / 'Custom (unsaved)' / '<name>' / '<name>
 	// (unsaved)'. Used as the displayed label of the currently-selected
 	// option so the dropdown reflects the dirty state exactly.
-	const dropdownLabel = $derived(tableContext._viewState.dropdownLabel('layout'));
+	const dropdownLabel = $derived(tableContext._viewState.dropdownLabel(kind));
 
 	// The value of the currently-active option: the sentinel for Default,
 	// otherwise the saved view's id.
@@ -38,7 +45,8 @@
 
 	// Options for the select. The currently-active option's label is the
 	// `dropdownLabel` (so a dirty view reads "<name> (unsaved)"); every
-	// other option shows its plain name. "Default" is always first.
+	// other option shows its plain name. "Default" is always first, even
+	// when remote saved views are disabled and `savedViews` is empty.
 	const options: Array<SelectOption<string>> = $derived([
 		{
 			label: activeValue === DEFAULT_OPTION ? dropdownLabel : 'Default',
@@ -52,17 +60,13 @@
 
 	const selectedOption = $derived(options.find((o) => o.value === activeValue) ?? options[0]);
 
-	// Inline "name this layout" prompt state for the Save button.
-	let promptOpen = $state(false);
-	let pendingName = $state('');
-
 	/** Apply the option the user picked from the dropdown. */
 	function selectOption(option: SelectOption<string> | null): void {
 		if (!option) {
 			return;
 		}
 		if (option.value === DEFAULT_OPTION) {
-			tableContext.resetToDefault('layout');
+			tableContext.resetToDefault(kind);
 			return;
 		}
 		const view = savedViews.find((v) => v.id === option.value);
@@ -70,106 +74,24 @@
 			tableContext.applyDatatableView(view);
 		}
 	}
-
-	/**
-	 * Handle the Save button. When the active layout is a saved view, save
-	 * over it directly. When it is the Default (an unsaved custom layout),
-	 * open the inline name prompt so the user can name a brand-new view.
-	 */
-	function onSaveClicked(): void {
-		if (activeView.kind === 'saved') {
-			tableContext.saveActiveView('layout').catch(devCatch);
-			return;
-		}
-		promptOpen = true;
-		pendingName = '';
-	}
-
-	/** Commit the inline name prompt as a brand-new saved layout. */
-	function commitNewView(): void {
-		const trimmed = pendingName.trim();
-		if (!trimmed) {
-			return;
-		}
-		tableContext.saveCurrentAsNewView(trimmed, 'layout').catch(devCatch);
-		promptOpen = false;
-		pendingName = '';
-	}
 </script>
 
 <div class="view-dropdown">
-	<div class="select">
-		<SingleSelect
-			label="Layout"
-			name="Layout"
-			{options}
-			labelProp="label"
-			valueProp="value"
-			value={selectedOption}
-			valueAsObject
-			searchable={false}
-			onchange={selectOption}
-		/>
-	</div>
-
-	{#if promptOpen}
-		<div class="save-prompt">
-			<TextInput
-				placeholder="Layout name"
-				bind:value={pendingName}
-				onkeydown={(e: KeyboardEvent) => {
-					if (e.key === 'Enter') {
-						e.preventDefault();
-						commitNewView();
-					} else if (e.key === 'Escape') {
-						promptOpen = false;
-						pendingName = '';
-					}
-				}}
-			/>
-			<Button
-				type="submit"
-				variant={Variant.Primary}
-				size={Size.MediumSmall}
-				nowrap
-				disabled={!pendingName.trim()}
-				onclick={commitNewView}>Save</Button
-			>
-			<Button
-				variant={Variant.Secondary}
-				size={Size.MediumSmall}
-				nowrap
-				onclick={() => {
-					promptOpen = false;
-					pendingName = '';
-				}}>Cancel</Button
-			>
-		</div>
-	{:else}
-		<Button
-			variant={Variant.Secondary}
-			size={Size.MediumSmall}
-			nowrap
-			disabled={!isDirty}
-			onclick={onSaveClicked}>Save</Button
-		>
-	{/if}
+	<SingleSelect
+		label={kind === 'filter' ? 'Filter' : 'Layout'}
+		name={kind === 'filter' ? 'Filter' : 'Layout'}
+		{options}
+		labelProp="label"
+		valueProp="value"
+		value={selectedOption}
+		valueAsObject
+		searchable={false}
+		onchange={selectOption}
+	/>
 </div>
 
 <style>.view-dropdown {
   display: flex;
-  flex-flow: row nowrap;
-  align-items: end;
-  gap: 0.5rem;
-}
-
-.select {
-  min-width: 12rem;
-}
-
-.save-prompt {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: end;
-  gap: 0.375rem;
+  flex-flow: column nowrap;
+  width: 100%;
 }</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/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.1",
   "publishConfig": {
     "access": "restricted"
   },