Make all lists "borderless"

Author: LaurentTreguier

src/lib/components/list.svelte

@@ -2,20 +2,19 @@
 	import type { Snippet } from 'svelte';
 
 	interface Props {
-		borderless?: boolean;
 		header?: Snippet;
-		body?: Snippet;
+		body: Snippet;
 	}
 
-	let { borderless = false, header, body }: Props = $props();
+	let { header, body }: Props = $props();
 </script>
 
-<table class="list" class:borderless>
+<table class="list">
 	<thead>
 		{@render header?.()}
 	</thead>
 	<tbody>
-		{@render body?.()}
+		{@render body()}
 	</tbody>
 </table>
 
@@ -55,21 +54,14 @@
 
 			:global(td) {
 				padding: 1em;
-			}
-		}
-
-		&.borderless thead :global(td) {
-			border-bottom: 1px solid var(--color-border);
+				border-bottom: 1px solid var(--color-border);
 
-			@include mixins.expanded-width {
-				border-bottom: unset;
+				@include mixins.expanded-width {
+					border-bottom: unset;
+				}
 			}
 		}
 
-		&:not(.borderless) tbody {
-			@include borders;
-		}
-
 		tbody {
 			@include mixins.expanded-width {
 				@include borders;

src/routes/login/page.test.ts

@@ -56,7 +56,7 @@ test('Valid identifier produces no error', async () => {
 
 	await user.type(identifier, FakeUsersEndpointApi.goodUsername);
 	await user.click(submit);
-	expect(bus.events.filter((e) => e instanceof DisplayableError)).to.have.length(0);
+	expect(bus.events.filter((e) => e instanceof DisplayableError)).to.be.empty;
 	const randomCode = screen.queryByRole('textbox', { name: 'One-time code' });
 	expect(randomCode).to.exist;
 });
@@ -120,5 +120,5 @@ test('Valid random code produces no error', async () => {
 
 	await user.type(randomCode, FakeTokensEndpointApi.goodSecret);
 	await user.click(submit);
-	expect(bus.events.filter((e) => e instanceof DisplayableError)).to.have.length(0);
+	expect(bus.events.filter((e) => e instanceof DisplayableError)).to.be.empty;
 });

src/routes/register/page.test.ts

@@ -158,7 +158,7 @@ test('Valid username and email produce no error', async () => {
 
 	await user.type(email, FakeUsersEndpointApi.goodEmail);
 	await user.click(submit);
-	expect(bus.events.filter((e) => e instanceof DisplayableError)).to.have.length(0);
+	expect(bus.events.filter((e) => e instanceof DisplayableError)).to.be.empty;
 	const randomCode = screen.queryByRole('textbox', { name: 'One-time code' });
 	expect(randomCode).to.exist;
 });
@@ -237,5 +237,5 @@ test('Valid random code produces no error', async () => {
 
 	await user.type(randomCode, FakeTokensEndpointApi.goodSecret);
 	await user.click(submit);
-	expect(bus.events.filter((e) => e instanceof DisplayableError)).to.have.length(0);
+	expect(bus.events.filter((e) => e instanceof DisplayableError)).to.be.empty;
 });

src/routes/settings/+page.svelte

@@ -99,7 +99,7 @@
 
 {#if token}
 	<div class="destination">
-		<List borderless>
+		<List>
 			{#snippet header()}
 				<tr>
 					<td colspan="2">{t('settings.profile.header')}</td>
@@ -158,7 +158,7 @@
 			{/snippet}
 		</List>
 
-		<List borderless>
+		<List>
 			{#snippet header()}
 				<tr>
 					<td>{t('settings.about.header')}</td>

src/routes/settings/page.test.ts

@@ -29,9 +29,9 @@ test('Updating avatar with too large image produces a failure', async () => {
 	const imagePicker = screen.getByTitle('Change avatar');
 
 	await user.upload(imagePicker, FakeUsersEndpointApi.largeImageFile);
+	expect(bus.events.filter((e) => e instanceof DisplayableError)).to.have.length(1);
 	const avatar = screen.queryByTitle<HTMLImageElement>('Avatar');
 	expect(avatar).not.to.exist;
-	expect(bus.events.filter((e) => e instanceof DisplayableError)).to.have.length(1);
 });
 
 test('Updating avatar with invalid image produces a failure', async () => {
@@ -41,9 +41,9 @@ test('Updating avatar with invalid image produces a failure', async () => {
 	const imagePicker = screen.getByTitle('Change avatar');
 
 	await user.upload(imagePicker, FakeUsersEndpointApi.notImageFile);
+	expect(bus.events.filter((e) => e instanceof DisplayableError)).to.have.length(1);
 	const avatar = screen.queryByTitle<HTMLImageElement>('Avatar');
 	expect(avatar).not.to.exist;
-	expect(bus.events.filter((e) => e instanceof DisplayableError)).to.have.length(1);
 });
 
 test('Updating avatar with valid image produces no failures', async () => {
@@ -53,9 +53,9 @@ test('Updating avatar with valid image produces no failures', async () => {
 	const imagePicker = screen.getByTitle('Change avatar');
 
 	await user.upload(imagePicker, FakeUsersEndpointApi.normalImageFile);
+	expect(bus.events.filter((e) => e instanceof DisplayableError)).to.be.empty;
 	const avatar = screen.getByTitle<HTMLImageElement>('Avatar');
 	expect(avatar.src).to.contain(FakeUsersEndpointApi.normalImageFile.name);
-	expect(bus.events.filter((e) => e instanceof DisplayableError)).to.have.length(0);
 });
 
 test('Removing avatar produces no failures', async () => {
@@ -67,9 +67,9 @@ test('Removing avatar produces no failures', async () => {
 	await user.upload(imagePicker, FakeUsersEndpointApi.normalImageFile);
 
 	await user.click(remove);
+	expect(bus.events.filter((e) => e instanceof DisplayableError)).to.be.empty;
 	const avatar = screen.queryByTitle<HTMLImageElement>('Avatar');
 	expect(avatar).not.to.exist;
-	expect(bus.events.filter((e) => e instanceof DisplayableError)).to.have.length(0);
 });
 
 test('Bio must be different', async () => {
@@ -93,5 +93,5 @@ test('Updating bio produces no failures', async () => {
 
 	await user.type(bio, 'Hello');
 	await user.click(save);
-	expect(bus.events.filter((e) => e instanceof DisplayableError)).to.have.length(0);
+	expect(bus.events.filter((e) => e instanceof DisplayableError)).to.be.empty;
 });