Property mapping section Table view

src/settings/PropertyMappingModelComponent.svelte

@@ -11,23 +11,33 @@
 	let { model, save }: Props = $props();
 
 	let validationResult: { res: boolean; err?: Error } | undefined = $derived(model.validate());
-
-	// Use $state as a variable declaration initializer
-	let propertyStates = $state(model.properties.map(p => ({ ...p })));
 </script>
 
 <div class="media-db-plugin-property-mappings-model-container">
 	<div class="setting-item-name">{capitalizeFirstLetter(model.type)}</div>
-	<div class="media-db-plugin-property-mappings-container">
+
-		{#each propertyStates as property, i}
+	<table class="media-db-plugin-property-mappings-table">
-			<div class="media-db-plugin-property-mapping-element">
+		<thead>
-				<div class="media-db-plugin-property-mapping-element-property-name-wrapper">
+			<tr>
-					<pre class="media-db-plugin-property-mapping-element-property-name"><code>{property.property}</code></pre>
+				<th class="col-property">Property</th>
-				</div>
+				<th class="col-mapping">Mapping</th>
+				<th class="col-new-name">New name</th>
+				<th class="col-wikilink">Wikilink</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#each model.properties as property}
+				<tr>
+					<td class="col-property">
+						<code>{property.property}</code>
+					</td>
+
 					{#if property.locked}
+						<td class="col-locked" colspan="3">
 							<div class="media-db-plugin-property-binding-text">property cannot be remapped</div>
+						</td>
 					{:else}
-					<div style="display: flex; align-items: center; gap: 8px;">
+						<td class="col-mapping">
 							<select class="dropdown" bind:value={property.mapping}>
 								{#each propertyMappingOptions as remappingOption}
 									<option value={remappingOption}>
@@ -35,47 +45,111 @@
 									</option>
 								{/each}
 							</select>
+						</td>
+
+						<td class="col-new-name">
 							{#if property.mapping === PropertyMappingOption.Map}
-							<Icon iconName="arrow-right" />
 								<div class="media-db-plugin-property-mapping-to">
-								<input type="text" spellcheck="false" bind:value={property.newProperty} />
+									<Icon iconName="arrow-right" />
+									<input class="media-db-plugin-property-mapping-input" type="text" spellcheck="false" bind:value={property.newProperty} />
 								</div>
+							{:else}
+								<span class="media-db-plugin-property-mapping-to-disabled">—</span>
 							{/if}
-						<!-- Wikilink checkbox -->
+						</td>
+
+						<td class="col-wikilink">
 							<label class="media-db-plugin-property-mapping-wikilink-label" title="Convert value to wikilink ([[value]])">
 								<input type="checkbox" bind:checked={property.wikilink} />
-							<Icon iconName="link" />
-							<span>Wikilink</span>
 							</label>
-					</div>
+						</td>
 					{/if}
-			</div>
+				</tr>
 			{/each}
-	</div>
+		</tbody>
+	</table>
+
 	{#if !validationResult?.res}
 		<div class="media-db-plugin-property-mapping-validation">
 			{validationResult?.err?.message}
 		</div>
 	{/if}
+
 	<button
 		class="media-db-plugin-property-mappings-save-button {validationResult?.res ? 'mod-cta' : 'mod-muted'}"
 		onclick={() => {
-			// Sync propertyStates back to model.properties
-			model.properties.forEach((p, i) => {
-				Object.assign(p, propertyStates[i]);
-			});
 			if (model.validate().res) save(model);
 		}}
-		>Save
+	>
+		Save
 	</button>
 </div>
 
 <style>
-	.media-db-plugin-property-mapping-wikilink-label {
+	.media-db-plugin-property-mappings-table {
+		width: 100%;
+		border-collapse: collapse;
+		border-spacing: 0;
+		table-layout: fixed; /* prevent overflow from wide cells */
+	}
+
+	/* remove excessive left padding and keep within container */
+	.media-db-plugin-property-mappings-table th,
+	.media-db-plugin-property-mappings-table td {
+		padding: 2px 4px;
+		border-bottom: 1px solid var(--background-modifier-border);
+		vertical-align: middle;
+	}
+
+	/* column widths */
+	.col-property {
+		width: 25%;
+		white-space: nowrap;
+	}
+
+	.col-mapping {
+		width: 20%;
+	}
+
+	.col-new-name {
+		width: 40%;
+	}
+
+	.col-wikilink {
+		width: 15%;
+		text-align: center;
+	}
+
+	/* ensure inner controls don't push table wider than container */
+	.media-db-plugin-property-mapping-to {
 		display: flex;
 		align-items: center;
 		gap: 4px;
+		min-width: 0;
+	}
+
+	.media-db-plugin-property-mapping-input,
+	.media-db-plugin-property-mappings-table select.dropdown {
+		width: 100%;
+		max-width: 100%;
+		box-sizing: border-box;
+	}
+
+	.media-db-plugin-property-mapping-wikilink-label {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
 		font-size: 0.95em;
 		cursor: pointer;
 	}
+
+	.media-db-plugin-property-mapping-to-disabled {
+		color: var(--text-muted);
+	}
+
+	/* avoid extra left indentation from <pre> */
+	.media-db-plugin-property-mappings-table code {
+		padding: 0;
+		margin: 0;
+	}
 </style>