timeline things

package.json

@@ -37,6 +37,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-svelte": "^2.18.0",
     "eslint-plugin-unicorn": "^45.0.2",
+    "fluent-svelte": "^1.6.0",
     "postcss": "^8.4.14",
     "postcss-load-config": "^4.0.1",
     "prettier": "^2.8.4",

pnpm-lock.yaml

@@ -17,6 +17,7 @@ specifiers:
   eslint-plugin-prettier: ^4.2.1
   eslint-plugin-svelte: ^2.18.0
   eslint-plugin-unicorn: ^45.0.2
+  fluent-svelte: ^1.6.0
   idb-keyval: ^6.2.0
   mm-jsr: ^3.0.2
   nanoid: ^4.0.1
@@ -63,6 +64,7 @@ devDependencies:
   eslint-plugin-prettier: 4.2.1_u5wnrdwibbfomslmnramz52buy
   eslint-plugin-svelte: 2.18.0_dbthnr4b2bdkhyiebwn7su3hnq
   eslint-plugin-unicorn: 45.0.2_eslint@8.34.0
+  fluent-svelte: 1.6.0
   postcss: 8.4.21
   postcss-load-config: 4.0.1_postcss@8.4.21
   prettier: 2.8.4
@@ -1444,6 +1446,19 @@ packages:
     resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
     dev: true
 
+  /fluent-svelte/1.6.0:
+    resolution: {integrity: sha512-z+QUvfAzh3t0bpiURO6f2eciZPnPPwl1pZe+sAYM8A8vUDSAHH8D0U4+VT+OHA16PEAd2DYVdPyJqM27ly5lxQ==}
+    dependencies:
+      focus-trap: 6.9.4
+      tabbable: 5.3.3
+    dev: true
+
+  /focus-trap/6.9.4:
+    resolution: {integrity: sha512-v2NTsZe2FF59Y+sDykKY+XjqZ0cPfhq/hikWVL88BqLivnNiEffAsac6rP6H45ff9wG9LL5ToiDqrLEP9GX9mw==}
+    dependencies:
+      tabbable: 5.3.3
+    dev: true
+
   /for-each/0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
     dependencies:
@@ -2881,6 +2896,10 @@ packages:
       util.promisify: 1.0.1
     dev: false
 
+  /tabbable/5.3.3:
+    resolution: {integrity: sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==}
+    dev: true
+
   /tailwindcss/3.2.4_postcss@8.4.21:
     resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==}
     engines: {node: '>=12.13.0'}

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

@@ -4,6 +4,10 @@
     import type { PageData } from "./$types";
     import { add, format, differenceInSeconds, addSeconds } from "date-fns";
     import { page } from "$app/stores";
+    import { onMount } from "svelte";
+    import { slide } from "svelte/transition";
+    import { Slider } from "fluent-svelte";
+    import "fluent-svelte/theme.css";
 
     export let data: PageData;
     $: session = data.session;
@@ -36,6 +40,12 @@
         const col = Math.floor(rat * 63 + 17);
         return col;
     };
+
+    let selectedFileIdx = 0;
+
+    let value = 0;
+    // onMount(() => (value = end.getTime()));
+    // $: sliderDate = new Date(value);
 </script>
 
 <div class="flex flex-col h-full  text-zinc-400">
@@ -65,67 +75,96 @@
     </header>
 
     <!-- main part -->
-    <div class="flex flex-col flex-none max-w-full">
+    <div
+        class="flex flex-col flex-none max-w-full select-none border-b border-zinc-700"
+    >
         <div class="flex flex-col flex-none max-w-full">
             <!-- sticky header -->
             <div
-                class="overflow-hidden sticky top-0 z-30 bg-zinc-800 flex-none shadow shadow-zinc-700 ring-1 ring-zinc-700 ring-opacity-5"
+                class="overflow-hidden sticky top-0 z-30 bg-zinc-800 flex-none shadow shadow-zinc-700 ring-1 ring-zinc-700 ring-opacity-5 mb-1"
             >
-                <div
+                <div class="grid-cols-11 -mr-px text-sm  border-zinc-700  grid">
-                    class="grid-cols-11 -mr-px text-sm leading-6  border-zinc-700  grid"
-                >
                     <div />
                     <div
-                        class="col-span-2 flex items-center justify-center py-3"
+                        class="col-span-2 flex items-center justify-center py-2"
                     >
                         <span>{format(start, "hh:mm")}</span>
                     </div>
                     <div
-                        class="col-span-2 flex items-center justify-center py-3"
+                        class="col-span-2 flex items-center justify-center py-2"
                     >
                         <span>{format(quarter, "hh:mm")}</span>
                     </div>
                     <div
-                        class="col-span-2 flex items-center justify-center py-3"
+                        class="col-span-2 flex items-center justify-center py-2"
                     >
                         <span>{format(midpoint, "hh:mm")}</span>
                     </div>
                     <div
-                        class="col-span-2 flex items-center justify-center py-3"
+                        class="col-span-2 flex items-center justify-center py-2"
                     >
                         <span>{format(threequarters, "hh:mm")}</span>
                     </div>
                     <div
-                        class="col-span-2 flex items-center justify-center py-3"
+                        class="col-span-2 flex items-center justify-center py-2"
                     >
                         <span>{format(end, "hh:mm")}</span>
                     </div>
                 </div>
+                <!-- needle -->
+                <div class="grid grid-cols-11">
+                    <div class="col-span-2 flex items-center justify-center" />
+                    <div class="-mx-1 col-span-8 flex items-center justify-center">
+                        <Slider
+                            min={17}
+                            max={80}
+                            step={1}
+                            bind:value
+                        />
+                    </div>
+                    <div class="col-span-1 flex items-center justify-center" />
+                </div>
             </div>
-            <div class="flex flex-auto">
+            <div class="flex flex-auto mb-1">
-                <!-- <div
-                    class="sticky left-0 z-10 w-14 flex-none ring-1 ring-zinc-700"
-                /> -->
-
                 <div class="grid flex-auto grid-cols-1 grid-rows-1">
                     <!-- file names list -->
                     <div
-                        class="col-start-1 col-end-2 row-start-1 grid divide-y divide-zinc-700/20"
+                        class="bg-col-start-1 col-end-2 row-start-1 grid divide-y divide-zinc-700/20"
                         style="grid-template-rows: repeat({Object.keys($deltas)
                             .length}, minmax(2rem, 1fr));"
                     >
                         <!-- <div class="row-end-1 h-7" /> -->
 
-                        {#each Object.keys($deltas) as filePath}
+                        {#each Object.keys($deltas) as filePath, i}
                             <div
-                                class="flex justify-end items-center  overflow-hidden sticky left-0 z-20   w-1/6 pr-4 text-xs leading-5 text-zinc-300"
+                                class="flex {i == selectedFileIdx
-                                title={filePath}
+                                    ? 'bg-zinc-500/70'
+                                    : ''}"
                             >
-                                {filePath.split("/").pop()}
+                                <button
+                                    class="flex justify-end items-center overflow-hidden sticky left-0 z-20   w-1/6 text-xs leading-5 
+                                    {selectedFileIdx == i
+                                        ? 'text-zinc-200 cursor-default'
+                                        : 'text-zinc-400 hover:text-zinc-200 cursor-pointer'}"
+                                    on:click={() => (selectedFileIdx = i)}
+                                    title={filePath}
+                                >
+                                    {filePath.split("/").pop()}
+                                </button>
                             </div>
                         {/each}
                     </div>
 
+
+                    <div
+                        class="col-start-1 col-end-2 row-start-1 grid"
+                        style="grid-template-columns: repeat(88, minmax(0, 1fr));"
+                    >
+                        <div class="bg-sky-400/60 "
+                        style=" grid-column: {value};"
+                        >
+                        </div>
+                    </div>
                     <!-- time vertical lines -->
                     <div
                         class="col-start-1 col-end-2 row-start-1 grid-rows-1 divide-x divide-zinc-700/50 grid grid-cols-11"
@@ -143,26 +182,24 @@
                         class="col-start-1 col-end-2 row-start-1 grid"
                         style="
                         grid-template-columns: repeat(88, minmax(0, 1fr));
-                        grid-template-rows: 2rem repeat({Object.keys($deltas)
+                        grid-template-rows: repeat({Object.keys($deltas)
                             .length}, minmax(0px, 1fr)) auto;"
                     >
                         {#each Object.entries($deltas) as [filePath, fileDeltas], idx}
                             {#each fileDeltas as delta}
                                 <li
-                                    class="relative mt-px flex items-center"
+                                    class="relative flex items-center bg-zinc-300 hover:bg-zinc-100 rounded m-0.5 cursor-pointer"
                                     style="
                                 grid-row: {idx + 1} / span 1;
                                 grid-column: {timeStampToCol(
                                         new Date(delta.timestampMs)
-                                    )} / span 2;"
+                                    )} / span 1;"
                                 >
                                     <a
                                         href="/"
-                                        class="group absolute inset-1 flex flex-col items-center justify-center rounded bg-zinc-300 p-px text-xs leading-5 hover:bg-zinc-200 shadow"
+                                        class="flex flex-col items-center justify-center  text-xs "
                                     >
-                                        <p
+                                        <p class="font-semibold text-zinc-800">
-                                            class="order-1 font-semibold text-zinc-800"
-                                        >
                                             <!-- foo -->
                                         </p>
                                     </a>