Add thead and tbody to every table for svelte 5 compatibility

svelte/package.json

@@ -7,25 +7,25 @@
     "dev": "rollup -c -w"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.20",
+    "@babel/core": "^7.26.0",
-    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-env": "^7.26.0",
-    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^26.0.0",
+    "@rollup/plugin-commonjs": "^26.0.3",
-    "@rollup/plugin-node-resolve": "^15.2.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-terser": "^0.4.3",
+    "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@types/jsmediatags": "^3.9.3",
+    "@types/jsmediatags": "^3.9.6",
-    "rollup": "^4.0.0",
+    "rollup": "^4.24.4",
-    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-livereload": "^2.0.5",
-    "rollup-plugin-svelte": "^7.1.6",
+    "rollup-plugin-svelte": "^7.2.2",
-    "svelte": "^4.2.0"
+    "svelte": "^4.2.19"
   },
   "dependencies": {
     "behave-js": "^1.5.0",
-    "chart.js": "^4.2.0",
+    "chart.js": "^4.4.6",
     "pure-color": "^1.3.0",
     "rollup-plugin-includepaths": "^0.2.4",
-    "svelte-preprocess": "^6.0.2",
+    "svelte-preprocess": "^6.0.3",
-    "tslib": "^2.7.0"
+    "tslib": "^2.8.1"
   }
 }

svelte/src/admin_panel/AbuseReport.svelte

@@ -82,6 +82,7 @@ let set_status = async (action, report_type) => {
 		</div>
 		<div class="table_scroll">
 			<table>
+				<thead>
 					<tr>
 						<td>Time</td>
 						<td>IP</td>
@@ -89,6 +90,8 @@ let set_status = async (action, report_type) => {
 						<td>Status</td>
 						<td colspan="2">Reports from this IP</td>
 					</tr>
+				</thead>
+				<tbody>
 					{#each report.reports as user_report}
 						<tr>
 							<td>{formatDate(user_report.time, true, true, false)}</td>
@@ -118,6 +121,7 @@ let set_status = async (action, report_type) => {
 							</tr>
 						{/if}
 					{/each}
+				</tbody>
 			</table>
 		</div>
 	</div>

svelte/src/admin_panel/EmailReportersTable.svelte

@@ -54,6 +54,7 @@ const toggle_preview = (rep) => {
 
 <div class="table_scroll">
 	<table>
+		<thead>
 			<tr>
 				<td><SortButton field="from_address" active_field={sort_field} asc={asc} sort_func={sort}>Address</SortButton></td>
 				<td><SortButton field="name" active_field={sort_field} asc={asc} sort_func={sort}>Name</SortButton></td>
@@ -63,6 +64,8 @@ const toggle_preview = (rep) => {
 				<td><SortButton field="created" active_field={sort_field} asc={asc} sort_func={sort}>Created</SortButton></td>
 				<td></td>
 			</tr>
+		</thead>
+		<tbody>
 			{#each reporters as rep (rep.from_address)}
 				<tr animate:flip={{duration: 500}}>
 					<td>{rep.from_address}</td>
@@ -94,6 +97,7 @@ const toggle_preview = (rep) => {
 					</td>
 				</tr>
 			{/each}
+		</tbody>
 	</table>
 </div>
 

svelte/src/admin_panel/Home.svelte

@@ -209,6 +209,7 @@ onDestroy(() => {
 <section>
 	<h3>Process stats</h3>
 	<table>
+		<tbody>
 			<tr>
 				<td>DB Time</td>
 				<td>{formatDate(new Date(status.db_time), true, true, true)}</td>
@@ -217,6 +218,7 @@ onDestroy(() => {
 				<td>PID</td>
 				<td>{status.pid}</td>
 			</tr>
+		</tbody>
 	</table>
 
 	<h3>Pixelstore stats</h3>

svelte/src/admin_panel/IPBans.svelte

@@ -157,6 +157,7 @@ onMount(get_bans);
 			</div>
 			<div class="table_scroll">
 				<table>
+					<thead>
 						<tr>
 							<td>Reason</td>
 							<td>Reporter</td>
@@ -164,6 +165,8 @@ onMount(get_bans);
 							<td>Expire time</td>
 							<td>File</td>
 						</tr>
+					</thead>
+					<tbody>
 						{#each row.offences as offence (offence.ban_time)}
 							<tr>
 								<td>{offence.reason}</td>
@@ -179,6 +182,7 @@ onMount(get_bans);
 								</td>
 							</tr>
 						{/each}
+					</tbody>
 				</table>
 			</div>
 		</Expandable>

svelte/src/admin_panel/MollieSettlement.svelte

@@ -71,12 +71,15 @@ onMount(get_payments);
 
 {#if per_country.NL}
 	<table>
+		<thead>
 			<tr>
 				<td>Bedrag</td>
 				<td>BTW-code</td>
 				<td>BTW</td>
 				<td>Tegenrekening</td>
 			</tr>
+		</thead>
+		<tbody>
 			<tr>
 				<td><Euro amount={per_country.NL.amount + per_country.NL.vat}/></td>
 				<td>BTW hoog 21%</td>
@@ -95,6 +98,7 @@ onMount(get_payments);
 				<td><Euro amount={0}/></td>
 				<td>8030 - Omzet Mollie inkomsten</td>
 			</tr>
+		</tbody>
 	</table>
 {/if}
 
@@ -103,6 +107,7 @@ onMount(get_payments);
 
 <div class="table_scroll">
 	<table>
+		<thead>
 			<tr>
 				<td>Country</td>
 				<td>Payments</td>
@@ -111,6 +116,8 @@ onMount(get_payments);
 				<td>VAT%</td>
 				<td>Total</td>
 			</tr>
+		</thead>
+		<tbody>
 			{#each Object.entries(per_country) as [country, row]}
 				<tr>
 					<td>{country}</td>
@@ -140,12 +147,14 @@ onMount(get_payments);
 					<td><Euro amount={(totals.vat-per_country.NL.vat)+(totals.amount-per_country.NL.amount)}/></td>
 				</tr>
 			{/if}
+		</tbody>
 	</table>
 </div>
 
 <h3>All payments ({payments.length})</h3>
 <div class="table_scroll">
 	<table>
+		<thead>
 			<tr>
 				<td>ID</td>
 				<td>Created</td>
@@ -155,6 +164,8 @@ onMount(get_payments);
 				<td>VAT</td>
 				<td>Total</td>
 			</tr>
+		</thead>
+		<tbody>
 			{#each payments as row (row.id)}
 				<tr>
 					<td><a href={row._links.dashboard.href} target="_blank">{row.id}</a></td>
@@ -166,5 +177,6 @@ onMount(get_payments);
 					<td><Euro amount={row.amount.value*1e6}/></td>
 				</tr>
 			{/each}
+		</tbody>
 	</table>
 </div>

svelte/src/admin_panel/PayPalTaxes.svelte

@@ -140,12 +140,15 @@ onMount(() => {
 	{#if per_country.NL}
 		<h2>Accounting information</h2>
 		<table>
+			<thead>
 				<tr>
 					<td>Bedrag</td>
 					<td>BTW-code</td>
 					<td>BTW</td>
 					<td>Tegenrekening</td>
 				</tr>
+			</thead>
+			<tbody>
 				<tr>
 					<td><Euro amount={per_country.NL.amount + per_country.NL.vat}/></td>
 					<td>BTW hoog 21%</td>
@@ -164,6 +167,7 @@ onMount(() => {
 					<td><Euro amount={0}/></td>
 					<td>8040 - Omzet PayPal inkomsten</td>
 				</tr>
+			</tbody>
 		</table>
 	{/if}
 
@@ -171,6 +175,7 @@ onMount(() => {
 
 	<div class="table_scroll">
 		<table>
+			<thead>
 				<tr>
 					<td>Country</td>
 					<td>Payments</td>
@@ -181,6 +186,8 @@ onMount(() => {
 					<td>Fee</td>
 					<td>Total</td>
 				</tr>
+			</thead>
+			<tbody>
 				{#each Object.entries(per_country) as [country, row]}
 					<tr>
 						<td>{country}</td>
@@ -216,6 +223,7 @@ onMount(() => {
 						<td><Euro amount={(totals.vat-per_country.NL.vat)+(totals.amount-per_country.NL.amount)-(totals.fee-per_country.NL.fee)}/></td>
 					</tr>
 				{/if}
+			</tbody>
 		</table>
 	</div>
 

svelte/src/admin_panel/user_bans/BanDetails.svelte

@@ -6,6 +6,7 @@ export let row = {}
 </script>
 
 <table>
+	<tbody>
 		<tr>
 			<td>Username</td>
 			<td>{row.user.username}</td>
@@ -34,10 +35,12 @@ export let row = {}
 			<td>FS Storage used</td>
 			<td>{formatDataVolume(row.user.filesystem_storage_used, 3)}</td>
 		</tr>
+	</tbody>
 </table>
 <br/>
 <div class="table_scroll">
 	<table>
+		<thead>
 			<tr>
 				<td>Reason</td>
 				<td>Reporter</td>
@@ -45,6 +48,8 @@ export let row = {}
 				<td>Expire time</td>
 				<td>File</td>
 			</tr>
+		</thead>
+		<tbody>
 			{#each row.offences as offence (offence.ban_time)}
 				<tr>
 					<td>{offence.reason}</td>
@@ -60,5 +65,6 @@ export let row = {}
 					</td>
 				</tr>
 			{/each}
+		</tbody>
 	</table>
 </div>

svelte/src/file_viewer/DetailsWindow.svelte

@@ -117,6 +117,7 @@ onMount(() => {
 
 <div class="indent">
 	<table>
+		<tbody>
 			<tr>
 				<td>Name</td>
 				<td>{file.name}</td>
@@ -192,6 +193,7 @@ onMount(() => {
 				<td>SHA256 hash</td>
 				<td style="word-break: break-all;">{file.hash_sha256}</td>
 			</tr>
+		</tbody>
 	</table>
 
 	<h2>Views and downloads</h2>

svelte/src/filesystem/DetailsWindow.svelte

@@ -122,6 +122,7 @@ let update_chart = async (base, timespan, interval) => {
 
 <Modal bind:visible={visible} title="Details" width={($nav.base.type === "file" ? 1000 : 750) + "px"}>
 	<table style="width: 100%;">
+		<tbody>
 			<tr>
 				<td>Name</td>
 				<td>{$nav.base.name}</td>
@@ -194,6 +195,7 @@ let update_chart = async (base, timespan, interval) => {
 					</td>
 				</tr>
 			{/if}
+		</tbody>
 	</table>
 
 	{#if $nav.base.type === "file"}

svelte/src/filesystem/SearchView.svelte

@@ -109,36 +109,29 @@ const open_result = index => {
 	</form>
 </div>
 
-<div class="directory center">
+<div class="results center">
-	<tr>
-		<td></td>
-		<td>Name</td>
-	</tr>
 	{#each search_results as result, index}
 		<a
 			href={"/d"+fs_encode_path(result)}
 			on:click|preventDefault={() => open_result(index)}
 			class="node"
 		>
-			<td>
 			<img src={fs_thumbnail_url(result, 32, 32)} class="node_icon" alt="icon"/>
-			</td>
+			<span class="node_name">
-			<td class="node_name">
 				<!-- Remove the search directory from the result -->
 				{result.slice($nav.base.path.length+1)}
-			</td>
+			</span>
 		</a>
 	{/each}
 
 	{#if search_results.length === last_limit}
 		<div class="node">
-			<td></td>
+			<div class="node_name" style="text-align: center;">
-			<td class="node_name">
 				<button on:click={() => {search(last_limit + 100)}}>
 					<i class="icon">expand_more</i>
 					More results
 				</button>
-			</td>
+			</div>
 		</div>
 	{/if}
 </div>
@@ -164,8 +157,9 @@ const open_result = index => {
 	flex: 1 1 auto;
 }
 
-.directory {
+.results {
-	display: table;
+	display: flex;
+	flex-direction: column;
 	position: relative;
 	overflow: hidden;
 	margin: 8px auto 16px auto;
@@ -174,17 +168,18 @@ const open_result = index => {
 	border-collapse: collapse;
 	border-radius: 8px;
 }
-.directory > * {
+.results > * {
-	display: table-row;
+	display: flex;
-}
+	flex-direction: row;
-.directory > * > * {
-	display: table-cell;
 }
 .node {
-	display: table-row;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 6px;
 	text-decoration: none;
 	color: var(--text-color);
-	padding: 6px;
+	padding: 4px;
 }
 .node:not(:last-child) {
 	border-bottom: 1px solid var(--separator);
@@ -194,17 +189,15 @@ const open_result = index => {
 	color: var(--input_text);
 	text-decoration: none;
 }
-td {
-	padding: 4px;
-	vertical-align: middle;
-}
 .node_icon {
+	flex: 0 0 auto;
 	height: 32px;
 	width: 32px;
 	vertical-align: middle;
 	border-radius: 4px;
 }
 .node_name {
+	flex: 1 1 auto;
 	width: 100%;
 	overflow: hidden;
 	line-height: 1.2em;

svelte/src/home_page/AddressReputation.svelte

@@ -33,12 +33,15 @@ onMount(async () => {
 
 			<div class="table_scroll">
 				<table>
+					<thead>
 						<tr>
 							<td>File</td>
 							<td>Reason</td>
 							<td>Ban date</td>
 							<td>Expiry date</td>
 						</tr>
+					</thead>
+					<tbody>
 						{#each result.user_offences as offence (offence.ban_time)}
 							<tr>
 								<td>
@@ -53,6 +56,7 @@ onMount(async () => {
 								<td>{formatDate(offence.expire_time, false, false, false)}</td>
 							</tr>
 						{/each}
+					</tbody>
 				</table>
 			</div>
 			<p>
@@ -95,12 +99,15 @@ onMount(async () => {
 
 			<div class="table_scroll">
 				<table>
+					<thead>
 						<tr>
 							<td>File</td>
 							<td>Reason</td>
 							<td>Ban date</td>
 							<td>Expiry date</td>
 						</tr>
+					</thead>
+					<tbody>
 						{#each result.ip_offences as offence (offence.ban_time)}
 							<tr>
 								<td>
@@ -115,6 +122,7 @@ onMount(async () => {
 								<td>{formatDate(offence.expire_time, false, false, false)}</td>
 							</tr>
 						{/each}
+					</tbody>
 				</table>
 			</div>
 

svelte/src/layout/SlowDown.svelte

@@ -51,9 +51,11 @@ export let icon_href = ""
 
 <IconBlock icon_href={icon_href}>
 	<table>
+		<tbody>
 			<tr><td colspan="2">{file_name}</td></tr>
 			<tr><td>Type</td><td>{file_type}</td></tr>
 			<tr><td>Size</td><td>{formatDataVolume(file_size, 3)}</td></tr>
+		</tbody>
 	</table>
 	<button on:click={() => {dispatch("download")}}>
 		<i class="icon">download</i> Download

svelte/src/user_home/APIKeys.svelte

@@ -117,6 +117,7 @@ const logout = async (key) => {
 </section>
 <div class="table_scroll">
 	<table style="text-align: left;">
+		<thead>
 			<tr>
 				<td>Key</td>
 				<td>Created</td>
@@ -124,6 +125,8 @@ const logout = async (key) => {
 				<td>IP address</td>
 				<td></td>
 			</tr>
+		</thead>
+		<tbody>
 			{#each rows as row (row.auth_key)}
 				<tr style="border-bottom: none;">
 					<td>{row.auth_key}</td>
@@ -157,6 +160,7 @@ const logout = async (key) => {
 					<td colspan="4">User-Agent: {row.user_agent}</td>
 				</tr>
 			{/each}
+		</tbody>
 	</table>
 	<br/>
 </div>

svelte/src/user_home/dashboard/CardPrepaidTransactions.svelte

@@ -117,6 +117,7 @@ onMount(() => {
 </div>
 
 <table>
+	<tbody>
 		<tr>
 			<td>Opening balance</td>
 			<td><Euro amount={transactions.balance_start} precision="4"/></td>
@@ -151,6 +152,7 @@ onMount(() => {
 			<td>Deposited</td>
 			<td><Euro amount={transactions.total_deposited} precision="4"/></td>
 		</tr>
+	</tbody>
 </table>
 
 <style>

svelte/src/util/TabBar.svelte

@@ -0,0 +1,56 @@
+<script>
+import Button from "../layout/Button.svelte";
+
+// {icon: "", label: ""}
+export let tabs = []
+export let active = 0
+
+export const open_tab = (name = "") => {
+	for (let i = 0; i < tabs.length; i++) {
+		if (tabs[i].name === name) {
+			active = i
+			return
+		}
+	}
+}
+</script>
+
+<div class="tab_bar">
+	{#each tabs as t, i}
+		<Button
+			icon={t.icon}
+			label={t.label}
+			highlight={i === active}
+			click={() => active = i}
+		/>
+	{/each}
+</div>
+
+<!-- Can't find a way to do this dynamically unfortunately-->
+{#if active === 0}
+	<slot name="0"></slot>
+{:else if active === 1}
+	<slot name="1"></slot>
+{:else if active === 2}
+	<slot name="2"></slot>
+{:else if active === 3}
+	<slot name="3"></slot>
+{:else if active === 4}
+	<slot name="4"></slot>
+{:else if active === 5}
+	<slot name="5"></slot>
+{:else if active === 6}
+	<slot name="6"></slot>
+{:else if active === 7}
+	<slot name="7"></slot>
+{:else if active === 8}
+	<slot name="8"></slot>
+{:else if active === 9}
+	<slot name="9"></slot>
+{/if}
+
+<style>
+.tab_bar {
+	border-bottom: 2px solid var(--separator);
+}
+</style>