MichilisandClaude Opus 5
e4eb1617d1
GSAP carries the counter roll-ups, the bandeja card physics, the dialog transitions and the three success moments FLOWS.md allows. Every one of them checks prefers-reduced-motion first and does nothing when it is set. boneyard and canvas-ui are not what SPEC.md's stack table says they are: on npm the names belong to two abandoned projects that do neither job. The skeletons were already ours; the two canvas spots are now sixty lines each with no dependency. DECISIONS.md records the substitution. The app installs, keeps a scan taken with no network in IndexedDB and sends it when there is one, falls back to a page that explains itself, and can push a deadline notice. Reading the log of what is queued is the source of truth, so the notice clears when the capture actually lands. The CSP now allows scripts by per-request nonce rather than by 'unsafe-inline'. That forced /offline to render per request: a prerendered page carries a build-time nonce no live policy matches, so its scripts were blocked and it never hydrated. Two crashes fixed on the way. web-push throws on a VAPID subject that is not https: or mailto:, and the code handed it APP_PUBLIC_URL, so any machine with push keys died at boot; a misconfigured optional channel now switches itself off and says why. And a subscription the push service answers 410 for is deleted rather than retried forever. Lighthouse on the production build: accessibility 100, best practices 96, SEO 100, performance 73. The performance number is not trustworthy on this machine and DECISIONS.md says why; total blocking time did fall from 17.6s to 1.7s once the hero canvas stopped drawing at full resolution every frame and the landing page stopped importing GSAP. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import { isApiError } from '@impuestos/contracts';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card } from '@/components/ui/card';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
import { useT } from '@/i18n/t';
|
|
import { api } from '@/lib/api';
|
|
import { DangerZone } from './danger-zone';
|
|
import { InstallPrompt } from '@/components/install-prompt';
|
|
import { Reveal } from '@/components/ui/reveal';
|
|
import { DependentsSection } from './dependents-section';
|
|
import { IdentitySection } from './identity-section';
|
|
import { NotificationsSection } from './notifications-section';
|
|
|
|
/**
|
|
* Flow E3. This screen is the trust feature: what we hold, who saw it, and the two
|
|
* buttons that take it all back. Everything on it is reachable in one scroll.
|
|
*/
|
|
export function ProfileScreen() {
|
|
const t = useT();
|
|
|
|
const profile = useQuery({
|
|
queryKey: ['me'],
|
|
queryFn: ({ signal }) => api.getProfile(signal),
|
|
retry: (count, error) => !isApiError(error) && count < 1,
|
|
});
|
|
|
|
if (profile.isPending) {
|
|
return (
|
|
<div className="space-y-4 py-4">
|
|
<Card>
|
|
<Skeleton name="profile-section" />
|
|
</Card>
|
|
<Card>
|
|
<Skeleton name="profile-section" />
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (profile.isError) {
|
|
const notSetUp = isApiError(profile.error) && profile.error.code === 'not_found';
|
|
return (
|
|
<Card className="my-4 space-y-3">
|
|
<p role="alert" className="text-sm">
|
|
{notSetUp ? t('setup.step1.title') : t('common.error.generic')}
|
|
</p>
|
|
<Button type="button" onClick={() => void profile.refetch()}>
|
|
{t('common.retry')}
|
|
</Button>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Reveal className="space-y-4 py-4">
|
|
<h1 className="text-2xl font-semibold tracking-tight">{t('profile.title')}</h1>
|
|
<IdentitySection profile={profile.data} />
|
|
<DependentsSection />
|
|
<NotificationsSection profile={profile.data} />
|
|
<InstallPrompt />
|
|
<DangerZone />
|
|
</Reveal>
|
|
);
|
|
}
|