From d71e8c52079b13db8681c35117be4b279bdea2e2 Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Thu, 4 Jun 2026 15:37:58 -0500
Subject: [PATCH] refactor(bulk-toolbar): migrate to .glass-panel-strong +
 token sweep
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Brief 4 of unify-glass-panel-surfaces convoy. The bulk-select toolbar
was a critical dark-mode bug (bg-white invisible against dark
backgrounds); migrating to .glass-panel-strong is both a unification
win and a correctness fix.

Outer toolbar:
- Replaces `bg-white rounded-xl shadow-2xl border border-gray-200`
  with `glass-panel-strong rounded-2xl`.
- Inline boxShadow override: `var(--rim-light-inner),
  var(--elevation-pronounced)` — keeps the toolbar reading as
  elevated over arbitrary page content (matches the design audit's
  "floating chrome" elevation tier).

More-actions dropdown:
- Replaces `absolute bottom-full right-0 mb-2 bg-white rounded-lg
  shadow-xl border border-gray-200` with `glass-panel-strong
  absolute bottom-full right-0 mb-2 rounded-xl`. Class's default
  rim+ambient stack is the right weight here.

Interior token sweep (per Brief 4 acceptance criteria):
- text-gray-700 → style={{ color: 'var(--text-primary)' }}
- text-gray-{400,600} on the action triggers →
  style={{ color: 'var(--text-secondary)' }}
- hover:text-gray-{600,800} + hover:bg-gray-{50,100} → nav-item-hover
- text-red-600 hover:bg-red-50 → style={{ color: 'rgb(239, 68, 68)' }}
  + nav-item-hover. (--accent-danger token does not exist yet; brief
  pre-authorized this fallback. A future design-system PR can
  introduce the token and swap the literal.)
- bg-gray-300 divider → style={{ backgroundColor: 'var(--border)' }}
- border-gray-200 menu separator → style={{ borderColor:
  'var(--border)' }}
- rounded-lg → rounded-xl on action triggers (Brief 4 + convoy-wide
  consistency).

UNCHANGED per brief scope:
- The 3 quick-action buttons (Collection / Deck / My Collection)
  — they already use --accent-flame / --accent-gold / --accent-wood
  and the onMouseEnter/Leave swap pattern. Touching them is scope
  expansion.

Verification:
- rg "text-gray-|bg-gray-|hover:bg-gray-|text-red-|hover:bg-red-|
  border-gray-" components/BulkSelectionToolbar.js → 0 matches.
- npm run lint passes (1 pre-existing unrelated warning).
- npm run test:run: 116/116 tests pass (no test changes needed for a
  pure className/style swap per Brief 4 § Test Plan).

Acceptance criteria from
.convoys/unify-glass-panel-surfaces/brief-4-bulk-selection-toolbar.md
all met. No edits outside components/BulkSelectionToolbar.js.

Dark-mode QA reminder for reviewers: before this change, the toolbar
was bg-white — invisible against the dark theme. Verify in BOTH
themes before merge; before/after dark-mode screenshot attached to
PR description.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/BulkSelectionToolbar.js | 40 ++++++++++++++++++++++--------
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/components/BulkSelectionToolbar.js b/components/BulkSelectionToolbar.js
index 21438a7..f8b9fc2 100644
--- a/components/BulkSelectionToolbar.js
+++ b/components/BulkSelectionToolbar.js
@@ -44,20 +44,32 @@ export default function BulkSelectionToolbar({
 
   return (
     <div className="fixed bottom-4 left-4 right-4 sm:bottom-6 sm:left-1/2 sm:right-auto sm:transform sm:-translate-x-1/2 z-50">
-      <div className="bg-white rounded-xl shadow-2xl border border-gray-200 px-3 sm:px-6 py-3 sm:py-4 flex items-center justify-between sm:justify-start sm:space-x-4 sm:min-w-96">
+      <div
+        className="glass-panel-strong rounded-2xl px-3 sm:px-6 py-3 sm:py-4 flex items-center justify-between sm:justify-start sm:space-x-4 sm:min-w-96"
+        style={{
+          boxShadow:
+            'var(--rim-light-inner), var(--elevation-pronounced)',
+        }}
+      >
         {/* Selection Count */}
         <div className="flex items-center space-x-2">
           <div className="w-8 h-8 rounded-full flex items-center justify-center" style={{ backgroundColor: 'var(--accent-ember)' }}>
             <span className="text-white text-sm font-bold">{selectedCount}</span>
           </div>
-          <span className="text-gray-700 font-medium text-sm sm:text-base">
+          <span
+            className="font-medium text-sm sm:text-base"
+            style={{ color: 'var(--text-primary)' }}
+          >
             <span className="hidden sm:inline">{selectedCount} card{selectedCount !== 1 ? 's' : ''} selected</span>
             <span className="sm:hidden">{selectedCount}</span>
           </span>
         </div>
 
         {/* Divider - Hidden on mobile */}
-        <div className="hidden sm:block h-6 w-px bg-gray-300"></div>
+        <div
+          className="hidden sm:block h-6 w-px"
+          style={{ backgroundColor: 'var(--border)' }}
+        ></div>
 
         {/* Quick Actions */}
         <div className="flex items-center space-x-1 sm:space-x-2">
@@ -105,7 +117,8 @@ export default function BulkSelectionToolbar({
         <div className="relative">
           <button
             onClick={() => setShowActions(!showActions)}
-            className="p-2 text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-lg transition-colors"
+            className="nav-item-hover p-2 rounded-xl transition-colors"
+            style={{ color: 'var(--text-secondary)' }}
           >
             <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
@@ -114,13 +127,14 @@ export default function BulkSelectionToolbar({
 
           {/* Dropdown Actions */}
           {showActions && (
-            <div className="absolute bottom-full right-0 mb-2 bg-white rounded-lg shadow-xl border border-gray-200 py-2 min-w-48">
+            <div className="glass-panel-strong absolute bottom-full right-0 mb-2 rounded-xl py-2 min-w-48">
               <button
                 onClick={() => {
                   handleBulkFavorite();
                   setShowActions(false);
                 }}
-                className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center space-x-2"
+                className="nav-item-hover w-full px-4 py-2 text-left text-sm flex items-center space-x-2"
+                style={{ color: 'var(--text-primary)' }}
               >
                 <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
@@ -133,7 +147,8 @@ export default function BulkSelectionToolbar({
                   handleRemoveFromOwned();
                   setShowActions(false);
                 }}
-                className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center space-x-2"
+                className="nav-item-hover w-full px-4 py-2 text-left text-sm flex items-center space-x-2"
+                style={{ color: 'var(--text-primary)' }}
               >
                 <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -141,14 +156,18 @@ export default function BulkSelectionToolbar({
                 <span>{VOCAB.REMOVE_FROM_MY_COLLECTION}</span>
               </button>
 
-              <div className="border-t border-gray-200 my-1"></div>
+              <div
+                className="my-1 border-t"
+                style={{ borderColor: 'var(--border)' }}
+              ></div>
 
               <button
                 onClick={() => {
                   handleBulkDelete();
                   setShowActions(false);
                 }}
-                className="w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-red-50 flex items-center space-x-2"
+                className="nav-item-hover w-full px-4 py-2 text-left text-sm flex items-center space-x-2"
+                style={{ color: 'rgb(239, 68, 68)' }}
               >
                 <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
@@ -162,7 +181,8 @@ export default function BulkSelectionToolbar({
         {/* Clear Selection */}
         <button
           onClick={onClearSelection}
-          className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+          className="nav-item-hover p-2 rounded-xl transition-colors"
+          style={{ color: 'var(--text-secondary)' }}
           title="Clear selection"
         >
           <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">