tensamin/client
Watch
6
0
Fork
You've already forked client
 0
Code Issues Pull requests 2 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>