From 626293392c3eed5bc93680ca8587bd7cb0278c05 Mon Sep 17 00:00:00 2001
From: Hampus <hampus@fluxer.app>
Date: Wed, 2 Sep 2026 17:29:55 +0200
Subject: [PATCH] fix(ui): let callers style the audio level meter (#2373)

---
 .../components/modals/tabs/components/AudioLevelMeter.tsx    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/fluxer_app/src/features/user/components/modals/tabs/components/AudioLevelMeter.tsx b/fluxer_app/src/features/user/components/modals/tabs/components/AudioLevelMeter.tsx
index 070c1db63..e36bb9a0b 100644
--- a/fluxer_app/src/features/user/components/modals/tabs/components/AudioLevelMeter.tsx
+++ b/fluxer_app/src/features/user/components/modals/tabs/components/AudioLevelMeter.tsx
@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import styles from '@app/features/user/components/modals/tabs/components/AudioLevelMeter.module.css';
+import {clsx} from 'clsx';
 import type {HTMLAttributes} from 'react';
 import {useMemo} from 'react';
 
@@ -26,7 +27,7 @@ function makeActiveBarStyle(index: number): AudioLevelBarStyle {
 	};
 }
 
-export function AudioLevelMeter({level, ...rest}: AudioLevelMeterProps & HTMLAttributes<HTMLDivElement>) {
+export function AudioLevelMeter({level, className, ...rest}: AudioLevelMeterProps & HTMLAttributes<HTMLDivElement>) {
 	const bars = useMemo(() => {
 		const clampedLevel = Math.min(1, Math.max(0, level));
 		return Array.from({length: BAR_COUNT}, (_, index) => {
@@ -40,7 +41,7 @@ export function AudioLevelMeter({level, ...rest}: AudioLevelMeterProps & HTMLAtt
 		});
 	}, [level]);
 	return (
-		<div className={styles.track} data-flx="user.audio-level-meter.track" {...rest}>
+		<div className={clsx(styles.track, className)} data-flx="user.audio-level-meter.track" {...rest}>
 			{bars.map((bar, index) => (
 				<span
 					key={index}