diff --git a/mobile/app/h/[hostId]/session/[worktreeId].tsx b/mobile/app/h/[hostId]/session/[worktreeId].tsx index 1aa036f2c86..ad007302e8d 100644 --- a/mobile/app/h/[hostId]/session/[worktreeId].tsx +++ b/mobile/app/h/[hostId]/session/[worktreeId].tsx @@ -206,7 +206,6 @@ function TerminalPaneView({ function MarkdownReader({ doc, - tab, onRefresh, onChange, onSave, @@ -214,7 +213,6 @@ function MarkdownReader({ onDiscard }: { doc: MarkdownDocState | undefined - tab: Extract onRefresh: () => void onChange: (content: string) => void onSave: () => void @@ -240,60 +238,22 @@ function MarkdownReader({ ) } + const statusText = doc.saveError + ? doc.saveError + : doc.readOnlyReason + ? 'Read only' + : doc.stale + ? 'Changed on desktop' + : doc.isDirty + ? 'Unsaved on phone' + : null + const showRefresh = (doc.stale && !doc.isDirty) || !doc.editable + const showCopy = doc.saveError || !doc.editable + const showSave = doc.isDirty || doc.saving + const showFloatingActions = statusText || showRefresh || showCopy || showSave + return ( - - - - - {tab.relativePath || tab.title} - - {doc.saveError ? ( - - {doc.saveError} - - ) : doc.readOnlyReason ? ( - Read only - ) : doc.stale ? ( - Changed on desktop - ) : doc.isDirty ? ( - Unsaved on phone - ) : null} - - - {(doc.saveError || !doc.editable) && ( - - Copy - - )} - {doc.isDirty && ( - - Discard - - )} - - {doc.saving ? ( - - ) : ( - Save - )} - - - - {(doc.stale && !doc.isDirty) || !doc.editable ? ( - - - Refresh - - ) : null} - + {showFloatingActions ? ( + + {statusText ? ( + + {statusText} + + ) : null} + + {showCopy ? ( + + Copy + + ) : null} + {showRefresh ? ( + + + Refresh + + ) : null} + {doc.isDirty ? ( + + Discard + + ) : null} + {showSave ? ( + + {doc.saving ? ( + + ) : ( + Save + )} + + ) : null} + + + ) : null} ) } @@ -1990,7 +1997,6 @@ export default function SessionScreen() { ) : activeMarkdownTab ? ( void readMarkdownTab(activeMarkdownTab)} onChange={(content) => updateMarkdownLocalContent(activeMarkdownTab.id, content)} @@ -2440,71 +2446,9 @@ const styles = StyleSheet.create({ minHeight: 0, backgroundColor: colors.bgBase }, - markdownReader: { - flex: 1 - }, markdownEditor: { flex: 1, - padding: spacing.lg, - gap: spacing.md - }, - markdownContent: { - padding: spacing.lg, - paddingBottom: spacing.xl * 2 - }, - markdownHeader: { - gap: spacing.xs - }, - markdownTitleRow: { - flexDirection: 'row', - alignItems: 'flex-start', - justifyContent: 'space-between', - gap: spacing.md - }, - markdownTitleBlock: { - flex: 1, - minWidth: 0, - gap: spacing.xs - }, - markdownActions: { - flexDirection: 'row', - alignItems: 'center', - flexWrap: 'wrap', - justifyContent: 'flex-end', - gap: spacing.xs, - maxWidth: '58%' - }, - markdownTitle: { - color: colors.textPrimary, - fontSize: 16, - fontWeight: '700' - }, - markdownMeta: { - color: colors.textSecondary, - fontSize: typography.metaSize - }, - markdownH1: { - color: colors.textPrimary, - fontSize: 22, - fontWeight: '700', - marginTop: spacing.md, - marginBottom: spacing.sm - }, - markdownH2: { - color: colors.textPrimary, - fontSize: 18, - fontWeight: '700', - marginTop: spacing.md, - marginBottom: spacing.sm - }, - markdownBody: { - color: colors.textPrimary, - fontSize: typography.bodySize, - lineHeight: 22, - marginBottom: spacing.xs - }, - markdownSpacer: { - height: spacing.sm + position: 'relative' }, markdownState: { flex: 1, @@ -2521,11 +2465,10 @@ const styles = StyleSheet.create({ flex: 1, minHeight: 0, color: colors.textPrimary, - backgroundColor: colors.bgRaised, - borderWidth: 1, - borderColor: colors.borderSubtle, - borderRadius: radii.card, - padding: spacing.md, + backgroundColor: colors.bgBase, + paddingHorizontal: spacing.lg, + paddingTop: spacing.lg, + paddingBottom: spacing.xl * 3, fontSize: typography.bodySize, lineHeight: 22, fontFamily: Platform.select({ ios: 'Menlo', android: 'monospace', default: 'monospace' }) @@ -2550,6 +2493,53 @@ const styles = StyleSheet.create({ fontSize: 13, fontWeight: '600' }, + markdownFloatingBar: { + position: 'absolute', + left: spacing.md, + right: spacing.md, + bottom: spacing.md, + alignItems: 'flex-end', + gap: spacing.xs + }, + markdownFloatingStatus: { + maxWidth: '100%', + alignSelf: 'flex-end', + overflow: 'hidden', + color: colors.textSecondary, + backgroundColor: colors.bgPanel, + borderWidth: 1, + borderColor: colors.borderSubtle, + borderRadius: radii.button, + paddingHorizontal: spacing.sm, + paddingVertical: spacing.xs, + fontSize: typography.metaSize + }, + markdownFloatingActions: { + flexDirection: 'row', + flexWrap: 'wrap', + justifyContent: 'flex-end', + gap: spacing.xs + }, + markdownFloatingButton: { + minHeight: 34, + flexDirection: 'row', + alignItems: 'center', + gap: spacing.xs, + backgroundColor: colors.bgPanel, + borderWidth: 1, + borderColor: colors.borderSubtle, + borderRadius: radii.button, + paddingHorizontal: spacing.md, + paddingVertical: spacing.xs + }, + markdownSaveButton: { + backgroundColor: colors.bgRaised + }, + markdownFloatingButtonText: { + color: colors.textPrimary, + fontSize: 13, + fontWeight: '600' + }, toast: { position: 'absolute', bottom: spacing.lg,