tensamin/client
Watch
6
0
Fork
You've already forked client
 0
Code Issues Pull requests 3 Projects Releases 2 Packages Wiki Activity Actions

feat(mobile): use drawer for gif picker
Some checks failed
/ build-desktop (linux) (push) Failing after 6m36s
Details
/ build-web (push) Failing after 7m7s
Details
/ build-mobile (push) Failing after 9m21s
Details
/ release (push) Has been skipped
Details

Browse source 
fix(mobile): some ui bugs
fix(mobile): disable pinch zooming
This commit is contained in:
Alois 2026-08-12 02:16:56 +02:00
commit 6e977bca7e
Signed by: alois
SSH key fingerprint: SHA256:GBzT2DXvAuGV9XIV5W3WrzVpjU54FThmxHXdbz95J24
9 changed files with 436 additions and 259 deletions
Download patch file Download diff file Expand all files Collapse all files

96
packages/chat/src/components/input.tsx
View file

@ -2,6 +2,11 @@ import { Input, type InputController } from "@methanium/ui/markdown";
import {
Card,
CardHeader,
Drawer,
DrawerContent,
DrawerDescription,
DrawerTitle,
DrawerTrigger,
Popover,
PopoverContent,
PopoverTrigger,
@ -331,42 +336,65 @@ export default function InputComponent({
/>
</PopoverContent>
</Popover>
<Popover open={gifPopoverOpen} onOpenChange={setGifPopoverOpen}>
<PopoverTrigger
render={({ onClick }) => (
<Button
onClick={onClick}
className="w-9 h-9! p-0"
variant="ghost"
>
<FileVideo size={20} />
</Button>
)}
/>
<PopoverContent
ref={gifPopoverRef}
className="relative h-130 w-120 min-h-80 max-h-180 min-w-80 max-w-180 overflow-hidden"
onTouchMoveCapture={(event) => event.stopPropagation()}
onWheelCapture={(event) => event.stopPropagation()}
style={{
...gifPopoverSize,
maxHeight: gifPopoverSize?.height,
}}
>
<div
className="absolute left-0 top-0 z-10 h-4 w-4 cursor-nwse-resize"
onPointerDown={handleGifPopoverResizeStart}
{isMobile ? (
<Drawer open={gifPopoverOpen} onOpenChange={setGifPopoverOpen}>
<DrawerTrigger asChild>
<div>
<Button className="w-9 h-9! p-0" variant="ghost">
<FileVideo size={20} />
</Button>
</div>
</DrawerTrigger>
<DrawerContent className="h-[80dvh]">
<div className="min-h-0 flex-1 p-3">
<GifPicker
onSelect={(url) => {
void handleSubmit(url, true);
setGifPopoverOpen(false);
}}
/>
</div>
</DrawerContent>
</Drawer>
) : (
<Popover open={gifPopoverOpen} onOpenChange={setGifPopoverOpen}>
<PopoverTrigger
render={({ onClick }) => (
<Button
onClick={onClick}
aria-label="Open GIF picker"
className="w-9 h-9! p-0"
variant="ghost"
>
<FileVideo size={20} />
</Button>
)}
/>
<GifPicker
resizeHeight={gifPopoverSize?.height}
resizeWidth={gifPopoverSize?.width}
onSelect={(url) => {
void handleSubmit(url, true);
setGifPopoverOpen(false);
<PopoverContent
ref={gifPopoverRef}
className="relative h-130 w-120 min-h-80 max-h-180 min-w-80 max-w-180 overflow-hidden"
onTouchMoveCapture={(event) => event.stopPropagation()}
onWheelCapture={(event) => event.stopPropagation()}
style={{
...gifPopoverSize,
maxHeight: gifPopoverSize?.height,
}}
/>
</PopoverContent>
</Popover>
>
<div
className="absolute left-0 top-0 z-10 h-4 w-4 cursor-nwse-resize"
onPointerDown={handleGifPopoverResizeStart}
/>
<GifPicker
resizeHeight={gifPopoverSize?.height}
resizeWidth={gifPopoverSize?.width}
onSelect={(url) => {
void handleSubmit(url, true);
setGifPopoverOpen(false);
}}
/>
</PopoverContent>
</Popover>
)}
</div>
</div>
</CardHeader>

4
packages/chat/src/components/media/media.tsx
View file

@ -166,9 +166,9 @@ export default function Media({
<DialogContent
showCloseButton={false}
onWheel={handleWheel}
className="bg-black/50 border-0! w-screen! h-screen! max-w-screen! rounded-none! p-0!"
className="inset-0! h-dvh! w-screen! max-h-none! max-w-none! translate-none! overflow-hidden! rounded-none! border-0! bg-black/50 p-0!"
>
<div className="relative z-10 flex w-full h-full justify-between p-7 items-start pointer-events-none">
<div className="pointer-events-none relative z-10 flex h-full w-full items-start justify-between pt-[max(1.75rem,var(--ui-safe-area-top))] pr-[max(1.75rem,var(--ui-safe-area-right))] pb-[max(1.75rem,var(--ui-safe-area-bottom))] pl-[max(1.75rem,var(--ui-safe-area-left))]">
<div
className={`flex gap-2 items-center transition-opacity duration-200 ${zoomLevel === 0 ? "opacity-100" : "pointer-events-none opacity-0"}`}
inert={zoomLevel !== 0}