feat: Display noise level in red if currently triggering

.storybook/seed-fake.js

@@ -489,6 +489,7 @@ export const seedFake = (db) => {
         device_name: 'Living room',
         device_id: 'noiseaware_123',
       },
+      currently_triggering_noise_threshold_ids: [],
     },
     errors: [],
   })

src/lib/ui/device/NoiseLevelStatus.tsx

@@ -1,6 +1,8 @@
+import classNames from 'classnames'
 import type { NoiseSensorDevice } from 'seamapi'
 
 import { NoiseLevelsIcon } from 'lib/icons/NoiseLevels.js'
+import { NoiseLevelsRedIcon } from 'lib/icons/NoiseLevelsRed.js'
 
 interface NoiseLevelStatusProps {
   device: NoiseSensorDevice
@@ -9,13 +11,21 @@
 export function NoiseLevelStatus({
   device,
 }: NoiseLevelStatusProps): JSX.Element {
+  const isActivated =
+    device.properties.currently_triggering_noise_threshold_ids?.length <= 0
+
   return (
     <>
       <span className='seam-label'>{t.noiseLevel}:</span>
 
       <div className='seam-device-status'>
-        <NoiseLevelsIcon />
-        <span className='seam-text'>{getNoiseLevel(device)}</span>
+        {isActivated ? <NoiseLevelsRedIcon /> : <NoiseLevelsIcon />}
+        <span
+          className={classNames('seam-text', isActivated && 'seam-text-danger')}
+        >
+          {getNoiseLevel(device)}
+          {isActivated && ` (${t.noisy})`}
+        </span>
       </div>
     </>
   )
@@ -55,4 +65,5 @@
   unknown: 'Unknown',
   decibel: 'dB',
   noiseAwareDefault: '0-40 dB',
+  noisy: 'noisy',
 }