Skip to content

Put Reply just off the bubble you're pulling, centred on it #171

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
simonhamp wants to merge 2 commits into
base: main
Choose a base branch
from
+155 −109
Open

Put Reply just off the bubble you're pulling, centred on it #171

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
32397e9
Use the mobile-ui and mobile-air main that swipe-to-reply needs
simonhamp Nov 6, 2026
d6efe91
Put Reply just off the bubble you're pulling, centred on it
simonhamp Nov 6, 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
4 changes: 2 additions & 2 deletions app/NativeComponents/Conversation.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,8 +132,8 @@ class Conversation extends NativeComponent
public const array QuickReactions = ['😂', '✅', '❤️'];

/**
* How far a message is pulled toward its edge before letting go replies to it. Reply comes in over that distance from
* the other side of the thread.
* How far a message is pulled toward its edge before letting go replies to it. Reply grows in beside the bubble over
* that distance.
*/
public const int ReplyPull = 64;

Expand Down
8 changes: 6 additions & 2 deletions composer.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@
"type": "vcs",
"url": "https://github.com/simonhamp/toastkit"
},
{
"type": "vcs",
"url": "https://github.com/NativePHP/mobile-ui"
},
{
"name": "nativephp-plugins",
"type": "composer",
Expand All @@ -33,7 +37,7 @@
"laravel/boost": "^2.0",
"laravel/framework": "^13.0",
"laravel/tinker": "^3.0",
"nativephp/mobile": "^4.7",
"nativephp/mobile": "dev-main as 4.8.0",
"nativephp/mobile-browser": "^1.2",
"nativephp/mobile-camera": "^1.1",
"nativephp/mobile-clipboard": "^1.0",
Expand All @@ -43,7 +47,7 @@
"nativephp/mobile-secure-storage": "^1.1",
"nativephp/mobile-share": "^1.1",
"nativephp/mobile-skia": "^1.0",
"nativephp/mobile-ui": "^0.9",
"nativephp/mobile-ui": "dev-main",
"s2br/nativephp-mobile-splashscreen": "^1.4",
"victorycodedev/toastkit": "dev-fix/android-toasts-above-sheets as 1.4.0"
},
Expand Down
74 changes: 47 additions & 27 deletions composer.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

84 changes: 38 additions & 46 deletions resources/views/native/partials/message-item.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
message the web gives a status, in that status.

Pulling it toward its edge replies to it: someone else's to the left and your own to the right. It follows the
finger that way only, partly off the screen, though a short bubble stops while some of it still shows. Reply slides
in from the other side of the thread as it grows, turns upright and fades in. At Conversation::ReplyPull the phone
finger that way only, partly off the screen, though a short bubble stops while some of it still shows. Reply grows
in a little way off the bubble's other side (see partials/message-swipe-reply). At Conversation::ReplyPull the phone
buzzes lightly; let go there and the composer replies to it and takes the keyboard. It springs back either way. The
pull, the buzz and the spring back all run on the phone, and only the reply comes here. A double tap toggles a
heart. A pinned message keeps its pin beside it. A message still being pushed can't be pulled, and nothing replies
Expand Down Expand Up @@ -49,18 +49,22 @@
@endif

{{--
An image-only message keeps its pin beside its images, and React's quick reactions point at them; otherwise
those go with the bubble. The bubble's row stops short of the far side, so a long message doesn't reach it.
An image-only message keeps its pin and Reply beside its images, and React's quick reactions point at them;
otherwise those go with the bubble. The bubble's row stops short of the far side, so a long message doesn't
reach it.
--}}
@if ($message->images !== [] && $message->body === '')
<native:row ref="content-{{ $key }}" class="w-full gap-1 items-center {{ $mine ? 'justify-end pl-16' : 'justify-start pr-16' }}">
@if ($mine)
@include('native.partials.message-pin')
@endif
@include('native.partials.message-images', ['photosMenu' => $menu])
@if (! $mine)
@include('native.partials.message-pin')
@endif
<native:row ref="bubble-and-pin-{{ $key }}" class="flex-shrink gap-1 items-center">
@if ($mine)
@include('native.partials.message-pin')
@endif
@include('native.partials.message-images', ['photosMenu' => $menu])
@if (! $mine)
@include('native.partials.message-pin')
@endif
@include('native.partials.message-swipe-reply')
</native:row>
@if ($reactionsFor === $message->id && ! $reactsFromPinned)
@include('native.partials.quick-reactions', ['anchor' => $reactionsAnchor])
@endif
Expand All @@ -72,27 +76,30 @@
@include('native.partials.message-voice')

@if ($message->body !== '')
{{-- The bubble shrinks to wrap short of the far side, and of its pin when it has one. --}}
{{-- The bubble shrinks to wrap short of the far side, and of its pin when it has one. Reply sits just past both. --}}
<native:row ref="content-{{ $key }}" class="w-full gap-1 items-center {{ $mine ? 'justify-end pl-16' : 'justify-start pr-16' }}">
@if ($mine)
@include('native.partials.message-pin')
@endif
@if ($message->isPending())
<native:pressable ref="bubble-{{ $key }}" class="flex-shrink" :context-menu="$menu">
<native:column class="px-3 py-2 rounded-2xl {{ $message->status === 'rejected' ? 'border border-theme-destructive bg-theme-surface' : 'bg-theme-'.$myColour.'/60' }}">
@include('native.partials.message-body', ['ink' => $message->status === 'rejected' ? 'text-theme-ink' : 'text-theme-on-'.$myColour, 'mentionInk' => 'text-theme-on-'.$myColour, 'quoteRule' => $message->status === 'rejected' ? 'border-theme-lane-5' : 'border-theme-on-'.$myColour, 'linkPrefixInk' => $message->status === 'rejected' ? 'text-theme-ink-muted' : 'text-theme-on-'.$myColour.'/70'])
</native:column>
</native:pressable>
@else
<native:pressable ref="bubble-{{ $key }}" class="flex-shrink" @doubleTap="heart({{ $message->id }})" :context-menu="$menu" a11y-hint="{{ $swipeHint }}">
<native:column class="px-3 py-2 rounded-2xl {{ $mine ? 'bg-theme-'.$myColour : 'bg-theme-wash' }}">
@include('native.partials.message-body', ['ink' => $mine ? 'text-theme-on-'.$myColour : 'text-theme-ink', 'mentionInk' => $mine ? 'text-theme-on-'.$myColour : 'text-theme-primary', 'quoteRule' => $mine ? 'border-theme-on-'.$myColour : 'border-theme-lane-5', 'linkPrefixInk' => $mine ? 'text-theme-on-'.$myColour.'/70' : 'text-theme-ink-muted'])
</native:column>
</native:pressable>
@endif
@if (! $mine)
@include('native.partials.message-pin')
@endif
<native:row ref="bubble-and-pin-{{ $key }}" class="flex-shrink gap-1 items-center">
@if ($mine)
@include('native.partials.message-pin')
@endif
@if ($message->isPending())
<native:pressable ref="bubble-{{ $key }}" class="flex-shrink" :context-menu="$menu">
<native:column class="px-3 py-2 rounded-2xl {{ $message->status === 'rejected' ? 'border border-theme-destructive bg-theme-surface' : 'bg-theme-'.$myColour.'/60' }}">
@include('native.partials.message-body', ['ink' => $message->status === 'rejected' ? 'text-theme-ink' : 'text-theme-on-'.$myColour, 'mentionInk' => 'text-theme-on-'.$myColour, 'quoteRule' => $message->status === 'rejected' ? 'border-theme-lane-5' : 'border-theme-on-'.$myColour, 'linkPrefixInk' => $message->status === 'rejected' ? 'text-theme-ink-muted' : 'text-theme-on-'.$myColour.'/70'])
</native:column>
</native:pressable>
@else
<native:pressable ref="bubble-{{ $key }}" class="flex-shrink" @doubleTap="heart({{ $message->id }})" :context-menu="$menu" a11y-hint="{{ $swipeHint }}">
<native:column class="px-3 py-2 rounded-2xl {{ $mine ? 'bg-theme-'.$myColour : 'bg-theme-wash' }}">
@include('native.partials.message-body', ['ink' => $mine ? 'text-theme-on-'.$myColour : 'text-theme-ink', 'mentionInk' => $mine ? 'text-theme-on-'.$myColour : 'text-theme-primary', 'quoteRule' => $mine ? 'border-theme-on-'.$myColour : 'border-theme-lane-5', 'linkPrefixInk' => $mine ? 'text-theme-on-'.$myColour.'/70' : 'text-theme-ink-muted'])
</native:column>
</native:pressable>
@endif
@if (! $mine)
@include('native.partials.message-pin')
@endif
@include('native.partials.message-swipe-reply')
</native:row>
@if ($reactionsFor === $message->id && ! $reactsFromPinned)
@include('native.partials.quick-reactions', ['anchor' => $reactionsAnchor])
@endif
Expand Down Expand Up @@ -131,20 +138,5 @@
</native:column>
@if ($replyable)
</native:gesture-area>
{{--
Reply, just past the far side of the thread, comes in with the finger as the message goes the other way:
growing from 40%, turning upright from a quarter turn and fading in, and in place once the pull reaches
ReplyPull. It's off the row, so it never lies over a bubble and follows the finger even where a short
bubble has stopped.
--}}
<native:stack ref="swipe-reply-{{ $key }}" class="absolute top-0 bottom-0 w-[{{ $pull }}] {{ $mine ? '-left-['.$pull.']' : '-right-['.$pull.']' }}" center
:translate-x="$pan"
:scale="$mine ? $pan->interpolate([0, $pull], [0.4, 1]) : $pan->interpolate([-$pull, 0], [1, 0.4])"
:rotate="$mine ? $pan->interpolate([0, $pull], [-90, 0]) : $pan->interpolate([-$pull, 0], [0, 90])"
:opacity="$mine ? $pan->interpolate([0, $pull], [0, 1]) : $pan->interpolate([-$pull, 0], [1, 0])">
<native:stack :width="30" :height="30" center class="rounded-full bg-theme-wash">
<native:icon :ios="\App\Icons\Lucide::Reply->ios()" :android="\App\Icons\Lucide::Reply->android()" :size="16" class="text-theme-ink-muted" />
</native:stack>
</native:stack>
@endif
</native:row>
17 changes: 17 additions & 0 deletions resources/views/native/partials/message-swipe-reply.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{{--
Reply, a little way past the bubble on the side a pull uncovers (past its pin when it has one), so it's where you're
looking. It's laid over the bubble's row as the row is tall, so it's centred on the bubble, and it goes with it. It
grows from 40%, turns upright from a quarter turn and fades in as the pull goes, and is in place at
Conversation::ReplyPull. Lying over the row rather than in it, it takes none of the bubble's room on either
platform, so the bubble wraps where it would without it.
--}}
@if ($replyable)
<native:stack ref="swipe-reply-{{ $key }}" class="absolute top-0 bottom-0 w-[30] {{ $mine ? '-left-[38]' : '-right-[38]' }}" center
:scale="$mine ? $pan->interpolate([0, $pull], [0.4, 1]) : $pan->interpolate([-$pull, 0], [1, 0.4])"
:rotate="$mine ? $pan->interpolate([0, $pull], [-90, 0]) : $pan->interpolate([-$pull, 0], [0, 90])"
:opacity="$mine ? $pan->interpolate([0, $pull], [0, 1]) : $pan->interpolate([-$pull, 0], [1, 0])">
<native:stack :width="30" :height="30" center class="rounded-full bg-theme-wash">
<native:icon :ios="\App\Icons\Lucide::Reply->ios()" :android="\App\Icons\Lucide::Reply->android()" :size="16" class="text-theme-ink-muted" />
</native:stack>
</native:stack>
@endif
Loading
Loading