Introduce separators in drawList

src/components/UITheme.cpp

@@ -2,6 +2,7 @@
 
 #include <FsHelpers.h>
 #include <GfxRenderer.h>
+#include <I18n.h>
 #include <Logging.h>
 
 #include <memory>
@@ -97,6 +98,22 @@ Rect UITheme::getContentRect(const GfxRenderer& renderer, bool hasBottomHints, b
   return Rect{left, top, w - left - right, h - top - bottom};
 }
 
+std::string UITheme::makeSeparatorTitle(const std::string& title) {
+  return std::string("__") + title;
+}
+
+std::string UITheme::makeSeparatorTitle(StrId labelId) {
+  return std::string("__") + I18N.get(labelId);
+}
+
+bool UITheme::isSeparatorTitle(const std::string& title) {
+  return title.rfind("__", 0) == 0;
+}
+
+std::string UITheme::stripSeparatorTitle(const std::string& title) {
+  return isSeparatorTitle(title) ? title.substr(2) : title;
+}
+
 std::string UITheme::getCoverThumbPath(std::string coverBmpPath, int coverHeight) {
   size_t pos = coverBmpPath.find("[HEIGHT]", 0);
   if (pos != std::string::npos) {

src/components/UITheme.h

@@ -3,6 +3,8 @@
 #include <functional>
 #include <memory>
 
+#include <I18n.h>
+
 #include "CrossPointSettings.h"
 #include "components/themes/BaseTheme.h"
 
@@ -20,6 +22,11 @@ class UITheme {
   void setTheme(CrossPointSettings::UI_THEME type);
   static int getNumberOfItemsPerPage(const GfxRenderer& renderer, bool hasHeader, bool hasTabBar, bool hasButtonHints,
                                      bool hasSubtitle);
+  static std::string makeSeparatorTitle(const std::string& title);
+  static std::string makeSeparatorTitle(StrId labelId);
+  static bool isSeparatorTitle(const std::string& title);
+  static std::string stripSeparatorTitle(const std::string& title);
+
   // Returns the drawable content Rect accounting for screen orientation and visible button hints.
   // Bottom hints occupy the physical bottom edge; side hints occupy the physical right edge.
   // The mapping to logical edges is orientation-dependent.

src/components/themes/BaseTheme.cpp

@@ -270,9 +270,14 @@ void BaseTheme::drawList(const GfxRenderer& renderer, Rect rect, int itemCount,
     }
   }
 
+  bool selectedIsSeparator = false;
+  if (selectedIndex >= 0 && selectedIndex < itemCount) {
+    selectedIsSeparator = UITheme::isSeparatorTitle(rowTitle(selectedIndex));
+  }
+
   // Draw selection
   int contentWidth = rect.width - 5;
-  if (selectedIndex >= 0) {
+  if (selectedIndex >= 0 && !selectedIsSeparator) {
     renderer.fillRect(rect.x, rect.y + selectedIndex % pageItems * rowHeight - 2, rect.width, rowHeight);
   }
   // Draw all items
@@ -283,9 +288,23 @@ void BaseTheme::drawList(const GfxRenderer& renderer, Rect rect, int itemCount,
 
     // Draw name
     auto itemName = rowTitle(i);
+    const bool isSeparator = UITheme::isSeparatorTitle(itemName);
+    if (isSeparator) {
+      itemName = UITheme::stripSeparatorTitle(itemName);
+    }
+
+    if (isSeparator) {
+      drawListSeparator(renderer,
+                        Rect{rect.x + BaseMetrics::values.contentSidePadding, itemY,
+                             contentWidth - BaseMetrics::values.contentSidePadding * 2, rowHeight},
+                        rect.x + BaseMetrics::values.contentSidePadding, textWidth, itemName);
+      continue;
+    }
+
     auto font = (rowSubtitle != nullptr) ? UI_12_FONT_ID : UI_10_FONT_ID;
     auto item = renderer.truncatedText(font, itemName.c_str(), textWidth);
-    renderer.drawText(font, rect.x + BaseMetrics::values.contentSidePadding, itemY, item.c_str(), i != selectedIndex);
+    renderer.drawText(font, rect.x + BaseMetrics::values.contentSidePadding, itemY, item.c_str(), true);
+    renderer.drawText(font, rect.x + BaseMetrics::values.contentSidePadding, itemY, item.c_str(), true);
 
     if (rowSubtitle != nullptr) {
       // Draw subtitle; if the text is newline-separated (author\nseries), join with • for single-line display
@@ -309,6 +328,14 @@ void BaseTheme::drawList(const GfxRenderer& renderer, Rect rect, int itemCount,
   }
 }
 
+void BaseTheme::drawListSeparator(const GfxRenderer& renderer, Rect rowRect, int textX, int textWidth,
+                                  const std::string& title) const {
+  const std::string item = renderer.truncatedText(SMALL_FONT_ID, title.c_str(), textWidth);
+  const int lineY = rowRect.y + rowRect.height - 2;
+  renderer.drawLine(rowRect.x, lineY, rowRect.x + rowRect.width - 1, lineY, true);
+  renderer.drawText(SMALL_FONT_ID, textX, rowRect.y + 7, item.c_str(), true, EpdFontFamily::BOLD);
+}
+
 void BaseTheme::drawHeader(const GfxRenderer& renderer, Rect rect, const char* title, const char* subtitle) const {
   // Hide last battery draw
   constexpr int maxBatteryWidth = 80;

src/components/themes/BaseTheme.h

@@ -121,6 +121,8 @@ class BaseTheme {
                         const std::function<UIIcon(int index)>& rowIcon = nullptr,
                         const std::function<std::string(int index)>& rowValue = nullptr,
                         bool highlightValue = false) const;
+  virtual void drawListSeparator(const GfxRenderer& renderer, Rect rowRect, int textX, int textWidth,
+                                 const std::string& title) const;
   virtual void drawHeader(const GfxRenderer& renderer, Rect rect, const char* title,
                           const char* subtitle = nullptr) const;
   virtual void drawSubHeader(const GfxRenderer& renderer, Rect rect, const char* label,

src/components/themes/lyra/LyraTheme.cpp

@@ -401,11 +401,16 @@ void LyraTheme::drawList(const GfxRenderer& renderer, Rect rect, int itemCount,
                       scrollBarHeight, true);
   }
 
+  bool selectedIsSeparator = false;
+  if (selectedIndex >= 0 && selectedIndex < itemCount && rowTitle != nullptr) {
+    selectedIsSeparator = UITheme::isSeparatorTitle(rowTitle(selectedIndex));
+  }
+
   // Draw selection
   int contentWidth =
       rect.width -
       (totalPages > 1 ? (LyraMetrics::values.scrollBarWidth + LyraMetrics::values.scrollBarRightOffset) : 1);
-  if (selectedIndex >= 0) {
+  if (selectedIndex >= 0 && !selectedIsSeparator) {
     renderer.fillRoundedRect(
         rect.x + LyraMetrics::values.contentSidePadding, rect.y + selectedIndex % pageItems * rowHeight,
         contentWidth - LyraMetrics::values.contentSidePadding * 2, rowHeight, cornerRadius, Color::LightGray);
@@ -438,6 +443,19 @@ void LyraTheme::drawList(const GfxRenderer& renderer, Rect rect, int itemCount,
     }
 
     auto itemName = rowTitle(i);
+    const bool isSeparator = UITheme::isSeparatorTitle(itemName);
+    if (isSeparator) {
+      itemName = UITheme::stripSeparatorTitle(itemName);
+    }
+
+    if (isSeparator) {
+      drawListSeparator(renderer,
+                        Rect{rect.x + LyraMetrics::values.contentSidePadding, itemY,
+                             contentWidth - LyraMetrics::values.contentSidePadding * 2, rowHeight},
+                        textX, rowTextWidth, itemName);
+      continue;
+    }
+
     auto item = renderer.truncatedText(UI_10_FONT_ID, itemName.c_str(), rowTextWidth);
     renderer.drawText(UI_10_FONT_ID, textX, itemY + 7, item.c_str(), true);