Hide mobile sidebar for new workspace
This commit is contained in:
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user