rstillwell/deckhearth
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

refactor(bulk-toolbar): migrate to .glass-panel-strong + token sweep (Brief 4) #125

Merged
varutasu merged 1 commit from brief-4-bulk-selection-toolbar into main 2026-06-04 17:25:17 -04:00
Conversation 1 Commits 1 Files changed 1 +30 -10
1 changed files with 30 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
components/BulkSelectionToolbar.js
View file

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