diff --git a/.changeset/use-planning-session-back.md b/.changeset/use-planning-session-back.md new file mode 100644 index 0000000000..fc0ce749f7 --- /dev/null +++ b/.changeset/use-planning-session-back.md @@ -0,0 +1,7 @@ +--- +"@runfusion/fusion": patch +--- + +summary: Replace the Planning Sessions toggle with a consistent Back-to-sessions control. +category: fix +dev: Uses the existing session-list transition across desktop and compact Planning layouts. diff --git a/packages/dashboard/app/components/PlanningModeModal.css b/packages/dashboard/app/components/PlanningModeModal.css index 9dd559b39a..45ae835216 100644 --- a/packages/dashboard/app/components/PlanningModeModal.css +++ b/packages/dashboard/app/components/PlanningModeModal.css @@ -587,11 +587,12 @@ The New session button must look EXACTLY like Missions' primary sidebar create b padding: 0 8px; } -.planning-mobile-back { - /* Visible only on mobile (see media query below). On desktop the sidebar - is always visible alongside the detail pane, so a back button is never - needed. */ - display: none; +.planning-session-back { + display: inline-flex; + min-width: calc(var(--space-md) * 2.25); + min-height: calc(var(--space-md) * 2.25); + align-items: center; + justify-content: center; background: none; border: none; color: var(--text); @@ -602,11 +603,11 @@ The New session button must look EXACTLY like Missions' primary sidebar create b transition: background var(--transition-fast), box-shadow var(--transition-fast); } -.planning-mobile-back:hover { +.planning-session-back:hover { background: var(--card-hover); } -.planning-mobile-back:focus-visible { +.planning-session-back:focus-visible { outline: none; box-shadow: var(--focus-ring-strong); } @@ -711,14 +712,6 @@ The New session button must look EXACTLY like Missions' primary sidebar create b .planning-modal-body--show-list .planning-detail { display: none; } - /* The rendered Back control needs a full touch target and must not be squeezed out of the title row. */ - .planning-mobile-back { - display: inline-flex; - min-width: calc(var(--space-md) * 2.25); - min-height: calc(var(--space-md) * 2.25); - align-items: center; - justify-content: center; - } /* Always keep action buttons visible on mobile (no hover) */ .planning-sidebar-item-delete, .planning-sidebar-item-archive { @@ -1830,14 +1823,6 @@ plan actions, and a token-sized bottom inset keep all three controls inline with display: none; } - .planning-mobile-back { - display: inline-flex; - min-width: calc(var(--space-md) * 2.25); - min-height: calc(var(--space-md) * 2.25); - align-items: center; - justify-content: center; - } - .planning-summary-actions { flex-wrap: wrap; align-items: flex-start; @@ -2169,7 +2154,7 @@ mobile and desktop offer the same View task / Return to sessions choices. /* FNXC:PlanningModeMobile 2026-07-20-21:50: The Planning detail header keeps Back, the lightbulb, a single-line truncated title, and Edit on - one row. Fixed icon controls may not shrink; only the title yields space before Sessions/History. + one row. Fixed icon controls may not shrink; only the title yields space before History. */ .planning-modal--embedded .modal-header--embedded .detail-title-row { @@ -2191,7 +2176,7 @@ mobile and desktop offer the same View task / Return to sessions choices. .planning-modal--embedded .modal-header--embedded .detail-title-row > svg, .planning-modal--embedded .modal-header--embedded .detail-title-row > .btn-icon, - .planning-modal--embedded .modal-header--embedded .planning-mobile-back { + .planning-modal--embedded .modal-header--embedded .planning-session-back { flex: 0 0 auto; } @@ -2202,7 +2187,7 @@ mobile and desktop offer the same View task / Return to sessions choices. .planning-header-controls { display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: minmax(0, 1fr); width: 100%; } diff --git a/packages/dashboard/app/components/PlanningModeModal.tsx b/packages/dashboard/app/components/PlanningModeModal.tsx index 3628a0d101..e0bf22507f 100644 --- a/packages/dashboard/app/components/PlanningModeModal.tsx +++ b/packages/dashboard/app/components/PlanningModeModal.tsx @@ -617,14 +617,13 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat const isCompactInterview = viewportMode !== "desktop" || isShortViewport(); /* FNXC:PlanningModeMobile 2026-07-20-10:30: - FN-8427 makes the saved-session list a real compact destination. Both Back and Sessions - enter this one mode, which must unmount the active interview plan so it cannot consume - flex height beneath session rows. Desktop preserves its three-pane interview until its - explicit Sessions toggle requests the same list destination. + FN-8427 makes the saved-session list a real destination. Back enters this mode and unmounts + the active interview plan so it cannot consume flex height beneath session rows. */ const isSessionListMode = showSessionList || (isCompactInterview && !mobileShowDetail); - // FNXC:PlanningModeMobile 2026-07-20-10:30: Empty mobile state opens the composer because no saved destination exists; once sessions exist, every compact detail surface gets this single Back-to-list escape. - const canReturnToSessionList = isCompactInterview && mobileShowDetail && planningSessions.length > 0; + // FNXC:PlanningSessionBack 2026-07-21-11:15: Back covers selected details on every viewport and drafts whenever saved sessions exist; list mode removes it instead of leaving an orphaned control. + const canReturnToSessionList = !isSessionListMode + && (selectedSessionId !== null || planningSessions.length > 0); const [isRefineMenuOpen, setIsRefineMenuOpen] = useState(false); const [mobileWorkspaceTab, setMobileWorkspaceTab] = useState<"question" | "plan">("question"); /* @@ -1918,6 +1917,7 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat }, [projectId, resetDetailState, resumeSessionId, selectedSessionId]); const handleBackToList = useCallback(() => { + setIsHistoryOpen(false); setShowSessionList(true); setMobileShowDetail(false); }, []); @@ -2832,13 +2832,13 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
{/* FNXC:PlanningMode 2026-06-22-00:00: - Embedded planning is a main-content destination, not a dialog: it drops the modal close button and renders a plain common title (modal-header--embedded) matching other embedded views like Command Center. The mobile back affordance stays because it navigates the session list, not the view. + Embedded planning is a main-content destination, not a dialog: it drops the modal close button and renders a plain common title (modal-header--embedded) matching other embedded views like Command Center. The session-list Back affordance stays because it navigates within Planning, not away from the view. */}
{canReturnToSessionList && (