try strip desktop

src/routes/weather/week/[location]/VariableSidebar.svelte

@@ -1,7 +1,13 @@
 <script lang="ts">
 	import { fade, fly } from 'svelte/transition';
 
-	import { defaultVariablePrefs, storedVariablePrefs } from '$lib/stores/settings';
+	import {
+		defaultTableRowOrder,
+		defaultVariablePrefs,
+		mergeTableRowOrder,
+		storedTableRowOrder,
+		storedVariablePrefs
+	} from '$lib/stores/settings';
 
 	import { Checkbox } from '$lib/components/ui/checkbox';
 	import { Label } from '$lib/components/ui/label';
@@ -13,21 +19,24 @@
 
 	let { open, onClose }: Props = $props();
 
-	const tableVariables = [
-		{ key: 'icons', label: 'Weather icons' },
-		{ key: 'temperature', label: 'Temperature' },
-		{ key: 'feels', label: 'Feels like' },
-		{ key: 'dew_point', label: 'Dew point' },
-		{ key: 'wind', label: 'Wind' },
-		{ key: 'gusts', label: 'Wind gusts' },
-		{ key: 'humidity', label: 'Humidity' },
-		{ key: 'clouds', label: 'Cloud cover' },
-		{ key: 'pressure', label: 'Pressure' },
-		{ key: 'uv', label: 'UV index' },
-		{ key: 'visibility', label: 'Visibility' },
-		{ key: 'precipitation', label: 'Precipitation' },
-		{ key: 'snowfall', label: 'Snowfall' }
-	];
+	const tableVariableLabels: Record<string, string> = {
+		icons: 'Weather icons',
+		temperature: 'Temperature',
+		feels: 'Feels like',
+		dew_point: 'Dew point',
+		wind: 'Wind',
+		gusts: 'Wind gusts',
+		humidity: 'Humidity',
+		clouds: 'Cloud cover',
+		pressure: 'Pressure',
+		uv: 'UV index',
+		visibility: 'Visibility',
+		precipitation: 'Precipitation',
+		snowfall: 'Snowfall'
+	};
+
+	// Listed in the same (customizable) order the table renders its rows.
+	let tableRowOrder = $derived(mergeTableRowOrder($storedTableRowOrder));
 
 	function toggle(section: 'table' | 'charts', key: string) {
 		storedVariablePrefs.update((prefs) => {
@@ -36,8 +45,21 @@
 		});
 	}
 
+	/** Moves a table row up (-1) or down (+1) in the rendered order. */
+	function moveRow(key: string, dir: -1 | 1) {
+		storedTableRowOrder.update((stored) => {
+			const order = mergeTableRowOrder(stored);
+			const i = order.indexOf(key);
+			const j = i + dir;
+			if (i < 0 || j < 0 || j >= order.length) return order;
+			[order[i], order[j]] = [order[j], order[i]];
+			return order;
+		});
+	}
+
 	function resetDefaults() {
 		storedVariablePrefs.set(structuredClone(defaultVariablePrefs));
+		storedTableRowOrder.set([...defaultTableRowOrder]);
 	}
 </script>
 
@@ -88,17 +110,54 @@
 						Hourly table
 					</h3>
 					<div class="flex flex-col gap-1">
-						{#each tableVariables as variable (variable.key)}
-							<div class="flex items-center gap-2.5 rounded-md px-1 py-1 hover:bg-muted/60">
+						{#each tableRowOrder as key, i (key)}
+							<div class="group flex items-center gap-2.5 rounded-md px-1 py-1 hover:bg-muted/60">
 								<Checkbox
-									id="table_var_{variable.key}"
+									id="table_var_{key}"
 									class="cursor-pointer"
-									checked={$storedVariablePrefs.table?.[variable.key] ?? true}
-									onCheckedChange={() => toggle('table', variable.key)}
+									checked={$storedVariablePrefs.table?.[key] ?? true}
+									onCheckedChange={() => toggle('table', key)}
 								/>
-								<Label class="flex-1 cursor-pointer text-sm" for="table_var_{variable.key}">
-									{variable.label}
+								<Label class="flex-1 cursor-pointer text-sm" for="table_var_{key}">
+									{tableVariableLabels[key] ?? key}
 								</Label>
+								<!-- reorder: rows render in this exact order in the table -->
+								<div
+									class="flex items-center opacity-40 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100"
+								>
+									<button
+										class="flex h-6 w-6 cursor-pointer items-center justify-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-30"
+										onclick={() => moveRow(key, -1)}
+										disabled={i === 0}
+										aria-label="Move {tableVariableLabels[key] ?? key} up"
+									>
+										<svg
+											class="h-3.5 w-3.5"
+											fill="none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+											stroke-width="2.25"
+										>
+											<path stroke-linecap="round" stroke-linejoin="round" d="M5 14l7-7 7 7" />
+										</svg>
+									</button>
+									<button
+										class="flex h-6 w-6 cursor-pointer items-center justify-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-30"
+										onclick={() => moveRow(key, 1)}
+										disabled={i === tableRowOrder.length - 1}
+										aria-label="Move {tableVariableLabels[key] ?? key} down"
+									>
+										<svg
+											class="h-3.5 w-3.5"
+											fill="none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+											stroke-width="2.25"
+										>
+											<path stroke-linecap="round" stroke-linejoin="round" d="M19 10l-7 7-7-7" />
+										</svg>
+									</button>
+								</div>
 							</div>
 						{/each}
 					</div>