admin/Race-Nation-Shopify-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: show brands list card per active import source

Browse 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>
This commit is contained in:
MOHAN 2026-07-07 13:58:54 +05:30
parent 9f942b4205
commit 190403a468
2 changed files with 65 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/routes/app._index.jsx
View File

@ -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>

44
app/styles/app-dashboard.module.css
View File

@ -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;