From 06b27db78ec447236247943ccc8a1a9f3063309f Mon Sep 17 00:00:00 2001
From: LukeParkerDev <10430890+Hona@users.noreply.github.com>
Date: Thu, 16 Apr 2026 17:58:00 +1000
Subject: [PATCH] fix: keep sidebar projects stable across WSL refreshes

---
 packages/app/src/pages/layout.tsx               | 15 ++++++++++++---
 packages/app/src/pages/layout/sidebar-shell.tsx |  7 ++++---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/pages/layout.tsx b/packages/app/src/pages/layout.tsx
index f25cadf713..cde86f2c3a 100644
--- a/packages/app/src/pages/layout.tsx
+++ b/packages/app/src/pages/layout.tsx
@@ -2343,6 +2343,7 @@ export default function Layout(props: ParentProps) {
   }
 
   const projects = () => layout.projects.list()
+  const projectIds = createMemo(() => projects().map((project) => project.worktree))
   const projectOverlay = () => <ProjectDragOverlay projects={projects} activeProject={() => store.activeProject} />
   const sidebarContent = (mobile?: boolean) => (
     <SidebarContent
@@ -2350,9 +2351,17 @@ export default function Layout(props: ParentProps) {
       opened={() => layout.sidebar.opened()}
       aimMove={aim.move}
       projects={projects}
-      renderProject={(project) => (
-        <SortableProject ctx={projectSidebarCtx} project={project} sortNow={sortNow} mobile={mobile} />
-      )}
+      projectIds={projectIds}
+      renderProject={(worktree) => {
+        const project = createMemo(() => projects().find((item) => item.worktree === worktree))
+        return (
+          <Show when={project()}>
+            {(project) => (
+              <SortableProject ctx={projectSidebarCtx} project={project()} sortNow={sortNow} mobile={mobile} />
+            )}
+          </Show>
+        )
+      }}
       handleDragStart={handleDragStart}
       handleDragEnd={handleDragEnd}
       handleDragOver={handleDragOver}
diff --git a/packages/app/src/pages/layout/sidebar-shell.tsx b/packages/app/src/pages/layout/sidebar-shell.tsx
index f8f8ea5165..d9cd4d5a20 100644
--- a/packages/app/src/pages/layout/sidebar-shell.tsx
+++ b/packages/app/src/pages/layout/sidebar-shell.tsx
@@ -18,7 +18,8 @@ export const SidebarContent = (props: {
   opened: Accessor<boolean>
   aimMove: (event: MouseEvent) => void
   projects: Accessor<LocalProject[]>
-  renderProject: (project: LocalProject) => JSX.Element
+  projectIds: Accessor<string[]>
+  renderProject: (worktree: string) => JSX.Element
   handleDragStart: (event: unknown) => void
   handleDragEnd: () => void
   handleDragOver: (event: DragEvent) => void
@@ -64,8 +65,8 @@ export const SidebarContent = (props: {
             <DragDropSensors />
             <ConstrainDragXAxis />
             <div class="h-full w-full flex flex-col items-center gap-3 px-3 py-3 overflow-y-auto no-scrollbar">
-              <SortableProvider ids={props.projects().map((p) => projectSortableId(p.worktree))}>
-                <For each={props.projects()}>{(project) => props.renderProject(project)}</For>
+              <SortableProvider ids={props.projectIds().map(projectSortableId)}>
+                <For each={props.projectIds()}>{(worktree) => props.renderProject(worktree)}</For>
               </SortableProvider>
               <Tooltip
                 placement={placement()}