fix(ux): popover collision padding, PWA manifest, webhook toasts, portal toast, dashboard error boundary, GDPR poll backoff, empty-state CTA
Grab-bag of UX gaps from audit-pass-#2 + #3. Each one is a small, focused fix; bundled because they touch different surfaces. - Popover: collisionPadding={16} + responsive w-[min(calc(100vw-2rem),18rem)] so popovers stop clipping past the viewport on iPhone 12 portrait. - public/manifest.json (was missing) + manifest reference in layout.tsx — PWA installability now works; icons (192/512/512- maskable) were already present. - Admin webhooks page: 4 silent `// ignore` catches in load/delete/ toggle/regenerate replaced with toast.error / toast.success. Users no longer see a stale list with no feedback when an op fails. - Portal document-download button: blocking alert() → toast.error(). - src/app/(dashboard)/error.tsx: branded error boundary with retry + back-to-dashboard, replacing Next.js's default uncaught-error UI. - GDPR export modal: refetchInterval was a flat 5s while the modal was open. Switched to a function that only polls (every 15s) when a job is actually pending/building; settled exports stop polling entirely. - client-yachts-tab empty state gains a CTA wired to the existing Add-yacht dialog, instead of just saying "No yachts". Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -49,7 +49,11 @@ export function ClientYachtsTab({ clientId: _clientId, yachts }: ClientYachtsTab
|
||||
</div>
|
||||
|
||||
{yachts.length === 0 ? (
|
||||
<EmptyState title="No yachts" description="No yachts owned by this client yet." />
|
||||
<EmptyState
|
||||
title="No yachts yet"
|
||||
description="Track every yacht this client owns or charters here. Linked yachts pre-fill EOIs and surface in the recommender."
|
||||
action={{ label: 'Add yacht', onClick: () => setCreateOpen(true) }}
|
||||
/>
|
||||
) : (
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
|
||||
@@ -62,7 +62,15 @@ export function GdprExportButton({ clientId }: { clientId: string }) {
|
||||
queryKey,
|
||||
queryFn: () => apiFetch<ListResp>(`/api/v1/clients/${clientId}/gdpr-export`),
|
||||
enabled: open && allowed,
|
||||
refetchInterval: open && allowed ? 5_000 : false,
|
||||
// Poll only when the user is watching AND a job is in flight. GDPR
|
||||
// exports take ~30s; 15s is the rule-of-thumb minimum that doesn't
|
||||
// burn CPU. When everything's already settled, stop polling.
|
||||
refetchInterval: (q) => {
|
||||
if (!open || !allowed) return false;
|
||||
const rows = q.state.data?.data ?? [];
|
||||
const hasInFlight = rows.some((r) => r.status === 'pending' || r.status === 'building');
|
||||
return hasInFlight ? 15_000 : false;
|
||||
},
|
||||
});
|
||||
|
||||
const request = useMutation({
|
||||
|
||||
@@ -1,33 +1,37 @@
|
||||
"use client"
|
||||
'use client';
|
||||
|
||||
import * as React from "react"
|
||||
import * as PopoverPrimitive from "@radix-ui/react-popover"
|
||||
import * as React from 'react';
|
||||
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const Popover = PopoverPrimitive.Root
|
||||
const Popover = PopoverPrimitive.Root;
|
||||
|
||||
const PopoverTrigger = PopoverPrimitive.Trigger
|
||||
const PopoverTrigger = PopoverPrimitive.Trigger;
|
||||
|
||||
const PopoverAnchor = PopoverPrimitive.Anchor
|
||||
const PopoverAnchor = PopoverPrimitive.Anchor;
|
||||
|
||||
const PopoverContent = React.forwardRef<
|
||||
React.ElementRef<typeof PopoverPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
|
||||
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
|
||||
>(({ className, align = 'center', sideOffset = 4, collisionPadding = 16, ...props }, ref) => (
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Content
|
||||
ref={ref}
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
// collisionPadding keeps the popover from clipping past the viewport
|
||||
// edge on mobile (390px / iPad portrait). w-72 is a desktop default;
|
||||
// on narrow viewports the calc() ceiling kicks in.
|
||||
collisionPadding={collisionPadding}
|
||||
className={cn(
|
||||
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
|
||||
className
|
||||
'z-50 w-[min(calc(100vw-2rem),18rem)] rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</PopoverPrimitive.Portal>
|
||||
))
|
||||
PopoverContent.displayName = PopoverPrimitive.Content.displayName
|
||||
));
|
||||
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
||||
|
||||
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
|
||||
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
|
||||
|
||||
Reference in New Issue
Block a user