feat(frontend): timeline

packages/backend/src/routes/api/v1/canvas.ts

@@ -43,10 +43,12 @@ import { getUserCanvasCooldown } from "@/services/pixelService";
 import { generateTimelapse } from "@/services/timelapse/timelapseService";
 import { addSpanAttributes } from "@/utils/otel";
 import { pixelRouter } from "./pixel";
+import { snapshotRouter } from "./snapshot";
 
 export const canvasRouter = typedRouter(Router());
 
 canvasRouter.use("/:canvasId/pixel", pixelRouter);
+canvasRouter.use("/:canvasId/snapshots", snapshotRouter);
 
 canvasRouter.get("/", async (req, res) => {
   const canvases = await getCanvases();

packages/backend/src/routes/api/v1/snapshot.ts

@@ -0,0 +1,35 @@
+import { CanvasIdParamModel } from "@blurple-canvas-web/types";
+import { Router } from "express";
+import { typedRouter } from "@/middleware/typedRouter";
+import { validate } from "@/middleware/validate";
+import { getSnapshots } from "@/services/snapshot";
+
+export const snapshotRouter = typedRouter(Router({ mergeParams: true }));
+
+snapshotRouter.get(
+  "/",
+  validate({ params: CanvasIdParamModel }),
+  async (req, res) => {
+    const snapshots = await getSnapshots({ canvasId: req.params.canvasId });
+
+    res
+      .status(200)
+      .json(
+        snapshots.map((snapshot) =>
+          serializeSnapshot(snapshot, req.params.canvasId),
+        ),
+      );
+  },
+);
+
+function serializeSnapshot(
+  snapshot: Awaited<ReturnType<typeof getSnapshots>>[number],
+  canvasId: number,
+) {
+  return {
+    canvasId,
+    snapshotAt: snapshot.snapshot_at.toISOString(),
+    lastIncludedHistoryAt: snapshot.last_included_history_at.toISOString(),
+    historyCount: snapshot.history_count,
+  };
+}

packages/backend/src/services/canvasService.ts

@@ -27,6 +27,7 @@ import {
 import { getCurrentEvent } from "./eventService";
 import { getEventPalette } from "./paletteService";
 import { type BulkPlaceEntry, createBulkPlaceEntries } from "./pixelService";
+import { isSnapshotAvailableForCanvas } from "./snapshot";
 
 /**
  * A locked canvas cannot be edited by users. It is therefore, safe to store it as an image on the
@@ -739,5 +740,6 @@ function canvasToCanvasInfo(canvas: canvas): CanvasInfo {
     webPlacingEnabled: config.webPlacingEnabled,
     allColorsGlobal: canvas.all_colors_global,
     cooldownDuration: canvas.cooldown_length,
+    timelineEnabled: isSnapshotAvailableForCanvas(canvas.id),
   };
 }

packages/backend/src/services/historyService.ts

@@ -527,11 +527,11 @@ export async function restorePixelHistoryEntries(
       async ([canvasId, coordinates]) => {
         await restorePixelsAfterHistoryModification(canvasId, coordinates);
 
-        await setSnapshotDirtyTimestamp(
-          canvasId,
-          // biome-ignore lint/style/noNonNullAssertion: is generated above, will always exist
-          earliestEntryTimestampsByCanvas.get(canvasId)!,
-        );
+        const earliestEntryTimestamp =
+          earliestEntryTimestampsByCanvas.get(canvasId);
+        if (earliestEntryTimestamp) {
+          await setSnapshotDirtyTimestamp(canvasId, earliestEntryTimestamp);
+        }
       },
     ),
   );

packages/backend/src/services/snapshot/index.ts

@@ -2,3 +2,4 @@ export * from "@/snapshot/paths";
 export * from "./generateSnapshotService";
 export * from "./scheduler";
 export * from "./snapshotPolicy";
+export * from "./snapshotService";

packages/backend/src/services/snapshot/scheduler.ts

@@ -57,11 +57,13 @@ async function persistSnapshot({
       canvas_id: canvasId,
       snapshot_at: snapshotAt,
       history_count: historyCount,
+      file_size_bytes: image.byteLength,
       image_path: filePath,
       last_included_history_at: lastIncludedHistoryAt,
     },
     update: {
       history_count: historyCount,
+      file_size_bytes: image.byteLength,
       image_path: filePath,
       last_included_history_at: lastIncludedHistoryAt,
     },

packages/backend/src/services/snapshot/snapshotService.ts

@@ -28,7 +28,7 @@ export async function getSnapshots({
 
   const manifests = await snapshotPrisma.snapshot_manifest.findMany({
     where,
-    orderBy: { last_included_history_at: "desc" },
+    orderBy: { last_included_history_at: "asc" },
   });
 
   if (to) {
@@ -41,7 +41,7 @@ export async function getSnapshots({
     });
 
     if (extra && !manifests.some((manifest) => manifest.id === extra.id)) {
-      manifests.unshift(extra);
+      manifests.push(extra);
     }
   }
 
@@ -91,3 +91,19 @@ export async function setSnapshotDirtyTimestamp(
     });
   }
 }
+
+export async function getSnapshotManifest(
+  canvasId: CanvasInfo["id"],
+  snapshotAt: Date,
+) {
+  if (!isSnapshotAvailableForCanvas(canvasId)) {
+    return null;
+  }
+
+  return snapshotPrisma.snapshot_manifest.findFirst({
+    where: {
+      canvas_id: canvasId,
+      snapshot_at: snapshotAt,
+    },
+  });
+}

packages/backend/src/services/timelapse/timelapseService.ts

@@ -6,6 +6,7 @@ import {
 } from "@/snapshot/paths";
 import { calculateScale, clamp, normalizeBounds } from "@/utils";
 import { getCanvasInfo } from "../canvasService";
+import { isSnapshotAvailableForCanvas } from "../snapshot";
 import { getSnapshots } from "../snapshot/snapshotService";
 import {
   buildTimelapseCacheKey,
@@ -45,6 +46,10 @@ export async function generateTimelapse({
   backgroundColor = notQuiteBlackRgba,
   raw = "default",
 }: GenerateTimelapseParams): Promise<string> {
+  if (!isSnapshotAvailableForCanvas(canvasId)) {
+    throw new Error(`Snapshots are not available for canvas ${canvasId}`);
+  }
+
   if (raw === "raw") {
     endHoldDurationMs = null;
     scale = 1;

packages/frontend/src/app/layout.tsx

@@ -11,7 +11,12 @@ import { cookies } from "next/headers";
 import config from "@/config/clientConfig";
 import serverConfig from "@/config/serverConfig";
 import "../styles/core.css";
-import { AuthProvider, CanvasProvider, QueryClientProvider } from "@/contexts";
+import {
+  AuthProvider,
+  CanvasProvider,
+  QueryClientProvider,
+  TimelineProvider,
+} from "@/contexts";
 import { isDatabaseUnavailableError } from "@/util/axios";
 import "../styles/core.css";
 import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";
@@ -84,6 +89,7 @@ const defaultCanvasInfo = {
   webPlacingEnabled: false,
   allColorsGlobal: false,
   cooldownDuration: 0,
+  timelineEnabled: false,
 } satisfies CanvasInfo;
 
 const toasterIcons = {
@@ -119,20 +125,22 @@ async function LayoutProviders({ children }: { children: React.ReactNode }) {
       <QueryClientProvider>
         <AuthProvider profile={profile}>
           <CanvasProvider mainCanvasInfo={canvasInfo}>
-            <AppProviders>
-              {children}
-              <Toaster
-                icons={toasterIcons}
-                position="bottom-left" // bottom right overlaps with the action panel
-                theme="dark"
-                toastOptions={{
-                  style: {
-                    backgroundColor: "var(--discord-legacy-not-quite-black)",
-                    boxShadow: "0 0 10px rgba(0 0 0 / 25%)",
-                  },
-                }}
-              />
-            </AppProviders>
+            <TimelineProvider>
+              <AppProviders>
+                {children}
+                <Toaster
+                  icons={toasterIcons}
+                  position="bottom-left" // bottom right overlaps with the action panel
+                  theme="dark"
+                  toastOptions={{
+                    style: {
+                      backgroundColor: "var(--discord-legacy-not-quite-black)",
+                      boxShadow: "0 0 10px rgba(0 0 0 / 25%)",
+                    },
+                  }}
+                />
+              </AppProviders>
+            </TimelineProvider>
           </CanvasProvider>
         </AuthProvider>
       </QueryClientProvider>

packages/frontend/src/components/action-panel/tabs/PixelInfoTab.tsx

@@ -4,7 +4,12 @@ import { useId, useState } from "react";
 import { toast } from "sonner";
 import { ButtonSupplement, DynamicButton } from "@/components/button";
 import Pagination from "@/components/Pagination";
-import { useCanvasContext, useCanvasViewContext } from "@/contexts";
+import TimelineControls from "@/components/timeline/TimelineControls";
+import {
+  useCanvasContext,
+  useCanvasViewContext,
+  useTimelineContext,
+} from "@/contexts";
 import {
   type PixelHistoryParams,
   usePixelHistory,
@@ -106,6 +111,7 @@ export default function PixelInfoTab({
   const { data, isLoading } = usePixelHistory(canvasId, historyParams, {
     enabled: active,
   });
+  const { currentTimelineTimestamp, timelineIsActive } = useTimelineContext();
 
   if (
     point &&
@@ -118,9 +124,18 @@ export default function PixelInfoTab({
   if (historyParams !== null && historyParams?.page !== page)
     setHistoryParams((prev) => (prev ? { ...prev, page } : null));
 
-  const pixelHistory = data?.entries ?? [];
+  const rawPixelHistory = data?.entries ?? [];
   const truePage = data?.page ?? 1;
 
+  const pixelHistory =
+    timelineIsActive && currentTimelineTimestamp ?
+      rawPixelHistory.filter((record) => {
+        const recordTime = new Date(record.timestamp);
+        const timelineTime = currentTimelineTimestamp;
+        return recordTime <= timelineTime;
+      })
+    : rawPixelHistory;
+
   const pixelUrl =
     (adjustedCoords &&
       containerRef.current &&
@@ -203,6 +218,7 @@ export default function PixelInfoTab({
           </DynamicButton>
         )}
       </ActionPanelTabBody>
+      <TimelineControls />
     </PixelInfoTabBlock>
   );
 }

packages/frontend/src/components/button/index.ts

@@ -1,4 +1,8 @@
-export { BasicButton, DestructiveButton } from "./BasicButtons";
+export {
+  BasicButton,
+  BasicHighlightButton,
+  DestructiveButton,
+} from "./BasicButtons";
 export { Button } from "./Button";
 export { default as ButtonSupplement } from "./ButtonSupplement";
 export { DynamicAnchorButton, default as DynamicButton } from "./DynamicButton";