Hide mobile sidebar for new workspace

This commit is contained in:
Mohamed Boudra
2026-06-05 10:36:02 +07:00
parent f30f217023
commit e961ceef98
2 changed files with 42 additions and 25 deletions
+41 -20
View File
@@ -103,6 +103,7 @@ interface SidebarSharedProps {
toggleProjectCollapsed: SidebarShortcutModel["toggleProjectCollapsed"]; toggleProjectCollapsed: SidebarShortcutModel["toggleProjectCollapsed"];
handleRefresh: () => void; handleRefresh: () => void;
handleHostSelect: (nextServerId: string) => void; handleHostSelect: (nextServerId: string) => void;
handleNewWorkspaceNavigate: () => void;
handleOpenProject: () => void; handleOpenProject: () => void;
handleHome: () => void; handleHome: () => void;
handleSettings: () => void; handleSettings: () => void;
@@ -118,7 +119,7 @@ interface MobileSidebarProps extends SidebarSharedProps {
insetsTop: number; insetsTop: number;
insetsBottom: number; insetsBottom: number;
isOpen: boolean; isOpen: boolean;
closeToAgent: () => void; closeSidebar: () => void;
handleViewMoreNavigate: () => void; handleViewMoreNavigate: () => void;
} }
@@ -229,6 +230,11 @@ export const LeftSidebar = memo(function LeftSidebar({
void openProjectPicker(); void openProjectPicker();
}, [openProjectPicker]); }, [openProjectPicker]);
const handleNewWorkspaceNavigate = useCallback(() => {
if (!activeServerId) return;
router.push(buildHostNewWorkspaceRoute(activeServerId));
}, [activeServerId]);
const handleSettingsMobile = useCallback(() => { const handleSettingsMobile = useCallback(() => {
showMobileAgent(); showMobileAgent();
router.push(buildSettingsRoute()); router.push(buildSettingsRoute());
@@ -297,7 +303,8 @@ export const LeftSidebar = memo(function LeftSidebar({
insetsTop={insets.top} insetsTop={insets.top}
insetsBottom={insets.bottom} insetsBottom={insets.bottom}
isOpen={isOpen} isOpen={isOpen}
closeToAgent={showMobileAgent} closeSidebar={showMobileAgent}
handleNewWorkspaceNavigate={handleNewWorkspaceNavigate}
handleOpenProject={handleOpenProjectMobile} handleOpenProject={handleOpenProjectMobile}
handleHome={handleHomeMobile} handleHome={handleHomeMobile}
handleSettings={handleSettingsMobile} handleSettings={handleSettingsMobile}
@@ -311,6 +318,7 @@ export const LeftSidebar = memo(function LeftSidebar({
{...sharedProps} {...sharedProps}
insetsTop={insets.top} insetsTop={insets.top}
isOpen={isOpen} isOpen={isOpen}
handleNewWorkspaceNavigate={handleNewWorkspaceNavigate}
handleOpenProject={handleOpenProjectDesktop} handleOpenProject={handleOpenProjectDesktop}
handleHome={handleHomeDesktop} handleHome={handleHomeDesktop}
handleSettings={handleSettingsDesktop} handleSettings={handleSettingsDesktop}
@@ -554,13 +562,14 @@ function MobileSidebar({
handleRefresh, handleRefresh,
handleHostSelect, handleHostSelect,
renderHostOption, renderHostOption,
handleNewWorkspaceNavigate,
handleOpenProject, handleOpenProject,
handleHome, handleHome,
handleSettings, handleSettings,
insetsTop, insetsTop,
insetsBottom, insetsBottom,
isOpen, isOpen,
closeToAgent, closeSidebar,
handleViewMoreNavigate, handleViewMoreNavigate,
}: MobileSidebarProps) { }: MobileSidebarProps) {
const pathname = usePathname(); const pathname = usePathname();
@@ -581,8 +590,8 @@ function MobileSidebar({
const handleCloseFromGesture = useCallback(() => { const handleCloseFromGesture = useCallback(() => {
gestureAnimatingRef.current = true; gestureAnimatingRef.current = true;
closeToAgent(); closeSidebar();
}, [closeToAgent, gestureAnimatingRef]); }, [closeSidebar, gestureAnimatingRef]);
const handleViewMore = useCallback(() => { const handleViewMore = useCallback(() => {
if (!activeServerId) { if (!activeServerId) {
@@ -590,20 +599,25 @@ function MobileSidebar({
} }
translateX.value = -windowWidth; translateX.value = -windowWidth;
backdropOpacity.value = 0; backdropOpacity.value = 0;
closeToAgent(); closeSidebar();
handleViewMoreNavigate(); handleViewMoreNavigate();
}, [ }, [
activeServerId, activeServerId,
backdropOpacity, backdropOpacity,
closeToAgent, closeSidebar,
handleViewMoreNavigate, handleViewMoreNavigate,
translateX, translateX,
windowWidth, windowWidth,
]); ]);
const handleWorkspacePress = useCallback(() => { const handleWorkspacePress = useCallback(() => {
closeToAgent(); closeSidebar();
}, [closeToAgent]); }, [closeSidebar]);
const handleNewWorkspace = useCallback(() => {
closeSidebar();
handleNewWorkspaceNavigate();
}, [closeSidebar, handleNewWorkspaceNavigate]);
const closeGesture = useMemo( const closeGesture = useMemo(
() => () =>
@@ -745,10 +759,13 @@ function MobileSidebar({
testID="sidebar-sessions" testID="sidebar-sessions"
/> />
</View> </View>
<WorkspacesSectionHeader serverId={activeServerId} /> <WorkspacesSectionHeader
serverId={activeServerId}
onNewWorkspacePress={handleNewWorkspace}
/>
<Pressable <Pressable
style={styles.mobileCloseButton} style={styles.mobileCloseButton}
onPress={closeToAgent} onPress={closeSidebar}
testID="sidebar-close" testID="sidebar-close"
nativeID="sidebar-close" nativeID="sidebar-close"
accessible accessible
@@ -826,6 +843,7 @@ function DesktopSidebar({
handleRefresh, handleRefresh,
handleHostSelect, handleHostSelect,
renderHostOption, renderHostOption,
handleNewWorkspaceNavigate,
handleOpenProject, handleOpenProject,
handleHome, handleHome,
handleSettings, handleSettings,
@@ -913,7 +931,10 @@ function DesktopSidebar({
/> />
</View> </View>
</View> </View>
<WorkspacesSectionHeader serverId={activeServerId} /> <WorkspacesSectionHeader
serverId={activeServerId}
onNewWorkspacePress={handleNewWorkspaceNavigate}
/>
{isInitialLoad ? ( {isInitialLoad ? (
<SidebarAgentListSkeleton /> <SidebarAgentListSkeleton />
@@ -958,17 +979,17 @@ function DesktopSidebar({
); );
} }
function WorkspacesSectionHeader({ serverId }: { serverId: string | null }) { function WorkspacesSectionHeader({
serverId,
onNewWorkspacePress,
}: {
serverId: string | null;
onNewWorkspacePress: () => void;
}) {
const { theme } = useUnistyles(); const { theme } = useUnistyles();
const setCommandCenterOpen = useKeyboardShortcutsStore((state) => state.setCommandCenterOpen); const setCommandCenterOpen = useKeyboardShortcutsStore((state) => state.setCommandCenterOpen);
const commandCenterKeys = useShortcutKeys("toggle-command-center"); const commandCenterKeys = useShortcutKeys("toggle-command-center");
const handleSearchPress = useCallback(() => setCommandCenterOpen(true), [setCommandCenterOpen]); const handleSearchPress = useCallback(() => setCommandCenterOpen(true), [setCommandCenterOpen]);
const handleNewWorkspacePress = useCallback(() => {
if (!serverId) {
return;
}
router.push(buildHostNewWorkspaceRoute(serverId));
}, [serverId]);
const searchButtonStyle = useCallback( const searchButtonStyle = useCallback(
({ hovered = false, pressed }: PressableStateCallbackType & { hovered?: boolean }) => [ ({ hovered = false, pressed }: PressableStateCallbackType & { hovered?: boolean }) => [
styles.workspacesHeaderIconButton, styles.workspacesHeaderIconButton,
@@ -988,7 +1009,7 @@ function WorkspacesSectionHeader({ serverId }: { serverId: string | null }) {
accessibilityLabel="New workspace" accessibilityLabel="New workspace"
testID="sidebar-new-workspace" testID="sidebar-new-workspace"
style={searchButtonStyle} style={searchButtonStyle}
onPress={handleNewWorkspacePress} onPress={onNewWorkspacePress}
> >
{({ hovered, pressed }) => ( {({ hovered, pressed }) => (
<Plus <Plus
@@ -117,7 +117,6 @@ import { useKeyboardActionHandler } from "@/hooks/use-keyboard-action-handler";
import { useClearWorkspaceAttention } from "@/hooks/use-clear-workspace-attention"; import { useClearWorkspaceAttention } from "@/hooks/use-clear-workspace-attention";
import type { PrHint } from "@/git/use-pr-status-query"; import type { PrHint } from "@/git/use-pr-status-query";
import { buildSidebarProjectRowModel } from "@/utils/sidebar-project-row-model"; import { buildSidebarProjectRowModel } from "@/utils/sidebar-project-row-model";
import { useSessionStore } from "@/stores/session-store";
import { redirectIfArchivingActiveWorkspace } from "@/utils/sidebar-workspace-archive-redirect"; import { redirectIfArchivingActiveWorkspace } from "@/utils/sidebar-workspace-archive-redirect";
import { openExternalUrl } from "@/utils/open-external-url"; import { openExternalUrl } from "@/utils/open-external-url";
import { import {
@@ -1172,17 +1171,14 @@ function ProjectHeaderRow({
if (!serverId) { if (!serverId) {
return; return;
} }
onWorkspacePress?.();
router.navigate( router.navigate(
buildHostNewWorkspaceRoute(serverId, project.iconWorkingDir, { buildHostNewWorkspaceRoute(serverId, project.iconWorkingDir, {
displayName, displayName,
projectId: project.projectKey, projectId: project.projectKey,
}) as Href, }) as Href,
); );
onWorkspacePress?.();
}, [displayName, onWorkspacePress, project.iconWorkingDir, project.projectKey, serverId]); }, [displayName, onWorkspacePress, project.iconWorkingDir, project.projectKey, serverId]);
const _mergeWorkspaces = useSessionStore((state) => state.mergeWorkspaces);
const _toast = useToast();
const interaction = useLongPressDragInteraction({ const interaction = useLongPressDragInteraction({
drag, drag,
menuController, menuController,