Expand All Repos section when navigating to a repo

When we land on a repo via notification inbox the repository wouldn't be
visible if the section was collapsed. Now we expand it and scroll into
view so we see which repository we're browsing.

src/components/NotificationTeaser.svelte

@@ -24,6 +24,7 @@
   import InlineTitle from "@app/components/InlineTitle.svelte";
   import NodeId from "@app/components/NodeId.svelte";
   import { closeFocused } from "@app/components/Popover.svelte";
+  import { revealRepoInSidebar } from "@app/components/SidebarRepoList.svelte";
 
   interface Props {
     rid: string;
@@ -181,6 +182,7 @@
   class="notification-teaser"
   onclick={() => {
     if (route) {
+      revealRepoInSidebar(rid);
       void push(route);
       closeFocused();
     }

src/components/SidebarRepoList.svelte

@@ -1,3 +1,41 @@
+<script lang="ts" module>
+  import { array, boolean, string } from "zod";
+
+  import useLocalStorage from "@app/lib/useLocalStorage.svelte";
+
+  let filterOpen = $state(false);
+  let filterQuery = $state("");
+
+  const reposExpanded = useLocalStorage(
+    "sidebarReposExpanded",
+    boolean(),
+    true,
+    !window.localStorage,
+  );
+
+  const pinnedRepoIds = useLocalStorage(
+    "sidebarPinnedRepos",
+    array(string()),
+    [],
+    !window.localStorage,
+  );
+
+  export function revealRepoInSidebar(rid: string) {
+    if (pinnedRepoIds.value.includes(rid)) return;
+
+    filterQuery = "";
+    filterOpen = false;
+    reposExpanded.value = true;
+
+    requestAnimationFrame(() => {
+      const row = document.querySelector(
+        `[data-unpinned-rid="${CSS.escape(rid)}"]`,
+      );
+      row?.scrollIntoView({ block: "nearest" });
+    });
+  }
+</script>
+
 <script lang="ts">
   import type { RepoInfo } from "@bindings/repo/RepoInfo";
   import type { RepoSummary } from "@bindings/repo/RepoSummary";
@@ -5,13 +43,11 @@
   import { onMount } from "svelte";
   import { flip } from "svelte/animate";
   import { crossfade } from "svelte/transition";
-  import { array, boolean, string } from "zod";
 
   import { nodeRunning } from "@app/lib/events";
   import { dynamicInterval, resetDynamicInterval } from "@app/lib/interval";
   import { cachedRepoCommitCount, invoke } from "@app/lib/invoke";
   import * as router from "@app/lib/router";
-  import useLocalStorage from "@app/lib/useLocalStorage.svelte";
   import { formatRepositoryId } from "@app/lib/utils";
 
   import AddRepoButton from "@app/components/AddRepoButton.svelte";
@@ -39,8 +75,6 @@
   let repos: RepoSummary[] = $derived(initialRepos);
   let seededNotReplicated: string[] = $derived(initialSeededNotReplicated);
   let activeCommitCount = $state<number | undefined>(undefined);
-  let filterOpen = $state(false);
-  let filterQuery = $state("");
   let filterInputElement: HTMLInputElement | undefined = $state(undefined);
 
   $effect(() => {
@@ -88,13 +122,6 @@
       : repos,
   );
 
-  const reposExpanded = useLocalStorage(
-    "sidebarReposExpanded",
-    boolean(),
-    true,
-    !window.localStorage,
-  );
-
   const fetchingExpanded = useLocalStorage(
     "sidebarFetchingExpanded",
     boolean(),
@@ -102,13 +129,6 @@
     !window.localStorage,
   );
 
-  const pinnedRepoIds = useLocalStorage(
-    "sidebarPinnedRepos",
-    array(string()),
-    [],
-    !window.localStorage,
-  );
-
   const pinnedRepos = $derived.by(() => {
     const byRid = new Map(repos.map(r => [r.rid, r]));
     return pinnedRepoIds.value
@@ -656,6 +676,7 @@
       {#each unpinnedFilteredRepos as repo (repo.rid)}
         <div
           class="repo-row-group"
+          data-unpinned-rid={repo.rid}
           animate:flip={{ duration: animationDuration }}
           in:receive={{ key: repo.rid, duration: animationDuration }}
           out:send={{ key: repo.rid, duration: animationDuration }}>