Screen refactor / move to renderers (#6932)

* WIP Screen.cpp refactoring

* WIP

* Notification and time

* Draw nodes and device focused

* Namespacing and more moved methods

* Move EInk ones

* Eink fixes

* Remove useless wrapper functions

* Update alignments and spacing

* Update src/graphics/draw/NotificationRenderer.cpp

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Fully qualify

* Move drawfunctionoverlay

* Put the imperial back

* CompassRenderer methods

* Moar

* Another

* Fixed compassarrow renderer

* Draw columns

* Name cleanup

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

src/graphics/Screen.h

@@ -5,6 +5,10 @@
 #include "detect/ScanI2C.h"
 #include "mesh/generated/meshtastic/config.pb.h"
 #include <OLEDDisplay.h>
+#include <string>
+#include <vector>
+
+#define getStringCenteredX(s) ((SCREEN_WIDTH - display->getStringWidth(s)) / 2)
 
 #if !HAS_SCREEN
 #include "power.h"
@@ -64,6 +68,7 @@ class Screen
 #include "mesh/MeshModule.h"
 #include "power.h"
 #include <string>
+#include <vector>
 
 // 0 to 255, though particular variants might define different defaults
 #ifndef BRIGHTNESS_DEFAULT
@@ -228,21 +233,11 @@ class Screen : public concurrency::OSThread
 
     void blink();
 
-    void drawFrameText(OLEDDisplay *, OLEDDisplayUiState *, int16_t, int16_t, const char *);
-
     void getTimeAgoStr(uint32_t agoSecs, char *timeStr, uint8_t maxLength);
 
     // Draw north
-    void drawCompassNorth(OLEDDisplay *display, int16_t compassX, int16_t compassY, float myHeading);
-
-    static uint16_t getCompassDiam(uint32_t displayWidth, uint32_t displayHeight);
-
     float estimatedHeading(double lat, double lon);
 
-    void drawNodeHeading(OLEDDisplay *display, int16_t compassX, int16_t compassY, uint16_t compassDiam, float headingRadian);
-
-    void drawColumns(OLEDDisplay *display, int16_t x, int16_t y, const char **fields);
-
     /// Handle button press, trackball or swipe action)
     void onPress() { enqueueCmd(ScreenCmd{.cmd = Cmd::ON_PRESS}); }
     void showPrevFrame() { enqueueCmd(ScreenCmd{.cmd = Cmd::SHOW_PREV_FRAME}); }
@@ -322,9 +317,6 @@ class Screen : public concurrency::OSThread
         }
     }
 
-    /// generates a very brief time delta display
-    std::string drawTimeDelta(uint32_t days, uint32_t hours, uint32_t minutes, uint32_t seconds);
-
     /// Overrides the default utf8 character conversion, to replace empty space with question marks
     static char customFontTableLookup(const uint8_t ch)
     {
@@ -643,13 +635,6 @@ class Screen : public concurrency::OSThread
     // Sets frame up for immediate drawing
     void setFrameImmediateDraw(FrameCallback *drawFrames);
 
-    /// Called when debug screen is to be drawn, calls through to debugInfo.drawFrame.
-    static void drawDebugInfoTrampoline(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
-
-    static void drawDebugInfoSettingsTrampoline(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
-
-    static void drawDebugInfoWiFiTrampoline(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
-
 #if defined(DISPLAY_CLOCK_FRAME)
     static void drawAnalogClockFrame(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
 
@@ -706,4 +691,8 @@ class Screen : public concurrency::OSThread
 extern String alertBannerMessage;
 extern uint32_t alertBannerUntil;
 
+// Extern declarations for function symbols used in UIRenderer
+extern std::vector<std::string> functionSymbol;
+extern std::string functionSymbolString;
+
 #endif

src/graphics/ScreenGlobals.cpp

@@ -0,0 +1,6 @@
+#include <string>
+#include <vector>
+
+// Global variables for screen function overlay
+std::vector<std::string> functionSymbol;
+std::string functionSymbolString;

src/graphics/draw/ClockRenderer.h

@@ -0,0 +1,40 @@
+#pragma once
+
+#include "graphics/Screen.h"
+#include <OLEDDisplay.h>
+#include <OLEDDisplayUi.h>
+
+namespace graphics
+{
+
+/// Forward declarations
+class Screen;
+
+/**
+ * @brief Clock drawing functions
+ *
+ * Contains all functions related to drawing analog and digital clocks,
+ * segmented displays, and time-related UI elements.
+ */
+namespace ClockRenderer
+{
+// Clock frame functions
+void drawAnalogClockFrame(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+void drawDigitalClockFrame(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+
+// Segmented display functions
+void drawSegmentedDisplayCharacter(OLEDDisplay *display, int x, int y, uint8_t number, float scale = 1);
+void drawSegmentedDisplayColon(OLEDDisplay *display, int x, int y, float scale = 1);
+void drawHorizontalSegment(OLEDDisplay *display, int x, int y, int width, int height);
+void drawVerticalSegment(OLEDDisplay *display, int x, int y, int width, int height);
+
+// UI elements for clock displays
+void drawWatchFaceToggleButton(OLEDDisplay *display, int16_t x, int16_t y, bool digitalMode = true, float scale = 1);
+void drawBluetoothConnectedIcon(OLEDDisplay *display, int16_t x, int16_t y);
+
+// Utility functions
+bool deltaToTimestamp(uint32_t secondsAgo, uint8_t *hours, uint8_t *minutes, int32_t *daysAgo);
+
+} // namespace ClockRenderer
+
+} // namespace graphics

src/graphics/draw/CompassRenderer.cpp

@@ -0,0 +1,132 @@
+#include "CompassRenderer.h"
+#include "NodeDB.h"
+#include "UIRenderer.h"
+#include "configuration.h"
+#include "gps/GeoCoord.h"
+#include "graphics/ScreenFonts.h"
+#include <cmath>
+
+namespace graphics
+{
+namespace CompassRenderer
+{
+
+// Point helper class for compass calculations
+struct Point {
+    float x, y;
+    Point(float x, float y) : x(x), y(y) {}
+
+    void rotate(float angle)
+    {
+        float cos_a = cos(angle);
+        float sin_a = sin(angle);
+        float new_x = x * cos_a - y * sin_a;
+        float new_y = x * sin_a + y * cos_a;
+        x = new_x;
+        y = new_y;
+    }
+
+    void scale(float factor)
+    {
+        x *= factor;
+        y *= factor;
+    }
+
+    void translate(float dx, float dy)
+    {
+        x += dx;
+        y += dy;
+    }
+};
+
+void drawCompassNorth(OLEDDisplay *display, int16_t compassX, int16_t compassY, float myHeading)
+{
+    // Show the compass heading (not implemented in original)
+    // This could draw a "N" indicator or north arrow
+    // For now, we'll draw a simple north indicator
+    const float radius = 8.0f;
+    Point north(0, -radius);
+    north.rotate(-myHeading);
+    north.translate(compassX, compassY);
+
+    // Draw a small "N" or north indicator
+    display->drawCircle(north.x, north.y, 2);
+    display->setFont(FONT_SMALL);
+    display->setTextAlignment(TEXT_ALIGN_CENTER);
+    display->drawString(north.x, north.y - 3, "N");
+}
+
+void drawNodeHeading(OLEDDisplay *display, int16_t compassX, int16_t compassY, uint16_t compassDiam, float headingRadian)
+{
+    Point tip(0.0f, 0.5f), tail(0.0f, -0.35f); // pointing up initially
+    float arrowOffsetX = 0.14f, arrowOffsetY = 1.0f;
+    Point leftArrow(tip.x - arrowOffsetX, tip.y - arrowOffsetY), rightArrow(tip.x + arrowOffsetX, tip.y - arrowOffsetY);
+
+    Point *arrowPoints[] = {&tip, &tail, &leftArrow, &rightArrow};
+
+    for (int i = 0; i < 4; i++) {
+        arrowPoints[i]->rotate(headingRadian);
+        arrowPoints[i]->scale(compassDiam * 0.6);
+        arrowPoints[i]->translate(compassX, compassY);
+    }
+
+#ifdef USE_EINK
+    display->drawTriangle(tip.x, tip.y, rightArrow.x, rightArrow.y, tail.x, tail.y);
+#else
+    display->fillTriangle(tip.x, tip.y, rightArrow.x, rightArrow.y, tail.x, tail.y);
+#endif
+    display->drawTriangle(tip.x, tip.y, leftArrow.x, leftArrow.y, tail.x, tail.y);
+}
+
+void drawArrowToNode(OLEDDisplay *display, int16_t x, int16_t y, int16_t size, float bearing)
+{
+    float radians = bearing * DEG_TO_RAD;
+
+    Point tip(0, -size / 2);
+    Point left(-size / 4, size / 4);
+    Point right(size / 4, size / 4);
+
+    tip.rotate(radians);
+    left.rotate(radians);
+    right.rotate(radians);
+
+    tip.translate(x, y);
+    left.translate(x, y);
+    right.translate(x, y);
+
+    display->drawTriangle(tip.x, tip.y, left.x, left.y, right.x, right.y);
+}
+
+float estimatedHeading(double lat, double lon)
+{
+    // Simple magnetic declination estimation
+    // This is a very basic implementation - the original might be more sophisticated
+    return 0.0f; // Return 0 for now, indicating no heading available
+}
+
+uint16_t getCompassDiam(uint32_t displayWidth, uint32_t displayHeight)
+{
+    // Calculate appropriate compass diameter based on display size
+    uint16_t minDimension = (displayWidth < displayHeight) ? displayWidth : displayHeight;
+    uint16_t maxDiam = minDimension / 3; // Use 1/3 of the smaller dimension
+
+    // Ensure minimum and maximum bounds
+    if (maxDiam < 16)
+        maxDiam = 16;
+    if (maxDiam > 64)
+        maxDiam = 64;
+
+    return maxDiam;
+}
+
+float calculateBearing(double lat1, double lon1, double lat2, double lon2)
+{
+    double dLon = (lon2 - lon1) * DEG_TO_RAD;
+    double y = sin(dLon) * cos(lat2 * DEG_TO_RAD);
+    double x = cos(lat1 * DEG_TO_RAD) * sin(lat2 * DEG_TO_RAD) - sin(lat1 * DEG_TO_RAD) * cos(lat2 * DEG_TO_RAD) * cos(dLon);
+    double bearing = atan2(y, x) * RAD_TO_DEG;
+    return fmod(bearing + 360.0, 360.0);
+}
+
+} // namespace CompassRenderer
+} // namespace graphics

src/graphics/draw/CompassRenderer.h

@@ -0,0 +1,36 @@
+#pragma once
+
+#include "graphics/Screen.h"
+#include "mesh/generated/meshtastic/mesh.pb.h"
+#include <OLEDDisplay.h>
+#include <OLEDDisplayUi.h>
+
+namespace graphics
+{
+
+/// Forward declarations
+class Screen;
+
+/**
+ * @brief Compass and navigation drawing functions
+ *
+ * Contains all functions related to drawing compass elements, headings,
+ * navigation arrows, and location-based UI components.
+ */
+namespace CompassRenderer
+{
+// Compass drawing functions
+void drawCompassNorth(OLEDDisplay *display, int16_t compassX, int16_t compassY, float myHeading);
+void drawNodeHeading(OLEDDisplay *display, int16_t compassX, int16_t compassY, uint16_t compassDiam, float headingRadian);
+void drawArrowToNode(OLEDDisplay *display, int16_t x, int16_t y, int16_t size, float bearing);
+
+// Navigation and location functions
+float estimatedHeading(double lat, double lon);
+uint16_t getCompassDiam(uint32_t displayWidth, uint32_t displayHeight);
+
+// Utility functions for bearing calculations
+float calculateBearing(double lat1, double lon1, double lat2, double lon2);
+
+} // namespace CompassRenderer
+
+} // namespace graphics

src/graphics/draw/DebugRenderer.cpp

@@ -0,0 +1,671 @@
+#include "DebugRenderer.h"
+#include "../Screen.h"
+#include "FSCommon.h"
+#include "NodeDB.h"
+#include "Throttle.h"
+#include "UIRenderer.h"
+#include "airtime.h"
+#include "configuration.h"
+#include "gps/RTC.h"
+#include "graphics/ScreenFonts.h"
+#include "graphics/SharedUIDisplay.h"
+#include "graphics/images.h"
+#include "main.h"
+#include "mesh/Channels.h"
+#include "mesh/generated/meshtastic/deviceonly.pb.h"
+#include "sleep.h"
+
+#if HAS_WIFI && !defined(ARCH_PORTDUINO)
+#include "mesh/wifi/WiFiAPClient.h"
+#include <WiFi.h>
+#ifdef ARCH_ESP32
+#include "mesh/wifi/WiFiAPClient.h"
+#endif
+#endif
+
+#ifdef ARCH_ESP32
+#include "modules/StoreForwardModule.h"
+#endif
+#include <DisplayFormatters.h>
+#include <RadioLibInterface.h>
+#include <target_specific.h>
+
+using namespace meshtastic;
+
+// Battery icon array
+static uint8_t imgBattery[16] = {0xFF, 0x81, 0x81, 0x81, 0x81, 0x81, 0x81, 0x81, 0x81, 0x81, 0x81, 0x81, 0x81, 0x81, 0xE7, 0x3C};
+
+// External variables
+extern graphics::Screen *screen;
+extern PowerStatus *powerStatus;
+extern NodeStatus *nodeStatus;
+extern GPSStatus *gpsStatus;
+extern Channels channels;
+extern "C" {
+extern char ourId[5];
+}
+extern AirTime *airTime;
+
+// External functions from Screen.cpp
+extern bool heartbeat;
+
+#ifdef ARCH_ESP32
+extern StoreForwardModule *storeForwardModule;
+#endif
+
+namespace graphics
+{
+namespace DebugRenderer
+{
+
+void drawFrame(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y)
+{
+    display->setFont(FONT_SMALL);
+
+    // The coordinates define the left starting point of the text
+    display->setTextAlignment(TEXT_ALIGN_LEFT);
+
+    if (config.display.displaymode != meshtastic_Config_DisplayConfig_DisplayMode_INVERTED) {
+        display->fillRect(0 + x, 0 + y, x + display->getWidth(), y + FONT_HEIGHT_SMALL);
+        display->setColor(BLACK);
+    }
+
+    char channelStr[20];
+    snprintf(channelStr, sizeof(channelStr), "#%s", channels.getName(channels.getPrimaryIndex()));
+
+    // Display power status
+    if (powerStatus->getHasBattery()) {
+        if (config.display.displaymode == meshtastic_Config_DisplayConfig_DisplayMode_DEFAULT) {
+            UIRenderer::drawBattery(display, x, y + 2, imgBattery, powerStatus);
+        } else {
+            UIRenderer::drawBattery(display, x + 1, y + 3, imgBattery, powerStatus);
+        }
+    } else if (powerStatus->knowsUSB()) {
+        if (config.display.displaymode == meshtastic_Config_DisplayConfig_DisplayMode_DEFAULT) {
+            display->drawFastImage(x, y + 2, 16, 8, powerStatus->getHasUSB() ? imgUSB : imgPower);
+        } else {
+            display->drawFastImage(x + 1, y + 3, 16, 8, powerStatus->getHasUSB() ? imgUSB : imgPower);
+        }
+    }
+    // Display nodes status
+    if (config.display.displaymode == meshtastic_Config_DisplayConfig_DisplayMode_DEFAULT) {
+        UIRenderer::drawNodes(display, x + (SCREEN_WIDTH * 0.25), y + 2, nodeStatus);
+    } else {
+        UIRenderer::drawNodes(display, x + (SCREEN_WIDTH * 0.25), y + 3, nodeStatus);
+    }
+#if HAS_GPS
+    // Display GPS status
+    if (config.position.gps_mode != meshtastic_Config_PositionConfig_GpsMode_ENABLED) {
+        UIRenderer::drawGpsPowerStatus(display, x, y + 2, gpsStatus);
+    } else {
+        if (config.display.displaymode == meshtastic_Config_DisplayConfig_DisplayMode_DEFAULT) {
+            UIRenderer::drawGps(display, x + (SCREEN_WIDTH * 0.63), y + 2, gpsStatus);
+        } else {
+            UIRenderer::drawGps(display, x + (SCREEN_WIDTH * 0.63), y + 3, gpsStatus);
+        }
+    }
+#endif
+    display->setColor(WHITE);
+    // Draw the channel name
+    display->drawString(x, y + FONT_HEIGHT_SMALL, channelStr);
+    // Draw our hardware ID to assist with bluetooth pairing. Either prefix with Info or S&F Logo
+    if (moduleConfig.store_forward.enabled) {
+#ifdef ARCH_ESP32
+        if (!Throttle::isWithinTimespanMs(storeForwardModule->lastHeartbeat,
+                                          (storeForwardModule->heartbeatInterval * 1200))) { // no heartbeat, overlap a bit
+#if (defined(USE_EINK) || defined(ILI9341_DRIVER) || defined(ILI9342_DRIVER) || defined(ST7701_CS) || defined(ST7735_CS) ||      \
+     defined(ST7789_CS) || defined(USE_ST7789) || defined(ILI9488_CS) || defined(HX8357_CS) || ARCH_PORTDUINO) &&                \
+    !defined(DISPLAY_FORCE_SMALL_FONTS)
+            display->drawFastImage(x + SCREEN_WIDTH - 14 - display->getStringWidth(ourId), y + 3 + FONT_HEIGHT_SMALL, 12, 8,
+                                   imgQuestionL1);
+            display->drawFastImage(x + SCREEN_WIDTH - 14 - display->getStringWidth(ourId), y + 11 + FONT_HEIGHT_SMALL, 12, 8,
+                                   imgQuestionL2);
+#else
+            display->drawFastImage(x + SCREEN_WIDTH - 10 - display->getStringWidth(ourId), y + 2 + FONT_HEIGHT_SMALL, 8, 8,
+                                   imgQuestion);
+#endif
+        } else {
+#if (defined(USE_EINK) || defined(ILI9341_DRIVER) || defined(ILI9342_DRIVER) || defined(ST7701_CS) || defined(ST7735_CS) ||      \
+     defined(ST7789_CS) || defined(USE_ST7789) || defined(ILI9488_CS) || defined(HX8357_CS)) &&                                  \
+    !defined(DISPLAY_FORCE_SMALL_FONTS)
+            display->drawFastImage(x + SCREEN_WIDTH - 18 - display->getStringWidth(ourId), y + 3 + FONT_HEIGHT_SMALL, 16, 8,
+                                   imgSFL1);
+            display->drawFastImage(x + SCREEN_WIDTH - 18 - display->getStringWidth(ourId), y + 11 + FONT_HEIGHT_SMALL, 16, 8,
+                                   imgSFL2);
+#else
+            display->drawFastImage(x + SCREEN_WIDTH - 13 - display->getStringWidth(ourId), y + 2 + FONT_HEIGHT_SMALL, 11, 8,
+                                   imgSF);
+#endif
+        }
+#endif
+    } else {
+        // TODO: Raspberry Pi supports more than just the one screen size
+#if (defined(USE_EINK) || defined(ILI9341_DRIVER) || defined(ILI9342_DRIVER) || defined(ST7701_CS) || defined(ST7735_CS) ||      \
+     defined(ST7789_CS) || defined(USE_ST7789) || defined(ILI9488_CS) || defined(HX8357_CS) || ARCH_PORTDUINO) &&                \
+    !defined(DISPLAY_FORCE_SMALL_FONTS)
+        display->drawFastImage(x + SCREEN_WIDTH - 14 - display->getStringWidth(ourId), y + 3 + FONT_HEIGHT_SMALL, 12, 8,
+                               imgInfoL1);
+        display->drawFastImage(x + SCREEN_WIDTH - 14 - display->getStringWidth(ourId), y + 11 + FONT_HEIGHT_SMALL, 12, 8,
+                               imgInfoL2);
+#else
+        display->drawFastImage(x + SCREEN_WIDTH - 10 - display->getStringWidth(ourId), y + 2 + FONT_HEIGHT_SMALL, 8, 8, imgInfo);
+#endif
+    }
+
+    display->drawString(x + SCREEN_WIDTH - display->getStringWidth(ourId), y + FONT_HEIGHT_SMALL, ourId);
+
+    // Draw any log messages
+    display->drawLogBuffer(x, y + (FONT_HEIGHT_SMALL * 2));
+
+    /* Display a heartbeat pixel that blinks every time the frame is redrawn */
+#ifdef SHOW_REDRAWS
+    if (heartbeat)
+        display->setPixel(0, 0);
+    heartbeat = !heartbeat;
+#endif
+}
+
+void drawFrameWiFi(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y)
+{
+#if HAS_WIFI && !defined(ARCH_PORTDUINO)
+    const char *wifiName = config.network.wifi_ssid;
+
+    display->setFont(FONT_SMALL);
+
+    // The coordinates define the left starting point of the text
+    display->setTextAlignment(TEXT_ALIGN_LEFT);
+
+    if (config.display.displaymode != meshtastic_Config_DisplayConfig_DisplayMode_INVERTED) {
+        display->fillRect(0 + x, 0 + y, x + display->getWidth(), y + FONT_HEIGHT_SMALL);
+        display->setColor(BLACK);
+    }
+
+    if (WiFi.status() != WL_CONNECTED) {
+        display->drawString(x, y, String("WiFi: Not Connected"));
+        if (config.display.heading_bold)
+            display->drawString(x + 1, y, String("WiFi: Not Connected"));
+    } else {
+        display->drawString(x, y, String("WiFi: Connected"));
+        if (config.display.heading_bold)
+            display->drawString(x + 1, y, String("WiFi: Connected"));
+
+        display->drawString(x + SCREEN_WIDTH - display->getStringWidth("RSSI " + String(WiFi.RSSI())), y,
+                            "RSSI " + String(WiFi.RSSI()));
+        if (config.display.heading_bold) {
+            display->drawString(x + SCREEN_WIDTH - display->getStringWidth("RSSI " + String(WiFi.RSSI())) - 1, y,
+                                "RSSI " + String(WiFi.RSSI()));
+        }
+    }
+
+    display->setColor(WHITE);
+
+    /*
+    - WL_CONNECTED: assigned when connected to a WiFi network;
+    - WL_NO_SSID_AVAIL: assigned when no SSID are available;
+    - WL_CONNECT_FAILED: assigned when the connection fails for all the attempts;
+    - WL_CONNECTION_LOST: assigned when the connection is lost;
+    - WL_DISCONNECTED: assigned when disconnected from a network;
+    - WL_IDLE_STATUS: it is a temporary status assigned when WiFi.begin() is called and remains active until the number of
+    attempts expires (resulting in WL_CONNECT_FAILED) or a connection is established (resulting in WL_CONNECTED);
+    - WL_SCAN_COMPLETED: assigned when the scan networks is completed;
+    - WL_NO_SHIELD: assigned when no WiFi shield is present;
+
+    */
+    if (WiFi.status() == WL_CONNECTED) {
+        display->drawString(x, y + FONT_HEIGHT_SMALL * 1, "IP: " + String(WiFi.localIP().toString().c_str()));
+    } else if (WiFi.status() == WL_NO_SSID_AVAIL) {
+        display->drawString(x, y + FONT_HEIGHT_SMALL * 1, "SSID Not Found");
+    } else if (WiFi.status() == WL_CONNECTION_LOST) {
+        display->drawString(x, y + FONT_HEIGHT_SMALL * 1, "Connection Lost");
+    } else if (WiFi.status() == WL_IDLE_STATUS) {
+        display->drawString(x, y + FONT_HEIGHT_SMALL * 1, "Idle ... Reconnecting");
+    } else if (WiFi.status() == WL_CONNECT_FAILED) {
+        display->drawString(x, y + FONT_HEIGHT_SMALL * 1, "Connection Failed");
+    }
+#ifdef ARCH_ESP32
+    else {
+        // Codes:
+        // https://docs.espressif.com/projects/esp-idf/en/latest/esp32/api-guides/wifi.html#wi-fi-reason-code
+        display->drawString(x, y + FONT_HEIGHT_SMALL * 1,
+                            WiFi.disconnectReasonName(static_cast<wifi_err_reason_t>(getWifiDisconnectReason())));
+    }
+#else
+    else {
+        display->drawString(x, y + FONT_HEIGHT_SMALL * 1, "Unkown status: " + String(WiFi.status()));
+    }
+#endif
+
+    display->drawString(x, y + FONT_HEIGHT_SMALL * 2, "SSID: " + String(wifiName));
+
+    display->drawString(x, y + FONT_HEIGHT_SMALL * 3, "http://meshtastic.local");
+
+    /* Display a heartbeat pixel that blinks every time the frame is redrawn */
+#ifdef SHOW_REDRAWS
+    if (heartbeat)
+        display->setPixel(0, 0);
+    heartbeat = !heartbeat;
+#endif
+#endif
+}
+
+void drawFrameSettings(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y)
+{
+    display->setFont(FONT_SMALL);
+
+    // The coordinates define the left starting point of the text
+    display->setTextAlignment(TEXT_ALIGN_LEFT);
+
+    if (config.display.displaymode != meshtastic_Config_DisplayConfig_DisplayMode_INVERTED) {
+        display->fillRect(0 + x, 0 + y, x + display->getWidth(), y + FONT_HEIGHT_SMALL);
+        display->setColor(BLACK);
+    }
+
+    char batStr[20];
+    if (powerStatus->getHasBattery()) {
+        int batV = powerStatus->getBatteryVoltageMv() / 1000;
+        int batCv = (powerStatus->getBatteryVoltageMv() % 1000) / 10;
+
+        snprintf(batStr, sizeof(batStr), "B %01d.%02dV %3d%% %c%c", batV, batCv, powerStatus->getBatteryChargePercent(),
+                 powerStatus->getIsCharging() ? '+' : ' ', powerStatus->getHasUSB() ? 'U' : ' ');
+
+        // Line 1
+        display->drawString(x, y, batStr);
+        if (config.display.heading_bold)
+            display->drawString(x + 1, y, batStr);
+    } else {
+        // Line 1
+        display->drawString(x, y, String("USB"));
+        if (config.display.heading_bold)
+            display->drawString(x + 1, y, String("USB"));
+    }
+
+    //    auto mode = DisplayFormatters::getModemPresetDisplayName(config.lora.modem_preset, true);
+
+    //    display->drawString(x + SCREEN_WIDTH - display->getStringWidth(mode), y, mode);
+    //    if (config.display.heading_bold)
+    //        display->drawString(x + SCREEN_WIDTH - display->getStringWidth(mode) - 1, y, mode);
+
+    uint32_t currentMillis = millis();
+    uint32_t seconds = currentMillis / 1000;
+    uint32_t minutes = seconds / 60;
+    uint32_t hours = minutes / 60;
+    uint32_t days = hours / 24;
+    // currentMillis %= 1000;
+    // seconds %= 60;
+    // minutes %= 60;
+    // hours %= 24;
+
+    // Show uptime as days, hours, minutes OR seconds
+    std::string uptime = UIRenderer::drawTimeDelta(days, hours, minutes, seconds);
+
+    // Line 1 (Still)
+    display->drawString(x + SCREEN_WIDTH - display->getStringWidth(uptime.c_str()), y, uptime.c_str());
+    if (config.display.heading_bold)
+        display->drawString(x - 1 + SCREEN_WIDTH - display->getStringWidth(uptime.c_str()), y, uptime.c_str());
+
+    display->setColor(WHITE);
+
+    // Setup string to assemble analogClock string
+    std::string analogClock = "";
+
+    uint32_t rtc_sec = getValidTime(RTCQuality::RTCQualityDevice, true); // Display local timezone
+    if (rtc_sec > 0) {
+        long hms = rtc_sec % SEC_PER_DAY;
+        // hms += tz.tz_dsttime * SEC_PER_HOUR;
+        // hms -= tz.tz_minuteswest * SEC_PER_MIN;
+        // mod `hms` to ensure in positive range of [0...SEC_PER_DAY)
+        hms = (hms + SEC_PER_DAY) % SEC_PER_DAY;
+
+        // Tear apart hms into h:m:s
+        int hour = hms / SEC_PER_HOUR;
+        int min = (hms % SEC_PER_HOUR) / SEC_PER_MIN;
+        int sec = (hms % SEC_PER_HOUR) % SEC_PER_MIN; // or hms % SEC_PER_MIN
+
+        char timebuf[12];
+
+        if (config.display.use_12h_clock) {
+            std::string meridiem = "am";
+            if (hour >= 12) {
+                if (hour > 12)
+                    hour -= 12;
+                meridiem = "pm";
+            }
+            if (hour == 00) {
+                hour = 12;
+            }
+            snprintf(timebuf, sizeof(timebuf), "%d:%02d:%02d%s", hour, min, sec, meridiem.c_str());
+        } else {
+            snprintf(timebuf, sizeof(timebuf), "%02d:%02d:%02d", hour, min, sec);
+        }
+        analogClock += timebuf;
+    }
+
+    // Line 2
+    display->drawString(x, y + FONT_HEIGHT_SMALL * 1, analogClock.c_str());
+
+    // Display Channel Utilization
+    char chUtil[13];
+    snprintf(chUtil, sizeof(chUtil), "ChUtil %2.0f%%", airTime->channelUtilizationPercent());
+    display->drawString(x + SCREEN_WIDTH - display->getStringWidth(chUtil), y + FONT_HEIGHT_SMALL * 1, chUtil);
+
+#if HAS_GPS
+    if (config.position.gps_mode == meshtastic_Config_PositionConfig_GpsMode_ENABLED) {
+        // Line 3
+        if (config.display.gps_format !=
+            meshtastic_Config_DisplayConfig_GpsCoordinateFormat_DMS) // if DMS then don't draw altitude
+            UIRenderer::drawGpsAltitude(display, x, y + FONT_HEIGHT_SMALL * 2, gpsStatus);
+
+        // Line 4
+        UIRenderer::drawGpsCoordinates(display, x, y + FONT_HEIGHT_SMALL * 3, gpsStatus);
+    } else {
+        UIRenderer::drawGpsPowerStatus(display, x, y + FONT_HEIGHT_SMALL * 2, gpsStatus);
+    }
+#endif
+/* Display a heartbeat pixel that blinks every time the frame is redrawn */
+#ifdef SHOW_REDRAWS
+    if (heartbeat)
+        display->setPixel(0, 0);
+    heartbeat = !heartbeat;
+#endif
+}
+
+// Trampoline functions for DebugInfo class access
+void drawDebugInfoTrampoline(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y)
+{
+    drawFrame(display, state, x, y);
+}
+
+void drawDebugInfoSettingsTrampoline(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y)
+{
+    drawFrameSettings(display, state, x, y);
+}
+
+void drawDebugInfoWiFiTrampoline(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y)
+{
+    drawFrameWiFi(display, state, x, y);
+}
+
+// ****************************
+// * LoRa Focused Screen      *
+// ****************************
+void drawLoRaFocused(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y)
+{
+    display->clear();
+    display->setTextAlignment(TEXT_ALIGN_LEFT);
+    display->setFont(FONT_SMALL);
+
+    // === Header ===
+    graphics::drawCommonHeader(display, x, y);
+
+    // === Draw title (aligned with header baseline) ===
+    const int highlightHeight = FONT_HEIGHT_SMALL - 1;
+    const int textY = y + 1 + (highlightHeight - FONT_HEIGHT_SMALL) / 2;
+    const char *titleStr = (SCREEN_WIDTH > 128) ? "LoRa Info" : "LoRa";
+    const int centerX = x + SCREEN_WIDTH / 2;
+
+    if (config.display.displaymode != meshtastic_Config_DisplayConfig_DisplayMode_INVERTED) {
+        display->setColor(BLACK);
+    }
+
+    display->setTextAlignment(TEXT_ALIGN_CENTER);
+    display->drawString(centerX, textY, titleStr);
+    if (config.display.heading_bold) {
+        display->drawString(centerX + 1, textY, titleStr);
+    }
+    display->setColor(WHITE);
+    display->setTextAlignment(TEXT_ALIGN_LEFT);
+
+    // === First Row: Region / BLE Name ===
+    graphics::UIRenderer::drawNodes(display, x, compactFirstLine + 3, nodeStatus, 0, true);
+
+    uint8_t dmac[6];
+    char shortnameble[35];
+    getMacAddr(dmac);
+    snprintf(ourId, sizeof(ourId), "%02x%02x", dmac[4], dmac[5]);
+    snprintf(shortnameble, sizeof(shortnameble), "BLE: %s", ourId);
+    int textWidth = display->getStringWidth(shortnameble);
+    int nameX = (SCREEN_WIDTH - textWidth);
+    display->drawString(nameX, compactFirstLine, shortnameble);
+
+    // === Second Row: Radio Preset ===
+    auto mode = DisplayFormatters::getModemPresetDisplayName(config.lora.modem_preset, false);
+    char regionradiopreset[25];
+    const char *region = myRegion ? myRegion->name : NULL;
+    snprintf(regionradiopreset, sizeof(regionradiopreset), "%s/%s", region, mode);
+    textWidth = display->getStringWidth(regionradiopreset);
+    nameX = (SCREEN_WIDTH - textWidth) / 2;
+    display->drawString(nameX, compactSecondLine, regionradiopreset);
+
+    // === Third Row: Frequency / ChanNum ===
+    char frequencyslot[35];
+    char freqStr[16];
+    float freq = RadioLibInterface::instance->getFreq();
+    snprintf(freqStr, sizeof(freqStr), "%.3f", freq);
+    if (config.lora.channel_num == 0) {
+        snprintf(frequencyslot, sizeof(frequencyslot), "Freq: %s", freqStr);
+    } else {
+        snprintf(frequencyslot, sizeof(frequencyslot), "Freq/Chan: %s (%d)", freqStr, config.lora.channel_num);
+    }
+    size_t len = strlen(frequencyslot);
+    if (len >= 4 && strcmp(frequencyslot + len - 4, " (0)") == 0) {
+        frequencyslot[len - 4] = '\0'; // Remove the last three characters
+    }
+    textWidth = display->getStringWidth(frequencyslot);
+    nameX = (SCREEN_WIDTH - textWidth) / 2;
+    display->drawString(nameX, compactThirdLine, frequencyslot);
+
+    // === Fourth Row: Channel Utilization ===
+    const char *chUtil = "ChUtil:";
+    char chUtilPercentage[10];
+    snprintf(chUtilPercentage, sizeof(chUtilPercentage), "%2.0f%%", airTime->channelUtilizationPercent());
+
+    int chUtil_x = (SCREEN_WIDTH > 128) ? display->getStringWidth(chUtil) + 10 : display->getStringWidth(chUtil) + 5;
+    int chUtil_y = compactFourthLine + 3;
+
+    int chutil_bar_width = (SCREEN_WIDTH > 128) ? 100 : 50;
+    int chutil_bar_height = (SCREEN_WIDTH > 128) ? 12 : 7;
+    int extraoffset = (SCREEN_WIDTH > 128) ? 6 : 3;
+    int chutil_percent = airTime->channelUtilizationPercent();
+
+    int centerofscreen = SCREEN_WIDTH / 2;
+    int total_line_content_width = (chUtil_x + chutil_bar_width + display->getStringWidth(chUtilPercentage) + extraoffset) / 2;
+    int starting_position = centerofscreen - total_line_content_width;
+
+    display->drawString(starting_position, compactFourthLine, chUtil);
+
+    // Force 56% or higher to show a full 100% bar, text would still show related percent.
+    if (chutil_percent >= 61) {
+        chutil_percent = 100;
+    }
+
+    // Weighting for nonlinear segments
+    float milestone1 = 25;
+    float milestone2 = 40;
+    float weight1 = 0.45; // Weight for 0–25%
+    float weight2 = 0.35; // Weight for 25–40%
+    float weight3 = 0.20; // Weight for 40–100%
+    float totalWeight = weight1 + weight2 + weight3;
+
+    int seg1 = chutil_bar_width * (weight1 / totalWeight);
+    int seg2 = chutil_bar_width * (weight2 / totalWeight);
+    int seg3 = chutil_bar_width * (weight3 / totalWeight);
+
+    int fillRight = 0;
+
+    if (chutil_percent <= milestone1) {
+        fillRight = (seg1 * (chutil_percent / milestone1));
+    } else if (chutil_percent <= milestone2) {
+        fillRight = seg1 + (seg2 * ((chutil_percent - milestone1) / (milestone2 - milestone1)));
+    } else {
+        fillRight = seg1 + seg2 + (seg3 * ((chutil_percent - milestone2) / (100 - milestone2)));
+    }
+
+    // Draw outline
+    display->drawRect(starting_position + chUtil_x, chUtil_y, chutil_bar_width, chutil_bar_height);
+
+    // Fill progress
+    if (fillRight > 0) {
+        display->fillRect(starting_position + chUtil_x, chUtil_y, fillRight, chutil_bar_height);
+    }
+
+    display->drawString(starting_position + chUtil_x + chutil_bar_width + extraoffset, compactFourthLine, chUtilPercentage);
+}
+
+// ****************************
+// *      Memory Screen       *
+// ****************************
+void drawMemoryUsage(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y)
+{
+    display->clear();
+    display->setFont(FONT_SMALL);
+    display->setTextAlignment(TEXT_ALIGN_LEFT);
+
+    // === Header ===
+    graphics::drawCommonHeader(display, x, y);
+
+    // === Draw title ===
+    const int highlightHeight = FONT_HEIGHT_SMALL - 1;
+    const int textY = y + 1 + (highlightHeight - FONT_HEIGHT_SMALL) / 2;
+    const char *titleStr = (SCREEN_WIDTH > 128) ? "Memory" : "Mem";
+    const int centerX = x + SCREEN_WIDTH / 2;
+
+    if (config.display.displaymode != meshtastic_Config_DisplayConfig_DisplayMode_INVERTED) {
+        display->setColor(BLACK);
+    }
+
+    display->setTextAlignment(TEXT_ALIGN_CENTER);
+    display->drawString(centerX, textY, titleStr);
+    if (config.display.heading_bold) {
+        display->drawString(centerX + 1, textY, titleStr);
+    }
+    display->setColor(WHITE);
+
+    // === Layout ===
+    int contentY = y + FONT_HEIGHT_SMALL;
+    const int rowYOffset = FONT_HEIGHT_SMALL - 3;
+    const int barHeight = 6;
+    const int labelX = x;
+    const int barsOffset = (SCREEN_WIDTH > 128) ? 24 : 0;
+    const int barX = x + 40 + barsOffset;
+
+    int rowY = contentY;
+
+    // === Heap delta tracking (disabled) ===
+    /*
+    static uint32_t previousHeapFree = 0;
+    static int32_t totalHeapDelta = 0;
+    static int deltaChangeCount = 0;
+    */
+
+    auto drawUsageRow = [&](const char *label, uint32_t used, uint32_t total, bool isHeap = false) {
+        if (total == 0)
+            return;
+
+        int percent = (used * 100) / total;
+
+        char combinedStr[24];
+        if (SCREEN_WIDTH > 128) {
+            snprintf(combinedStr, sizeof(combinedStr), "%s%3d%%  %lu/%luKB", (percent > 80) ? "! " : "", percent, used / 1024,
+                     total / 1024);
+        } else {
+            snprintf(combinedStr, sizeof(combinedStr), "%s%3d%%", (percent > 80) ? "! " : "", percent);
+        }
+
+        int textWidth = display->getStringWidth(combinedStr);
+        int adjustedBarWidth = SCREEN_WIDTH - barX - textWidth - 6;
+        if (adjustedBarWidth < 10)
+            adjustedBarWidth = 10;
+
+        int fillWidth = (used * adjustedBarWidth) / total;
+
+        // Label
+        display->setTextAlignment(TEXT_ALIGN_LEFT);
+        display->drawString(labelX, rowY, label);
+
+        // Bar
+        int barY = rowY + (FONT_HEIGHT_SMALL - barHeight) / 2;
+        display->setColor(WHITE);
+        display->drawRect(barX, barY, adjustedBarWidth, barHeight);
+
+        display->fillRect(barX, barY, fillWidth, barHeight);
+        display->setColor(WHITE);
+
+        // Value string
+        display->setTextAlignment(TEXT_ALIGN_RIGHT);
+        display->drawString(SCREEN_WIDTH - 2, rowY, combinedStr);
+
+        rowY += rowYOffset;
+
+        // === Heap delta display (disabled) ===
+        /*
+        if (isHeap && previousHeapFree > 0) {
+            int32_t delta = (int32_t)(memGet.getFreeHeap() - previousHeapFree);
+            if (delta != 0) {
+                totalHeapDelta += delta;
+                deltaChangeCount++;
+
+                char deltaStr[16];
+                snprintf(deltaStr, sizeof(deltaStr), "%ld", delta);
+
+                int deltaX = centerX - display->getStringWidth(deltaStr) / 2 - 8;
+                int deltaY = rowY + 1;
+
+                // Triangle
+                if (delta > 0) {
+                    display->drawLine(deltaX, deltaY + 6, deltaX + 3, deltaY);
+                    display->drawLine(deltaX + 3, deltaY, deltaX + 6, deltaY + 6);
+                    display->drawLine(deltaX, deltaY + 6, deltaX + 6, deltaY + 6);
+                } else {
+                    display->drawLine(deltaX, deltaY, deltaX + 3, deltaY + 6);
+                    display->drawLine(deltaX + 3, deltaY + 6, deltaX + 6, deltaY);
+                    display->drawLine(deltaX, deltaY, deltaX + 6, deltaY);
+                }
+
+                display->setTextAlignment(TEXT_ALIGN_CENTER);
+                display->drawString(centerX + 6, deltaY, deltaStr);
+                rowY += rowYOffset;
+            }
+        }
+
+        if (isHeap) {
+            previousHeapFree = memGet.getFreeHeap();
+        }
+        */
+    };
+
+    // === Memory values ===
+    uint32_t heapUsed = memGet.getHeapSize() - memGet.getFreeHeap();
+    uint32_t heapTotal = memGet.getHeapSize();
+
+    uint32_t psramUsed = memGet.getPsramSize() - memGet.getFreePsram();
+    uint32_t psramTotal = memGet.getPsramSize();
+
+    uint32_t flashUsed = 0, flashTotal = 0;
+#ifdef ESP32
+    flashUsed = FSCom.usedBytes();
+    flashTotal = FSCom.totalBytes();
+#endif
+
+    uint32_t sdUsed = 0, sdTotal = 0;
+    bool hasSD = false;
+    /*
+    #ifdef HAS_SDCARD
+        hasSD = SD.cardType() != CARD_NONE;
+        if (hasSD) {
+            sdUsed = SD.usedBytes();
+            sdTotal = SD.totalBytes();
+        }
+    #endif
+    */
+    // === Draw memory rows
+    drawUsageRow("Heap:", heapUsed, heapTotal, true);
+    drawUsageRow("PSRAM:", psramUsed, psramTotal);
+#ifdef ESP32
+    if (flashTotal > 0)
+        drawUsageRow("Flash:", flashUsed, flashTotal);
+#endif
+    if (hasSD && sdTotal > 0)
+        drawUsageRow("SD:", sdUsed, sdTotal);
+}
+} // namespace DebugRenderer
+} // namespace graphics

src/graphics/draw/DebugRenderer.h

@@ -0,0 +1,38 @@
+#pragma once
+
+#include <OLEDDisplay.h>
+#include <OLEDDisplayUi.h>
+
+namespace graphics
+{
+
+/// Forward declarations
+class Screen;
+class DebugInfo;
+
+/**
+ * @brief Debug and diagnostic drawing functions
+ *
+ * Contains all functions related to drawing debug information,
+ * WiFi status, settings screens, and diagnostic data.
+ */
+namespace DebugRenderer
+{
+// Debug frame functions
+void drawFrame(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+void drawFrameSettings(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+void drawFrameWiFi(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+
+// Trampoline functions for framework callback compatibility
+void drawDebugInfoTrampoline(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+void drawDebugInfoSettingsTrampoline(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+void drawDebugInfoWiFiTrampoline(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+
+// LoRa information display
+void drawLoRaFocused(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+
+// Memory screen display
+void drawMemoryUsage(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+} // namespace DebugRenderer
+
+} // namespace graphics

src/graphics/draw/DrawRenderers.h

@@ -0,0 +1,38 @@
+#pragma once
+
+/**
+ * @brief Master include file for all Screen draw renderers
+ *
+ * This file includes all the individual renderer headers to provide
+ * a convenient single include for accessing all draw functions.
+ */
+
+#include "graphics/draw/ClockRenderer.h"
+#include "graphics/draw/CompassRenderer.h"
+#include "graphics/draw/DebugRenderer.h"
+#include "graphics/draw/NodeListRenderer.h"
+#include "graphics/draw/ScreenRenderer.h"
+#include "graphics/draw/UIRenderer.h"
+
+namespace graphics
+{
+
+/**
+ * @brief Collection of all draw renderers
+ *
+ * This namespace provides access to all the specialized rendering
+ * functions organized by category.
+ */
+namespace DrawRenderers
+{
+// Re-export all renderer namespaces for convenience
+using namespace ClockRenderer;
+using namespace CompassRenderer;
+using namespace DebugRenderer;
+using namespace NodeListRenderer;
+using namespace ScreenRenderer;
+using namespace UIRenderer;
+
+} // namespace DrawRenderers
+
+} // namespace graphics

src/graphics/draw/MessageRenderer.cpp

@@ -0,0 +1,448 @@
+/*
+BaseUI
+
+Developed and Maintained By:
+- Ronald Garcia (HarukiToreda) – Lead development and implementation.
+- JasonP (Xaositek)  – Screen layout and icon design, UI improvements and testing.
+- TonyG (Tropho) – Project management, structural planning, and testing
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+*/
+
+#include "MessageRenderer.h"
+
+// Core includes
+#include "NodeDB.h"
+#include "configuration.h"
+#include "gps/RTC.h"
+#include "graphics/ScreenFonts.h"
+#include "graphics/SharedUIDisplay.h"
+#include "graphics/emotes.h"
+#include "main.h"
+#include "meshUtils.h"
+
+// Additional includes for UI rendering
+#include "UIRenderer.h"
+
+// Additional includes for dependencies
+#include <string>
+#include <vector>
+
+// External declarations
+extern bool hasUnreadMessage;
+extern meshtastic_DeviceState devicestate;
+
+using graphics::Emote;
+using graphics::emotes;
+using graphics::numEmotes;
+
+namespace graphics
+{
+namespace MessageRenderer
+{
+
+// Forward declaration from Screen.cpp - this function needs to be accessible
+// For now, we'll implement a local version that matches the Screen.cpp functionality
+bool deltaToTimestamp(uint32_t secondsAgo, uint8_t *hours, uint8_t *minutes, int32_t *daysAgo)
+{
+    // Cache the result - avoid frequent recalculation
+    static uint8_t hoursCached = 0, minutesCached = 0;
+    static uint32_t daysAgoCached = 0;
+    static uint32_t secondsAgoCached = 0;
+    static bool validCached = false;
+
+    // Abort: if timezone not set
+    if (strlen(config.device.tzdef) == 0) {
+        validCached = false;
+        return validCached;
+    }
+
+    // Abort: if invalid pointers passed
+    if (hours == nullptr || minutes == nullptr || daysAgo == nullptr) {
+        validCached = false;
+        return validCached;
+    }
+
+    // Abort: if time seems invalid.. (> 6 months ago, probably seen before RTC set)
+    if (secondsAgo > SEC_PER_DAY * 30UL * 6) {
+        validCached = false;
+        return validCached;
+    }
+
+    // If repeated request, don't bother recalculating
+    if (secondsAgo - secondsAgoCached < 60 && secondsAgoCached != 0) {
+        if (validCached) {
+            *hours = hoursCached;
+            *minutes = minutesCached;
+            *daysAgo = daysAgoCached;
+        }
+        return validCached;
+    }
+
+    // Get local time
+    uint32_t secondsRTC = getValidTime(RTCQuality::RTCQualityDevice, true); // Get local time
+
+    // Abort: if RTC not set
+    if (!secondsRTC) {
+        validCached = false;
+        return validCached;
+    }
+
+    // Get absolute time when last seen
+    uint32_t secondsSeenAt = secondsRTC - secondsAgo;
+
+    // Calculate daysAgo
+    *daysAgo = (secondsRTC / SEC_PER_DAY) - (secondsSeenAt / SEC_PER_DAY); // How many "midnights" have passed
+
+    // Get seconds since midnight
+    uint32_t hms = (secondsRTC - secondsAgo) % SEC_PER_DAY;
+    hms = (hms + SEC_PER_DAY) % SEC_PER_DAY;
+
+    // Tear apart hms into hours and minutes
+    *hours = hms / SEC_PER_HOUR;
+    *minutes = (hms % SEC_PER_HOUR) / SEC_PER_MIN;
+
+    // Cache the result
+    daysAgoCached = *daysAgo;
+    hoursCached = *hours;
+    minutesCached = *minutes;
+    secondsAgoCached = secondsAgo;
+
+    validCached = true;
+    return validCached;
+}
+
+void drawStringWithEmotes(OLEDDisplay *display, int x, int y, const std::string &line, const Emote *emotes, int emoteCount)
+{
+    int cursorX = x;
+    const int fontHeight = FONT_HEIGHT_SMALL;
+
+    // === Step 1: Find tallest emote in the line ===
+    int maxIconHeight = fontHeight;
+    for (size_t i = 0; i < line.length();) {
+        bool matched = false;
+        for (int e = 0; e < emoteCount; ++e) {
+            size_t emojiLen = strlen(emotes[e].label);
+            if (line.compare(i, emojiLen, emotes[e].label) == 0) {
+                if (emotes[e].height > maxIconHeight)
+                    maxIconHeight = emotes[e].height;
+                i += emojiLen;
+                matched = true;
+                break;
+            }
+        }
+        if (!matched) {
+            uint8_t c = static_cast<uint8_t>(line[i]);
+            if ((c & 0xE0) == 0xC0)
+                i += 2;
+            else if ((c & 0xF0) == 0xE0)
+                i += 3;
+            else if ((c & 0xF8) == 0xF0)
+                i += 4;
+            else
+                i += 1;
+        }
+    }
+
+    // === Step 2: Baseline alignment ===
+    int lineHeight = std::max(fontHeight, maxIconHeight);
+    int baselineOffset = (lineHeight - fontHeight) / 2;
+    int fontY = y + baselineOffset;
+    int fontMidline = fontY + fontHeight / 2;
+
+    // === Step 3: Render line in segments ===
+    size_t i = 0;
+    bool inBold = false;
+
+    while (i < line.length()) {
+        // Check for ** start/end for faux bold
+        if (line.compare(i, 2, "**") == 0) {
+            inBold = !inBold;
+            i += 2;
+            continue;
+        }
+
+        // Look ahead for the next emote match
+        size_t nextEmotePos = std::string::npos;
+        const Emote *matchedEmote = nullptr;
+        size_t emojiLen = 0;
+
+        for (int e = 0; e < emoteCount; ++e) {
+            size_t pos = line.find(emotes[e].label, i);
+            if (pos != std::string::npos && (nextEmotePos == std::string::npos || pos < nextEmotePos)) {
+                nextEmotePos = pos;
+                matchedEmote = &emotes[e];
+                emojiLen = strlen(emotes[e].label);
+            }
+        }
+
+        // Render normal text segment up to the emote or bold toggle
+        size_t nextControl = std::min(nextEmotePos, line.find("**", i));
+        if (nextControl == std::string::npos)
+            nextControl = line.length();
+
+        if (nextControl > i) {
+            std::string textChunk = line.substr(i, nextControl - i);
+            if (inBold) {
+                // Faux bold: draw twice, offset by 1px
+                display->drawString(cursorX + 1, fontY, textChunk.c_str());
+            }
+            display->drawString(cursorX, fontY, textChunk.c_str());
+            cursorX += display->getStringWidth(textChunk.c_str());
+            i = nextControl;
+            continue;
+        }
+
+        // Render the emote (if found)
+        if (matchedEmote && i == nextEmotePos) {
+            int iconY = fontMidline - matchedEmote->height / 2 - 1;
+            display->drawXbm(cursorX, iconY, matchedEmote->width, matchedEmote->height, matchedEmote->bitmap);
+            cursorX += matchedEmote->width + 1;
+            i += emojiLen;
+        } else {
+            // No more emotes — render the rest of the line
+            std::string remaining = line.substr(i);
+            if (inBold) {
+                display->drawString(cursorX + 1, fontY, remaining.c_str());
+            }
+            display->drawString(cursorX, fontY, remaining.c_str());
+            cursorX += display->getStringWidth(remaining.c_str());
+            break;
+        }
+    }
+}
+
+void drawTextMessageFrame(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y)
+{
+    // Clear the unread message indicator when viewing the message
+    hasUnreadMessage = false;
+
+    const meshtastic_MeshPacket &mp = devicestate.rx_text_message;
+    const char *msg = reinterpret_cast<const char *>(mp.decoded.payload.bytes);
+
+    display->setTextAlignment(TEXT_ALIGN_LEFT);
+    display->setFont(FONT_SMALL);
+
+    const int navHeight = FONT_HEIGHT_SMALL;
+    const int scrollBottom = SCREEN_HEIGHT - navHeight;
+    const int usableHeight = scrollBottom;
+    const int textWidth = SCREEN_WIDTH;
+    const int cornerRadius = 2;
+
+    bool isInverted = (config.display.displaymode != meshtastic_Config_DisplayConfig_DisplayMode_INVERTED);
+    bool isBold = config.display.heading_bold;
+
+    // === Header Construction ===
+    meshtastic_NodeInfoLite *node = nodeDB->getMeshNode(getFrom(&mp));
+    char headerStr[80];
+    const char *sender = "???";
+    if (node && node->has_user) {
+        if (SCREEN_WIDTH >= 200 && strlen(node->user.long_name) > 0) {
+            sender = node->user.long_name;
+        } else {
+            sender = node->user.short_name;
+        }
+    }
+    uint32_t seconds = sinceReceived(&mp), minutes = seconds / 60, hours = minutes / 60, days = hours / 24;
+    uint8_t timestampHours, timestampMinutes;
+    int32_t daysAgo;
+    bool useTimestamp = deltaToTimestamp(seconds, &timestampHours, &timestampMinutes, &daysAgo);
+
+    if (useTimestamp && minutes >= 15 && daysAgo == 0) {
+        std::string prefix = (daysAgo == 1 && SCREEN_WIDTH >= 200) ? "Yesterday" : "At";
+        if (config.display.use_12h_clock) {
+            bool isPM = timestampHours >= 12;
+            timestampHours = timestampHours % 12;
+            if (timestampHours == 0)
+                timestampHours = 12;
+            snprintf(headerStr, sizeof(headerStr), "%s %d:%02d%s from %s", prefix.c_str(), timestampHours, timestampMinutes,
+                     isPM ? "p" : "a", sender);
+        } else {
+            snprintf(headerStr, sizeof(headerStr), "%s %d:%02d from %s", prefix.c_str(), timestampHours, timestampMinutes,
+                     sender);
+        }
+    } else {
+        snprintf(headerStr, sizeof(headerStr), "%s ago from %s", UIRenderer::drawTimeDelta(days, hours, minutes, seconds).c_str(),
+                 sender);
+    }
+
+#ifndef EXCLUDE_EMOJI
+    // === Bounce animation setup ===
+    static uint32_t lastBounceTime = 0;
+    static int bounceY = 0;
+    const int bounceRange = 2;     // Max pixels to bounce up/down
+    const int bounceInterval = 60; // How quickly to change bounce direction (ms)
+
+    uint32_t now = millis();
+    if (now - lastBounceTime >= bounceInterval) {
+        lastBounceTime = now;
+        bounceY = (bounceY + 1) % (bounceRange * 2);
+    }
+    for (int i = 0; i < numEmotes; ++i) {
+        const Emote &e = emotes[i];
+        if (strcmp(msg, e.label) == 0) {
+            // Draw the header
+            if (isInverted) {
+                drawRoundedHighlight(display, x, 0, SCREEN_WIDTH, FONT_HEIGHT_SMALL - 1, cornerRadius);
+                display->setColor(BLACK);
+                display->drawString(x + 3, 0, headerStr);
+                if (isBold)
+                    display->drawString(x + 4, 0, headerStr);
+                display->setColor(WHITE);
+            } else {
+                display->drawString(x, 0, headerStr);
+                if (SCREEN_WIDTH > 128) {
+                    display->drawLine(0, 20, SCREEN_WIDTH, 20);
+                } else {
+                    display->drawLine(0, 14, SCREEN_WIDTH, 14);
+                }
+            }
+
+            // Center the emote below header + apply bounce
+            int remainingHeight = SCREEN_HEIGHT - FONT_HEIGHT_SMALL - navHeight;
+            int emoteY = FONT_HEIGHT_SMALL + (remainingHeight - e.height) / 2 + bounceY - bounceRange;
+            display->drawXbm((SCREEN_WIDTH - e.width) / 2, emoteY, e.width, e.height, e.bitmap);
+            return;
+        }
+    }
+#endif
+
+    // === Word-wrap and build line list ===
+    char messageBuf[237];
+    snprintf(messageBuf, sizeof(messageBuf), "%s", msg);
+
+    std::vector<std::string> lines;
+    lines.push_back(std::string(headerStr)); // Header line is always first
+
+    std::string line, word;
+    for (int i = 0; messageBuf[i]; ++i) {
+        char ch = messageBuf[i];
+        if (ch == '\n') {
+            if (!word.empty())
+                line += word;
+            if (!line.empty())
+                lines.push_back(line);
+            line.clear();
+            word.clear();
+        } else if (ch == ' ') {
+            line += word + ' ';
+            word.clear();
+        } else {
+            word += ch;
+            std::string test = line + word;
+            if (display->getStringWidth(test.c_str()) > textWidth + 4) {
+                if (!line.empty())
+                    lines.push_back(line);
+                line = word;
+                word.clear();
+            }
+        }
+    }
+    if (!word.empty())
+        line += word;
+    if (!line.empty())
+        lines.push_back(line);
+
+    // === Scrolling logic ===
+    std::vector<int> rowHeights;
+
+    for (const auto &line : lines) {
+        int maxHeight = FONT_HEIGHT_SMALL;
+        for (int i = 0; i < numEmotes; ++i) {
+            const Emote &e = emotes[i];
+            if (line.find(e.label) != std::string::npos) {
+                if (e.height > maxHeight)
+                    maxHeight = e.height;
+            }
+        }
+        rowHeights.push_back(maxHeight);
+    }
+    int totalHeight = 0;
+    for (size_t i = 1; i < rowHeights.size(); ++i) {
+        totalHeight += rowHeights[i];
+    }
+    int usableScrollHeight = usableHeight - rowHeights[0]; // remove header height
+    int scrollStop = std::max(0, totalHeight - usableScrollHeight);
+
+    static float scrollY = 0.0f;
+    static uint32_t lastTime = 0, scrollStartDelay = 0, pauseStart = 0;
+    static bool waitingToReset = false, scrollStarted = false;
+
+    // === Smooth scrolling adjustment ===
+    // You can tweak this divisor to change how smooth it scrolls.
+    // Lower = smoother, but can feel slow.
+    float delta = (now - lastTime) / 400.0f;
+    lastTime = now;
+
+    const float scrollSpeed = 2.0f; // pixels per second
+
+    // Delay scrolling start by 2 seconds
+    if (scrollStartDelay == 0)
+        scrollStartDelay = now;
+    if (!scrollStarted && now - scrollStartDelay > 2000)
+        scrollStarted = true;
+
+    if (totalHeight > usableHeight) {
+        if (scrollStarted) {
+            if (!waitingToReset) {
+                scrollY += delta * scrollSpeed;
+                if (scrollY >= scrollStop) {
+                    scrollY = scrollStop;
+                    waitingToReset = true;
+                    pauseStart = lastTime;
+                }
+            } else if (lastTime - pauseStart > 3000) {
+                scrollY = 0;
+                waitingToReset = false;
+                scrollStarted = false;
+                scrollStartDelay = lastTime;
+            }
+        }
+    } else {
+        scrollY = 0;
+    }
+
+    int scrollOffset = static_cast<int>(scrollY);
+    int yOffset = -scrollOffset;
+    if (!isInverted) {
+        if (SCREEN_WIDTH > 128) {
+            display->drawLine(0, yOffset + 20, SCREEN_WIDTH, yOffset + 20);
+        } else {
+            display->drawLine(0, yOffset + 14, SCREEN_WIDTH, yOffset + 14);
+        }
+    }
+
+    // === Render visible lines ===
+    for (size_t i = 0; i < lines.size(); ++i) {
+        int lineY = yOffset;
+        for (size_t j = 0; j < i; ++j)
+            lineY += rowHeights[j];
+        if (lineY > -rowHeights[i] && lineY < scrollBottom) {
+            if (i == 0 && isInverted) {
+                drawRoundedHighlight(display, x, lineY, SCREEN_WIDTH, FONT_HEIGHT_SMALL - 1, cornerRadius);
+                display->setColor(BLACK);
+                display->drawString(x + 3, lineY, lines[i].c_str());
+                if (isBold)
+                    display->drawString(x + 4, lineY, lines[i].c_str());
+                display->setColor(WHITE);
+            } else {
+                drawStringWithEmotes(display, x, lineY, lines[i], emotes, numEmotes);
+            }
+        }
+    }
+}
+
+} // namespace MessageRenderer
+} // namespace graphics

src/graphics/draw/MessageRenderer.h

@@ -0,0 +1,18 @@
+#pragma once
+#include "OLEDDisplay.h"
+#include "OLEDDisplayUi.h"
+#include "graphics/emotes.h"
+
+namespace graphics
+{
+namespace MessageRenderer
+{
+
+// Text and emote rendering
+void drawStringWithEmotes(OLEDDisplay *display, int x, int y, const std::string &line, const Emote *emotes, int emoteCount);
+
+/// Draws the text message frame for displaying received messages
+void drawTextMessageFrame(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+
+} // namespace MessageRenderer
+} // namespace graphics

src/graphics/draw/NodeListRenderer.cpp

@@ -0,0 +1,877 @@
+#include "NodeListRenderer.h"
+#include "CompassRenderer.h"
+#include "NodeDB.h"
+#include "UIRenderer.h"
+#include "configuration.h"
+#include "gps/GeoCoord.h"
+#include "gps/RTC.h" // for getTime() function
+#include "graphics/ScreenFonts.h"
+#include "graphics/SharedUIDisplay.h"
+#include "graphics/images.h"
+#include <algorithm>
+
+// Forward declarations for functions defined in Screen.cpp
+namespace graphics
+{
+extern bool haveGlyphs(const char *str);
+} // namespace graphics
+
+// Global screen instance
+extern graphics::Screen *screen;
+
+namespace graphics
+{
+namespace NodeListRenderer
+{
+
+// Function moved from Screen.cpp to NodeListRenderer.cpp since it's primarily used here
+void drawScaledXBitmap16x16(int x, int y, int width, int height, const uint8_t *bitmapXBM, OLEDDisplay *display)
+{
+    for (int row = 0; row < height; row++) {
+        uint8_t rowMask = (1 << row);
+        for (int col = 0; col < width; col++) {
+            uint8_t colData = pgm_read_byte(&bitmapXBM[col]);
+            if (colData & rowMask) {
+                // Note: rows become X, columns become Y after transpose
+                display->fillRect(x + row * 2, y + col * 2, 2, 2);
+            }
+        }
+    }
+}
+
+// Static variables for dynamic cycling
+static NodeListMode currentMode = MODE_LAST_HEARD;
+static int scrollIndex = 0;
+
+// =============================
+// Utility Functions
+// =============================
+
+String getSafeNodeName(meshtastic_NodeInfoLite *node)
+{
+    String nodeName = "?";
+    if (node->has_user && strlen(node->user.short_name) > 0) {
+        bool valid = true;
+        const char *name = node->user.short_name;
+        for (size_t i = 0; i < strlen(name); i++) {
+            uint8_t c = (uint8_t)name[i];
+            if (c < 32 || c > 126) {
+                valid = false;
+                break;
+            }
+        }
+        if (valid) {
+            nodeName = name;
+        } else {
+            char idStr[6];
+            snprintf(idStr, sizeof(idStr), "%04X", (uint16_t)(node->num & 0xFFFF));
+            nodeName = String(idStr);
+        }
+    }
+    return nodeName;
+}
+
+uint32_t sinceLastSeen(meshtastic_NodeInfoLite *node)
+{
+    uint32_t now = getTime();
+    uint32_t last_seen = node->last_heard;
+    if (last_seen == 0 || now < last_seen) {
+        return UINT32_MAX;
+    }
+    return now - last_seen;
+}
+
+const char *getCurrentModeTitle(int screenWidth)
+{
+    switch (currentMode) {
+    case MODE_LAST_HEARD:
+        return "Node List";
+    case MODE_HOP_SIGNAL:
+        return (screenWidth > 128) ? "Hops/Signal" : "Hops/Sig";
+    case MODE_DISTANCE:
+        return "Distance";
+    default:
+        return "Nodes";
+    }
+}
+
+// Use dynamic timing based on mode
+unsigned long getModeCycleIntervalMs()
+{
+    return 3000;
+}
+
+// Calculate bearing between two lat/lon points
+float calculateBearing(double lat1, double lon1, double lat2, double lon2)
+{
+    double dLon = (lon2 - lon1) * DEG_TO_RAD;
+    double y = sin(dLon) * cos(lat2 * DEG_TO_RAD);
+    double x = cos(lat1 * DEG_TO_RAD) * sin(lat2 * DEG_TO_RAD) - sin(lat1 * DEG_TO_RAD) * cos(lat2 * DEG_TO_RAD) * cos(dLon);
+    double bearing = atan2(y, x) * RAD_TO_DEG;
+    return fmod(bearing + 360.0, 360.0);
+}
+
+int calculateMaxScroll(int totalEntries, int visibleRows)
+{
+    return std::max(0, (totalEntries - 1) / (visibleRows * 2));
+}
+
+void retrieveAndSortNodes(std::vector<NodeEntry> &nodeList)
+{
+    size_t numNodes = nodeDB->getNumMeshNodes();
+    for (size_t i = 0; i < numNodes; i++) {
+        meshtastic_NodeInfoLite *node = nodeDB->getMeshNodeByIndex(i);
+        if (!node || node->num == nodeDB->getNodeNum())
+            continue;
+
+        NodeEntry entry;
+        entry.node = node;
+        entry.sortValue = sinceLastSeen(node);
+
+        nodeList.push_back(entry);
+    }
+
+    // Sort nodes: favorites first, then by last heard (most recent first)
+    std::sort(nodeList.begin(), nodeList.end(), [](const NodeEntry &a, const NodeEntry &b) {
+        bool aFav = a.node->is_favorite;
+        bool bFav = b.node->is_favorite;
+        if (aFav != bFav)
+            return aFav > bFav;
+        if (a.sortValue == 0 || a.sortValue == UINT32_MAX)
+            return false;
+        if (b.sortValue == 0 || b.sortValue == UINT32_MAX)
+            return true;
+        return a.sortValue < b.sortValue;
+    });
+}
+
+void drawColumnSeparator(OLEDDisplay *display, int16_t x, int16_t yStart, int16_t yEnd)
+{
+    int columnWidth = display->getWidth() / 2;
+    int separatorX = x + columnWidth - 1;
+    for (int y = yStart; y <= yEnd; y += 2) {
+        display->setPixel(separatorX, y);
+    }
+}
+
+void drawScrollbar(OLEDDisplay *display, int visibleNodeRows, int totalEntries, int scrollIndex, int columns, int scrollStartY)
+{
+    if (totalEntries <= visibleNodeRows * columns)
+        return;
+
+    int scrollbarX = display->getWidth() - 2;
+    int scrollbarHeight = display->getHeight() - scrollStartY - 10;
+    int thumbHeight = std::max(4, (scrollbarHeight * visibleNodeRows * columns) / totalEntries);
+    int maxScroll = calculateMaxScroll(totalEntries, visibleNodeRows);
+    int thumbY = scrollStartY + (scrollIndex * (scrollbarHeight - thumbHeight)) / std::max(1, maxScroll);
+
+    for (int i = 0; i < thumbHeight; i++) {
+        display->setPixel(scrollbarX, thumbY + i);
+    }
+}
+
+// =============================
+// Entry Renderers
+// =============================
+
+void drawEntryLastHeard(OLEDDisplay *display, meshtastic_NodeInfoLite *node, int16_t x, int16_t y, int columnWidth)
+{
+    bool isLeftCol = (x < SCREEN_WIDTH / 2);
+    int timeOffset = (SCREEN_WIDTH > 128) ? (isLeftCol ? 7 : 10) : (isLeftCol ? 3 : 7);
+
+    String nodeName = getSafeNodeName(node);
+
+    char timeStr[10];
+    uint32_t seconds = sinceLastSeen(node);
+    if (seconds == 0 || seconds == UINT32_MAX) {
+        snprintf(timeStr, sizeof(timeStr), "?");
+    } else {
+        uint32_t minutes = seconds / 60, hours = minutes / 60, days = hours / 24;
+        snprintf(timeStr, sizeof(timeStr), (days > 365 ? "?" : "%d%c"),
+                 (days    ? days
+                  : hours ? hours
+                          : minutes),
+                 (days    ? 'd'
+                  : hours ? 'h'
+                          : 'm'));
+    }
+
+    display->setTextAlignment(TEXT_ALIGN_LEFT);
+    display->setFont(FONT_SMALL);
+    display->drawString(x + ((SCREEN_WIDTH > 128) ? 6 : 3), y, nodeName);
+    if (node->is_favorite) {
+        if (SCREEN_WIDTH > 128) {
+            drawScaledXBitmap16x16(x, y + 6, smallbulletpoint_width, smallbulletpoint_height, smallbulletpoint, display);
+        } else {
+            display->drawXbm(x, y + 5, smallbulletpoint_width, smallbulletpoint_height, smallbulletpoint);
+        }
+    }
+
+    int rightEdge = x + columnWidth - timeOffset;
+    int textWidth = display->getStringWidth(timeStr);
+    display->drawString(rightEdge - textWidth, y, timeStr);
+}
+
+void drawEntryHopSignal(OLEDDisplay *display, meshtastic_NodeInfoLite *node, int16_t x, int16_t y, int columnWidth)
+{
+    bool isLeftCol = (x < SCREEN_WIDTH / 2);
+
+    int nameMaxWidth = columnWidth - 25;
+    int barsOffset = (SCREEN_WIDTH > 128) ? (isLeftCol ? 16 : 20) : (isLeftCol ? 15 : 19);
+    int hopOffset = (SCREEN_WIDTH > 128) ? (isLeftCol ? 17 : 25) : (isLeftCol ? 13 : 17);
+
+    int barsXOffset = columnWidth - barsOffset;
+
+    String nodeName = getSafeNodeName(node);
+
+    display->setTextAlignment(TEXT_ALIGN_LEFT);
+    display->setFont(FONT_SMALL);
+
+    display->drawStringMaxWidth(x + ((SCREEN_WIDTH > 128) ? 6 : 3), y, nameMaxWidth, nodeName);
+    if (node->is_favorite) {
+        if (SCREEN_WIDTH > 128) {
+            drawScaledXBitmap16x16(x, y + 6, smallbulletpoint_width, smallbulletpoint_height, smallbulletpoint, display);
+        } else {
+            display->drawXbm(x, y + 5, smallbulletpoint_width, smallbulletpoint_height, smallbulletpoint);
+        }
+    }
+
+    // Draw signal strength bars
+    int bars = (node->snr > 5) ? 4 : (node->snr > 0) ? 3 : (node->snr > -5) ? 2 : (node->snr > -10) ? 1 : 0;
+    int barWidth = 2;
+    int barStartX = x + barsXOffset;
+    int barStartY = y + 1 + (FONT_HEIGHT_SMALL / 2) + 2;
+
+    for (int b = 0; b < 4; b++) {
+        if (b < bars) {
+            int height = (b * 2);
+            display->fillRect(barStartX + (b * (barWidth + 1)), barStartY - height, barWidth, height);
+        }
+    }
+
+    // Draw hop count
+    char hopStr[6] = "";
+    if (node->has_hops_away && node->hops_away > 0)
+        snprintf(hopStr, sizeof(hopStr), "[%d]", node->hops_away);
+
+    if (hopStr[0] != '\0') {
+        int rightEdge = x + columnWidth - hopOffset;
+        int textWidth = display->getStringWidth(hopStr);
+        display->drawString(rightEdge - textWidth, y, hopStr);
+    }
+}
+
+void drawNodeDistance(OLEDDisplay *display, meshtastic_NodeInfoLite *node, int16_t x, int16_t y, int columnWidth)
+{
+    bool isLeftCol = (x < SCREEN_WIDTH / 2);
+    int nameMaxWidth = columnWidth - (SCREEN_WIDTH > 128 ? (isLeftCol ? 25 : 28) : (isLeftCol ? 20 : 22));
+
+    String nodeName = getSafeNodeName(node);
+    char distStr[10] = "";
+
+    meshtastic_NodeInfoLite *ourNode = nodeDB->getMeshNode(nodeDB->getNodeNum());
+    if (nodeDB->hasValidPosition(ourNode) && nodeDB->hasValidPosition(node)) {
+        double lat1 = ourNode->position.latitude_i * 1e-7;
+        double lon1 = ourNode->position.longitude_i * 1e-7;
+        double lat2 = node->position.latitude_i * 1e-7;
+        double lon2 = node->position.longitude_i * 1e-7;
+
+        double earthRadiusKm = 6371.0;
+        double dLat = (lat2 - lat1) * DEG_TO_RAD;
+        double dLon = (lon2 - lon1) * DEG_TO_RAD;
+
+        double a =
+            sin(dLat / 2) * sin(dLat / 2) + cos(lat1 * DEG_TO_RAD) * cos(lat2 * DEG_TO_RAD) * sin(dLon / 2) * sin(dLon / 2);
+        double c = 2 * atan2(sqrt(a), sqrt(1 - a));
+        double distanceKm = earthRadiusKm * c;
+
+        if (config.display.units == meshtastic_Config_DisplayConfig_DisplayUnits_IMPERIAL) {
+            double miles = distanceKm * 0.621371;
+            if (miles < 0.1) {
+                int feet = (int)(miles * 5280);
+                if (feet < 1000)
+                    snprintf(distStr, sizeof(distStr), "%dft", feet);
+                else
+                    snprintf(distStr, sizeof(distStr), "¼mi"); // 4-char max
+            } else {
+                int roundedMiles = (int)(miles + 0.5);
+                if (roundedMiles < 1000)
+                    snprintf(distStr, sizeof(distStr), "%dmi", roundedMiles);
+                else
+                    snprintf(distStr, sizeof(distStr), "999"); // Max display cap
+            }
+        } else {
+            if (distanceKm < 1.0) {
+                int meters = (int)(distanceKm * 1000);
+                if (meters < 1000)
+                    snprintf(distStr, sizeof(distStr), "%dm", meters);
+                else
+                    snprintf(distStr, sizeof(distStr), "1k");
+            } else {
+                int km = (int)(distanceKm + 0.5);
+                if (km < 1000)
+                    snprintf(distStr, sizeof(distStr), "%dk", km);
+                else
+                    snprintf(distStr, sizeof(distStr), "999");
+            }
+        }
+    }
+
+    display->setTextAlignment(TEXT_ALIGN_LEFT);
+    display->setFont(FONT_SMALL);
+    display->drawStringMaxWidth(x + ((SCREEN_WIDTH > 128) ? 6 : 3), y, nameMaxWidth, nodeName);
+    if (node->is_favorite) {
+        if (SCREEN_WIDTH > 128) {
+            drawScaledXBitmap16x16(x, y + 6, smallbulletpoint_width, smallbulletpoint_height, smallbulletpoint, display);
+        } else {
+            display->drawXbm(x, y + 5, smallbulletpoint_width, smallbulletpoint_height, smallbulletpoint);
+        }
+    }
+
+    if (strlen(distStr) > 0) {
+        int offset = (SCREEN_WIDTH > 128) ? (isLeftCol ? 7 : 10) // Offset for Wide Screens (Left Column:Right Column)
+                                          : (isLeftCol ? 5 : 8); // Offset for Narrow Screens (Left Column:Right Column)
+        int rightEdge = x + columnWidth - offset;
+        int textWidth = display->getStringWidth(distStr);
+        display->drawString(rightEdge - textWidth, y, distStr);
+    }
+}
+
+void drawEntryDynamic(OLEDDisplay *display, meshtastic_NodeInfoLite *node, int16_t x, int16_t y, int columnWidth)
+{
+    switch (currentMode) {
+    case MODE_LAST_HEARD:
+        drawEntryLastHeard(display, node, x, y, columnWidth);
+        break;
+    case MODE_HOP_SIGNAL:
+        drawEntryHopSignal(display, node, x, y, columnWidth);
+        break;
+    case MODE_DISTANCE:
+        drawNodeDistance(display, node, x, y, columnWidth);
+        break;
+    default:
+        break;
+    }
+}
+
+void drawEntryCompass(OLEDDisplay *display, meshtastic_NodeInfoLite *node, int16_t x, int16_t y, int columnWidth)
+{
+    bool isLeftCol = (x < SCREEN_WIDTH / 2);
+
+    // Adjust max text width depending on column and screen width
+    int nameMaxWidth = columnWidth - (SCREEN_WIDTH > 128 ? (isLeftCol ? 25 : 28) : (isLeftCol ? 20 : 22));
+
+    String nodeName = getSafeNodeName(node);
+
+    display->setTextAlignment(TEXT_ALIGN_LEFT);
+    display->setFont(FONT_SMALL);
+    display->drawStringMaxWidth(x + ((SCREEN_WIDTH > 128) ? 6 : 3), y, nameMaxWidth, nodeName);
+    if (node->is_favorite) {
+        if (SCREEN_WIDTH > 128) {
+            drawScaledXBitmap16x16(x, y + 6, smallbulletpoint_width, smallbulletpoint_height, smallbulletpoint, display);
+        } else {
+            display->drawXbm(x, y + 5, smallbulletpoint_width, smallbulletpoint_height, smallbulletpoint);
+        }
+    }
+}
+
+void drawCompassArrow(OLEDDisplay *display, meshtastic_NodeInfoLite *node, int16_t x, int16_t y, int columnWidth, float myHeading,
+                      double userLat, double userLon)
+{
+    if (!nodeDB->hasValidPosition(node))
+        return;
+
+    bool isLeftCol = (x < SCREEN_WIDTH / 2);
+    int arrowXOffset = (SCREEN_WIDTH > 128) ? (isLeftCol ? 22 : 24) : (isLeftCol ? 12 : 18);
+
+    int centerX = x + columnWidth - arrowXOffset;
+    int centerY = y + FONT_HEIGHT_SMALL / 2;
+
+    double nodeLat = node->position.latitude_i * 1e-7;
+    double nodeLon = node->position.longitude_i * 1e-7;
+    float bearingToNode = calculateBearing(userLat, userLon, nodeLat, nodeLon);
+    float relativeBearing = fmod((bearingToNode - myHeading + 360), 360);
+    float angle = relativeBearing * DEG_TO_RAD;
+
+    // Shrink size by 2px
+    int size = FONT_HEIGHT_SMALL - 5;
+    float halfSize = size / 2.0;
+
+    // Point of the arrow
+    int tipX = centerX + halfSize * cos(angle);
+    int tipY = centerY - halfSize * sin(angle);
+
+    float baseAngle = radians(35);
+    float sideLen = halfSize * 0.95;
+    float notchInset = halfSize * 0.35;
+
+    // Left and right corners
+    int leftX = centerX + sideLen * cos(angle + PI - baseAngle);
+    int leftY = centerY - sideLen * sin(angle + PI - baseAngle);
+
+    int rightX = centerX + sideLen * cos(angle + PI + baseAngle);
+    int rightY = centerY - sideLen * sin(angle + PI + baseAngle);
+
+    // Center notch (cut-in)
+    int notchX = centerX - notchInset * cos(angle);
+    int notchY = centerY + notchInset * sin(angle);
+
+    // Draw the chevron-style arrowhead
+    display->fillTriangle(tipX, tipY, leftX, leftY, notchX, notchY);
+    display->fillTriangle(tipX, tipY, notchX, notchY, rightX, rightY);
+}
+
+// =============================
+// Main Screen Functions
+// =============================
+
+void drawNodeListScreen(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y, const char *title,
+                        EntryRenderer renderer, NodeExtrasRenderer extras, float heading, double lat, double lon)
+{
+    const int COMMON_HEADER_HEIGHT = FONT_HEIGHT_SMALL - 1;
+    const int rowYOffset = FONT_HEIGHT_SMALL - 3;
+
+    int columnWidth = display->getWidth() / 2;
+
+    display->clear();
+
+    // Draw the battery/time header
+    graphics::drawCommonHeader(display, x, y);
+
+    // Draw the centered title within the header
+    const int highlightHeight = COMMON_HEADER_HEIGHT;
+    const int textY = y + 1 + (highlightHeight - FONT_HEIGHT_SMALL) / 2;
+    const int centerX = x + SCREEN_WIDTH / 2;
+
+    display->setFont(FONT_SMALL);
+    display->setTextAlignment(TEXT_ALIGN_CENTER);
+
+    if (config.display.displaymode != meshtastic_Config_DisplayConfig_DisplayMode_INVERTED)
+        display->setColor(BLACK);
+
+    display->drawString(centerX, textY, title);
+    if (config.display.heading_bold)
+        display->drawString(centerX + 1, textY, title);
+
+    display->setColor(WHITE);
+    display->setTextAlignment(TEXT_ALIGN_LEFT);
+
+    // Space below header
+    y += COMMON_HEADER_HEIGHT;
+
+    // Fetch and display sorted node list
+    std::vector<NodeEntry> nodeList;
+    retrieveAndSortNodes(nodeList);
+
+    int totalEntries = nodeList.size();
+    int totalRowsAvailable = (display->getHeight() - y) / rowYOffset;
+#ifdef USE_EINK
+    totalRowsAvailable -= 1;
+#endif
+    int visibleNodeRows = totalRowsAvailable;
+    int totalColumns = 2;
+
+    int startIndex = scrollIndex * visibleNodeRows * totalColumns;
+    int endIndex = std::min(startIndex + visibleNodeRows * totalColumns, totalEntries);
+
+    int yOffset = 0;
+    int col = 0;
+    int lastNodeY = y;
+    int shownCount = 0;
+    int rowCount = 0;
+
+    for (int i = startIndex; i < endIndex; ++i) {
+        int xPos = x + (col * columnWidth);
+        int yPos = y + yOffset;
+        renderer(display, nodeList[i].node, xPos, yPos, columnWidth);
+
+        if (extras) {
+            extras(display, nodeList[i].node, xPos, yPos, columnWidth, heading, lat, lon);
+        }
+
+        lastNodeY = std::max(lastNodeY, yPos + FONT_HEIGHT_SMALL);
+        yOffset += rowYOffset;
+        shownCount++;
+        rowCount++;
+
+        if (rowCount >= totalRowsAvailable) {
+            yOffset = 0;
+            rowCount = 0;
+            col++;
+            if (col > (totalColumns - 1))
+                break;
+        }
+    }
+
+    // Draw column separator
+    if (shownCount > 0) {
+        const int firstNodeY = y + 3;
+        drawColumnSeparator(display, x, firstNodeY, lastNodeY);
+    }
+
+    const int scrollStartY = y + 3;
+    drawScrollbar(display, visibleNodeRows, totalEntries, scrollIndex, 2, scrollStartY);
+}
+
+// =============================
+// Screen Frame Functions
+// =============================
+
+#ifndef USE_EINK
+void drawDynamicNodeListScreen(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y)
+{
+    // Static variables to track mode and duration
+    static NodeListMode lastRenderedMode = MODE_COUNT;
+    static unsigned long modeStartTime = 0;
+
+    unsigned long now = millis();
+
+    // On very first call (on boot or state enter)
+    if (lastRenderedMode == MODE_COUNT) {
+        currentMode = MODE_LAST_HEARD;
+        modeStartTime = now;
+    }
+
+    // Time to switch to next mode?
+    if (now - modeStartTime >= getModeCycleIntervalMs()) {
+        currentMode = static_cast<NodeListMode>((currentMode + 1) % MODE_COUNT);
+        modeStartTime = now;
+    }
+
+    // Render screen based on currentMode
+    const char *title = getCurrentModeTitle(display->getWidth());
+    drawNodeListScreen(display, state, x, y, title, drawEntryDynamic);
+
+    // Track the last mode to avoid reinitializing modeStartTime
+    lastRenderedMode = currentMode;
+}
+#endif
+
+#ifdef USE_EINK
+void drawLastHeardScreen(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y)
+{
+    const char *title = "Node List";
+    drawNodeListScreen(display, state, x, y, title, drawEntryLastHeard);
+}
+
+void drawHopSignalScreen(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y)
+{
+    const char *title = "Hops/Signal";
+    drawNodeListScreen(display, state, x, y, title, drawEntryHopSignal);
+}
+
+void drawDistanceScreen(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y)
+{
+    const char *title = "Distance";
+    drawNodeListScreen(display, state, x, y, title, drawNodeDistance);
+}
+#endif
+
+void drawNodeListWithCompasses(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y)
+{
+    float heading = 0;
+    bool validHeading = false;
+    double lat = 0;
+    double lon = 0;
+
+#if HAS_GPS
+    if (screen->hasHeading()) {
+        heading = screen->getHeading(); // degrees
+        validHeading = true;
+    } else {
+        heading = screen->estimatedHeading(lat, lon);
+        validHeading = !isnan(heading);
+    }
+#endif
+
+    if (!validHeading)
+        return;
+
+    drawNodeListScreen(display, state, x, y, "Bearings", drawEntryCompass, drawCompassArrow, heading, lat, lon);
+}
+
+void drawNodeInfo(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y)
+{
+    // Cache favorite nodes for the current frame only, to save computation
+    static std::vector<meshtastic_NodeInfoLite *> favoritedNodes;
+    static int prevFrame = -1;
+
+    // Only rebuild favorites list if we're on a new frame
+    if (state->currentFrame != prevFrame) {
+        prevFrame = state->currentFrame;
+        favoritedNodes.clear();
+        size_t total = nodeDB->getNumMeshNodes();
+        for (size_t i = 0; i < total; i++) {
+            meshtastic_NodeInfoLite *n = nodeDB->getMeshNodeByIndex(i);
+            // Skip nulls and ourself
+            if (!n || n->num == nodeDB->getNodeNum())
+                continue;
+            if (n->is_favorite)
+                favoritedNodes.push_back(n);
+        }
+        // Keep a stable, consistent display order
+        std::sort(favoritedNodes.begin(), favoritedNodes.end(),
+                  [](meshtastic_NodeInfoLite *a, meshtastic_NodeInfoLite *b) { return a->num < b->num; });
+    }
+    if (favoritedNodes.empty())
+        return;
+
+    // Only display if index is valid
+    int nodeIndex = state->currentFrame - (screen->frameCount - favoritedNodes.size());
+    if (nodeIndex < 0 || nodeIndex >= (int)favoritedNodes.size())
+        return;
+
+    meshtastic_NodeInfoLite *node = favoritedNodes[nodeIndex];
+    if (!node || node->num == nodeDB->getNodeNum() || !node->is_favorite)
+        return;
+
+    display->clear();
+
+    // Draw battery/time/mail header (common across screens)
+    graphics::drawCommonHeader(display, x, y);
+
+    // Draw the short node name centered at the top, with bold shadow if set
+    const int highlightHeight = FONT_HEIGHT_SMALL - 1;
+    const int textY = y + 1 + (highlightHeight - FONT_HEIGHT_SMALL) / 2;
+    const int centerX = x + SCREEN_WIDTH / 2;
+    const char *shortName = (node->has_user && haveGlyphs(node->user.short_name)) ? node->user.short_name : "Node";
+
+    if (config.display.displaymode != meshtastic_Config_DisplayConfig_DisplayMode_INVERTED)
+        display->setColor(BLACK);
+    display->setTextAlignment(TEXT_ALIGN_CENTER);
+    display->setFont(FONT_SMALL);
+    display->drawString(centerX, textY, shortName);
+    if (config.display.heading_bold)
+        display->drawString(centerX + 1, textY, shortName);
+
+    display->setColor(WHITE);
+    display->setTextAlignment(TEXT_ALIGN_LEFT);
+    display->setFont(FONT_SMALL);
+
+    // Dynamic row stacking with predefined Y positions
+    const int yPositions[5] = {moreCompactFirstLine, moreCompactSecondLine, moreCompactThirdLine, moreCompactFourthLine,
+                               moreCompactFifthLine};
+    int line = 0;
+
+    // 1. Long Name (always try to show first)
+    const char *username = (node->has_user && node->user.long_name[0]) ? node->user.long_name : nullptr;
+    if (username && line < 5) {
+        display->drawString(x, yPositions[line++], username);
+    }
+
+    // 2. Signal and Hops (combined on one line, if available)
+    char signalHopsStr[32] = "";
+    bool haveSignal = false;
+    int percentSignal = clamp((int)((node->snr + 10) * 5), 0, 100);
+    const char *signalLabel = " Sig";
+
+    // If SNR looks reasonable, show signal
+    if ((int)((node->snr + 10) * 5) >= 0 && node->snr > -100) {
+        snprintf(signalHopsStr, sizeof(signalHopsStr), "%s: %d%%", signalLabel, percentSignal);
+        haveSignal = true;
+    }
+    // If hops is valid (>0), show right after signal
+    if (node->hops_away > 0) {
+        size_t len = strlen(signalHopsStr);
+        if (haveSignal) {
+            snprintf(signalHopsStr + len, sizeof(signalHopsStr) - len, " [%d %s]", node->hops_away,
+                     (node->hops_away == 1 ? "Hop" : "Hops"));
+        } else {
+            snprintf(signalHopsStr, sizeof(signalHopsStr), "[%d %s]", node->hops_away, (node->hops_away == 1 ? "Hop" : "Hops"));
+        }
+    }
+    if (signalHopsStr[0] && line < 5) {
+        display->drawString(x, yPositions[line++], signalHopsStr);
+    }
+
+    // 3. Heard (last seen, skip if node never seen)
+    char seenStr[20] = "";
+    uint32_t seconds = sinceLastSeen(node);
+    if (seconds != 0 && seconds != UINT32_MAX) {
+        uint32_t minutes = seconds / 60, hours = minutes / 60, days = hours / 24;
+        snprintf(seenStr, sizeof(seenStr), (days > 365 ? " Heard: ?" : " Heard: %d%c ago"),
+                 (days    ? days
+                  : hours ? hours
+                          : minutes),
+                 (days    ? 'd'
+                  : hours ? 'h'
+                          : 'm'));
+    }
+    if (seenStr[0] && line < 5) {
+        display->drawString(x, yPositions[line++], seenStr);
+    }
+
+    // 4. Uptime (only show if metric is present)
+    char uptimeStr[32] = "";
+    if (node->has_device_metrics && node->device_metrics.has_uptime_seconds) {
+        uint32_t uptime = node->device_metrics.uptime_seconds;
+        uint32_t days = uptime / 86400;
+        uint32_t hours = (uptime % 86400) / 3600;
+        uint32_t mins = (uptime % 3600) / 60;
+
+        if (days > 0) {
+            snprintf(uptimeStr, sizeof(uptimeStr), " Uptime: %dd %dh", days, hours);
+        } else if (hours > 0) {
+            snprintf(uptimeStr, sizeof(uptimeStr), " Uptime: %dh %dm", hours, mins);
+        } else {
+            snprintf(uptimeStr, sizeof(uptimeStr), " Uptime: %dm", mins);
+        }
+    }
+    if (uptimeStr[0] && line < 5) {
+        display->drawString(x, yPositions[line++], uptimeStr);
+    }
+
+    // 5. Distance (only if both nodes have GPS position)
+    meshtastic_NodeInfoLite *ourNode = nodeDB->getMeshNode(nodeDB->getNodeNum());
+    char distStr[24] = "";
+    bool haveDistance = false;
+
+    if (nodeDB->hasValidPosition(ourNode) && nodeDB->hasValidPosition(node)) {
+        double lat1 = ourNode->position.latitude_i * 1e-7;
+        double lon1 = ourNode->position.longitude_i * 1e-7;
+        double lat2 = node->position.latitude_i * 1e-7;
+        double lon2 = node->position.longitude_i * 1e-7;
+
+        double earthRadiusKm = 6371.0;
+        double dLat = (lat2 - lat1) * DEG_TO_RAD;
+        double dLon = (lon2 - lon1) * DEG_TO_RAD;
+
+        double a =
+            sin(dLat / 2) * sin(dLat / 2) + cos(lat1 * DEG_TO_RAD) * cos(lat2 * DEG_TO_RAD) * sin(dLon / 2) * sin(dLon / 2);
+        double c = 2 * atan2(sqrt(a), sqrt(1 - a));
+        double distanceKm = earthRadiusKm * c;
+
+        // Format distance appropriately
+        if (distanceKm < 1.0) {
+            double miles = distanceKm * 0.621371;
+            if (miles < 0.1) {
+                int feet = (int)(miles * 5280);
+                if (feet > 0 && feet < 1000) {
+                    snprintf(distStr, sizeof(distStr), " Distance: %dft", feet);
+                    haveDistance = true;
+                } else if (feet >= 1000) {
+                    snprintf(distStr, sizeof(distStr), " Distance: ¼mi");
+                    haveDistance = true;
+                }
+            } else {
+                int roundedMiles = (int)(miles + 0.5);
+                if (roundedMiles > 0 && roundedMiles < 1000) {
+                    snprintf(distStr, sizeof(distStr), " Distance: %dmi", roundedMiles);
+                    haveDistance = true;
+                }
+            }
+        } else {
+            int km = (int)(distanceKm + 0.5);
+            if (km > 0 && km < 1000) {
+                snprintf(distStr, sizeof(distStr), " Distance: %dkm", km);
+                haveDistance = true;
+            }
+        }
+    }
+    // Only display if we actually have a value!
+    if (haveDistance && distStr[0] && line < 5) {
+        display->drawString(x, yPositions[line++], distStr);
+    }
+
+    // Compass rendering for different screen orientations
+    if (SCREEN_WIDTH > SCREEN_HEIGHT) {
+        // Landscape: side-aligned compass
+        bool showCompass = false;
+        if (ourNode && (nodeDB->hasValidPosition(ourNode) || screen->hasHeading()) && nodeDB->hasValidPosition(node)) {
+            showCompass = true;
+        }
+        if (showCompass) {
+            const int16_t topY = compactFirstLine;
+            const int16_t bottomY = SCREEN_HEIGHT - (FONT_HEIGHT_SMALL - 1);
+            const int16_t usableHeight = bottomY - topY - 5;
+            int16_t compassRadius = usableHeight / 2;
+            if (compassRadius < 8)
+                compassRadius = 8;
+            const int16_t compassDiam = compassRadius * 2;
+            const int16_t compassX = x + SCREEN_WIDTH - compassRadius - 8;
+            const int16_t compassY = topY + (usableHeight / 2) + ((FONT_HEIGHT_SMALL - 1) / 2) + 2;
+
+            const auto &op = ourNode->position;
+            float myHeading = screen->hasHeading() ? screen->getHeading() * PI / 180
+                                                   : screen->estimatedHeading(DegD(op.latitude_i), DegD(op.longitude_i));
+            CompassRenderer::drawCompassNorth(display, compassX, compassY, myHeading);
+
+            const auto &p = node->position;
+            float bearing = GeoCoord::bearing(DegD(op.latitude_i), DegD(op.longitude_i), DegD(p.latitude_i), DegD(p.longitude_i));
+            if (!config.display.compass_north_top)
+                bearing -= myHeading;
+            CompassRenderer::drawNodeHeading(display, compassX, compassY, compassDiam, bearing);
+
+            display->drawCircle(compassX, compassY, compassRadius);
+        }
+    } else {
+        // Portrait: bottom-centered compass
+        bool showCompass = false;
+        if (ourNode && (nodeDB->hasValidPosition(ourNode) || screen->hasHeading()) && nodeDB->hasValidPosition(node)) {
+            showCompass = true;
+        }
+        if (showCompass) {
+            int yBelowContent = (line > 0 && line <= 5) ? (yPositions[line - 1] + FONT_HEIGHT_SMALL + 2) : moreCompactFirstLine;
+
+            const int margin = 4;
+#if defined(USE_EINK)
+            const int iconSize = (SCREEN_WIDTH > 128) ? 16 : 8;
+            const int navBarHeight = iconSize + 6;
+#else
+            const int navBarHeight = 0;
+#endif
+            int availableHeight = SCREEN_HEIGHT - yBelowContent - navBarHeight - margin;
+
+            if (availableHeight < FONT_HEIGHT_SMALL * 2)
+                return;
+
+            int compassRadius = availableHeight / 2;
+            if (compassRadius < 8)
+                compassRadius = 8;
+            if (compassRadius * 2 > SCREEN_WIDTH - 16)
+                compassRadius = (SCREEN_WIDTH - 16) / 2;
+
+            int compassX = x + SCREEN_WIDTH / 2;
+            int compassY = yBelowContent + availableHeight / 2;
+
+            const auto &op = ourNode->position;
+            float myHeading = screen->hasHeading() ? screen->getHeading() * PI / 180
+                                                   : screen->estimatedHeading(DegD(op.latitude_i), DegD(op.longitude_i));
+            CompassRenderer::drawCompassNorth(display, compassX, compassY, myHeading);
+
+            const auto &p = node->position;
+            float bearing = GeoCoord::bearing(DegD(op.latitude_i), DegD(op.longitude_i), DegD(p.latitude_i), DegD(p.longitude_i));
+            if (!config.display.compass_north_top)
+                bearing -= myHeading;
+            CompassRenderer::drawNodeHeading(display, compassX, compassY, compassRadius * 2, bearing);
+
+            display->drawCircle(compassX, compassY, compassRadius);
+        }
+    }
+}
+
+/// Draw a series of fields in a column, wrapping to multiple columns if needed
+void drawColumns(OLEDDisplay *display, int16_t x, int16_t y, const char **fields)
+{
+    // The coordinates define the left starting point of the text
+    display->setTextAlignment(TEXT_ALIGN_LEFT);
+
+    const char **f = fields;
+    int xo = x, yo = y;
+    while (*f) {
+        display->drawString(xo, yo, *f);
+        if ((display->getColor() == BLACK) && config.display.heading_bold)
+            display->drawString(xo + 1, yo, *f);
+
+        display->setColor(WHITE);
+        yo += FONT_HEIGHT_SMALL;
+        if (yo > SCREEN_HEIGHT - FONT_HEIGHT_SMALL) {
+            xo += SCREEN_WIDTH / 2;
+            yo = 0;
+        }
+        f++;
+    }
+}
+
+} // namespace NodeListRenderer
+} // namespace graphics

src/graphics/draw/NodeListRenderer.h

@@ -0,0 +1,71 @@
+#pragma once
+
+#include "graphics/Screen.h"
+#include "mesh/generated/meshtastic/mesh.pb.h"
+#include <OLEDDisplay.h>
+#include <OLEDDisplayUi.h>
+
+namespace graphics
+{
+
+/// Forward declarations
+class Screen;
+
+/**
+ * @brief Node list and entry rendering functions
+ *
+ * Contains all functions related to drawing node lists and individual node entries
+ * including last heard, hop signal, distance, and compass views.
+ */
+namespace NodeListRenderer
+{
+// Entry renderer function types
+typedef void (*EntryRenderer)(OLEDDisplay *, meshtastic_NodeInfoLite *, int16_t, int16_t, int);
+typedef void (*NodeExtrasRenderer)(OLEDDisplay *, meshtastic_NodeInfoLite *, int16_t, int16_t, int, float, double, double);
+
+// Node entry structure
+struct NodeEntry {
+    meshtastic_NodeInfoLite *node;
+    uint32_t sortValue;
+};
+
+// Node list mode enumeration
+enum NodeListMode { MODE_LAST_HEARD = 0, MODE_HOP_SIGNAL = 1, MODE_DISTANCE = 2, MODE_COUNT = 3 };
+
+// Main node list screen function
+void drawNodeListScreen(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y, const char *title,
+                        EntryRenderer renderer, NodeExtrasRenderer extras = nullptr, float heading = 0, double lat = 0,
+                        double lon = 0);
+
+// Entry renderers
+void drawEntryLastHeard(OLEDDisplay *display, meshtastic_NodeInfoLite *node, int16_t x, int16_t y, int columnWidth);
+void drawEntryHopSignal(OLEDDisplay *display, meshtastic_NodeInfoLite *node, int16_t x, int16_t y, int columnWidth);
+void drawNodeDistance(OLEDDisplay *display, meshtastic_NodeInfoLite *node, int16_t x, int16_t y, int columnWidth);
+void drawEntryDynamic(OLEDDisplay *display, meshtastic_NodeInfoLite *node, int16_t x, int16_t y, int columnWidth);
+void drawEntryCompass(OLEDDisplay *display, meshtastic_NodeInfoLite *node, int16_t x, int16_t y, int columnWidth);
+
+// Extras renderers
+void drawCompassArrow(OLEDDisplay *display, meshtastic_NodeInfoLite *node, int16_t x, int16_t y, int columnWidth, float myHeading,
+                      double userLat, double userLon);
+
+// Screen frame functions
+void drawLastHeardScreen(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+void drawHopSignalScreen(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+void drawDistanceScreen(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+void drawDynamicNodeListScreen(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+void drawNodeListWithCompasses(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+void drawNodeInfo(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+
+// Utility functions
+const char *getCurrentModeTitle(int screenWidth);
+void retrieveAndSortNodes(std::vector<NodeEntry> &nodeList);
+String getSafeNodeName(meshtastic_NodeInfoLite *node);
+uint32_t sinceLastSeen(meshtastic_NodeInfoLite *node);
+void drawColumns(OLEDDisplay *display, int16_t x, int16_t y, const char **fields);
+
+// Bitmap drawing function
+void drawScaledXBitmap16x16(int x, int y, int width, int height, const uint8_t *bitmapXBM, OLEDDisplay *display);
+
+} // namespace NodeListRenderer
+
+} // namespace graphics

src/graphics/draw/NotificationRenderer.cpp

@@ -0,0 +1,177 @@
+#include "NotificationRenderer.h"
+#include "DisplayFormatters.h"
+#include "NodeDB.h"
+#include "configuration.h"
+#include "graphics/ScreenFonts.h"
+#include "graphics/SharedUIDisplay.h"
+#include "graphics/images.h"
+#include "main.h"
+#include <algorithm>
+#include <string>
+#include <vector>
+
+#ifdef ARCH_ESP32
+#include "esp_task_wdt.h"
+#endif
+
+using namespace meshtastic;
+
+// External references to global variables from Screen.cpp
+extern String alertBannerMessage;
+extern uint32_t alertBannerUntil;
+extern std::vector<std::string> functionSymbol;
+extern std::string functionSymbolString;
+extern bool hasUnreadMessage;
+
+namespace graphics
+{
+
+namespace NotificationRenderer
+{
+
+// Used on boot when a certificate is being created
+void NotificationRenderer::drawSSLScreen(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y)
+{
+    display->setTextAlignment(TEXT_ALIGN_CENTER);
+    display->setFont(FONT_SMALL);
+    display->drawString(64 + x, y, "Creating SSL certificate");
+
+#ifdef ARCH_ESP32
+    yield();
+    esp_task_wdt_reset();
+#endif
+
+    display->setFont(FONT_SMALL);
+    if ((millis() / 1000) % 2) {
+        display->drawString(64 + x, FONT_HEIGHT_SMALL + y + 2, "Please wait . . .");
+    } else {
+        display->drawString(64 + x, FONT_HEIGHT_SMALL + y + 2, "Please wait . .  ");
+    }
+}
+
+// Used when booting without a region set
+void NotificationRenderer::drawWelcomeScreen(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y)
+{
+    display->setFont(FONT_SMALL);
+    display->setTextAlignment(TEXT_ALIGN_CENTER);
+    display->drawString(64 + x, y, "//\\ E S H T /\\ S T / C");
+    display->drawString(64 + x, y + FONT_HEIGHT_SMALL, getDeviceName());
+    display->setTextAlignment(TEXT_ALIGN_LEFT);
+
+    if ((millis() / 10000) % 2) {
+        display->drawString(x, y + FONT_HEIGHT_SMALL * 2 - 3, "Set the region using the");
+        display->drawString(x, y + FONT_HEIGHT_SMALL * 3 - 3, "Meshtastic Android, iOS,");
+        display->drawString(x, y + FONT_HEIGHT_SMALL * 4 - 3, "Web or CLI clients.");
+    } else {
+        display->drawString(x, y + FONT_HEIGHT_SMALL * 2 - 3, "Visit meshtastic.org");
+        display->drawString(x, y + FONT_HEIGHT_SMALL * 3 - 3, "for more information.");
+        display->drawString(x, y + FONT_HEIGHT_SMALL * 4 - 3, "");
+    }
+
+#ifdef ARCH_ESP32
+    yield();
+    esp_task_wdt_reset();
+#endif
+}
+
+void NotificationRenderer::drawAlertBannerOverlay(OLEDDisplay *display, OLEDDisplayUiState *state)
+{
+    // Exit if no message is active or duration has passed
+    if (alertBannerMessage.length() == 0 || (alertBannerUntil != 0 && millis() > alertBannerUntil))
+        return;
+
+    // === Layout Configuration ===
+    constexpr uint16_t padding = 5;    // Padding around text inside the box
+    constexpr uint8_t lineSpacing = 1; // Extra space between lines
+
+    // Search the message to determine if we need the bell added
+    bool needs_bell = (alertBannerMessage.indexOf("Alert Received") != -1);
+
+    // Setup font and alignment
+    display->setFont(FONT_SMALL);
+    display->setTextAlignment(TEXT_ALIGN_LEFT); // We will manually center per line
+
+    // === Split the message into lines (supports multi-line banners) ===
+    std::vector<String> lines;
+    int start = 0, newlineIdx;
+    while ((newlineIdx = alertBannerMessage.indexOf('\n', start)) != -1) {
+        lines.push_back(alertBannerMessage.substring(start, newlineIdx));
+        start = newlineIdx + 1;
+    }
+    lines.push_back(alertBannerMessage.substring(start));
+
+    // === Measure text dimensions ===
+    uint16_t minWidth = (SCREEN_WIDTH > 128) ? 106 : 78;
+    uint16_t maxWidth = 0;
+    std::vector<uint16_t> lineWidths;
+    for (const auto &line : lines) {
+        uint16_t w = display->getStringWidth(line.c_str(), line.length(), true);
+        lineWidths.push_back(w);
+        if (w > maxWidth)
+            maxWidth = w;
+    }
+
+    uint16_t boxWidth = padding * 2 + maxWidth;
+    if (needs_bell && boxWidth < minWidth)
+        boxWidth += (SCREEN_WIDTH > 128) ? 26 : 20;
+
+    uint16_t boxHeight = padding * 2 + lines.size() * FONT_HEIGHT_SMALL + (lines.size() - 1) * lineSpacing;
+
+    int16_t boxLeft = (display->width() / 2) - (boxWidth / 2);
+    int16_t boxTop = (display->height() / 2) - (boxHeight / 2);
+
+    // === Draw background box ===
+    display->setColor(BLACK);
+    display->fillRect(boxLeft - 1, boxTop - 1, boxWidth + 2, boxHeight + 2); // Slightly oversized box
+    display->setColor(WHITE);
+    display->drawRect(boxLeft, boxTop, boxWidth, boxHeight); // Border
+
+    // === Draw each line centered in the box ===
+    int16_t lineY = boxTop + padding;
+    for (size_t i = 0; i < lines.size(); ++i) {
+        int16_t textX = boxLeft + (boxWidth - lineWidths[i]) / 2;
+        uint16_t line_width = display->getStringWidth(lines[i].c_str(), lines[i].length(), true);
+
+        if (needs_bell && i == 0) {
+            int bellY = lineY + (FONT_HEIGHT_SMALL - 8) / 2;
+            display->drawXbm(textX - 10, bellY, 8, 8, bell_alert);
+            display->drawXbm(textX + line_width + 2, bellY, 8, 8, bell_alert);
+        }
+
+        display->drawString(textX, lineY, lines[i]);
+        if (SCREEN_WIDTH > 128)
+            display->drawString(textX + 1, lineY, lines[i]); // Faux bold
+
+        lineY += FONT_HEIGHT_SMALL + lineSpacing;
+    }
+}
+
+/// Draw the last text message we received
+void NotificationRenderer::drawCriticalFaultFrame(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y)
+{
+    display->setTextAlignment(TEXT_ALIGN_LEFT);
+    display->setFont(FONT_MEDIUM);
+
+    char tempBuf[24];
+    snprintf(tempBuf, sizeof(tempBuf), "Critical fault #%d", error_code);
+    display->drawString(0 + x, 0 + y, tempBuf);
+    display->setTextAlignment(TEXT_ALIGN_LEFT);
+    display->setFont(FONT_SMALL);
+    display->drawString(0 + x, FONT_HEIGHT_MEDIUM + y, "For help, please visit \nmeshtastic.org");
+}
+
+void NotificationRenderer::drawFrameFirmware(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y)
+{
+    display->setTextAlignment(TEXT_ALIGN_CENTER);
+    display->setFont(FONT_MEDIUM);
+    display->drawString(64 + x, y, "Updating");
+
+    display->setFont(FONT_SMALL);
+    display->setTextAlignment(TEXT_ALIGN_LEFT);
+    display->drawStringMaxWidth(0 + x, 2 + y + FONT_HEIGHT_SMALL * 2, x + display->getWidth(),
+                                "Please be patient and do not power off.");
+}
+
+} // namespace NotificationRenderer
+
+} // namespace graphics

src/graphics/draw/NotificationRenderer.h

@@ -0,0 +1,24 @@
+#pragma once
+
+#include "OLEDDisplay.h"
+#include "OLEDDisplayUi.h"
+
+namespace graphics
+{
+
+namespace NotificationRenderer
+{
+
+class NotificationRenderer
+{
+  public:
+    static void drawAlertBannerOverlay(OLEDDisplay *display, OLEDDisplayUiState *state);
+    static void drawCriticalFaultFrame(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+    static void drawSSLScreen(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+    static void drawWelcomeScreen(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+    static void drawFrameFirmware(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+};
+
+} // namespace NotificationRenderer
+
+} // namespace graphics

src/graphics/draw/UIRenderer.h

@@ -0,0 +1,92 @@
+#pragma once
+
+#include "graphics/Screen.h"
+#include "graphics/emotes.h"
+#include <OLEDDisplay.h>
+#include <OLEDDisplayUi.h>
+#include <string>
+
+#define HOURS_IN_MONTH 730
+
+// Forward declarations for status types
+namespace meshtastic
+{
+class PowerStatus;
+class NodeStatus;
+class GPSStatus;
+} // namespace meshtastic
+
+namespace graphics
+{
+
+/// Forward declarations
+class Screen;
+
+/**
+ * @brief UI utility drawing functions
+ *
+ * Contains utility functions for drawing common UI elements, overlays,
+ * battery indicators, and other shared graphical components.
+ */
+namespace UIRenderer
+{
+// Common UI elements
+void drawCommonHeader(OLEDDisplay *display, int16_t x, int16_t y);
+void drawBattery(OLEDDisplay *display, int16_t x, int16_t y, uint8_t *imgBuffer, const meshtastic::PowerStatus *powerStatus);
+void drawNodes(OLEDDisplay *display, int16_t x, int16_t y, const meshtastic::NodeStatus *nodeStatus, int node_offset = 0,
+               bool show_total = true, String additional_words = "");
+
+// GPS status functions
+void drawGps(OLEDDisplay *display, int16_t x, int16_t y, const meshtastic::GPSStatus *gpsStatus);
+void drawGpsCoordinates(OLEDDisplay *display, int16_t x, int16_t y, const meshtastic::GPSStatus *gpsStatus);
+void drawGpsAltitude(OLEDDisplay *display, int16_t x, int16_t y, const meshtastic::GPSStatus *gpsStatus);
+void drawGpsPowerStatus(OLEDDisplay *display, int16_t x, int16_t y, const meshtastic::GPSStatus *gpsStatus);
+
+// Layout and utility functions
+void drawScrollbar(OLEDDisplay *display, int visibleItems, int totalItems, int scrollIndex, int x, int startY);
+
+// Overlay and special screens
+void drawFrameText(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y, const char *text);
+
+// Function overlay for showing mute/buzzer modifiers etc.
+void drawFunctionOverlay(OLEDDisplay *display, OLEDDisplayUiState *state);
+
+// Navigation bar overlay
+void drawNavigationBar(OLEDDisplay *display, OLEDDisplayUiState *state);
+
+void drawNodeInfo(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+
+void drawDeviceFocused(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+
+// Icon and screen drawing functions
+void drawIconScreen(const char *upperMsg, OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+
+// Compass and location screen
+void drawCompassAndLocationScreen(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+
+// OEM screens
+#ifdef USERPREFS_OEM_TEXT
+void drawOEMIconScreen(const char *upperMsg, OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+void drawOEMBootScreen(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+#endif
+
+#ifdef USE_EINK
+/// Used on eink displays while in deep sleep
+void drawDeepSleepFrame(OLEDDisplay *display, OLEDDisplayUiState *state, int16_t x, int16_t y);
+
+/// Used on eink displays when screen updates are paused
+void drawScreensaverOverlay(OLEDDisplay *display, OLEDDisplayUiState *state);
+#endif
+
+// Time and date utilities
+void getTimeAgoStr(uint32_t agoSecs, char *timeStr, uint8_t maxLength);
+std::string drawTimeDelta(uint32_t days, uint32_t hours, uint32_t minutes, uint32_t seconds);
+int formatDateTime(char *buffer, size_t bufferSize, uint32_t rtc_sec, OLEDDisplay *display, bool showTime);
+
+// Message filtering
+bool shouldDrawMessage(const meshtastic_MeshPacket *packet);
+// Check if the display can render a string (detect special chars; emoji)
+bool haveGlyphs(const char *str);
+} // namespace UIRenderer
+
+} // namespace graphics

src/modules/WaypointModule.cpp

@@ -2,9 +2,12 @@
 #include "NodeDB.h"
 #include "PowerFSM.h"
 #include "configuration.h"
+#include "graphics/draw/CompassRenderer.h"
+
 #if HAS_SCREEN
 #include "gps/RTC.h"
 #include "graphics/Screen.h"
+#include "graphics/draw/NodeListRenderer.h"
 #include "main.h"
 #endif
 
@@ -119,7 +122,7 @@ void WaypointModule::drawFrame(OLEDDisplay *display, OLEDDisplayUiState *state,
 
     // Dimensions / co-ordinates for the compass/circle
     int16_t compassX = 0, compassY = 0;
-    uint16_t compassDiam = graphics::Screen::getCompassDiam(display->getWidth(), display->getHeight());
+    uint16_t compassDiam = graphics::CompassRenderer::getCompassDiam(display->getWidth(), display->getHeight());
 
     if (config.display.displaymode == meshtastic_Config_DisplayConfig_DisplayMode_DEFAULT) {
         compassX = x + display->getWidth() - compassDiam / 2 - 5;
@@ -137,7 +140,7 @@ void WaypointModule::drawFrame(OLEDDisplay *display, OLEDDisplayUiState *state,
             myHeading = (screen->getHeading()) * PI / 180; // gotta convert compass degrees to Radians
         else
             myHeading = screen->estimatedHeading(DegD(op.latitude_i), DegD(op.longitude_i));
-        screen->drawCompassNorth(display, compassX, compassY, myHeading);
+        graphics::CompassRenderer::drawCompassNorth(display, compassX, compassY, myHeading);
 
         // Compass bearing to waypoint
         float bearingToOther =
@@ -146,7 +149,7 @@ void WaypointModule::drawFrame(OLEDDisplay *display, OLEDDisplayUiState *state,
         // If the top of the compass is not a static north we need adjust bearingToOther based on heading
         if (!config.display.compass_north_top)
             bearingToOther -= myHeading;
-        screen->drawNodeHeading(display, compassX, compassY, compassDiam, bearingToOther);
+        graphics::CompassRenderer::drawNodeHeading(display, compassX, compassY, compassDiam, bearingToOther);
 
         float bearingToOtherDegrees = (bearingToOther < 0) ? bearingToOther + 2 * PI : bearingToOther;
         bearingToOtherDegrees = bearingToOtherDegrees * 180 / PI;
@@ -189,6 +192,6 @@ void WaypointModule::drawFrame(OLEDDisplay *display, OLEDDisplayUiState *state,
     }
 
     // Must be after distStr is populated
-    screen->drawColumns(display, x, y, fields);
+    graphics::NodeListRenderer::drawColumns(display, x, y, fields);
 }
 #endif

src/motion/MotionSensor.cpp

@@ -1,4 +1,5 @@
 #include "MotionSensor.h"
+#include "graphics/draw/CompassRenderer.h"
 
 #if !defined(ARCH_STM32WL) && !MESHTASTIC_EXCLUDE_I2C
 
@@ -48,7 +49,7 @@ void MotionSensor::drawFrameCalibration(OLEDDisplay *display, OLEDDisplayUiState
     display->drawString(x, y + 40, timeRemainingBuffer);
 
     int16_t compassX = 0, compassY = 0;
-    uint16_t compassDiam = graphics::Screen::getCompassDiam(display->getWidth(), display->getHeight());
+    uint16_t compassDiam = graphics::CompassRenderer::getCompassDiam(display->getWidth(), display->getHeight());
 
     // coordinates for the center of the compass/circle
     if (config.display.displaymode == meshtastic_Config_DisplayConfig_DisplayMode_DEFAULT) {
@@ -59,7 +60,7 @@ void MotionSensor::drawFrameCalibration(OLEDDisplay *display, OLEDDisplayUiState
         compassY = y + FONT_HEIGHT_SMALL + (display->getHeight() - FONT_HEIGHT_SMALL) / 2;
     }
     display->drawCircle(compassX, compassY, compassDiam / 2);
-    screen->drawCompassNorth(display, compassX, compassY, screen->getHeading() * PI / 180);
+    graphics::CompassRenderer::drawCompassNorth(display, compassX, compassY, screen->getHeading() * PI / 180);
 }
 #endif