diff --git a/docs/superpowers/plans/2026-06-17-admin-mobile-pwa.md b/docs/superpowers/plans/2026-06-17-admin-mobile-pwa.md index 32983f4..8647e8d 100644 --- a/docs/superpowers/plans/2026-06-17-admin-mobile-pwa.md +++ b/docs/superpowers/plans/2026-06-17-admin-mobile-pwa.md @@ -910,7 +910,7 @@ interface AdminShellProps { userRole: string | null; brandIds?: string[]; activeBrandId?: string | null; - brands: { id: string; name: string; slug: string }[]; + brands: { id: string; name: string; slug: string; logo_url: string | null }[]; enabledAddons?: Record; children: ReactNode; } @@ -1261,10 +1261,11 @@ These are small, focused, presentational. Build them all in one PR by following **Files:** - Create: `src/components/admin/PageHeader.tsx` - Create: `src/components/admin/StatusPill.tsx` -- Create: `src/components/admin/EmptyState.tsx` - Create: `src/components/admin/CardList.tsx` - Create: `src/components/admin/StickyActionBar.tsx` +> **Note:** `EmptyState.tsx` already exists in the repo and is in active use by `DashboardClient.tsx` and `ProductsClient.tsx` (re-exported via `design-system/index.tsx`). Reusing that component in the new mobile shell — do not create a duplicate. + - [ ] **Step 1: `PageHeader.tsx`** ```tsx @@ -1337,34 +1338,7 @@ export function StatusPill({ status, label }: StatusPillProps) { export default StatusPill; ``` -- [ ] **Step 3: `EmptyState.tsx`** - -```tsx -// src/components/admin/EmptyState.tsx -import { ReactNode } from "react"; - -interface EmptyStateProps { - title: string; - description?: string; - action?: ReactNode; - icon?: string; -} - -export function EmptyState({ title, description, action, icon = "✨" }: EmptyStateProps) { - return ( -
- -

{title}

- {description &&

{description}

} - {action &&
{action}
} -
- ); -} - -export default EmptyState; -``` - -- [ ] **Step 4: `CardList.tsx` + `CardListItem.tsx`** +- [ ] **Step 3: `CardList.tsx` + `CardListItem.tsx`** ```tsx // src/components/admin/CardList.tsx @@ -1429,8 +1403,6 @@ export function CardListItem({ onClick, href, children, as = "li" }: CardListIte } return
  • {content}
  • ; } - -export { CardListItem }; ``` - [ ] **Step 5: `StickyActionBar.tsx`** @@ -1477,8 +1449,8 @@ Expected: PASS. - [ ] **Step 7: Commit** ```bash -git add src/components/admin/PageHeader.tsx src/components/admin/StatusPill.tsx src/components/admin/EmptyState.tsx src/components/admin/CardList.tsx src/components/admin/StickyActionBar.tsx -git commit -m "feat(admin): add PageHeader, StatusPill, EmptyState, CardList, StickyActionBar" +git add src/components/admin/PageHeader.tsx src/components/admin/StatusPill.tsx src/components/admin/CardList.tsx src/components/admin/StickyActionBar.tsx +git commit -m "feat(admin): add PageHeader, StatusPill, CardList, StickyActionBar" ``` ### Task 1.13: Add Lighthouse CI workflow diff --git a/src/components/admin/AdminShell.tsx b/src/components/admin/AdminShell.tsx index cf0d148..e4f2c61 100644 --- a/src/components/admin/AdminShell.tsx +++ b/src/components/admin/AdminShell.tsx @@ -8,7 +8,7 @@ interface AdminShellProps { userRole: string | null; brandIds?: string[]; activeBrandId?: string | null; - brands: { id: string; name: string; slug: string }[]; + brands: { id: string; name: string; slug: string; logo_url: string | null }[]; enabledAddons?: Record; children: ReactNode; }