Normalize button hints (#130)

## Summary

This creates a `renderer.drawButtonHints` to make all of the "hints"
over buttons to match the home screen.

## Additional Context

* Add any other information that might be helpful for the reviewer
(e.g., performance implications, potential risks, specific areas to
focus on).

---------

Co-authored-by: Dave Allie <dave@daveallie.com>

lib/GfxRenderer/GfxRenderer.cpp

@@ -239,6 +239,28 @@ int GfxRenderer::getLineHeight(const int fontId) const {
   return fontMap.at(fontId).getData(REGULAR)->advanceY;
 }
 
+void GfxRenderer::drawButtonHints(const int fontId, const char* btn1, const char* btn2, const char* btn3,
+                                  const char* btn4) const {
+  const int pageHeight = getScreenHeight();
+  constexpr int buttonWidth = 106;
+  constexpr int buttonHeight = 40;
+  constexpr int buttonY = 40;     // Distance from bottom
+  constexpr int textYOffset = 5;  // Distance from top of button to text baseline
+  constexpr int buttonPositions[] = {25, 130, 245, 350};
+  const char* labels[] = {btn1, btn2, btn3, btn4};
+
+  for (int i = 0; i < 4; i++) {
+    // Only draw if the label is non-empty
+    if (labels[i] != nullptr && labels[i][0] != '\0') {
+      const int x = buttonPositions[i];
+      drawRect(x, pageHeight - buttonY, buttonWidth, buttonHeight);
+      const int textWidth = getTextWidth(fontId, labels[i]);
+      const int textX = x + (buttonWidth - 1 - textWidth) / 2;
+      drawText(fontId, textX, pageHeight - buttonY + textYOffset, labels[i]);
+    }
+  }
+}
+
 uint8_t* GfxRenderer::getFrameBuffer() const { return einkDisplay.getFrameBuffer(); }
 
 size_t GfxRenderer::getBufferSize() { return EInkDisplay::BUFFER_SIZE; }

lib/GfxRenderer/GfxRenderer.h

@@ -57,6 +57,9 @@ class GfxRenderer {
   int getSpaceWidth(int fontId) const;
   int getLineHeight(int fontId) const;
 
+  // UI Components
+  void drawButtonHints(int fontId, const char* btn1, const char* btn2, const char* btn3, const char* btn4) const;
+
   // Grayscale functions
   void setRenderMode(const RenderMode mode) { this->renderMode = mode; }
   void copyGrayscaleLsbBuffers() const;

src/activities/home/HomeActivity.cpp

@@ -85,7 +85,6 @@ void HomeActivity::render() const {
   renderer.clearScreen();
 
   const auto pageWidth = renderer.getScreenWidth();
-  const auto pageHeight = renderer.getScreenHeight();
   renderer.drawCenteredText(READER_FONT_ID, 10, "CrossPoint Reader", true, BOLD);
 
   // Draw selection
@@ -94,18 +93,7 @@ void HomeActivity::render() const {
   renderer.drawText(UI_FONT_ID, 20, 90, "File transfer", selectorIndex != 1);
   renderer.drawText(UI_FONT_ID, 20, 120, "Settings", selectorIndex != 2);
 
-  renderer.drawRect(25, pageHeight - 40, 106, 40);
-  renderer.drawText(UI_FONT_ID, 25 + (105 - renderer.getTextWidth(UI_FONT_ID, "Back")) / 2, pageHeight - 35, "Back");
-
-  renderer.drawRect(130, pageHeight - 40, 106, 40);
-  renderer.drawText(UI_FONT_ID, 130 + (105 - renderer.getTextWidth(UI_FONT_ID, "Confirm")) / 2, pageHeight - 35,
-                    "Confirm");
-
-  renderer.drawRect(245, pageHeight - 40, 106, 40);
-  renderer.drawText(UI_FONT_ID, 245 + (105 - renderer.getTextWidth(UI_FONT_ID, "Left")) / 2, pageHeight - 35, "Left");
-
-  renderer.drawRect(350, pageHeight - 40, 106, 40);
-  renderer.drawText(UI_FONT_ID, 350 + (105 - renderer.getTextWidth(UI_FONT_ID, "Right")) / 2, pageHeight - 35, "Right");
+  renderer.drawButtonHints(UI_FONT_ID, "Back", "Confirm", "Left", "Right");
 
   renderer.displayBuffer();
 }

src/activities/network/CrossPointWebServerActivity.cpp

@@ -337,8 +337,6 @@ void CrossPointWebServerActivity::render() const {
 }
 
 void CrossPointWebServerActivity::renderServerRunning() const {
-  const auto pageHeight = renderer.getScreenHeight();
-
   // Use consistent line spacing
   constexpr int LINE_SPACING = 28;  // Space between lines
 
@@ -389,5 +387,5 @@ void CrossPointWebServerActivity::renderServerRunning() const {
     renderer.drawCenteredText(SMALL_FONT_ID, startY + LINE_SPACING * 4, "Open this URL in your browser", true, REGULAR);
   }
 
-  renderer.drawCenteredText(SMALL_FONT_ID, pageHeight - 30, "Press BACK to exit", true, REGULAR);
+  renderer.drawButtonHints(UI_FONT_ID, "« Exit", "", "", "");
 }

src/activities/network/NetworkModeSelectionActivity.cpp

@@ -122,7 +122,7 @@ void NetworkModeSelectionActivity::render() const {
   }
 
   // Draw help text at bottom
-  renderer.drawCenteredText(SMALL_FONT_ID, pageHeight - 30, "Press OK to select, BACK to cancel", true, REGULAR);
+  renderer.drawButtonHints(UI_FONT_ID, "« Back", "Select", "", "");
 
   renderer.displayBuffer();
 }

src/activities/network/WifiSelectionActivity.cpp

@@ -548,11 +548,12 @@ void WifiSelectionActivity::renderNetworkList() const {
     // Show network count
     char countStr[32];
     snprintf(countStr, sizeof(countStr), "%zu networks found", networks.size());
-    renderer.drawText(SMALL_FONT_ID, 20, pageHeight - 45, countStr);
+    renderer.drawText(SMALL_FONT_ID, 20, pageHeight - 90, countStr);
   }
 
   // Draw help text
-  renderer.drawText(SMALL_FONT_ID, 20, pageHeight - 30, "OK: Connect | * = Encrypted | + = Saved");
+  renderer.drawText(SMALL_FONT_ID, 20, pageHeight - 75, "* = Encrypted | + = Saved");
+  renderer.drawButtonHints(UI_FONT_ID, "« Back", "Connect", "", "");
 }
 
 void WifiSelectionActivity::renderPasswordEntry() const {

src/activities/reader/FileSelectionActivity.cpp

@@ -149,7 +149,7 @@ void FileSelectionActivity::render() const {
   renderer.drawCenteredText(READER_FONT_ID, 10, "Books", true, BOLD);
 
   // Help text
-  renderer.drawText(SMALL_FONT_ID, 20, GfxRenderer::getScreenHeight() - 30, "Press BACK for Home");
+  renderer.drawButtonHints(UI_FONT_ID, "« Home", "", "", "");
 
   if (files.empty()) {
     renderer.drawText(UI_FONT_ID, 20, 60, "No EPUBs found");

src/activities/settings/SettingsActivity.cpp

@@ -169,7 +169,7 @@ void SettingsActivity::render() const {
   }
 
   // Draw help text
-  renderer.drawText(SMALL_FONT_ID, 20, pageHeight - 30, "Press OK to toggle, BACK to save & exit");
+  renderer.drawButtonHints(UI_FONT_ID, "« Save", "Toggle", "", "");
   renderer.drawText(SMALL_FONT_ID, pageWidth - 20 - renderer.getTextWidth(SMALL_FONT_ID, CROSSPOINT_VERSION),
                     pageHeight - 30, CROSSPOINT_VERSION);