feat: Display noise level in red if currently triggering

.storybook/seed-fake.js

@@ -485,10 +485,11 @@ export const seedFake = (db) => {
       noiseaware_metadata: {
         device_model: 'indoor',
         noise_level_nrs: 1,
-        noise_level_decibel: 42,
+        noise_level_decibel: 80,
         device_name: 'Living room',
         device_id: 'noiseaware_123',
       },
+      currently_triggering_noise_threshold_ids: [],
     },
     errors: [],
   })

package.json

@@ -132,7 +132,7 @@
     "luxon": "^3.3.0",
     "queue": "^7.0.0",
     "react-hook-form": "^7.46.1",
-    "seamapi": "^8.22.1",
+    "seamapi": "^8.24.0",
     "uuid": "^9.0.0",
     "zoned-time": "^1.1.2"
   },

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,22 @@ interface NoiseLevelStatusProps {
 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 +66,5 @@ const t = {
   unknown: 'Unknown',
   decibel: 'dB',
   noiseAwareDefault: '0-40 dB',
+  noisy: 'noisy',
 }