Show battery percentage on home screen (#167)

## Summary

* Show battery percentage on home screen
  * Moved battery rendering logic into shared ScreenComponents class
* As discussed
https://github.com/daveallie/crosspoint-reader/discussions/155

src/ScreenComponents.cpp

@@ -0,0 +1,41 @@
+#include "ScreenComponents.h"
+
+#include <GfxRenderer.h>
+
+#include <string>
+
+#include "Battery.h"
+#include "fontIds.h"
+
+void ScreenComponents::drawBattery(const GfxRenderer& renderer, const int left, const int top) {
+  // Left aligned battery icon and percentage
+  const uint16_t percentage = battery.readPercentage();
+  const auto percentageText = std::to_string(percentage) + "%";
+  renderer.drawText(SMALL_FONT_ID, left + 20, top, percentageText.c_str());
+
+  // 1 column on left, 2 columns on right, 5 columns of battery body
+  constexpr int batteryWidth = 15;
+  constexpr int batteryHeight = 10;
+  const int x = left;
+  const int y = top + 7;
+
+  // Top line
+  renderer.drawLine(x, y, x + batteryWidth - 4, y);
+  // Bottom line
+  renderer.drawLine(x, y + batteryHeight - 1, x + batteryWidth - 4, y + batteryHeight - 1);
+  // Left line
+  renderer.drawLine(x, y, x, y + batteryHeight - 1);
+  // Battery end
+  renderer.drawLine(x + batteryWidth - 4, y, x + batteryWidth - 4, y + batteryHeight - 1);
+  renderer.drawLine(x + batteryWidth - 3, y + 2, x + batteryWidth - 1, y + 2);
+  renderer.drawLine(x + batteryWidth - 3, y + batteryHeight - 3, x + batteryWidth - 1, y + batteryHeight - 3);
+  renderer.drawLine(x + batteryWidth - 1, y + 2, x + batteryWidth - 1, y + batteryHeight - 3);
+
+  // The +1 is to round up, so that we always fill at least one pixel
+  int filledWidth = percentage * (batteryWidth - 5) / 100 + 1;
+  if (filledWidth > batteryWidth - 5) {
+    filledWidth = batteryWidth - 5;  // Ensure we don't overflow
+  }
+
+  renderer.fillRect(x + 1, y + 1, filledWidth, batteryHeight - 2);
+}

src/ScreenComponents.h

@@ -0,0 +1,8 @@
+#pragma once
+
+class GfxRenderer;
+
+class ScreenComponents {
+ public:
+  static void drawBattery(const GfxRenderer& renderer, int left, int top);
+};

src/activities/home/HomeActivity.cpp

@@ -6,6 +6,7 @@
 
 #include "CrossPointState.h"
 #include "MappedInputManager.h"
+#include "ScreenComponents.h"
 #include "fontIds.h"
 
 void HomeActivity::taskTrampoline(void* param) {
@@ -315,5 +316,7 @@ void HomeActivity::render() const {
   const auto labels = mappedInput.mapLabels("", "Confirm", "Up", "Down");
   renderer.drawButtonHints(UI_10_FONT_ID, labels.btn1, labels.btn2, labels.btn3, labels.btn4);
 
+  ScreenComponents::drawBattery(renderer, 20, pageHeight - 30);
+
   renderer.displayBuffer();
 }

src/activities/reader/EpubReaderActivity.cpp

@@ -5,11 +5,11 @@
 #include <GfxRenderer.h>
 #include <SDCardManager.h>
 
-#include "Battery.h"
 #include "CrossPointSettings.h"
 #include "CrossPointState.h"
 #include "EpubReaderChapterSelectionActivity.h"
 #include "MappedInputManager.h"
+#include "ScreenComponents.h"
 #include "fontIds.h"
 
 namespace {
@@ -422,7 +422,6 @@ void EpubReaderActivity::renderStatusBar(const int orientedMarginRight, const in
   // Position status bar near the bottom of the logical screen, regardless of orientation
   const auto screenHeight = renderer.getScreenHeight();
   const auto textY = screenHeight - orientedMarginBottom - 2;
-  int percentageTextWidth = 0;
   int progressTextWidth = 0;
 
   if (showProgress) {
@@ -439,42 +438,13 @@ void EpubReaderActivity::renderStatusBar(const int orientedMarginRight, const in
   }
 
   if (showBattery) {
-    // Left aligned battery icon and percentage
+    ScreenComponents::drawBattery(renderer, orientedMarginLeft, textY);
-    const uint16_t percentage = battery.readPercentage();
-    const auto percentageText = std::to_string(percentage) + "%";
-    percentageTextWidth = renderer.getTextWidth(SMALL_FONT_ID, percentageText.c_str());
-    renderer.drawText(SMALL_FONT_ID, 20 + orientedMarginLeft, textY, percentageText.c_str());
-
-    // 1 column on left, 2 columns on right, 5 columns of battery body
-    constexpr int batteryWidth = 15;
-    constexpr int batteryHeight = 10;
-    const int x = orientedMarginLeft;
-    const int y = screenHeight - orientedMarginBottom + 5;
-
-    // Top line
-    renderer.drawLine(x, y, x + batteryWidth - 4, y);
-    // Bottom line
-    renderer.drawLine(x, y + batteryHeight - 1, x + batteryWidth - 4, y + batteryHeight - 1);
-    // Left line
-    renderer.drawLine(x, y, x, y + batteryHeight - 1);
-    // Battery end
-    renderer.drawLine(x + batteryWidth - 4, y, x + batteryWidth - 4, y + batteryHeight - 1);
-    renderer.drawLine(x + batteryWidth - 3, y + 2, x + batteryWidth - 1, y + 2);
-    renderer.drawLine(x + batteryWidth - 3, y + batteryHeight - 3, x + batteryWidth - 1, y + batteryHeight - 3);
-    renderer.drawLine(x + batteryWidth - 1, y + 2, x + batteryWidth - 1, y + batteryHeight - 3);
-
-    // The +1 is to round up, so that we always fill at least one pixel
-    int filledWidth = percentage * (batteryWidth - 5) / 100 + 1;
-    if (filledWidth > batteryWidth - 5) {
-      filledWidth = batteryWidth - 5;  // Ensure we don't overflow
-    }
-    renderer.fillRect(x + 1, y + 1, filledWidth, batteryHeight - 2);
   }
 
   if (showChapterTitle) {
     // Centered chatper title text
     // Page width minus existing content with 30px padding on each side
-    const int titleMarginLeft = 20 + percentageTextWidth + 30 + orientedMarginLeft;
+    const int titleMarginLeft = 50 + 30 + orientedMarginLeft;  // 50px for battery
     const int titleMarginRight = progressTextWidth + 30 + orientedMarginRight;
     const int availableTextWidth = renderer.getScreenWidth() - titleMarginLeft - titleMarginRight;
     const int tocIndex = epub->getTocIndexForSpineIndex(currentSpineIndex);