From 190403a4689faa31119a15d77bb30e59822811bf Mon Sep 17 00:00:00 2001
From: MOHAN <mohan326856@gmail.com>
Date: Tue, 7 Jul 2026 13:58:54 +0530
Subject: [PATCH] feat: show brands list card per active import source

When a source is selected, a new card appears between the import action
controls and the progress panel showing all brands being imported from
that source as pill chips. Single-brand sources show just the name;
multi-brand sources show a count heading + all brand chips.

Styling: indigo pill chips with dark-mode support via
@media (prefers-color-scheme: dark). No external deps added.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/routes/app._index.jsx           | 22 ++++++++++++++-
 app/styles/app-dashboard.module.css | 44 +++++++++++++++++++++++++++++
 2 files changed, 65 insertions(+), 1 deletion(-)

diff --git a/app/routes/app._index.jsx b/app/routes/app._index.jsx
index 673c2fd..98deffe 100644
--- a/app/routes/app._index.jsx
+++ b/app/routes/app._index.jsx
@@ -9,7 +9,7 @@ function getBackendApiUrl() {
   return String(process.env.BACKEND_API_URL || "http://localhost:3002").replace(/\/+$/, "");
 }
 
-const FALLBACK_SOURCES = [{ sourceKey: "kyt", label: "KYT India" }];
+const FALLBACK_SOURCES = [{ sourceKey: "kyt", label: "KYT India", brands: ["KYT"] }];
 
 function getJobIdForSource(shop, sourceKey = "kyt") {
   return sourceKey === "kyt" ? shop : `${shop}::${sourceKey}`;
@@ -1007,6 +1007,26 @@ export default function Index() {
           </div>
         </div>
 
+        {activeSourceConfig.brands && activeSourceConfig.brands.length > 0 && (
+          <div className={styles.brandsCard}>
+            <div className={styles.brandsCardHeader}>
+              <span className={styles.statLabel}>Importing from this source</span>
+              <h3 className={styles.controlTitle}>
+                {activeSourceConfig.brands.length === 1
+                  ? activeSourceConfig.brands[0]
+                  : `${activeSourceConfig.brands.length} brands`}
+              </h3>
+            </div>
+            {activeSourceConfig.brands.length > 1 && (
+              <div className={styles.brandsGrid}>
+                {activeSourceConfig.brands.map((brand) => (
+                  <span key={brand} className={styles.brandChip}>{brand}</span>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
         <div className={styles.mainPanel}>
           <div className={styles.mainPanelHeader}>
             <div>
diff --git a/app/styles/app-dashboard.module.css b/app/styles/app-dashboard.module.css
index bb4595e..a44b061 100644
--- a/app/styles/app-dashboard.module.css
+++ b/app/styles/app-dashboard.module.css
@@ -188,6 +188,50 @@
   padding: 1.15rem;
 }
 
+.brandsCard {
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 24px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
+  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
+  padding: 1.1rem 1.2rem;
+  display: grid;
+  gap: 0.85rem;
+}
+
+.brandsCardHeader {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.9rem;
+  flex-wrap: wrap;
+}
+
+.brandsGrid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+}
+
+.brandChip {
+  display: inline-block;
+  padding: 0.28rem 0.72rem;
+  border-radius: 999px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  background: rgba(99, 102, 241, 0.08);
+  color: #4338ca;
+  border: 1px solid rgba(99, 102, 241, 0.18);
+  white-space: nowrap;
+}
+
+@media (prefers-color-scheme: dark) {
+  .brandChip {
+    background: rgba(129, 140, 248, 0.12);
+    color: #a5b4fc;
+    border-color: rgba(129, 140, 248, 0.22);
+  }
+}
+
 .mainPanelHeader,
 .controlHeader {
   display: flex;