fix(app): align agent profile controls
Keep trailing edit controls from changing section heading rhythm, and center each profile's icon with its own text block so one-line and noted rows share the same visual alignment.
This commit is contained in:
@@ -73,30 +73,32 @@ export function AgentProfileRow({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={rowStyle} testID={`agent-profile-row-${profile.id}`}>
|
<View style={rowStyle} testID={`agent-profile-row-${profile.id}`}>
|
||||||
<View style={styles.iconWrapper}>
|
<View style={styles.rowMain}>
|
||||||
<AgentProfileGlyph icon={profile.icon} color={profile.color} size={ICON_SIZE.md} />
|
<View style={styles.iconWrapper}>
|
||||||
</View>
|
<AgentProfileGlyph icon={profile.icon} color={profile.color} size={ICON_SIZE.md} />
|
||||||
<View style={settingsStyles.rowContent}>
|
|
||||||
<View style={styles.titleLine}>
|
|
||||||
<Text style={settingsStyles.rowTitle} numberOfLines={1}>
|
|
||||||
{profile.name}
|
|
||||||
</Text>
|
|
||||||
<Text style={styles.summary} numberOfLines={1}>
|
|
||||||
{summary}
|
|
||||||
</Text>
|
|
||||||
</View>
|
</View>
|
||||||
{profile.notes ? (
|
<View style={settingsStyles.rowContent}>
|
||||||
<View style={styles.notes}>
|
<View style={styles.titleLine}>
|
||||||
<ThemedFileText size={ICON_SIZE.xs} uniProps={mutedColorMapping} />
|
<Text style={settingsStyles.rowTitle} numberOfLines={1}>
|
||||||
<Text
|
{profile.name}
|
||||||
style={styles.notesText}
|
</Text>
|
||||||
numberOfLines={2}
|
<Text style={styles.summary} numberOfLines={1}>
|
||||||
testID={`agent-profile-notes-${profile.id}`}
|
{summary}
|
||||||
>
|
|
||||||
{profile.notes}
|
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
) : null}
|
{profile.notes ? (
|
||||||
|
<View style={styles.notes}>
|
||||||
|
<ThemedFileText size={ICON_SIZE.xs} uniProps={mutedColorMapping} />
|
||||||
|
<Text
|
||||||
|
style={styles.notesText}
|
||||||
|
numberOfLines={2}
|
||||||
|
testID={`agent-profile-notes-${profile.id}`}
|
||||||
|
>
|
||||||
|
{profile.notes}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
) : null}
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
<View style={styles.rowActions}>
|
<View style={styles.rowActions}>
|
||||||
<Button
|
<Button
|
||||||
@@ -145,12 +147,17 @@ const styles = StyleSheet.create((theme) => ({
|
|||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
paddingVertical: theme.spacing[3],
|
paddingVertical: theme.spacing[3],
|
||||||
},
|
},
|
||||||
|
rowMain: {
|
||||||
|
flex: 1,
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "flex-start",
|
||||||
|
gap: theme.spacing[2],
|
||||||
|
},
|
||||||
iconWrapper: {
|
iconWrapper: {
|
||||||
width: theme.iconSize.md,
|
width: theme.iconSize.md,
|
||||||
alignSelf: "flex-start",
|
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
marginTop: theme.spacing[1],
|
marginTop: 1,
|
||||||
},
|
},
|
||||||
titleLine: {
|
titleLine: {
|
||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
|
|||||||
@@ -114,7 +114,7 @@ function AgentProfilesEditAction({ onPress }: { onPress: () => void }) {
|
|||||||
accessibilityLabel={t("modelSelector.editProfilesLabel")}
|
accessibilityLabel={t("modelSelector.editProfilesLabel")}
|
||||||
testID="model-profiles-edit"
|
testID="model-profiles-edit"
|
||||||
>
|
>
|
||||||
<ThemedPencil size={ICON_SIZE.sm} uniProps={foregroundExtraMutedMapping} />
|
<ThemedPencil size={ICON_SIZE.xs} uniProps={foregroundExtraMutedMapping} />
|
||||||
</Pressable>
|
</Pressable>
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipContent side="top" align="center" offset={8}>
|
<TooltipContent side="top" align="center" offset={8}>
|
||||||
@@ -675,7 +675,11 @@ function AgentProfilesPickerSection({
|
|||||||
<View style={styles.profilesContainer}>
|
<View style={styles.profilesContainer}>
|
||||||
<View style={styles.sectionHeading}>
|
<View style={styles.sectionHeading}>
|
||||||
<Text style={styles.sectionHeadingText}>{t("modelSelector.profiles")}</Text>
|
<Text style={styles.sectionHeadingText}>{t("modelSelector.profiles")}</Text>
|
||||||
{onEditProfiles ? <AgentProfilesEditAction onPress={onEditProfiles} /> : null}
|
{onEditProfiles ? (
|
||||||
|
<View style={styles.sectionHeadingAction}>
|
||||||
|
<AgentProfilesEditAction onPress={onEditProfiles} />
|
||||||
|
</View>
|
||||||
|
) : null}
|
||||||
</View>
|
</View>
|
||||||
{rows.map((row) => (
|
{rows.map((row) => (
|
||||||
<AgentProfilePickerRowView key={row.id} row={row} onApply={handleApply} />
|
<AgentProfilePickerRowView key={row.id} row={row} onApply={handleApply} />
|
||||||
@@ -1217,6 +1221,7 @@ const styles = StyleSheet.create((theme) => ({
|
|||||||
backgroundColor: theme.colors.border,
|
backgroundColor: theme.colors.border,
|
||||||
},
|
},
|
||||||
sectionHeading: {
|
sectionHeading: {
|
||||||
|
position: "relative",
|
||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
gap: theme.spacing[2],
|
gap: theme.spacing[2],
|
||||||
@@ -1224,6 +1229,11 @@ const styles = StyleSheet.create((theme) => ({
|
|||||||
paddingTop: theme.spacing[2],
|
paddingTop: theme.spacing[2],
|
||||||
paddingBottom: theme.spacing[1],
|
paddingBottom: theme.spacing[1],
|
||||||
},
|
},
|
||||||
|
sectionHeadingAction: {
|
||||||
|
position: "absolute",
|
||||||
|
top: theme.spacing[1],
|
||||||
|
right: isWeb ? theme.spacing[3] : theme.spacing[6],
|
||||||
|
},
|
||||||
sectionHeadingText: {
|
sectionHeadingText: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
fontSize: theme.fontSize.xs,
|
fontSize: theme.fontSize.xs,
|
||||||
|
|||||||
Reference in New Issue
Block a user