Persist sidebar across navigations to preserve scroll position — radicle-desktop

Move AppSidebar out of per-route view components into App.svelte so it is never unmounted on navigation. This fixes the sidebar scroll position resetting to the top whenever the user opens a repository or navigates between Issues, Patches and the repo home view.

Also removes the redundant invoke(“config”) call from each repo route loader — the value is now taken from sidebarData.config, which loadSidebarData() already fetches.

👉 Workflow runs 👉 Branch on GitHub

   </head>
   <body>
     <div
       id="loading"
       style="
         position: fixed;
         inset: 0;
         z-index: 999;
         display: flex;
         justify-content: center;
         align-items: center;
         background-color: var(--color-surface-base);
         color: var(--color-text-primary);
       ">
       <svg width="52" height="52" viewBox="0 0 16 16" fill="currentColor">
         <path
           d="M16 12H8V4H16V12ZM12 5.36035C10.542 5.36037 9.36035 6.54296 9.36035 8.00098C9.36051 9.45886 10.5421 10.6406 12 10.6406C13.4579 10.6406 14.6395 9.45887 14.6396 8.00098C14.6396 6.54294 13.458 5.36035 12 5.36035Z" />
         <path
           d="M1.87988 8.00012C1.87988 6.82928 2.82903 5.88013 3.99988 5.88013C5.17072 5.88013 6.11987 6.82928 6.11987 8.00012C6.11987 9.17097 5.17072 10.1201 3.99988 10.1201C2.82903 10.1201 1.87988 9.17097 1.87988 8.00012Z" />
       </svg>
     </div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

 <script lang="ts">
   import type { Config } from "@bindings/config/Config";
   import type { ErrorWrapper } from "@bindings/error/ErrorWrapper";
   import type { RepoInfo } from "@bindings/repo/RepoInfo";
   import { listen } from "@tauri-apps/api/event";
   import { getCurrentWindow } from "@tauri-apps/api/window";
   import delay from "lodash/delay";
   import { onDestroy, onMount } from "svelte";
   import { get } from "svelte/store";

   import { invoke } from "@app/lib/invoke";
   import { hide } from "@app/lib/modal";
   import * as router from "@app/lib/router";
   import { isLoadedRepoRoute } from "@app/lib/router/definitions";
   import {
     setUnlistenNodeEvents,
     unlistenNodeEvents,
   } from "@app/lib/startup.svelte";
   import { isMac, unreachable } from "@app/lib/utils";
   import AppSidebar from "@app/components/AppSidebar.svelte";
   import { codeFont } from "@app/components/CodeFontSwitch.svelte";
   import {
     followSystemTheme,

   import ExternalLink from "./components/ExternalLink.svelte";
   import FullscreenModalPortal from "./components/FullscreenModalPortal.svelte";
   import FullWindowError from "./components/FullWindowError.svelte";
   import Spinner from "./components/Spinner.svelte";
   const activeRouteStore = router.activeRouteStore;
   const activeRepo = $derived.by((): RepoInfo | undefined => {
     const route = $activeRouteStore;
     return isLoadedRepoRoute(route) ? route.params.repo : undefined;
   });
   const DRAG_REGION_HEIGHT = 32;
   const INTERACTIVE_TAGS = new Set([
     "a",

   let profile = $state<Config>();
   let showSpinner = $state(false);
   delay(() => (showSpinner = true), 1000);
   $effect(() => {
     if ($activeRouteStore.resource !== "booting" || startup.error) {
       document.getElementById("loading")?.remove();
     }
   });
   onMount(async () => {
     try {

 </script>
 <style>
   .spinner {
     display: flex;
     justify-content: center;
     align-items: center;
   .layout {
     display: grid;
     grid-template-columns: auto 1fr;
     grid-template-rows: 100%;
     height: 100%;
     overflow: hidden;
   }
 </style>

         <Command styleWidth="30rem" command="rad cob migrate" />
       </div>
     </FullWindowError>
   {:else if showSpinner}
     <div class="spinner"><Spinner /></div>
   {/if}
 {:else if $activeRouteStore.resource === "inbox"}
   <InboxView {...$activeRouteStore.params} />
 {:else if $activeRouteStore.resource === "guide"}
   <GuideView {...$activeRouteStore.params} />
 {:else if $activeRouteStore.resource === "repo.home"}
   <RepoHome {...$activeRouteStore.params} />
 {:else if $activeRouteStore.resource === "repo.issue"}
   <Issue {...$activeRouteStore.params} />
 {:else if $activeRouteStore.resource === "repo.issues"}
   <Issues {...$activeRouteStore.params} />
 {:else if $activeRouteStore.resource === "repo.patch"}
   <Patch {...$activeRouteStore.params} />
 {:else if $activeRouteStore.resource === "repo.patches"}
   <Patches {...$activeRouteStore.params} />
 {:else}
   {unreachable($activeRouteStore)}
   <div class="layout">
     <AppSidebar
       sidebarData={$activeRouteStore.params.sidebarData}
       {activeRepo} />
     {#if $activeRouteStore.resource === "inbox"}
       <InboxView {...$activeRouteStore.params} />
     {:else if $activeRouteStore.resource === "guide"}
       <GuideView {...$activeRouteStore.params} />
     {:else if $activeRouteStore.resource === "repo.home"}
       <RepoHome {...$activeRouteStore.params} />
     {:else if $activeRouteStore.resource === "repo.issue"}
       <Issue {...$activeRouteStore.params} />
     {:else if $activeRouteStore.resource === "repo.issues"}
       <Issues {...$activeRouteStore.params} />
     {:else if $activeRouteStore.resource === "repo.patch"}
       <Patch {...$activeRouteStore.params} />
     {:else if $activeRouteStore.resource === "repo.patches"}
       <Patches {...$activeRouteStore.params} />
     {:else}
       {unreachable($activeRouteStore)}
     {/if}
   </div>
 {/if}

   | LoadedInboxRoute
   | LoadedGuideRoute;
 export function isLoadedRepoRoute(
   route: LoadedRoute,
 ): route is LoadedRepoRoute {
   return (
     route.resource === "repo.home" ||
     route.resource === "repo.issue" ||
     route.resource === "repo.issues" ||
     route.resource === "repo.patch" ||
     route.resource === "repo.patches"
   );
 }
 export async function loadSidebarData(): Promise<SidebarData> {
   const [config, repos, notificationCount, seededNotReplicated] =
     await Promise.all([

   }
 </style>
 <Layout {sidebarData}>
 <Layout>
   <div class="page">
     <div class="hero">
       <img src="/flower.png" alt="" />

   }
 </style>
 <Layout {sidebarData} selfScroll>
 <Layout selfScroll>
   {#if notificationCount.value === 0}
     <div class="inbox-zero">
       <div

   import { show } from "@app/lib/modal";
   import * as roles from "@app/lib/roles";
   import * as router from "@app/lib/router";
   import type { SidebarData } from "@app/lib/router/definitions";
   import {
     explorerUrl,
     issueStatusBackgroundColor,

     config: Config;
     threads: Thread[];
     status: IssueStatus;
     sidebarData: SidebarData;
   }
   /* eslint-disable prefer-const */

     config,
     threads,
     status: initialStatus,
     sidebarData,
   }: Props = $props();
   /* eslint-enable prefer-const */

     repo: RepoInfo;
     issues: Issue[];
     status: IssueStatus;
     sidebarData: SidebarData;
   }
   /* eslint-disable prefer-const */
   let { repo, issues, status, sidebarData }: Props = $props();
   let { repo, issues, status }: Props = $props();
   /* eslint-enable prefer-const */
   let cacheState: CacheEvent | undefined = $state();

 <script lang="ts">
   import type { RepoInfo } from "@bindings/repo/RepoInfo";
   import type { Snippet } from "svelte";
   import type { SidebarData } from "@app/lib/router/definitions";
   import AppSidebar from "@app/components/AppSidebar.svelte";
   import ScrollArea from "@app/components/ScrollArea.svelte";
   interface Props {
     children: Snippet;
     sidebarData: SidebarData;
     activeRepo?: RepoInfo;
     loadMoreContent?: () => Promise<void>;
     selfScroll?: boolean;
   }
   const {
     children,
     sidebarData,
     activeRepo = undefined,
     loadMoreContent = undefined,
     selfScroll = false,
   }: Props = $props();

   let loadingContent = false;
 </script>
 <style>
   .layout {
     display: grid;
     grid-template-columns: auto 1fr;
     grid-template-rows: 100%;
     height: 100%;
     overflow: hidden;
   }
 </style>
 <div class="layout">
   <AppSidebar {sidebarData} {activeRepo} />
   {#if selfScroll}
     <div
       style="height: 100%; overflow: hidden; min-width: 0; background-color: var(--color-surface-canvas);">
       {@render children()}
     </div>
   {:else}
     <ScrollArea
       style="height: 100%; width: 100%; background-color: var(--color-surface-canvas);"
       onScrollHalf={loadMoreContent
         ? () => {
             if (!loadingContent) {
               loadingContent = true;
               void loadMoreContent().finally(() => (loadingContent = false));
             }
 {#if selfScroll}
   <div
     style="height: 100%; overflow: hidden; min-width: 0; background-color: var(--color-surface-canvas);">
     {@render children()}
   </div>
 {:else}
   <ScrollArea
     style="height: 100%; width: 100%; background-color: var(--color-surface-canvas);"
     onScrollHalf={loadMoreContent
       ? () => {
           if (!loadingContent) {
             loadingContent = true;
             void loadMoreContent().finally(() => (loadingContent = false));
           }
         : undefined}>
       {@render children()}
     </ScrollArea>
   {/if}
 </div>
         }
       : undefined}>
     {@render children()}
   </ScrollArea>
 {/if}

     activity: Operation<Action>[];
     status: PatchStatus | undefined;
     review: Review | DraftReview | undefined;
     sidebarData: SidebarData;
   }
   /* eslint-disable prefer-const */

   }
 </style>
 <Layout {sidebarData} activeRepo={repo}>
 <Layout>
   {#if review}
     <ReviewComponent
       {config}

     updatePatchCounts,
   } from "@app/lib/patchCounts.svelte";
   import * as router from "@app/lib/router";
   import type { SidebarData } from "@app/lib/router/definitions";
   import { modifierKey } from "@app/lib/utils";
   import CobCacheWarning from "@app/components/CobCacheWarning.svelte";

     repo: RepoInfo;
     patches: PaginatedQuery<Patch[]>;
     status: PatchStatus | undefined;
     sidebarData: SidebarData;
   }
   const { repo, patches, status, sidebarData }: Props = $props();
   const { repo, patches, status }: Props = $props();
   let items = $state(patches.content);
   let cursor = patches.cursor;

   import { useOverlayScrollbars } from "overlayscrollbars-svelte";
   import { invoke, InvokeError } from "@app/lib/invoke";
   import type { SidebarData } from "@app/lib/router/definitions";
   import { highlight } from "@app/lib/syntax";
   import FileBlock from "@app/components/FileBlock.svelte";

     tree: Tree;
     repo: RepoInfo;
     readme: Readme | null;
     sidebarData: SidebarData;
   }
   /* eslint-disable prefer-const */
   let { tree, readme, repo, sidebarData }: Props = $props();
   let { tree, readme, repo }: Props = $props();
   /* eslint-enable prefer-const */
   let currentPath = $state("");

   }
 </style>
 <Layout {sidebarData} activeRepo={repo} selfScroll>
 <Layout selfScroll>
   <div
     class="content"
     style:display="flex"

 export async function loadPatch(
   route: RepoPatchRoute,
 ): Promise<LoadedRepoPatchRoute> {
   const [sidebarData, config, repo, patches, patch, revisions, activity] =
   const [sidebarData, repo, patches, patch, revisions, activity] =
     await Promise.all([
       loadSidebarData(),
       invoke<Config>("config"),
       invoke<RepoInfo>("repo_by_id", {
         rid: route.rid,
       }),

       }),
     ]);
   const config = sidebarData.config;
   const draftReview =
     route.reviewId !== undefined &&
     draftReviewStorage.get(route.reviewId, {

 export async function loadPatches(
   route: RepoPatchesRoute,
 ): Promise<LoadedRepoPatchesRoute> {
   const [sidebarData, config, repo, patches] = await Promise.all([
   const [sidebarData, repo, patches] = await Promise.all([
     loadSidebarData(),
     invoke<Config>("config"),
     invoke<RepoInfo>("repo_by_id", {
       rid: route.rid,
     }),

   return {
     resource: "repo.patches",
     params: { sidebarData, repo, config, patches, status: route.status },
     params: { sidebarData, repo, patches, status: route.status },
   };
 }
 export async function loadRepoHome(
   route: RepoHomeRoute,
 ): Promise<LoadedRepoHomeRoute> {
   const [sidebarData, config, repo, readme, tree] = await Promise.all([
   const [sidebarData, repo, readme, tree] = await Promise.all([
     loadSidebarData(),
     invoke<Config>("config"),
     invoke<RepoInfo>("repo_by_id", {
       rid: route.rid,
     }),

   return {
     resource: "repo.home",
     params: { sidebarData, repo, sha: route.sha, config, readme, tree },
     params: { sidebarData, repo, sha: route.sha, readme, tree },
   };
 }
 export async function loadIssue(
   route: RepoIssueRoute,
 ): Promise<LoadedRepoIssueRoute> {
   const [sidebarData, config, repo, issue, activity, issues, threads] =
   const [sidebarData, repo, issue, activity, issues, threads] =
     await Promise.all([
       loadSidebarData(),
       invoke<Config>("config"),
       invoke<RepoInfo>("repo_by_id", {
         rid: route.rid,
       }),

 export async function loadIssues(
   route: RepoIssuesRoute,
 ): Promise<LoadedRepoIssuesRoute> {
   const [sidebarData, config, repo, issues] = await Promise.all([
   const [sidebarData, repo, issues] = await Promise.all([
     loadSidebarData(),
     invoke<Config>("config"),
     invoke<RepoInfo>("repo_by_id", {
       rid: route.rid,
     }),

   return {
     resource: "repo.issues",
     params: { sidebarData, repo, config, issues, status: route.status },
     params: { sidebarData, repo, issues, status: route.status },
   };
 }