loki5512344
fd2e29cede
Task 12 batch around the existing crop/preview flow: - Success Notice (auto-dismiss ~2.5s) after an avatar upload. - "Reposition" re-crops the current avatar without re-picking a file. - Drag & drop an image straight onto the profile avatar circle. - Real upload progress via a new XHR-backed api.upload (fetch has none); refreshOnce now also stores the renewed token (reload-restore fix). - Local avatar history (last 5, IndexedDB, this-device-only) strip that re-uploads a stored crop. Stored as ArrayBuffer (Blob is not cloneable under structuredClone); label makes the per-device scope explicit. - Added a "success" tone to Notice. Infra (same session): registered @shared/@features/@pages/@app/@test path aliases in vite.config + tsconfigs and rewrote deep ../../../ imports; moved avatar components into components/avatar/ to keep folders at <=4 files. Tests: avatarHistory cap/order, recrop visibility, drop-opens-cropper, client upload/progress/401-retry. bun test 103 pass, lint 0 errors, build ok.
33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
import { useTranslation } from 'react-i18next'
|
|
import { LinkDeviceForm } from '@features/device-link/LinkDeviceForm'
|
|
import { PageTitle } from '@shared/layout/PageTitle'
|
|
|
|
const STEPS = ['one', 'two', 'three'] as const
|
|
|
|
export default function LinkPage() {
|
|
const { t } = useTranslation('deviceLink')
|
|
return (
|
|
<section className="flex flex-col gap-8 py-12">
|
|
<PageTitle lead={t('page.lead')}>{t('page.title')}</PageTitle>
|
|
|
|
<ol className="flex flex-col gap-3 sm:flex-row sm:gap-4">
|
|
{STEPS.map((step, i) => (
|
|
<li
|
|
key={step}
|
|
className="flex flex-1 items-start gap-3 rounded-(--radius-panel) border border-shoal bg-slate/60 px-4 py-3"
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
className="flex h-6 w-6 flex-none items-center justify-center rounded-full bg-ice font-code text-sm font-bold text-abyss"
|
|
>
|
|
{i + 1}
|
|
</span>
|
|
<p className="text-sm text-frost">{t(`steps.${step}`)}</p>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
|
|
<LinkDeviceForm />
|
|
</section>
|
|
)
|
|
}
|