feat(ux): cordn status line, payment readiness and image compression

src/components/ListingOffersPanel.tsx

@@ -20,6 +20,7 @@ import { genUserName } from '@/lib/genUserName';
 import type { MarketplaceItem } from '@/lib/types';
 import { PayWithSats } from '@/components/PayWithSats';
 import { MarkSoldDialog } from '@/components/MarkSoldDialog';
+import { PaymentReadinessNote } from '@/components/PaymentReadinessNote';
 import { Handshake, CheckCircle, X, Loader2, ArrowLeftRight, Undo2, Zap } from 'lucide-react';
 import { useTranslation } from '@/contexts/language';
 
@@ -183,6 +184,8 @@ export function ListingOffersPanel({ item, isOwner }: { item: MarketplaceItem; i
           <Handshake className="h-4 w-4" /> {isOwner ? t('marketUi.offers.titleOwner', { count: mine.length }) : t('marketUi.offers.titleBuyer')}
         </h3>
 
+        {isOwner && <PaymentReadinessNote />}
+
         {mine.map((thread) => {
           const latest = thread.latest;
           const other = latest.author === user.pubkey

src/components/PaymentReadinessNote.tsx

@@ -58,7 +58,7 @@ export function PaymentReadinessNote() {
           <AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0 text-yellow-400" />
           <span>
             {t('marketUi.paymentReadiness.notReadyBefore')}{' '}
-            <Link to="/settings" className="text-yellow-400 underline hover:text-yellow-300">
+            <Link to="/settings?section=profile" className="text-yellow-400 underline hover:text-yellow-300">
               {t('marketUi.paymentReadiness.nostrProfile')}
             </Link>{' '}
             {t('marketUi.paymentReadiness.notReadyAfter')}

src/components/crew/CordnNativePanel.tsx

@@ -814,6 +814,11 @@ export function CordnNativePanel({
           </div>
         </div>
         <p className="pt-1 text-xs text-gray-500">{copy.subtitle}</p>
+        {native.group && native.lastCheckedAt && (
+          <p className="pt-0.5 text-[10px] text-gray-600">
+            {t('cordnUi.lastChecked')} {formatDistanceToNow(new Date(native.lastCheckedAt), { addSuffix: true })}
+          </p>
+        )}
         {!isCommunity && (
           <details className="group mt-1 rounded-md border border-white/10 bg-black/20 px-2.5 py-1.5">
             <summary className="flex cursor-pointer list-none items-center gap-1 text-[11px] text-gray-400">

src/hooks/useUploadFile.ts

@@ -47,6 +47,41 @@ function validateImage(file: File): void {
   }
 }
 
+/**
+ * Resize/compress camera photos before upload. Most phone photos are far larger
+ * than the app ever displays; 1600px WebP cuts upload time and Blossom storage
+ * without touching GIFs or formats the WebView cannot decode.
+ */
+async function prepareImage(file: File): Promise<File> {
+  const type = (file.type || '').toLowerCase();
+  if (type === 'image/gif' || type === 'image/heic' || type === 'image/heif') return file;
+  if (typeof createImageBitmap !== 'function' || typeof document === 'undefined') return file;
+  try {
+    const bitmap = await createImageBitmap(file);
+    const scale = Math.min(1, 1600 / Math.max(bitmap.width, bitmap.height));
+    // Already small enough: keep the original bytes/format.
+    if (scale === 1 && file.size <= 1_200_000) {
+      bitmap.close();
+      return file;
+    }
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.max(1, Math.round(bitmap.width * scale));
+    canvas.height = Math.max(1, Math.round(bitmap.height * scale));
+    const ctx = canvas.getContext('2d');
+    if (!ctx) { bitmap.close(); return file; }
+    ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+    bitmap.close();
+    const blob = await new Promise<Blob | null>((resolve) => {
+      canvas.toBlob(resolve, 'image/webp', 0.84);
+    });
+    if (!blob || blob.size >= file.size) return file;
+    const base = file.name.replace(/\.[^.]+$/, '') || 'image';
+    return new File([blob], `${base}.webp`, { type: 'image/webp', lastModified: file.lastModified });
+  } catch {
+    return file;
+  }
+}
+
 function hostOf(url: string): string {
   try {
     return new URL(url).hostname;
@@ -65,6 +100,7 @@ export function useUploadFile() {
       }
 
       validateImage(file);
+      const prepared = await prepareImage(file);
 
       const uploader = new BlossomUploader({
         servers: UPLOAD_SERVERS,
@@ -73,7 +109,7 @@ export function useUploadFile() {
 
       let tags;
       try {
-        tags = await uploader.upload(file);
+        tags = await uploader.upload(prepared);
       } catch (error) {
         throw new Error(uploadErrorMessage(error));
       }

src/pages/CreateListingPage.tsx

@@ -21,6 +21,7 @@ import { useListingRestrictions, recordListingCreation } from '@/hooks/useListin
 import { LoginArea } from '@/components/auth/LoginArea';
 import { Nip05Required } from '@/components/Nip05Required';
 import { SpamFeePayment } from '@/components/SpamFeePayment';
+import { PaymentReadinessNote } from '@/components/PaymentReadinessNote';
 import { MARKETPLACE_ITEM_KIND, GEAR_CATEGORIES, GEAR_CONDITIONS, PRICE_TYPES, SIZE_OPTIONS, TRUCK_HEIGHTS, WHEEL_HARDNESS, EXPIRATION_OPTIONS, CURRENCY_OPTIONS, CATEGORY_REQUIRED_FIELDS } from '@/lib/types';
 import { GEAR_CATEGORY_KEYS, GEAR_CONDITION_KEYS, GEAR_CONDITION_DESC_KEYS, PRICE_TYPE_KEYS, PRICE_TYPE_DESC_KEYS } from '@/lib/labelKeys';
 import { ShoppingBag, Upload, X, Loader2, ArrowLeft, MapPin, AlertTriangle, CheckCircle, Search, Clock, Shield, Zap } from 'lucide-react';
@@ -857,6 +858,8 @@ export default function CreateListingPage() {
                 ))}
               </div>
 
+              {listingType === 'selling' && <PaymentReadinessNote />}
+
               {priceType === 'fixed' && (
                 <div className="grid grid-cols-3 gap-4">
                   <div className="col-span-2 space-y-2">