Update session navigation layout and styling

- Update session navigation for projects
- Add navigation for previous and next sessions
- Update navigation layout for sessions
- Add a `hover` and `extraClasses` export variable to `SessionNavBlock` component

src/lib/components/session/SessionNav.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import SessionNavBlock from "$lib/components/session/SessionNavBlock.svelte";
+    import FaAngleLeft from "svelte-icons/fa/FaAngleLeft.svelte";
+    import FaAngleRight from "svelte-icons/fa/FaAngleRight.svelte";
+    import type { Project } from "$lib/projects";
+    import type { Session } from "$lib/sessions";
+
+    export let project: Project | undefined;
+    export let previousSesssion: Session | undefined;``
+    export let nextSession: Session | undefined;
+    export let session: Session | undefined;
+</script>
+
+<div id="session-nav" class="grid grid-cols-3 gap-6 text-sm my-2">
+    <div class="flex items-center justify-center">
+        {#if previousSesssion}
+            <a
+                class="w-full"
+                href="/projects/{project?.id}/sessions/{previousSesssion?.hash}"
+            >
+                <SessionNavBlock hover={true} session={previousSesssion} />
+            </a>
+        {/if}
+    </div>
+    <div class="flex items-center justify-center w-full space-x-1">
+        <a
+            href="/projects/{project?.id}/sessions/{previousSesssion?.hash}"
+            class="text-zinc-500 hover:text-zinc-300 w-8 h-8 {previousSesssion
+                ? ''
+                : 'invisible'}"
+        >
+            <FaAngleLeft />
+        </a>
+        <div class="w-full">
+            <SessionNavBlock
+                session={session}
+                extraClasses="p-4 border-orange-300"
+            />
+        </div>
+        <a
+            href="/projects/{project?.id}/sessions/{nextSession?.hash}"
+            class="w-8 h-8 text-zinc-500 hover:text-zinc-300 {nextSession
+                ? 'visible'
+                : 'invisible'}"
+        >
+            <FaAngleRight />
+        </a>
+    </div>
+    <div class="flex items-center justify-center">
+        {#if nextSession}
+            <a
+                class="w-full"
+                href="/projects/{project?.id}/sessions/{nextSession?.hash}"
+            >
+                <SessionNavBlock hover={true} session={nextSession} />
+            </a>
+        {/if}
+    </div>
+</div>

src/lib/components/session/SessionNavBlock.svelte

@@ -3,17 +3,21 @@
     import sessions from "$lib/sessions";
     import { toHumanReadableTime } from "$lib/time";
     export let session: Session | undefined;
+    export let hover: boolean = false;
+    export let extraClasses: string = "";
 </script>
 
 <div>
     {#if session}
         <div
-            class="cursor-default select-none flex flex-col border rounded-md p-2 overflow-hidden bg-zinc-700 border-zinc-600"
+            class="cursor-default select-none flex flex-col 
+            border rounded-md p-2 overflow-hidden bg-zinc-700 border-zinc-600 
+            {hover ? 'hover:border-zinc-400 cursor-auto' : ''} {extraClasses}"
         >
-            <div>
+            <div class="font-bold text-zinc-300">
                 {session.meta.branch}
             </div>
-            <div>
+            <div class="mt-1 text-xs">
                 <span>
                     {#if session.meta.startTs}
                         {toHumanReadableTime(session.meta.startTs)}

src/routes/projects/[id]/+layout.svelte

@@ -5,8 +5,8 @@
     $: project = data.project;
 </script>
 
-<div class="p-3">
-    <div class="flex flex-row space-x-3 text-zinc-500 text-lg select-none">
+<div class="">
+    <div class="p-3 flex flex-row space-x-3 text-zinc-500 text-lg select-none">
         <div>Week</div>
         <a href="/projects/{$project?.id}" class="hover:text-zinc-300">Day</a>
         <div title="go to current session">Session</div>

src/routes/projects/[id]/sessions/[hash]/+page.svelte

@@ -8,6 +8,7 @@
     import SessionNavBlock from "$lib/components/session/SessionNavBlock.svelte";
     import FaAngleLeft from "svelte-icons/fa/FaAngleLeft.svelte";
     import FaAngleRight from "svelte-icons/fa/FaAngleRight.svelte";
+    import SessionNav from "$lib/components/session/SessionNav.svelte";
 
     export let data: PageData;
     // const { deltas, files, session, nextSession, previousSesssion, project } = data;
@@ -54,28 +55,16 @@
     // const showTimeline = isFinite(min) && isFinite(max);
 </script>
 
-<div>
-    <div id="session-nav" class="flex flex-row space-x-4 my-4 items-center">
-        {#if $previousSesssion}
-            <a
-                href="/projects/{$project?.id}/sessions/{$previousSesssion?.hash}"
-            >
-                <SessionNavBlock session={$previousSesssion} />
-            </a>
-        {/if}
-        <div class="w-8 h-8 {$previousSesssion ? 'visible' : 'invisible'}">
-            <FaAngleLeft />
-        </div>
-        <SessionNavBlock session={$session} />
-        <div class="w-8 h-8 {$nextSession ? 'visible' : 'invisible'}">
-            <FaAngleRight />
-        </div>
-        {#if $nextSession}
-            <a href="/projects/{$project?.id}/sessions/{$nextSession?.hash}">
-                <SessionNavBlock session={$nextSession} />
-            </a>
-        {/if}
+<div class="">
+    <div class="flex justify-center border-y border-zinc-700">
+        <SessionNav
+            project={$project}
+            session={$session}
+            nextSession={$nextSession}
+            previousSesssion={$previousSesssion}
+        />
     </div>
+
     <div id="debug" class="mt-24">
         session hash: {$session?.hash}
     </div>