From b1f85bc33e939c32ebc15c58409cfb23cb362771 Mon Sep 17 00:00:00 2001
From: Jakob Wennberg <149234542+jakobwennberg@users.noreply.github.com>
Date: Thu, 9 Jul 2026 11:05:40 +0200
Subject: [PATCH] fix(inbox): stop the onboarding card rendering twice below xl
 (#944)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(inbox): stop the onboarding card rendering twice below xl

The Dokumentinkorg workspace is a 3-pane master-detail grid that
collapses to a single stacked column below the xl breakpoint. With an
empty inbox the "Så funkar dokumentinkorgen" onboarding card rendered
in both the list pane (compact) and the main preview pane, because the
preview pane was never hidden when stacked. So on viewports under
1280px (narrow or split windows, smaller laptops) the same card showed
twice.

Hide the preview and fields panes below xl when the inbox is empty so
the list's compact card is the single onboarding surface. At xl+ the
3-pane layout is unchanged: quiet empty list plus one centered card.

Also align both loading skeletons (WorkspaceSkeleton and the
e/[sector]/[slug] route skeleton) to the same xl breakpoint; they
previously collapsed at md/lg, causing a 3-pane to 1-pane snap between
768 and 1280px while the workspace loaded.

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

* refactor(inbox): use existing hasAnyItem for empty-state checks

Address CodeRabbit review: the empty-inbox condition was re-derived as
`items.length === 0` in three spots (list pane, preview pane, fields
rail) while `hasAnyItem = items.length > 0` already exists. Reuse
`!hasAnyItem` in all three so "empty" has a single source of truth.
Behavior-preserving.

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

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/(dashboard)/e/[sector]/[slug]/loading.tsx |  8 ++--
 .../general/InvoiceInboxWorkspace.tsx         | 37 ++++++++++++-------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/app/(dashboard)/e/[sector]/[slug]/loading.tsx b/app/(dashboard)/e/[sector]/[slug]/loading.tsx
index c4aaff45..60115268 100644
--- a/app/(dashboard)/e/[sector]/[slug]/loading.tsx
+++ b/app/(dashboard)/e/[sector]/[slug]/loading.tsx
@@ -114,8 +114,8 @@ function FullScreenWorkspaceSkeleton() {
           </div>
           <Skeleton className="h-8 w-28 shrink-0" />
         </header>
-        <div className="flex-1 grid grid-cols-1 md:grid-cols-[240px_minmax(0,1fr)_320px] lg:grid-cols-[280px_minmax(0,1fr)_340px] min-h-0">
-          <aside className="border-r overflow-hidden bg-muted/20 pt-3">
+        <div className="flex-1 grid grid-cols-1 xl:grid-cols-[280px_minmax(0,1fr)_340px] min-h-0">
+          <aside className="border-b xl:border-b-0 xl:border-r overflow-hidden bg-muted/20 pt-3">
             <div className="px-3 pb-3 space-y-2 border-b">
               <Skeleton className="h-8 w-full" />
               <div className="flex flex-wrap gap-1">
@@ -140,8 +140,8 @@ function FullScreenWorkspaceSkeleton() {
               ))}
             </ul>
           </aside>
-          <main className="overflow-hidden bg-muted/10 hidden md:block" />
-          <aside className="border-l overflow-hidden hidden md:block" />
+          <main className="overflow-hidden bg-muted/10 hidden xl:block" />
+          <aside className="border-l overflow-hidden hidden xl:block" />
         </div>
       </div>
     </div>
diff --git a/components/extensions/general/InvoiceInboxWorkspace.tsx b/components/extensions/general/InvoiceInboxWorkspace.tsx
index 07fabe37..51c33ed1 100644
--- a/components/extensions/general/InvoiceInboxWorkspace.tsx
+++ b/components/extensions/general/InvoiceInboxWorkspace.tsx
@@ -165,8 +165,8 @@ function WorkspaceSkeleton() {
           </div>
           <Skeleton className="h-8 w-28 shrink-0" />
         </header>
-        <div className="flex-1 grid grid-cols-1 md:grid-cols-[240px_minmax(0,1fr)_320px] lg:grid-cols-[280px_minmax(0,1fr)_340px] min-h-0">
-          <aside className="border-r overflow-hidden bg-muted/20 pt-3">
+        <div className="flex-1 grid grid-cols-1 xl:grid-cols-[280px_minmax(0,1fr)_340px] min-h-0">
+          <aside className="border-b xl:border-b-0 xl:border-r overflow-hidden bg-muted/20 pt-3">
             <div className="px-3 pb-3 space-y-2 border-b">
               <Skeleton className="h-8 w-full" />
               <div className="flex flex-wrap gap-1">
@@ -191,8 +191,8 @@ function WorkspaceSkeleton() {
               ))}
             </ul>
           </aside>
-          <main className="overflow-hidden bg-muted/10 hidden md:block" />
-          <aside className="border-l overflow-hidden hidden md:block" />
+          <main className="overflow-hidden bg-muted/10 hidden xl:block" />
+          <aside className="border-l overflow-hidden hidden xl:block" />
         </div>
       </div>
     </div>
@@ -910,13 +910,13 @@ export default function InvoiceInboxWorkspace(_props: WorkspaceComponentProps) {
               </div>
             </div>
           )}
-          {items.length === 0 ? (
+          {!hasAnyItem ? (
             // 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.
+            // Below xl the panes stack into one feed, so the sibling preview
+            // and fields panes are hidden when the inbox is empty (see their
+            // classNames): this list is the only onboarding surface there.
+            // So: compact card on mobile only, quiet empty state on desktop.
             showOnboarding ? (
               <>
                 <div className="xl:hidden">
@@ -965,9 +965,15 @@ export default function InvoiceInboxWorkspace(_props: WorkspaceComponentProps) {
           )}
         </aside>
 
-        {/* Document preview (hero) */}
+        {/* Document preview (hero). When the inbox is empty there is nothing
+            to preview and no row can be selected, so below xl (stacked feed)
+            this pane is hidden: the list's compact onboarding card is the
+            single onboarding surface, avoiding a duplicated card. */}
         <main
-          className="xl:overflow-hidden bg-muted/10 relative xl:block min-h-[55vh] xl:min-h-0"
+          className={cn(
+            'xl:overflow-hidden bg-muted/10 relative xl:block min-h-[55vh] xl:min-h-0',
+            !hasAnyItem && 'hidden xl:block'
+          )}
         >
           {selected ? (
             <DocumentPreview docUrl={docUrl} docMime={docMime} isProcessing={!!selected.isPlaceholder} />
@@ -999,9 +1005,14 @@ export default function InvoiceInboxWorkspace(_props: WorkspaceComponentProps) {
 
         {/* Fields rail. Below xl it stacks below the preview as part of the
             single vertical feed (top border for separation). At xl+ it's the
-            third pane with a left border. */}
+            third pane with a left border. With an empty inbox no row can be
+            selected, so below xl it is hidden to keep the stacked empty state
+            to just the list column. */}
         <aside
-          className="border-t xl:border-t-0 xl:border-l xl:overflow-y-auto pt-4 xl:block pb-4"
+          className={cn(
+            'border-t xl:border-t-0 xl:border-l xl:overflow-y-auto pt-4 xl:block pb-4',
+            !hasAnyItem && 'hidden xl:block'
+          )}
         >
           {selected ? (
             <FieldsRail