mobile enhancements

src/components/WalletModal.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Wallet, Plus, Trash2, Zap, Globe, WalletMinimal, CheckCircle } from 'lucide-react';
+import { Wallet, Plus, Trash2, Zap, Globe, WalletMinimal, CheckCircle, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -10,6 +10,15 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog';
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+  DrawerClose,
+} from '@/components/ui/drawer';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
@@ -18,6 +27,7 @@ import { Separator } from '@/components/ui/separator';
 import { useNWC } from '@/hooks/useNWCContext';
 import { useWallet } from '@/hooks/useWallet';
 import { useToast } from '@/hooks/useToast';
+import { useIsMobile } from '@/hooks/useIsMobile';
 
 interface WalletModalProps {
   children?: React.ReactNode;
@@ -30,6 +40,7 @@ export function WalletModal({ children, className }: WalletModalProps) {
   const [connectionUri, setConnectionUri] = useState('');
   const [alias, setAlias] = useState('');
   const [isConnecting, setIsConnecting] = useState(false);
+  const isMobile = useIsMobile();
 
   const {
     connections,
@@ -81,28 +92,9 @@ export function WalletModal({ children, className }: WalletModalProps) {
     });
   };
 
-  return (
+  // Shared content component
-    <Dialog open={open} onOpenChange={setOpen}>
+  const WalletContent = () => (
-      <DialogTrigger asChild>
+    <div className="space-y-6 px-4 pb-4">
-        {children || (
-          <Button variant="outline" size="sm" className={className}>
-            <Wallet className="h-4 w-4 mr-2" />
-            Wallet Settings
-          </Button>
-        )}
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-[500px] max-h-[80vh] overflow-y-auto">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <Wallet className="h-5 w-5" />
-            Lightning Wallet
-          </DialogTitle>
-          <DialogDescription>
-            Connect your lightning wallet to send zaps instantly.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-6">
       {/* Current Status */}
       <div className="space-y-3">
         <h3 className="font-medium">Current Status</h3>
@@ -162,14 +154,14 @@ export function WalletModal({ children, className }: WalletModalProps) {
                 Add
               </Button>
             </DialogTrigger>
-                <DialogContent>
+            <DialogContent className="sm:max-w-[425px]">
               <DialogHeader>
                 <DialogTitle>Connect NWC Wallet</DialogTitle>
                 <DialogDescription>
                   Enter your connection string from a compatible wallet.
                 </DialogDescription>
               </DialogHeader>
-                  <div className="space-y-4">
+              <div className="space-y-4 px-4">
                 <div>
                   <Label htmlFor="alias">Wallet Name (optional)</Label>
                   <Input
@@ -190,10 +182,11 @@ export function WalletModal({ children, className }: WalletModalProps) {
                   />
                 </div>
               </div>
-                  <DialogFooter>
+              <DialogFooter className="px-4">
                 <Button
                   onClick={handleAddConnection}
                   disabled={isConnecting || !connectionUri.trim()}
+                  className="w-full"
                 >
                   {isConnecting ? 'Connecting...' : 'Connect'}
                 </Button>
@@ -263,6 +256,70 @@ export function WalletModal({ children, className }: WalletModalProps) {
         </>
       )}
     </div>
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>
+          {children || (
+            <Button variant="outline" size="sm" className={className}>
+              <Wallet className="h-4 w-4 mr-2" />
+              Wallet Settings
+            </Button>
+          )}
+        </DrawerTrigger>
+        <DrawerContent className="max-h-[90vh]">
+          <DrawerHeader className="text-center relative">
+            {/* Close button */}
+            <DrawerClose asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="absolute right-4 top-4"
+              >
+                <X className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+              </Button>
+            </DrawerClose>
+
+            <DrawerTitle className="flex items-center justify-center gap-2 pt-2">
+              <Wallet className="h-5 w-5" />
+              Lightning Wallet
+            </DrawerTitle>
+            <DrawerDescription>
+              Connect your lightning wallet to send zaps instantly.
+            </DrawerDescription>
+          </DrawerHeader>
+          <div className="overflow-y-auto">
+            <WalletContent />
+          </div>
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {children || (
+          <Button variant="outline" size="sm" className={className}>
+            <Wallet className="h-4 w-4 mr-2" />
+            Wallet Settings
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[500px] max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Wallet className="h-5 w-5" />
+            Lightning Wallet
+          </DialogTitle>
+          <DialogDescription>
+            Connect your lightning wallet to send zaps instantly.
+          </DialogDescription>
+        </DialogHeader>
+        <WalletContent />
       </DialogContent>
     </Dialog>
   );

src/components/ZapDialog.tsx

@@ -1,15 +1,23 @@
 import { useState, useEffect, useRef } from 'react';
-import { Zap, Copy, Check, ExternalLink, Sparkle, Sparkles, Star, Rocket } from 'lucide-react';
+import { Zap, Copy, Check, ExternalLink, Sparkle, Sparkles, Star, Rocket, ArrowLeft, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
   DialogDescription,
-  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog';
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+  DrawerClose,
+} from '@/components/ui/drawer';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
@@ -21,6 +29,7 @@ import { useAuthor } from '@/hooks/useAuthor';
 import { useToast } from '@/hooks/useToast';
 import { useZaps } from '@/hooks/useZaps';
 import { useWallet } from '@/hooks/useWallet';
+import { useIsMobile } from '@/hooks/useIsMobile';
 import type { Event } from 'nostr-tools';
 import QRCode from 'qrcode';
 
@@ -50,6 +59,7 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
   const [copied, setCopied] = useState(false);
   const [qrCodeUrl, setQrCodeUrl] = useState<string>('');
   const inputRef = useRef<HTMLInputElement>(null);
+  const isMobile = useIsMobile();
 
   useEffect(() => {
     if (target) {
@@ -120,53 +130,30 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
     zap(finalAmount, comment);
   };
 
-  if (!user || user.pubkey === target.pubkey || !author?.metadata?.lud06 && !author?.metadata?.lud16) {
+  // Shared content component
-    return null;
+  const ZapContent = () => (
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <div className={`cursor-pointer ${className || ''}`}>
-          {children}
-        </div>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]" data-testid="zap-modal">
-        <DialogHeader>
-          <DialogTitle>{invoice ? 'Lightning Payment' : 'Send a Zap'}</DialogTitle>
-          <DialogDescription>
-            {invoice ? (
-              'Scan the QR code or copy the invoice to pay with any Lightning wallet'
-            ) : (
     <>
-                Zaps are small Bitcoin payments that support the creator of this item.
-                {' '}If you enjoyed this, consider sending a zap!
-              </>
-            )}
-          </DialogDescription>
-        </DialogHeader>
       {invoice ? (
-          <div className="space-y-6 overflow-y-auto max-h-[calc(100vh-200px)] p-1">
+        <div className="space-y-4 px-4 pb-4">
           {/* Payment amount display */}
           <div className="text-center">
             <div className="text-2xl font-bold">{amount} sats</div>
-              <div className="text-sm text-muted-foreground">Lightning Network Payment</div>
           </div>
 
           <Separator />
 
           {/* QR Code */}
           <div className="flex justify-center">
-              <Card className="p-4">
+            <Card className="p-4 max-w-full">
-                <CardContent className="p-0">
+              <CardContent className="p-0 flex justify-center">
                 {qrCodeUrl ? (
                   <img
                     src={qrCodeUrl}
                     alt="Lightning Invoice QR Code"
-                      className="w-64 h-64"
+                    className="w-56 h-56 max-w-full max-h-full object-contain"
                   />
                 ) : (
-                    <div className="w-64 h-64 bg-muted animate-pulse rounded" />
+                  <div className="w-56 h-56 max-w-full bg-muted animate-pulse rounded" />
                 )}
               </CardContent>
             </Card>
@@ -175,12 +162,12 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
           {/* Invoice input */}
           <div className="space-y-2">
             <Label htmlFor="invoice">Lightning Invoice</Label>
-              <div className="flex gap-2">
+            <div className="flex gap-2 min-w-0">
               <Input
                 id="invoice"
                 value={invoice}
                 readOnly
-                  className="font-mono text-xs"
+                className="font-mono text-xs min-w-0 flex-1 overflow-hidden text-ellipsis"
                 onClick={(e) => e.currentTarget.select()}
               />
               <Button
@@ -225,14 +212,14 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
               Open in Lightning Wallet
             </Button>
 
-              <div className="text-xs text-muted-foreground text-center">
+            <div className="text-[.65rem] text-muted-foreground text-center px-2">
-                Scan the QR code or copy the invoice to pay with any Lightning wallet
+              Scan the QR code or copy the invoice to pay with any Lightning wallet.
             </div>
           </div>
         </div>
       ) : (
         <>
-            <div className="grid gap-4 py-4">
+          <div className="grid gap-4 px-4 py-4 w-full overflow-hidden">
             <ToggleGroup
               type="single"
               value={String(amount)}
@@ -241,16 +228,16 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
                   setAmount(parseInt(value, 10));
                 }
               }}
-                className="grid grid-cols-5 gap-2"
+              className="grid grid-cols-5 gap-2 w-full"
             >
               {presetAmounts.map(({ amount: presetAmount, icon: Icon }) => (
                 <ToggleGroupItem
                   key={presetAmount}
                   value={String(presetAmount)}
-                    className="flex flex-col h-auto"
+                  className="flex flex-col h-auto min-w-0 text-sm px-2 py-3"
                 >
-                    <Icon className="h-5 w-5 mb-1.5" />
+                  <Icon className="h-5 w-5 mb-1" />
-                    {presetAmount}
+                  <span className="truncate">{presetAmount}</span>
                 </ToggleGroupItem>
               ))}
             </ToggleGroup>
@@ -266,16 +253,19 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
               placeholder="Custom amount"
               value={amount}
               onChange={(e) => setAmount(e.target.value)}
+              className="w-full"
             />
             <Textarea
               id="custom-comment"
               placeholder="Custom comment"
               value={comment}
               onChange={(e) => setComment(e.target.value)}
+              className="w-full resize-none"
+              rows={3}
             />
           </div>
-            <DialogFooter>
+          <div className="px-4 pb-4">
-              <Button onClick={handleZap} className="w-full" disabled={isZapping}>
+            <Button onClick={handleZap} className="w-full" disabled={isZapping} size="lg">
               {isZapping ? (
                 'Creating invoice...'
               ) : (
@@ -285,9 +275,202 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
                 </>
               )}
             </Button>
-            </DialogFooter>
+          </div>
         </>
       )}
+    </>
+  );
+
+  if (!user || user.pubkey === target.pubkey || !author?.metadata?.lud06 && !author?.metadata?.lud16) {
+    return null;
+  }
+
+  if (isMobile) {
+    // Full screen payment view on mobile
+    if (invoice) {
+      return (
+        <div className="fixed inset-0 z-50 bg-background flex flex-col">
+          {/* Header with back and close buttons */}
+          <div className="flex items-center justify-between p-4 pb-0">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                setInvoice(null);
+                setQrCodeUrl('');
+              }}
+              className="flex items-center gap-2"
+            >
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+
+            <h1 className="text-lg font-semibold">Lightning Payment</h1>
+
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setOpen(false)}
+            >
+              <X className="h-4 w-4" />
+              <span className="sr-only">Close</span>
+            </Button>
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 overflow-y-auto p-4">
+            <div className="space-y-4">
+              {/* Payment amount display */}
+              <div className="text-center">
+                <div className="text-3xl font-bold">{amount} sats</div>
+                <div className="text-sm text-muted-foreground">Lightning Network Payment</div>
+              </div>
+
+              <Separator />
+
+              {/* QR Code */}
+              <div className="flex justify-center">
+                <Card className="p-6 max-w-full">
+                  <CardContent className="p-0 flex justify-center">
+                    {qrCodeUrl ? (
+                      <img
+                        src={qrCodeUrl}
+                        alt="Lightning Invoice QR Code"
+                        className="w-72 h-72 max-w-full max-h-full object-contain"
+                      />
+                    ) : (
+                      <div className="w-72 h-72 max-w-full bg-muted animate-pulse rounded" />
+                    )}
+                  </CardContent>
+                </Card>
+              </div>
+
+              {/* Invoice input */}
+              <div className="space-y-2">
+                <Label htmlFor="invoice">Lightning Invoice</Label>
+                <div className="flex gap-2 min-w-0">
+                  <Input
+                    id="invoice"
+                    value={invoice}
+                    readOnly
+                    className="font-mono text-xs min-w-0 flex-1 overflow-hidden text-ellipsis"
+                    onClick={(e) => e.currentTarget.select()}
+                  />
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    onClick={handleCopy}
+                    className="shrink-0"
+                  >
+                    {copied ? (
+                      <Check className="h-4 w-4 text-green-600" />
+                    ) : (
+                      <Copy className="h-4 w-4" />
+                    )}
+                  </Button>
+                </div>
+              </div>
+
+              {/* Payment buttons */}
+              <div className="space-y-3">
+                {hasWebLN && (
+                  <Button
+                    onClick={() => {
+                      const finalAmount = typeof amount === 'string' ? parseInt(amount, 10) : amount;
+                      zap(finalAmount, comment);
+                    }}
+                    disabled={isZapping}
+                    className="w-full"
+                    size="lg"
+                  >
+                    <Zap className="h-4 w-4 mr-2" />
+                    {isZapping ? "Processing..." : "Pay with WebLN"}
+                  </Button>
+                )}
+
+                <Button
+                  variant="outline"
+                  onClick={openInWallet}
+                  className="w-full"
+                  size="lg"
+                >
+                  <ExternalLink className="h-4 w-4 mr-2" />
+                  Open in Lightning Wallet
+                </Button>
+
+                <div className="text-xs text-muted-foreground text-center px-2">
+                  Scan the QR code or copy the invoice to pay with any Lightning wallet.
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    // Drawer for amount selection on mobile
+    return (
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>
+          <div className={`cursor-pointer ${className || ''}`}>
+            {children}
+          </div>
+        </DrawerTrigger>
+        <DrawerContent className="max-h-[95vh]" data-testid="zap-modal">
+          <DrawerHeader className="text-center relative">
+            {/* Close button */}
+            <DrawerClose asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="absolute right-4 top-4"
+              >
+                <X className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+              </Button>
+            </DrawerClose>
+
+            <DrawerTitle className="text-lg break-words pt-2">
+              Send a Zap
+            </DrawerTitle>
+            <DrawerDescription className="text-sm break-words">
+              Zaps are small Bitcoin payments that support the creator of this item.
+              {' '}If you enjoyed this, consider sending a zap!
+            </DrawerDescription>
+          </DrawerHeader>
+          <div className="overflow-y-auto">
+            <ZapContent />
+          </div>
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <div className={`cursor-pointer ${className || ''}`}>
+          {children}
+        </div>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px] max-h-[95vh] overflow-hidden" data-testid="zap-modal">
+        <DialogHeader>
+          <DialogTitle className="text-lg break-words">
+            {invoice ? 'Lightning Payment' : 'Send a Zap'}
+          </DialogTitle>
+          <DialogDescription className="text-sm break-words">
+            {invoice ? (
+              'Pay with Bitcoin Lightning Network'
+            ) : (
+              <>
+                Zaps are small Bitcoin payments that support the creator of this item.
+                {' '}If you enjoyed this, consider sending a zap!
+              </>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="overflow-y-auto">
+          <ZapContent />
+        </div>
       </DialogContent>
     </Dialog>
   );