Remove duplicate node logic, UI Update, flatten build output (#586)

* refactor nodes to getNodes fn. ui updates * fixed several styling issues * fix: message specific styling/overflow * added footer, fixed tests. styling * fix: added theme support back to app component * fix: hide emojis/reactions * fix: added more padding to content element * fix: fixed padding in content element * updated color scheme * fix: more dark mode styling improvements * fix: padding and alignment fixes * fix: prevent left sidebar collapse, added battery component * fix: change scrollbars to "tiny" style, improved message scrolling, fixed bug with message input * message store fixes, ui fixes * fix: disabled message persistance until after release
2025-05-02 09:00:24 -04:00
parent 3eafad7261
commit 99711fc44e
78 changed files with 2764 additions and 2028 deletions
@@ -0,0 +1,86 @@
+import React from 'react';
+import {
+  PlugZapIcon,
+  BatteryFullIcon,
+  BatteryMediumIcon,
+  BatteryLowIcon,
+} from 'lucide-react';
+import { Subtle } from "@components/UI/Typography/Subtle.tsx";
+
+interface DeviceMetrics {
+  batteryLevel?: number | null;
+  voltage?: number | null;
+}
+
+interface BatteryStatusProps {
+  deviceMetrics?: DeviceMetrics | null;
+}
+
+interface BatteryStateConfig {
+  condition: (level: number) => boolean;
+  Icon: React.ElementType;
+  className: string;
+  text: (level: number) => string;
+}
+
+const batteryStates: BatteryStateConfig[] = [
+  {
+    condition: level => level > 100,
+    Icon: PlugZapIcon,
+    className: 'text-gray-500',
+    text: () => 'Plugged in',
+  },
+  {
+    condition: level => level > 80,
+    Icon: BatteryFullIcon,
+    className: 'text-green-500',
+    text: level => `${level}% charging`,
+  },
+  {
+    condition: level => level > 20,
+    Icon: BatteryMediumIcon,
+    className: 'text-yellow-500',
+    text: level => `${level}% charging`,
+  },
+  {
+    condition: () => true,
+    Icon: BatteryLowIcon,
+    className: 'text-red-500',
+    text: level => `${level}% charging`,
+  },
+];
+
+const getBatteryState = (level: number) => {
+  return batteryStates.find(state => state.condition(level));
+};
+
+
+const BatteryStatus: React.FC<BatteryStatusProps> = ({ deviceMetrics }) => {
+  if (deviceMetrics?.batteryLevel === undefined || deviceMetrics?.batteryLevel === null) {
+    return null;
+  }
+
+  const { batteryLevel, voltage } = deviceMetrics;
+  const currentState = getBatteryState(batteryLevel) ?? batteryStates[batteryStates.length - 1];
+
+
+  const BatteryIcon = currentState.Icon;
+  const iconClassName = currentState.className;
+  const statusText = currentState.text(batteryLevel);
+
+  const voltageTitle = `${voltage?.toPrecision(3) ?? 'Unknown'} volts`;
+
+  return (
+    <div
+      className="flex items-center gap-1 mt-0.5 text-gray-500"
+      title={voltageTitle}
+    >
+      <BatteryIcon size={22} className={iconClassName} />
+      <Subtle aria-label="Battery">
+        {statusText}
+      </Subtle>
+    </div>
+  );
+};
+
+export default BatteryStatus;