Skip to content

fix(mobile): keep composer attachments above the draft #25349

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
flamboh wants to merge 2 commits into
base: main
Choose a base branch
from
+37 −72
Open

fix(mobile): keep composer attachments above the draft #25349

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a7d4b76
fix(mobile): keep composer attachments above the draft instead of mov…
flamboh Oct 26, 2026
446ce62
fix(mobile): animate the composer card when the first attachment is a…
flamboh Oct 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 10 additions & 21 deletions apps/mobile/src/components/ComposerAttachmentStrip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ type ComposerAttachmentThumbnailProps = {
readonly attachment: DraftComposerAttachment;
readonly size: number;
readonly borderRadius: number;
readonly compact?: boolean;
readonly onPressPreview?: (source: FilePreviewSource) => void;
readonly onPressVideo?: (
attachment: DraftComposerFileAttachment,
Expand All @@ -55,7 +54,7 @@ type ComposerAttachmentThumbnailProps = {
readonly onPressDocument?: (attachment: DraftComposerFileAttachment) => void;
};

export function ComposerAttachmentThumbnail(props: ComposerAttachmentThumbnailProps) {
function ComposerAttachmentThumbnail(props: ComposerAttachmentThumbnailProps) {
const upload = useComposerAttachmentUploadState(props.environmentId, props.attachment.id);
return (
<View style={{ width: props.size, height: props.size }}>
Expand All @@ -78,15 +77,13 @@ export function ComposerAttachmentThumbnail(props: ComposerAttachmentThumbnailPr
>
<SymbolView
name={upload.status === "failed" ? "arrow.clockwise" : "arrow.up"}
size={props.compact ? 8 : 10}
size={10}
tintColor="#ffffff"
type="monochrome"
/>
{!props.compact ? (
<Text className="text-2xs text-white">
{upload.status === "failed" ? "Retry" : `${Math.floor(upload.progress * 100)}%`}
</Text>
) : null}
<Text className="text-2xs text-white">
{upload.status === "failed" ? "Retry" : `${Math.floor(upload.progress * 100)}%`}
</Text>
</Pressable>
) : null}
</View>
Expand Down Expand Up @@ -248,19 +245,13 @@ function ComposerFileAttachment(
})
: onPressDocument?.(attachment)
}
className={
props.compact
? "items-center justify-center bg-subtle"
: "items-center justify-center gap-1 bg-subtle px-2"
}
className="items-center justify-center gap-1 bg-subtle px-2"
style={style}
>
<PierreEntryIcon path={attachment.name} kind="file" size={props.compact ? 15 : 22} />
{!props.compact ? (
<Text className="w-full text-center text-2xs text-foreground" numberOfLines={1}>
{attachment.name}
</Text>
) : null}
<PierreEntryIcon path={attachment.name} kind="file" size={22} />
<Text className="w-full text-center text-2xs text-foreground" numberOfLines={1}>
{attachment.name}
</Text>
</Pressable>
</PresentationSource>
</>
Expand All @@ -271,7 +262,6 @@ function ComposerVideoAttachment(props: {
readonly attachment: DraftComposerFileAttachment;
readonly size: number;
readonly borderRadius: number;
readonly compact?: boolean;
readonly onPressVideo: (
attachment: DraftComposerFileAttachment,
sourceIdentifier: string,
Expand All @@ -295,7 +285,6 @@ function ComposerVideoAttachment(props: {
name={attachment.name}
sourceIdentifier={sourceIdentifier}
thumbnailSource={attachment}
compact={props.compact}
onPress={() => props.onPressVideo(attachment, sourceIdentifier)}
actionsSource={actionsSource}
style={style}
Expand Down
78 changes: 27 additions & 51 deletions apps/mobile/src/features/threads/ThreadComposer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ import {
} from "../../state/composer-attachment-uploads";
import Animated, {
FadeIn,
FadeOut,
type LayoutAnimationFunction,
ReduceMotion,
useAnimatedStyle,
Expand All @@ -67,10 +66,7 @@ import { scopeProjectRef } from "@t3tools/client-runtime/environment";

import { AppText as Text } from "../../components/ui/AppText";
import { ComposerAttachmentButton } from "./ComposerAttachmentButton";
import {
ComposerAttachmentStrip,
ComposerAttachmentThumbnail,
} from "../../components/ComposerAttachmentStrip";
import { ComposerAttachmentStrip } from "../../components/ComposerAttachmentStrip";
import { VideoPreviewModal, type VideoPreviewSource } from "../../components/VideoPreviewModal";
import { GlassSurface } from "../../components/ui/GlassSurface";
import { ComposerEditor, type ComposerEditorHandle } from "../../components/ComposerEditor";
Expand Down Expand Up @@ -598,9 +594,11 @@ export const ThreadComposer = function ThreadComposer(props: ThreadComposerProps
const isExpanded = isFocused || settingsSheetPresentation.keepsComposerExpanded;
const { setComposerEditing } = useAdaptiveWorkspaceLayout();
const hasSidebarTabBar = useSidebarWorkspaceTabs() === "picker";
const [compactRowWidth, setCompactRowWidth] = useState(0);
const compactAttachmentLimit = compactRowWidth >= 500 ? 3 : 1;
const compactEditor = useCompactComposerEditor(bodyText, draftMessage);
const attachmentsHeight = useSharedValue(-1);
const attachmentsStyle = useAnimatedStyle(() => ({
height: Math.max(0, attachmentsHeight.value),
}));
const showsCompactDictation = isVoiceInputPresented;
const isToolbarVisible = isVoiceInputPresented;
const hasEditingAttachments =
Expand Down Expand Up @@ -804,11 +802,7 @@ export const ThreadComposer = function ThreadComposer(props: ThreadComposerProps
const editingAttachments = hasEditingAttachments ? (
<>
{queuedEdit !== null && queuedEdit.existingAttachments.length > 0 ? (
<Animated.View
className="px-[14px] pb-2.5 pt-2"
entering={COMPOSER_ATTACHMENT_ENTERING}
exiting={FadeOut.duration(120)}
>
<Animated.View className="px-[14px] pb-2.5 pt-2" entering={COMPOSER_ATTACHMENT_ENTERING}>
<ComposerQueuedEditAttachments
environmentId={props.environmentId}
attachments={queuedEdit.existingAttachments}
Expand All @@ -818,11 +812,7 @@ export const ThreadComposer = function ThreadComposer(props: ThreadComposerProps
</Animated.View>
) : null}
{stripAttachments.length > 0 ? (
<Animated.View
className="px-[14px] pb-2.5 pt-2"
entering={COMPOSER_ATTACHMENT_ENTERING}
exiting={FadeOut.duration(120)}
>
<Animated.View className="px-[14px] pb-2.5 pt-2" entering={COMPOSER_ATTACHMENT_ENTERING}>
<ComposerAttachmentStrip
environmentId={props.environmentId}
attachments={stripAttachments}
Expand Down Expand Up @@ -939,13 +929,25 @@ export const ThreadComposer = function ThreadComposer(props: ThreadComposerProps
paddingVertical: hasSidebarTabBar ? 9 : 2,
}}
>
{isExpanded ? editingAttachments : null}
<View
onLayout={(event) => {
compactEditor.onRowLayout(event);
setCompactRowWidth(event.nativeEvent.layout.width);
}}
>
<Animated.View className="overflow-hidden" style={attachmentsStyle}>
<View
className="absolute inset-x-0 bottom-0"
onLayout={(event) => {
const height = event.nativeEvent.layout.height;
attachmentsHeight.set(
attachmentsHeight.get() < 0 || Platform.OS === "android"
? height
: withTiming(height, {
duration: COMPOSER_TRANSITION_DURATION_MS,
reduceMotion: ReduceMotion.System,
}),
);
}}
>
{editingAttachments}
</View>
</Animated.View>
<View onLayout={compactEditor.onRowLayout}>
<ComposerDictationDraftContent
className="flex-row items-end"
compact
Expand All @@ -965,38 +967,12 @@ export const ThreadComposer = function ThreadComposer(props: ThreadComposerProps
onLayout={compactEditor.onEditorLayout}
style={[
{
minWidth:
compactEditor.isExpanded || stripAttachments.length > 0
? 0
: INLINE_EDITOR_MIN_WIDTH,
minWidth: compactEditor.isExpanded ? 0 : INLINE_EDITOR_MIN_WIDTH,
},
compactEditor.containerStyle,
compactEditor.isExpanded ? { flex: 0, width: 0 } : undefined,
]}
></Animated.View>
{!isExpanded && stripAttachments.length > 0 ? (
<View className="h-[44px] shrink-0 flex-row items-center gap-1 pl-1">
{stripAttachments.slice(0, compactAttachmentLimit).map((attachment) => (
<ComposerAttachmentThumbnail
environmentId={props.environmentId}
key={attachment.id}
attachment={attachment}
size={30}
borderRadius={8}
compact
onPressPreview={isSubmissionLocked ? undefined : onPressPreview}
onPressVideo={isSubmissionLocked ? undefined : onPressVideo}
/>
))}
{stripAttachments.length > compactAttachmentLimit ? (
<View className="size-[30px] items-center justify-center rounded-lg bg-subtle-strong">
<Text className="text-foreground-muted text-2xs font-t3-bold">
+{stripAttachments.length - compactAttachmentLimit}
</Text>
</View>
) : null}
</View>
) : null}
<View
className="min-w-0 shrink flex-row items-center"
style={
Expand Down
Loading