fix(inbox): dedupe onboarding card on empty inbox (#446)

* fix(inbox): dedupe onboarding card — show in preview pane only

When the inbox was empty, the OnboardingCard rendered in both the list
column (compact) and the preview pane (full size) at the same time, so
the "Så funkar dokumentinkorgen" explainer appeared twice on a fresh
inbox. Keep the preview-pane version (primary surface, more room) and
let the list column show the standard "Inkorgen är tom" empty state.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(inbox): restore onboarding on mobile empty inbox

Greptile P1 on PR #446: on small screens the layout is a master-detail
toggle defaulting to list view. With items.length === 0 there's no row
to click, so setMobileView('detail') never fires and the user can't
reach the preview-pane onboarding. Result: mobile users on a fresh
inbox saw only "Inkorgen är tom." with no path forward.

Keep the compact list-column card on mobile only (md:hidden) and the
quiet empty-state line on desktop, so the preview pane stays the
single source of the explainer on md+.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jakob Wennberg
2026-05-12 13:25:48 +02:00
committed by GitHub
co-authored by Claude Opus 4.7
parent 17c67fece0
commit 9ad646fa33
@@ -661,17 +661,31 @@ export default function InvoiceInboxWorkspace(_props: WorkspaceComponentProps) {
</div>
)}
{items.length === 0 ? (
// On desktop the preview pane is always visible alongside this
// column, so showing the onboarding card here would duplicate it.
// On mobile the layout is a master-detail toggle and the user is
// stuck on the list view until they pick a row — without a card
// here they'd have no way to reach the explainer at all. So:
// compact card on mobile only, quiet empty state on desktop.
showOnboarding ? (
<OnboardingCard
hasInboxAddress={hasInboxAddress}
hasAnyItem={hasAnyItem}
hasResolvedItem={hasResolvedItem}
onActivateInbox={handleRotateAddress}
onUploadClick={() => fileInputRef.current?.click()}
onDismiss={handleDismissOnboarding}
isActivating={isRotating}
compact
/>
<>
<div className="md:hidden">
<OnboardingCard
hasInboxAddress={hasInboxAddress}
hasAnyItem={hasAnyItem}
hasResolvedItem={hasResolvedItem}
onActivateInbox={handleRotateAddress}
onUploadClick={() => fileInputRef.current?.click()}
onDismiss={handleDismissOnboarding}
isActivating={isRotating}
compact
/>
</div>
<div className="hidden md:block p-6 text-center text-sm text-muted-foreground">
<Inbox className="h-6 w-6 mx-auto mb-2 opacity-50" />
Inkorgen är tom.
</div>
</>
) : (
<div className="p-6 text-center text-sm text-muted-foreground">
<Inbox className="h-6 w-6 mx-auto mb-2 opacity-50" />