fixup! ✨(frontend) introduce performance mode with auto-detection and telemetry

src/frontend/src/features/analytics/hardware.ts

@@ -49,12 +49,15 @@ export const collectHardwareSnapshot = async (): Promise<HardwareSnapshot> => {
 
     if (typeof nav.getBattery === 'function') {
       // getBattery can hang on some platforms — don't let it delay the event.
+      let timeoutId: ReturnType<typeof setTimeout> | undefined
       const battery = await Promise.race([
         nav.getBattery(),
-        new Promise<null>((resolve) =>
-          setTimeout(() => resolve(null), BATTERY_TIMEOUT_MS)
-        ),
-      ]).catch(() => null)
+        new Promise<null>((resolve) => {
+          timeoutId = setTimeout(() => resolve(null), BATTERY_TIMEOUT_MS)
+        }),
+      ])
+        .catch(() => null)
+        .finally(() => clearTimeout(timeoutId))
       if (battery) {
         snapshot.battery_level = battery.level
         snapshot.battery_charging = battery.charging

src/frontend/src/features/notifications/components/ToastCpuConstrained.tsx

@@ -1,8 +1,9 @@
 import { useToast } from 'react-aria'
 import { useRef } from 'react'
+import { RiCloseLine } from '@remixicon/react'
 
 import { type ToastProps } from './Toast'
-import { VStack } from '@/styled-system/jsx'
+import { HStack, VStack } from '@/styled-system/jsx'
 import { useTranslation } from 'react-i18next'
 import { Button, Text } from '@/primitives'
 import { css } from '@/styled-system/css'
@@ -10,13 +11,16 @@ import { StyledToastContainer } from './StyledToastContainer'
 import { disablePerformanceMode } from '@/stores/performanceMode'
 import { captureEvent } from '@/features/analytics/telemetry'
 
-// todo - make it closable
 export function ToastCpuConstrained({ state, ...props }: Readonly<ToastProps>) {
   const { t } = useTranslation('notifications', {
     keyPrefix: 'cpuConstrained',
   })
   const ref = useRef(null)
-  const { toastProps, contentProps } = useToast(props, state, ref)
+  const { toastProps, contentProps, closeButtonProps } = useToast(
+    props,
+    state,
+    ref
+  )
   const toast = props.toast
 
   const handleKeepQuality = () => {
@@ -27,35 +31,39 @@ export function ToastCpuConstrained({ state, ...props }: Readonly<ToastProps>) {
 
   return (
     <StyledToastContainer {...toastProps} ref={ref}>
-      <VStack
-        justify="start"
-        alignItems="self-start"
-        {...contentProps}
-        maxWidth="370px"
-        gap="0.75rem"
-        padding={14}
-      >
-        <Text
-          margin={false}
-          className={css({
-            wordBreak: 'break-word',
-            overflowWrap: 'break-word',
-            whiteSpace: 'normal',
-          })}
+      <HStack alignItems="start" gap="0.5rem" padding={14}>
+        <VStack
+          justify="start"
+          alignItems="self-start"
+          {...contentProps}
+          maxWidth="370px"
+          gap="0.75rem"
         >
-          {t('message')}
-        </Text>
-        <Button
-          size="sm"
-          variant="text"
-          className={css({
-            color: 'primary.300',
-          })}
-          onPress={() => handleKeepQuality()}
-        >
-          {t('keepQuality')}
+          <Text
+            margin={false}
+            className={css({
+              wordBreak: 'break-word',
+              overflowWrap: 'break-word',
+              whiteSpace: 'normal',
+            })}
+          >
+            {t('message')}
+          </Text>
+          <Button
+            size="sm"
+            variant="text"
+            className={css({
+              color: 'primary.300',
+            })}
+            onPress={() => handleKeepQuality()}
+          >
+            {t('keepQuality')}
+          </Button>
+        </VStack>
+        <Button square size="sm" invisible {...closeButtonProps}>
+          <RiCloseLine size={18} color="white" />
         </Button>
-      </VStack>
+      </HStack>
     </StyledToastContainer>
   )
 }