BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(session-folders): folder organization, sub-folders, delete confirmations, and UX improvements (#469)

Browse Source 
* feat(session-folders): drag-to-folder DnD, sort by activity, and UX improvements

- Add DraggableSessionRow wrapping each session row so the whole row is
  draggable; stopPropagation prevents outer group-reorder DnD from firing
- Add DroppableFolderWrapper + SessionFolderDndScope (inner DndContext
  scoped per group) with closestCenter collision detection
- DragOverlay matches exact width/height of dragged row so cursor stays
  aligned
- Folder header highlights (ring + primary colour) when a session hovers
  over it during drag
- + button on folder header opens a dropdown: 'New session' / 'New folder'
- + button on each folder row creates a session scoped to that folder
- Empty folders are no longer auto-deleted (removed .filter(sessionIds.length>0)
  from addSessionToFolder / removeSessionFromFolder / cleanupSessions)
- Sessions inside a folder are sorted by most-recent activity (same
  compareSessionsByPinnedAndTime logic used everywhere else)
- Sort comparator now takes sessionAttentionStates so lastUserMessageAt /
  lastStatusChangeAt is used when newer than session.time.updated; all
  sort call-sites and their useMemo/useCallback deps updated accordingly
- Remove foldersMap from cleanup effect deps to prevent cascade re-renders
  when folders change; read current value via getState() instead

* fix(session-folders): new session is placed into the correct folder

sendMessage() was calling useSessionManagementStore.createSession()
directly, bypassing the targetFolderId logic in useSessionStore.createSession.

Fix: read targetFolderId from draft at the top of the draft branch in
sendMessage, then call addSessionToFolder immediately after the session
is created and before the draft is closed. Also propagate targetFolderId
through openNewSessionDraft options and NewSessionDraftState type.

* feat(session-folders): add sub-folder support (one level deep)

- SessionFolder gains optional parentId field for hierarchy
- createFolder accepts parentId to create sub-folders
- deleteFolder cascades to remove all child sub-folders
- SessionFolderItem renders sub-folders before sessions in body;
  new sub-folder button (RiFolderAddLine) visible at depth 0 only
- renderOneFolderItem in SessionSidebar builds the tree recursively;
  sub-folders are indented via depth prop (ml-3 on root's children)
- Persist/hydrate parentId correctly from localStorage

* feat(session): add delete confirm dialogs and improve subtitle UX

- Add confirmation dialogs before deleting sessions or folders
- Show relative time (e.g., '2h ago', '35min ago') for recent sessions
- Replace +/- diff numbers with file change count (e.g., '3 files changed')
- New folders use default name without forcing rename
- Cleaner, less cluttered session list UI

* fix(session-folders): skip folder cleanup while sessions are loading

Prevents race condition on reload where cleanupSessions() runs before
the server returns the full session list, causing folder-session
assignments to be incorrectly wiped from localStorage.
This commit is contained in:
Nguyễn Ngô Thượng
2026-02-22 22:56:38 +02:00
committed by GitHub
parent 107e19a0dd
commit 5fc4feee42
5 changed files with 618 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/stores/types/sessionTypes.ts
+2 -1
View File
@@ -119,6 +119,7 @@ export type NewSessionDraftState = {
initialPrompt?: string;
/** Synthetic context parts to include with the initial message */
syntheticParts?: SyntheticContextPart[];
targetFolderId?: string;
};
// Voice state types
@@ -209,7 +210,7 @@ export interface SessionStore {
setSessionAgentEditMode: (sessionId: string, agentName: string | undefined, mode: EditPermissionMode, defaultMode?: EditPermissionMode) => void;
loadSessions: () => Promise<void>;
openNewSessionDraft: (options?: { directoryOverride?: string | null; parentID?: string | null; title?: string; initialPrompt?: string; syntheticParts?: SyntheticContextPart[] }) => void;
openNewSessionDraft: (options?: { directoryOverride?: string | null; parentID?: string | null; title?: string; initialPrompt?: string; syntheticParts?: SyntheticContextPart[]; targetFolderId?: string }) => void;
closeNewSessionDraft: () => void;
createSession: (title?: string, directoryOverride?: string | null, parentID?: string | null) => Promise<Session | null>;
packages/ui/src/stores/useSessionFoldersStore.ts
+30 -16
View File
@@ -9,6 +9,8 @@ export interface SessionFolder {
name: string;
sessionIds: string[];
createdAt: number;
/** If set, this folder is a sub-folder of the parent folder with this id */
parentId?: string | null;
}
type SessionFoldersMap = Record<string, SessionFolder[]>;
@@ -20,7 +22,7 @@ interface SessionFoldersState {
interface SessionFoldersActions {
getFoldersForScope: (scopeKey: string) => SessionFolder[];
createFolder: (scopeKey: string, name: string) => SessionFolder;
createFolder: (scopeKey: string, name: string, parentId?: string | null) => SessionFolder;
renameFolder: (scopeKey: string, folderId: string, name: string) => void;
deleteFolder: (scopeKey: string, folderId: string) => void;
addSessionToFolder: (scopeKey: string, folderId: string, sessionId: string) => void;
@@ -65,7 +67,8 @@ const readPersistedFolders = (): SessionFoldersMap => {
const sessionIds = Array.isArray(candidate.sessionIds)
? (candidate.sessionIds as unknown[]).filter((v): v is string => typeof v === 'string' && v.trim().length > 0)
: [];
folders.push({ id, name, sessionIds, createdAt });
const parentId = typeof candidate.parentId === 'string' ? candidate.parentId : null;
folders.push({ id, name, sessionIds, createdAt, parentId });
}
if (folders.length > 0) {
result[scopeKey] = folders;
@@ -149,13 +152,14 @@ export const useSessionFoldersStore = create<SessionFoldersStore>()(
return get().foldersMap[scopeKey] ?? [];
},
createFolder: (scopeKey: string, name: string): SessionFolder => {
createFolder: (scopeKey: string, name: string, parentId?: string | null): SessionFolder => {
const trimmed = name.trim() || 'New folder';
const folder: SessionFolder = {
id: createFolderId(),
name: trimmed,
sessionIds: [],
createdAt: Date.now(),
parentId: parentId ?? null,
};
const current = get().foldersMap;
const scopeFolders = current[scopeKey] ?? [];
@@ -187,16 +191,29 @@ export const useSessionFoldersStore = create<SessionFoldersStore>()(
const current = get().foldersMap;
const scopeFolders = current[scopeKey];
if (!scopeFolders) return;
const nextFolders = scopeFolders.filter((folder) => folder.id !== folderId);
// Also delete all sub-folders of this folder
const idsToDelete = new Set<string>([folderId]);
let changed = true;
while (changed) {
changed = false;
for (const f of scopeFolders) {
if (f.parentId && idsToDelete.has(f.parentId) && !idsToDelete.has(f.id)) {
idsToDelete.add(f.id);
changed = true;
}
}
}
const nextFolders = scopeFolders.filter((folder) => !idsToDelete.has(folder.id));
const nextMap: SessionFoldersMap = { ...current, [scopeKey]: nextFolders };
set({ foldersMap: nextMap });
persistFolders(nextMap);
// Clean up collapsed state
// Clean up collapsed state for all deleted folders
const collapsed = get().collapsedFolderIds;
if (collapsed.has(folderId)) {
const hasStale = Array.from(idsToDelete).some((id) => collapsed.has(id));
if (hasStale) {
const nextCollapsed = new Set(collapsed);
nextCollapsed.delete(folderId);
idsToDelete.forEach((id) => nextCollapsed.delete(id));
set({ collapsedFolderIds: nextCollapsed });
persistCollapsed(nextCollapsed);
}
@@ -220,9 +237,8 @@ export const useSessionFoldersStore = create<SessionFoldersStore>()(
return folder;
});
const filteredFolders = nextFolders.filter((folder) => folder.sessionIds.length > 0);
const nextMap: SessionFoldersMap = { ...current, [scopeKey]: filteredFolders };
const nextCollapsed = syncCollapsedAfterFolderCleanup(scopeFolders, filteredFolders, get().collapsedFolderIds);
const nextMap: SessionFoldersMap = { ...current, [scopeKey]: nextFolders };
const nextCollapsed = syncCollapsedAfterFolderCleanup(scopeFolders, nextFolders, get().collapsedFolderIds);
set(nextCollapsed
? { foldersMap: nextMap, collapsedFolderIds: nextCollapsed }
@@ -250,9 +266,8 @@ export const useSessionFoldersStore = create<SessionFoldersStore>()(
});
if (!changed) return;
const filteredFolders = nextFolders.filter((folder) => folder.sessionIds.length > 0);
const nextMap: SessionFoldersMap = { ...current, [scopeKey]: filteredFolders };
const nextCollapsed = syncCollapsedAfterFolderCleanup(scopeFolders, filteredFolders, get().collapsedFolderIds);
const nextMap: SessionFoldersMap = { ...current, [scopeKey]: nextFolders };
const nextCollapsed = syncCollapsedAfterFolderCleanup(scopeFolders, nextFolders, get().collapsedFolderIds);
set(nextCollapsed
? { foldersMap: nextMap, collapsedFolderIds: nextCollapsed }
@@ -292,9 +307,8 @@ export const useSessionFoldersStore = create<SessionFoldersStore>()(
});
if (!changed) return;
const filteredFolders = nextFolders.filter((folder) => folder.sessionIds.length > 0);
const nextMap: SessionFoldersMap = { ...current, [scopeKey]: filteredFolders };
const nextCollapsed = syncCollapsedAfterFolderCleanup(scopeFolders, filteredFolders, get().collapsedFolderIds);
const nextMap: SessionFoldersMap = { ...current, [scopeKey]: nextFolders };
const nextCollapsed = syncCollapsedAfterFolderCleanup(scopeFolders, nextFolders, get().collapsedFolderIds);
set(nextCollapsed
? { foldersMap: nextMap, collapsedFolderIds: nextCollapsed }
packages/ui/src/stores/useSessionStore.ts
+22 -2
View File
@@ -17,6 +17,7 @@ import { opencodeClient } from "@/lib/opencode/client";
import { useDirectoryStore } from "./useDirectoryStore";
import { useConfigStore } from "./useConfigStore";
import { useProjectsStore } from "./useProjectsStore";
import { useSessionFoldersStore } from "./useSessionFoldersStore";
import { EXECUTION_FORK_META_TEXT } from "@/lib/messages/executionMeta";
import { flattenAssistantTextParts } from "@/lib/messages/messageText";
@@ -150,6 +151,7 @@ export const useSessionStore = create<SessionStore>()(
title: options?.title,
initialPrompt: options?.initialPrompt,
syntheticParts: options?.syntheticParts,
targetFolderId: options?.targetFolderId,
},
currentSessionId: null,
error: null,
@@ -186,18 +188,24 @@ export const useSessionStore = create<SessionStore>()(
closeNewSessionDraft: () => {
const realCurrentSessionId = useSessionManagementStore.getState().currentSessionId;
set({
newSessionDraft: { open: false, directoryOverride: null, parentID: null, title: undefined, initialPrompt: undefined, syntheticParts: undefined },
newSessionDraft: { open: false, directoryOverride: null, parentID: null, title: undefined, initialPrompt: undefined, syntheticParts: undefined, targetFolderId: undefined },
currentSessionId: realCurrentSessionId,
});
},
createSession: async (title?: string, directoryOverride?: string | null, parentID?: string | null) => {
const draft = get().newSessionDraft;
const targetFolderId = draft.targetFolderId;
get().closeNewSessionDraft();
const result = await useSessionManagementStore.getState().createSession(title, directoryOverride, parentID);
if (result?.id) {
await get().setCurrentSession(result.id);
const finalScopeKey = directoryOverride || get().lastLoadedDirectory || result.directory;
if (targetFolderId && finalScopeKey) {
useSessionFoldersStore.getState().addSessionToFolder(finalScopeKey, targetFolderId, result.id);
}
}
return result;
},
@@ -348,9 +356,12 @@ export const useSessionStore = create<SessionStore>()(
};
if (draft?.open) {
const draftTargetFolderId = draft.targetFolderId;
const draftDirectoryOverride = draft.directoryOverride ?? null;
const created = await useSessionManagementStore
.getState()
.createSession(draft.title, draft.directoryOverride ?? null, draft.parentID ?? null);
.createSession(draft.title, draftDirectoryOverride, draft.parentID ?? null);
if (!created?.id) {
throw new Error('Failed to create session');
@@ -410,6 +421,15 @@ export const useSessionStore = create<SessionStore>()(
const draftSyntheticParts = draft.syntheticParts;
get().closeNewSessionDraft();
// Assign to target folder if session was created from folder's + button
if (draftTargetFolderId) {
const scopeKey = draftDirectoryOverride || created.directory || null;
if (scopeKey) {
useSessionFoldersStore.getState().addSessionToFolder(scopeKey, draftTargetFolderId, created.id);
}
}
setStatus(created.id, 'busy');
// Merge draft synthetic parts with any additional parts passed to sendMessage