feat(sensor): SensorScreen with DialTile + LiveDot

src/screens/SensorScreen.tsx

@@ -1,16 +1,14 @@
 import React from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 import {
-  Activity,
-  Battery,
   Bluetooth,
   RadioReceiver,
-  ShieldCheck,
-  Signal,
 } from 'lucide-react-native';
 import { type HeartRateMonitorState } from '../ble/useHeartRateMonitor';
 import { formatRssi } from '../ble/rssi';
 import { ActionButton } from '../components/ActionButton';
+import { DialTile } from '../components/DialTile';
+import { LiveDot } from '../components/LiveDot';
 import { colors, radius, spacing, typography } from '../theme';
 
 type Props = {
@@ -22,47 +20,60 @@ export function SensorScreen({ monitor, onMonitorAction }: Props) {
   const device = monitor.connectedDevice;
   const services = monitor.services.length
     ? monitor.services
-    : ['Heart Rate Service · 0x180D · aguardando conexão'];
+    : ['Heart Rate Service \· 0x180D \· aguardando conex\ão'];
   const characteristics = monitor.characteristics.length
     ? monitor.characteristics
-    : ['Heart Rate Measurement · 0x2A37 · notify esperado'];
+    : ['Heart Rate Measurement \· 0x2A37 \· notify esperado'];
+
+  const isReceiving = monitor.phase === 'receiving';
 
   return (
     <View style={styles.screen}>
       <View style={styles.sensorConsole}>
         <View style={styles.consoleTopline}>
-          <View>
+          <View style={styles.consoleLeft}>
-            <Text style={styles.eyebrow}>SENSOR REAL</Text>
+            <View style={styles.eyebrowRow}>
+              <Text
+                style={[
+                  styles.eyebrowDot,
+                  { color: isReceiving ? colors.success : colors.textDim },
+                ]}
+              >
+                {'\•'}
+              </Text>
+              <Text style={styles.eyebrow}>SENSOR REAL</Text>
+            </View>
             <Text style={styles.title}>
               {friendlyDeviceTitle(device?.name)}
             </Text>
           </View>
           <View style={styles.phaseBadge}>
-            <Bluetooth color={colors.warning} size={16} strokeWidth={2.4} />
+            <Bluetooth color={colors.warning} size={14} strokeWidth={2.4} />
             <Text style={styles.phaseText}>{phaseLabel(monitor.phase)}</Text>
+            {isReceiving ? <LiveDot live size={5} /> : null}
           </View>
         </View>
 
-        <View style={styles.signalGrid}>
+        <View style={styles.signalColumn}>
-          <SignalDatum
+          <DialTile
-            icon="signal"
             label="RSSI"
             value={formatRssi(device?.rssi)}
+            tone="amber"
           />
-          <SignalDatum
+          <DialTile
-            icon="activity"
+            label="LEITURAS"
-            label="Leituras"
             value={`${monitor.samples.length}`}
+            tone="amber"
           />
-          <SignalDatum
+          <DialTile
-            icon="battery"
+            label="BATERIA"
-            label="Bateria"
             value={formatBattery(device?.batteryPercent)}
+            tone="amber"
           />
-          <SignalDatum
+          <DialTile
-            icon="shield"
+            label="FUNDO"
-            label="Fundo"
             value={monitor.batteryOptimizationIgnored ? 'liberado' : 'restrito'}
+            tone={monitor.batteryOptimizationIgnored ? 'green' : 'amber'}
           />
         </View>
 
@@ -82,8 +93,8 @@ export function SensorScreen({ monitor, onMonitorAction }: Props) {
             />
           ) : (
             <View style={styles.livePill}>
-              <Activity color={colors.success} size={15} strokeWidth={2.4} />
+              <LiveDot live size={6} />
-              <Text style={styles.livePillText}>Monitor contínuo ativo</Text>
+              <Text style={styles.livePillText}>Monitor cont\ínuo ativo</Text>
             </View>
           )}
           {!monitor.batteryOptimizationIgnored ? (
@@ -102,7 +113,7 @@ export function SensorScreen({ monitor, onMonitorAction }: Props) {
       {monitor.discoveredDevices.length > 0 ? (
         <View style={styles.discoveryBlock}>
           <Text style={styles.blockLabel}>ENCONTRADOS AGORA</Text>
-          {monitor.discoveredDevices.map(candidate => (
+          {monitor.discoveredDevices.map((candidate) => (
             <Pressable
               key={candidate.id}
               onPress={() =>
@@ -116,7 +127,7 @@ export function SensorScreen({ monitor, onMonitorAction }: Props) {
                   {friendlyDeviceTitle(candidate.name)}
                 </Text>
                 <Text style={styles.deviceMeta}>
-                  {candidate.name} · {formatRssi(candidate.rssi)}
+                  {candidate.name} \· {formatRssi(candidate.rssi)}
                 </Text>
               </View>
               <View style={styles.connectPill}>
@@ -127,34 +138,8 @@ export function SensorScreen({ monitor, onMonitorAction }: Props) {
         </View>
       ) : null}
 
-      <BleInventoryBlock title="SERVIÇOS BLE" rows={services} />
+      <BleInventoryBlock title="SERVI\ÇOS BLE" rows={services} />
-      <BleInventoryBlock title="CARACTERÍSTICAS" rows={characteristics} />
+      <BleInventoryBlock title="CARACTER\ÍSTICAS" rows={characteristics} />
-    </View>
-  );
-}
-
-function SignalDatum({
-  icon,
-  label,
-  value,
-}: {
-  readonly icon: 'signal' | 'battery' | 'shield' | 'activity';
-  readonly label: string;
-  readonly value: string;
-}) {
-  const Icon =
-    icon === 'signal'
-      ? Signal
-      : icon === 'battery'
-      ? Battery
-      : icon === 'activity'
-      ? Activity
-      : ShieldCheck;
-  return (
-    <View style={styles.signalDatum}>
-      <Icon color={colors.warning} size={17} strokeWidth={2.3} />
-      <Text style={styles.signalValue}>{value}</Text>
-      <Text style={styles.signalLabel}>{label}</Text>
     </View>
   );
 }
@@ -169,7 +154,7 @@ function BleInventoryBlock({
   return (
     <View style={styles.diagnosticBlock}>
       <Text style={styles.blockLabel}>{title}</Text>
-      {rows.slice(0, 8).map(row => {
+      {rows.slice(0, 8).map((row) => {
         const parsed = parseBleRow(row);
         return (
           <View key={row} style={styles.diagnosticRow}>
@@ -177,7 +162,7 @@ function BleInventoryBlock({
             <View style={styles.diagnosticBody}>
               <Text style={styles.diagnosticTitle}>{parsed.name}</Text>
               <Text style={styles.diagnosticText}>
-                {parsed.uuid} · {parsed.detail}
+                {parsed.uuid} \· {parsed.detail}
               </Text>
             </View>
           </View>
@@ -189,36 +174,36 @@ function BleInventoryBlock({
 
 function friendlyDeviceTitle(name?: string | null) {
   if (!name) {
-    return 'Cinta cardíaca BLE';
+    return 'Cinta card\íaca BLE';
   }
   if (/magene|h003/i.test(name)) {
     return 'Magene H003';
   }
   if (/heart|hrm/i.test(name)) {
-    return 'Cinta cardíaca BLE';
+    return 'Cinta card\íaca BLE';
   }
   return name;
 }
 
 function parseBleRow(row: string) {
-  const [name = row, uuid = 'BLE', ...rest] = row.split(' · ');
+  const [name = row, uuid = 'BLE', ...rest] = row.split(' \· ');
   return {
     name,
     uuid,
-    detail: rest.join(' · ') || 'aguardando leitura',
+    detail: rest.join(' \· ') || 'aguardando leitura',
   };
 }
 
 function phaseLabel(phase: HeartRateMonitorState['phase']) {
   const labels: Record<HeartRateMonitorState['phase'], string> = {
     idle: 'parado',
-    'requesting-permission': 'permissões',
+    'requesting-permission': 'permiss\ões',
     'bluetooth-off': 'bluetooth off',
     scanning: 'buscando',
     connecting: 'conectando',
     connected: 'conectado',
     receiving: 'recebendo',
-    'permission-denied': 'sem permissão',
+    'permission-denied': 'sem permiss\ão',
     'sensor-not-found': 'sem sensor',
     error: 'erro',
   };
@@ -227,15 +212,15 @@ function phaseLabel(phase: HeartRateMonitorState['phase']) {
 
 function sensorExplanation(monitor: HeartRateMonitorState) {
   if (monitor.phase === 'receiving' && monitor.samples.length > 0) {
-    return `Amostras reais chegando: ${monitor.samples.length}. Cada BPM reconhecido está sendo salvo em SQLite.`;
+    return `Amostras reais chegando: ${monitor.samples.length}. Cada BPM reconhecido est\á sendo salvo em SQLite.`;
   }
   if (monitor.phase === 'receiving' || monitor.phase === 'connected') {
-    return 'Sensor reconhecido. O app está armando a leitura 2A37; se não vier BPM, reativa notify e reconecta sozinho.';
+    return 'Sensor reconhecido. O app est\á armando a leitura 2A37; se n\ão vier BPM, reativa notify e reconecta sozinho.';
   }
   if (monitor.phase === 'scanning') {
-    return 'Busca nativa BLE ativa. Se o app for bloqueado, a notificação mantém o serviço vivo.';
+    return 'Busca nativa BLE ativa. Se o app for bloqueado, a notifica\ç\ão mant\ém o servi\ço vivo.';
   }
-  return 'A tela traduz nomes técnicos: 180D é o serviço cardíaco; 2A37 é o dado de BPM.';
+  return 'A tela traduz nomes t\écnicos: 180D \é o servi\ço card\íaco; 2A37 \é o dado de BPM.';
 }
 
 function formatBattery(percent?: number | null) {
@@ -259,54 +244,52 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     gap: spacing.md,
+    alignItems: 'center',
+  },
+  consoleLeft: {
+    flex: 1,
+  },
+  eyebrowRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  eyebrowDot: {
+    fontSize: 18,
+    lineHeight: 18,
+    fontWeight: '900',
   },
   eyebrow: {
     ...typography.label,
     color: colors.action,
   },
   title: {
+    ...typography.detailNumeric,
     color: colors.text,
-    fontSize: 34,
+    fontSize: 22,
-    lineHeight: 36,
+    lineHeight: 26,
-    fontWeight: '900',
+    letterSpacing: -0.8,
-    letterSpacing: -2,
     marginTop: spacing.xs,
   },
   phaseBadge: {
     paddingVertical: spacing.xs,
+    paddingHorizontal: spacing.sm,
     flexDirection: 'row',
     alignItems: 'center',
-    gap: spacing.xs,
+    gap: 6,
-    height: 36,
+    height: 32,
+    borderRadius: radius.xl,
+    borderWidth: 1,
+    borderColor: colors.line,
+    backgroundColor: colors.surface,
   },
   phaseText: {
     ...typography.label,
     color: colors.text,
   },
-  signalGrid: {
+  signalColumn: {
-    flexDirection: 'row',
+    borderTopWidth: 1,
-    flexWrap: 'wrap',
-    gap: spacing.xs,
-  },
-  signalDatum: {
-    width: '48.5%',
-    minHeight: 76,
-    borderWidth: 1,
     borderColor: colors.line,
-    padding: spacing.sm,
-    gap: spacing.xxs,
-    justifyContent: 'center',
-  },
-  signalValue: {
-    color: colors.text,
-    fontSize: 18,
-    lineHeight: 22,
-    fontWeight: '900',
-    marginTop: spacing.xs,
-  },
-  signalLabel: {
-    ...typography.label,
-    color: colors.textMuted,
   },
   explainer: {
     ...typography.body,
@@ -325,7 +308,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.md,
     flexDirection: 'row',
     alignItems: 'center',
-    gap: spacing.xs,
+    gap: 6,
   },
   livePillText: {
     ...typography.label,