mirror of
https://github.com/stablyai/orca.git
synced 2026-10-25 16:03:53 +00:00
21a01c7d6b
* Add worktree-list sidebar for mobile tablet/foldable layouts On wide canvases (tablet/foldable, >=700pt) the per-host worktree list now renders as a persistent left sidebar with the routed screens (terminal, source control, review, accounts, tasks) shown in a detail pane to its right — mirroring the desktop's sidebar + center layout. Phones keep the existing single-pane stack navigation unchanged. - Reuse the existing worktree-list screen as the sidebar via an `embedded` mode (props for hostId/action, mount-driven fetch since a sidebar is never the focused route, hide-sidebar control in place of the back button, and open-into-detail-pane navigation that replaces rather than stacks). - The default host route renders an empty WorkspaceDetailPlaceholder on wide layouts (the list lives in the sidebar) and the full screen on phones, so exactly one instance mounts either way. - Hide button collapses the sidebar to give the detail pane full width; an elevated reveal tab brings it back. - Detail-pane screen transitions use `animation: 'none'` while the split is active so workspaces swap instantly instead of sliding and flashing the screen beneath. - Drag the sidebar's right edge to resize (clamped 280-560pt, detail pane kept >=320pt, tap-transparent so list rows still work); width persists via AsyncStorage. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * Address PR review feedback (#5505) - Clamp the restored/persisted sidebar width against the current window and re-clamp when the window shrinks, so a width saved on a larger device can't starve the detail pane below MIN_DETAIL_WIDTH. Extract a shared clampSidebarToWindow helper reused by load, window-resize, and drag. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * Polish mobile tablet sidebar Co-authored-by: Orca <help@stably.ai> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Co-authored-by: Jinwoo-H <jinwoo0825@gmail.com> Co-authored-by: Orca <help@stably.ai>
49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import { View, Text, StyleSheet } from 'react-native'
|
|
import { SquareTerminal } from 'lucide-react-native'
|
|
import { colors, spacing } from '../theme/mobile-theme'
|
|
|
|
// Empty detail pane shown beside the worktree-list sidebar on wide
|
|
// tablet/foldable layouts until the user opens a workspace.
|
|
export function WorkspaceDetailPlaceholder() {
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.icon}>
|
|
<SquareTerminal size={28} color={colors.textMuted} />
|
|
</View>
|
|
<Text style={styles.title}>No workspace open</Text>
|
|
<Text style={styles.body}>Pick a workspace from the sidebar to open its terminal here.</Text>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingHorizontal: spacing.xl,
|
|
backgroundColor: colors.bgBase
|
|
},
|
|
icon: {
|
|
width: 56,
|
|
height: 56,
|
|
borderRadius: 16,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: colors.bgPanel,
|
|
marginBottom: spacing.lg
|
|
},
|
|
title: {
|
|
color: colors.textPrimary,
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
marginBottom: spacing.xs
|
|
},
|
|
body: {
|
|
color: colors.textSecondary,
|
|
fontSize: 13,
|
|
textAlign: 'center',
|
|
maxWidth: 320
|
|
}
|
|
})
|