some basic layout for the 'day' timeline

src/lib/components/timeline/TimelineDay.svelte

@@ -2,13 +2,24 @@
     import type { Session } from "$lib/session";
     import TimelineDaySession from "./TimelineDaySession.svelte";
     export let sessions: Session[];
+
+    const sessionDisplayWidth = (session: Session) => {
+        let sessionDurationHours =
+            (session.endTime - session.startTime) / 1000 / 60 / 60;
+        if (sessionDurationHours <= 1) {
+            return "w-40";
+        } else {
+            return "w-60";
+        }
+    };
 </script>
 
-<div>
+<div class="mt-12">
-    <div class="flex flex-row space-x-2">
+    <div class="-mb-5 border border-slate-400 h-1.5 bg-slate-200  z-0" />
+    <div class="flex flex-row space-x-2 z-10">
         {#each sessions as session}
-            <div>
+            <div class={sessionDisplayWidth(session)}>
-                <TimelineDaySession session={session}></TimelineDaySession>
+                <TimelineDaySession {session} />
             </div>
         {/each}
     </div>

src/lib/components/timeline/TimelineDaySession.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import type { Session } from "$lib/session";
+    import TimelineDaySessionActivities from "./TimelineDaySessionActivities.svelte";
     export let session: Session;
 
     const toHumanReadableTime = (timestamp: number) => {
-        return new Date(session.startTime).toLocaleTimeString("en-US", {
+        return new Date(timestamp).toLocaleTimeString("en-US", {
             hour: "numeric",
             minute: "numeric",
         });
@@ -11,14 +12,14 @@
 
     const colorFromBranchName = (branchName: string) => {
         const colors = [
-            "bg-red-500",
+            "bg-red-500 border-red-700",
-            "bg-green-500",
+            "bg-green-500 border-green-700",
-            "bg-blue-500",
+            "bg-blue-500 border-blue-700",
-            "bg-yellow-500",
+            "bg-yellow-500 border-yellow-700",
-            "bg-purple-500",
+            "bg-purple-500 border-purple-700",
-            "bg-pink-500",
+            "bg-pink-500 border-pink-700",
-            "bg-indigo-500",
+            "bg-indigo-500 border-indigo-700",
-            "bg-gray-500",
+            "bg-gray-500 border-gray-700",
         ];
         const hash = branchName.split("").reduce((acc, char) => {
             return acc + char.charCodeAt(0);
@@ -27,11 +28,22 @@
     };
 </script>
 
-<div>
+<div class="flex flex-col space-y-2">
-    <div id="block" class="text-slate-50 rounded {colorFromBranchName(session.branchName)}">
+    <div
+        id="block"
+        class="border px-4 py-2 text-slate-50 rounded-lg {colorFromBranchName(session.branchName)}"
+    >
         {session.branchName}
     </div>
-    <div id="activities">TODO: activities</div>
+    <div id="activities">
+        <div class="my-2 mx-1">
+            <TimelineDaySessionActivities
+                activities={session.activities}
+                sessionStart={session.startTime}
+                sessionEnd={session.endTime}
+            />
+        </div>
+    </div>
     <div id="time-range">
         {toHumanReadableTime(session.startTime)}
         -

src/lib/components/timeline/TimelineDaySessionActivities.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    import { type SessionActivity, ActivityType } from "$lib/session";
+    import FaSquare from "svelte-icons/fa/FaSquare.svelte";
+    import FaCircle from "svelte-icons/fa/FaCircle.svelte";
+    import FaAdjust from "svelte-icons/fa/FaAdjust.svelte";
+    import FaMapMarker from "svelte-icons/fa/FaMapMarker.svelte";
+
+    export let activities: SessionActivity[];
+    export let sessionStart: number;
+    export let sessionEnd: number;
+
+    $: sessionDuration = sessionEnd - sessionStart;
+
+    let proportionOfTime = (time: number) => {
+        return ((time - sessionStart) / sessionDuration) * 100;
+    };
+    const toHumanReadableTime = (timestamp: number) => {
+        return new Date(timestamp).toLocaleTimeString("en-US", {
+            hour: "numeric",
+            minute: "numeric",
+        });
+    };
+</script>
+
+<div class="relative">
+    <hr class="h-px bg-slate-400 border-0 z-0" />
+    <div class="absolute inset-0 -mt-1.5">
+        {#each activities as activity}
+            <div
+                class="flex -mx-1.5"
+                style="position:relative; left: {proportionOfTime(
+                    activity.timestamp
+                )}%;"
+            >
+                <div
+                    class="w-3 h-3 text-slate-700 z-50 absolute inset-0"
+                    style=""
+                    title="{activity.type} at {toHumanReadableTime(
+                        activity.timestamp
+                    )}"
+                >
+                    {#if activity.type === ActivityType.COMMIT}
+                        <div class="text-sky-500 hover:text-sky-600">
+                            <FaSquare />
+                        </div>
+                    {:else if activity.type === ActivityType.MERGE}
+                        <div class="text-green-500 hover:text-green-600">
+                            <FaMapMarker />
+                        </div>
+                    {:else if activity.type === ActivityType.REBASE}
+                        <div class="text-orange-500 hover:text-orange-600">
+                            <FaAdjust />
+                        </div>
+                    {:else if activity.type === ActivityType.PUSH}
+                        <div class="text-purple-500 hover:text-purple-600">
+                            <FaCircle />
+                        </div>
+                    {/if}
+                </div>
+            </div>
+        {/each}
+    </div>
+</div>

src/lib/session.ts

@@ -56,17 +56,17 @@ export let dummySessions: Session[] = [
         ],
         [
             new SessionActivity(
-                Math.floor(new Date('2023-01-01T08:30:00.000Z').getTime()),
+                Math.floor(new Date('2023-01-01T08:01:00.000Z').getTime()),
                 ActivityType.COMMIT),
             new SessionActivity(
-                Math.floor(new Date('2023-01-01T08:40:00.000Z').getTime()),
+                Math.floor(new Date('2023-01-01T08:59:00.000Z').getTime()),
                 ActivityType.PUSH),
         ]
     ),
     new Session(
         "2-a1b2c3d4e5f6g7h8i9j0",
         Math.floor(new Date('2023-01-01T14:00:00.000Z').getTime()),
-        Math.floor(new Date('2023-01-01T15:00:00.000Z').getTime()),
+        Math.floor(new Date('2023-01-01T15:30:00.000Z').getTime()),
         "newer-dependencies",
         [
             new SessionFile("package.json", "package.json", 4, 15),