updates

lib/widgets/hairline_panel.dart

@@ -16,7 +16,7 @@ class HairlinePanel extends StatelessWidget {
     this.action,
     this.active = false,
     this.padding = const EdgeInsets.all(TimbreSpacing.lg),
-    this.backgroundColor = TimbreColors.background,
+    this.backgroundColor,
   });
 
   /// Panel label, e.g. "Queue". Rendered uppercase-ish in mono.
@@ -40,12 +40,13 @@ class HairlinePanel extends StatelessWidget {
 
   /// Color painted behind the title to "cut" the border. Must match whatever
   /// sits behind this panel (the canvas by default).
-  final Color backgroundColor;
+  final Color? backgroundColor;
 
   static const double _titleStraddle = 8;
 
   @override
   Widget build(BuildContext context) {
+    final bg = backgroundColor ?? TimbreColors.background;
     final borderColor =
         active ? TimbreColors.borderActive : TimbreColors.border;
     final titleColor =
@@ -65,7 +66,7 @@ class HairlinePanel extends StatelessWidget {
           left: TimbreSpacing.lg,
           top: 0,
           child: Container(
-            color: backgroundColor,
+            color: bg,
             padding: const EdgeInsets.symmetric(
               horizontal: TimbreSpacing.md,
             ),
@@ -83,7 +84,7 @@ class HairlinePanel extends StatelessWidget {
                   if (trailing != null)
                     TextSpan(
                       text: ' $trailing',
-                      style: const TextStyle(color: TimbreColors.dimmed),
+                      style: TextStyle(color: TimbreColors.dimmed),
                     ),
                 ],
               ),
@@ -96,7 +97,7 @@ class HairlinePanel extends StatelessWidget {
             right: TimbreSpacing.md,
             top: 0,
             child: Container(
-              color: backgroundColor,
+              color: bg,
               padding: const EdgeInsets.symmetric(horizontal: TimbreSpacing.xs),
               child: action,
             ),