From cfb695d592cc9d78b15e52bb55de0b18b00d4428 Mon Sep 17 00:00:00 2001
From: Alexis Sellier <self@cloudhead.io>
Date: Fri, 25 Feb 2022 16:56:33 +0100
Subject: [PATCH] Show which line is highlighted

Signed-off-by: Alexis Sellier <self@cloudhead.io>
---
 src/base/projects/Blob.svelte         | 11 +++++++----
 src/base/projects/Browser.svelte      |  2 +-
 src/base/projects/ProjectRoute.svelte |  8 +++++---
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/base/projects/Blob.svelte b/src/base/projects/Blob.svelte
index d124da9b8..85ec645c4 100644
--- a/src/base/projects/Blob.svelte
+++ b/src/base/projects/Blob.svelte
@@ -7,7 +7,7 @@
 
   const lastCommit = blob.info.lastCommit;
   const lines = blob.binary ? 0 : (blob.content.match(/\n/g) || []).length;
-  const lineNumbers = Array(lines).fill(0).map((_, index) => (index + 1).toString());
+  const lineNumbers = Array(lines).fill(0).map((_, index) => index + 1);
   const parentDir = blob.path.match(/^.*\/|/)?.values().next().value;
 
   // Waiting onMount, due to the line numbers still loading.
@@ -66,8 +66,8 @@
   .line-number {
     display: block;
   }
-  .line-number:hover {
-    color: var(--color-foreground);
+  .line-number:hover, .line-number.highlighted {
+    color: var(--color-foreground-90);
   }
 
   .code {
@@ -133,7 +133,10 @@
       {:else}
         <pre class="line-numbers">
           {#each lineNumbers as lineNumber}
-            <a href="#L{lineNumber}" class="line-number" id="L{lineNumber}">{lineNumber}</a>
+            <a href="#L{lineNumber}"
+               class="line-number"
+               class:highlighted={lineNumber === line}
+               id="L{lineNumber}">{lineNumber}</a>
           {/each}
         </pre>
         <pre
diff --git a/src/base/projects/Browser.svelte b/src/base/projects/Browser.svelte
index b8db6c8dc..03733b731 100644
--- a/src/base/projects/Browser.svelte
+++ b/src/base/projects/Browser.svelte
@@ -57,7 +57,7 @@
     mobileFileTree = false;
 
     if (path) {
-      project.navigateTo({ path: newPath, revision });
+      project.navigateTo({ path: newPath, revision, line: null });
     }
   };
 
diff --git a/src/base/projects/ProjectRoute.svelte b/src/base/projects/ProjectRoute.svelte
index c0167aa0b..c5ee4b2ba 100644
--- a/src/base/projects/ProjectRoute.svelte
+++ b/src/base/projects/ProjectRoute.svelte
@@ -15,11 +15,13 @@
   export let config: Config;
   export let hash: string | null = null;
 
-  const line = formatLocationHash(hash);
-  const browse: proj.BrowseTo = { content, peer, path: "/", line };
+  const browse: proj.BrowseTo = { content, peer, path: "/" };
   const head = project.branches[project.defaultBranch];
 
-  // route is passed when the URL has more params after e.g. /tree or /history
+  // If line-number hash changes, we update the browser.
+  $: browse.line = formatLocationHash(hash);
+
+  // `route` includes any unmatched path segments.
   $: if (route) {
     const { path, revision } = proj.parseRoute(route, project.branches);