mirror of
https://github.com/getpaseo/paseo.git
synced 2026-11-10 18:35:17 +00:00
Mohamed Boudra
65fbe38dd3
Restore compact message and footer spacing, reserve independent composer-pill clearance for transcript content and floating controls, and keep visible web tool-call expansion from shifting the reading position.
52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
import { StyleSheet } from "react-native-unistyles";
|
|
import { SPACING } from "@/styles/theme";
|
|
|
|
export const COMPOSER_PILL_CLEARANCE = {
|
|
compact: SPACING[2],
|
|
wide: 10,
|
|
} as const;
|
|
export const COMPOSER_PILL_MIN_HEIGHT = 32;
|
|
|
|
export function resolveComposerPillClearance(isCompact: boolean): number {
|
|
return isCompact ? COMPOSER_PILL_CLEARANCE.compact : COMPOSER_PILL_CLEARANCE.wide;
|
|
}
|
|
|
|
export function resolveComposerTrackTailClearance(isCompact: boolean): number {
|
|
const composerClearance = resolveComposerPillClearance(isCompact);
|
|
const transcriptClearance = isCompact ? SPACING[6] : 20;
|
|
return transcriptClearance + COMPOSER_PILL_MIN_HEIGHT + composerClearance;
|
|
}
|
|
|
|
export function resolveComposerTrackControlClearance(isCompact: boolean): number {
|
|
const clearance = resolveComposerPillClearance(isCompact);
|
|
return clearance + COMPOSER_PILL_MIN_HEIGHT + clearance;
|
|
}
|
|
|
|
/** Shared visual contract for the compact pills immediately above the composer. */
|
|
export const composerPillStyles = StyleSheet.create((theme) => ({
|
|
body: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: theme.spacing[2],
|
|
minHeight: COMPOSER_PILL_MIN_HEIGHT,
|
|
paddingHorizontal: theme.spacing[3],
|
|
paddingVertical: theme.spacing[1],
|
|
// Match the composer's 16px tangent point. The 32px floor prevents short labels from
|
|
// clamping the radius and pulling the point where the curve meets the straight edge inward.
|
|
borderRadius: theme.borderRadius["2xl"],
|
|
borderWidth: theme.borderWidth[1],
|
|
borderColor: theme.colors.borderAccent,
|
|
backgroundColor: theme.colors.surface1,
|
|
},
|
|
bodyActive: {
|
|
backgroundColor: theme.colors.surface2,
|
|
},
|
|
label: {
|
|
fontSize: theme.fontSize.sm,
|
|
color: theme.colors.foregroundMuted,
|
|
},
|
|
labelActive: {
|
|
color: theme.colors.foreground,
|
|
},
|
|
}));
|