Make things really beautiful

src/lib/components/Members.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import membersStore, { Member } from '$lib/stores/members-store';
 	import { browser } from '$app/environment';
-
 	import { fly } from 'svelte/transition';
 
 	import { Paginator, type PaginationSettings } from '@skeletonlabs/skeleton';
@@ -9,6 +8,9 @@
 
 	let members: Member[] = [];
 
+	export let memberField: 'voting' | 'inPerson';
+	export let header: string;
+
 	membersStore.subscribe((store) => {
 		members = Array.from(store.values());
 	});
@@ -26,21 +28,34 @@
 
 	const isMember = <T extends unknown>(item?: T): item is T => !!item;
 
+	const prefilteredData = memberField === 'voting' ? members.filter((x) => !x.inPerson) : members;
+
 	$: prefilteredTable =
-		inputDemo !== '' ? results.map((x) => $membersStore.get(x.item)).filter(isMember) : members;
+		inputDemo !== ''
+			? results.map((x) => $membersStore.get(x.item)).filter(isMember)
+			: prefilteredData;
+
+	let sortingOrder: 'asc' | 'dsc' = 'asc';
 
 	// Reactive
 	let page = {
 		offset: 0,
 		limit: 10,
-		size: members.length,
-		amounts: [10, 20, 30, members.length]
+		size: prefilteredData.length,
+		amounts: [10, 20, 30, prefilteredData.length]
 	} as PaginationSettings;
 
 	$: paginatedSource = prefilteredTable.slice(
 		page.offset * page.limit, // start
 		page.offset * page.limit + page.limit // end
 	);
+
+	function humanizeField(field: typeof memberField) {
+		return field
+			.split(/(?=[A-Z])/)
+			.map((x) => `${x.slice(0, 1).toUpperCase()}${x.slice(1).toLowerCase()}`)
+			.join(' ');
+	}
 </script>
 
 <div class="w-full mt-10 mb-10 text-token">
@@ -61,9 +76,9 @@
 		}}
 	/>
 
-	<div class="table-container">
+	<div class="table-container min-w-[360px]">
 		<!-- Native Table Element -->
-		<table class="table table-comfortable table-hover">
+		<table class="table table-comfortable table-hover min-w-full table-interactive">
 			<thead class="table-head">
 				<tr>
 					<th colspan="3">
@@ -75,24 +90,33 @@
 					</th>
 				</tr>
 				<tr>
-					<th>Nickname</th>
-					<th>In person</th>
+					<th colspan="3" class="text-center text-2xl">{header}</th>
+				</tr>
+				<tr>
+					<th
+						class={`table-sort-${sortingOrder} cursor-pointer`}
+						on:click={() => {
+							if (sortingOrder === 'asc') sortingOrder = 'dsc';
+							else if (sortingOrder === 'dsc') sortingOrder = 'asc';
+							prefilteredTable = prefilteredTable.reverse();
+						}}>Nickname</th
+					>
+					<th>{humanizeField(memberField)}</th>
 				</tr>
 			</thead>
-			<tbody class="table-body">
+			<tbody class="table-body text-left">
 				{#each paginatedSource as member, i}
 					<tr
 						class="border-b border-slate-100 dark_border-slate-700"
-						transition:fly={{
+						transition:fly|local={{
 							duration: 150
 						}}
 					>
 						<td>{member.nickname}</td>
 						<!-- Style is necessary here for proper hitboxes -->
-
-						<td style="padding: 0!important">
-							<label class="flex items-center justify-center p-4 m-1 cursor-pointer">
-								<input class="checkbox" type="checkbox" bind:checked={member.inPerson} />
+						<td style="padding: 0!important" class=" min-w-[120px]">
+							<label class="flex items-center p-4 m-1 cursor-pointer justify-center">
+								<input class="checkbox" type="checkbox" bind:checked={member[memberField]} />
 							</label>
 						</td>
 					</tr>

src/lib/components/Navigation.svelte

@@ -8,29 +8,36 @@
 	import Syrenka from '$lib/components/HSMermaid.svelte';
 	import { page } from '$app/stores';
 
-	export let currentTile: number = 0;
+	$: routeId = $page.route.id;
 </script>
 
 <AppRail>
-	<!-- --- -->
-	<AppRailTile bind:group={currentTile} name="tile-1" value={0} title="tile-1">
+	<AppRailAnchor
+		href="/members/in-person"
+		title="In-person checklist"
+		selected={routeId === '/members/in-person'}
+	>
 		<svelte:fragment slot="lead">
 			<Fa class="w-full" icon={faUsers} />
 		</svelte:fragment>
 		<p>In-person checklist</p>
-	</AppRailTile>
-	<AppRailTile bind:group={currentTile} name="tile-2" value={1} title="tile-2">
+	</AppRailAnchor>
+	<AppRailAnchor
+		href="/members/passed"
+		title="Passed-permissions voters"
+		selected={routeId === '/members/passed'}
+	>
 		<svelte:fragment slot="lead">
 			<Fa class="w-full" icon={faFileSignature} />
 		</svelte:fragment>
 		<p>Passed-permissions voters</p>
-	</AppRailTile>
-	<AppRailTile bind:group={currentTile} name="tile-3" value={2} title="tile-3">
+	</AppRailAnchor>
+	<AppRailAnchor href="/voting/create" title="Create poll" selected={routeId === '/voting/create'}>
 		<svelte:fragment slot="lead">
 			<Fa class="w-full" icon={faCheckToSlot} />
 		</svelte:fragment>
 		<p>Create poll</p>
-	</AppRailTile>
+	</AppRailAnchor>
 	<!-- --- -->
 	<svelte:fragment slot="trail">
 		<AppRailAnchor href="https://hackerspace.pl" target="_blank" title="Account">

src/routes/+layout.server.ts

@@ -0,0 +1,8 @@
+import { redirect } from '@sveltejs/kit';
+
+/** @type {import('./$types').LayoutServerLoad} */
+export function load({ route }) {
+	if (route.id === '/') {
+		throw redirect(308, '/members/in-person');
+	}
+}

src/routes/+layout.svelte

@@ -5,7 +5,7 @@
 	import '@skeletonlabs/skeleton/styles/skeleton.css';
 	// Most of your app wide CSS should be put in this file
 	import '../app.postcss';
-	import { AppShell, AppBar } from '@skeletonlabs/skeleton';
+	import { AppShell, AppBar, Toast } from '@skeletonlabs/skeleton';
 	import { Drawer, drawerStore } from '@skeletonlabs/skeleton';
 	import Navigation from '$lib/components/Navigation.svelte';
 

src/routes/+page.svelte

@@ -15,6 +15,3 @@
 		<svelte:component this={currentComponent} />
 	</div>
 </div>
-
-<style lang="postcss">
-</style>

src/routes/members/+layout.server.ts

@@ -0,0 +1,12 @@
+import { redirect } from '@sveltejs/kit';
+
+/** @type {import('./$types').LayoutServerLoad} */
+export function load({ route }) {
+	const children = route.id.split('/');
+	if (children.length > 2) {
+		return;
+	}
+	if (route.id === '/members') {
+		throw redirect(308, '/members/in-person');
+	}
+}

src/routes/members/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+
+	if (browser) {
+		if ($page.route.id === '/members') {
+			goto('/members/in-person');
+		}
+	}
+</script>

src/routes/members/in-person/+page.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import Members from '$lib/components/Members.svelte';
+</script>
+
+<svelte:head>
+	<title>Meetings generator</title>
+	<meta name="description" content="Warsaw Hackerspace print sheets generator for meetings" />
+</svelte:head>
+<div class="container h-full mx-auto flex justify-center items-center">
+	<div class="space-y-10 text-center flex flex-col items-center">
+		<svelte:component this={Members} memberField="inPerson" header="In-person" />
+	</div>
+</div>

src/routes/members/passed/+page.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import Members from '$lib/components/Members.svelte';
+</script>
+
+<svelte:head>
+	<title>Meetings generator</title>
+	<meta name="description" content="Warsaw Hackerspace print sheets generator for meetings" />
+</svelte:head>
+<div class="container h-full mx-auto flex justify-center items-center">
+	<div class="space-y-10 text-center flex flex-col items-center">
+		<svelte:component this={Members} memberField="voting" header="Passed permissions" />
+	</div>
+</div>