@lavalogic/scoria 0.40.33 → 0.40.34

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

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
+<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";
@@ -284,318 +284,318 @@ const sectionTabs = [{
 	}
 }];
 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>{pair(i18n['scoria.message.loading_layouts'], i18n['scoria.message.loading_filters'])}</InfoAlert>
-			{:else if myViews.length === 0}
-				<InfoAlert>
-					{pair(i18n['scoria.text.no_layouts_saved'], i18n['scoria.text.no_filters_saved'])}
-				</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);
-										}}>{i18n['scoria.action.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);
-										}}>{pair(i18n['scoria.action.save_layout'], i18n['scoria.action.save_filter'])}</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;
-										}}>{i18n['scoria.action.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;
-										}}>{i18n['scoria.action.share']()}</Button
-									>
-									<Button
-										variant={Variant.Secondary}
-										size={Size.MediumSmall}
-										nowrap
-										iconLeft={{ name: 'circle-cross', size: Size.Small }}
-										onclick={() => {
-											deleteView(view);
-										}}>{i18n['scoria.action.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);
-												}}>{i18n['scoria.action.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}>{i18n['scoria.action.subscribe_additional']()}</Button
-				>
-			</div>
-
-			{#if publicViews !== null}
-				{#if publicViews.length === 0}
-					<InfoAlert>
-						{pair(i18n['scoria.text.no_further_layouts'], i18n['scoria.text.no_further_filters'])}
-					</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);
-											}}>{i18n['scoria.action.subscribe']()}</Button
-										>
-									</div>
-								</div>
-							</li>
-						{/each}
-					</ul>
-				{/if}
-			{/if}
-
-			{#if sharedViews.length === 0}
-				<InfoAlert>
-					{pair(i18n['scoria.text.no_layouts_shared'], i18n['scoria.text.no_filters_shared'])}
-				</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);
-										}}>{i18n['scoria.action.apply']()}</Button
-									>
-									<Button
-										variant={Variant.Secondary}
-										size={Size.MediumSmall}
-										nowrap
-										disabled={currentUserId === undefined}
-										onclick={() => {
-											unsubscribe(view);
-										}}>{i18n['scoria.action.unsubscribe']()}</Button
-									>
-								</div>
-							</div>
-						</li>
-					{/each}
-				</ul>
-			{/if}
-		{:else}
-			<div class="save-tab">
-				<InfoAlert>
-					{pair(i18n['scoria.text.save_layout_intro'], i18n['scoria.text.save_filter_intro'])}
-				</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={pair(i18n['scoria.label.layout_name_placeholder'], i18n['scoria.label.filter_name_placeholder'])}
-						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}>{i18n['scoria.action.save_current']()}</Button
-						>
-					</div>
-				</div>
-			</div>
-		{/if}
-	</div>
-{/snippet}
-
-<DesktopModal
-	headerLabel={i18n['scoria.action.table_configuration']()}
-	headerSubtitle={tableContext.datatableUuid
-		? i18n['scoria.label.table_identifier']({ id: tableContext.datatableUuid })
-		: undefined}
-	onclose={() => onclose?.()}
-	buttons={[{ label: i18n['scoria.action.close'](), callback: () => onclose?.() }]}
-	width={cssLength('50vw')}
-	minWidth={cssLength('40rem')}
->
-	{#if !remoteAvailable}
-		<div class="empty-state">
-			<Icon
-				name="circle-information"
-				size={Size.Large}
-			/>
-			<p>{i18n['scoria.text.views_unavailable']()}</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}
-
+</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>{pair(i18n['scoria.message.loading_layouts'], i18n['scoria.message.loading_filters'])}</InfoAlert>
+			{:else if myViews.length === 0}
+				<InfoAlert>
+					{pair(i18n['scoria.text.no_layouts_saved'], i18n['scoria.text.no_filters_saved'])}
+				</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);
+										}}>{i18n['scoria.action.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);
+										}}>{pair(i18n['scoria.action.save_layout'], i18n['scoria.action.save_filter'])}</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;
+										}}>{i18n['scoria.action.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;
+										}}>{i18n['scoria.action.share']()}</Button
+									>
+									<Button
+										variant={Variant.Secondary}
+										size={Size.MediumSmall}
+										nowrap
+										iconLeft={{ name: 'circle-cross', size: Size.Small }}
+										onclick={() => {
+											deleteView(view);
+										}}>{i18n['scoria.action.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);
+												}}>{i18n['scoria.action.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}>{i18n['scoria.action.subscribe_additional']()}</Button
+				>
+			</div>
+
+			{#if publicViews !== null}
+				{#if publicViews.length === 0}
+					<InfoAlert>
+						{pair(i18n['scoria.text.no_further_layouts'], i18n['scoria.text.no_further_filters'])}
+					</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);
+											}}>{i18n['scoria.action.subscribe']()}</Button
+										>
+									</div>
+								</div>
+							</li>
+						{/each}
+					</ul>
+				{/if}
+			{/if}
+
+			{#if sharedViews.length === 0}
+				<InfoAlert>
+					{pair(i18n['scoria.text.no_layouts_shared'], i18n['scoria.text.no_filters_shared'])}
+				</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);
+										}}>{i18n['scoria.action.apply']()}</Button
+									>
+									<Button
+										variant={Variant.Secondary}
+										size={Size.MediumSmall}
+										nowrap
+										disabled={currentUserId === undefined}
+										onclick={() => {
+											unsubscribe(view);
+										}}>{i18n['scoria.action.unsubscribe']()}</Button
+									>
+								</div>
+							</div>
+						</li>
+					{/each}
+				</ul>
+			{/if}
+		{:else}
+			<div class="save-tab">
+				<InfoAlert>
+					{pair(i18n['scoria.text.save_layout_intro'], i18n['scoria.text.save_filter_intro'])}
+				</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={pair(i18n['scoria.label.layout_name_placeholder'], i18n['scoria.label.filter_name_placeholder'])}
+						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}>{i18n['scoria.action.save_current']()}</Button
+						>
+					</div>
+				</div>
+			</div>
+		{/if}
+	</div>
+{/snippet}
+
+<DesktopModal
+	headerLabel={i18n['scoria.action.table_configuration']()}
+	headerSubtitle={tableContext.datatableUuid
+		? i18n['scoria.label.table_identifier']({ id: tableContext.datatableUuid })
+		: undefined}
+	onclose={() => onclose?.()}
+	buttons={[{ label: i18n['scoria.action.close'](), callback: () => onclose?.() }]}
+	width={cssLength('50vw')}
+	minWidth={cssLength('40rem')}
+>
+	{#if !remoteAvailable}
+		<div class="empty-state">
+			<Icon
+				name="circle-information"
+				size={Size.Large}
+			/>
+			<p>{i18n['scoria.text.views_unavailable']()}</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;
@@ -754,4 +754,4 @@ const selectedSectionTab = $derived(sectionTabs.find((t) => t.args.kind === sect
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-start;
-}</style>
+}</style>