feat: add global immersive/fullscreen mode support across pages

- Add isImmersiveMode state to appStore for global fullscreen management
- Update AppShell to hide Header and Sidebar when immersive mode is active
- Add fullscreen toggle button to workflow and knowledge pages:
  - TerminalDashboardPage, IssueHubPage, SessionsPage, LiteTasksPage
  - HistoryPage, TeamPage, MemoryPage, SkillsManagerPage
  - CommandsManagerPage, RulesManagerPage, CliViewerPage
  - OrchestratorPage (via FlowToolbar)
- Preserve padding in fullscreen mode for better visual appearance
This commit is contained in:
catlog22
2026-02-16 13:07:35 +08:00
parent cffeece220
commit 111b0f6809
16 changed files with 315 additions and 96 deletions

View File

@@ -236,6 +236,9 @@ const initialState = {
themeSlots: [DEFAULT_SLOT] as ThemeSlot[],
activeSlotId: 'default' as ThemeSlotId,
deletedSlotBuffer: null as ThemeSlot | null,
// Immersive fullscreen mode (hides app shell chrome)
isImmersiveMode: false,
};
export const useAppStore = create<AppStore>()(
@@ -670,6 +673,16 @@ export const useAppStore = create<AppStore>()(
}
get().setBackgroundConfig(updated);
},
// ========== Immersive Mode Actions ==========
setImmersiveMode: (enabled: boolean) => {
set({ isImmersiveMode: enabled }, false, 'setImmersiveMode');
},
toggleImmersiveMode: () => {
set((state) => ({ isImmersiveMode: !state.isImmersiveMode }), false, 'toggleImmersiveMode');
},
}),
{
name: 'ccw-app-store',
@@ -807,3 +820,4 @@ export const selectError = (state: AppStore) => state.error;
export const selectThemeSlots = (state: AppStore) => state.themeSlots;
export const selectActiveSlotId = (state: AppStore) => state.activeSlotId;
export const selectDeletedSlotBuffer = (state: AppStore) => state.deletedSlotBuffer;
export const selectIsImmersiveMode = (state: AppStore) => state.isImmersiveMode;