From 8301aa99e2bbca1cf22f6ba9e8a23d1a6fd22fd8 Mon Sep 17 00:00:00 2001
From: senke <okin.tcs@gmail.com>
Date: Fri, 16 Jan 2026 00:51:26 +0100
Subject: [PATCH] ui: add BulkModeBanner to LibraryPage (Action 8.4.1.2)

- Imported BulkModeBanner component
- Added banner at top of content area (before header)
- Banner shows when isBulkMode is true
- Displays selectedTracks.size count
- onClose handler disables bulk mode and clears selection
- Banner appears above ErrorDisplay for proper visual hierarchy
- Part of Action 8.4.1.2: Show banner in LibraryPage when bulk mode active
---
 apps/web/src/features/library/pages/LibraryPage.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/apps/web/src/features/library/pages/LibraryPage.tsx b/apps/web/src/features/library/pages/LibraryPage.tsx
index 46581b863..e96649073 100644
--- a/apps/web/src/features/library/pages/LibraryPage.tsx
+++ b/apps/web/src/features/library/pages/LibraryPage.tsx
@@ -53,6 +53,7 @@ import { Pagination } from '@/components/navigation/Pagination';
 import { ConfirmationDialog } from '@/components/ui/confirmation-dialog';
 import { LoadingState } from '@/components/ui/LoadingState';
 import { Sidebar } from '@/components/ui/Sidebar';
+import { BulkModeBanner } from '@/components/BulkModeBanner';
 import { logger } from '@/utils/logger';
 import { parseApiError } from '@/utils/apiErrorHandler';
 import { cn } from '@/lib/utils';
@@ -311,6 +312,14 @@ export default function LibraryPagePremium() {
 
   return (
     <div className="space-y-6 animate-fade-in">
+      <BulkModeBanner
+        isActive={isBulkMode}
+        selectedCount={selectedTracks.size}
+        onClose={() => {
+          setIsBulkMode(false);
+          setSelectedTracks(new Set());
+        }}
+      />
       {mutationError && (
         <ErrorDisplay
           error={mutationError}