feat: add toggle to switch snapshot order

app/client/modules/backups/components/snapshot-timeline.tsx

@@ -1,22 +1,63 @@
-import { useRef } from "react";
+import { ArrowRightLeft } from "lucide-react";
+import { useMemo, useRef, useState } from "react";
 import type { ListSnapshotsResponse } from "~/client/api-client";
 import { ByteSize } from "~/client/components/bytes-size";
 import { Card, CardContent } from "~/client/components/ui/card";
+import { Button } from "~/client/components/ui/button";
 import { formatDateWithMonth, formatShortDate, formatTime } from "~/client/lib/datetime";
 import { cn } from "~/client/lib/utils";
 import { RetentionCategoryBadges } from "~/client/components/retention-category-badges";
 
+export type SnapshotTimelineSortOrder = "asc" | "desc";
+
+export const SNAPSHOT_TIMELINE_SORT_ORDER_COOKIE_NAME = "snapshot_timeline_sort_order";
+const SNAPSHOT_TIMELINE_SORT_ORDER_COOKIE_MAX_AGE = 60 * 60 * 24 * 365;
+
+const getSortedSnapshots = (snapshots: ListSnapshotsResponse, sortOrder: SnapshotTimelineSortOrder) => {
+	return [...snapshots].sort((snapshotA, snapshotB) => {
+		return sortOrder === "desc" ? snapshotB.time - snapshotA.time : snapshotA.time - snapshotB.time;
+	});
+};
+
+const getSnapshotRange = (snapshots: ListSnapshotsResponse) => {
+	if (snapshots.length === 0) {
+		return null;
+	}
+
+	return snapshots.reduce(
+		(range, snapshot) => ({
+			oldest: snapshot.time < range.oldest.time ? snapshot : range.oldest,
+			newest: snapshot.time > range.newest.time ? snapshot : range.newest,
+		}),
+		{ oldest: snapshots[0], newest: snapshots[0] },
+	);
+};
+
 interface Props {
 	snapshots: ListSnapshotsResponse;
 	snapshotId?: string;
 	loading?: boolean;
 	error?: string;
+	initialSortOrder?: SnapshotTimelineSortOrder;
 	onSnapshotSelect: (snapshotId: string) => void;
 }
 
 export const SnapshotTimeline = (props: Props) => {
-	const { snapshots, snapshotId, loading, onSnapshotSelect, error } = props;
+	const { snapshots, snapshotId, loading, onSnapshotSelect, error, initialSortOrder = "asc" } = props;
 	const selectedRef = useRef<HTMLButtonElement>(null);
+	const [sortOrder, setSortOrder] = useState<SnapshotTimelineSortOrder>(initialSortOrder);
+	const sortedSnapshots = useMemo(() => getSortedSnapshots(snapshots, sortOrder), [snapshots, sortOrder]);
+	const snapshotRange = useMemo(() => getSnapshotRange(snapshots), [snapshots]);
+
+	const sortOrderButtonLabel = "Toggle snapshot sort order";
+
+	const handleToggleSortOrder = () => {
+		setSortOrder((currentSortOrder) => {
+			const nextSortOrder = currentSortOrder === "asc" ? "desc" : "asc";
+			document.cookie = `${SNAPSHOT_TIMELINE_SORT_ORDER_COOKIE_NAME}=${nextSortOrder}; path=/; max-age=${SNAPSHOT_TIMELINE_SORT_ORDER_COOKIE_MAX_AGE}`;
+			return nextSortOrder;
+		});
+	};
 
 	if (error) {
 		return (
@@ -51,10 +92,26 @@ export const SnapshotTimeline = (props: Props) => {
 	return (
 		<Card className="p-0 pt-2">
 			<div className="w-full bg-card">
+				<div className="items-center flex flex-col gap-3 border-b border-border px-4 pb-2 sm:flex-row sm:items-center sm:justify-between">
+					<span className="text-sm font-medium">Snapshots</span>
+					<div className="flex flex-wrap gap-2">
+						<Button
+							type="button"
+							size="icon"
+							variant="ghost"
+							aria-label={sortOrderButtonLabel}
+							aria-pressed={sortOrder === "desc"}
+							title={sortOrderButtonLabel}
+							onClick={handleToggleSortOrder}
+						>
+							<ArrowRightLeft className="h-4 w-4" />
+						</Button>
+					</div>
+				</div>
 				<div className="relative flex items-center">
-					<div className="flex-1 overflow-hidden">
+					<div className="flex-1 overflow-hidden pt-2">
 						<div className="snapshot-scrollable flex gap-4 overflow-x-auto pb-2 *:first:ml-2 *:last:mr-2">
-							{snapshots.map((snapshot) => {
+							{sortedSnapshots.map((snapshot) => {
 								const date = new Date(snapshot.time);
 								const isSelected = snapshotId === snapshot.short_id;
 
@@ -88,9 +145,12 @@ export const SnapshotTimeline = (props: Props) => {
 
 				<div className="px-4 py-2 text-xs text-muted-foreground bg-card-header border-t border-border flex justify-between">
 					<span>{snapshots.length} snapshots</span>
-					<span>
+					{snapshotRange && (
-						{formatDateWithMonth(snapshots[0].time)}&nbsp;-&nbsp;{formatDateWithMonth(snapshots.at(-1)?.time)}
+						<span>
-					</span>
+							{formatDateWithMonth(snapshotRange.oldest.time)}&nbsp;-&nbsp;
+							{formatDateWithMonth(snapshotRange.newest.time)}
+						</span>
+					)}
 				</div>
 			</div>
 		</Card>

app/client/modules/backups/routes/backup-details.tsx

@@ -43,6 +43,7 @@ import type {
 	Snapshot,
 } from "~/client/lib/types";
 import { useNavigate } from "@tanstack/react-router";
+import type { SnapshotTimelineSortOrder } from "../components/snapshot-timeline";
 
 type Props = {
 	loaderData: {
@@ -51,14 +52,16 @@ type Props = {
 		repos: Repository[];
 		scheduleNotifs: ScheduleNotification[];
 		mirrors: ScheduleMirror[];
+		snapshotTimelineSortOrder: SnapshotTimelineSortOrder;
 		snapshots?: Snapshot[];
 	};
 	scheduleId: string;
 	initialSnapshotId?: string;
+	initialSnapshotSortOrder: SnapshotTimelineSortOrder;
 };
 
 export function ScheduleDetailsPage(props: Props) {
-	const { loaderData, scheduleId, initialSnapshotId } = props;
+	const { loaderData, scheduleId, initialSnapshotId, initialSnapshotSortOrder } = props;
 
 	const queryClient = useQueryClient();
 	const navigate = useNavigate();
@@ -287,6 +290,7 @@ export function ScheduleDetailsPage(props: Props) {
 				snapshots={snapshots ?? []}
 				snapshotId={selectedSnapshot?.short_id}
 				error={failureReason?.message}
+				initialSortOrder={initialSnapshotSortOrder}
 				onSnapshotSelect={handleSnapshotSelect}
 			/>
 			<BackupSummaryCard summary={selectedSnapshot?.summary} />

app/routes/(dashboard)/backups/$backupId/index.tsx

@@ -1,4 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { getCookie } from "@tanstack/react-start/server";
 import { z } from "zod";
 import {
 	getBackupProgressOptions,
@@ -9,9 +11,15 @@ import {
 	listRepositoriesOptions,
 	listSnapshotsOptions,
 } from "~/client/api-client/@tanstack/react-query.gen";
+import { SNAPSHOT_TIMELINE_SORT_ORDER_COOKIE_NAME } from "~/client/modules/backups/components/snapshot-timeline";
 import { ScheduleDetailsPage } from "~/client/modules/backups/routes/backup-details";
 import { prefetchOrSkip } from "~/utils/prefetch";
 
+const fetchSnapshotTimelineSortOrder = createServerFn({ method: "GET" }).handler(async () => {
+	const order = getCookie(SNAPSHOT_TIMELINE_SORT_ORDER_COOKIE_NAME);
+	return order === "desc" ? "desc" : "asc";
+});
+
 export const Route = createFileRoute("/(dashboard)/backups/$backupId/")({
 	component: RouteComponent,
 	errorComponent: () => <div>Failed to load backup</div>,
@@ -19,13 +27,14 @@ export const Route = createFileRoute("/(dashboard)/backups/$backupId/")({
 	loader: async ({ params, context }) => {
 		const { backupId } = params;
 
-		const [schedule, notifs, repos, scheduleNotifs, mirrors] = await Promise.all([
+		const [schedule, notifs, repos, scheduleNotifs, mirrors, _progress, snapshotTimelineSortOrder] = await Promise.all([
 			context.queryClient.ensureQueryData({ ...getBackupScheduleOptions({ path: { shortId: backupId } }) }),
 			context.queryClient.ensureQueryData({ ...listNotificationDestinationsOptions() }),
 			context.queryClient.ensureQueryData({ ...listRepositoriesOptions() }),
 			context.queryClient.ensureQueryData({ ...getScheduleNotificationsOptions({ path: { shortId: backupId } }) }),
 			context.queryClient.ensureQueryData({ ...getScheduleMirrorsOptions({ path: { shortId: backupId } }) }),
 			context.queryClient.ensureQueryData({ ...getBackupProgressOptions({ path: { shortId: backupId } }) }),
+			fetchSnapshotTimelineSortOrder(),
 		]);
 
 		const snapshotOptions = listSnapshotsOptions({
@@ -41,6 +50,7 @@ export const Route = createFileRoute("/(dashboard)/backups/$backupId/")({
 			repos,
 			scheduleNotifs,
 			mirrors,
+			snapshotTimelineSortOrder,
 			snapshots: context.queryClient.getQueryData(snapshotOptions.queryKey),
 		};
 	},
@@ -66,5 +76,12 @@ function RouteComponent() {
 	const { backupId } = Route.useParams();
 	const search = Route.useSearch();
 
-	return <ScheduleDetailsPage loaderData={loaderData} scheduleId={backupId} initialSnapshotId={search.snapshot} />;
+	return (
+		<ScheduleDetailsPage
+			loaderData={loaderData}
+			scheduleId={backupId}
+			initialSnapshotId={search.snapshot}
+			initialSnapshotSortOrder={loaderData.snapshotTimelineSortOrder}
+		/>
+	);
 }