🔨 Refactor: Recent Activity & Files Status

- Add recent activity to the project page
- Sort recent activity by timestamp
- Limit recent activity to 20 elements

[src/routes/projects/[projectId]/+page.svelte]
- Add a `recentActivity` variable to store the recent activity
- Convert a list of timestamps to a sparkline
- Limit the number of sparkline elements to 3
- Iterate over the `dateSessions` to get the recent activity
- Sort the recent activity by timestamp
- Limit the recent activity to 20 elements
- Update the template to use the `recentActivity` variable
[src/routes/projects/[projectId]/+layout.ts]
- Add `Activity` type from `$lib/sessions`
- Add `recentActivity` derived from `sessions`
- Sort `sessions` by `startTimestampMs`
- Sort `recentActivity` by `timestampMs`
- Limit `recentActivity` to the first `20` items
- Add `filesStatus` to the return object

src/routes/projects/[projectId]/+layout.ts

@@ -7,6 +7,7 @@ import type { Status } from '$lib/statuses';
 import { asyncDerived } from '@square/svelte-store';
 import type { Delta } from '$lib/deltas';
 import { startOfDay } from 'date-fns';
+import type { Activity } from '$lib/sessions';
 
 export const prerender = false;
 export const load: LayoutLoad = async ({ parent, params }) => {
@@ -22,6 +23,18 @@ export const load: LayoutLoad = async ({ parent, params }) => {
 	const orderedSessions = derived(sessions, (sessions) => {
 		return sessions.slice().sort((a, b) => a.meta.startTimestampMs - b.meta.startTimestampMs);
 	});
+	const recentActivity = derived(sessions, (sessions) => {
+		const recentActivity: Activity[] = [];
+		sessions.forEach((session) => {
+			session.activity.forEach((activity) => {
+				recentActivity.push(activity);
+			});
+		});
+		const activitySorted = recentActivity.sort((a, b) => {
+			return b.timestampMs - a.timestampMs;
+		});
+		return activitySorted.slice(0, 20);
+	});
 
 	let dateSessions = readable<Record<number, UISession[]>>({});
 	if (!building) {
@@ -80,6 +93,7 @@ export const load: LayoutLoad = async ({ parent, params }) => {
 		projectId: params.projectId,
 		sessions: orderedSessions,
 		dateSessions: dateSessions,
-		filesStatus: filesStatus
+		filesStatus: filesStatus,
+		recentActivity: recentActivity
 	};
 };

src/routes/projects/[projectId]/+page.svelte

@@ -10,6 +10,7 @@
 	$: project = data.project;
 	$: dateSessions = data.dateSessions as Readable<Record<number, UISession[]>>;
 	$: filesStatus = data.filesStatus;
+	$: recentActivity = data.recentActivity as Readable<Activity[]>;
 
 	// convert a list of timestamps to a sparkline
 	function timestampsToSpark(tsArray: number[]) {
@@ -85,25 +86,6 @@
 			})
 			.slice(0, 3);
 	}
-
-	function recentActivity(dateSessions: Record<string, UISession[]>) {
-		let recentActivity: Activity[] = [];
-		if (dateSessions) {
-			Object.entries(dateSessions).forEach(([date, sessions]) => {
-				sessions.forEach((session: UISession) => {
-					if (session.session) {
-						session.session.activity.forEach((activity) => {
-							recentActivity.push(activity);
-						});
-					}
-				});
-			});
-		}
-		let activitySorted = recentActivity.sort((a, b) => {
-			return b.timestampMs - a.timestampMs;
-		});
-		return activitySorted.slice(0, 20);
-	}
 </script>
 
 <div class="project-section-component" style="height: calc(100vh - 118px); overflow: hidden;">
@@ -193,7 +175,7 @@
 				style="height: calc(100vh - 110px); overflow-y: auto;"
 			>
 				<h2 class="text-lg font-bold text-zinc-300">Recent Activity</h2>
-				{#each recentActivity($dateSessions) as activity}
+				{#each $recentActivity as activity}
 					<div
 						class="recent-activity-card mt-4 mb-1 rounded border border-zinc-700 text-zinc-400 drop-shadow-lg"
 					>