From 0f939a5a039289965c866ed16c4aadc9c6292dfd Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Thu, 10 Sep 2026 09:17:31 -0700
Subject: [PATCH] fix(import): raise the preview's notes above the tree, as
 banners
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

They sat under a long scrolling tree, below the fold on any real import,
which is a poor place for "you are about to make a second copy of this".
Each note is a Banner now, tinted by its level, and the "Import details"
heading goes away with them — a banner needs no introduction.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../components/ImportDataDialog.tsx           | 45 ++++++++-----------
 1 file changed, 19 insertions(+), 26 deletions(-)

diff --git a/apps/yaak-client/components/ImportDataDialog.tsx b/apps/yaak-client/components/ImportDataDialog.tsx
index ebf79669..3ad8db5a 100644
--- a/apps/yaak-client/components/ImportDataDialog.tsx
+++ b/apps/yaak-client/components/ImportDataDialog.tsx
@@ -6,7 +6,7 @@ import {
   type ImportSource,
   type Workspace,
 } from "@yaakapp-internal/models";
-import { HStack, Icon, type IconProps, InlineCode, VStack } from "@yaakapp-internal/ui";
+import { Banner, HStack, Icon, type IconProps, InlineCode, VStack } from "@yaakapp-internal/ui";
 import { platform } from "@yaakapp-internal/platform";
 import classNames from "classnames";
 import { formatDistanceToNowStrict } from "date-fns";
@@ -348,6 +348,24 @@ function LoadedImportDataDialog({
           <PreviewRow label="Destination" value={destinationLabel} />
         </div>
 
+        {plan.warnings.map((warning) => (
+          <Banner
+            key={`${warning.title}:${warning.detail}`}
+            color={warning.level === "warning" ? "warning" : "info"}
+            className="flex items-start gap-2.5"
+          >
+            <Icon
+              icon={warning.level === "warning" ? "alert_triangle" : "info"}
+              size="sm"
+              className="mt-0.5"
+            />
+            <div className="min-w-0">
+              <div className="text-sm font-medium">{warning.title}</div>
+              <div className="text-xs text-text-subtle mt-0.5">{warning.detail}</div>
+            </div>
+          </Banner>
+        ))}
+
         <div className="rounded-lg border border-border-subtle px-3 py-2 overflow-y-auto max-h-[40vh]">
           <CheckboxTree
             node={workspaceRoot}
@@ -363,31 +381,6 @@ function LoadedImportDataDialog({
           />
         </div>
 
-        {plan.warnings.length > 0 && (
-          <div>
-            <div className="text-sm font-semibold mb-1">Import details</div>
-            <div className="rounded-lg border border-border-subtle divide-y divide-border-subtle">
-              {plan.warnings.map((warning) => (
-                <div
-                  key={`${warning.title}:${warning.detail}`}
-                  className="flex items-start gap-2.5 px-3 py-2.5"
-                >
-                  <Icon
-                    icon={warning.level === "warning" ? "alert_triangle" : "info"}
-                    color={warning.level === "warning" ? "warning" : "info"}
-                    size="sm"
-                    className="mt-0.5"
-                  />
-                  <div className="min-w-0">
-                    <div className="text-sm font-medium">{warning.title}</div>
-                    <div className="text-xs text-text-subtle mt-0.5">{warning.detail}</div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-
         <HStack space={2} alignItems="center" className="mt-3">
           {footerNote !== "" && <div className="text-xs text-text-subtle">{footerNote}</div>}
           <Button