admin screen updates

src/lib/api/Endpoint.ts

@@ -63,7 +63,16 @@ export default class Endpoint
 				return errMsg(`HTTP ${response.status} ${response.statusText} in ${this.method} ${this.url}`, "HTTP_" + response.status);
 
 			const json = await response.json();
-			if (json.err) { return { err: json.err }; }	
+			if (json.err) {
+				if (json.err.message === "jwt expired") {
+					client_auth.set(null);
+					if (window.location.pathname !== "/page/profile") {
+						const from = window.location.pathname + window.location.search;
+						window.location.href = "/page/profile?from=" + encodeURIComponent(from);
+					}
+				}
+				return { err: json.err }; 
+			}	
 
 			const parsed = this.OUT.safeParse(json.ok);
 			if (parsed.success) return { ok: parsed.data };

src/lib/shadcn/ui/pagination/index.ts

@@ -0,0 +1,24 @@
+import Root from "./pagination.svelte";
+import Content from "./pagination-content.svelte";
+import Item from "./pagination-item.svelte";
+import Link from "./pagination-link.svelte";
+import PrevButton from "./pagination-prev-button.svelte";
+import NextButton from "./pagination-next-button.svelte";
+import Ellipsis from "./pagination-ellipsis.svelte";
+export {
+	Root,
+	Content,
+	Item,
+	Link,
+	PrevButton,
+	NextButton,
+	Ellipsis,
+	//
+	Root as Pagination,
+	Content as PaginationContent,
+	Item as PaginationItem,
+	Link as PaginationLink,
+	PrevButton as PaginationPrevButton,
+	NextButton as PaginationNextButton,
+	Ellipsis as PaginationEllipsis
+};

src/lib/shadcn/ui/pagination/pagination-content.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLUListElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<ul class={cn("flex flex-row items-center gap-1", className)} {...$$restProps}>
+	<slot />
+</ul>

src/lib/shadcn/ui/pagination/pagination-ellipsis.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import { DotsHorizontal } from "radix-icons-svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLSpanElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<span
+	aria-hidden
+	class={cn("flex h-9 w-9 items-center justify-center", className)}
+	{...$$restProps}
+>
+	<DotsHorizontal class="h-4 w-4" />
+	<span class="sr-only">More pages</span>
+</span>

src/lib/shadcn/ui/pagination/pagination-item.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLLIElement>;
+	let className: $$Props["class"] = undefined;
+
+	export { className as class };
+</script>
+
+<li class={cn("", className)} {...$$restProps}>
+	<slot />
+</li>

src/lib/shadcn/ui/pagination/pagination-link.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+	import { buttonVariants, type Props } from "$lib/shadcn/ui/button";
+
+	type $$Props = PaginationPrimitive.PageProps &
+		Props & {
+			isActive: boolean;
+		};
+
+	type $$Events = PaginationPrimitive.PageEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let page: $$Props["page"];
+	export let size: $$Props["size"] = "icon";
+	export let isActive: $$Props["isActive"] = false;
+
+	export { className as class };
+</script>
+
+<PaginationPrimitive.Page
+	bind:page
+	class={cn(
+		buttonVariants({
+			variant: isActive ? "outline" : "ghost",
+			size
+		}),
+		className
+	)}
+	{...$$restProps}
+	on:click
+>
+	<slot>{page.value}</slot>
+</PaginationPrimitive.Page>

src/lib/shadcn/ui/pagination/pagination-next-button.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { Button } from "$lib/shadcn/ui/button";
+	import { cn } from "$lib/utils";
+	import { ChevronRight } from "radix-icons-svelte";
+
+	type $$Props = PaginationPrimitive.NextButtonProps;
+	type $$Events = PaginationPrimitive.NextButtonEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<PaginationPrimitive.NextButton asChild let:builder>
+	<Button
+		variant="ghost"
+		class={cn("gap-1 pr-2.5", className)}
+		builders={[builder]}
+		on:click
+		{...$$restProps}
+	>
+		<slot>
+			<span>Next</span>
+			<ChevronRight class="h-4 w-4" />
+		</slot>
+	</Button>
+</PaginationPrimitive.NextButton>

src/lib/shadcn/ui/pagination/pagination-prev-button.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { Button } from "$lib/shadcn/ui/button";
+	import { cn } from "$lib/utils";
+	import { ChevronLeft } from "radix-icons-svelte";
+
+	type $$Props = PaginationPrimitive.PrevButtonProps;
+	type $$Events = PaginationPrimitive.PrevButtonEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<PaginationPrimitive.PrevButton asChild let:builder>
+	<Button
+		variant="ghost"
+		class={cn("gap-1 pl-2.5", className)}
+		builders={[builder]}
+		on:click
+		{...$$restProps}
+	>
+		<slot>
+			<ChevronLeft class="h-4 w-4" />
+			<span>Previous</span>
+		</slot>
+	</Button>
+</PaginationPrimitive.PrevButton>

src/lib/shadcn/ui/pagination/pagination.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = PaginationPrimitive.Props;
+	type $$Events = PaginationPrimitive.Events;
+
+	let className: $$Props["class"] = undefined;
+	export let count: $$Props["count"] = 0;
+	export let perPage: $$Props["perPage"] = 10;
+	export let page: $$Props["page"] = 1;
+	export let siblingCount: $$Props["siblingCount"] = 1;
+
+	export { className as class };
+
+	$: currentPage = page;
+</script>
+
+<PaginationPrimitive.Root
+	{count}
+	{perPage}
+	{siblingCount}
+	bind:page
+	let:builder
+	let:pages
+	let:range
+	asChild
+	{...$$restProps}
+>
+	<nav {...builder} class={cn("mx-auto flex flex-col w-full items-center", className)}>
+		<slot {pages} {range} {currentPage} />
+	</nav>
+</PaginationPrimitive.Root>

src/routes/api/crud/user/+server.ts

@@ -57,5 +57,5 @@ export async function GET({ url, request}) {
 
     let is_end = false;
     if (users.ok.length + (data.ok.offset ?? 0) >= users_count.ok) { is_end = true; }
-    return This.send({ users: users.ok, message, is_end });
+    return This.send({ users: users.ok, message, is_end, total: users_count.ok });
 }

src/routes/api/crud/user/endpoints.ts

@@ -21,6 +21,7 @@ export const GET = new Endpoint(
 	"/api/crud/user", 'GET',
 	ListOptions, z.object({
 		users: z.array(z.intersection(Username, z.object({ id: z.string() }))),
+		total: z.number(),
 		is_end: z.boolean(),
 		message: z.string(),
 	})

src/routes/page/admin/+page.svelte

@@ -6,16 +6,29 @@
 	import AdminOnly from '$lib/components/AdminOnly.svelte';
 	import * as Table from "$lib/shadcn/ui/table";
 	import * as Tooltip from "$lib/shadcn/ui/tooltip";
+	import * as Pagination from "$lib/shadcn/ui/pagination";
 	
 	import * as Users from '$api/crud/user/endpoints';
 	import { MagicWand, Pencil1, Trash } from 'radix-icons-svelte';
 	import Meta from '$lib/components/Meta.svelte';
+	import { onMount } from 'svelte';
 	
 	let current_users: {username: string, id: string}[] = [];
+	let total = 0;
+	let pageNumber = 0;
+	
+	onMount(() => {
+		pageNumber = Number(new URLSearchParams(window.location.search).get("page")) || 0;
+	});
 	async function getUsers() {
-		const users = await Users.GET.fetch({});
+		const queryParams = new URLSearchParams(window.location.search);
+		queryParams.set("page", pageNumber.toString());
+		window.history.replaceState({}, '', `${window.location.pathname}?${queryParams.toString()}`);
+		
+		const users = await Users.GET.fetch({ offset: pageNumber * 10});
 		if (users.err) return console.error(users.err);
 		current_users = users.ok.users;
+		total = users.ok.total;
 	}
 </script>
 
@@ -27,7 +40,6 @@
 			<H1>Admin Panel</H1>
 
 			<Table.Root>
-				<Table.Caption>Displaying all available users.</Table.Caption>
 				<Table.Header>
 					<Table.Row>
 						<Table.Head>ID</Table.Head>
@@ -58,6 +70,40 @@
 					{/each}
 				</Table.Body>
 			</Table.Root>
+
+
+			<Pagination.Root count={total} perPage={10} let:pages let:currentPage page={pageNumber + 1}>
+				<Pagination.Content>
+					<Pagination.Item>
+						<Pagination.PrevButton on:click={() => {
+							pageNumber--;
+							getUsers();
+						}}/>
+					</Pagination.Item>
+					{#each pages as page (page.key)}
+						{#if page.type === "ellipsis"}
+							<Pagination.Item>
+								<Pagination.Ellipsis />
+							</Pagination.Item>
+						{:else}
+							<Pagination.Item isVisible={currentPage === page.value}>
+								<Pagination.Link {page} isActive={currentPage === page.value} on:click={() => {
+									pageNumber = page.value;
+									getUsers();
+								}}>
+									{page.value}
+								</Pagination.Link>
+							</Pagination.Item>
+						{/if}
+					{/each}
+					<Pagination.Item>
+						<Pagination.NextButton on:click={() => {
+							pageNumber++;
+							getUsers();
+						}}/>
+					</Pagination.Item>
+				</Pagination.Content>
+			</Pagination.Root>
 		</Dock>
 	</AppBounds>
 </AdminOnly>

src/routes/page/profile/+page.svelte

@@ -11,7 +11,6 @@
 	import H1 from "$lib/components/H1.svelte";
 	import {Button} from "$lib/shadcn/ui/button";
 	import Image from "svimg/Image.svelte";
-	import { env } from '$env/dynamic/public';
 	import Meta from '$lib/components/Meta.svelte';
 
 	export let register_form: SuperValidated<typeof Register.User>;
@@ -23,6 +22,13 @@
 		localStorage.setItem("username", username);
 		client_auth.set({ jwt: token, username });
 		title = username;
+
+
+		const queryParams = new URLSearchParams(window.location.search);
+		const from = queryParams.get("from");
+		if (from != null) {
+			window.location.href= from;
+		}
 	}
 </script>