fix: resolve sidebar stale state after worktree, folder, project, and session mutations (#1038)

* fix: update sidebar store after worktree creation

* fix: update sidebar store after worktree removal

* fix: update sidebar store with correct key in removeProjectWorktree

- Fixed key mismatch in sidebar store updates for worktree removal
- Removed worktrees now properly disappear from sidebar
- Aligned remove path with create path key resolution

* fix: resolve sidebar stale state after folder, worktree, project, and session mutations

* fix: now builds

* Fix worktree sidebar store key

---------

Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
This commit is contained in:
Islam Nofl
2026-04-27 13:42:52 +03:00
committed by GitHub
co-authored by Bohdan Triapitsyn
parent b62faadd15
commit 8fdc1e7e55
8 changed files with 94 additions and 18 deletions
@@ -407,7 +407,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
return () => {
cancelled = true;
};
}, [currentDirectory, syncSessionStructureSignature]);
}, [currentDirectory, syncSessionStructureSignature, projects]);
React.useEffect(() => {
let refreshTimeout: ReturnType<typeof setTimeout> | null = null;
@@ -922,7 +922,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
normalizedSessionSearchQuery,
filterSessionNodesForSearch,
buildGroupSearchText,
getFoldersForScope,
foldersMap,
});
const searchEmptyState = (
@@ -1355,7 +1355,6 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
expandedSessionGroups={expandedSessionGroups}
collapsedGroups={collapsedGroups}
hideDirectoryControls={hideDirectoryControls}
getFoldersForScope={getFoldersForScope}
collapsedFolderIds={collapsedFolderIds}
toggleFolderCollapse={toggleFolderCollapse}
renameFolder={renameFolder}
@@ -1393,7 +1392,6 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
expandedSessionGroups,
collapsedGroups,
hideDirectoryControls,
getFoldersForScope,
collapsedFolderIds,
toggleFolderCollapse,
renameFolder,
@@ -19,6 +19,7 @@ import type { SortableDragHandleProps } from './sortableItems';
import type { GroupSearchData, SessionGroup, SessionNode } from './types';
import { compareSessionsByPinnedAndTime, isBranchDifferentFromLabel, normalizePath, renderHighlightedText } from './utils';
import type { SessionFolder } from '@/stores/useSessionFoldersStore';
import { useSessionFoldersStore } from '@/stores/useSessionFoldersStore';
import { useSessionDisplayStore } from '@/stores/useSessionDisplayStore';
import { openExternalUrl } from '@/lib/url';
import { useI18n } from '@/lib/i18n';
@@ -42,7 +43,6 @@ type Props = {
expandedSessionGroups: Set<string>;
collapsedGroups: Set<string>;
hideDirectoryControls: boolean;
getFoldersForScope: (scopeKey: string) => SessionFolder[];
collapsedFolderIds: Set<string>;
toggleFolderCollapse: (folderId: string) => void;
renameFolder: (scopeKey: string, folderId: string, name: string) => void;
@@ -109,7 +109,6 @@ export function SessionGroupSection(props: Props): React.ReactNode {
expandedSessionGroups,
collapsedGroups,
hideDirectoryControls,
getFoldersForScope,
collapsedFolderIds,
toggleFolderCollapse,
renameFolder,
@@ -153,6 +152,7 @@ export function SessionGroupSection(props: Props): React.ReactNode {
const searchData = hasSessionSearchQuery ? groupSearchDataByGroup.get(group) : null;
const displayMode = useSessionDisplayStore((state) => state.displayMode);
const foldersMap = useSessionFoldersStore((state) => state.foldersMap);
const isMinimalMode = displayMode === 'minimal';
const isExpanded = expandedSessionGroups.has(groupKey);
const isCollapsed = hasSessionSearchQuery ? false : collapsedGroups.has(groupKey);
@@ -166,8 +166,8 @@ export function SessionGroupSection(props: Props): React.ReactNode {
);
const folderScopeKey = group.folderScopeKey ?? normalizePath(group.directory ?? null);
const scopeFolders = React.useMemo(
() => folderScopeKey ? getFoldersForScope(folderScopeKey) : [],
[folderScopeKey, getFoldersForScope]
() => folderScopeKey ? (foldersMap[folderScopeKey] ?? []) : [],
[folderScopeKey, foldersMap]
);
const nodeBySessionId = React.useMemo(() => {
@@ -208,6 +208,7 @@ const areEqual = (prev: Props, next: Props): boolean => {
if ((prev.secondaryMeta?.branchLabel ?? null) !== (next.secondaryMeta?.branchLabel ?? null)) return false;
if (prev.mobileVariant !== next.mobileVariant) return false;
if ((prev.renderContext ?? 'project') !== (next.renderContext ?? 'project')) return false;
if (prev.renamingFolderId !== next.renamingFolderId) return false;
return true;
};
@@ -3,6 +3,7 @@ import type { Session } from '@opencode-ai/sdk/v2';
import type { SessionGroup, SessionNode, GroupSearchData } from '../types';
import { dedupeSessionsById, normalizePath } from '../utils';
import type { WorktreeMetadata } from '@/types/worktree';
import type { SessionFoldersMap } from '@/stores/useSessionFoldersStore';
type ProjectItem = {
id: string;
@@ -39,7 +40,7 @@ type Args = {
normalizedSessionSearchQuery: string;
filterSessionNodesForSearch: (nodes: SessionNode[], query: string) => SessionNode[];
buildGroupSearchText: (group: SessionGroup) => string;
getFoldersForScope: (scopeKey: string) => Array<{ name: string }>;
foldersMap: SessionFoldersMap;
};
export const useSessionSidebarSections = (args: Args) => {
@@ -56,7 +57,7 @@ export const useSessionSidebarSections = (args: Args) => {
normalizedSessionSearchQuery,
filterSessionNodesForSearch,
buildGroupSearchText,
getFoldersForScope,
foldersMap,
} = args;
const projectSections = React.useMemo<ProjectSection[]>(() => {
@@ -107,9 +108,8 @@ export const useSessionSidebarSections = (args: Args) => {
const matchedSessionCount = countNodes(filteredNodes);
const groupMatches = buildGroupSearchText(group).includes(normalizedSessionSearchQuery);
const scopeKey = normalizePath(group.directory ?? null);
const folderNameMatchCount = scopeKey
? getFoldersForScope(scopeKey).filter((folder) => folder.name.toLowerCase().includes(normalizedSessionSearchQuery)).length
: 0;
const scopeFolders = scopeKey ? (foldersMap[scopeKey] ?? []) : [];
const folderNameMatchCount = scopeFolders.filter((folder) => folder.name.toLowerCase().includes(normalizedSessionSearchQuery)).length;
result.set(group, {
filteredNodes,
@@ -128,7 +128,7 @@ export const useSessionSidebarSections = (args: Args) => {
filterSessionNodesForSearch,
normalizedSessionSearchQuery,
buildGroupSearchText,
getFoldersForScope,
foldersMap,
]);
const searchableProjectSections = React.useMemo(() => {
@@ -13,6 +13,7 @@ import type {
CreateGitWorktreePayload,
GitWorktreeValidationResult,
} from '@/lib/api/types';
import { useSessionUIStore } from '@/sync/session-ui-store';
type WorktreeListEntry = {
path?: string;
@@ -316,6 +317,17 @@ export async function createWorktree(project: ProjectRef, args: CreateWorktreeAr
_worktreeListCache.delete(projectDirectory);
// Update sidebar store so new worktree appears immediately
const sidebarProjectKey = projectDirectory;
const currentByProject = useSessionUIStore.getState().availableWorktreesByProject;
const updatedByProject = new Map(currentByProject);
const existing = updatedByProject.get(sidebarProjectKey) ?? [];
updatedByProject.set(sidebarProjectKey, [...existing, metadata]);
useSessionUIStore.setState({
availableWorktreesByProject: updatedByProject,
availableWorktrees: [...useSessionUIStore.getState().availableWorktrees, metadata],
});
return metadata;
}
@@ -330,7 +342,7 @@ export async function removeProjectWorktree(project: ProjectRef, worktree: Workt
deleteLocalBranch?: boolean;
remoteName?: string;
}): Promise<void> {
const projectDirectory = project.path;
const projectDirectory = normalizePath(project.path);
const deleteRemote = Boolean(options?.deleteRemoteBranch);
const deleteLocalBranch = options?.deleteLocalBranch === true;
@@ -347,6 +359,34 @@ export async function removeProjectWorktree(project: ProjectRef, worktree: Workt
_worktreeListCache.delete(normalizePath(project.path));
// Update sidebar store so removed worktree disappears immediately
const normalizedWorktreePath = normalizePath(worktree.path);
const sidebarProjectKey = projectDirectory;
const currentByProject = useSessionUIStore.getState().availableWorktreesByProject;
const updatedByProject = new Map(currentByProject);
const projectWorktrees = updatedByProject.get(sidebarProjectKey) ?? [];
updatedByProject.set(
sidebarProjectKey,
projectWorktrees.filter((w) => normalizePath(w.path) !== normalizedWorktreePath),
);
// Clean up worktreeMetadata for sessions in the removed worktree
const currentMetadata = useSessionUIStore.getState().worktreeMetadata;
const updatedMetadata = new Map(currentMetadata);
for (const [sid, meta] of currentMetadata.entries()) {
if (meta && normalizePath(meta.path) === normalizedWorktreePath) {
updatedMetadata.delete(sid);
}
}
useSessionUIStore.setState({
availableWorktreesByProject: updatedByProject,
availableWorktrees: useSessionUIStore.getState().availableWorktrees.filter(
(w) => normalizePath(w.path) !== normalizedWorktreePath,
),
worktreeMetadata: updatedMetadata,
});
const branchName = (worktree.branch || '').replace(/^refs\/heads\//, '').trim();
if (deleteRemote && branchName) {
await deleteRemoteBranch(projectDirectory, { branch: branchName, remote: remoteName }).catch(() => undefined);
@@ -9,6 +9,7 @@ import { getSafeStorage } from './utils/safeStorage';
import { useDirectoryStore } from './useDirectoryStore';
import { streamDebugEnabled } from '@/stores/utils/streamDebug';
import { PROJECT_COLORS } from '@/lib/projectMeta';
import { useSessionUIStore } from '@/sync/session-ui-store';
/** Pick a color key that's least used among existing projects */
const pickAutoColor = (projects: ProjectEntry[]): string => {
@@ -399,6 +400,7 @@ export const useProjectsStore = create<ProjectsStore>()(
return;
}
const current = get();
const project = current.projects.find((p) => p.id === id);
const nextProjects = current.projects.filter((project) => project.id !== id);
let nextActiveId = current.activeProjectId;
@@ -409,6 +411,16 @@ export const useProjectsStore = create<ProjectsStore>()(
set({ projects: nextProjects, activeProjectId: nextActiveId });
persistProjects(nextProjects, nextActiveId);
// Clean up worktree entries for the removed project
if (project) {
const normalizedPath = project.path.replace(/\\/g, '/').replace(/\/+$/, '') || '/';
useSessionUIStore.setState((s) => {
const next = new Map(s.availableWorktreesByProject);
next.delete(normalizedPath);
return { availableWorktreesByProject: next };
});
}
if (nextActiveId) {
const nextActive = nextProjects.find((project) => project.id === nextActiveId);
if (nextActive) {
@@ -14,7 +14,7 @@ export interface SessionFolder {
parentId?: string | null;
}
type SessionFoldersMap = Record<string, SessionFolder[]>;
export type SessionFoldersMap = Record<string, SessionFolder[]>;
interface SessionFoldersState {
foldersMap: SessionFoldersMap;
+27 -2
View File
@@ -213,7 +213,26 @@ function optimisticRemoveSession(sessionId: string, directory?: string): Session
export async function deleteSession(sessionId: string, _options?: Record<string, unknown>): Promise<boolean> {
const sessionDirectory = getSessionDirectory(sessionId)
// Remove from UI immediately, rollback on error
const snapshot = optimisticRemoveSession(sessionId, sessionDirectory)
let snapshot = optimisticRemoveSession(sessionId, sessionDirectory)
let removedFromDir: string | null = snapshot ? (sessionDirectory ?? null) : null
// If the session wasn't in the resolved directory (e.g. archived session
// whose original child store was disposed), search all child stores.
if (!snapshot && _childStores) {
for (const [dir, store] of _childStores.children.entries()) {
const current = store.getState()
const sessions = [...current.session]
const result = Binary.search(sessions, sessionId, (s) => s.id)
if (result.found) {
snapshot = current.session
sessions.splice(result.index, 1)
store.setState({ session: sessions })
removedFromDir = dir
break
}
}
}
const ui = useSessionUIStore.getState()
if (ui.currentSessionId === sessionId) {
ui.setCurrentSession(null)
@@ -224,7 +243,13 @@ export async function deleteSession(sessionId: string, _options?: Record<string,
return true
} catch (error) {
console.error("[session-actions] deleteSession failed", error)
if (snapshot) getDirectoryStore(sessionDirectory).setState({ session: snapshot })
if (snapshot && removedFromDir) {
try {
getDirectoryStore(removedFromDir).setState({ session: snapshot })
} catch {
// child store may have been disposed since — ignore rollback
}
}
return false
}
}