My Library: Tab bar w/ Recent Books + File Browser (#250)

# Summary

This PR introduces a reusable Tab Bar component and combines the Recent
Books and File Browser into a unified tabbed page called "My Library"
accessible from the Home screen.

## Features
### New Tab Bar Component
A flexible, reusable tab bar component added to `ScreenComponents` that
can be used throughout the application.

### New Scroll Indicator Component
A page position indicator for lists that span multiple pages.
**Features:**
- Up/down arrow indicators
- Current page fraction display (e.g., "1/3")
- Only renders when content spans multiple pages

### My Library Activity
A new unified view combining Recent Books and File Browser into a single
tabbed page.

**Tabs:**
- **Recent** - Shows recently opened books
- **Files** - Browse SD card directory structure

**Navigation:**
- Up/Down or Left/Right: Navigate through list items
- Left/Right (when first item selected): Switch between tabs
- Confirm: Open selected book or enter directory
- Back: Go up directory (Files tab) or return home
- Long press Back: Jump to root directory (Files tab)

**UI Elements:**
- Tab bar with selection indicator
- Scroll/page indicator on right side
- Side button hints (up/down arrows)
- Dynamic bottom button labels ("BACK" in subdirectories, "HOME" at
root)

## Tab Bar Usage
The tab bar component is designed to be reusable across different
activities. Here's how to use it:

### Basic Example
```cpp
#include "ScreenComponents.h"
void MyActivity::render() const {
  renderer.clearScreen();
  
  // Define tabs with labels and selection state
  std::vector<TabInfo> tabs = {
    {"Tab One", currentTab == 0},   // Selected when currentTab is 0
    {"Tab Two", currentTab == 1},   // Selected when currentTab is 1
    {"Tab Three", currentTab == 2}  // Selected when currentTab is 2
  };
  
  // Draw tab bar at Y position 15, returns height of the tab bar
  int tabBarHeight = ScreenComponents::drawTabBar(renderer, 15, tabs);
  
  // Position your content below the tab bar
  int contentStartY = 15 + tabBarHeight + 10; // Add some padding
  
  // Draw content based on selected tab
  if (currentTab == 0) {
    renderTabOneContent(contentStartY);
  } else if (currentTab == 1) {
    renderTabTwoContent(contentStartY);
  } else {
    renderTabThreeContent(contentStartY);
  }
  
  renderer.displayBuffer();
}
```
Video Demo: https://share.cleanshot.com/P6NBncFS

<img width="250"
src="https://github.com/user-attachments/assets/07de4418-968e-4a88-9b42-ac5f53d8a832"
/>
<img width="250"
src="https://github.com/user-attachments/assets/e40201ed-dcc8-4568-b008-cd2bf13ebb2a"
/>
<img width="250"
src="https://github.com/user-attachments/assets/73db269f-e629-4696-b8ca-0b8443451a05"
/>

---------

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

src/ScreenComponents.cpp

@@ -42,6 +42,75 @@ void ScreenComponents::drawBattery(const GfxRenderer& renderer, const int left,
   renderer.fillRect(x + 2, y + 2, filledWidth, batteryHeight - 4);
 }
 
+int ScreenComponents::drawTabBar(const GfxRenderer& renderer, const int y, const std::vector<TabInfo>& tabs) {
+  constexpr int tabPadding = 20;      // Horizontal padding between tabs
+  constexpr int leftMargin = 20;      // Left margin for first tab
+  constexpr int underlineHeight = 2;  // Height of selection underline
+  constexpr int underlineGap = 4;     // Gap between text and underline
+
+  const int lineHeight = renderer.getLineHeight(UI_12_FONT_ID);
+  const int tabBarHeight = lineHeight + underlineGap + underlineHeight;
+
+  int currentX = leftMargin;
+
+  for (const auto& tab : tabs) {
+    const int textWidth =
+        renderer.getTextWidth(UI_12_FONT_ID, tab.label, tab.selected ? EpdFontFamily::BOLD : EpdFontFamily::REGULAR);
+
+    // Draw tab label
+    renderer.drawText(UI_12_FONT_ID, currentX, y, tab.label, true,
+                      tab.selected ? EpdFontFamily::BOLD : EpdFontFamily::REGULAR);
+
+    // Draw underline for selected tab
+    if (tab.selected) {
+      renderer.fillRect(currentX, y + lineHeight + underlineGap, textWidth, underlineHeight);
+    }
+
+    currentX += textWidth + tabPadding;
+  }
+
+  return tabBarHeight;
+}
+
+void ScreenComponents::drawScrollIndicator(const GfxRenderer& renderer, const int currentPage, const int totalPages,
+                                           const int contentTop, const int contentHeight) {
+  if (totalPages <= 1) {
+    return;  // No need for indicator if only one page
+  }
+
+  const int screenWidth = renderer.getScreenWidth();
+  constexpr int indicatorWidth = 20;
+  constexpr int arrowSize = 6;
+  constexpr int margin = 15;  // Offset from right edge
+
+  const int centerX = screenWidth - indicatorWidth / 2 - margin;
+  const int indicatorTop = contentTop + 60;  // Offset to avoid overlapping side button hints
+  const int indicatorBottom = contentTop + contentHeight - 30;
+
+  // Draw up arrow at top (^) - narrow point at top, wide base at bottom
+  for (int i = 0; i < arrowSize; ++i) {
+    const int lineWidth = 1 + i * 2;
+    const int startX = centerX - i;
+    renderer.drawLine(startX, indicatorTop + i, startX + lineWidth - 1, indicatorTop + i);
+  }
+
+  // Draw down arrow at bottom (v) - wide base at top, narrow point at bottom
+  for (int i = 0; i < arrowSize; ++i) {
+    const int lineWidth = 1 + (arrowSize - 1 - i) * 2;
+    const int startX = centerX - (arrowSize - 1 - i);
+    renderer.drawLine(startX, indicatorBottom - arrowSize + 1 + i, startX + lineWidth - 1,
+                      indicatorBottom - arrowSize + 1 + i);
+  }
+
+  // Draw page fraction in the middle (e.g., "1/3")
+  const std::string pageText = std::to_string(currentPage) + "/" + std::to_string(totalPages);
+  const int textWidth = renderer.getTextWidth(SMALL_FONT_ID, pageText.c_str());
+  const int textX = centerX - textWidth / 2;
+  const int textY = (indicatorTop + indicatorBottom) / 2 - renderer.getLineHeight(SMALL_FONT_ID) / 2;
+
+  renderer.drawText(SMALL_FONT_ID, textX, textY, pageText.c_str());
+}
+
 void ScreenComponents::drawProgressBar(const GfxRenderer& renderer, const int x, const int y, const int width,
                                        const int height, const size_t current, const size_t total) {
   if (total == 0) {