From 797d64b1d38450365e54ac42ce2b095fd19bf352 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 19 Nov 2025 01:22:03 +0100
Subject: [PATCH] feat: redesign master mute button to match track style
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed master mute button from Button component to match track style:
- Native button element with rounded-md styling
- Blue background when muted (bg-blue-500) with shadow
- Card background when unmuted with hover state
- Text-based "M" label instead of icons
- Larger size (h-8, text-[11px]) compared to track (h-5, text-[9px])
- Removed unused Volume2/VolumeX icon imports

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/controls/MasterControls.tsx | 22 ++++++++--------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/components/controls/MasterControls.tsx b/components/controls/MasterControls.tsx
index fd05e6f..231fb00 100644
--- a/components/controls/MasterControls.tsx
+++ b/components/controls/MasterControls.tsx
@@ -1,8 +1,6 @@
 'use client';
 
 import * as React from 'react';
-import { Volume2, VolumeX } from 'lucide-react';
-import { Button } from '@/components/ui/Button';
 import { CircularKnob } from '@/components/ui/CircularKnob';
 import { MasterFader } from './MasterFader';
 import { cn } from '@/lib/utils/cn';
@@ -71,22 +69,18 @@ export function MasterControls({
       />
 
       {/* Mute Button */}
-      <Button
-        variant={isMuted ? 'default' : 'outline'}
-        size="sm"
+      <button
         onClick={onMuteToggle}
-        title={isMuted ? 'Unmute' : 'Mute'}
         className={cn(
-          'w-full h-8',
-          isMuted && 'bg-red-500/20 hover:bg-red-500/30 border-red-500/50'
+          'h-8 w-full rounded-md flex items-center justify-center transition-all text-[11px] font-bold',
+          isMuted
+            ? 'bg-blue-500 text-white shadow-md shadow-blue-500/30'
+            : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
         )}
+        title={isMuted ? 'Unmute' : 'Mute'}
       >
-        {isMuted ? (
-          <VolumeX className="h-4 w-4" />
-        ) : (
-          <Volume2 className="h-4 w-4" />
-        )}
-      </Button>
+        M
+      </button>
     </div>
   );
 }